{headline}

{subtext}

(null); const [stops, setStops] = useState([]); const [products, setProducts] = useState([]); const [wholesaleEnabled, setWholesaleEnabled] = useState(false); const [logoUrl, setLogoUrl] = useState(null); const [logoUrlDark, setLogoUrlDark] = useState(null); const [olatheSweetLogoUrl, setOlatheSweetLogoUrl] = useState(null); const [olatheSweetLogoUrlDark, setOlatheSweetLogoUrlDark] = useState(null); const [showSchedulePdf, setShowSchedulePdf] = useState(true); const [showWholesaleLink, setShowWholesaleLink] = useState(true); const [heroTagline, setHeroTagline] = useState(null); const [heroImageUrl, setHeroImageUrl] = useState(null); const [isAdmin, setIsAdmin] = useState(false); const [customFooterText, setCustomFooterText] = useState(null); const [contactEmail, setContactEmail] = useState(null); const [contactPhone, setContactPhone] = useState(null); const [brandPrimaryColor, setBrandPrimaryColor] = useState(null); const [brandBgColor, setBrandBgColor] = useState(null); const [brandTextColor, setBrandTextColor] = useState(null); // Scope ref for GSAP context (fixes "invalid scope"/missing targets by providing explicit scope; selectors now limited to page) const pageScopeRef = useRef(null); useEffect(() => { async function load() { const slug = "tuxedo"; const [brandResult, settingsResult] = await Promise.all([ api.from("brands").select("*").eq("slug", slug).single(), getBrandSettingsPublic(slug), ]); const brandData = brandResult.data; setBrand(brandData); if (settingsResult.success && settingsResult.settings) { const s = settingsResult.settings; setLogoUrl(s.logo_url ?? null); setLogoUrlDark(s.logo_url_dark ?? null); setOlatheSweetLogoUrl(s.olathe_sweet_logo_url ?? null); setOlatheSweetLogoUrlDark(s.olathe_sweet_logo_url_dark ?? null); setHeroImageUrl(s.hero_image_url ?? null); setHeroTagline(s.hero_tagline ?? null); setCustomFooterText(s.custom_footer_text ?? null); setContactEmail(s.email ?? null); setContactPhone(s.phone ?? null); setShowSchedulePdf(s.show_schedule_pdf ?? true); setShowWholesaleLink(s.show_wholesale_link ?? true); setWholesaleEnabled(settingsResult.wholesaleEnabled ?? false); setBrandPrimaryColor(s.brand_primary_color ?? null); setBrandBgColor(s.brand_bg_color ?? null); setBrandTextColor(s.brand_text_color ?? null); } try { const { getCurrentAdminUser } = await import("@/actions/admin-user"); const adminUser = await getCurrentAdminUser(); setIsAdmin(!!adminUser); } catch { // not logged in as admin } if (brandData?.id) { const [{ data: stopsData }, { data: productsData }] = (await Promise.all([ api.from("stops").select("*").eq("brand_id", brandData.id).eq("active", true), api.from("products").select("*").eq("brand_id", brandData.id).eq("active", true), ])) as any; setStops(stopsData ?? []); setProducts(productsData ?? []); } } load(); }, []); function scrollToStops() { document.getElementById("stops")?.scrollIntoView({ behavior: "smooth" }); } function scrollToStory() { document.getElementById("story")?.scrollIntoView({ behavior: "smooth" }); } function scrollToProducts() { document.getElementById("products")?.scrollIntoView({ behavior: "smooth" }); } // ─── GSAP SCROLL ANIMATIONS ────────────────────────────────────────────── // Now explicitly scoped + resilient guards (no more "invalid scope" warnings) useEffect(() => { if (typeof window === "undefined") return; const ctx = gsap.context(() => { // Parallax floating elements gsap.utils.toArray(".parallax-float").forEach((el, i) => { gsap.to(el, { y: -60 - i * 15, scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: 1, }, }); }); // Staggered text reveal on scroll const revealTextElements = gsap.utils.toArray(".reveal-text"); revealTextElements.forEach((el) => { gsap.fromTo( el, { opacity: 0, y: 40, skewY: 2 }, { opacity: 1, y: 0, skewY: 0, duration: 1, ease: "power3.out", scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none reverse", }, } ); }); // Scale reveal for cards const revealScaleElements = gsap.utils.toArray(".reveal-scale"); revealScaleElements.forEach((el, i) => { gsap.fromTo( el, { opacity: 0, scale: 0.9, y: 40 }, { opacity: 1, scale: 1, y: 0, duration: 0.8, delay: i * 0.08, ease: "back.out(1.4)", scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none reverse", }, } ); }); // Counter animations (uses reliable proxy like before; now also has reduced-motion guard for resilience) const prefersReduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches; const counterElements = gsap.utils.toArray(".counter-animate"); counterElements.forEach((el) => { const target = parseInt(el.getAttribute("data-target") || "0", 10); if (prefersReduced) { el.textContent = target.toLocaleString(); return; } const obj = { val: 0 }; gsap.to(obj, { val: target, duration: 2, ease: "power2.out", onUpdate: () => { if (el.textContent !== null) { el.textContent = Math.floor(obj.val).toLocaleString(); } }, scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none none", }, }); }); // Horizontal reveal for section headers gsap.utils.toArray(".reveal-slide").forEach((el) => { gsap.fromTo( el, { opacity: 0, x: -40 }, { opacity: 1, x: 0, duration: 0.8, ease: "power3.out", scrollTrigger: { trigger: el, start: "top 85%", toggleActions: "play none none reverse", }, } ); }); }, pageScopeRef); return () => ctx.revert(); }, []); return (

{showWholesaleLink && wholesaleEnabled && (

Wholesale Portal →

)}

{/* Parallax background layers */}

Delivery Stops

Upcoming
Stops

Find a nearby stop and preorder your corn. Pickup is easy and guaranteed.

{showSchedulePdf && ( Download Schedule )}

{stops.length === 0 ? (

No stops on the calendar just yet

The harvest is right around the corner — new pickup stops go live weekly. You can still preorder below and pick a stop once they're announced.

View All Stops {showSchedulePdf && ( Download Schedule )}

) : ( )}

{/* Section divider */}

{/* Scroll-driven reveal for section header */}

Farm-Direct

This Week's
Harvest

Preorder for pickup at a stop, or have cooler boxes shipped directly to your door after the season.

{/* Cinematic showcase replaces static grid */} ({ id: p.id, name: p.name, description: p.description ?? "", price: `$${p.price}`, type: p.type, imageUrl: p.image_url, brand_id: p.brand_id, brand_slug: "tuxedo", is_taxable: p.is_taxable, pickup_type: p.pickup_type, }))} brandSlug="tuxedo" brandName={brand?.name ?? "Tuxedo Corn"} /> {/* Mobile-friendly fallback grid for smaller screens */}

{products.slice(0, 6).map((product) => ( ))}

{products.length > 3 && (

{products.length - 3} more products available in the full catalog.

)}

{/* Parallax decorative elements */}

{/* Large background text for parallax depth */}

SINCE

Our Story

Three Generations of
Sweet Corn Excellence

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.

{/* Stats with counter animation */}

{[ { stat: "40", suffix: "+", label: "Years Growing" }, { stat: "3", suffix: "", label: "Generations" }, { stat: "100", suffix: "%", label: "Hand-Picked" }, ].map((item, i) => (

0 {item.suffix}

{item.label}

))}

{ e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 12px 40px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 8px 32px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255,255,255,0.2)"; }} > Read Our Story

); }

{feature.headline}

{headline}

Upcoming Stops

This Week's Harvest

Three Generations of Sweet Corn Excellence

Upcoming
Stops

This Week's
Harvest

Three Generations of
Sweet Corn Excellence