Nora
c71354d2ae
Deploy to route.crispygoat.com / deploy (push) Successful in 4m25s
Reskin /tuxedo/contact, /tuxedo/faq, /tuxedo/stops, and /tuxedo/stops/[id] so they match the homepage's editorial magazine language (Fraunces display serif, stone-50/stone-950 alternation, amber rims, hairline rules, tabular numerals). - About page rewritten as inlined editorial sections sharing one WP_IMAGES library with the homepage; the four lazy-loaded Tuxedo about components are removed (Indian River has its own variants). - Contact page now uses a dark hero with heroField half-bleed, a hairline-ruled info strip (address/phone/email), a two-column form section with bottom-border editorial inputs, and a closing Fraunces italic quote. /tuxedo/contact was 404ing in prod because page.tsx was missing — created and removed the duplicated render from layout.tsx. - FAQ page uses a cream hero with Fraunces headline, an editorial bottom-border search, hairline-ruled accordion rows (no card wrappers), and a dark closing CTA with Contact pill. - Stops list uses a dark hero with heroField bleed and a cream hairline-ruled sidebar list: tabular date numerals on the left, city/location middle, mono time + cutoff right, chevron for upcoming rows. - Stop detail uses a dark hero pairing the city/state headline with a giant tabular day stamp, a cream hairline-ruled 4-col info strip (Date/Time/Location/Order by), and the editorial products header. Removed the dual-brand isBlue branching now that Indian River has its own page. - Extracted TUXEDO_IMAGES to src/components/storefront/tuxedo-images.ts so the homepage, about, contact, and stops list share one brand-specific asset library. - /tuxedo/faq/layout.tsx no longer double-renders the page component (was rendering <FAQClientPage /> alongside children). Verified: tsc --noEmit clean, eslint clean (only pre-existing homepage warnings), npm run build produces all Tuxedo routes including the now-existing /tuxedo/contact.
363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { gsap } from "gsap";
|
|
import LayoutContainer from "@/components/layout/LayoutContainer";
|
|
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
|
|
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
|
|
import { TUXEDO_IMAGES } from "@/components/storefront/tuxedo-images";
|
|
import type { PublicStop } from "@/actions/stops";
|
|
|
|
type Props = {
|
|
stops: PublicStop[];
|
|
brandName: string;
|
|
brandSlug: string;
|
|
};
|
|
|
|
export default function TuxedoStopsList({ stops, brandName, brandSlug }: Props) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [now] = useState(() => new Date());
|
|
|
|
// Subtle scroll-in stagger for the stops list. The Motion policy in
|
|
// ScrollAnimations.tsx caps translation to 16px / 320ms, which matches
|
|
// what we want here — the list reveals as a quiet beat, not a show.
|
|
useEffect(() => {
|
|
if (!containerRef.current) return;
|
|
const ctx = gsap.context(() => {
|
|
gsap.from(".stop-row", {
|
|
y: 16,
|
|
opacity: 0,
|
|
duration: 0.32,
|
|
stagger: 0.04,
|
|
ease: "power1.out",
|
|
scrollTrigger: {
|
|
trigger: containerRef.current,
|
|
start: "top 90%",
|
|
toggleActions: "play none none none",
|
|
},
|
|
});
|
|
}, containerRef);
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
const upcomingStops = stops.filter((s) => new Date(s.date) >= now);
|
|
const pastStops = stops.filter((s) => new Date(s.date) < now);
|
|
|
|
return (
|
|
<div ref={containerRef} className="min-h-screen bg-stone-50">
|
|
<StorefrontHeader brandName={brandName} brandSlug={brandSlug} brandAccent="green" />
|
|
|
|
<main>
|
|
{/* Hero — dark editorial opener with the field photograph as a
|
|
soft half-bleed at the bottom, same register as the
|
|
Contact page hero. */}
|
|
<section className="relative bg-stone-950 overflow-hidden isolate">
|
|
{/* Soft field image, bottom-anchored, partially visible
|
|
behind the headline column. */}
|
|
<div className="absolute inset-x-0 bottom-0 h-2/3 -z-10">
|
|
<Image
|
|
src={TUXEDO_IMAGES.heroField}
|
|
alt=""
|
|
fill
|
|
sizes="100vw"
|
|
quality={85}
|
|
priority
|
|
className="object-cover object-center filter-editorial opacity-40"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/70 to-stone-950" />
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
className="absolute inset-x-0 bottom-0 h-px bg-amber-300/30 z-10"
|
|
/>
|
|
|
|
<LayoutContainer>
|
|
<div className="relative py-20 sm:py-28 lg:py-32 max-w-3xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-300/85 mb-6">
|
|
{brandName} · Summer 2026
|
|
</p>
|
|
<h1
|
|
className="font-display text-stone-50 text-[clamp(2.5rem,5.4vw,4.5rem)] leading-[1.02] tracking-[-0.02em]"
|
|
style={{ textWrap: "balance" }}
|
|
>
|
|
Stops
|
|
<br className="hidden sm:block" />{" "}
|
|
<span className="italic text-amber-200/90">near you.</span>
|
|
</h1>
|
|
<div className="mt-8 h-px w-16 bg-gradient-to-r from-emerald-500 via-amber-400 to-amber-300/0" />
|
|
<p className="mt-8 text-stone-300 text-lg sm:text-xl leading-[1.65]">
|
|
Fresh Olathe Sweet™ sweet corn delivered to a stop
|
|
near you. Preorder for pickup, or just show up — we’ll
|
|
have coolers on the truck.
|
|
</p>
|
|
<div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 text-[11px] uppercase tracking-[0.28em]">
|
|
<span className="text-amber-200/80">
|
|
{upcomingStops.length} upcoming
|
|
</span>
|
|
<span className="text-stone-700">·</span>
|
|
<span className="text-stone-400">Updated weekly</span>
|
|
<span className="text-stone-700">·</span>
|
|
<Link
|
|
href="/api/tuxedo/schedule-pdf"
|
|
download
|
|
className="text-stone-400 hover:text-amber-200/80 underline underline-offset-4 transition-colors"
|
|
>
|
|
Download full schedule
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</LayoutContainer>
|
|
</section>
|
|
|
|
{/* Stops list — hairline-ruled magazine sidebar style. Each
|
|
row is a single horizontal hairline + date numerals + city
|
|
+ location + time + chevron. No cards, no gradients. */}
|
|
<section className="relative bg-stone-50 py-20 sm:py-24">
|
|
<LayoutContainer>
|
|
{upcomingStops.length === 0 ? (
|
|
<EmptyStops />
|
|
) : (
|
|
<div className="mx-auto max-w-5xl">
|
|
{/* Eyebrow + hairline-ruled list header */}
|
|
<div className="flex items-baseline justify-between gap-4 mb-8">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-emerald-700">
|
|
Upcoming
|
|
</p>
|
|
<p className="text-[10px] uppercase tracking-[0.3em] text-stone-400 tabular-nums">
|
|
{upcomingStops.length} stops
|
|
</p>
|
|
</div>
|
|
|
|
<ol className="border-t border-stone-900/15">
|
|
{upcomingStops.map((stop) => (
|
|
<StopRow key={stop.id} stop={stop} brandSlug={brandSlug} />
|
|
))}
|
|
</ol>
|
|
|
|
{pastStops.length > 0 && (
|
|
<div className="mt-20">
|
|
<div className="flex items-baseline justify-between gap-4 mb-8">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.32em] text-stone-400">
|
|
Past Stops
|
|
</p>
|
|
<p className="text-[10px] uppercase tracking-[0.3em] text-stone-400 tabular-nums">
|
|
Last {Math.min(5, pastStops.length)}
|
|
</p>
|
|
</div>
|
|
<ol className="border-t border-stone-900/10 opacity-70">
|
|
{pastStops.slice(0, 5).map((stop) => (
|
|
<StopRow
|
|
key={stop.id}
|
|
stop={stop}
|
|
brandSlug={brandSlug}
|
|
past
|
|
/>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</LayoutContainer>
|
|
</section>
|
|
</main>
|
|
|
|
<StorefrontFooter brandName={brandName} brandSlug={brandSlug} brandAccent="green" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── STOP ROW — hairline-ruled magazine-sidebar cell ────────────────
|
|
// Date numerals on the left (large tabular day, small month above),
|
|
// city/state + location + time in the middle, chevron on the right.
|
|
// All hairline-divided rows; the list reads as a sidebar, not a feed.
|
|
function StopRow({
|
|
stop,
|
|
brandSlug,
|
|
past = false,
|
|
}: {
|
|
stop: PublicStop;
|
|
brandSlug: string;
|
|
past?: boolean;
|
|
}) {
|
|
const date = new Date(stop.date);
|
|
const day = date.getDate();
|
|
const month = date.toLocaleDateString("en-US", { month: "short" });
|
|
const weekday = date.toLocaleDateString("en-US", { weekday: "short" });
|
|
|
|
const content = (
|
|
<div className="grid grid-cols-12 gap-4 sm:gap-6 items-center py-5 sm:py-6 group">
|
|
{/* Date column — big tabular day, small month/weekday above */}
|
|
<div className="col-span-3 sm:col-span-2">
|
|
<p
|
|
className={`text-[10px] uppercase tracking-[0.28em] tabular-nums ${
|
|
past ? "text-stone-400" : "text-emerald-700"
|
|
}`}
|
|
>
|
|
{weekday} · {month}
|
|
</p>
|
|
<p
|
|
className={`mt-1 font-display tabular-nums leading-none tracking-[-0.02em] ${
|
|
past
|
|
? "text-stone-400 text-3xl sm:text-4xl"
|
|
: "text-stone-950 text-4xl sm:text-5xl"
|
|
}`}
|
|
>
|
|
{day}
|
|
</p>
|
|
</div>
|
|
|
|
{/* City + location */}
|
|
<div className="col-span-9 sm:col-span-6 min-w-0">
|
|
<h3
|
|
className={`font-display leading-[1.15] tracking-[-0.012em] ${
|
|
past
|
|
? "text-stone-500 text-base sm:text-lg"
|
|
: "text-stone-950 text-lg sm:text-xl group-hover:text-emerald-800 transition-colors"
|
|
}`}
|
|
>
|
|
{stop.city}, {stop.state}
|
|
</h3>
|
|
<p
|
|
className={`mt-1 truncate ${past ? "text-stone-400 text-sm" : "text-stone-500 text-sm"}`}
|
|
>
|
|
{stop.location}
|
|
</p>
|
|
{stop.address && (
|
|
<p
|
|
className={`mt-0.5 truncate ${past ? "text-stone-400 text-xs" : "text-stone-400 text-xs"}`}
|
|
>
|
|
{stop.address}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Time + cutoff */}
|
|
<div className="col-span-8 sm:col-span-3 text-right">
|
|
<p
|
|
className={`font-mono tabular-nums text-sm ${
|
|
past ? "text-stone-400" : "text-stone-950"
|
|
}`}
|
|
>
|
|
{stop.time}
|
|
</p>
|
|
{!past && stop.cutoff_time && (
|
|
<p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-stone-400">
|
|
Order by{" "}
|
|
{new Date(stop.cutoff_time).toLocaleTimeString("en-US", {
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
})}
|
|
</p>
|
|
)}
|
|
{past && (
|
|
<p className="mt-1 text-[10px] uppercase tracking-[0.2em] text-stone-400">
|
|
Completed
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Chevron — only on upcoming rows */}
|
|
<div className="hidden sm:flex col-span-1 justify-end">
|
|
{!past && (
|
|
<svg
|
|
className="w-4 h-4 text-stone-300 group-hover:text-emerald-700 group-hover:translate-x-1 transition-all"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const inner = (
|
|
<li className="stop-row border-b border-stone-900/15 last:border-b-0">
|
|
{content}
|
|
</li>
|
|
);
|
|
|
|
if (past) {
|
|
return inner;
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={`/${brandSlug}/stops/${stop.slug}`}
|
|
className="stop-row block border-b border-stone-900/15 last:border-b-0 hover:bg-stone-100/60 transition-colors"
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
// ── EMPTY STATE — editorial Fraunces italic copy ──────────────────
|
|
// Same "no stops yet" message as before, but rendered as a quiet
|
|
// editorial panel instead of an icon-in-rounded-box illustration.
|
|
function EmptyStops() {
|
|
return (
|
|
<div className="mx-auto max-w-2xl text-center py-12">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-emerald-700 mb-5">
|
|
Coming Soon
|
|
</p>
|
|
<h2
|
|
className="font-display text-stone-950 text-[clamp(2rem,4.4vw,3.25rem)] leading-[1.05] tracking-[-0.02em]"
|
|
style={{ textWrap: "balance" }}
|
|
>
|
|
The corn is still ripening
|
|
<br className="hidden sm:block" />{" "}
|
|
<span className="italic text-amber-700/90">in the field.</span>
|
|
</h2>
|
|
<div className="mx-auto mt-7 h-px w-12 bg-emerald-700/60" />
|
|
<p className="mt-7 text-stone-600 text-lg leading-[1.65]">
|
|
New pickup stops are added every week. Check back soon, or browse
|
|
the full season schedule below.
|
|
</p>
|
|
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
|
|
<Link
|
|
href="/tuxedo"
|
|
className="group inline-flex items-center gap-3 rounded-full bg-gradient-to-br from-emerald-700 to-emerald-600 px-8 py-3.5 text-sm font-bold text-white shadow-[0_8px_32px_rgba(16,185,129,0.3),inset_0_1px_0_rgba(255,255,255,0.2)] hover:-translate-y-0.5 transition-all duration-200"
|
|
>
|
|
<span>Back to Tuxedo Corn</span>
|
|
<svg
|
|
className="w-4 h-4 transition-transform group-hover:translate-x-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</Link>
|
|
<Link
|
|
href="/api/tuxedo/schedule-pdf"
|
|
download
|
|
className="inline-flex items-center gap-2 rounded-full bg-white px-8 py-3.5 text-sm font-bold text-stone-900 ring-1 ring-stone-200 hover:ring-emerald-600 hover:text-emerald-700 transition-all"
|
|
>
|
|
<svg
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
Download Schedule
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |