fix: restore full landing page with FeaturesAndStats and TestimonialsAndCTA

2026-06-02 15:29:39 +00:00
parent 344c8741da
commit bf4dc09e65
4 changed files with 696 additions and 1 deletions
@@ -0,0 +1,291 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import Image from "next/image";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+interface Product {
+  id: string;
+  name: string;
+  description: string | null;
+  price: string;
+  type: string;
+  imageUrl: string | null;
+}
+
+interface CinematicShowcaseProps {
+  products: Product[];
+  brandSlug?: string;
+}
+
+// Single product card with scroll-driven morphing
+function MorphingProductCard({
+  product,
+  index,
+  isActive,
+}: {
+  product: Product;
+  index: number;
+  isActive: boolean;
+}) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !cardRef.current) return;
+
+    const ctx = gsap.context(() => {
+      // Morphing effect based on scroll position
+      gsap.to(cardRef.current, {
+        scale: isActive ? 1.02 : 0.95,
+        opacity: isActive ? 1 : 0.5,
+        y: isActive ? 0 : index * 20,
+        duration: 0.6,
+        ease: "power3.out",
+      });
+
+      // Subtle rotation for depth
+      gsap.to(cardRef.current, {
+        rotateY: isActive ? 0 : (index % 2 === 0 ? -5 : 5),
+        duration: 0.8,
+        ease: "power2.out",
+      });
+    }, cardRef);
+
+    return () => ctx.revert();
+  }, [isActive, index]);
+
+  return (
+    <div
+      ref={cardRef}
+      className="relative flex-shrink-0 w-[85vw] sm:w-[70vw] md:w-[45vw] lg:w-[35vw]"
+      style={{ perspective: "1000px" }}
+    >
+      <div className="relative aspect-[4/5] rounded-3xl overflow-hidden bg-gradient-to-br from-stone-900 to-stone-950">
+        {/* Image with parallax */}
+        <div ref={imageRef} className="absolute inset-0">
+          {product.imageUrl && (
+            <Image
+              src={product.imageUrl}
+              alt={product.name}
+              fill
+              className="object-cover"
+              style={{
+                transform: isActive ? "scale(1.05)" : "scale(1)",
+                transition: "transform 0.6s ease-out",
+              }}
+            />
+          )}
+          {/* Gradient overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+        </div>
+
+        {/* Content */}
+        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-8">
+          <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-emerald-400/80 mb-2">
+            {product.type}
+          </p>
+          <h3 className="text-xl md:text-2xl font-bold text-white mb-2">
+            {product.name}
+          </h3>
+          {product.description && (
+            <p className="text-sm text-white/60 line-clamp-2 mb-4">
+              {product.description}
+            </p>
+          )}
+          <p className="text-2xl font-black text-white">{product.price}</p>
+        </div>
+
+        {/* Shine effect */}
+        <div
+          className="absolute inset-0 opacity-0 pointer-events-none"
+          style={{
+            background:
+              "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function CinematicShowcase({
+  products,
+  brandSlug = "tuxedo",
+}: CinematicShowcaseProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [scrollProgress, setScrollProgress] = useState(0);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+
+    const ctx = gsap.context(() => {
+      // Scroll-driven product switching
+      const productSwitchTrigger = ScrollTrigger.create({
+        trigger: containerRef.current,
+        start: "top top",
+        end: "bottom bottom",
+        scrub: 1,
+        onUpdate: (self) => {
+          setScrollProgress(self.progress);
+
+          // Calculate which product should be active
+          const progress = self.progress;
+          const productCount = products.length;
+          const segmentSize = 1 / productCount;
+
+          let newIndex = Math.min(
+            Math.floor(progress / segmentSize),
+            productCount - 1
+          );
+          newIndex = Math.max(0, newIndex);
+
+          setActiveIndex(newIndex);
+        },
+      });
+
+      // Parallax for background text
+      gsap.to(".showcase-headline", {
+        y: -100,
+        ease: "none",
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top top",
+          end: "bottom bottom",
+          scrub: 1,
+        },
+      });
+
+      // Scale reveal for cards
+      gsap.fromTo(
+        ".product-card-wrapper",
+        { opacity: 0, y: 100, scale: 0.9 },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          duration: 0.8,
+          stagger: 0.15,
+          ease: "back.out(1.4)",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 80%",
+            toggleActions: "play none none reverse",
+          },
+        }
+      );
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, [products.length]);
+
+  if (products.length === 0) return null;
+
+  return (
+    <section
+      ref={containerRef}
+      className="relative bg-stone-950"
+      style={{ height: `${products.length * 100}vh` }}
+    >
+      {/* Sticky container */}
+      <div className="sticky top-0 h-screen overflow-hidden">
+        {/* Background headline with parallax */}
+        <div className="showcase-headline absolute inset-0 flex items-center justify-center pointer-events-none overflow-hidden">
+          <h2
+            className="text-[25vw] font-black text-white/5 leading-none select-none whitespace-nowrap"
+            style={{ transform: "translateY(100px)" }}
+          >
+            HARVEST
+          </h2>
+        </div>
+
+        {/* Progress dots */}
+        <div className="absolute right-8 md:right-12 top-1/2 -translate-y-1/2 z-20 flex flex-col gap-3">
+          {products.map((_, i) => (
+            <div
+              key={i}
+              className={`w-2 h-2 rounded-full transition-all duration-500 ${
+                i === activeIndex
+                  ? "bg-emerald-500 scale-150"
+                  : "bg-white/30 scale-100"
+              }`}
+            />
+          ))}
+        </div>
+
+        {/* Progress bar */}
+        <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/10">
+          <div
+            className="h-full bg-gradient-to-r from-emerald-600 to-amber-500 transition-all duration-300"
+            style={{ width: `${scrollProgress * 100}%` }}
+          />
+        </div>
+
+        {/* Main content */}
+        <div className="relative h-full flex flex-col justify-end pb-24 md:pb-32">
+          {/* Section header */}
+          <div className="absolute top-1/4 left-8 md:left-16 z-10">
+            <p className="text-[11px] font-bold uppercase tracking-[0.3em] text-emerald-500/80 mb-4">
+              This Season&apos;s Harvest
+            </p>
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-white leading-[1.05] max-w-xl">
+              Picked This
+              <br />
+              Morning
+            </h2>
+          </div>
+
+          {/* Product showcase */}
+          <div className="relative w-full overflow-visible">
+            <div
+              className="flex gap-6 px-8 md:px-16"
+              style={{
+                transform: `translateX(${-activeIndex * 15}vw)`,
+                transition: "transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)",
+              }}
+            >
+              {products.map((product, i) => (
+                <div
+                  key={product.id}
+                  className="product-card-wrapper"
+                  style={{
+                    opacity: i === activeIndex ? 1 : 0.3,
+                    transform: `scale(${i === activeIndex ? 1 : 0.85})`,
+                    transition: "all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)",
+                  }}
+                >
+                  <MorphingProductCard
+                    product={product}
+                    index={i}
+                    isActive={i === activeIndex}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Active product info */}
+          <div className="mt-8 px-8 md:px-16 max-w-xl">
+            <div
+              className="transition-all duration-500"
+              style={{ opacity: 1, transform: "translateY(0)" }}
+            >
+              <p className="text-sm text-white/50 mb-2">
+                {products[activeIndex]?.name}
+              </p>
+              <p className="text-xs text-white/30 max-w-md">
+                {products[activeIndex]?.description}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,340 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// Register GSAP plugins
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+interface StickyScrollSectionProps {
+  children: React.ReactNode;
+  height?: string;
+  className?: string;
+}
+
+export default function StickyScrollSection({
+  children,
+  height = "300vh",
+  className = "",
+}: StickyScrollSectionProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isStuck, setIsStuck] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+
+    const ctx = gsap.context(() => {
+      const trigger = ScrollTrigger.create({
+        trigger: containerRef.current,
+        start: "top top",
+        end: "bottom bottom",
+        pin: true,
+        pinSpacing: false,
+        onToggle: (self) => {
+          setIsStuck(self.isActive);
+        },
+      });
+
+      return () => trigger.kill();
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative ${className}`}
+      style={{ height }}
+    >
+      <div
+        className={`sticky top-0 h-screen overflow-hidden transition-all duration-300 ${
+          isStuck ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SCROLL-REVEAL WRAPPER - Layers content as user scrolls
+// ─────────────────────────────────────────────────────────────────────────────
+interface ScrollRevealProps {
+  children: React.ReactNode;
+  className?: string;
+  stagger?: boolean;
+  direction?: "up" | "down" | "left" | "right" | "scale";
+  delay?: number;
+}
+
+export function ScrollReveal({
+  children,
+  className = "",
+  stagger = false,
+  direction = "up",
+  delay = 0,
+}: ScrollRevealProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+
+    const ctx = gsap.context(() => {
+      const elements = containerRef.current?.querySelectorAll("[data-reveal]");
+
+      if (!elements?.length) {
+        // Single child reveal
+        gsap.fromTo(
+          containerRef.current,
+          { opacity: 0, y: 60 },
+          {
+            opacity: 1,
+            y: 0,
+            duration: 1,
+            ease: "power3.out",
+            delay,
+            scrollTrigger: {
+              trigger: containerRef.current,
+              start: "top 80%",
+              toggleActions: "play none none reverse",
+            },
+          }
+        );
+        return;
+      }
+
+      // Staggered reveal
+      const animProps: gsap.TweenVars = { opacity: 0 };
+
+      switch (direction) {
+        case "up":
+          animProps.y = 60;
+          break;
+        case "down":
+          animProps.y = -60;
+          break;
+        case "left":
+          animProps.x = 60;
+          break;
+        case "right":
+          animProps.x = -60;
+          break;
+        case "scale":
+          animProps.scale = 0.9;
+          break;
+      }
+
+      gsap.fromTo(
+        elements,
+        animProps,
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          scale: 1,
+          duration: 0.8,
+          stagger: stagger ? 0.1 : 0,
+          ease: "power3.out",
+          scrollTrigger: {
+            trigger: containerRef.current,
+            start: "top 80%",
+            toggleActions: "play none none reverse",
+          },
+        }
+      );
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, [direction, stagger, delay]);
+
+  return (
+    <div ref={containerRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// PARALLAX LAYER - Depth effect on scroll
+// ─────────────────────────────────────────────────────────────────────────────
+interface ParallaxLayerProps {
+  children: React.ReactNode;
+  speed?: number; // 0-1, higher = more movement
+  className?: string;
+}
+
+export function ParallaxLayer({
+  children,
+  speed = 0.5,
+  className = "",
+}: ParallaxLayerProps) {
+  const layerRef = useRef<HTMLDivElement>(null);
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isClient || !layerRef.current) return;
+
+    const ctx = gsap.context(() => {
+      const moveDistance = speed * 150; // max 150px movement
+
+      gsap.to(layerRef.current, {
+        y: -moveDistance,
+        ease: "none",
+        scrollTrigger: {
+          trigger: layerRef.current,
+          start: "top bottom",
+          end: "bottom top",
+          scrub: 1,
+        },
+      });
+    }, layerRef);
+
+    return () => ctx.revert();
+  }, [isClient, speed]);
+
+  if (!isClient) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return (
+    <div ref={layerRef} className={className}>
+      {children}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// PROGRESS INDICATOR - Shows scroll progress through section
+// ─────────────────────────────────────────────────────────────────────────────
+interface ProgressIndicatorProps {
+  className?: string;
+  color?: string;
+}
+
+export function ProgressIndicator({
+  className = "",
+  color = "#10b981",
+}: ProgressIndicatorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+
+    const ctx = gsap.context(() => {
+      ScrollTrigger.create({
+        trigger: containerRef.current,
+        start: "top top",
+        end: "bottom bottom",
+        scrub: true,
+        onUpdate: (self) => {
+          setProgress(self.progress);
+        },
+      });
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div ref={containerRef} className={`relative ${className}`}>
+      <div className="sticky top-0 h-screen flex items-center justify-center">
+        <div
+          className="w-1 h-64 bg-white/10 rounded-full overflow-hidden"
+        >
+          <div
+            className="w-full rounded-full transition-all duration-100"
+            style={{
+              height: `${progress * 100}%`,
+              background: color,
+              boxShadow: `0 0 20px ${color}`,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// FADE ON SCROLL - Elements that fade/scale as user scrolls
+// ─────────────────────────────────────────────────────────────────────────────
+interface FadeOnScrollProps {
+  children: React.ReactNode;
+  className?: string;
+  from?: "top" | "bottom" | "left" | "right";
+  distance?: number;
+  duration?: number;
+}
+
+export function FadeOnScroll({
+  children,
+  className = "",
+  from = "bottom",
+  distance = 100,
+  duration = 1,
+}: FadeOnScrollProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !elementRef.current) return;
+
+    const ctx = gsap.context(() => {
+      let fromProps: gsap.TweenVars = { opacity: 0 };
+      let fromY = 0;
+      let fromX = 0;
+
+      switch (from) {
+        case "top":
+          fromY = distance;
+          break;
+        case "bottom":
+          fromY = -distance;
+          break;
+        case "left":
+          fromX = distance;
+          break;
+        case "right":
+          fromX = -distance;
+          break;
+      }
+
+      fromProps.y = fromY;
+      fromProps.x = fromX;
+
+      gsap.fromTo(
+        elementRef.current,
+        fromProps,
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          duration,
+          ease: "power3.out",
+          scrollTrigger: {
+            trigger: elementRef.current,
+            start: "top 85%",
+            toggleActions: "play none none reverse",
+          },
+        }
+      );
+    }, elementRef);
+
+    return () => ctx.revert();
+  }, [from, distance, duration]);
+
+  return (
+    <div ref={elementRef} className={className}>
+      {children}
+    </div>
+  );
+}