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

package/dist/library-blocks/bento/startup-metrics/startup-metrics.html

@@ -0,0 +1,170 @@
+<section chai-name="Startup Metrics Bento" class="relative bg-card px-6 py-20 lg:py-28">
+  <div
+    class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(var(--primary-foreground),0.04)_0%,transparent_100%)]"></div>
+
+  <div class="mx-auto max-w-7xl">
+    <div chai-name="Section Header" class="mb-14 max-w-xl">
+      <span
+        class="mb-3 inline-flex items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-xs font-semibold text-muted-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          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>
+        By the Numbers
+      </span>
+      <h2 class="mb-4 text-3xl font-extrabold leading-tight tracking-tight text-foreground sm:text-4xl lg:text-5xl">
+        Results that <span class="text-primary">speak volumes.</span>
+      </h2>
+      <p class="text-base text-muted-foreground">
+        We don't just build products — we build growth engines. Here's the proof.
+      </p>
+    </div>
+
+    <div chai-name="Bento Grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:grid-rows-2">
+      <div class="group rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="mb-6 text-5xl font-black tracking-tight text-foreground">$4.2M</div>
+        <div class="text-sm font-medium text-muted-foreground">Annual recurring revenue</div>
+        <div class="mt-4 flex items-center gap-1 text-xs font-semibold text-primary">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="m18 15-6-6-6 6" />
+          </svg>
+          +127% YoY
+        </div>
+      </div>
+
+      <div
+        class="group overflow-hidden rounded-md border border-border bg-background transition-all hover:shadow-lg lg:col-span-2 lg:row-span-2">
+        <div class="p-8">
+          <div class="mb-2 flex items-center gap-2">
+            <div class="h-2 w-2 animate-pulse rounded-full bg-primary"></div>
+            <span class="font-mono text-xs font-bold uppercase tracking-widest text-primary">Live Dashboard</span>
+          </div>
+          <h3 class="mb-1 text-lg font-bold text-foreground">Growth Overview</h3>
+          <p class="text-sm text-muted-foreground">Real-time metrics from the last 12 months.</p>
+        </div>
+        <img
+          src="https://picsum.photos/seed/growth-dashboard/700/400"
+          alt="Growth dashboard showing revenue charts, user acquisition, and retention metrics"
+          class="w-full border-t border-border object-cover"
+          width="700"
+          height="400" />
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-primary p-8 text-primary-foreground transition-all hover:shadow-lg">
+        <div class="mb-6 text-5xl font-black tracking-tight">98.7%</div>
+        <div class="text-sm font-medium text-primary-foreground/70">Customer satisfaction score</div>
+        <div class="mt-4 flex gap-1">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-primary-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>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-primary-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>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-primary-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>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-primary-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>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="text-primary-foreground/40">
+            <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>
+      </div>
+
+      <div class="group rounded-md border border-border bg-background p-8 transition-all hover:shadow-lg">
+        <div class="mb-6 text-5xl font-black tracking-tight text-foreground">12K+</div>
+        <div class="text-sm font-medium text-muted-foreground">Active teams worldwide</div>
+        <div class="mt-4 flex -space-x-2">
+          <img
+            src="https://picsum.photos/seed/team-av1/32/32"
+            alt="Team member"
+            class="h-7 w-7 rounded-full border-2 border-background object-cover"
+            width="32"
+            height="32" />
+          <img
+            src="https://picsum.photos/seed/team-av2/32/32"
+            alt="Team member"
+            class="h-7 w-7 rounded-full border-2 border-background object-cover"
+            width="32"
+            height="32" />
+          <img
+            src="https://picsum.photos/seed/team-av3/32/32"
+            alt="Team member"
+            class="h-7 w-7 rounded-full border-2 border-background object-cover"
+            width="32"
+            height="32" />
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-background bg-muted text-[9px] font-bold text-muted-foreground">
+            +
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="group rounded-md border border-border bg-foreground p-8 text-background transition-all hover:shadow-lg">
+        <div class="mb-6 text-5xl font-black tracking-tight">0.3s</div>
+        <div class="text-sm font-medium text-background/70">Average response time</div>
+        <div class="mt-4 h-1.5 w-full overflow-hidden rounded-full bg-background/20">
+          <div class="h-full w-[95%] rounded-full bg-background/60"></div>
+        </div>
+        <div class="mt-1 text-right text-[10px] text-background/50">99.99% uptime</div>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,149 @@
+[
+  {
+    "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>