@chaibuilder/sdk 4.0.0-beta.4 → 4.0.0-beta.41

package/dist/library-blocks/hero/developer-focused/developer-focused.html

@@ -0,0 +1,124 @@
+<section chai-name="Developer Platform Hero" class="relative overflow-hidden bg-background py-20 lg:py-32">
+  <div
+    class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_70%_30%,rgba(var(--primary-foreground),0.04)_0%,transparent_60%)]"></div>
+  <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-border to-transparent"></div>
+
+  <div class="mx-auto max-w-7xl px-6 lg:px-8">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-20">
+      <div chai-name="Hero Content" class="flex flex-col">
+        <div
+          class="mb-6 inline-flex w-fit items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1">
+          <div class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary"></div>
+          <span class="font-mono text-[11px] font-bold uppercase tracking-[0.15em] text-primary"
+            >Now Generally Available</span
+          >
+        </div>
+
+        <h1
+          class="mb-6 font-mono text-4xl font-black leading-[1.1] tracking-tight text-foreground md:text-5xl lg:text-6xl">
+          Build faster.
+          <br />
+          <span class="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent"
+            >Deploy instantly.</span
+          >
+        </h1>
+
+        <p class="mb-8 max-w-md font-mono text-sm leading-relaxed text-muted-foreground md:text-base">
+          The developer platform that eliminates boilerplate. Ship production-ready APIs in minutes, not months. Zero
+          config, infinite scale.
+        </p>
+
+        <div chai-name="CTA Buttons" class="mb-10 flex flex-col gap-3 sm:flex-row">
+          <a
+            href="#"
+            class="group inline-flex h-12 items-center justify-center gap-2 rounded-md bg-primary px-8 font-mono text-sm font-bold text-primary-foreground transition-all hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/20">
+            Get Started Free
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="transition-transform group-hover:translate-x-0.5">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
+          </a>
+          <a
+            href="#"
+            class="inline-flex h-12 items-center justify-center gap-2 rounded-md border border-input bg-background px-8 font-mono text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+            Read the Docs
+          </a>
+        </div>
+
+        <div chai-name="Trust Signals" class="flex flex-wrap items-center gap-6 border-t border-border pt-8">
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-2xl font-black text-foreground">300ms</span>
+            <span class="text-xs text-muted-foreground">Global<br />deploy</span>
+          </div>
+          <div class="h-8 w-px bg-border"></div>
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-2xl font-black text-foreground">99.99%</span>
+            <span class="text-xs text-muted-foreground">Uptime<br />SLA</span>
+          </div>
+          <div class="h-8 w-px bg-border"></div>
+          <div class="flex items-center gap-2">
+            <span class="font-mono text-2xl font-black text-foreground">10K+</span>
+            <span class="text-xs text-muted-foreground">Teams<br />shipping</span>
+          </div>
+        </div>
+      </div>
+
+      <div chai-name="Hero Visual" class="relative">
+        <div
+          class="absolute -inset-4 rounded-md bg-gradient-to-tr from-primary/10 via-transparent to-primary/5 blur-2xl"></div>
+        <div class="relative overflow-hidden rounded-md border border-border bg-card shadow-2xl">
+          <div class="flex items-center gap-1.5 border-b border-border bg-muted/30 px-4 py-3">
+            <div class="h-3 w-3 rounded-full bg-destructive/40"></div>
+            <div class="h-3 w-3 rounded-full bg-yellow-500/40"></div>
+            <div class="h-3 w-3 rounded-full bg-green-500/40"></div>
+            <div class="ml-4 flex h-5 items-center rounded bg-muted/60 px-3">
+              <span class="font-mono text-[10px] text-muted-foreground">terminal — api-server</span>
+            </div>
+          </div>
+          <img
+            src="https://picsum.photos/seed/dev-platform-terminal/800/550"
+            alt="Developer platform terminal showing API deployment and server logs"
+            class="w-full object-cover"
+            width="800"
+            height="550" />
+        </div>
+
+        <div class="absolute -bottom-4 -left-4 rounded-md border border-border bg-card px-4 py-3 shadow-lg">
+          <div class="flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-primary">
+                <path d="m5 12 5 5L20 7" />
+              </svg>
+            </div>
+            <div>
+              <div class="font-mono text-xs font-bold text-foreground">Deployed to 42 regions</div>
+              <div class="font-mono text-[10px] text-muted-foreground">312ms — all checks passed</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="absolute bottom-0 h-px w-full bg-gradient-to-r from-transparent via-border to-transparent"></div>
+</section>

package/dist/library-blocks/hero/minimal-saas/minimal-saas.html

@@ -0,0 +1,98 @@
+<section chai-name="SaaS Hero Section" class="relative overflow-hidden bg-background py-24 lg:py-32">
+  <div
+    class="absolute inset-0 -z-10 bg-[radial-gradient(45%_40%_at_50%_50%,rgba(var(--primary-foreground),0.05)_0%,transparent_100%)]"></div>
+  <div class="container mx-auto px-6 lg:px-8">
+    <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
+      <div chai-name="Hero Content" class="flex flex-col space-y-8 text-center lg:text-left">
+        <div
+          class="inline-flex items-center self-center rounded-full border border-border bg-muted/50 px-3 py-1 text-sm font-medium text-muted-foreground lg:self-start">
+          <span class="mr-2 flex h-2 w-2 rounded-full bg-primary"></span>
+          Now in Public Beta
+        </div>
+
+        <h1 class="font-serif text-5xl font-light tracking-tight text-foreground sm:text-6xl xl:text-7xl">
+          Scale your <span class="italic text-primary">workflow</span> without the friction.
+        </h1>
+
+        <p class="max-w-xl self-center text-lg leading-relaxed text-muted-foreground lg:self-start">
+          The all-in-one workspace for modern engineering teams. Track progress, manage deployments, and automate
+          documentation in one unified interface.
+        </p>
+
+        <div class="flex flex-col items-center gap-4 sm:flex-row lg:justify-start">
+          <a
+            href="#"
+            class="group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-primary px-8 font-medium text-primary-foreground transition-all hover:bg-primary/90">
+            <span>Get Started Free</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="ml-2">
+              <path d="M5 12h14" />
+              <path d="m12 5 7 7-7 7" />
+            </svg>
+          </a>
+          <a
+            href="#"
+            class="inline-flex h-12 items-center justify-center rounded-md border border-input bg-background px-8 font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+            Book a Demo
+          </a>
+        </div>
+
+        <div class="flex items-center justify-center gap-6 pt-4 lg:justify-start">
+          <div class="flex -space-x-3">
+            <img
+              src="https://picsum.photos/seed/avatar1/40/40"
+              alt="Active User Profile"
+              class="h-10 w-10 rounded-full border-2 border-background object-cover"
+              width="40"
+              height="40" />
+            <img
+              src="https://picsum.photos/seed/avatar2/40/40"
+              alt="Active User Profile"
+              class="h-10 w-10 rounded-full border-2 border-background object-cover"
+              width="40"
+              height="40" />
+            <img
+              src="https://picsum.photos/seed/avatar3/40/40"
+              alt="Active User Profile"
+              class="h-10 w-10 rounded-full border-2 border-background object-cover"
+              width="40"
+              height="40" />
+          </div>
+          <p class="text-sm text-muted-foreground">
+            Trusted by <span class="font-bold text-foreground">2,000+</span> teams worldwide
+          </p>
+        </div>
+      </div>
+
+      <div chai-name="Product Preview" class="relative lg:ml-4">
+        <div
+          class="absolute -inset-1 rounded-md bg-gradient-to-tr from-primary/20 via-border to-primary/10 opacity-50 blur-2xl"></div>
+        <div class="relative overflow-hidden rounded-md border border-border bg-card shadow-2xl">
+          <div class="flex items-center gap-1.5 border-b border-border bg-muted/30 px-4 py-3">
+            <div class="h-3 w-3 rounded-full bg-destructive/40"></div>
+            <div class="h-3 w-3 rounded-full bg-yellow-500/40"></div>
+            <div class="h-3 w-3 rounded-full bg-green-500/40"></div>
+            <div class="ml-4 h-4 w-32 rounded bg-muted"></div>
+          </div>
+          <div class="p-1">
+            <img
+              src="https://picsum.photos/seed/dashboard88/800/600"
+              alt="SaaS Dashboard Interface Analytics"
+              class="h-full w-full rounded-md object-cover contrast-[1.1] grayscale-[0.2]"
+              width="800"
+              height="600" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/hero/portfolio-showcase/portfolio-showcase.html

@@ -0,0 +1,148 @@
+<section chai-name="Portfolio Showcase Hero" class="relative overflow-hidden bg-card">
+  <div
+    class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_50%_at_20%_40%,rgba(var(--primary-foreground),0.04)_0%,transparent_100%)]"></div>
+
+  <div class="mx-auto max-w-7xl">
+    <div class="grid min-h-[85vh] grid-cols-1 lg:grid-cols-2">
+      <div
+        chai-name="Left Content Panel"
+        class="relative flex flex-col justify-between px-8 py-16 sm:px-12 lg:px-16 lg:py-24">
+        <div>
+          <div class="mb-4 flex items-center gap-4">
+            <div class="flex h-10 w-10 items-center justify-center rounded-full border border-border">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="text-foreground">
+                <polygon
+                  points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+              </svg>
+            </div>
+            <span class="text-sm font-medium text-muted-foreground">Award-winning portfolio</span>
+          </div>
+
+          <h1
+            class="mb-8 font-serif text-4xl font-light leading-[1.15] text-foreground sm:text-5xl lg:text-6xl xl:text-7xl">
+            Designing
+            <br />
+            the future,
+            <br />
+            <span class="italic text-primary">one pixel</span>
+            <br />
+            at a time.
+          </h1>
+
+          <p class="max-w-sm text-base leading-relaxed text-muted-foreground">
+            A curated collection of work spanning brand identity, digital products, and immersive experiences for global
+            clients.
+          </p>
+        </div>
+
+        <div chai-name="Bottom Actions" class="mt-12 flex flex-col gap-8">
+          <div class="flex items-center gap-6">
+            <a
+              href="#"
+              class="group inline-flex h-14 items-center gap-3 rounded-md bg-primary px-8 text-sm font-semibold text-primary-foreground transition-all hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/20">
+              Explore Projects
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="transition-transform group-hover:translate-x-1">
+                <path d="M5 12h14" />
+                <path d="m12 5 7 7-7 7" />
+              </svg>
+            </a>
+            <a
+              href="#"
+              class="text-sm font-medium text-foreground underline underline-offset-4 transition-colors hover:text-primary">
+              Get in Touch
+            </a>
+          </div>
+
+          <div class="flex items-center gap-8 border-t border-border pt-6">
+            <div>
+              <div class="text-2xl font-bold tracking-tight text-foreground">140+</div>
+              <div class="text-xs text-muted-foreground">Projects delivered</div>
+            </div>
+            <div class="h-8 w-px bg-border"></div>
+            <div>
+              <div class="text-2xl font-bold tracking-tight text-foreground">28</div>
+              <div class="text-xs text-muted-foreground">Countries served</div>
+            </div>
+            <div class="h-8 w-px bg-border"></div>
+            <div>
+              <div class="text-2xl font-bold tracking-tight text-foreground">15</div>
+              <div class="text-xs text-muted-foreground">Design awards</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div chai-name="Image Mosaic Grid" class="relative hidden border-l border-border lg:block">
+        <div class="grid h-full grid-cols-2 grid-rows-3 gap-px bg-border">
+          <div class="relative col-span-2 row-span-2 overflow-hidden rounded-md bg-card">
+            <img
+              src="https://picsum.photos/seed/portfolio-main/800/700"
+              alt="Featured design project with modern interface elements"
+              class="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
+              width="800"
+              height="700" />
+            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-card/90 to-transparent p-6">
+              <span class="mb-1 block font-mono text-[10px] font-bold uppercase tracking-widest text-primary"
+                >Featured</span
+              >
+              <span class="block text-lg font-semibold text-foreground">Meridian Brand System</span>
+              <span class="text-sm text-muted-foreground">Identity &amp; Digital Product</span>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-md bg-card">
+            <img
+              src="https://picsum.photos/seed/portfolio-grid1/400/300"
+              alt="Minimalist packaging design project"
+              class="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
+              width="400"
+              height="300" />
+            <div
+              class="absolute inset-0 flex items-end bg-gradient-to-t from-card/80 to-transparent p-4 opacity-0 transition-opacity hover:opacity-100">
+              <span class="text-sm font-medium text-foreground">Aura Packaging</span>
+            </div>
+          </div>
+
+          <div class="relative overflow-hidden rounded-md bg-card">
+            <img
+              src="https://picsum.photos/seed/portfolio-grid2/400/300"
+              alt="Mobile application interface design"
+              class="h-full w-full object-cover transition-transform duration-700 hover:scale-105"
+              width="400"
+              height="300" />
+            <div
+              class="absolute inset-0 flex items-end bg-gradient-to-t from-card/80 to-transparent p-4 opacity-0 transition-opacity hover:opacity-100">
+              <span class="text-sm font-medium text-foreground">Flux Mobile App</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="absolute right-6 top-6 z-10 flex items-center gap-2 rounded-full bg-card/80 px-3 py-1.5 shadow-sm backdrop-blur-sm">
+          <div class="h-1.5 w-1.5 animate-pulse rounded-full bg-primary"></div>
+          <span class="font-mono text-[10px] font-bold text-muted-foreground">Available for work</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/hero/startup-landing/startup-landing.html

@@ -0,0 +1,130 @@
+<section chai-name="Startup Landing Hero" class="relative overflow-hidden bg-background">
+  <div class="absolute inset-0 -z-10">
+    <div
+      class="absolute left-1/2 top-0 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/5 blur-3xl"></div>
+    <div
+      class="absolute bottom-0 right-0 h-[400px] w-[400px] translate-x-1/4 translate-y-1/4 rounded-full bg-accent/10 blur-3xl"></div>
+    <div
+      class="absolute inset-0 bg-[linear-gradient(rgba(var(--border),0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(var(--border),0.03)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
+  </div>
+
+  <div class="mx-auto max-w-7xl px-6 pb-12 pt-20 sm:px-8 lg:pb-20 lg:pt-32">
+    <div chai-name="Hero Top Content" class="mx-auto flex max-w-3xl flex-col items-center text-center">
+      <a
+        href="#"
+        class="group mb-8 inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-1.5 text-sm transition-all hover:border-primary/40 hover:shadow-md">
+        <span
+          class="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="m5 12 5 5L20 7" />
+          </svg>
+        </span>
+        <span class="text-muted-foreground">v3.0 just shipped</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-muted-foreground transition-transform group-hover:translate-x-0.5">
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </a>
+
+      <h1 class="mb-6 text-4xl font-extrabold leading-[1.1] tracking-tight text-foreground sm:text-5xl lg:text-7xl">
+        Ship products
+        <span class="relative inline-block">
+          <span class="relative z-10">10x faster</span>
+          <span class="absolute -bottom-1 left-0 right-0 z-0 h-3 bg-primary/20 lg:h-4"></span>
+        </span>
+        with your whole team.
+      </h1>
+
+      <p class="mb-10 max-w-xl text-lg leading-relaxed text-muted-foreground">
+        The collaborative workspace that replaces your project manager, design tool, and deployment pipeline. One
+        platform, zero friction.
+      </p>
+
+      <div chai-name="CTA Group" class="flex flex-col items-center gap-4 sm:flex-row">
+        <a
+          href="#"
+          class="inline-flex h-12 items-center justify-center rounded-md bg-primary px-8 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 transition-all hover:bg-primary/90 hover:shadow-xl hover:shadow-primary/30">
+          Start Building — It's Free
+        </a>
+        <a
+          href="#"
+          class="group inline-flex h-12 items-center gap-2 rounded-md border border-input bg-background px-6 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-foreground">
+            <polygon points="5 3 19 12 5 21 5 3" />
+          </svg>
+          Watch Demo
+        </a>
+      </div>
+
+      <p class="mt-4 text-xs text-muted-foreground">No credit card required. Free for teams up to 5.</p>
+    </div>
+
+    <div chai-name="Product Screenshot" class="relative mx-auto mt-16 max-w-5xl lg:mt-20">
+      <div
+        class="absolute -inset-4 rounded-md bg-gradient-to-b from-primary/10 via-transparent to-transparent blur-2xl"></div>
+      <div class="relative overflow-hidden rounded-md border border-border bg-card shadow-2xl">
+        <div class="flex items-center gap-2 border-b border-border bg-muted/40 px-4 py-3">
+          <div class="flex gap-1.5">
+            <div class="h-3 w-3 rounded-full bg-destructive/50"></div>
+            <div class="h-3 w-3 rounded-full bg-yellow-500/50"></div>
+            <div class="h-3 w-3 rounded-full bg-green-500/50"></div>
+          </div>
+          <div class="ml-4 flex h-6 flex-1 items-center rounded-md bg-muted/60 px-3">
+            <span class="text-[11px] text-muted-foreground">app.launchpad.dev/dashboard</span>
+          </div>
+        </div>
+        <img
+          src="https://picsum.photos/seed/startup-dash/1200/650"
+          alt="Startup product dashboard showing team collaboration features"
+          class="w-full object-cover"
+          width="1200"
+          height="650" />
+      </div>
+    </div>
+
+    <div chai-name="Stats Row" class="mx-auto mt-16 max-w-4xl lg:mt-20">
+      <div class="grid grid-cols-2 gap-6 md:grid-cols-4 md:gap-0 md:divide-x md:divide-border">
+        <div class="flex flex-col items-center px-6 py-2 text-center">
+          <span class="text-3xl font-extrabold tracking-tight text-foreground lg:text-4xl">50K+</span>
+          <span class="mt-1 text-sm text-muted-foreground">Active teams</span>
+        </div>
+        <div class="flex flex-col items-center px-6 py-2 text-center">
+          <span class="text-3xl font-extrabold tracking-tight text-foreground lg:text-4xl">99.9%</span>
+          <span class="mt-1 text-sm text-muted-foreground">Uptime SLA</span>
+        </div>
+        <div class="flex flex-col items-center px-6 py-2 text-center">
+          <span class="text-3xl font-extrabold tracking-tight text-foreground lg:text-4xl">2.4s</span>
+          <span class="mt-1 text-sm text-muted-foreground">Avg. deploy time</span>
+        </div>
+        <div class="flex flex-col items-center px-6 py-2 text-center">
+          <span class="text-3xl font-extrabold tracking-tight text-foreground lg:text-4xl">4.9</span>
+          <span class="mt-1 text-sm text-muted-foreground">User rating</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/navbar/creative-agency/creative-agency.html

@@ -0,0 +1,139 @@
+<header chai-name="Creative Agency Navbar" class="w-full bg-background">
+  <div chai-name="Main Navbar" class="border-b border-border">
+    <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:h-[72px] lg:px-8">
+      <a href="#" chai-name="Logo" class="group flex items-center gap-3">
+        <div
+          class="flex h-9 w-9 items-center justify-center rounded-md bg-foreground transition-colors group-hover:bg-primary">
+          <span class="font-serif text-lg font-bold text-background">S</span>
+        </div>
+        <div class="flex flex-col">
+          <span class="text-sm font-bold leading-none tracking-tight text-foreground">Studio</span>
+          <span class="font-mono text-[9px] uppercase tracking-[0.25em] text-muted-foreground">Creative Agency</span>
+        </div>
+      </a>
+
+      <nav chai-name="Desktop Navigation" class="hidden items-center lg:flex">
+        <a href="#" class="relative px-5 py-2 text-sm font-medium text-foreground transition-colors hover:text-primary">
+          Work
+          <span class="absolute bottom-0 left-5 right-5 h-0.5 bg-primary"></span>
+        </a>
+        <a href="#" class="px-5 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+          >Services</a
+        >
+        <a href="#" class="px-5 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+          >Process</a
+        >
+        <a href="#" class="px-5 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+          >About</a
+        >
+        <a href="#" class="px-5 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+          >Journal</a
+        >
+      </nav>
+
+      <div chai-name="Desktop Actions" class="hidden items-center gap-3 lg:flex">
+        <a
+          href="#"
+          class="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+          Case Studies
+        </a>
+        <a
+          href="#"
+          class="group inline-flex h-10 items-center gap-2 rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+          Let's Talk
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-transform group-hover:translate-x-0.5">
+            <path d="m7 7 10 10" />
+            <path d="M17 7v10H7" />
+          </svg>
+        </a>
+      </div>
+
+      <details chai-name="Mobile Menu" class="relative lg:hidden">
+        <summary
+          class="flex h-11 w-11 cursor-pointer list-none items-center justify-center rounded-md border border-input bg-background transition-colors hover:bg-accent">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-foreground">
+            <line x1="4" x2="20" y1="12" y2="12" />
+            <line x1="4" x2="20" y1="6" y2="6" />
+            <line x1="4" x2="20" y1="18" y2="18" />
+          </svg>
+        </summary>
+        <div
+          chai-name="Mobile Dropdown"
+          class="absolute right-0 top-14 w-72 rounded-md border border-border bg-card shadow-lg">
+          <nav class="flex flex-col p-2">
+            <a
+              href="#"
+              class="rounded-md px-3 py-2.5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >Work</a
+            >
+            <a
+              href="#"
+              class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >Services</a
+            >
+            <a
+              href="#"
+              class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >Process</a
+            >
+            <a
+              href="#"
+              class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >About</a
+            >
+            <a
+              href="#"
+              class="rounded-md px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+              >Journal</a
+            >
+          </nav>
+          <div class="flex flex-col gap-2 border-t border-border p-4">
+            <a
+              href="#"
+              class="flex h-10 items-center justify-center rounded-md border border-input bg-background text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+              Case Studies
+            </a>
+            <a
+              href="#"
+              class="flex h-10 items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90">
+              Let's Talk
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="m7 7 10 10" />
+                <path d="M17 7v10H7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </details>
+    </div>
+  </div>
+</header>