feat: MCP website revamp

package.json

@@ -46,6 +46,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.5",
+    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/react": "^1.1.10",
     "@tabler/icons-react": "^3.45.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/inquirer": "^9.0.10",

src/ui-app/components/landing/CTABanner.tsx

@@ -4,15 +4,27 @@ import { Link } from "../ui/Link";
 export function CTABanner() {
   return (
     <div
-      className="mb-4 md:mb-8 w-full shrink-0"
-      style={{
-        background: "linear-gradient(180deg, rgba(241, 231, 255, 0.8) 0%, #FFFFFF 100%)",
-      }}
+      className="mb-[76px] w-full shrink-0 border-y border-dashed border-[#b0b0b0] bg-[#fafafa] md:mb-0 md:border-x-0 md:border-b-0 md:border-t md:border-solid md:border-[#e7e7e7]"
     >
-      <div className="flex flex-col items-center justify-center py-24 md:py-32 px-4">
+      <div className="flex flex-col items-center justify-center px-6 py-10 md:hidden">
+        <div className="flex max-w-[364px] flex-col items-center gap-6 text-center">
+          <div className="flex flex-col gap-3">
+            <h2 className="section-heading text-[28px] leading-[34px]">
+              See your data in <span className="text-[#1f40ed]">a new light</span>
+            </h2>
+            <p className="text-sm leading-[18px] text-[#6d6d6d]">
+              Parseable unifies telemetry data, keeps full-fidelity data queryable. It all lives in open formats on object store with your complete control and ownership.
+            </p>
+          </div>
+          <Link href="https://app.parseable.com" target="_blank" rel="noopener noreferrer" className="flex h-[43px] w-full items-center justify-center rounded-lg bg-[#1f40ed] text-base font-medium text-white">
+            Explore more
+          </Link>
+        </div>
+      </div>
+      <div className="hidden flex-col items-center justify-center py-24 px-6 md:flex">
         <div className="flex flex-col items-center gap-6 text-center max-w-3xl">
-          <h2 className="font-sans text-[3.5rem] font-medium leading-[107%] tracking-tight text-[#2F2F37]">
-            Your observability data deserves better than a dashboard
+          <h2 className="section-heading text-[40px] leading-[48px] tracking-[-0.03em]">
+            Your Observability data <span className="text-[#1f40ed]">deserves better than a dashboard</span>
           </h2>
           <p className="font-inter text-base font-normal text-black/60 leading-7 max-w-xl">
             Connect Parseable to Claude, Cursor, or any MCP-compatible agent and investigate incidents across logs, metrics, traces, and alerts - in natural language, without switching context.

src/ui-app/components/landing/FeatureGrid.tsx

@@ -1,105 +1,72 @@
 import {
-  IconBell,
-  IconBolt,
-  IconDatabase,
-  IconEye,
-  IconSearch,
-  IconShieldCheck,
-} from "@tabler/icons-react";
+  Alert01Icon,
+  BoltIcon,
+  ChatSearch01Icon,
+  EyeIcon,
+  Search01Icon,
+  ShieldCheckIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
 
 const FEATURES = [
   {
-    icon: <IconSearch size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#3A3A8C",
-    iconBg: "rgba(58,58,140,0.08)",
+    icon: ChatSearch01Icon,
+    mobileOrder: "order-1",
     title: "Natural language querying",
-    desc: "Ask questions in plain English. The server translates them to SQL and runs against your Parseable datasets.",
+    description: "Ask questions in plain English. The server translates them to SQL and runs against your Parseable datasets.",
   },
   {
-    icon: <IconBolt size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#D97706",
-    iconBg: "rgba(217,119,6,0.08)",
+    icon: Search01Icon,
+    mobileOrder: "order-2",
     title: "Sub-second search",
-    desc: "Full-fidelity queries across millions of log events, powered by Parseable's columnar storage engine.",
+    description: "Full-fidelity queries across millions of log events, powered by Parseable's columnar storage engine.",
   },
   {
-    icon: <IconDatabase size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#0891B2",
-    iconBg: "rgba(8,145,178,0.08)",
+    icon: BoltIcon,
+    mobileOrder: "order-6",
     title: "Full tool surface",
-    desc: "Your Parseable instance publishes its live OSS, Enterprise, or Cloud tool catalog.",
+    description: "Your Parseable instance publishes its live OSS, Enterprise, or Cloud tool catalog.",
   },
   {
-    icon: <IconShieldCheck size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#059669",
-    iconBg: "rgba(5,150,105,0.08)",
+    icon: ShieldCheckIcon,
+    mobileOrder: "order-3",
     title: "Direct API key authentication",
-    desc: "Connects to your Parseable instance using its URL and API key headers. No OAuth flow or separate account required.",
+    description: "Connects to your Parseable instance using its URL and API key headers. No OAuth flow or separate account required.",
   },
   {
-    icon: <IconEye size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#7C3AED",
-    iconBg: "rgba(124,58,237,0.08)",
+    icon: EyeIcon,
+    mobileOrder: "order-4",
     title: "Dashboard-free investigation",
-    desc: "Debug production incidents, find anomalies, and correlate signals without switching context.",
+    description: "Debug production incidents, find anomalies, and correlate signals without switching context.",
   },
   {
-    icon: <IconBell size={20} stroke={1.5} aria-hidden="true" />,
-    iconColor: "#DC2626",
-    iconBg: "rgba(220,38,38,0.08)",
+    icon: Alert01Icon,
+    mobileOrder: "order-5",
     title: "Safety rails built in",
-    desc: "Parseable validates tool input and enforces RBAC at execution time.",
+    description: "Parseable validates tool input and enforces RBAC at execution time.",
   },
 ];
 
 export function FeatureGrid() {
   return (
-    <section
-      className="mt-40 w-full"
-      style={{
-        background:
-          "linear-gradient(180deg, #FFFFFF 0%, rgba(241, 231, 255, 0.8) 100%)",
-      }}
-    >
-      <div className="max-w-page mx-auto px-4 md:px-0">
-        <div className="flex flex-col items-center text-center gap-4 mb-14">
-          <h2
-            className="font-sans text-[3rem] font-medium leading-[112%] tracking-tight text-[rgba(0,0,0,0.76)]"
-            style={{ fontFamily: '"Open Sans", sans-serif' }}
-          >
-            Everything you need to investigate faster
-          </h2>
-        </div>
+    <section className="section-rule flex w-full flex-col items-center gap-8 py-[76px] md:gap-[76px] md:py-32">
+      <div className="flex w-full max-w-[501px] flex-col items-center px-6 text-center">
+        <h2 className="w-full max-w-[391px] font-sans text-[28px] font-light leading-9 text-[#3d3d3d] md:text-[32px] md:leading-normal">
+          Everything that you need to <span className="text-[#1f40ed]">investigate</span>
+        </h2>
+      </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-          {FEATURES.map(({ icon, iconColor, iconBg, title, desc }) => (
-            <div
-              key={title}
-              className="flex flex-col gap-4 p-7 rounded-xl border border-black/[0.06] bg-white hover:border-black/10 transition-all"
-            >
-              <div
-                className="w-10 h-10 rounded-lg flex items-center justify-center"
-                style={{ background: iconBg, color: iconColor }}
-              >
-                {icon}
-              </div>
-              <div className="flex flex-col gap-2">
-                <h3
-                  className="font-sans text-base font-medium text-[#14151A]"
-                  style={{ fontFamily: '"Open Sans", sans-serif' }}
-                >
-                  {title}
-                </h3>
-                <p className="font-inter text-sm text-black/60 leading-6">
-                  {desc}
-                </p>
-              </div>
+      <div className="grid w-[calc(100%_-_32px)] grid-cols-1 border-l border-t border-[#e7e7e7] sm:grid-cols-2 md:w-full lg:grid-cols-3">
+        {FEATURES.map(({ icon, title, description, mobileOrder }) => (
+          <article key={title} className={`${mobileOrder} flex min-w-0 flex-col items-start gap-5 overflow-hidden border-b border-r border-[#e7e7e7] bg-[#fafafa] px-5 py-5 sm:order-none md:px-8 md:py-11`}>
+            <div className="flex items-center gap-2">
+              <HugeiconsIcon icon={icon} size={24} strokeWidth={1.5} className="shrink-0 text-[#1f40ed]" aria-hidden="true" />
+              <h3 className="text-base font-semibold leading-6 text-[#1f40ed]">{title}</h3>
             </div>
-          ))}
-        </div>
+            <p className="text-base leading-6 text-[#3d3d3d]">{description}</p>
+          </article>
+        ))}
       </div>
     </section>
   );
 }
-
-// ─── Prompts ──────────────────────────────────────────────────────────────────

src/ui-app/components/landing/Footer.tsx

@@ -1,33 +1,54 @@
+import { IconBrandGithub, IconBrandLinkedin, IconBrandSlack, IconBrandX, IconBrandYoutube, IconChevronDown } from "@tabler/icons-react";
 import { Link } from "../ui/Link";
 
+const groups = [
+  { title: "Product", links: [["Showcase", "https://www.parseable.com/showcase"], ["Integrations", "https://www.parseable.com/integrations"], ["Features", "https://www.parseable.com/docs"]] },
+  { title: "Resources", links: [["Blogs", "https://www.parseable.com/blog"], ["Docs", "https://www.parseable.com/docs"], ["Cloud quickstart", "https://www.parseable.com/docs/quickstart"]] },
+  { title: "Legal", links: [["Privacy policy", "/policy"], ["Terms of use", "/tos"], ["DPA", "https://www.parseable.com/dpa"]] },
+  { title: "Community", links: [["GitHub", "https://github.com/parseablehq/parseable-mcp-server"], ["Slack", "https://logg.ing/community"], ["Status", "https://status.parseable.com"]] },
+];
+
 export function Footer() {
   return (
-    <footer className="border-t border-black/[0.06] py-4">
-      <div className="max-w-page mx-auto px-4 md:px-0 flex flex-col sm:flex-row items-center justify-between gap-4">
-        <p className="font-inter text-sm text-black/40">
-          © {new Date().getFullYear()} Parseable, Inc.
-        </p>
-        <nav className="flex items-center gap-5" aria-label="Footer links">
-          {[
-            { label: "Terms", href: "/tos" },
-            { label: "Privacy", href: "/policy" },
-            { label: "Docs", href: "https://www.parseable.com/docs/mcp" },
-            { label: "GitHub", href: "https://github.com/parseablehq/parseable-mcp-server" },
-          ].map(({ label, href }) => (
-            <Link
-              key={label}
-              href={href}
-              target={href.startsWith("http") ? "_blank" : undefined}
-              rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
-              className="font-inter text-sm text-black/40 hover:text-[#14151A] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#3A3A8C] rounded"
-            >
-              {label}
-            </Link>
-          ))}
-        </nav>
+    <footer className="bg-[#252525] text-white">
+      <div className="mx-auto flex max-w-page flex-col gap-16 px-4 py-[52px] md:hidden">
+        <div className="rounded-xl border border-[#454545] bg-[#3d3d3d] p-3">
+          <p className="mb-4 text-base">Subscribe to our newsletter for updates.</p>
+          <div className="flex gap-3"><input aria-label="Email address" placeholder="angelica@gmail.com" className="h-9 min-w-0 flex-1 rounded-lg border border-[#454545] bg-[#1b1b1b] px-3 text-sm" /><button type="button" className="h-9 rounded-lg bg-[#1f40ed] px-4 text-base">Subscribe</button></div>
+        </div>
+        <div className="flex flex-col">
+          {groups.map((group) => <button key={group.title} type="button" className="flex h-[55px] items-center justify-between border-b border-[#454545] text-left text-lg"><span>{group.title}</span><IconChevronDown size={24} /></button>)}
+        </div>
+        <div className="space-y-6 text-sm text-[#d1d1d1]">
+          <div><p className="mb-2 text-white">SFO</p><p>Parseable Inc.<br />584 Castro St. #2112 San Francisco, California 94114-2512<br />Phone: +1 (650) 444 6216</p></div>
+          <div><p className="mb-2 text-white">BLR</p><p>Cloudnatively Services Pvt Ltd.<br />JBR Tech Park Whitefield, Bengaluru 560066<br />Phone: +91 9480931554</p></div>
+          <p className="inline-flex rounded-lg border border-[#454545] bg-[#3d3d3d] px-3 py-2 text-white"><span className="mr-2 mt-1 inline-block size-2.5 rounded-full bg-[#34d399]" />All system operational</p>
+        </div>
+        <div className="border-t border-dashed border-[#5d5d5d] pt-3 text-base text-[#888]"><p>Copyright {new Date().getFullYear()} Parseable, Inc. All rights reserved.</p><p>This means that all content, designs, and innovations created by Parseable.</p></div>
+        <div className="flex gap-7 text-white"><IconBrandYoutube /><IconBrandX /><IconBrandSlack /><IconBrandLinkedin /><IconBrandGithub /></div>
+      </div>
+      <div className="mx-auto hidden max-w-page px-6 py-16 md:block md:px-0">
+        <div className="grid gap-12 md:grid-cols-[2fr_1fr]">
+          <div className="grid grid-cols-2 gap-10 sm:grid-cols-4">
+            {groups.map((group) => (
+              <div key={group.title}>
+                <p className="mb-4 text-sm font-medium text-[#fafafa]">{group.title}</p>
+                <div className="flex flex-col gap-2">
+                  {group.links.map(([label, href]) => <Link key={label} href={href} className="text-[13px] text-[#b0b0b0] hover:text-white">{label}</Link>)}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="rounded-lg border border-[#454545] bg-[#303030] p-4">
+            <p className="mb-4 text-sm">Subscribe to our newsletter for updates.</p>
+            <div className="flex gap-2"><input aria-label="Email address" placeholder="you@company.com" className="min-w-0 flex-1 rounded-md border border-[#454545] bg-[#252525] px-3 py-2 text-sm" /><button type="button" className="rounded-md bg-[#1f40ed] px-4 py-2 text-sm">Subscribe</button></div>
+          </div>
+        </div>
+        <div className="mt-14 flex flex-col justify-between gap-6 border-t border-[#454545] pt-8 text-[13px] text-[#b0b0b0] md:flex-row">
+          <p>© {new Date().getFullYear()} Parseable, Inc. · SFO & BLR</p>
+          <p className="rounded-lg border border-[#454545] px-3 py-2 text-white"><span className="mr-2 inline-block size-2 rounded-full bg-[#34d399]" />All systems operational</p>
+        </div>
       </div>
     </footer>
   );
 }
-
-// ─── Page ─────────────────────────────────────────────────────────────────────

src/ui-app/components/landing/Hero.tsx

@@ -1,29 +1,29 @@
+import { CircleLockCheck01Icon, Telescope01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+
 export function Hero() {
   return (
-    <section className="pt-32 pb-0">
-      <div className="max-w-page mx-auto px-4 md:px-0 flex flex-col items-center text-center gap-6">
-        {/* Badge */}
-        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded border border-black/8 bg-white">
-          <span className="w-1.5 h-1.5 rounded-full bg-[#00A896]" />
-          <span className="font-inter text-xs font-medium text-[#5E5F6E]">
-            Observability, meet AI
-          </span>
+    <section className="pt-[76px] pb-[76px] md:pt-[122px] md:pb-[121px]">
+      <div className="mx-auto grid max-w-page gap-6 px-4 md:grid-cols-[1fr_565px] md:items-stretch md:gap-10 md:px-0">
+        <div className="contents md:flex md:min-h-29 md:flex-col md:items-start md:justify-between md:gap-8">
+          <h1 className="order-2 font-sans text-[40px] font-light leading-[48px] tracking-[-0.03em] text-[#1b1b1b] md:order-none md:text-[44px]">
+            Parseable <span className="text-[#1f40ed]">MCP Server</span>
+          </h1>
+          <div className="order-1 inline-flex w-max items-center gap-2 rounded-full border border-[#e7e7e7] bg-[#fafafa] px-4 py-2 text-sm md:order-none">
+            <span className="flex items-center gap-1.5"><HugeiconsIcon icon={Telescope01Icon} size={16} strokeWidth={1.5} aria-hidden="true" />Log monitoring</span>
+            <span className="size-1.5 rounded-full bg-[#d9d9d9]" />
+            <span className="flex items-center gap-1.5"><HugeiconsIcon icon={CircleLockCheck01Icon} size={16} strokeWidth={1.5} aria-hidden="true" />AI native</span>
+          </div>
+        </div>
+        <div className="contents md:flex md:flex-col md:items-end md:justify-between md:gap-8">
+          <p className="order-3 font-inter text-[15px] leading-6 text-[#6d6d6d] md:order-none md:text-right md:text-base">
+            Connect Claude, Cursor, or any MCP-compatible agent to Parseable. Query terabytes of logs, metrics, and traces in natural language - at sub-second speed.
+          </p>
+          <div className="order-4 flex gap-3 md:order-none">
+            <a href="https://app.parseable.com" className="rounded-lg bg-[#1f40ed] px-4 py-2 text-base font-medium text-white hover:bg-[#1834c9]">Start for free</a>
+            <a href="#connect" className="rounded-lg border border-[#d1d1d1] bg-white px-3 py-2 text-sm font-medium hover:bg-[#fafafa]">View demo</a>
+          </div>
         </div>
-
-        {/* H1 */}
-        <h1
-          className="max-w-3xl font-sans text-[2.75rem] md:text-[3.5rem] font-medium leading-[107%] tracking-tight text-[#2F2F37]"
-          style={{ fontFamily: '"Open Sans", sans-serif' }}
-        >
-          Parseable MCP Server
-        </h1>
-
-        {/* Description */}
-        <p className="max-w-2xl font-inter text-base text-black/60 leading-7">
-          Connect Claude, Cursor, or any MCP-compatible agent to Parseable.
-          Query terabytes of logs, metrics, and traces in natural language - at
-          sub-second speed.
-        </p>
       </div>
     </section>
   );