@cimplify/sdk 0.41.0 → 0.42.0

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

@@ -0,0 +1,155 @@
+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/track-order/page.tsx

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,69 @@
+"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

@@ -0,0 +1,13 @@
+"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/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{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/lib/brand.ts

@@ -62,6 +62,20 @@ export interface Brand {
   };
   terms: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
   privacy: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  shipping: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  returns: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  accessibility: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  account: {
+    loginEyebrow: string; loginTitle: string; loginSubtitle: string;
+    signupEyebrow: string; signupTitle: string; signupSubtitle: string;
+    accountEyebrow: string; accountTitle: string;
+  };
+  contactPage: {
+    eyebrow: string; title: string; body: string;
+    reasons: string[];
+    directLines: { label: string; value: string; href: string }[];
+  };
+  trackOrder: { eyebrow: string; title: string; body: string };
   footer: {
     blurb: string; sitemap: BrandSitemapSection[];
     poweredBy?: { label: string; href: string };
@@ -365,6 +379,74 @@ export const brand: Brand = {
     ],
   },
 
+  shipping: {
+    eyebrow: "Shipping",
+    title: "Shipping",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Worldwide via DHL Express", body: "2–4 business days from order. Free over $80 (or local equivalent)." },
+      { heading: "Customs & duties", body: "Charged on delivery in some countries — DHL contacts you. Prepay for orders over $300; email help@studiofrx.test before placing the order." },
+      { heading: "Studio pickup", body: "Free, ready in 30 minutes. Tue–Sat 11am–8pm at Osu Oxford Street, Accra." },
+      { heading: "Tracking", body: "DHL tracking link sent by email and SMS within an hour of dispatch." },
+    ],
+  },
+
+  returns: {
+    eyebrow: "Returns",
+    title: "Returns & Exchanges",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "30 days, on us (US/UK/EU)", body: "Free return labels prepaid by us. Item must be unworn with original tags." },
+      { heading: "Worldwide", body: "Return shipping is on you, but we'll refund or exchange immediately on receipt." },
+      { heading: "Final sale", body: "Underwear, swim, custom pieces, and anything marked final-sale on the product page is non-returnable." },
+      { heading: "How to start", body: "Email help@studiofrx.test with your order number. We'll send a label or instructions within 24 hours." },
+    ],
+  },
+
+  accessibility: {
+    eyebrow: "Accessibility",
+    title: "Accessibility Statement",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Our commitment", body: "We aim for WCAG 2.1 AA on this site, tested on each release." },
+      { heading: "What we've done", body: { intro: "Specifically, we've:", bullets: [
+        "Maintained a minimum 4.5:1 contrast on body text.",
+        "Ensured every interactive element is keyboard-reachable.",
+        "Provided alt text on every image, including lookbook editorials.",
+        "Respected `prefers-reduced-motion` for the homepage editorial transitions.",
+      ] } },
+      { heading: "Reporting issues", body: "Email accessibility@studiofrx.test. We respond within 5 business days." },
+    ],
+  },
+
+  account: {
+    loginEyebrow: "Welcome back",
+    loginTitle: "Sign in to FRX",
+    loginSubtitle: "Track orders, manage your collective access, and view past drops.",
+    signupEyebrow: "Welcome",
+    signupTitle: "Create your account",
+    signupSubtitle: "First-look at the next drop, faster checkout, and your size remembered.",
+    accountEyebrow: "Your account",
+    accountTitle: "Welcome back",
+  },
+
+  contactPage: {
+    eyebrow: "Contact",
+    title: "Talk to the studio.",
+    body: "Order question, sizing help, collab pitch — message us and we'll reply within a business day.",
+    reasons: ["General question", "An order issue", "Sizing help", "Returns / exchanges", "Press / collabs", "Wholesale"],
+    directLines: [
+      { label: "Email", value: "help@studiofrx.test", href: "mailto:help@studiofrx.test" },
+      { label: "Phone", value: "+233 244 000 000", href: "tel:+233244000000" },
+    ],
+  },
+
+  trackOrder: {
+    eyebrow: "Track an order",
+    title: "Where's my drop?",
+    body: "Enter your order number and the email used at checkout. We'll show DHL's latest scan and the live ETA.",
+  },
+
   footer: {
     blurb:
       "Limited-run streetwear from Accra. Heavyweight cotton, hand-screened, numbered. Each drop is a closed run.",
@@ -392,10 +474,21 @@ export const brand: Brand = {
       {
         title: "Help",
         links: [
-          { label: "Contact", href: "mailto:help@studiofrx.test" },
-          { label: "Sizing", href: "/faq" },
-          { label: "Shipping", href: "/faq" },
-          { label: "Returns", href: "/faq" },
+          { label: "Contact", href: "/contact" },
+          { label: "Track an order", href: "/track-order" },
+          { label: "Size guide", href: "/size-guide" },
+          { label: "Shipping", href: "/shipping" },
+          { label: "Returns", href: "/returns" },
+          { label: "FAQ", href: "/faq" },
+        ],
+      },
+      {
+        title: "Account",
+        links: [
+          { label: "Sign in", href: "/login" },
+          { label: "Create account", href: "/signup" },
+          { label: "Your orders", href: "/account/orders" },
+          { label: "Settings", href: "/account/settings" },
         ],
       },
       {
@@ -403,6 +496,8 @@ export const brand: Brand = {
         links: [
           { label: "Terms of Service", href: "/terms" },
           { label: "Privacy Policy", href: "/privacy" },
+          { label: "Accessibility", href: "/accessibility" },
+          { label: "Sitemap", href: "/sitemap-page" },
         ],
       },
     ],

package/templates/storefront-grocery/app/accessibility/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-grocery/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+export default function AccountPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {brand.account.accountEyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        {brand.account.accountTitle}
+      </h1>
+      <AccountIframe />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-grocery/app/contact/contact-form.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Local-only contact form. On submit, fakes a successful response so the
+ * template ships a usable interaction. Wire to a real handler (Server
+ * Action posting to your CRM, support inbox, or Cimplify Support API)
+ * before going to production.
+ */
+export function ContactForm({ reasons }: { reasons: string[] }) {
+  const [submitted, setSubmitted] = useState(false);
+  const [reason, setReason] = useState(reasons[0] ?? "");
+
+  if (submitted) {
+    return (
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+          ✓ Sent
+        </p>
+        <h2 className="font-serif text-2xl font-semibold mb-2">Thanks — we'll be in touch.</h2>
+        <p className="text-muted-foreground">
+          We respond within one business day. Check your spam folder if you don't see a
+          reply by tomorrow.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        setSubmitted(true);
+      }}
+      className="space-y-5"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Field label="Your name" name="name" required />
+        <Field label="Email" name="email" type="email" required />
+      </div>
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          What's it about?
+        </label>
+        <select
+          name="reason"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        >
+          {reasons.map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </div>
+      <Field label="Order number (optional)" name="order" />
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          Message
+        </label>
+        <textarea
+          name="message"
+          required
+          rows={6}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm resize-y"
+        />
+      </div>
+      <button
+        type="submit"
+        className="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"
+      >
+        Send message
+      </button>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  required,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  required?: boolean;
+}) {
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+      >
+        {label}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        required={required}
+        className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+      />
+    </div>
+  );
+}