`components/ui/spacex-hero.tsx`

101 lines
"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { useEffect, useState } from "react";

export function SpaceXHero({
  onScrollToMain
}: {
  onScrollToMain: () => void
}) {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, 150]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div className="relative h-screen w-full overflow-hidden bg-black">
      {/* Video Background Placeholder - in real app, this would be a video */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/40 z-10" />
        <motion.div
          style={{ y }}
          className="relative h-[120%] w-full"
        >
          <img
            src="https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?w=1920&q=80"
            alt="Space background"
            className="absolute inset-0 h-full w-full object-cover"
          />
        </motion.div>
      </div>

      {/* Content */}
      <motion.div
        style={{ opacity }}
        className="relative z-20 flex h-full flex-col items-center justify-center px-6"
      >
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: mounted ? 1 : 0, y: mounted ? 0 : 30 }}
          transition={{ duration: 1, delay: 0.2 }}
          className="text-center"
        >
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold uppercase tracking-wider text-white mb-6">
            Recreate
            <span className="block mt-2">Your Past</span>
          </h1>
          <p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto font-light tracking-wide">
            Transform childhood memories with AI-powered photo recreation technology
          </p>
        </motion.div>
      </motion.div>

      {/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: mounted ? 1 : 0 }}
        transition={{ delay: 1.5 }}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20"
      >
        <button
          onClick={onScrollToMain}
          className="flex flex-col items-center gap-2 text-white/60 hover:text-white transition-colors"
        >
          <span className="text-xs uppercase tracking-widest">Scroll</span>
          <ChevronDown className="w-6 h-6 animate-bounce" />
        </button>
      </motion.div>

      {/* Stats Bar */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: mounted ? 1 : 0, y: mounted ? 0 : 20 }}
        transition={{ delay: 0.8 }}
        className="absolute bottom-0 left-0 right-0 z-30 border-t border-white/10 bg-black/60 backdrop-blur-md"
      >
        <div className="container mx-auto px-6 py-4">
          <div className="grid grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-2xl md:text-3xl font-bold text-white">10K+</div>
              <div className="text-xs uppercase tracking-wider text-white/60">Photos Recreated</div>
            </div>
            <div>
              <div className="text-2xl md:text-3xl font-bold text-white">98%</div>
              <div className="text-xs uppercase tracking-wider text-white/60">Satisfaction Rate</div>
            </div>
            <div>
              <div className="text-2xl md:text-3xl font-bold text-white">AI</div>
              <div className="text-xs uppercase tracking-wider text-white/60">Powered Tech</div>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  );
}