From 129c9d253cf30616ee881cb8be928ef1602dc30e Mon Sep 17 00:00:00 2001 From: Nora Date: Mon, 6 Jul 2026 12:03:36 -0600 Subject: [PATCH] feat(tuxedo): polish home with WP imagery Swap the templated 8-tile Why-grid for three image-driven editorial moments using photos pulled from the tuxedocorn.com WordPress library: - PullQuoteBand: full-bleed pre-storm field with single Fraunces quote - TheCorn: single paragraph + ear macro, replaces feature grid - FounderStrip: John Harold portrait + family narrative Hero poster switched from the tight cob macro to the wide irrigation row with Colorado sky and cumulus clouds. The video underneath stays. Editorial copy tightened. Display type moved to Fraunces for headlines and timeline markers to give the page a real voice instead of default sans throughout. Tone: "you can taste the altitude." --- src/app/tuxedo/page.tsx | 534 +++++++++++++++++----------------------- 1 file changed, 229 insertions(+), 305 deletions(-) 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. */} +