@chaibuilder/sdk 4.0.0-beta.30 → 4.0.0-beta.32

package/dist/library-blocks/blocks-list.json

@@ -1,16 +1,149 @@
 [
   {
-    "id": "library-blocks/hero-1/hero-1",
-    "name": "Feature Section Component",
-    "description": "Feature Section Component",
-    "group": "Home",
-    "preview": "/library-blocks/hero-1/hero-1.webp"
-  },
-  {
-    "id": "library-blocks/hero-2/hero-2",
-    "name": "Journey Card",
-    "description": "Product Journey Card",
-    "group": "Home",
-    "preview": "/library-blocks/hero-2/hero-2.webp"
+    "id": "library-blocks/hero/minimal-saas/minimal-saas",
+    "name": "Minimal SaaS Hero",
+    "description": "A clean and minimal hero section for SaaS products with a focus on simplicity and clarity.",
+    "group": "Hero",
+    "preview": "/library-blocks/hero/minimal-saas/minimal-saas.webp"
+  },
+  {
+    "id": "library-blocks/hero/developer-focused/developer-focused",
+    "name": "Developer Focused Hero",
+    "description": "A hero section designed for developers with a focus on technical features and capabilities.",
+    "group": "Hero",
+    "preview": "/library-blocks/hero/developer-focused/developer-focused.webp"
+  },
+  {
+    "id": "library-blocks/hero/creative-agency/creative-agency",
+    "name": "Creative Agency Hero",
+    "description": "An editorial-style asymmetric hero with overlapping imagery and bold typography for creative studios and agencies.",
+    "group": "Hero",
+    "preview": "/library-blocks/hero/creative-agency/creative-agency.webp"
+  },
+  {
+    "id": "library-blocks/hero/startup-landing/startup-landing",
+    "name": "Startup Landing Hero",
+    "description": "A vibrant centered hero with product screenshot, announcement badge, and stats row for modern startups.",
+    "group": "Hero",
+    "preview": "/library-blocks/hero/startup-landing/startup-landing.webp"
+  },
+  {
+    "id": "library-blocks/hero/portfolio-showcase/portfolio-showcase",
+    "name": "Portfolio Showcase Hero",
+    "description": "A refined split-layout hero with an image mosaic grid for portfolios and design showcases.",
+    "group": "Hero",
+    "preview": "/library-blocks/hero/portfolio-showcase/portfolio-showcase.webp"
+  },
+  {
+    "id": "library-blocks/feature/agency-services/agency-services",
+    "name": "Agency Services",
+    "description": "Bento-style asymmetric grid showcasing agency services with brand strategy, web design, product design, growth marketing, and creative content.",
+    "group": "Feature",
+    "preview": "/library-blocks/feature/agency-services/agency-services.webp"
+  },
+  {
+    "id": "library-blocks/feature/freelancer-toolkit/freelancer-toolkit",
+    "name": "Freelancer Toolkit",
+    "description": "Feature cards for freelancer tools including smart proposals, instant invoicing, time tracking, and client portal.",
+    "group": "Feature",
+    "preview": "/library-blocks/feature/freelancer-toolkit/freelancer-toolkit.webp"
+  },
+  {
+    "id": "library-blocks/feature/design-studio/design-studio",
+    "name": "Design Studio",
+    "description": "Split layout with stacked feature cards on the left and a visual showcase grid on the right for design studios.",
+    "group": "Feature",
+    "preview": "/library-blocks/feature/design-studio/design-studio.webp"
+  },
+  {
+    "id": "library-blocks/feature/marketing-agency/marketing-agency",
+    "name": "Marketing Agency",
+    "description": "Three-column numbered feature section for full-funnel marketing agencies with SEO, paid acquisition, and social community.",
+    "group": "Feature",
+    "preview": "/library-blocks/feature/marketing-agency/marketing-agency.webp"
+  },
+  {
+    "id": "library-blocks/feature/consulting-firm/consulting-firm",
+    "name": "Consulting Firm",
+    "description": "Mixed grid layout for consulting firms featuring digital transformation, revenue strategy, organizational design, risk compliance, and innovation lab.",
+    "group": "Feature",
+    "preview": "/library-blocks/feature/consulting-firm/consulting-firm.webp"
+  },
+  {
+    "id": "library-blocks/bento/saas-dashboard/saas-dashboard",
+    "name": "SaaS Dashboard",
+    "description": "Asymmetric bento grid with a wide analytics card, stat highlight, security badge, team collaboration image card, and integrations card for SaaS products.",
+    "group": "Bento",
+    "preview": "/library-blocks/bento/saas-dashboard/saas-dashboard.webp"
+  },
+  {
+    "id": "library-blocks/bento/creative-portfolio/creative-portfolio",
+    "name": "Creative Portfolio",
+    "description": "Image-heavy mosaic bento with a large featured project, hover-reveal smaller projects, and a stats accent card for creative portfolios.",
+    "group": "Bento",
+    "preview": "/library-blocks/bento/creative-portfolio/creative-portfolio.webp"
+  },
+  {
+    "id": "library-blocks/bento/product-features/product-features",
+    "name": "Product Features",
+    "description": "Symmetric 6-column bento grid with a tall center card featuring an image, icon-led feature cards, and an inverted accent card.",
+    "group": "Bento",
+    "preview": "/library-blocks/bento/product-features/product-features.webp"
+  },
+  {
+    "id": "library-blocks/bento/startup-metrics/startup-metrics",
+    "name": "Startup Metrics",
+    "description": "Stats-focused bento grid with large numbers, a live dashboard image card, star ratings, avatar stacks, and progress bars for startups.",
+    "group": "Bento",
+    "preview": "/library-blocks/bento/startup-metrics/startup-metrics.webp"
+  },
+  {
+    "id": "library-blocks/bento/agency-showcase/agency-showcase",
+    "name": "Agency Showcase",
+    "description": "Featured layout bento with a large case study hero image spanning 2 columns, award card, team model stats, and global reach accent card.",
+    "group": "Bento",
+    "preview": "/library-blocks/bento/agency-showcase/agency-showcase.webp"
+  },
+  {
+    "id": "library-blocks/navbar/saas-startup/saas-startup",
+    "name": "SaaS Startup Navbar",
+    "description": "A clean sticky navbar with logo, centered navigation links, sign-in and CTA buttons, and a mobile hamburger menu for SaaS products and startups.",
+    "group": "Navbar",
+    "preview": "/library-blocks/navbar/saas-startup/saas-startup.webp"
+  },
+  {
+    "id": "library-blocks/navbar/creative-agency/creative-agency",
+    "name": "Creative Agency Navbar",
+    "description": "An editorial-style navbar with serif logo, uppercase mono navigation, availability indicator, and a bold dark CTA button for creative studios and agencies.",
+    "group": "Navbar",
+    "preview": "/library-blocks/navbar/creative-agency/creative-agency.webp"
+  },
+  {
+    "id": "library-blocks/navbar/minimal-portfolio/minimal-portfolio",
+    "name": "Minimal Portfolio Navbar",
+    "description": "A lightweight minimal navbar with personal branding, sparse navigation, social icons, and a contact CTA for portfolios and freelancers.",
+    "group": "Navbar",
+    "preview": "/library-blocks/navbar/minimal-portfolio/minimal-portfolio.webp"
+  },
+  {
+    "id": "library-blocks/footer/saas-startup/saas-startup",
+    "name": "SaaS Startup Footer",
+    "description": "A multi-column footer with brand section, newsletter signup, product/company/legal link columns, social icons, and a bottom copyright bar for SaaS products.",
+    "group": "Footer",
+    "preview": "/library-blocks/footer/saas-startup/saas-startup.webp"
+  },
+  {
+    "id": "library-blocks/footer/creative-agency/creative-agency",
+    "name": "Creative Agency Footer",
+    "description": "A bold agency footer with a large CTA headline section, four-column layout with services, company links, contact details, availability indicator, and social links.",
+    "group": "Footer",
+    "preview": "/library-blocks/footer/creative-agency/creative-agency.webp"
+  },
+  {
+    "id": "library-blocks/footer/minimal-portfolio/minimal-portfolio",
+    "name": "Minimal Portfolio Footer",
+    "description": "A centered minimal footer with personal branding, contact and resume CTAs, navigation links, social icons, and copyright for portfolios and freelancers.",
+    "group": "Footer",
+    "preview": "/library-blocks/footer/minimal-portfolio/minimal-portfolio.webp"
   }
 ]

package/dist/library-blocks/feature/agency-services/agency-services.html

@@ -0,0 +1,194 @@
+<section chai-name="Agency Services Feature" class="relative overflow-hidden bg-background px-6 py-20 lg:py-28">
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-16 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <div class="mb-3 flex items-center gap-2">
+          <div class="h-1 w-8 rounded-full bg-primary"></div>
+          <span class="font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary">What We Do</span>
+        </div>
+        <h2 class="max-w-lg font-serif text-3xl font-light leading-tight text-foreground sm:text-4xl lg:text-5xl">
+          Services built for
+          <em class="not-italic text-primary">ambitious</em> brands.
+        </h2>
+      </div>
+      <p class="max-w-sm text-sm leading-relaxed text-muted-foreground lg:text-right">
+        From concept to launch, we deliver end-to-end creative solutions that drive measurable business growth.
+      </p>
+    </div>
+
+    <div chai-name="Bento Grid" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:grid-rows-2">
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-card p-8 transition-all hover:border-primary/30 hover:shadow-lg lg:row-span-2">
+        <div class="mb-8 flex h-14 w-14 items-center justify-center rounded-md bg-primary/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-primary">
+            <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path
+              d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
+          </svg>
+        </div>
+        <h3 class="mb-3 text-xl font-bold text-foreground">Brand Strategy &amp; Identity</h3>
+        <p class="mb-6 text-sm leading-relaxed text-muted-foreground">
+          We craft brand narratives that resonate. From naming and positioning to complete visual identity systems —
+          every touchpoint tells your story.
+        </p>
+        <ul class="space-y-2 text-sm text-muted-foreground">
+          <li class="flex items-center gap-2">
+            <div class="h-1 w-1 rounded-full bg-primary"></div>
+            Brand Audit &amp; Research
+          </li>
+          <li class="flex items-center gap-2">
+            <div class="h-1 w-1 rounded-full bg-primary"></div>
+            Visual Identity Design
+          </li>
+          <li class="flex items-center gap-2">
+            <div class="h-1 w-1 rounded-full bg-primary"></div>
+            Brand Guidelines
+          </li>
+          <li class="flex items-center gap-2">
+            <div class="h-1 w-1 rounded-full bg-primary"></div>
+            Tone &amp; Voice Strategy
+          </li>
+        </ul>
+        <div class="mt-8 overflow-hidden rounded-md border border-border">
+          <img
+            src="https://picsum.photos/seed/brand-identity/400/250"
+            alt="Brand identity design process with mood boards and color palettes"
+            class="w-full object-cover transition-transform duration-500 group-hover:scale-105"
+            width="400"
+            height="250" />
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-card 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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-accent-foreground">
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M3 9h18" />
+            <path d="M9 21V9" />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-lg font-bold text-foreground">Web Design &amp; Development</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Pixel-perfect responsive websites built with modern frameworks. Performance-first, conversion-optimized.
+        </p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">React</span>
+          <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">Next.js</span>
+          <span class="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">Tailwind</span>
+        </div>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-card 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">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-secondary-foreground">
+            <path
+              d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+            <circle cx="12" cy="12" r="4" />
+          </svg>
+        </div>
+        <h3 class="mb-2 text-lg font-bold text-foreground">Product Design &amp; UX</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          User-centered design for SaaS, mobile apps, and digital platforms. Research-driven, beautifully executed.
+        </p>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-card 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/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-primary">
+            <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-2 text-lg font-bold text-foreground">Growth Marketing</h3>
+        <p class="text-sm leading-relaxed text-muted-foreground">
+          Data-driven campaigns across paid, organic, and social channels. We optimize every dollar for maximum ROI.
+        </p>
+      </div>
+
+      <div
+        class="group relative overflow-hidden rounded-md border border-border bg-primary p-8 text-primary-foreground transition-all hover:shadow-lg">
+        <div class="mb-6 flex h-14 w-14 items-center justify-center rounded-md bg-primary-foreground/10">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="text-primary-foreground">
+            <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>
+        </div>
+        <h3 class="mb-2 text-lg font-bold">Creative Content</h3>
+        <p class="text-sm leading-relaxed text-primary-foreground/80">
+          Photography, video production, motion graphics, and copywriting that captures attention and drives engagement.
+        </p>
+        <a
+          href="#"
+          class="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-primary-foreground underline underline-offset-4">
+          See our reel
+          <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>
+  </div>
+</section>

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>