Tyler
6c1c616c1c
Deploy to route.crispygoat.com / deploy (push) Successful in 4m1s
- LandingPageWrapper: Use dynamic year for copyright - HeroSection: Add float-slow/float-slow-delayed keyframes, add prefers-reduced-motion media query - TuxedoVideoHero: Add reduced-motion JS guard and CSS media query for accessibility
499 lines
18 KiB
TypeScript
499 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
// Register GSAP plugins
|
|
if (typeof window !== "undefined") {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
}
|
|
|
|
type TuxedoVideoHeroProps = {
|
|
eyebrow?: string;
|
|
title: string;
|
|
description: string;
|
|
olatheSweetLogoUrl?: string | null;
|
|
primaryButton?: string;
|
|
secondaryButton?: string;
|
|
onPrimaryClick?: () => void;
|
|
onSecondaryClick?: () => void;
|
|
};
|
|
|
|
const VIDEO_URL = "/videos/tuxedo-hero.mp4";
|
|
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
// CINEMATIC HERO - SCROLL-DRIVEN ANIMATIONS
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
export default function TuxedoVideoHero({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
olatheSweetLogoUrl,
|
|
primaryButton,
|
|
secondaryButton,
|
|
onPrimaryClick,
|
|
onSecondaryClick,
|
|
}: TuxedoVideoHeroProps) {
|
|
const logoSrc = olatheSweetLogoUrl;
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [scrollProgress, setScrollProgress] = useState(0);
|
|
|
|
// Trigger entrance animation on mount
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setIsVisible(true), 100);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
// ─── GSAP SCROLL ANIMATIONS ────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
if (typeof window === "undefined" || !sectionRef.current) return;
|
|
|
|
// Respect reduced motion preference
|
|
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
|
|
if (prefersReducedMotion) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
// Scroll progress tracking
|
|
ScrollTrigger.create({
|
|
trigger: sectionRef.current,
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: true,
|
|
onUpdate: (self) => {
|
|
setScrollProgress(self.progress);
|
|
},
|
|
});
|
|
|
|
// Hero content pin - fade out on scroll
|
|
if (contentRef.current) {
|
|
gsap.to(contentRef.current, {
|
|
y: -80,
|
|
opacity: 0,
|
|
ease: "power2.inOut",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top top",
|
|
end: "40% top",
|
|
scrub: 1.2,
|
|
},
|
|
});
|
|
}
|
|
|
|
// Video scale + parallax
|
|
if (videoRef.current) {
|
|
gsap.to(videoRef.current, {
|
|
scale: 1.15,
|
|
y: 100,
|
|
ease: "power2.inOut",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top top",
|
|
end: "50% top",
|
|
scrub: 1.5,
|
|
},
|
|
});
|
|
}
|
|
|
|
// Staggered entrance for content elements
|
|
const contentElements = gsap.utils.toArray<Element>(".hero-reveal");
|
|
contentElements.forEach((el, i) => {
|
|
gsap.fromTo(
|
|
el,
|
|
{ opacity: 0, y: 40, scale: 0.95 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
duration: 1,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 90%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
// Parallax floating elements
|
|
const floatElements = gsap.utils.toArray<Element>(".parallax-float");
|
|
floatElements.forEach((el, idx) => {
|
|
gsap.to(el, {
|
|
y: -80 - idx * 20,
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
});
|
|
|
|
// Scroll indicator bounce on scroll
|
|
gsap.to(".scroll-indicator", {
|
|
y: 20,
|
|
opacity: 0,
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "10% top",
|
|
end: "30% top",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
}, sectionRef);
|
|
|
|
return () => ctx.revert();
|
|
}, []);
|
|
|
|
// Smooth scroll to stops section
|
|
const handlePrimaryClick = () => {
|
|
const stopsSection = document.getElementById("stops");
|
|
if (stopsSection) {
|
|
stopsSection.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
} else if (onPrimaryClick) {
|
|
onPrimaryClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────────── */}
|
|
<div className="fixed top-0 left-0 right-0 h-1 z-[1000] bg-black/20">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-emerald-600 via-emerald-400 to-amber-400"
|
|
style={{
|
|
transform: `scaleX(${scrollProgress})`,
|
|
transformOrigin: "left",
|
|
transition: "transform 0.1s ease-out",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* ─── CINEMATIC HERO SECTION ──────────────────────────────────────── */}
|
|
<section
|
|
ref={sectionRef}
|
|
className="relative min-h-screen flex items-center overflow-hidden"
|
|
>
|
|
{/* Background video with parallax */}
|
|
<video
|
|
ref={videoRef}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
className="absolute inset-0 w-full h-[120%] object-cover"
|
|
style={{ zIndex: 0 }}
|
|
src={VIDEO_URL}
|
|
/>
|
|
|
|
{/* Gradient overlays */}
|
|
<div
|
|
className="absolute inset-0 pointer-events-none"
|
|
style={{
|
|
zIndex: 1,
|
|
background: "linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,193,7,0.06) 50%, rgba(255,235,0,0.04) 100%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute inset-0 pointer-events-none"
|
|
style={{
|
|
zIndex: 2,
|
|
background: "radial-gradient(ellipse at center, rgba(255,200,0,0.08) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.9) 100%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute inset-0 pointer-events-none"
|
|
style={{
|
|
zIndex: 3,
|
|
background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.05) 100%)",
|
|
}}
|
|
/>
|
|
|
|
{/* ─── FLOATING DECORATIVE ELEMENTS ──────────────────────────────── */}
|
|
<div className="absolute inset-0 pointer-events-none z-[4]">
|
|
{/* Golden orb top-left */}
|
|
<div
|
|
className="parallax-float absolute top-1/4 left-1/4 w-64 h-64 rounded-full opacity-20"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%)",
|
|
filter: "blur(40px)",
|
|
animation: "float-slow 10s ease-in-out infinite",
|
|
}}
|
|
/>
|
|
{/* Emerald orb bottom-right */}
|
|
<div
|
|
className="parallax-float absolute bottom-1/3 right-1/4 w-48 h-48 rounded-full opacity-15"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(16,185,129,0.4) 0%, transparent 70%)",
|
|
filter: "blur(30px)",
|
|
animation: "float-delayed 12s ease-in-out infinite",
|
|
}}
|
|
/>
|
|
{/* Subtle grain overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* ─── CONTENT CONTAINER ──────────────────────────────────────────── */}
|
|
<div
|
|
ref={contentRef}
|
|
className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-32 pt-32 flex flex-col justify-end"
|
|
>
|
|
<div className="max-w-3xl">
|
|
{/* Logo with glow effect */}
|
|
<motion.div
|
|
className="hero-reveal mb-10 relative h-20 md:h-24 w-[320px] md:w-[400px]"
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={isVisible ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
|
|
transition={{ duration: 1, delay: 0.1, ease: [0.22, 0.61, 0.36, 1] }}
|
|
>
|
|
<div className="absolute -inset-8 rounded-full bg-emerald-500/10 blur-2xl" />
|
|
{logoSrc ? (
|
|
<Image
|
|
src={logoSrc}
|
|
alt="Olathe Sweet"
|
|
fill
|
|
style={{ objectFit: "contain" }}
|
|
className="drop-shadow-2xl"
|
|
priority
|
|
/>
|
|
) : null}
|
|
</motion.div>
|
|
|
|
{/* Eyebrow with animated underline */}
|
|
<div className="hero-reveal mb-6">
|
|
{eyebrow && (
|
|
<p className="text-[11px] font-bold uppercase tracking-[0.3em] text-amber-400/80">
|
|
{eyebrow}
|
|
</p>
|
|
)}
|
|
<div className="mt-3 h-px w-16 bg-gradient-to-r from-emerald-500 to-transparent" />
|
|
</div>
|
|
|
|
{/* Main Title - Apple-style reveal */}
|
|
<h1
|
|
className="hero-reveal text-6xl md:text-7xl lg:text-8xl font-black tracking-tight text-white leading-[0.95] mb-6"
|
|
style={{
|
|
textShadow: "0 4px 30px rgba(0,0,0,0.3), 0 0 60px rgba(255,215,0,0.1)",
|
|
}}
|
|
>
|
|
{title.split(" ").map((word, idx) => (
|
|
<span
|
|
key={idx}
|
|
className="inline-block mr-4"
|
|
style={{
|
|
animationDelay: `${0.2 + idx * 0.1}s`,
|
|
}}
|
|
>
|
|
{word}
|
|
</span>
|
|
))}
|
|
</h1>
|
|
|
|
{/* Description with typewriter-like reveal */}
|
|
<p
|
|
className="hero-reveal text-xl md:text-2xl text-white/70 leading-relaxed max-w-xl mb-10"
|
|
style={{ fontWeight: 300 }}
|
|
>
|
|
{description}
|
|
</p>
|
|
|
|
{/* CTAs with hover effects */}
|
|
<div className="hero-reveal flex flex-wrap items-center gap-5">
|
|
{primaryButton && (
|
|
<motion.button
|
|
onClick={handlePrimaryClick}
|
|
className="group relative rounded-full px-10 py-4 text-sm font-bold tracking-widest uppercase overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(135deg, #059669 0%, #10b981 100%)",
|
|
boxShadow: "0 8px 32px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255,255,255,0.2)",
|
|
}}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<span className="relative z-10 flex items-center gap-3">
|
|
<span>{primaryButton}</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}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</span>
|
|
<div
|
|
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
style={{
|
|
background: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
|
|
}}
|
|
/>
|
|
</motion.button>
|
|
)}
|
|
{secondaryButton && (
|
|
<button
|
|
onClick={onSecondaryClick}
|
|
className="group flex items-center gap-3 text-sm font-semibold"
|
|
style={{ color: "rgba(255,255,255,0.8)" }}
|
|
>
|
|
<span className="uppercase tracking-widest text-[11px]">{secondaryButton}</span>
|
|
<span
|
|
className="w-10 h-10 rounded-full border flex items-center justify-center transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/30"
|
|
style={{ borderColor: "rgba(255,255,255,0.3)" }}
|
|
>
|
|
<svg
|
|
className="w-4 h-4 transition-transform group-hover:translate-x-0.5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats row */}
|
|
<div className="hero-reveal mt-16 flex flex-wrap gap-12">
|
|
{[
|
|
{ stat: "40+", label: "Years Growing" },
|
|
{ stat: "3", label: "Generations" },
|
|
{ stat: "100%", label: "Hand-Picked" },
|
|
].map((item, i) => (
|
|
<div key={i} className="text-center">
|
|
<div
|
|
className="text-3xl md:text-4xl font-black text-white"
|
|
style={{ textShadow: "0 2px 20px rgba(0,0,0,0.3)" }}
|
|
>
|
|
{item.stat}
|
|
</div>
|
|
<div
|
|
className="text-[10px] uppercase tracking-[0.2em] mt-1"
|
|
style={{ color: "rgba(255,255,255,0.5)" }}
|
|
>
|
|
{item.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ─── SCROLL INDICATOR ────────────────────────────────────────────── */}
|
|
<div
|
|
className="scroll-indicator absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3"
|
|
style={{ pointerEvents: "auto" }}
|
|
>
|
|
<button
|
|
onClick={handlePrimaryClick}
|
|
className="flex flex-col items-center gap-2 text-white/50 hover:text-white/80 transition-colors duration-200"
|
|
aria-label="Scroll to stops"
|
|
>
|
|
<span className="text-[10px] uppercase tracking-[0.25em] font-medium">Explore</span>
|
|
<div
|
|
className="w-6 h-10 rounded-full border border-white/30 flex items-start justify-center p-1.5"
|
|
>
|
|
<div
|
|
className="w-1.5 h-3 rounded-full bg-white animate-bounce"
|
|
style={{ animationDuration: "1.5s" }}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{/* ─── CORNER DECORATIONS ───────────────────────────────────────────── */}
|
|
<div
|
|
className="parallax-float absolute top-8 right-8 opacity-30"
|
|
style={{ animationDelay: "1s" }}
|
|
>
|
|
<svg className="w-16 h-16" viewBox="0 0 64 64" fill="none">
|
|
<path
|
|
d="M32 4C48 16, 56 32, 48 56C40 64, 24 64, 8 56C0 32, 16 16, 32 4"
|
|
stroke="rgba(255,215,0,0.5)"
|
|
strokeWidth="1"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
d="M32 12C44 22, 48 36, 42 52C36 58, 26 58, 18 52C12 36, 20 22, 32 12"
|
|
stroke="rgba(255,215,0,0.3)"
|
|
strokeWidth="1"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
className="parallax-float absolute bottom-20 left-8 opacity-20"
|
|
style={{ animationDelay: "1.5s" }}
|
|
>
|
|
<svg className="w-12 h-12" viewBox="0 0 48 48" fill="none">
|
|
<circle cx="24" cy="24" r="20" stroke="rgba(16,185,129,0.4)" strokeWidth="1" />
|
|
<circle cx="24" cy="24" r="14" stroke="rgba(16,185,129,0.3)" strokeWidth="1" />
|
|
<circle cx="24" cy="24" r="8" stroke="rgba(16,185,129,0.2)" strokeWidth="1" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── GLOBAL ANIMATIONS ──────────────────────────────────────────────── */}
|
|
<style jsx>{`
|
|
@keyframes float-slow {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(15px, -20px); }
|
|
66% { transform: translate(-10px, 10px); }
|
|
}
|
|
|
|
@keyframes float-delayed {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(-20px, 15px); }
|
|
66% { transform: translate(10px, -10px); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(6px); }
|
|
}
|
|
|
|
.animate-bounce {
|
|
animation: bounce 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.parallax-float {
|
|
will-change: transform;
|
|
}
|
|
|
|
.hero-reveal {
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
button, a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.parallax-float, .animate-bounce, .hero-reveal {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
.hero-reveal {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|