Nora
1057 lines
45 KiB
TypeScript
1057 lines
45 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import Link from "next/link";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
// Register GSAP plugins
|
|
if (typeof window !== "undefined") {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
}
|
|
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
// CINEMATIC HERO SECTION - APPLE-STYLE SCROLL-DRIVEN ANIMATIONS
|
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
function scrollToContent() {
|
|
const nextSection = document.getElementById("story");
|
|
if (nextSection) {
|
|
nextSection.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}
|
|
|
|
export default function HeroSection() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const heroRef = useRef<HTMLElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
const [mounted, setMounted] = useState(false);
|
|
const [scrollProgress, setScrollProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setMounted(true), 100);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
// ─── GSAP SCROLL ANIMATIONS ────────────────────────────────────────────────
|
|
// Resilient: respects reduced-motion, safe GSAP target checks, reliable counter impl, proper scope
|
|
useEffect(() => {
|
|
if (!mounted || !heroRef.current || !contentRef.current) return;
|
|
|
|
const prefersReducedMotion =
|
|
typeof window !== "undefined" &&
|
|
window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
|
|
|
|
// For reduced motion: show final states immediately (no scroll-driven anims to avoid jank/warnings)
|
|
if (prefersReducedMotion) {
|
|
const counterEls = document.querySelectorAll<Element>(".counter-animate");
|
|
counterEls.forEach((el) => {
|
|
const targetStr = el.getAttribute("data-target") || "0";
|
|
const target = parseInt(targetStr, 10);
|
|
el.textContent = target.toLocaleString();
|
|
});
|
|
// Still allow basic scroll progress bar if wanted, but skip all ScrollTrigger/GSAP heavy
|
|
return;
|
|
}
|
|
|
|
const ctx = gsap.context(() => {
|
|
// Scroll progress tracking
|
|
ScrollTrigger.create({
|
|
trigger: heroRef.current,
|
|
start: "top top",
|
|
end: "bottom top",
|
|
scrub: true,
|
|
onUpdate: (self) => {
|
|
setScrollProgress(self.progress);
|
|
},
|
|
});
|
|
|
|
// Hero content pin - fade out on scroll
|
|
gsap.to(contentRef.current, {
|
|
y: -120,
|
|
opacity: 0,
|
|
scale: 0.95,
|
|
ease: "power2.inOut",
|
|
scrollTrigger: {
|
|
trigger: heroRef.current,
|
|
start: "top top",
|
|
end: "40% top",
|
|
scrub: 1.2,
|
|
},
|
|
});
|
|
|
|
// Hero visual scale + parallax
|
|
gsap.to(".hero-visual", {
|
|
scale: 1.25,
|
|
y: 80,
|
|
ease: "power2.inOut",
|
|
scrollTrigger: {
|
|
trigger: heroRef.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: 50, scale: 0.95 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
duration: 1.2,
|
|
ease: "power3.out",
|
|
delay: i * 0.15,
|
|
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, i) => {
|
|
gsap.to(el, {
|
|
y: -100 - i * 20,
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
});
|
|
|
|
// Scroll indicator fade on scroll
|
|
gsap.to(".scroll-indicator", {
|
|
y: 20,
|
|
opacity: 0,
|
|
scrollTrigger: {
|
|
trigger: heroRef.current,
|
|
start: "10% top",
|
|
end: "30% top",
|
|
scrub: 1,
|
|
},
|
|
});
|
|
|
|
// Staggered text reveal on scroll for other sections
|
|
gsap.utils.toArray<Element>(".reveal-text").forEach((el) => {
|
|
gsap.fromTo(
|
|
el,
|
|
{ opacity: 0, y: 60, skewY: 3 },
|
|
{
|
|
opacity: 1,
|
|
y: 0,
|
|
skewY: 0,
|
|
duration: 1.2,
|
|
ease: "power3.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
end: "top 50%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
// Scale reveal for cards
|
|
gsap.utils.toArray<Element>(".reveal-scale").forEach((el, i) => {
|
|
gsap.fromTo(
|
|
el,
|
|
{ opacity: 0, scale: 0.85, y: 50 },
|
|
{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
duration: 0.8,
|
|
delay: i * 0.1,
|
|
ease: "back.out(1.4)",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
toggleActions: "play none none reverse",
|
|
},
|
|
}
|
|
);
|
|
});
|
|
|
|
// Counter animations - fixed: use reliable proxy object (avoids textContent tween pitfalls that left counters at 0)
|
|
// + always scoped + fallback path (though reduced handled above) + !gsap guard per requirements
|
|
const counterElements = gsap.utils.toArray<Element>(".counter-animate");
|
|
const hasGSAP = typeof gsap !== "undefined" && typeof gsap.to === "function";
|
|
counterElements.forEach((el) => {
|
|
const targetStr = el.getAttribute("data-target") || "0";
|
|
const target = parseInt(targetStr, 10);
|
|
el.textContent = "0"; // ensure start
|
|
|
|
if (hasGSAP && gsap) {
|
|
const obj = { val: 0 };
|
|
gsap.to(obj, {
|
|
val: target,
|
|
duration: 2.5,
|
|
ease: "power2.out",
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top 85%",
|
|
toggleActions: "play none none none",
|
|
},
|
|
onUpdate: () => {
|
|
if (el.textContent !== null) {
|
|
el.textContent = Math.floor(obj.val).toLocaleString();
|
|
}
|
|
},
|
|
});
|
|
} else {
|
|
// pure fallback using IO + rAF (IntersectionObserver + requestAnimationFrame) if no GSAP
|
|
const io = new IntersectionObserver((entries) => {
|
|
if (entries[0]?.isIntersecting) {
|
|
io.disconnect();
|
|
const startTime = Date.now();
|
|
const dur = 2000;
|
|
const tick = () => {
|
|
const p = Math.min((Date.now() - startTime) / dur, 1);
|
|
const eased = 1 - Math.pow(1 - p, 3);
|
|
const val = Math.floor(target * eased);
|
|
el.textContent = val.toLocaleString();
|
|
if (p < 1) requestAnimationFrame(tick);
|
|
else el.textContent = target.toLocaleString();
|
|
};
|
|
tick();
|
|
}
|
|
}, { threshold: 0.3 });
|
|
io.observe(el);
|
|
}
|
|
});
|
|
}, containerRef);
|
|
|
|
return () => ctx.revert();
|
|
}, [mounted]);
|
|
|
|
return (
|
|
<>
|
|
{/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────────── */}
|
|
<div className="fixed top-0 left-0 right-0 h-1 z-[1000] bg-white/10">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-amber-500 via-amber-400 to-sage-500"
|
|
style={{
|
|
transform: `scaleX(${scrollProgress})`,
|
|
transformOrigin: "left",
|
|
transition: "transform 0.1s ease-out",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* ─── HERO SECTION - SCROLL-DRIVEN PIN ───────────────────────────── */}
|
|
{/* containerRef wraps animated sections for proper GSAP context scope (fixes "Invalid scope" + missing targets) */}
|
|
<div ref={containerRef}>
|
|
<section
|
|
ref={heroRef}
|
|
className="hero-section relative min-h-screen flex items-center overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(180deg, #faf8f5 0%, #fef7f0 50%, #fdf6f0 100%)",
|
|
}}
|
|
>
|
|
{/* ─── PARALLAX BACKGROUND LAYERS ─────────────────────────────────────── */}
|
|
<div className="parallax-bg-layer absolute inset-0 pointer-events-none">
|
|
{/* Gradient orbs */}
|
|
<div className="parallax-float absolute top-20 right-20 w-80 h-80 rounded-full opacity-30 blur-3xl"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(201, 122, 62, 0.4) 0%, transparent 70%)",
|
|
animation: "hs-float-slow 900ms ease-in-out infinite",
|
|
}} />
|
|
<div className="parallax-float absolute bottom-40 left-10 w-96 h-96 rounded-full opacity-25 blur-3xl"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(107, 185, 165, 0.4) 0%, transparent 70%)",
|
|
animation: "hs-float-slow-delayed 950ms ease-in-out infinite",
|
|
}} />
|
|
|
|
{/* Grid pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(#4a7c94 1px, transparent 1px),
|
|
linear-gradient(90deg, #4a7c94 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "80px 80px",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* ─── HERO CONTENT ────────────────────────────────────────────────────── */}
|
|
<div
|
|
ref={contentRef}
|
|
className="container mx-auto px-4 sm:px-6 lg:px-16 py-16 sm:py-24 lg:py-32 relative z-10"
|
|
>
|
|
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[70vh] lg:min-h-[80vh]">
|
|
|
|
{/* Left Column - Animated Content */}
|
|
<div className="space-y-6 sm:space-y-8 lg:space-y-10 order-2 lg:order-1">
|
|
{/* Animated Badge */}
|
|
<div className="hero-reveal hero-badge inline-flex items-center gap-2 sm:gap-3 px-3 sm:px-6 py-2 sm:py-3 rounded-full border text-xs sm:text-sm" style={{
|
|
borderColor: "#c97a3e",
|
|
background: "rgba(201, 122, 62, 0.08)",
|
|
}}>
|
|
<span className="w-2 h-2 sm:w-3 sm:h-3 rounded-full animate-pulse-glow" style={{ backgroundColor: "#c97a3e" }} />
|
|
<span className="text-xs sm:text-sm font-semibold tracking-wide" style={{ color: "#c97a3e" }}>
|
|
Farm-Fresh Delivery Platform
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main Headline - Apple-style reveal */}
|
|
<div className="hero-reveal hero-title space-y-2">
|
|
<h1
|
|
className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold leading-[0.9] tracking-tighter"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#1a1a1a",
|
|
}}
|
|
>
|
|
<span className="block text-gradient-sage">From Field</span>
|
|
<span className="block mt-2 text-gradient-sage">To Fresh</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Subtext */}
|
|
<p
|
|
className="hero-reveal hero-subtitle text-lg sm:text-xl md:text-2xl max-w-xl leading-relaxed"
|
|
style={{
|
|
fontFamily: "var(--font-manrope)",
|
|
color: "#4a6d56",
|
|
fontWeight: 400,
|
|
}}
|
|
>
|
|
We connect produce farms with reliable distribution networks,
|
|
ensuring your harvest reaches markets faster and fresher than ever.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="hero-reveal hero-cta flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-5">
|
|
<Link
|
|
href="/login"
|
|
className="group relative inline-flex items-center justify-center gap-3 px-6 sm:px-8 py-4 sm:py-5 rounded-2xl font-semibold text-base sm:text-lg overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
|
|
color: "white",
|
|
boxShadow: "0 8px 32px rgba(26, 77, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15)",
|
|
transition: "transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = "translateY(-3px)";
|
|
e.currentTarget.style.boxShadow = "0 12px 40px rgba(26, 77, 46, 0.45), 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(26, 77, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15)";
|
|
}}
|
|
>
|
|
<span>Start Your Route</span>
|
|
<svg className="w-5 h-5 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>
|
|
</Link>
|
|
<Link
|
|
href="/brands"
|
|
className="group inline-flex items-center justify-center gap-3 px-6 sm:px-8 py-4 sm:py-5 rounded-2xl font-semibold text-base sm:text-lg border-2"
|
|
style={{
|
|
color: "#1a4d2e",
|
|
borderColor: "#1a4d2e",
|
|
background: "rgba(26, 77, 46, 0.03)",
|
|
transition: "background 0.3s ease, color 0.3s ease",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.background = "#1a4d2e";
|
|
e.currentTarget.style.color = "white";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.background = "rgba(26, 77, 46, 0.03)";
|
|
e.currentTarget.style.color = "#1a4d2e";
|
|
}}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<span>Browse Farms</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="hero-reveal hero-stats flex flex-wrap gap-6 sm:gap-8 pt-6 sm:pt-8">
|
|
{[
|
|
{ stat: "500+", label: "Farm Brands" },
|
|
{ stat: "98%", label: "On-Time" },
|
|
{ stat: "50K+", label: "Deliveries" },
|
|
].map((item) => (
|
|
<div key={item.label} className="text-center">
|
|
<div
|
|
className="text-2xl sm:text-3xl lg:text-4xl font-bold"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#1a4d2e",
|
|
}}
|
|
>
|
|
{item.stat}
|
|
</div>
|
|
<div className="text-xs sm:text-sm font-medium" style={{ color: "#6b8f71" }}>
|
|
{item.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column - Hero Visual */}
|
|
<div className="hero-visual relative lg:h-[500px] xl:h-[700px]">
|
|
{/* SVG Route Map Visual */}
|
|
<svg
|
|
viewBox="0 0 500 500"
|
|
className="w-full h-full"
|
|
style={{ maxHeight: "500px", maxWidth: "100%", filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.08))" }}
|
|
>
|
|
<defs>
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(107, 143, 113, 0.15)" strokeWidth="1" />
|
|
</pattern>
|
|
<linearGradient id="routeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#c97a3e" />
|
|
<stop offset="50%" stopColor="#1a4d2e" />
|
|
<stop offset="100%" stopColor="#6b8f71" />
|
|
</linearGradient>
|
|
<filter id="glow">
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<rect x="40" y="40" width="420" height="420" rx="24" fill="rgba(107, 143, 113, 0.06)" stroke="rgba(107, 143, 113, 0.2)" strokeWidth="1" />
|
|
<rect x="40" y="40" width="420" height="420" rx="24" fill="url(#grid)" />
|
|
|
|
{/* Animated Route Path */}
|
|
<path
|
|
d="M 80 400 Q 140 360, 180 280 T 260 180 Q 320 120, 400 80"
|
|
fill="none"
|
|
stroke="url(#routeGradient)"
|
|
strokeWidth="6"
|
|
strokeLinecap="round"
|
|
filter="url(#glow)"
|
|
className="route-path-animate"
|
|
style={{
|
|
strokeDasharray: "1000",
|
|
strokeDashoffset: "1000",
|
|
animation: "hs-draw-route 950ms ease-out forwards 0.5s",
|
|
}}
|
|
/>
|
|
|
|
{/* Secondary Route */}
|
|
<path
|
|
d="M 80 400 Q 200 440, 320 380 T 440 280"
|
|
fill="none"
|
|
stroke="#6b8f71"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
strokeDasharray="600"
|
|
strokeDashoffset="600"
|
|
style={{ animation: "hs-draw-route 950ms ease-out forwards 1s" }}
|
|
/>
|
|
|
|
{/* Farm Location - Animated Pulse */}
|
|
<g className="parallax-float">
|
|
<circle cx="80" cy="400" r="35" fill="rgba(26, 77, 46, 0.1)" className="animate-ping" style={{ animationDuration: "950ms" }} />
|
|
<circle cx="80" cy="400" r="28" fill="rgba(26, 77, 46, 0.15)" />
|
|
<circle cx="80" cy="400" r="20" fill="#1a4d2e" />
|
|
<path d="M 80 390 L 80 410 M 72 398 L 80 390 L 88 398" stroke="#faf8f5" strokeWidth="2.5" strokeLinecap="round" />
|
|
</g>
|
|
|
|
{/* Hub Location */}
|
|
<g className="parallax-float">
|
|
<circle cx="260" cy="180" r="40" fill="rgba(201, 122, 62, 0.1)" className="animate-ping" style={{ animationDuration: "950ms" }} />
|
|
<circle cx="260" cy="180" r="32" fill="rgba(201, 122, 62, 0.15)" />
|
|
<circle cx="260" cy="180" r="22" fill="#c97a3e" />
|
|
<rect x="250" y="173" width="20" height="14" rx="3" fill="#faf8f5" />
|
|
</g>
|
|
|
|
{/* Stop Points */}
|
|
{[
|
|
{ x: 180, y: 280 },
|
|
{ x: 360, y: 120 },
|
|
{ x: 420, y: 90 },
|
|
].map((stop, i) => (
|
|
<g key={i} className="parallax-float">
|
|
<circle cx={stop.x} cy={stop.y} r="18" fill="rgba(250, 248, 245, 0.9)" stroke="#6b8f71" strokeWidth="2" />
|
|
<circle cx={stop.x} cy={stop.y} r="10" fill="#6b8f71" />
|
|
</g>
|
|
))}
|
|
|
|
{/* Decorative Trees */}
|
|
{[[60, 100], [440, 360], [50, 440], [450, 180]].map((coords, i) => (
|
|
<circle
|
|
key={i}
|
|
cx={coords[0]}
|
|
cy={coords[1]}
|
|
r="10"
|
|
fill="rgba(107, 143, 113, 0.3)"
|
|
className="parallax-float"
|
|
/>
|
|
))}
|
|
|
|
{/* Compass */}
|
|
<g transform="translate(420, 420)">
|
|
<circle cx="0" cy="0" r="30" fill="rgba(26, 77, 46, 0.08)" stroke="#1a4d2e" strokeWidth="1.5" />
|
|
<path d="M 0 -22 L 5 0 L 0 6 L -5 0 Z" fill="#c97a3e" />
|
|
<path d="M 0 22 L 5 0 L 0 -6 L -5 0 Z" fill="#6b8f71" />
|
|
<text x="0" y="-30" textAnchor="middle" fill="#1a4d2e" fontSize="12" fontWeight="700">N</text>
|
|
</g>
|
|
</svg>
|
|
|
|
{/* Floating Cards */}
|
|
<div className="absolute top-4 sm:top-12 -left-2 sm:-left-8 parallax-float hidden sm:block" style={{ animation: "float 950ms ease-in-out infinite" }}>
|
|
<div
|
|
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
|
|
style={{
|
|
background: "linear-gradient(135deg, rgba(201, 122, 62, 0.95) 0%, rgba(247, 129, 130, 0.9) 100%)",
|
|
borderColor: "rgba(247, 129, 130, 0.5)",
|
|
boxShadow: "0 12px 40px rgba(232, 168, 124, 0.4), 0 0 30px rgba(247, 129, 130, 0.2)",
|
|
}}
|
|
>
|
|
<div className="text-2xl sm:text-3xl font-bold text-white">2.4T</div>
|
|
<div className="text-xs sm:text-sm text-white/90">Miles Saved</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-16 sm:bottom-24 -right-2 sm:-right-4 parallax-float hidden sm:block" style={{ animation: "float-delayed 950ms ease-in-out infinite" }}>
|
|
<div
|
|
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
|
|
style={{
|
|
background: "linear-gradient(135deg, rgba(107, 185, 165, 0.95) 0%, rgba(133, 210, 197, 0.9) 100%)",
|
|
borderColor: "rgba(133, 210, 197, 0.5)",
|
|
boxShadow: "0 12px 40px rgba(107, 185, 165, 0.4), 0 0 30px rgba(133, 210, 197, 0.2)",
|
|
}}
|
|
>
|
|
<div className="text-2xl sm:text-3xl font-bold text-white">12hrs</div>
|
|
<div className="text-xs sm:text-sm text-white/90">Avg Delivery</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-1/3 sm:top-1/2 -right-4 sm:-right-12 parallax-float hidden sm:block" style={{ animation: "float 950ms ease-in-out infinite 1s" }}>
|
|
<div
|
|
className="rounded-2xl p-3 sm:p-4 shadow-xl border flex items-center gap-2 sm:gap-3"
|
|
style={{
|
|
background: "linear-gradient(135deg, rgba(245, 199, 126, 0.95) 0%, rgba(201, 162, 80, 0.9) 100%)",
|
|
borderColor: "rgba(245, 199, 126, 0.6)",
|
|
boxShadow: "0 8px 32px rgba(245, 199, 126, 0.4)",
|
|
}}
|
|
>
|
|
<span className="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-white animate-pulse" />
|
|
<span className="text-xs sm:text-sm font-bold text-white/90">Live Tracking</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ─── SCROLL INDICATOR ────────────────────────────────────────────────── */}
|
|
<button
|
|
type="button"
|
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") scrollToContent(); }}
|
|
className="scroll-indicator absolute bottom-12 left-1/2 -translate-x-1/2 flex flex-col items-center gap-4 cursor-pointer bg-transparent border-0 p-0"
|
|
onClick={scrollToContent}
|
|
>
|
|
<span className="text-xs font-semibold tracking-[0.2em] uppercase" style={{ color: "#6b8f71" }}>
|
|
Scroll to explore
|
|
</span>
|
|
<div className="relative w-8 h-14 rounded-full border-2" style={{ borderColor: "#6b8f71" }}>
|
|
<div
|
|
className="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-4 rounded-full"
|
|
style={{
|
|
backgroundColor: "#1a4d2e",
|
|
animation: "hs-scroll-indicator 950ms ease-in-out infinite",
|
|
}}
|
|
/>
|
|
</div>
|
|
</button>
|
|
|
|
{/* Decorative leaves */}
|
|
<div className="parallax-float absolute bottom-32 left-16 opacity-15" style={{ animationDelay: "0.5s" }}>
|
|
<svg className="w-20 h-20" viewBox="0 0 60 60" fill="none">
|
|
<path d="M30 5 C45 15, 50 35, 30 55 C10 35, 15 15, 30 5" fill="#6b8f71" />
|
|
<path d="M30 5 L30 55" stroke="#1a4d2e" strokeWidth="2" />
|
|
</svg>
|
|
</div>
|
|
<div className="parallax-float absolute top-40 right-24 opacity-12" style={{ animationDelay: "1s" }}>
|
|
<svg className="w-16 h-16" viewBox="0 0 40 40" fill="none">
|
|
<path d="M20 3 C30 10, 33 23, 20 37 C7 23, 10 10, 20 3" fill="#c97a3e" />
|
|
<path d="M20 3 L20 37" stroke="#1a4d2e" strokeWidth="1.5" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── STORY SECTION - SCROLL-DRIVEN REVEAL ──────────────────────────── */}
|
|
<section id="story" className="relative" style={{ background: "#1a1a1a" }}>
|
|
{/* Reduced from 300vh to avoid "long blank scroll regions" complaint while keeping cinematic sticky scroll effect */}
|
|
<div className="relative" style={{ minHeight: "140vh" }}>
|
|
{/* Sticky Container */}
|
|
<div
|
|
className="sticky top-0 h-screen flex items-center justify-center overflow-hidden"
|
|
>
|
|
{/* Background gradient */}
|
|
<div className="absolute inset-0" style={{
|
|
background: "radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26, 77, 46, 0.15) 0%, #1a1a1a 70%)",
|
|
}} />
|
|
|
|
<div className="container mx-auto px-8 text-center relative z-10 max-w-4xl">
|
|
<div className="mb-8 reveal-scale">
|
|
<span
|
|
className="inline-block text-xs font-bold tracking-[0.3em] uppercase"
|
|
style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
|
|
>
|
|
The Challenge
|
|
</span>
|
|
</div>
|
|
|
|
<div className="reveal-scale" style={{ animationDelay: "0.1s" }}>
|
|
<h2
|
|
className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-8"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#faf8f5",
|
|
}}
|
|
>
|
|
Fresh produce should not
|
|
<br />
|
|
<span style={{ color: "#c97a3e" }}>sit in transit for days</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="reveal-scale" style={{ animationDelay: "0.2s" }}>
|
|
<p
|
|
className="text-xl max-w-2xl mx-auto"
|
|
style={{
|
|
color: "#86868b",
|
|
fontFamily: "var(--font-manrope)",
|
|
lineHeight: 1.7,
|
|
}}
|
|
>
|
|
Traditional distribution means your harvest loses freshness, quality, and value before reaching customers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── FEATURES SECTION - PROGRESSIVE REVEAL ───────────────────────────── */}
|
|
<section
|
|
id="features"
|
|
className="relative py-32 overflow-hidden"
|
|
style={{ background: "linear-gradient(180deg, #faf8f5 0%, #fef7f0 100%)" }}
|
|
>
|
|
{/* Parallax background elements */}
|
|
<div className="parallax-bg absolute inset-0 pointer-events-none">
|
|
<div className="parallax-float absolute top-0 right-0 w-[50%] h-full opacity-10" style={{ animationDelay: "0.3s" }}>
|
|
<div className="absolute top-20 right-20 w-80 h-80 rounded-full" style={{
|
|
background: "radial-gradient(circle, rgba(26, 77, 46, 0.3) 0%, transparent 70%)",
|
|
filter: "blur(8px)",
|
|
}} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-8 relative z-10">
|
|
{/* Section Header */}
|
|
<div className="reveal-scale text-center mb-20">
|
|
<span
|
|
className="inline-block text-xs font-bold tracking-[0.2em] uppercase mb-6"
|
|
style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
|
|
>
|
|
Platform Features
|
|
</span>
|
|
<h2
|
|
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#1a4d2e",
|
|
}}
|
|
>
|
|
Everything You Need
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Feature Cards Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
|
<path d="M2 17l10 5 10-5" />
|
|
<path d="M2 12l10 5 10-5" />
|
|
</svg>
|
|
),
|
|
title: "Product Catalogs",
|
|
description: "Showcase seasonal produce with rich media galleries and real-time availability updates.",
|
|
color: "#1a4d2e",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
|
|
</svg>
|
|
),
|
|
title: "Route Planning",
|
|
description: "Optimize delivery routes with intelligent mapping and real-time scheduling.",
|
|
color: "#c97a3e",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M9 11l3 3L22 4" />
|
|
<path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
|
|
</svg>
|
|
),
|
|
title: "Order Management",
|
|
description: "Track orders from placement through delivery with automated status updates.",
|
|
color: "#7a5c9e",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" />
|
|
</svg>
|
|
),
|
|
title: "Wholesale Portal",
|
|
description: "Give buyers a dedicated space to browse pricing and place bulk orders.",
|
|
color: "#5c8a8f",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
|
<polyline points="22,6 12,13 2,6" />
|
|
</svg>
|
|
),
|
|
title: "Harvest Reach",
|
|
description: "Send email and SMS campaigns about seasonal availability and new harvests.",
|
|
color: "#c97a3e",
|
|
},
|
|
{
|
|
icon: (
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
|
<line x1="18" y1="20" x2="18" y2="10" />
|
|
<line x1="12" y1="20" x2="12" y2="4" />
|
|
<line x1="6" y1="20" x2="6" y2="14" />
|
|
</svg>
|
|
),
|
|
title: "Smart Analytics",
|
|
description: "Uncover sales trends and operational insights with real-time dashboards.",
|
|
color: "#6b8f71",
|
|
},
|
|
].map((feature) => (
|
|
<div
|
|
key={feature.title}
|
|
className="reveal-scale group relative p-8 rounded-3xl transition-all duration-500 cursor-pointer"
|
|
style={{
|
|
background: "linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(250,248,245,0.95) 100%)",
|
|
border: "1px solid rgba(26, 77, 46, 0.08)",
|
|
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.04)",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = "translateY(-8px) scale(1.02)";
|
|
e.currentTarget.style.boxShadow = "0 20px 60px rgba(26, 77, 46, 0.12)";
|
|
e.currentTarget.style.borderColor = feature.color + "40";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = "translateY(0) scale(1)";
|
|
e.currentTarget.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.04)";
|
|
e.currentTarget.style.borderColor = "rgba(26, 77, 46, 0.08)";
|
|
}}
|
|
>
|
|
{/* Icon */}
|
|
<div
|
|
className="w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transition-transform group-hover:scale-110"
|
|
style={{
|
|
background: `linear-gradient(135deg, ${feature.color}15 0%, ${feature.color}08 100%)`,
|
|
color: feature.color,
|
|
border: `1px solid ${feature.color}20`,
|
|
}}
|
|
>
|
|
{feature.icon}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<h3
|
|
className="text-2xl font-bold mb-4"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#1a4d2e",
|
|
}}
|
|
>
|
|
{feature.title}
|
|
</h3>
|
|
<p
|
|
className="text-base leading-relaxed"
|
|
style={{
|
|
color: "#555",
|
|
fontFamily: "var(--font-manrope)",
|
|
}}
|
|
>
|
|
{feature.description}
|
|
</p>
|
|
|
|
{/* Hover Arrow */}
|
|
<div
|
|
className="absolute bottom-8 right-8 w-10 h-10 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300"
|
|
style={{
|
|
background: feature.color,
|
|
transform: "translateX(-10px)",
|
|
}}
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
|
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── STATS SECTION - SCROLL-TRIGGERED COUNTERS ──────────────────────── */}
|
|
<section
|
|
id="stats"
|
|
className="relative py-32 overflow-hidden"
|
|
style={{ background: "#1a4d2e" }}
|
|
>
|
|
{/* Parallax decorative elements */}
|
|
<div className="parallax-bg absolute inset-0 pointer-events-none opacity-[0.03]" style={{
|
|
backgroundImage: "radial-gradient(circle at 25% 25%, white 1px, transparent 1px), radial-gradient(circle at 75% 75%, white 1px, transparent 1px)",
|
|
backgroundSize: "48px 48px",
|
|
}} />
|
|
<div className="absolute top-0 left-0 right-0 h-1" style={{
|
|
background: "linear-gradient(to right, transparent, #c97a3e, transparent)",
|
|
}} />
|
|
|
|
<div className="container mx-auto px-8 relative z-10">
|
|
<div className="text-center mb-16 reveal-scale">
|
|
<span
|
|
className="inline-block text-xs font-bold tracking-[0.2em] uppercase"
|
|
style={{ color: "#c97a3e", fontFamily: "var(--font-manrope)" }}
|
|
>
|
|
Our Impact
|
|
</span>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-12">
|
|
{[
|
|
{ value: 500, suffix: "+", label: "Produce Brands" },
|
|
{ value: 50000, suffix: "+", label: "Orders Delivered" },
|
|
{ value: 98, suffix: "%", label: "On-Time Delivery" },
|
|
{ value: 2000000, prefix: "$", suffix: "+", label: "Weekly Sales" },
|
|
].map((stat, i) => (
|
|
<div key={stat.label} className="reveal-scale text-center" style={{ animationDelay: `${i * 0.1}s` }}>
|
|
<div
|
|
className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-4"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#faf8f5",
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
{stat.prefix && <span style={{ color: "#c97a3e" }}>{stat.prefix}</span>}
|
|
<span className="counter-animate" data-target={stat.value}>0</span>
|
|
<span style={{ color: "#c97a3e" }}>{stat.suffix}</span>
|
|
</div>
|
|
<p
|
|
className="text-base font-medium"
|
|
style={{ color: "#6b8f71", fontFamily: "var(--font-manrope)" }}
|
|
>
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── CTA SECTION - FINAL REVEAL ─────────────────────────────────────── */}
|
|
{/* id="reviews" provides anchor for nav "Reviews" link (matches nav expectations; section contains final messaging) */}
|
|
<section
|
|
id="reviews"
|
|
className="relative py-40 overflow-hidden"
|
|
style={{ background: "linear-gradient(180deg, #faf8f5 0%, #f5f2ed 100%)" }}
|
|
>
|
|
{/* Parallax decorative orbs */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="parallax-float absolute top-1/4 left-1/4 w-96 h-96 rounded-full opacity-10" style={{
|
|
background: "radial-gradient(circle, rgba(26, 77, 46, 0.3) 0%, transparent 70%)",
|
|
filter: "blur(8px)",
|
|
animationDelay: "0.2s",
|
|
}} />
|
|
<div className="parallax-float absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full opacity-10" style={{
|
|
background: "radial-gradient(circle, rgba(201, 122, 62, 0.3) 0%, transparent 70%)",
|
|
filter: "blur(8px)",
|
|
animationDelay: "0.4s",
|
|
}} />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-8 relative z-10">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
{/* Label */}
|
|
<div className="reveal-scale mb-8">
|
|
<span
|
|
className="reveal-text inline-block text-xs font-bold tracking-[0.2em] uppercase px-5 py-2 rounded-full"
|
|
style={{
|
|
color: "#c97a3e",
|
|
background: "rgba(201, 122, 62, 0.1)",
|
|
fontFamily: "var(--font-manrope)",
|
|
}}
|
|
>
|
|
Get Started Today
|
|
</span>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<div className="reveal-scale" style={{ animationDelay: "0.1s" }}>
|
|
<h2
|
|
className="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight mb-8"
|
|
style={{
|
|
fontFamily: "var(--font-fraunces)",
|
|
color: "#1a4d2e",
|
|
}}
|
|
>
|
|
Ready to Transform<br />
|
|
Your Distribution?
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Subtext */}
|
|
<div className="reveal-scale" style={{ animationDelay: "0.2s" }}>
|
|
<p
|
|
className="text-xl mb-12 max-w-xl mx-auto"
|
|
style={{
|
|
color: "#555",
|
|
fontFamily: "var(--font-manrope)",
|
|
}}
|
|
>
|
|
Join hundreds of farms already using Route Commerce to deliver fresher produce faster.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<div className="reveal-scale flex flex-wrap items-center justify-center gap-5" style={{ animationDelay: "0.3s" }}>
|
|
<Link
|
|
href="/login"
|
|
className="group relative inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl overflow-hidden"
|
|
style={{
|
|
background: "linear-gradient(135deg, #1a4d2e 0%, #166534 100%)",
|
|
color: "white",
|
|
boxShadow: "0 8px 32px rgba(26, 77, 46, 0.35)",
|
|
}}
|
|
>
|
|
<span>Start Free Trial</span>
|
|
<svg className="w-6 h-6 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>
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="group inline-flex items-center gap-3 px-10 py-6 rounded-2xl font-semibold text-xl border-2"
|
|
style={{
|
|
color: "#1a4d2e",
|
|
borderColor: "#1a4d2e",
|
|
background: "rgba(26, 77, 46, 0.03)",
|
|
}}
|
|
>
|
|
<span>Contact Sales</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{/* /containerRef for GSAP scope */}
|
|
|
|
{/* (duplicate inline footer removed -- LandingPageWrapper <Footer /> now provides the only footer; eliminates repeated content + trims scroll height) */}
|
|
|
|
{/* ─── GLOBAL STYLES ────────────────────────────────────────────────────── */}
|
|
<style dangerouslySetInnerHTML={{ __html: `
|
|
@keyframes hs-float {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(15px, -20px); }
|
|
66% { transform: translate(-10px, 10px); }
|
|
}
|
|
|
|
@keyframes hs-float-delayed {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
33% { transform: translate(-20px, 15px); }
|
|
66% { transform: translate(10px, -10px); }
|
|
}
|
|
|
|
@keyframes hs-float-slow {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(25px, -30px) scale(1.02); }
|
|
}
|
|
|
|
@keyframes hs-float-slow-delayed {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(-30px, 20px) scale(1.03); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.parallax-float,
|
|
.parallax-float *,
|
|
[class*="animate-"] {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
@keyframes hs-draw-route {
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
@keyframes hs-scroll-indicator {
|
|
0%, 100% { transform: translateY(0); opacity: 1; }
|
|
50% { transform: translateY(6px); opacity: 0.5; }
|
|
}
|
|
|
|
.text-gradient-sage {
|
|
background: linear-gradient(135deg, #1a4d2e 0%, #6b8f71 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.parallax-float {
|
|
will-change: transform;
|
|
}
|
|
|
|
.scroll-progress-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.scroll-progress-bar {
|
|
height: 3px;
|
|
background: linear-gradient(to right, #c97a3e, #6b8f71);
|
|
}
|
|
`}} />
|
|
</>
|
|
);
|
|
} |