feat(tuxedo): polish home with WP imagery
Deploy to route.crispygoat.com / deploy (push) Successful in 4m22s
Deploy to route.crispygoat.com / deploy (push) Successful in 4m22s
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."
This commit is contained in:
Nora
+225
-301
@@ -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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 14c0-1 .9-2 2-2s2 1 2 2-.9 2-2 2-2-1-2-2z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 20v6c0 3 3 5 6 5s6-2 6-5v-6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 20v2M20 18v4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M28 14c0-1 .9-2 2-2s2 1 2 2-.9 2-2 2-2-1-2-2z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M28 20v6c0 3 3 5 6 5s6-2 6-5v-6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M32 20v2M36 18v4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 31v6h12v-6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M22 31h4M32 31h4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 14l4-4 4 4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<circle cx="24" cy="24" r="10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 14v10l6 4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 10l-3-3 3-3 3 3-3 3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M30 10l3-3-3-3-3 3 3 3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 38l-3 3 3 3 3-3-3-3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M30 38l3 3 3-3-3-3 3-3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10 24l-3 3 3 3 3-3-3-3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M38 24l3 3 3-3-3-3 3-3" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M14 18l2 2M32 18l2 2M14 30l2-2M32 30l2-2" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 8l12 20H12L24 8z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 8l-6 10h12l-6-10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 28l6 12 6-12" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 40v-4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 40h36" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 40v-16" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 24c0-8 6-14 14-14-2 8-8 14-14 14" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 24c0-8-6-14-14-14 2 8 8 14 14 14" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 28c0 6 5 10 10 10-2-6-6-10-10-10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 28c0 6-5 10-10 10 2-6 6-10 10-10" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<circle cx="24" cy="24" r="10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M24 14v10l6 4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 12l-2-2 2-2 2 2-2 2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M30 12l2-2-2-2-2 2 2 2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 36l-2 2 2 2 2-2-2-2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M30 36l2 2-2 2-2-2 2-2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18l-2-2-2 2 2 2 2-2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 30l-2 2-2-2 2-2 2 2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M36 18l2-2 2 2-2 2-2-2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M36 30l2 2 2-2-2-2-2 2" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 30h32M8 30l6-10h20l6 10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 30v6h32v-6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 30v6M24 30v6M32 30v6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 26h16" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 36h8M36 36h8" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<rect x="8" y="14" width="32" height="24" rx="2" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8 22h32" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 28h16M16 32h10" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 14v-4a6 6 0 0112 0v4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 10h12" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 38l4 4 4-4 4 4 4-4 4 4 4-4 4 4 4-4 4 4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
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: (
|
||||
<svg viewBox="0 0 48 48" fill="none" className="w-14 h-14 -mt-1" stroke="currentColor" strokeWidth="1.2">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 16h16M16 22h16M16 28h12" />
|
||||
<circle cx="36" cy="28" r="6" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M34 28l2 2 4-4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 12V8a4 4 0 014-4h16a4 4 0 014 4v4" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 12h24" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 12h4v10h-4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// Single feature card with scroll-triggered entrance and hover effects
|
||||
function FeatureCard({ feature, index }: { feature: Feature; index: number }) {
|
||||
const ref = useRef<HTMLDivElement>(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 (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 32 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
|
||||
transition={{
|
||||
duration: 0.6,
|
||||
delay: (index % 4) * 0.08 + Math.floor(index / 4) * 0.06,
|
||||
ease: [0.22, 0.61, 0.36, 1],
|
||||
}}
|
||||
className={`relative flex flex-col gap-5 rounded-2xl ${cardBg} ${hoverBg} p-7 overflow-hidden group transition-all duration-500 hover:translate-y-[-4px] hover:shadow-[0_24px_60px_-24px_rgba(63,110,58,0.45)] border border-white/[0.04] hover:border-emerald-500/30`}
|
||||
<section
|
||||
className="relative isolate overflow-hidden"
|
||||
style={{ minHeight: "min(86vh, 820px)" }}
|
||||
>
|
||||
{/* Top accent rule — hairline line that fills on hover. */}
|
||||
<div className="absolute top-0 left-7 right-7 h-px overflow-hidden">
|
||||
<div className="h-full w-full bg-gradient-to-r from-emerald-500/60 to-emerald-500/0 origin-left transform scale-x-30 group-hover:scale-x-100 transition-transform duration-500" />
|
||||
</div>
|
||||
<Image
|
||||
src={WP_IMAGES.stormField}
|
||||
alt="Pre-storm corn rows receding to the mountains at dusk"
|
||||
fill
|
||||
sizes="100vw"
|
||||
quality={88}
|
||||
className="object-cover -z-10"
|
||||
/>
|
||||
{/* Layered tints: top darkens the sky, bottom grounds the type. */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-stone-950/55 via-stone-950/15 to-stone-950/80 -z-10" />
|
||||
{/* One warm amber rim along the lower edge to echo the corn. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 bottom-0 h-px bg-amber-300/40 -z-10"
|
||||
/>
|
||||
|
||||
{/* Icon plate */}
|
||||
<div className="relative w-14 h-14 rounded-xl flex items-center justify-center bg-emerald-500/10 text-emerald-300/90 transition-all duration-500 group-hover:bg-emerald-500/20 group-hover:text-emerald-200 group-hover:shadow-[0_0_28px_rgba(63,110,58,0.35)]">
|
||||
{feature.icon}
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.25em] text-emerald-400/70 transition-colors duration-300 group-hover:text-emerald-300">
|
||||
{feature.label}
|
||||
<div className="relative min-h-[inherit] flex items-end pb-20 sm:pb-28">
|
||||
<div className="mx-auto w-full max-w-5xl px-6 sm:px-10 text-center">
|
||||
<FadeOnScroll from="up">
|
||||
<p
|
||||
className="font-display text-white text-[clamp(1.85rem,4.4vw,3.75rem)] leading-[1.08] tracking-[-0.015em] italic"
|
||||
style={{ textWrap: "balance" }}
|
||||
>
|
||||
“The best sweet corn doesn’t travel.
|
||||
<br className="hidden sm:block" />
|
||||
<span className="text-amber-200/95"> It shouldn’t have to.”</span>
|
||||
</p>
|
||||
|
||||
{/* Headline */}
|
||||
<h3 className="text-white font-bold text-[17px] leading-snug tracking-tight">
|
||||
{feature.headline}
|
||||
</h3>
|
||||
|
||||
{/* Story */}
|
||||
<p className="text-stone-400 text-[13px] leading-relaxed mt-auto">
|
||||
{feature.story}
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="up" delay={0.15}>
|
||||
<div className="mt-10 mx-auto h-px w-12 bg-amber-300/70" />
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="up" delay={0.25}>
|
||||
<p className="mt-6 text-[10px] sm:text-[11px] font-medium uppercase tracking-[0.32em] text-stone-300">
|
||||
— Tuxedo Corn · Olathe, Colorado
|
||||
</p>
|
||||
</motion.div>
|
||||
</FadeOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function WhyTuxedoCorn() {
|
||||
const headerRef = useRef<HTMLDivElement>(null);
|
||||
const headerInView = useInView(headerRef, { once: true, margin: "-80px" });
|
||||
|
||||
// ── The Corn — single editorial moment replacing the feature grid ───
|
||||
// One paragraph. One image. The feature-card grid read as a templated
|
||||
// list of icons; an honest photograph of a single ear communicates
|
||||
// everything those eight tiles couldn't.
|
||||
function TheCorn() {
|
||||
return (
|
||||
<section className="relative bg-stone-950 py-28 sm:py-32 overflow-hidden">
|
||||
{/* Single soft golden-hour glow — replaces the prior emerald/amber
|
||||
two-tone gradient which made the section read as kaleidoscope. */}
|
||||
<section
|
||||
id="the-corn"
|
||||
className="relative bg-stone-50 py-24 sm:py-32 overflow-hidden"
|
||||
>
|
||||
<LayoutContainer>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
|
||||
{/* Left: copy column, 5/12 */}
|
||||
<div className="lg:col-span-5 order-2 lg:order-1">
|
||||
<FadeOnScroll from="left">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-emerald-700 mb-5">
|
||||
The Corn
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="left" delay={0.1}>
|
||||
<h2
|
||||
className="font-display text-stone-950 text-[clamp(2.25rem,4.8vw,3.75rem)] leading-[1.04] tracking-[-0.018em]"
|
||||
style={{ textWrap: "balance" }}
|
||||
>
|
||||
You can taste<br className="hidden sm:block" />
|
||||
<span className="italic text-amber-700/90">the altitude.</span>
|
||||
</h2>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="left" delay={0.2}>
|
||||
<div className="mt-7 h-px w-12 bg-emerald-700/60" />
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="left" delay={0.3}>
|
||||
<p className="mt-7 text-stone-700 text-lg leading-[1.65]">
|
||||
Olathe Sweet was developed for the Uncompahgre Valley — five thousand,
|
||||
three hundred and sixty feet above the sea, where the daytime sun hits
|
||||
the husk and the nights cool it back down before sunrise. That diurnal
|
||||
swing is what loads every kernel with sugar; nothing we do in the
|
||||
kitchen can replicate it, and nothing in a greenhouse can grow it.
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="left" delay={0.4}>
|
||||
<p className="mt-5 text-stone-600 leading-[1.65]">
|
||||
The ear in the photograph was picked the morning it was shot. The
|
||||
silk on the right is still damp. We don’t airbrush the field
|
||||
because we don’t need to.
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
</div>
|
||||
|
||||
{/* Right: macro photo, 7/12 — the photograph carries the section. */}
|
||||
<div className="lg:col-span-7 order-1 lg:order-2">
|
||||
<FadeOnScroll from="right" duration={1}>
|
||||
<div className="relative aspect-[5/4] sm:aspect-[16/11] overflow-hidden rounded-2xl shadow-[0_30px_80px_-30px_rgba(15,40,20,0.45)] ring-1 ring-stone-900/5">
|
||||
<Image
|
||||
src={WP_IMAGES.earMacro}
|
||||
alt="A single ear of Olathe Sweet corn, partially husked, silk still attached, against a field of dark green tassels"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 58vw"
|
||||
quality={90}
|
||||
priority
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Subtle amber rim light along the bottom — picks up the corn. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_30%,rgba(63,110,58,0.16)_0%,transparent_55%)]"
|
||||
className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-amber-200/15 to-transparent pointer-events-none"
|
||||
/>
|
||||
{/* Provenance plate, lower-left, hairline border. */}
|
||||
<div className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 px-3.5 py-2 rounded-full bg-stone-950/65 backdrop-blur-sm text-[10px] font-semibold uppercase tracking-[0.28em] text-amber-100">
|
||||
Olathe Sweet · Day of pick
|
||||
</div>
|
||||
</div>
|
||||
</FadeOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Founder strip — Our Story anchor ─────────────────────────────────
|
||||
// Image + narrative. The previous "Our Story" was a centered text block;
|
||||
// here the founder's portrait grounds the timeline that follows.
|
||||
function FounderStrip() {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-stone-950 py-20 sm:py-24 border-y border-white/[0.04] overflow-hidden"
|
||||
>
|
||||
{/* A single amber rim along the top so this section reads as the
|
||||
hinge between The Corn (warm cream) and the dark Story panel. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 top-0 h-px bg-amber-300/30"
|
||||
/>
|
||||
|
||||
<LayoutContainer>
|
||||
{/* Header */}
|
||||
<div ref={headerRef} className="text-center mb-20 max-w-xl mx-auto">
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={headerInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-[11px] font-bold uppercase tracking-[0.3em] text-emerald-400/80 mb-6"
|
||||
>
|
||||
Why Olathe Sweet™
|
||||
</motion.p>
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={headerInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
|
||||
transition={{ duration: 0.7, delay: 0.1 }}
|
||||
className="text-4xl sm:text-5xl md:text-6xl font-black tracking-[-0.02em] text-white leading-[1.05] mb-6"
|
||||
>
|
||||
Why Choose<br className="hidden sm:block" />Tuxedo Corn
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
initial={{ scaleX: 0 }}
|
||||
animate={headerInView ? { scaleX: 1 } : { scaleX: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
className="mx-auto mt-1 mb-7 h-px w-16 bg-gradient-to-r from-emerald-500 to-amber-400/70"
|
||||
style={{ originX: 0 }}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14 items-center">
|
||||
<FadeOnScroll from="left" className="lg:col-span-5">
|
||||
<div className="relative aspect-[4/5] sm:aspect-[5/6] overflow-hidden rounded-2xl ring-1 ring-white/10 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)]">
|
||||
<Image
|
||||
src={WP_IMAGES.founderPortrait}
|
||||
alt="John Harold, founder, walking through his corn rows inspecting the tassels"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 42vw"
|
||||
quality={88}
|
||||
className="object-cover"
|
||||
/>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={headerInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="text-stone-400 text-base sm:text-lg leading-relaxed"
|
||||
{/* Soft amber wash on the bottom — matches The Corn plate. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 bottom-0 h-1/4 bg-gradient-to-t from-amber-200/15 to-transparent pointer-events-none"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 sm:bottom-5 sm:left-5 px-3 py-1.5 rounded-full bg-stone-950/70 backdrop-blur-sm text-[10px] font-semibold uppercase tracking-[0.28em] text-amber-100">
|
||||
John Harold · Olathe, CO
|
||||
</div>
|
||||
</div>
|
||||
</FadeOnScroll>
|
||||
|
||||
<div className="lg:col-span-7">
|
||||
<FadeOnScroll from="right">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-amber-300/80 mb-5">
|
||||
The family behind the row
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="right" delay={0.1}>
|
||||
<h3
|
||||
className="font-display text-white text-[clamp(1.85rem,3.6vw,2.85rem)] leading-[1.1] tracking-[-0.012em]"
|
||||
style={{ textWrap: "balance" }}
|
||||
>
|
||||
Colorado has trusted Olathe Sweet at their tables for over four decades. Here's why.
|
||||
</motion.p>
|
||||
John Harold’s great-grandchildren still walk
|
||||
the same rows he cleared in 1982.
|
||||
</h3>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="right" delay={0.2}>
|
||||
<p className="mt-7 text-stone-300 leading-[1.7] text-lg max-w-xl">
|
||||
The Olathe Sweet parent line was rescued from a retiring farmer
|
||||
who believed his valley could grow sugar in a husk. We brought
|
||||
it back to the same soil, learned how it liked the water, and
|
||||
kept the seed — by hand, ear by ear — for forty summers. The
|
||||
name on the cooler is the name on the deed.
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
<FadeOnScroll from="right" delay={0.3}>
|
||||
<div className="mt-9 flex flex-wrap items-center gap-x-8 gap-y-3 text-[11px] uppercase tracking-[0.28em]">
|
||||
<span className="text-amber-200/80">Est. 1982</span>
|
||||
<span className="text-stone-700">·</span>
|
||||
<span className="text-stone-400">3 generations on the row</span>
|
||||
<span className="text-stone-700">·</span>
|
||||
<span className="text-stone-400">~60 hands at peak</span>
|
||||
</div>
|
||||
|
||||
{/* Asymmetric masonry grid with staggered offsets */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
|
||||
<div>
|
||||
<FeatureCard feature={FEATURES[0]} index={0} />
|
||||
</div>
|
||||
<div className="lg:mt-10">
|
||||
<FeatureCard feature={FEATURES[1]} index={1} />
|
||||
</div>
|
||||
<div>
|
||||
<FeatureCard feature={FEATURES[2]} index={2} />
|
||||
</div>
|
||||
<div className="lg:mt-10">
|
||||
<FeatureCard feature={FEATURES[3]} index={3} />
|
||||
</div>
|
||||
|
||||
<div className="lg:mt-[-60px] hidden lg:block">
|
||||
<FeatureCard feature={FEATURES[4]} index={4} />
|
||||
</div>
|
||||
<div>
|
||||
<FeatureCard feature={FEATURES[5]} index={5} />
|
||||
</div>
|
||||
<div className="lg:mt-[-60px] hidden lg:block">
|
||||
<FeatureCard feature={FEATURES[6]} index={6} />
|
||||
</div>
|
||||
<div>
|
||||
<FeatureCard feature={FEATURES[7]} index={7} />
|
||||
</FadeOnScroll>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer — provenance record strip (this is the editorial anchor). */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mt-16 text-center text-[10px] font-medium uppercase tracking-[0.3em] text-stone-500"
|
||||
>
|
||||
<span className="text-emerald-400/80">Family-Grown</span>
|
||||
<span className="mx-3 text-stone-700">·</span>
|
||||
<span>Olathe, Colorado</span>
|
||||
<span className="mx-3 text-stone-700">·</span>
|
||||
<span>5,360 ft altitude</span>
|
||||
<span className="mx-3 text-stone-700">·</span>
|
||||
<span>Est. 1982</span>
|
||||
</motion.div>
|
||||
</LayoutContainer>
|
||||
</section>
|
||||
);
|
||||
@@ -675,10 +596,10 @@ function ProductsSection({
|
||||
);
|
||||
}
|
||||
|
||||
// ── Story section ───────────────────────────────────────────────────
|
||||
// ── Story section — slim timeline (founder portrait now lives above) ─
|
||||
function StorySection() {
|
||||
return (
|
||||
<section id="story" className="py-28 sm:py-32 bg-stone-950 relative overflow-hidden">
|
||||
<section id="story" className="py-24 sm:py-28 bg-stone-950 relative overflow-hidden">
|
||||
{/* Single soft golden-hour glow behind the headline. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
@@ -694,28 +615,27 @@ function StorySection() {
|
||||
</FadeOnScroll>
|
||||
|
||||
<FadeOnScroll from="up" delay={0.1}>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-black tracking-[-0.02em] text-white leading-[1.05] mb-8">
|
||||
Three Generations of<br className="hidden md:block" /> Sweet Corn Excellence
|
||||
<h2
|
||||
className="font-display text-white text-[clamp(2.25rem,4.6vw,3.75rem)] leading-[1.04] tracking-[-0.018em] mb-8"
|
||||
style={{ textWrap: "balance" }}
|
||||
>
|
||||
Three generations of<br className="hidden md:block" /> sweet corn excellence.
|
||||
</h2>
|
||||
</FadeOnScroll>
|
||||
|
||||
<FadeOnScroll from="up" delay={0.2}>
|
||||
<div className="mx-auto mt-8 mb-10 h-px w-16 bg-gradient-to-r from-emerald-500 to-amber-400" />
|
||||
<div className="mx-auto mt-6 mb-10 h-px w-16 bg-gradient-to-r from-emerald-500 to-amber-400" />
|
||||
</FadeOnScroll>
|
||||
|
||||
<FadeOnScroll from="up" delay={0.3}>
|
||||
<p className="text-stone-300 leading-relaxed text-lg md:text-xl max-w-2xl mx-auto">
|
||||
<p className="text-stone-300 leading-[1.7] text-lg md:text-xl max-w-2xl mx-auto">
|
||||
Tuxedo Corn is the exclusive grower and shipper of Olathe Sweet Sweet Corn — developed for Colorado's high-altitude mountain climate and grown by the same family for over 40 years.
|
||||
</p>
|
||||
</FadeOnScroll>
|
||||
|
||||
{/* Pull-quote from the family's history. The previous decorative
|
||||
giant "SINCE" parallax text and duplicate stats counter
|
||||
(already shown in the hero) were removed — both read as
|
||||
template decoration. The timeline below carries the same
|
||||
trust signal as a real record. */}
|
||||
{/* Timeline — kept as the trust signal. */}
|
||||
<FadeOnScroll from="up" delay={0.4}>
|
||||
<ol className="mt-20 grid grid-cols-1 sm:grid-cols-3 gap-10 sm:gap-6 max-w-3xl mx-auto text-left">
|
||||
<ol className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-10 sm:gap-6 max-w-3xl mx-auto text-left">
|
||||
{[
|
||||
{
|
||||
year: "1982",
|
||||
@@ -735,7 +655,7 @@ function StorySection() {
|
||||
].map((item) => (
|
||||
<li key={item.year} className="relative pl-6">
|
||||
<span className="absolute left-0 top-1 bottom-1 w-px bg-gradient-to-b from-emerald-500/60 to-amber-400/40" />
|
||||
<p className="text-[11px] font-bold uppercase tracking-[0.25em] text-emerald-300/80 mb-2 tabular-nums">
|
||||
<p className="font-display text-[11px] font-bold uppercase tracking-[0.25em] text-emerald-300/80 mb-2 tabular-nums">
|
||||
{item.year}
|
||||
</p>
|
||||
<h3 className="text-white font-bold text-base tracking-tight mb-2">
|
||||
@@ -750,7 +670,7 @@ function StorySection() {
|
||||
</FadeOnScroll>
|
||||
|
||||
<FadeOnScroll from="up" delay={0.5}>
|
||||
<div className="mt-16">
|
||||
<div className="mt-14">
|
||||
<Link
|
||||
href="/tuxedo/about"
|
||||
className="group inline-flex items-center gap-3 rounded-full bg-gradient-to-br from-emerald-700 to-emerald-600 px-10 py-4 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 hover:shadow-[0_12px_40px_rgba(16,185,129,0.4),inset_0_1px_0_rgba(255,255,255,0.2)] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-950"
|
||||
@@ -983,7 +903,9 @@ export default function TuxedoPage() {
|
||||
onSecondaryClick={scrollToStory}
|
||||
/>
|
||||
|
||||
<WhyTuxedoCorn />
|
||||
<PullQuoteBand />
|
||||
|
||||
<TheCorn />
|
||||
|
||||
<StopsSection stops={state.stops} showSchedulePdf={state.showSchedulePdf} />
|
||||
|
||||
@@ -995,6 +917,8 @@ export default function TuxedoPage() {
|
||||
olatheSweetLogoUrlDark={state.olatheSweetLogoUrlDark}
|
||||
/>
|
||||
|
||||
<FounderStrip />
|
||||
|
||||
<StorySection />
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user