@cimplify/sdk 0.44.33 → 0.45.0

package/templates/storefront-retail/app/shop/shop-client.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { CataloguePage } from "@cimplify/sdk/react";
-import type { Category, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "@/components/store-product-card";
-
-/**
- * Client island for the shop page. Server-side fetches all products and
- * categories (cached via `'use cache'` in `app/shop/page.tsx`), then hands
- * them to `<CataloguePage>` which owns the interactive filter / sort state.
- *
- * The page hero (in `app/shop/page.tsx`) already provides the title; we
- * pass an empty `title` and override the SDK heading via className so the
- * page reads as one continuous design.
- */
-export function ShopClient({
-  products,
-  categories,
-}: {
-  products: Product[];
-  categories: Category[];
-}) {
-  return (
-    <CataloguePage
-      title="All products"
-      products={products}
-      categories={categories}
-      renderCard={(p) => <StoreProductCard product={p} />}
-      className="max-w-7xl mx-auto px-6 sm:px-8 py-10 sm:py-12"
-    />
-  );
-}

package/templates/storefront-retail/app/signup/page.tsx

@@ -1,17 +0,0 @@
-import type { Metadata } from "next";
-import { redirect } from "next/navigation";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Create an account — ${brand.name}`,
-  description: brand.account.signupSubtitle,
-};
-
-/**
- * Cimplify Link handles sign-up inside the `<CimplifyAccount>` iframe.
- * We bounce /signup to /account; the iframe shows the create-account UI
- * for visitors with no session.
- */
-export default function SignupPage(): never {
-  redirect("/account");
-}

package/templates/storefront-retail/app/sitemap-page/page.tsx

@@ -1,167 +0,0 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { cacheTag, cacheLife } from "next/cache";
-import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
-import { brand } from "@/lib/brand";
-
-export const metadata: Metadata = {
-  title: `Sitemap — ${brand.name}`,
-  description: "A human-readable index of every page on this site.",
-};
-
-interface SitemapData {
-  products: { slug: string; name: string }[];
-  categories: { slug: string; name: string }[];
-  collections: { slug: string; name: string }[];
-}
-
-async function getSitemap(): Promise<SitemapData> {
-  "use cache";
-  cacheTag(tags.products(), tags.categories(), tags.collections());
-  cacheLife("hours");
-
-  const client = getServerClient();
-  const [pRes, cRes, colRes] = await Promise.all([
-    client.catalogue.getProducts({ limit: 500 }),
-    client.catalogue.getCategories(),
-    client.catalogue.getCollections(),
-  ]);
-  return {
-    products: (pRes.ok ? pRes.value.items : []).map((p: Product) => ({
-      slug: p.slug ?? p.id,
-      name: p.name,
-    })),
-    categories: (cRes.ok ? cRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
-    collections: (colRes.ok ? colRes.value : []).map((c) => ({ slug: c.slug, name: c.name })),
-  };
-}
-
-const STATIC_LINKS: { title: string; links: { href: string; label: string }[] }[] = [
-  {
-    title: "Browse",
-    links: [
-      { href: "/", label: "Home" },
-      { href: "/shop", label: "Shop" },
-      { href: "/search", label: "Search" },
-    ],
-  },
-  {
-    title: "Account",
-    links: [
-      { href: "/account", label: "Account" },
-      { href: "/account/orders", label: "Orders" },
-      { href: "/account/addresses", label: "Addresses" },
-      { href: "/account/settings", label: "Settings" },
-      { href: "/login", label: "Sign in" },
-      { href: "/signup", label: "Create account" },
-      { href: "/track-order", label: "Track an order" },
-      { href: "/cart", label: "Cart" },
-      { href: "/checkout", label: "Checkout" },
-    ],
-  },
-  {
-    title: "About",
-    links: [
-      { href: "/about", label: "About" },
-      { href: "/faq", label: "FAQ" },
-      { href: "/contact", label: "Contact" },
-    ],
-  },
-  {
-    title: "Policies",
-    links: [
-      { href: "/shipping", label: "Shipping" },
-      { href: "/returns", label: "Returns" },
-      { href: "/accessibility", label: "Accessibility" },
-      { href: "/terms", label: "Terms of Service" },
-      { href: "/privacy", label: "Privacy Policy" },
-    ],
-  },
-  {
-    title: "Machine-readable",
-    links: [
-      { href: "/sitemap.xml", label: "sitemap.xml (search engines)" },
-      { href: "/llms.txt", label: "llms.txt (LLM agents)" },
-      { href: "/robots.txt", label: "robots.txt" },
-      { href: "/opensearch.xml", label: "opensearch.xml (browser search)" },
-    ],
-  },
-];
-
-export default async function SitemapHtmlPage() {
-  const { products, categories, collections } = await getSitemap();
-
-  return (
-    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-16">
-      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
-        Sitemap
-      </p>
-      <h1 className="text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-2 -tracking-[0.02em]">
-        Every page, in one place.
-      </h1>
-      <p className="text-muted-foreground mb-12">
-        For search engines, see <Link href="/sitemap.xml" className="text-primary hover:underline">/sitemap.xml</Link>.
-        For LLM agents, see <Link href="/llms.txt" className="text-primary hover:underline">/llms.txt</Link>.
-      </p>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
-        {STATIC_LINKS.map((s) => (
-          <Section key={s.title} title={s.title}>
-            {s.links.map((l) => (
-              <li key={l.href}>
-                <Link href={l.href} className="hover:text-primary transition-colors">
-                  {l.label}
-                </Link>
-              </li>
-            ))}
-          </Section>
-        ))}
-        {categories.length > 0 && (
-          <Section title="Categories">
-            {categories.map((c) => (
-              <li key={c.slug}>
-                <Link href={`/categories/${c.slug}`} className="hover:text-primary transition-colors">
-                  {c.name}
-                </Link>
-              </li>
-            ))}
-          </Section>
-        )}
-        {collections.length > 0 && (
-          <Section title="Collections">
-            {collections.map((c) => (
-              <li key={c.slug}>
-                <Link href={`/collections/${c.slug}`} className="hover:text-primary transition-colors">
-                  {c.name}
-                </Link>
-              </li>
-            ))}
-          </Section>
-        )}
-        {products.length > 0 && (
-          <Section title={`Products (${products.length})`}>
-            {products.map((p) => (
-              <li key={p.slug}>
-                <Link href={`/shop?product=${encodeURIComponent(p.slug)}`} className="hover:text-primary transition-colors">
-                  {p.name}
-                </Link>
-              </li>
-            ))}
-          </Section>
-        )}
-      </div>
-    </article>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <p className="font-semibold text-[12px] uppercase tracking-[0.12em] text-foreground mb-3">
-        {title}
-      </p>
-      <ul className="space-y-2 m-0 p-0 list-none text-sm text-muted-foreground">
-        {children}
-      </ul>
-    </div>
-  );
-}

package/templates/storefront-retail/app/sitemap.ts

@@ -1,59 +0,0 @@
-import type { MetadataRoute } from "next";
-import { getServerClient, type Product } from "@cimplify/sdk/server";
-
-const SITE_URL =
-  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
-
-const STATIC_ROUTES: { path: string; priority: number; changeFrequency: "daily" | "weekly" | "monthly" }[] = [
-  { path: "/", priority: 1.0, changeFrequency: "daily" },
-  { path: "/shop", priority: 0.9, changeFrequency: "daily" },
-  { path: "/about", priority: 0.5, changeFrequency: "monthly" },
-  { path: "/faq", priority: 0.4, changeFrequency: "monthly" },
-  { path: "/terms", priority: 0.2, changeFrequency: "monthly" },
-  { path: "/privacy", priority: 0.2, changeFrequency: "monthly" },
-];
-
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const now = new Date();
-  const client = getServerClient();
-
-  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
-    client.catalogue.getProducts({ limit: 500 }),
-    client.catalogue.getCategories(),
-    client.catalogue.getCollections(),
-  ]);
-
-  const products = productsRes.ok ? productsRes.value.items : [];
-  const categories = categoriesRes.ok ? categoriesRes.value : [];
-  const collections = collectionsRes.ok ? collectionsRes.value : [];
-
-  const staticEntries: MetadataRoute.Sitemap = STATIC_ROUTES.map((r) => ({
-    url: `${SITE_URL}${r.path}`,
-    lastModified: now,
-    changeFrequency: r.changeFrequency,
-    priority: r.priority,
-  }));
-
-  const productEntries: MetadataRoute.Sitemap = products.map((p: Product) => ({
-    url: `${SITE_URL}/products/${p.slug ?? p.id}`,
-    lastModified: p.updated_at ? new Date(p.updated_at) : now,
-    changeFrequency: "weekly",
-    priority: 0.7,
-  }));
-
-  const categoryEntries: MetadataRoute.Sitemap = categories.map((c) => ({
-    url: `${SITE_URL}/categories/${c.slug}`,
-    lastModified: now,
-    changeFrequency: "weekly",
-    priority: 0.6,
-  }));
-
-  const collectionEntries: MetadataRoute.Sitemap = collections.map((c) => ({
-    url: `${SITE_URL}/collections/${c.slug}`,
-    lastModified: now,
-    changeFrequency: "weekly",
-    priority: 0.6,
-  }));
-
-  return [...staticEntries, ...categoryEntries, ...collectionEntries, ...productEntries];
-}

package/templates/storefront-retail/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-retail/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-retail/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-retail/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-retail/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-retail/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-retail/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-retail/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-retail/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>
-  );
-}