@cimplify/sdk 0.44.33 → 0.45.0

package/templates/storefront-fashion/app/size-guide/page.tsx

@@ -1,155 +0,0 @@
-import type { Metadata } from "next";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Size Guide — ${brand.name}`,
-  description: "Chest, length, and shoulder measurements for every Studio FRX piece.",
-};
-
-interface SizeRow {
-  size: string;
-  chest: string;
-  length: string;
-  shoulder: string;
-}
-
-const TOPS_CHART: SizeRow[] = [
-  { size: "XS", chest: "104 cm / 41 in", length: "68 cm / 26.8 in", shoulder: "50 cm / 19.7 in" },
-  { size: "S", chest: "110 cm / 43.3 in", length: "70 cm / 27.5 in", shoulder: "52 cm / 20.5 in" },
-  { size: "M", chest: "116 cm / 45.7 in", length: "72 cm / 28.3 in", shoulder: "54 cm / 21.3 in" },
-  { size: "L", chest: "122 cm / 48 in", length: "74 cm / 29.1 in", shoulder: "56 cm / 22 in" },
-  { size: "XL", chest: "128 cm / 50.4 in", length: "76 cm / 29.9 in", shoulder: "58 cm / 22.8 in" },
-  { size: "2XL", chest: "134 cm / 52.7 in", length: "78 cm / 30.7 in", shoulder: "60 cm / 23.6 in" },
-  { size: "3XL", chest: "140 cm / 55.1 in", length: "80 cm / 31.5 in", shoulder: "62 cm / 24.4 in" },
-];
-
-const BOTTOMS_CHART: { size: string; waist: string; hip: string; inseam: string }[] = [
-  { size: "XS", waist: "72 cm / 28 in", hip: "92 cm / 36 in", inseam: "78 cm / 30.7 in" },
-  { size: "S", waist: "76 cm / 30 in", hip: "96 cm / 38 in", inseam: "78 cm / 30.7 in" },
-  { size: "M", waist: "82 cm / 32 in", hip: "102 cm / 40 in", inseam: "80 cm / 31.5 in" },
-  { size: "L", waist: "88 cm / 35 in", hip: "108 cm / 42.5 in", inseam: "80 cm / 31.5 in" },
-  { size: "XL", waist: "94 cm / 37 in", hip: "114 cm / 45 in", inseam: "82 cm / 32.3 in" },
-  { size: "2XL", waist: "102 cm / 40 in", hip: "122 cm / 48 in", inseam: "82 cm / 32.3 in" },
-];
-
-export default function SizeGuidePage() {
-  return (
-    <article className="max-w-4xl mx-auto px-6 sm:px-8 py-16">
-      <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-primary mb-2">
-        Size guide
-      </p>
-      <h1 className="font-display text-[clamp(2.5rem,7vw,5rem)] uppercase mb-4 -tracking-[0.04em] leading-[0.95]">
-        Find your fit.
-      </h1>
-      <p className="text-base text-muted-foreground leading-relaxed max-w-2xl mb-12">
-        Our pieces are cut for an oversized, dropped-shoulder fit. Order true to size for
-        the intended fit; size down for a regular cut. All measurements are flat-laid
-        garment measurements.
-      </p>
-
-      <section className="mb-14">
-        <h2 className="text-2xl font-bold mb-2 -tracking-[0.025em]">Tops & outerwear</h2>
-        <p className="text-sm text-muted-foreground mb-4">
-          Hoodies, tees, sweats, jackets. Chest measured pit-to-pit, doubled. Length
-          measured from highest shoulder seam to hem.
-        </p>
-        <SizeTable
-          headings={["Size", "Chest", "Length", "Shoulder"]}
-          rows={TOPS_CHART.map((r) => [r.size, r.chest, r.length, r.shoulder])}
-        />
-      </section>
-
-      <section className="mb-14">
-        <h2 className="text-2xl font-bold mb-2 -tracking-[0.025em]">Bottoms</h2>
-        <p className="text-sm text-muted-foreground mb-4">
-          Trousers, shorts, sweats. Waist measured flat across the top of the
-          waistband, doubled.
-        </p>
-        <SizeTable
-          headings={["Size", "Waist", "Hip", "Inseam"]}
-          rows={BOTTOMS_CHART.map((r) => [r.size, r.waist, r.hip, r.inseam])}
-        />
-      </section>
-
-      <section className="rounded-2xl bg-foreground text-background p-8">
-        <h2 className="text-xl font-bold mb-3 -tracking-[0.025em]">How to measure yourself</h2>
-        <ul className="space-y-3 text-background/85 leading-relaxed">
-          <li>
-            <strong className="text-background">Chest</strong> — Wrap a soft tape around
-            the fullest part of your chest, under the arms, keeping the tape level.
-          </li>
-          <li>
-            <strong className="text-background">Waist</strong> — Around the narrowest part
-            of your waist, just above the navel.
-          </li>
-          <li>
-            <strong className="text-background">Hip</strong> — Around the fullest part of
-            your hips, feet together.
-          </li>
-          <li>
-            <strong className="text-background">Inseam</strong> — From the very top of the
-            inside of your leg down to the floor (no shoes).
-          </li>
-        </ul>
-      </section>
-
-      <p className="mt-12 text-sm text-muted-foreground">
-        Still unsure?{" "}
-        <a
-          href={`mailto:${brand.faq.contactEmail}`}
-          className="text-primary font-semibold hover:underline"
-        >
-          Email us your usual size in another brand
-        </a>{" "}
-        and we'll recommend a fit.
-      </p>
-    </article>
-  );
-}
-
-function SizeTable({
-  headings,
-  rows,
-}: {
-  headings: string[];
-  rows: string[][];
-}) {
-  return (
-    <div className="overflow-x-auto rounded-2xl border border-border">
-      <table className="w-full text-sm">
-        <thead className="bg-muted">
-          <tr>
-            {headings.map((h) => (
-              <th
-                key={h}
-                className="text-left font-semibold uppercase tracking-wider text-[11px] text-muted-foreground px-4 py-3"
-              >
-                {h}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((r, i) => (
-            <tr
-              key={r[0]}
-              className={i % 2 === 0 ? "bg-background" : "bg-muted/30"}
-            >
-              {r.map((cell, j) => (
-                <td
-                  key={j}
-                  className={[
-                    "px-4 py-3 tabular-nums",
-                    j === 0 ? "font-semibold text-foreground" : "text-foreground/80",
-                  ].join(" ")}
-                >
-                  {cell}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/templates/storefront-fashion/app/terms/page.tsx

@@ -1,44 +0,0 @@
-import type { Metadata } from "next";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Terms of Service — ${brand.name}`,
-  description: `The rules of the road for ordering from ${brand.name}.`,
-};
-
-export default function TermsPage() {
-  const t = brand.terms;
-  return (
-    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
-      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2 not-prose">
-        {t.eyebrow}
-      </p>
-      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-2 -tracking-[0.025em]">
-        {t.title}
-      </h1>
-      <p className="text-sm text-muted-foreground not-prose mb-10">
-        Last updated: {t.lastUpdated}
-      </p>
-
-      <section className="space-y-5 leading-relaxed text-foreground/90">
-        {t.sections.map((s) => (
-          <div key={s.heading}>
-            <h2 className="text-2xl font-semibold mt-0 -tracking-[0.02em]">{s.heading}</h2>
-            {typeof s.body === "string" ? (
-              <p>{s.body}</p>
-            ) : (
-              <>
-                <p>{s.body.intro}</p>
-                <ul className="list-disc pl-6 space-y-2">
-                  {s.body.bullets.map((b) => (
-                    <li key={b}>{b}</li>
-                  ))}
-                </ul>
-              </>
-            )}
-          </div>
-        ))}
-      </section>
-    </article>
-  );
-}

package/templates/storefront-fashion/app/track-order/page.tsx

@@ -1,24 +0,0 @@
-import type { Metadata } from "next";
-import { TrackOrderForm } from "./track-order-form";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Track an order — ${brand.name}`,
-  description: brand.trackOrder.body,
-};
-
-export default function TrackOrderPage() {
-  const t = brand.trackOrder;
-  return (
-    <article className="max-w-2xl mx-auto px-6 sm:px-8 py-16">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-        {t.eyebrow}
-      </p>
-      <h1 className="font-serif text-[clamp(2rem,5vw,3rem)] font-semibold mb-4 -tracking-[0.02em]">
-        {t.title}
-      </h1>
-      <p className="text-muted-foreground leading-relaxed mb-8">{t.body}</p>
-      <TrackOrderForm />
-    </article>
-  );
-}

package/templates/storefront-fashion/app/track-order/track-order-form.tsx

@@ -1,69 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-/**
- * Guest order tracker. Routes /orders/<id> with the entered id; the
- * post-checkout confirmation page already lives at /orders/[id] so this
- * just sends the visitor there. Replace the redirect with a real lookup
- * (e.g. Cimplify orders API + email-match guard) for production.
- */
-export function TrackOrderForm() {
-  const router = useRouter();
-  const [orderId, setOrderId] = useState("");
-  const [email, setEmail] = useState("");
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        if (!orderId.trim()) return;
-        router.push(`/orders/${encodeURIComponent(orderId.trim())}`);
-      }}
-      className="space-y-4 rounded-2xl border border-border bg-card p-6"
-    >
-      <div>
-        <label
-          htmlFor="orderId"
-          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
-        >
-          Order number
-        </label>
-        <input
-          id="orderId"
-          name="orderId"
-          required
-          value={orderId}
-          onChange={(e) => setOrderId(e.target.value)}
-          placeholder="ord_abc123…"
-          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
-        />
-      </div>
-      <div>
-        <label
-          htmlFor="email"
-          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
-        >
-          Order email
-        </label>
-        <input
-          id="email"
-          name="email"
-          type="email"
-          required
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="you@email.com"
-          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
-        />
-      </div>
-      <button
-        type="submit"
-        className="w-full inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
-      >
-        Track order
-      </button>
-    </form>
-  );
-}

package/templates/storefront-fashion/components/account-iframe.tsx

@@ -1,13 +0,0 @@
-"use client";
-
-import { CimplifyAccount } from "@cimplify/sdk/react";
-
-/**
- * Cimplify Account portal — iframe-mounted UI hosted by Cimplify Link.
- * Handles sign-in, sign-up, OTP, addresses, payment methods, sessions,
- * and order history. The iframe owns auth state; we just choose which
- * `section` to land on.
- */
-export function AccountIframe({ section }: { section?: string }) {
-  return <CimplifyAccount section={section} />;
-}

package/templates/storefront-fashion/components/brand-marquee.tsx

@@ -1,27 +0,0 @@
-import { brand } from "@/lib/brand";
-
-/**
- * Brand authority strip. Wordmark-only (avoids licensing issues with real
- * logos), monospaced for the brand-as-typography aesthetic.
- */
-export function BrandMarquee() {
-  const strip = brand.brandStrip;
-  if (!strip || strip.brands.length === 0) return null;
-  return (
-    <section className="border-y border-border bg-background py-8 sm:py-10 overflow-hidden">
-      <p className="text-center text-[11px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-6">
-        {strip.headline}
-      </p>
-      <div className="flex items-center justify-around gap-10 sm:gap-14 flex-wrap px-6">
-        {strip.brands.map((b) => (
-          <span
-            key={b}
-            className="text-[clamp(1.25rem,2vw,1.75rem)] font-semibold text-muted-foreground hover:text-foreground transition-colors -tracking-[0.025em] opacity-70 hover:opacity-100"
-          >
-            {b}
-          </span>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/storefront-fashion/components/cart-drawer.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
-
-/**
- * Side-drawer cart. Auto-opens when an item is added (via
- * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
- * also calls `useCartDrawer().open()` to reveal it on click.
- */
-export function CartDrawer() {
-  const router = useRouter();
-  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
-}

package/templates/storefront-fashion/components/cart-pill.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useCartDrawer } from "@cimplify/sdk/react";
-import { useCartCount } from "@/lib/cart";
-
-/**
- * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * opens the side cart drawer on click (instead of navigating to /cart).
- * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
- * header chrome streams without blocking on the cart fetch.
- */
-export function CartPill() {
-  const { count } = useCartCount();
-  const { open } = useCartDrawer();
-  return (
-    <button
-      type="button"
-      onClick={open}
-      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
-    >
-      Cart · {count}
-    </button>
-  );
-}
-
-export function CartPillSkeleton() {
-  return (
-    <span
-      aria-hidden
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
-    >
-      Cart · …
-    </span>
-  );
-}

package/templates/storefront-fashion/components/category-grid.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
-import type { Category } from "@cimplify/sdk";
-
-/**
- * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
- * and accessibility, and routes selections to /categories/:slug.
- */
-export function CategoryGrid({ categories }: { categories?: Category[] }) {
-  const router = useRouter();
-  return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
-      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
-      <SdkCategoryGrid
-        categories={categories}
-        onSelect={(c) => router.push(`/categories/${c.slug}`)}
-        classNames={{
-          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
-          name: "font-serif text-lg font-semibold text-foreground",
-          description: "text-xs text-muted-foreground",
-          count: "text-xs text-muted-foreground mt-1",
-        }}
-      />
-    </section>
-  );
-}

package/templates/storefront-fashion/components/category-tiles.tsx

@@ -1,104 +0,0 @@
-import Link from "next/link";
-import Image from "next/image";
-import type { Category } from "@cimplify/sdk";
-
-interface CategoryTilesProps {
-  categories: Category[];
-}
-
-const ICONS: Record<string, React.ReactNode> = {
-  phones: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-      <rect x="6" y="2" width="12" height="20" rx="2.5" />
-      <line x1="12" y1="18" x2="12" y2="18" strokeWidth="2.5" strokeLinecap="round" />
-    </svg>
-  ),
-  laptops: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-      <rect x="3" y="4" width="18" height="12" rx="1.5" />
-      <line x1="2" y1="20" x2="22" y2="20" strokeLinecap="round" />
-    </svg>
-  ),
-  audio: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-      <path d="M3 14v-2a9 9 0 0 1 18 0v2" />
-      <rect x="2" y="14" width="5" height="6" rx="1.5" />
-      <rect x="17" y="14" width="5" height="6" rx="1.5" />
-    </svg>
-  ),
-  accessories: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-      <rect x="2" y="6" width="14" height="10" rx="2" />
-      <path d="M16 12h4l2 2v0l-2 2h-4" />
-    </svg>
-  ),
-  gaming: (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-      <path d="M5 7h14a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1l-2-3H8l-2 3H5a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3z" />
-      <line x1="9" y1="11" x2="9" y2="13" strokeLinecap="round" />
-      <line x1="8" y1="12" x2="10" y2="12" strokeLinecap="round" />
-      <circle cx="15" cy="11" r="0.75" fill="currentColor" />
-      <circle cx="17" cy="13" r="0.75" fill="currentColor" />
-    </svg>
-  ),
-};
-
-export function CategoryTiles({ categories }: CategoryTilesProps) {
-  if (categories.length === 0) return null;
-  return (
-    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
-      <div className="flex items-end justify-between gap-6 mb-8">
-        <div>
-          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
-            Shop the catalogue
-          </p>
-          <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold -tracking-[0.025em]">
-            Pick your category.
-          </h2>
-        </div>
-        <Link
-          href="/shop"
-          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
-        >
-          See everything
-          <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
-            <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
-        </Link>
-      </div>
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
-        {categories.map((c, i) => (
-          <Link
-            key={c.id}
-            href={`/categories/${c.slug}`}
-            className="group relative overflow-hidden rounded-2xl bg-card border border-border p-5 hover:border-primary hover:-translate-y-0.5 transition-all"
-          >
-            <div className="flex items-start justify-between mb-12">
-              <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary">
-                {ICONS[c.slug] ?? (
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
-                    <rect x="3" y="3" width="18" height="18" rx="2" />
-                  </svg>
-                )}
-              </div>
-              <span className="text-[10px] font-mono text-muted-foreground tabular-nums">
-                {String(i + 1).padStart(2, "0")}
-              </span>
-            </div>
-            <p className="text-base font-semibold mb-1 -tracking-[0.015em]">{c.name}</p>
-            {c.product_count != null && (
-              <p className="text-xs text-muted-foreground">
-                {c.product_count} {c.product_count === 1 ? "product" : "products"}
-              </p>
-            )}
-            <span className="absolute right-4 bottom-4 grid place-items-center w-7 h-7 rounded-full bg-foreground text-background opacity-0 group-hover:opacity-100 transition-opacity">
-              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
-                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </span>
-          </Link>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/storefront-fashion/components/collection-strip.tsx

@@ -1,45 +0,0 @@
-import Link from "next/link";
-import type { Collection, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "./store-product-card";
-
-interface CollectionStripProps {
-  collection: Collection;
-  products: Product[];
-  collectionHref?: string;
-}
-
-/**
- * Horizontal strip of products under a collection title. Cards come from the
- * SDK so every variant (Food, Bundle, Composite, Service, …) renders
- * correctly; clicks open the shared URL-driven product modal.
- */
-export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
-  if (products.length === 0) return null;
-  return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
-        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
-        {collectionHref && (
-          <Link
-            href={collectionHref}
-            className="text-[13px] font-semibold text-primary hover:underline"
-          >
-            See all →
-          </Link>
-        )}
-        {collection.description && (
-          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
-            {collection.description}
-          </p>
-        )}
-      </header>
-      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
-        {products.slice(0, 8).map((p) => (
-          <div key={p.id} className="snap-start">
-            <StoreProductCard product={p} />
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/storefront-fashion/components/feature-hero.tsx

@@ -1,82 +0,0 @@
-import Link from "next/link";
-import Image from "next/image";
-
-interface FeatureHeroProps {
-  eyebrow: string;
-  title: React.ReactNode;
-  description: string;
-  primaryCta: { label: string; href: string };
-  secondaryCta?: { label: string; href: string };
-  imageUrl: string;
-  imageAlt: string;
-  badge?: string;
-}
-
-/**
- * Editorial full-bleed fashion hero. Image fills the viewport; copy sits
- * over a dark gradient. Strings come from `brand.hero` at the call site.
- */
-export function FeatureHero({
-  eyebrow,
-  title,
-  description,
-  primaryCta,
-  secondaryCta,
-  imageUrl,
-  imageAlt,
-  badge,
-}: FeatureHeroProps) {
-  return (
-    <section className="relative w-full h-[clamp(560px,80vh,820px)] overflow-hidden bg-foreground text-background">
-      <Image
-        src={imageUrl}
-        alt={imageAlt}
-        fill
-        sizes="100vw"
-        className="object-cover"
-        priority
-      />
-      <div className="absolute inset-0 bg-gradient-to-t from-foreground via-foreground/40 to-foreground/0 pointer-events-none" />
-      <div className="absolute inset-0 flex items-end">
-        <div className="w-full max-w-7xl mx-auto px-6 sm:px-10 pb-12 sm:pb-16 lg:pb-20">
-          {badge && (
-            <span className="inline-flex items-center gap-2 mb-5 px-3 py-1.5 rounded-full bg-background/10 border border-background/30 backdrop-blur-md text-[11px] uppercase tracking-[0.2em] font-medium">
-              <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
-              {badge}
-            </span>
-          )}
-          {eyebrow && (
-            <p className="text-[12px] uppercase tracking-[0.3em] text-background/70 mb-3">
-              {eyebrow}
-            </p>
-          )}
-          <h1 className="font-display text-[clamp(3.5rem,11vw,9rem)] m-0 mb-4 -tracking-[0.04em] leading-[0.92] uppercase">
-            {title}
-          </h1>
-          <p className="max-w-xl text-base sm:text-lg text-background/85 leading-relaxed mb-8">
-            {description}
-          </p>
-          <div className="flex flex-wrap items-center gap-3">
-            <Link
-              href={primaryCta.href}
-              className="inline-flex items-center gap-2 px-7 py-3.5 bg-background text-foreground font-bold text-sm uppercase tracking-wider hover:bg-primary hover:text-primary-foreground transition-colors"
-            >
-              {primaryCta.label}
-              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden>
-                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </Link>
-            {secondaryCta && (
-              <Link
-                href={secondaryCta.href}
-                className="inline-flex items-center gap-2 px-7 py-3.5 border border-background/40 text-background hover:bg-background/10 transition-colors text-sm uppercase tracking-wider font-medium"
-              >
-                {secondaryCta.label}
-              </Link>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}