@cimplify/cli 0.2.8 → 0.3.1

package/templates/storefront-pharmacy/components/providers.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { createCimplifyClient } from "@cimplify/sdk";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
+
+/**
+ * Boots the Cimplify SDK client once on the client-side and exposes it via
+ * <CimplifyProvider/>.
+ *
+ * Base-URL resolution:
+ *   1) If NEXT_PUBLIC_CIMPLIFY_API_URL is set, use it verbatim.
+ *   2) Otherwise use the current origin so requests flow through the
+ *      Next.js rewrite in `next.config.ts` to the mock at :8787 (no CORS).
+ *   3) Fall back to 127.0.0.1:8787 only during SSR, when there's no window.
+ */
+export function Providers({ children }: { children: ReactNode }) {
+  const client = useMemo(() => {
+    const baseUrl =
+      process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() ||
+      (typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787");
+    const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
+    return createCimplifyClient({
+      baseUrl,
+      publicKey,
+      suppressPublicKeyWarning: true,
+    });
+  }, []);
+
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
+}

package/templates/storefront-pharmacy/components/section-heading.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+interface SectionHeadingProps {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  link?: { label: string; href: string };
+}
+
+export function SectionHeading({ eyebrow, title, description, link }: SectionHeadingProps) {
+  return (
+    <div className="flex items-end justify-between gap-6 mb-8">
+      <div className="max-w-2xl">
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+          {eyebrow}
+        </p>
+        <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold m-0 -tracking-[0.025em]">
+          {title}
+        </h2>
+        {description && (
+          <p className="mt-2 text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {link && (
+        <Link
+          href={link.href}
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+        >
+          {link.label}
+          <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>
+  );
+}

package/templates/storefront-pharmacy/components/store-product-card.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import Link from "next/link";
+import {
+  CardVariant,
+  FoodProductCard,
+  RetailProductCard,
+  WholesaleProductCard,
+  DigitalProductCard,
+  BundleProductCard,
+  CompositeProductCard,
+  StandardServiceCard,
+  CompactServiceCard,
+  ScheduleServiceCard,
+  RentalServiceCard,
+  AccommodationCard,
+  LeaseServiceCard,
+  SubscriptionCard,
+} from "@cimplify/sdk/react";
+import type { CardLayoutProps } from "@cimplify/sdk/react";
+import type { Product } from "@cimplify/sdk";
+import { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from "@cimplify/sdk";
+
+const RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
+const LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
+
+const VARIANT_CARDS: Record<CardVariant, React.ComponentType<CardLayoutProps>> = {
+  [CardVariant.Food]: FoodProductCard,
+  [CardVariant.Retail]: RetailProductCard,
+  [CardVariant.Wholesale]: WholesaleProductCard,
+  [CardVariant.Digital]: DigitalProductCard,
+  [CardVariant.Bundle]: BundleProductCard,
+  [CardVariant.Composite]: CompositeProductCard,
+  [CardVariant.Standard]: StandardServiceCard,
+  [CardVariant.Compact]: CompactServiceCard,
+  [CardVariant.Schedule]: ScheduleServiceCard,
+  [CardVariant.Rental]: RentalServiceCard,
+  [CardVariant.Accommodation]: AccommodationCard,
+  [CardVariant.Lease]: LeaseServiceCard,
+  [CardVariant.Subscription]: SubscriptionCard,
+};
+
+function resolveVariant(p: Product): CardVariant {
+  if (p.type === PRODUCT_TYPE.Bundle) return CardVariant.Bundle;
+  if (p.type === PRODUCT_TYPE.Composite) return CardVariant.Composite;
+  if (p.quantity_pricing && p.quantity_pricing.length > 1) return CardVariant.Wholesale;
+  if (p.type === PRODUCT_TYPE.Digital) return CardVariant.Digital;
+  if (p.type === PRODUCT_TYPE.Service) {
+    if (p.duration_unit && RENTAL_UNITS.has(p.duration_unit)) return CardVariant.Rental;
+    if (p.duration_unit === DURATION_UNIT.Nights) return CardVariant.Accommodation;
+    if (p.duration_unit && LEASE_UNITS.has(p.duration_unit)) return CardVariant.Lease;
+    if (p.billing_plans && p.billing_plans.length > 0 && !p.duration_minutes) return CardVariant.Subscription;
+    return CardVariant.Standard;
+  }
+  if (p.render_hint === RENDER_HINT.Food) return CardVariant.Food;
+  return CardVariant.Retail;
+}
+
+interface Props {
+  product: Product;
+  /** Override the auto-detected card variant. */
+  variant?: CardVariant;
+}
+
+/**
+ * Variant-aware product card that links to the dedicated product page at
+ * `/products/<slug>`. Statically pre-renderable (no `useSearchParams`),
+ * with `prefetch` enabled so hover → instant nav. Full product page
+ * (vs a modal) is the right pattern for pharmacy: dosage info, prescription
+ * upload inputs, consent signatures, and pharmacist notes all need vertical
+ * real estate.
+ */
+export function StoreProductCard({ product, variant }: Props) {
+  const slug = product.slug || product.id;
+  const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
+  const href = `/products/${encodeURIComponent(slug)}`;
+
+  return (
+    <Card
+      product={product}
+      renderLink={({ className, children }) => (
+        <Link href={href} className={className}>
+          {children}
+        </Link>
+      )}
+    />
+  );
+}

package/templates/storefront-pharmacy/components/symptom-finder.tsx

@@ -0,0 +1,108 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+type IconKey = (typeof brand.symptomFinder.tiles)[number]["iconKey"];
+
+/**
+ * Symptom-led entry grid — the pharmacy answer to the retail
+ * "category tiles" row. Eight tiles ("Pain & fever", "Cold & flu",
+ * "Baby care", …) each linked to the appropriate category page, with
+ * an inline SVG icon keyed by `iconKey`. Strings + ordering come from
+ * `brand.symptomFinder`.
+ */
+export function SymptomFinder() {
+  const { eyebrow, title, description, tiles } = brand.symptomFinder;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="max-w-2xl mb-8 sm:mb-10">
+        <p className="text-[12px] font-mono uppercase tracking-[0.2em] text-muted-foreground mb-2">
+          {eyebrow}
+        </p>
+        <h2 className="text-[clamp(1.75rem,3.2vw,2.5rem)] font-semibold m-0 -tracking-[0.025em] leading-tight">
+          {title}
+        </h2>
+        <p className="text-sm sm:text-base text-muted-foreground mt-3 leading-relaxed">
+          {description}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
+        {tiles.map((t) => (
+          <Link
+            key={t.label + t.iconKey}
+            href={t.href}
+            className="group relative flex flex-col items-start gap-3 p-5 sm:p-6 rounded-2xl bg-card border border-border hover:border-primary/40 hover:shadow-[0_10px_30px_rgb(0_0_0/0.06)] transition-all"
+          >
+            <span className="grid place-items-center w-11 h-11 rounded-xl bg-accent text-accent-foreground group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+              {ICONS[t.iconKey]}
+            </span>
+            <span className="text-[15px] sm:text-base font-semibold tracking-tight">
+              {t.label}
+            </span>
+            <span className="absolute top-5 right-5 text-muted-foreground/40 group-hover:text-primary group-hover:translate-x-0.5 transition-all">
+              <ArrowIcon />
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const ICONS: Record<IconKey, React.ReactNode> = {
+  pain: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <path d="M12 3a4 4 0 0 0-4 4v2H6a3 3 0 0 0 0 6h2v2a4 4 0 0 0 8 0v-2h2a3 3 0 0 0 0-6h-2V7a4 4 0 0 0-4-4z" strokeLinejoin="round" />
+    </svg>
+  ),
+  cold: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <path d="M12 3v18M3 12h18M5 5l14 14M19 5L5 19" strokeLinecap="round" />
+    </svg>
+  ),
+  allergy: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M12 4v3M12 17v3M4 12h3M17 12h3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2" strokeLinecap="round" />
+    </svg>
+  ),
+  sleep: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z" strokeLinejoin="round" />
+    </svg>
+  ),
+  baby: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <circle cx="12" cy="9" r="4" />
+      <path d="M9 9c0 .5.5 1 1 1M14 9c0 .5.5 1 1 1" strokeLinecap="round" />
+      <path d="M5 20c1-3 4-5 7-5s6 2 7 5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  "first-aid": (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <rect x="3" y="7" width="18" height="13" rx="2" />
+      <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
+      <path d="M12 11v6M9 14h6" strokeLinecap="round" />
+    </svg>
+  ),
+  vitamins: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <rect x="3.5" y="9" width="17" height="6" rx="3" transform="rotate(-30 12 12)" />
+      <path d="M9 9.5l5.5 5.5" />
+    </svg>
+  ),
+  diabetes: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-6 h-6" aria-hidden>
+      <path d="M12 3l5 5a7 7 0 1 1-10 0l5-5z" strokeLinejoin="round" />
+      <path d="M9 14h6M12 11v6" strokeLinecap="round" />
+    </svg>
+  ),
+};
+
+function ArrowIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-4 h-4" aria-hidden>
+      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/templates/storefront-pharmacy/components/trade-in-cta.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export function TradeInCta() {
+  const t = brand.tradeIn;
+  if (!t) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-foreground text-background rounded-3xl p-8 sm:p-12 lg:p-14 overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.04] [background-image:linear-gradient(135deg,white_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none" />
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary-foreground/70 mb-3">
+            {t.eyebrow}
+          </p>
+          <h2 className="text-[clamp(1.75rem,3.5vw,2.5rem)] font-bold m-0 mb-4 -tracking-[0.025em] leading-[1.1]">
+            {t.title}
+          </h2>
+          <p className="text-background/75 leading-relaxed mb-6">{t.body}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href={t.primaryCtaHref}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+            >
+              {t.primaryCtaLabel}
+              <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>
+            <Link
+              href={t.secondaryCtaHref}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-background/25 hover:bg-background/10 transition-colors text-sm font-medium"
+            >
+              {t.secondaryCtaLabel}
+            </Link>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-3">
+          {t.steps.map((s) => (
+            <div
+              key={s.step}
+              className="rounded-2xl p-4 sm:p-5 bg-background/5 border border-background/10"
+            >
+              <p className="text-[10px] font-mono text-primary tabular-nums mb-3">{s.step}</p>
+              <p className="text-[13px] sm:text-sm font-semibold mb-1.5 -tracking-[0.015em]">
+                {s.title}
+              </p>
+              <p className="text-[11px] sm:text-xs text-background/65 leading-snug">{s.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-pharmacy/components/trust-bar.tsx

@@ -0,0 +1,66 @@
+import { brand } from "@/lib/brand";
+
+const ICONS: Record<string, React.ReactNode> = {
+  delivery: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M3 7h12v8H3zM15 10h4l3 3v2h-7z" strokeLinejoin="round" />
+      <circle cx="7" cy="17" r="1.5" />
+      <circle cx="18" cy="17" r="1.5" />
+    </svg>
+  ),
+  warranty: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" strokeLinejoin="round" />
+      <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  payment: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <rect x="3" y="6" width="18" height="12" rx="2" />
+      <line x1="3" y1="10" x2="21" y2="10" />
+    </svg>
+  ),
+  verified: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M8 12l3 3 5-6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  support: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M18 18a8 8 0 1 0-12 0" />
+      <path d="M3 18h4v3H3zM17 18h4v3h-4z" strokeLinejoin="round" />
+    </svg>
+  ),
+};
+
+const FALLBACK_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+);
+
+export function TrustBar() {
+  const items = brand.trustItems;
+  if (!items || items.length === 0) return null;
+  return (
+    <section className="border-y border-border bg-card">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-8">
+        {items.map((it) => (
+          <div key={it.label} className="flex items-start gap-3">
+            <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary shrink-0">
+              {ICONS[it.iconKey] ?? FALLBACK_ICON}
+            </div>
+            <div className="min-w-0">
+              <p className="text-[10px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-0.5">
+                {it.label}
+              </p>
+              <p className="text-base font-semibold -tracking-[0.015em] mb-0.5">{it.value}</p>
+              <p className="text-xs text-muted-foreground leading-snug">{it.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-pharmacy/components/urgent-ctas.tsx

@@ -0,0 +1,117 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Two-column urgent-action panel for the pharmacy home page. Left card is
+ * prescription upload; right card is pharmacist consult. Sits directly
+ * under the hero — the two things a pharmacy visitor is most likely to
+ * want, surfaced before any browsing.
+ */
+export function UrgentCtas() {
+  const { prescription, consult } = brand.urgentCtas;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 -mt-10 sm:-mt-14 relative z-10">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Link
+          href={prescription.ctaHref}
+          className="group block bg-card border border-border rounded-2xl p-7 sm:p-8 shadow-[0_8px_30px_rgb(0_0_0/0.06)] hover:shadow-[0_20px_50px_rgb(0_0_0/0.10)] hover:border-primary/40 transition-all"
+        >
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <span className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-accent text-accent-foreground text-[11px] font-mono uppercase tracking-[0.14em]">
+              {prescription.eyebrow}
+            </span>
+            <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-muted text-muted-foreground text-[10px] font-mono uppercase tracking-[0.14em]">
+              <LockIcon /> {prescription.badge}
+            </span>
+          </div>
+          <UploadIllustration />
+          <h3 className="text-[22px] sm:text-2xl font-semibold mt-5 -tracking-[0.02em] leading-snug">
+            {prescription.title}
+          </h3>
+          <p className="text-sm sm:text-[15px] text-muted-foreground leading-relaxed mt-2">
+            {prescription.body}
+          </p>
+          <span className="inline-flex items-center gap-2 mt-5 text-sm font-semibold text-primary group-hover:gap-3 transition-all">
+            {prescription.ctaLabel}
+            <ArrowIcon />
+          </span>
+        </Link>
+
+        <Link
+          href={consult.ctaHref}
+          className="group block bg-foreground text-background rounded-2xl p-7 sm:p-8 shadow-[0_8px_30px_rgb(0_0_0/0.10)] hover:shadow-[0_20px_50px_rgb(0_0_0/0.18)] transition-all"
+        >
+          <div className="flex items-start justify-between gap-3 mb-4">
+            <span className="inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-background/10 text-background text-[11px] font-mono uppercase tracking-[0.14em]">
+              {consult.eyebrow}
+            </span>
+            <span className="inline-flex items-center gap-2 px-2 py-0.5 rounded-full bg-background/10 text-background/85 text-[10px] font-mono uppercase tracking-[0.14em]">
+              <span className="grid place-items-center w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+              {consult.hoursLabel}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3 mt-2">
+            <div className="grid place-items-center w-11 h-11 rounded-full bg-background/15 text-background text-base font-semibold">
+              {consult.pharmacistName
+                .split(" ")
+                .map((s) => s[0])
+                .join("")
+                .slice(0, 2)
+                .toUpperCase()}
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-background">{consult.pharmacistName}</p>
+              <p className="text-[12px] font-mono uppercase tracking-[0.14em] text-background/60">
+                {consult.hoursValue}
+              </p>
+            </div>
+          </div>
+
+          <h3 className="text-[22px] sm:text-2xl font-semibold mt-5 -tracking-[0.02em] leading-snug">
+            {consult.title}
+          </h3>
+          <p className="text-sm sm:text-[15px] text-background/75 leading-relaxed mt-2">
+            {consult.body}
+          </p>
+          <span className="inline-flex items-center gap-2 mt-5 text-sm font-semibold text-background group-hover:gap-3 transition-all">
+            {consult.ctaLabel}
+            <ArrowIcon />
+          </span>
+        </Link>
+      </div>
+    </section>
+  );
+}
+
+function UploadIllustration() {
+  return (
+    <div className="relative h-24 sm:h-28 rounded-xl border border-dashed border-primary/40 bg-primary/[0.04] grid place-items-center overflow-hidden">
+      <div className="flex flex-col items-center gap-1.5 text-primary/80">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-7 h-7" aria-hidden>
+          <path d="M12 3v12" strokeLinecap="round" />
+          <path d="M7 8l5-5 5 5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M5 17v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        <span className="text-[11px] font-mono uppercase tracking-[0.16em]">Drag · JPG · PDF</span>
+      </div>
+    </div>
+  );
+}
+
+function LockIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3 h-3" aria-hidden>
+      <rect x="5" y="11" width="14" height="9" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+    </svg>
+  );
+}
+
+function ArrowIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-3.5 h-3.5" aria-hidden>
+      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}