diff --git a/src/app/tuxedo/page.tsx b/src/app/tuxedo/page.tsx index 3a673d1..6ca182e 100644 --- a/src/app/tuxedo/page.tsx +++ b/src/app/tuxedo/page.tsx @@ -2,6 +2,7 @@ import { useReducer, useEffect, useRef } from "react"; import Link from "next/link"; +import Image from "next/image"; import { m as motion, useInView } from "framer-motion"; import TuxedoVideoHero from "@/components/storefront/TuxedoVideoHero"; import CinematicShowcase from "@/components/storefront/CinematicShowcase"; @@ -132,6 +133,27 @@ const initialState: State = { brandTextColor: null, }; +/** + * Editorial imagery for the Tuxedo storefront, sourced from the original + * tuxedocorn.com WordPress library and re-hosted on our MinIO bucket so + * the brand controls its own media. These are stable, brand-specific + * assets — they don't need to be admin-configurable yet. (If we ever + * add more brands, lift these into `brand_settings` columns.) + */ +const WP_IMAGES = { + /** Wide panoramic corn row with irrigation canal + Colorado sky — the + * hero poster. Replaces the earlier tight corn-cob macro. */ + heroField: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-field-irrigation.jpg", + /** Pre-storm purple sky over deep-green tasseled rows receding to + * mountains — the editorial pull-quote band. */ + stormField: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-field-storm.jpg", + /** White-haired founder inspecting tassels — the Our Story anchor. */ + founderPortrait: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-founder-john.jpg", + /** Single yellow ear with silk and dark green bokeh — the product + * moment in the editorial "Why" replacement. */ + earMacro: "https://s3.crispygoat.com/videos/wp-import/images/tuxedo-ear-macro.jpg", +} as const; + function reducer(state: State, action: Action): State { switch (action.type) { case "SET_BRAND": @@ -165,311 +187,210 @@ function reducer(state: State, action: Action): State { } } -// ── Why Choose Tuxedo Corn — editorial masonry redesign ───────────── -interface Feature { - /** Bright card / muted card. Both share one accent (silk emerald) — the - * variant only changes how much of the card the accent line covers. */ - tone: "bright" | "muted"; - label: string; - headline: string; - story: string; - size: "tall" | "normal"; - icon: React.ReactNode; -} - -const FEATURES: Feature[] = [ - { - tone: "bright", - label: "Hand-Harvested", - headline: "Picked by Hand, Every Ear", - story: "Three generations of careful hands move through every row. No machine knows when an ear is perfectly ripe the way a farmer's daughter does.", - size: "tall", - icon: ( - - - - - - - - - - - - ), - }, - { - tone: "muted", - label: "Non-GMO", - headline: "Seed to Field, Naturally", - story: "Our Olathe Sweet seed has never been touched by a laboratory. The flavor was shaped by forty summers of patient selection — nothing added, nothing altered.", - size: "normal", - icon: ( - - - - - - - - - - - - ), - }, - { - tone: "bright", - label: "Colorado Grown", - headline: "Born in the High Country", - story: "Olathe Sweet was developed for Colorado's mountain climate — intense sun by day, crisp nights by morning. That contrast makes a sweetness no other soil can claim.", - size: "normal", - icon: ( - - - - - - - - ), - }, - { - tone: "muted", - label: "Regenerative", - headline: "Our Roots Run Deep", - story: "We give back more than we take. Our soil is healthier today than forty years ago — not because we had to, but because this land deserves that kind of care.", - size: "tall", - icon: ( - - - - - - - - ), - }, - { - tone: "bright", - label: "Peak Freshness", - headline: "Harvested the Morning You Order", - story: "We pick before the heat steals a single calorie of sweetness. By the time your order arrives, the corn was still in the field that same morning.", - size: "normal", - icon: ( - - - - - - - - - - - - - ), - }, - { - tone: "muted", - label: "Grown in CO", - headline: "Your Neighborhood Farm", - story: "Forty years of Colorado stops. We know every town we serve — when they like to pick up, where they gather. Your order isn't a transaction; it's a relationship.", - size: "tall", - icon: ( - - - - - - - - ), - }, - { - tone: "bright", - label: "No Middleman", - headline: "From Our Rows to Your Table", - story: "No distribution center. No supermarket back shelf. Just the field, the cooler, and your front door — the same day. That's the promise we keep.", - size: "normal", - icon: ( - - - - - - - - - ), - }, - { - tone: "muted", - label: "Easy Preorder", - headline: "Reserve in 30 Seconds", - story: "Choose your stop, tap your order, done. We'll have your corn in a labeled cooler with your name on it — no account, no app, no confusion.", - size: "tall", - icon: ( - - - - - - - - - ), - }, -]; - -// Single feature card with scroll-triggered entrance and hover effects -function FeatureCard({ feature, index }: { feature: Feature; index: number }) { - const ref = useRef(null); - const isInView = useInView(ref, { once: true, margin: "-60px" }); - - // Single accent (silk emerald) for the whole section. Two visual variants: - // *bright* — slightly lighter card background, white headline. - // *muted* — darker card background, dimmer headline. - // Both share the same green hover glow so the section reads as one block, - // not a kaleidoscope of competing accents. - const cardBg = feature.tone === "bright" ? "bg-stone-900/50" : "bg-stone-900/25"; - const hoverBg = feature.tone === "bright" ? "hover:bg-stone-900/85" : "hover:bg-stone-900/55"; - +// ── Pull-quote band — full-bleed editorial interlude ──────────────── +// A single Fraunces italic quote floating over the pre-storm field. +// No chrome. The image does the talking. +function PullQuoteBand() { return ( - - {/* Top accent rule — hairline line that fills on hover. */} -
-
+ Pre-storm corn rows receding to the mountains at dusk + {/* Layered tints: top darkens the sky, bottom grounds the type. */} +
+ {/* One warm amber rim along the lower edge to echo the corn. */} +