create-brainerce-store 1.58.0 → 1.61.0

package/templates/nextjs/base/src/components/checkout/date-picker.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { isCalendarDateAllowed, type DateAvailabilityConstraints } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+/**
+ * Custom calendar dropdown for checkout DATE custom fields — replaces the
+ * native `<input type="date">`, whose OS/browser-rendered popup can't be
+ * restyled with CSS in any browser (only the closed field can be).
+ *
+ * Lives next to `custom-fields-step.tsx` (not under `src/ui/`) and stays
+ * dependency-free from any design pack for the same reason that file does:
+ * canvas scaffolds wipe `src/ui` and ship no pack, but never touch
+ * `src/components/`, so this must work without either.
+ *
+ * Day availability is delegated wholesale to the SDK's `isCalendarDateAllowed`
+ * — min/max date, blocked weekdays AND blocked specific dates in one call, the
+ * exact predicate the server re-runs on submit. Reimplementing any part of it
+ * here is how a picker ends up offering a day the API then rejects with 400.
+ */
+interface DatePickerProps {
+  id?: string;
+  value: string; // 'YYYY-MM-DD' or ''
+  onChange: (value: string) => void;
+  required?: boolean;
+  /** The field's `dateAvailability`, passed straight through from the API. */
+  availability?: DateAvailabilityConstraints | null;
+  /**
+   * Extra per-day gate ANDed with `isCalendarDateAllowed`. DATETIME fields use
+   * it to grey out days that pass the calendar rules but have no business-hours
+   * window — those are closed all day, and offering them is what produces a
+   * "no business hours are configured for this day" 400 after the shopper has
+   * already committed to a date.
+   */
+  isDateSelectable?: (dateYYYYMMDD: string) => boolean;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  className?: string;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function toYMD(y: number, m: number, d: number): string {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+
+function parseYMD(value: string): { y: number; m: number; d: number } | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  return { y: Number(match[1]), m: Number(match[2]) - 1, d: Number(match[3]) };
+}
+
+export function DatePicker({
+  id,
+  value,
+  onChange,
+  required,
+  availability,
+  isDateSelectable,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [locale, setLocale] = useState<string | undefined>(undefined);
+  const [rtl, setRtl] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setLocale(document.documentElement.lang || undefined);
+    setRtl(document.documentElement.dir === 'rtl');
+  }, []);
+
+  const selected = parseYMD(value);
+  const today = new Date();
+  const [view, setView] = useState(() => {
+    const initial = selected ?? { y: today.getFullYear(), m: today.getMonth() };
+    return { y: initial.y, m: initial.m };
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  function isDisabled(y: number, m: number, d: number): boolean {
+    const ymd = toYMD(y, m, d);
+    if (!isCalendarDateAllowed(ymd, availability)) return true;
+    return isDateSelectable ? !isDateSelectable(ymd) : false;
+  }
+
+  function selectDay(y: number, m: number, d: number) {
+    if (isDisabled(y, m, d)) return;
+    onChange(toYMD(y, m, d));
+    setView({ y, m });
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function shiftMonth(delta: number) {
+    setView((v) => {
+      let m = v.m + delta;
+      let y = v.y;
+      if (m < 0) {
+        m = 11;
+        y -= 1;
+      } else if (m > 11) {
+        m = 0;
+        y += 1;
+      }
+      return { y, m };
+    });
+  }
+
+  const monthLabel = new Date(view.y, view.m, 1).toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric',
+  });
+  const weekdayLabels = Array.from({ length: 7 }, (_, i) => {
+    // A Sunday-anchored week (2023-01-01 was a Sunday) formatted with the
+    // page's own locale — matches whatever week-start convention that
+    // locale's date formatting implies.
+    const d = new Date(2023, 0, 1 + i);
+    return d.toLocaleDateString(locale, { weekday: 'narrow' });
+  });
+
+  const firstOfMonth = new Date(view.y, view.m, 1);
+  const startWeekday = firstOfMonth.getDay();
+  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+  const daysInPrevMonth = new Date(view.y, view.m, 0).getDate();
+
+  const cells: Array<{ day: number; muted: boolean; y: number; m: number }> = [];
+  for (let i = startWeekday - 1; i >= 0; i--) {
+    const m = view.m === 0 ? 11 : view.m - 1;
+    const y = view.m === 0 ? view.y - 1 : view.y;
+    cells.push({ day: daysInPrevMonth - i, muted: true, y, m });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, muted: false, y: view.y, m: view.m });
+  }
+  while (cells.length % 7 !== 0) {
+    const idx = cells.length - startWeekday - daysInMonth + 1;
+    const m = view.m === 11 ? 0 : view.m + 1;
+    const y = view.m === 11 ? view.y + 1 : view.y;
+    cells.push({ day: idx, muted: true, y, m });
+  }
+
+  const displayValue = selected
+    ? new Date(selected.y, selected.m, selected.d).toLocaleDateString(locale)
+    : '';
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-required={required}
+        className={cn(
+          'bg-background focus-visible:ring-primary flex h-11 w-full items-center rounded-lg border px-3.5 pe-11 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
+          displayValue ? 'text-foreground' : 'text-muted-foreground'
+        )}
+      >
+        {displayValue || placeholder}
+        <svg
+          aria-hidden="true"
+          width={18}
+          height={18}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={1.75}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 -translate-y-1/2"
+        >
+          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
+          <path d="M3.5 9.5h17M8 3v3.5M16 3v3.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-label={placeholder}
+          className="border-border bg-background absolute start-0 z-20 mt-2 w-[19rem] rounded-2xl border p-4 shadow-xl"
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <div className="flex gap-1">
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? 1 : -1)}
+                aria-label={prevMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '›' : '‹'}
+              </button>
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? -1 : 1)}
+                aria-label={nextMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '‹' : '›'}
+              </button>
+            </div>
+            <div className="font-display text-sm font-medium capitalize">{monthLabel}</div>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7">
+            {weekdayLabels.map((w, i) => (
+              <span
+                key={i}
+                className="text-muted-foreground py-1 text-center text-[0.7rem] font-semibold"
+              >
+                {w}
+              </span>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-0.5">
+            {cells.map((c, i) => {
+              const disabled = c.muted || isDisabled(c.y, c.m, c.day);
+              const isToday =
+                !c.muted &&
+                c.y === today.getFullYear() &&
+                c.m === today.getMonth() &&
+                c.day === today.getDate();
+              const isSelected =
+                selected &&
+                !c.muted &&
+                c.y === selected.y &&
+                c.m === selected.m &&
+                c.day === selected.d;
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => selectDay(c.y, c.m, c.day)}
+                  className={cn(
+                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
+                    c.muted && 'text-muted-foreground/40',
+                    disabled && !c.muted && 'text-muted-foreground/40 cursor-not-allowed',
+                    !disabled && !isSelected && 'hover:bg-secondary',
+                    isToday && !isSelected && 'ring-primary font-semibold ring-1',
+                    isSelected && 'bg-primary text-primary-foreground font-bold'
+                  )}
+                >
+                  {c.day}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="border-border mt-3 flex justify-between border-t pt-3">
+            <button
+              type="button"
+              onClick={() => {
+                const t = new Date();
+                selectDay(t.getFullYear(), t.getMonth(), t.getDate());
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {todayLabel}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                onChange('');
+                setOpen(false);
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {clearLabel}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/datetime-picker.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  computeAvailableSlots,
+  getBusinessHoursForDate,
+  type DateAvailabilityConstraints,
+} from 'brainerce';
+import { cn } from '@/core/lib/utils';
+import { DatePicker } from '@/components/checkout/date-picker';
+
+/**
+ * Date + time control for checkout `DATETIME` custom fields.
+ *
+ * **The value it emits is `"YYYY-MM-DDTHH:mm"` with no UTC offset**, which the
+ * API resolves in the *store's* timezone — the only frame a delivery slot has.
+ * Do not append an offset from the shopper's browser (a buyer travelling
+ * abroad would book a different hour than the one they tapped), and never
+ * concatenate a human slot label: `"2026-08-13" + "T13:00-14:00"` parses as a
+ * -14:00 UTC offset and silently books the following day.
+ *
+ * Which times exist comes from the SDK, not from a list hardcoded here:
+ * - `computeAvailableSlots` → discrete slot starts, when the field defines
+ *   `slotDurationMinutes`. The submitted time must equal one of them exactly.
+ * - `getBusinessHoursForDate` → the open/close window, when it doesn't. Slots
+ *   being empty does NOT mean the day is closed; that distinction is why this
+ *   component asks for the windows separately.
+ *
+ * Dependency-free from any design pack, same as `date-picker.tsx`.
+ */
+interface DateTimePickerProps {
+  id?: string;
+  /** 'YYYY-MM-DDTHH:mm' or ''. */
+  value: string;
+  onChange: (value: string) => void;
+  required?: boolean;
+  availability?: DateAvailabilityConstraints | null;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  timeLabel: string;
+  closedLabel: string;
+  className?: string;
+}
+
+function splitValue(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time: time.slice(0, 5) };
+}
+
+export function DateTimePicker({
+  id,
+  value,
+  onChange,
+  required,
+  availability,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  timeLabel,
+  closedLabel,
+  className,
+}: DateTimePickerProps) {
+  const submitted = splitValue(value);
+  // The date survives on its own while no time is picked yet. The field value
+  // stays empty until both halves exist, so a `required` field can't be
+  // satisfied by a half-filled answer.
+  const [date, setDate] = useState(submitted.date);
+
+  const slots = date ? computeAvailableSlots(availability, date) : [];
+  const windows = date ? getBusinessHoursForDate(availability, date) : [];
+  const openDay = (dateYYYYMMDD: string) =>
+    !availability?.businessHours?.length ||
+    getBusinessHoursForDate(availability, dateYYYYMMDD).length > 0;
+
+  const commit = (nextDate: string, nextTime: string) => {
+    setDate(nextDate);
+    onChange(nextDate && nextTime ? `${nextDate}T${nextTime}` : '');
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <DatePicker
+        id={id}
+        value={date}
+        onChange={(d) => commit(d, '')}
+        required={required}
+        availability={availability}
+        isDateSelectable={openDay}
+        placeholder={placeholder}
+        todayLabel={todayLabel}
+        clearLabel={clearLabel}
+        prevMonthLabel={prevMonthLabel}
+        nextMonthLabel={nextMonthLabel}
+      />
+
+      {date && slots.length > 0 && (
+        <div className="flex flex-wrap gap-1.5" role="group" aria-label={timeLabel}>
+          {slots.map((slot) => (
+            <button
+              key={slot}
+              type="button"
+              onClick={() => commit(date, slot)}
+              aria-pressed={submitted.time === slot}
+              className={cn(
+                'h-9 rounded-lg border px-3 text-sm tabular-nums transition-colors',
+                submitted.time === slot
+                  ? 'bg-primary text-primary-foreground border-primary font-semibold'
+                  : 'border-border hover:bg-secondary'
+              )}
+            >
+              {slot}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {date && slots.length === 0 && windows.length > 0 && (
+        <label className="flex items-center gap-2 text-sm">
+          <span className="text-muted-foreground">{timeLabel}</span>
+          <input
+            type="time"
+            value={submitted.time}
+            required={required}
+            // The window is a half-open interval [open, close) server-side, so
+            // `max` here is the last minute the API will still accept.
+            min={windows[0].open}
+            max={windows[0].close}
+            onChange={(e) => commit(date, e.target.value)}
+            className="bg-background focus-visible:ring-primary h-11 rounded-lg border px-3 text-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+        </label>
+      )}
+
+      {date && slots.length === 0 && windows.length === 0 && (
+        <p className="text-muted-foreground text-xs">{closedLabel}</p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/shipping-step.tsx

@@ -14,6 +14,21 @@ interface ShippingStepProps {
   className?: string;
 }
 
+/**
+ * Live carrier rates arrive labelled with the carrier's own service identifier
+ * — `USPS PriorityMailInternational`, `USAExportPBA USAExportStandard` — which
+ * answers a question no shopper asked. They are choosing between how fast and
+ * how much, so we render `speedTier` in the store's own language instead.
+ *
+ * Manual zone rates carry no `speedTier`: the merchant named those deliberately,
+ * so those keep `rate.name` exactly as written.
+ */
+const TIER_KEYS = {
+  cheapest: 'shippingTierCheapest',
+  balanced: 'shippingTierBalanced',
+  fastest: 'shippingTierFastest',
+} as const;
+
 export function ShippingStep({
   rates,
   selectedRateId,
@@ -53,6 +68,7 @@ export function ShippingStep({
         const price = parseFloat(rate.price);
         const isFree = price === 0;
         const isSelected = selectedRateId === rate.id;
+        const label = rate.speedTier ? t(TIER_KEYS[rate.speedTier]) : rate.name;
 
         return (
           <button
@@ -80,7 +96,7 @@ export function ShippingStep({
 
             {/* Rate info */}
             <div className="min-w-0 flex-1">
-              <p className="text-foreground text-sm font-medium">{rate.name}</p>
+              <p className="text-foreground text-sm font-medium">{label}</p>
               {rate.description && (
                 <p className="text-muted-foreground mt-0.5 text-xs">{rate.description}</p>
               )}

package/templates/nextjs/designs/atelier/messages-patch/en.json

@@ -30,15 +30,15 @@
     "catEarrings": "Earrings",
     "catBracelets": "Bracelets",
     "catCta": "Shop the category",
-    "storyEyebrow": "Our studio",
+    "storyEyebrow": "Our story",
     "storyTitle": "Made with care, made to last",
-    "storyP1": "Every piece begins as a small sketch on paper — and ends as delicate handwork in our studio. We choose every material and every detail with care, so the piece that reaches you is exactly as we imagined it.",
-    "storyP2": "We believe in pieces that last: real materials, meticulous finish and full warranty on every piece. That is what love for the small details looks like.",
+    "storyP1": "Every product we carry is chosen with the same question in mind: would we want this ourselves? We check quality, sourcing and detail before anything reaches our shelves, so what arrives at your door is exactly what you expect.",
+    "storyP2": "We believe in products that last: solid materials, careful quality checks and full support behind every order. That is what care for the details looks like.",
     "storyCta": "Discover the collection",
-    "storyStat1Value": "Handmade",
-    "storyStat1Label": "Every piece is made in our studio",
-    "storyStat2Value": "Hand-finished",
-    "storyStat2Label": "Every piece checked before it ships",
+    "storyStat1Value": "Quality-checked",
+    "storyStat1Label": "Every product is checked before it's listed",
+    "storyStat2Value": "Fully guaranteed",
+    "storyStat2Label": "Every order backed by our support",
     "testimonialsEyebrow": "Customer stories",
     "testimonialsTitle": "They already fell in love",
     "testimonial1Quote": "It arrived in gorgeous packaging and looks even better than the photos. I got compliments on day one.",

package/templates/nextjs/designs/atelier/messages-patch/he.json

@@ -30,15 +30,15 @@
     "catEarrings": "עגילים",
     "catBracelets": "צמידים",
     "catCta": "לצפייה בקטגוריה",
-    "storyEyebrow": "הסטודיו שלנו",
-    "storyTitle": "נוצר ביד, נאהב בלב",
-    "storyP1": "כל פריט אצלנו מתחיל בסקיצה קטנה על נייר — ונגמר בעבודת יד עדינה בסטודיו. אנחנו בוחרים כל חומר וכל פרט בקפידה, כדי שהפריט שיגיע אליכן יהיה בדיוק כמו שדמיינו אותו.",
-    "storyP2": "אנחנו מאמינים בפריטים שנשארים: חומרים אמיתיים, גימור מוקפד ואחריות מלאה על כל פריט. ככה נראית אהבה לפרטים הקטנים.",
+    "storyEyebrow": "הסיפור שלנו",
+    "storyTitle": "מוקפד בכל פרט, מהתחלה ועד אליכם",
+    "storyP1": "כל מוצר אצלנו עובר את אותה שאלה: האם היינו רוצים אותו בעצמנו? אנחנו בודקים איכות, מקור וכל פרט לפני שמשהו עולה למדף שלנו, כדי שמה שמגיע אליכם יהיה בדיוק מה שציפיתם לו.",
+    "storyP2": "אנחנו מאמינים במוצרים שנשארים: חומרים איכותיים, בקרת איכות קפדנית ותמיכה מלאה מאחורי כל הזמנה. ככה נראית תשומת לב לפרטים הקטנים.",
     "storyCta": "לגלות את הקולקציה",
-    "storyStat1Value": "עבודת יד",
-    "storyStat1Label": "כל פריט נוצר בסטודיו שלנו",
-    "storyStat2Value": "גימור מוקפד",
-    "storyStat2Label": "כל פריט נבדק לפני המשלוח",
+    "storyStat1Value": "איכות נבדקת",
+    "storyStat1Label": "כל מוצר נבדק לפני שהוא עולה לאתר",
+    "storyStat2Value": "אחריות מלאה",
+    "storyStat2Label": "כל הזמנה מגובה בתמיכה שלנו",
     "testimonialsEyebrow": "לקוחות מספרות",
     "testimonialsTitle": "הן כבר התאהבו",
     "testimonial1Quote": "הפריט הגיע באריזה מהממת ונראה אפילו יותר טוב מבתמונות. קיבלתי מחמאות כבר ביום הראשון.",

package/templates/nextjs/designs/atelier/ui/home/editorial-band.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 /**
- * Editorial "our studio" band — lifestyle photography (Pexels hotlinks,
+ * Editorial "our story" band — lifestyle photography (Pexels hotlinks,
  * HEAD-verified) + brand-story copy from translation keys. Purely template
- * marketing content; no catalog data is hardcoded here.
+ * marketing content; no catalog data is hardcoded here. Deliberately
+ * vertical-neutral (order fulfillment / packaging imagery, not a specific
+ * product category) since this pack scaffolds stores of any kind.
  */
 import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
@@ -11,9 +13,9 @@ import { IconArrowEnd } from '@/ui/shared/icons';
 
 // Verified free-stock imagery (images.pexels.com allows hotlinking).
 const IMG_MODEL =
-  'https://images.pexels.com/photos/1454171/pexels-photo-1454171.jpeg?auto=compress&cs=tinysrgb&w=1200';
+  'https://images.pexels.com/photos/7857523/pexels-photo-7857523.jpeg?auto=compress&cs=tinysrgb&w=1200';
 const IMG_DETAIL =
-  'https://images.pexels.com/photos/1191531/pexels-photo-1191531.jpeg?auto=compress&cs=tinysrgb&w=800';
+  'https://images.pexels.com/photos/6224252/pexels-photo-6224252.jpeg?auto=compress&cs=tinysrgb&w=800';
 
 export function EditorialBand() {
   const t = useTranslations('home');
@@ -23,8 +25,8 @@ export function EditorialBand() {
       <div className="container-page grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
         {/* Image pair */}
         <div className="grid grid-cols-12 gap-4">
-          <figure className="col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 border-background shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
-            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+          <figure className="border-background col-span-8 -rotate-2 overflow-hidden rounded-3xl border-4 shadow-[0_28px_60px_-24px_hsl(var(--primary)/0.35)]">
+            {}
             <img
               src={IMG_MODEL}
               alt={t('storyTitle')}
@@ -32,8 +34,8 @@ export function EditorialBand() {
               className="aspect-[4/5] h-full w-full object-cover"
             />
           </figure>
-          <figure className="col-span-4 -mb-8 self-end rotate-3 overflow-hidden rounded-3xl border-4 border-background shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
-            {/* eslint-disable-next-line @next/next/no-img-element -- editorial stock hotlink, host not in next remotePatterns */}
+          <figure className="border-background col-span-4 -mb-8 rotate-3 self-end overflow-hidden rounded-3xl border-4 shadow-[0_24px_50px_-20px_hsl(var(--primary)/0.35)]">
+            {}
             <img
               src={IMG_DETAIL}
               alt={t('storyStat1Value')}
@@ -47,18 +49,18 @@ export function EditorialBand() {
         <div className="max-w-xl">
           <span className="eyebrow">{t('storyEyebrow')}</span>
           <h2 className="text-4xl sm:text-5xl">{t('storyTitle')}</h2>
-          <p className="mt-5 leading-8 text-muted-foreground">{t('storyP1')}</p>
-          <p className="mt-4 leading-8 text-muted-foreground">{t('storyP2')}</p>
+          <p className="text-muted-foreground mt-5 leading-8">{t('storyP1')}</p>
+          <p className="text-muted-foreground mt-4 leading-8">{t('storyP2')}</p>
 
           {/* Craft highlights */}
           <dl className="mt-8 grid grid-cols-2 gap-6 border-t pt-8">
             <div>
-              <dt className="font-display text-2xl text-foreground">{t('storyStat1Value')}</dt>
-              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat1Label')}</dd>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat1Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat1Label')}</dd>
             </div>
             <div>
-              <dt className="font-display text-2xl text-foreground">{t('storyStat2Value')}</dt>
-              <dd className="mt-1 text-sm text-muted-foreground">{t('storyStat2Label')}</dd>
+              <dt className="font-display text-foreground text-2xl">{t('storyStat2Value')}</dt>
+              <dd className="text-muted-foreground mt-1 text-sm">{t('storyStat2Label')}</dd>
             </div>
           </dl>