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

package/dist/library-blocks/feature/consulting-firm/consulting-firm.html

@@ -0,0 +1,219 @@
+<section chai-name="Consulting Firm Feature" class="relative overflow-hidden bg-card px-6 py-20 lg:py-28">
+  <div class="absolute inset-0 -z-10">
+    <div
+      class="absolute inset-0 bg-[linear-gradient(to_right,transparent_0%,transparent_49.5%,rgba(var(--border))_49.5%,rgba(var(--border))_50.5%,transparent_50.5%,transparent_100%)] opacity-30"></div>
+  </div>
+
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-16 grid grid-cols-1 items-end gap-8 lg:grid-cols-2">
+      <div>
+        <span class="mb-3 inline-flex items-center gap-2 text-sm font-medium text-muted-foreground">
+          <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="text-primary">
+            <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>
+          Advisory &amp; Consulting
+        </span>
+        <h2 class="text-3xl font-extrabold leading-tight tracking-tight text-foreground sm:text-4xl lg:text-5xl">
+          Strategic expertise that
+          <br />
+          <span class="text-primary">transforms businesses.</span>
+        </h2>
+      </div>
+      <p class="max-w-md text-base leading-relaxed text-muted-foreground lg:text-right">
+        We partner with leadership teams to solve complex challenges, unlock new revenue streams, and build
+        organizations that thrive.
+      </p>
+    </div>
+
+    <div chai-name="Expertise Grid" class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+      <div class="group col-span-1 md:col-span-2 lg:col-span-2">
+        <div class="relative overflow-hidden rounded-md border border-border bg-background">
+          <div class="grid grid-cols-1 md:grid-cols-2">
+            <div class="p-8 lg:p-10">
+              <div class="mb-6 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1">
+                <div class="h-1.5 w-1.5 rounded-full bg-primary"></div>
+                <span class="text-xs font-semibold text-primary">Core Offering</span>
+              </div>
+              <h3 class="mb-4 text-2xl font-bold text-foreground">Digital Transformation</h3>
+              <p class="mb-6 text-sm leading-relaxed text-muted-foreground">
+                End-to-end digital strategy from assessment to implementation. We modernize operations, adopt emerging
+                technologies, and build digital-first cultures.
+              </p>
+              <div class="space-y-3">
+                <div class="flex items-center justify-between rounded-md bg-muted/50 px-4 py-3">
+                  <span class="text-sm font-medium text-foreground">Process Automation</span>
+                  <span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-bold text-primary">High Impact</span>
+                </div>
+                <div class="flex items-center justify-between rounded-md bg-muted/50 px-4 py-3">
+                  <span class="text-sm font-medium text-foreground">Cloud Migration</span>
+                  <span class="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-bold text-primary">High Impact</span>
+                </div>
+                <div class="flex items-center justify-between rounded-md bg-muted/50 px-4 py-3">
+                  <span class="text-sm font-medium text-foreground">Data Infrastructure</span>
+                  <span class="rounded-full bg-accent px-2 py-0.5 text-xs font-bold text-accent-foreground"
+                    >Growing</span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="relative hidden md:block">
+              <img
+                src="https://picsum.photos/seed/consulting-transform/600/500"
+                alt="Digital transformation consulting session with leadership team"
+                class="h-full w-full object-cover"
+                width="600"
+                height="500" />
+              <div class="absolute inset-0 bg-gradient-to-r from-background/20 to-transparent"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-background p-8 transition-all hover:border-primary/30 hover:shadow-lg">
+        <div class="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-primary text-primary-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+            <path d="m19 9-5 5-4-4-3 3" />
+          </svg>
+        </div>
+        <h3 class="mb-3 text-lg font-bold text-foreground">Revenue Strategy</h3>
+        <p class="mb-4 text-sm leading-relaxed text-muted-foreground">
+          Identify untapped revenue streams, optimize pricing models, and build go-to-market strategies that accelerate
+          growth.
+        </p>
+        <div class="flex items-center gap-2 text-sm font-semibold text-primary">
+          <span>Avg. 45% revenue lift</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">
+            <path d="m7 7 10 10" />
+            <path d="M17 7v10H7" />
+          </svg>
+        </div>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-background p-8 transition-all hover:border-primary/30 hover:shadow-lg">
+        <div class="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-secondary text-secondary-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
+        </div>
+        <h3 class="mb-3 text-lg font-bold text-foreground">Organizational Design</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Restructure teams, define roles, and build high-performance cultures. From startups scaling to enterprises
+          transforming.
+        </p>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-background p-8 transition-all hover:border-primary/30 hover:shadow-lg">
+        <div class="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-accent text-accent-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
+            <path d="m9 12 2 2 4-4" />
+          </svg>
+        </div>
+        <h3 class="mb-3 text-lg font-bold text-foreground">Risk &amp; Compliance</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Navigate regulatory landscapes with confidence. GDPR, SOC 2, ISO — we build compliance frameworks that protect
+          and enable.
+        </p>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-foreground p-8 text-background transition-all hover:shadow-lg">
+        <div class="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-background/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-background">
+            <path
+              d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
+            <path d="M9 18h6" />
+            <path d="M10 22h4" />
+          </svg>
+        </div>
+        <h3 class="mb-3 text-lg font-bold">Innovation Lab</h3>
+        <p class="mb-4 text-sm leading-relaxed text-background/70">
+          Rapid prototyping, market validation, and venture building. Turn bold ideas into viable products in 90-day
+          sprints.
+        </p>
+        <a
+          href="#"
+          class="inline-flex items-center gap-1 text-sm font-semibold text-background underline underline-offset-4">
+          Learn more
+          <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="M5 12h14" />
+            <path d="m12 5 7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/feature/design-studio/design-studio.html

@@ -0,0 +1,190 @@
+<section chai-name="Design Studio Feature" class="relative overflow-hidden bg-background px-6 py-20 lg:py-28">
+  <div
+    class="absolute right-0 top-0 -z-10 h-96 w-96 -translate-y-1/3 translate-x-1/3 rounded-full bg-primary/5 blur-3xl"></div>
+
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-16 max-w-xl">
+      <div class="mb-4 flex items-center gap-3">
+        <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-primary">
+          <path
+            d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+        </svg>
+        <span class="text-sm font-semibold text-primary">Design Capabilities</span>
+      </div>
+      <h2 class="mb-4 text-3xl font-black leading-tight tracking-tight text-foreground sm:text-4xl lg:text-5xl">
+        Where craft meets
+        <span class="bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">pixel-perfection.</span>
+      </h2>
+      <p class="text-base leading-relaxed text-muted-foreground">
+        Our multidisciplinary design team brings together art direction, interaction design, and systems thinking.
+      </p>
+    </div>
+
+    <div chai-name="Feature Split Layout" class="grid grid-cols-1 items-center gap-12 lg:grid-cols-5 lg:gap-16">
+      <div class="space-y-6 lg:col-span-2">
+        <div
+          class="group rounded-md border border-border bg-card p-6 transition-all hover:border-primary/30 hover:bg-accent">
+          <div class="mb-3 flex items-center gap-3">
+            <div class="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10">
+              <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-primary">
+                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+                <path d="M12 2v2" />
+                <path d="M12 22v-2" />
+                <path d="m17 20.66-1-1.73" />
+                <path d="M11 10.27 7 3.34" />
+              </svg>
+            </div>
+            <h3 class="text-lg font-bold text-foreground group-hover:text-accent-foreground">UI/UX Design</h3>
+          </div>
+          <p class="text-sm leading-relaxed text-muted-foreground group-hover:text-accent-foreground/70">
+            Intuitive interfaces backed by user research, wireframing, prototyping, and usability testing.
+          </p>
+        </div>
+
+        <div
+          class="group rounded-md border border-border bg-card p-6 transition-all hover:border-primary/30 hover:bg-accent">
+          <div class="mb-3 flex items-center gap-3">
+            <div class="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10">
+              <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-primary">
+                <rect width="18" height="18" x="3" y="3" rx="2" />
+                <path d="M7 7h10" />
+                <path d="M7 12h10" />
+                <path d="M7 17h10" />
+              </svg>
+            </div>
+            <h3 class="text-lg font-bold text-foreground group-hover:text-accent-foreground">Design Systems</h3>
+          </div>
+          <p class="text-sm leading-relaxed text-muted-foreground group-hover:text-accent-foreground/70">
+            Scalable component libraries and design tokens that ensure consistency across every product touchpoint.
+          </p>
+        </div>
+
+        <div
+          class="group rounded-md border border-border bg-card p-6 transition-all hover:border-primary/30 hover:bg-accent">
+          <div class="mb-3 flex items-center gap-3">
+            <div class="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10">
+              <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-primary">
+                <path
+                  d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9" />
+              </svg>
+            </div>
+            <h3 class="text-lg font-bold text-foreground group-hover:text-accent-foreground">Web &amp; Motion</h3>
+          </div>
+          <p class="text-sm leading-relaxed text-muted-foreground group-hover:text-accent-foreground/70">
+            Immersive web experiences with micro-interactions, scroll animations, and cinematic motion design.
+          </p>
+        </div>
+
+        <div
+          class="group rounded-md border border-border bg-card p-6 transition-all hover:border-primary/30 hover:bg-accent">
+          <div class="mb-3 flex items-center gap-3">
+            <div class="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10">
+              <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-primary">
+                <path d="M6 3h12l4 6-10 13L2 9Z" />
+                <path d="M11 3 8 9l4 13 4-13-3-6" />
+                <path d="M2 9h20" />
+              </svg>
+            </div>
+            <h3 class="text-lg font-bold text-foreground group-hover:text-accent-foreground">3D &amp; Illustration</h3>
+          </div>
+          <p class="text-sm leading-relaxed text-muted-foreground group-hover:text-accent-foreground/70">
+            Custom 3D renders, isometric illustrations, and bespoke visual assets that set your brand apart.
+          </p>
+        </div>
+      </div>
+
+      <div chai-name="Visual Showcase" class="relative lg:col-span-3">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-4">
+            <div class="overflow-hidden rounded-md border border-border">
+              <img
+                src="https://picsum.photos/seed/studio-work1/500/600"
+                alt="Design studio project showing interface mockup on screen"
+                class="w-full object-cover"
+                width="500"
+                height="600" />
+            </div>
+            <div class="rounded-md border border-border bg-card p-6">
+              <div class="mb-2 font-mono text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                Tools We Use
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <span class="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">Figma</span>
+                <span class="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">Framer</span>
+                <span class="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">Blender</span>
+                <span class="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground"
+                  >After Effects</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="space-y-4 pt-8">
+            <div class="rounded-md border border-border bg-primary p-6">
+              <div class="text-4xl font-black text-primary-foreground">98%</div>
+              <div class="mt-1 text-sm text-primary-foreground/70">Client satisfaction rate</div>
+            </div>
+            <div class="overflow-hidden rounded-md border border-border">
+              <img
+                src="https://picsum.photos/seed/studio-work2/500/500"
+                alt="Creative team collaborating on design project"
+                class="w-full object-cover"
+                width="500"
+                height="500" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/library-blocks/feature/freelancer-toolkit/freelancer-toolkit.html

@@ -0,0 +1,195 @@
+<section chai-name="Freelancer Toolkit Feature" class="relative bg-card px-6 py-20 lg:py-28">
+  <div
+    class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_60%_40%_at_50%_0%,rgba(var(--primary-foreground),0.03)_0%,transparent_100%)]"></div>
+
+  <div class="mx-auto max-w-6xl">
+    <div chai-name="Section Header" class="mb-20 text-center">
+      <span
+        class="mb-4 inline-block rounded-full border border-border bg-background px-4 py-1.5 font-mono text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground"
+        >Built for Independents</span
+      >
+      <h2
+        class="mx-auto mb-4 max-w-2xl text-3xl font-extrabold leading-tight tracking-tight text-foreground sm:text-4xl lg:text-5xl">
+        Everything a freelancer needs,
+        <span class="text-primary">nothing they don't.</span>
+      </h2>
+      <p class="mx-auto max-w-lg text-base text-muted-foreground">
+        Stop juggling ten different apps. One platform for proposals, contracts, invoicing, and project management.
+      </p>
+    </div>
+
+    <div chai-name="Feature Cards" class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="flex items-start justify-between">
+          <div class="flex h-12 w-12 items-center justify-center rounded-md bg-primary text-primary-foreground">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+              <path d="M14 2v6h6" />
+              <path d="M16 13H8" />
+              <path d="M16 17H8" />
+              <path d="M10 9H8" />
+            </svg>
+          </div>
+          <span class="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Popular</span>
+        </div>
+        <h3 class="mt-6 text-xl font-bold text-foreground">Smart Proposals</h3>
+        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
+          Create stunning proposals in minutes with customizable templates. Track opens, get e-signatures, and convert
+          leads faster.
+        </p>
+        <div class="mt-6 flex items-center gap-4 border-t border-border pt-6">
+          <div class="text-center">
+            <div class="text-2xl font-bold text-foreground">3x</div>
+            <div class="text-xs text-muted-foreground">Faster close rate</div>
+          </div>
+          <div class="h-8 w-px bg-border"></div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-foreground">85%</div>
+            <div class="text-xs text-muted-foreground">Win rate</div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="flex h-12 w-12 items-center justify-center rounded-md bg-accent text-accent-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <rect width="20" height="14" x="2" y="5" rx="2" />
+            <line x1="2" x2="22" y1="10" y2="10" />
+          </svg>
+        </div>
+        <h3 class="mt-6 text-xl font-bold text-foreground">Instant Invoicing</h3>
+        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
+          Generate professional invoices, set up recurring billing, and accept payments in 135+ currencies. Get paid on
+          time, every time.
+        </p>
+        <div class="mt-6 rounded-md bg-muted/50 p-4">
+          <div class="flex items-center justify-between text-sm">
+            <span class="text-muted-foreground">Invoice #1042</span>
+            <span class="font-semibold text-foreground">$4,800.00</span>
+          </div>
+          <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+            <div class="h-full w-3/4 rounded-full bg-primary"></div>
+          </div>
+          <div class="mt-1 text-right text-xs text-muted-foreground">75% collected</div>
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="flex h-12 w-12 items-center justify-center rounded-md bg-secondary text-secondary-foreground">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+        </div>
+        <h3 class="mt-6 text-xl font-bold text-foreground">Time Tracking</h3>
+        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
+          One-click timers, automatic time sheets, and detailed reports. Know exactly where every hour goes and bill
+          accurately.
+        </p>
+        <div class="mt-6 flex flex-wrap gap-2">
+          <span class="rounded-md border border-border bg-card px-3 py-1.5 font-mono text-xs text-foreground"
+            >02:45:30</span
+          >
+          <span class="rounded-md border border-primary/30 bg-primary/5 px-3 py-1.5 font-mono text-xs text-primary"
+            >Active</span
+          >
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="flex h-12 w-12 items-center justify-center rounded-md bg-primary/10 text-primary">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
+        </div>
+        <h3 class="mt-6 text-xl font-bold text-foreground">Client Portal</h3>
+        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">
+          Give clients a branded space to review deliverables, leave feedback, approve milestones, and track project
+          progress in real-time.
+        </p>
+        <div class="mt-6 flex -space-x-2">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-primary text-xs font-bold text-primary-foreground">
+            JD
+          </div>
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-accent text-xs font-bold text-accent-foreground">
+            MK
+          </div>
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-secondary text-xs font-bold text-secondary-foreground">
+            AL
+          </div>
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-bold text-muted-foreground">
+            +5
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div chai-name="Bottom CTA" class="mt-12 text-center">
+      <a
+        href="#"
+        class="inline-flex h-12 items-center gap-2 rounded-md bg-foreground px-8 text-sm font-semibold text-background transition-colors hover:bg-foreground/90">
+        Start Your Free Trial
+        <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">
+          <path d="M5 12h14" />
+          <path d="m12 5 7 7-7 7" />
+        </svg>
+      </a>
+    </div>
+  </div>
+</section>