← back to Watches

src/components/LuxuryHero.jsx

163 lines

import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

/**
 * Luxury Hero Section - Omega.com inspired
 * Features: Cinematic reveal, parallax effects, gold accents
 */
const LuxuryHero = ({ onExplore }) => {
  const [scrollY, setScrollY] = useState(0);
  const [particles, setParticles] = useState([]);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);

    // Generate particles
    const newParticles = Array.from({ length: 20 }, (_, i) => ({
      id: i,
      left: Math.random() * 100,
      top: Math.random() * 100,
      delay: Math.random() * 10,
      tx: (Math.random() - 0.5) * 200,
      ty: (Math.random() - 0.5) * 200,
    }));
    setParticles(newParticles);

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Animated particles */}
      {particles.map((particle) => (
        <div
          key={particle.id}
          className="particle"
          style={{
            left: `${particle.left}%`,
            top: `${particle.top}%`,
            animationDelay: `${particle.delay}s`,
            '--tx': `${particle.tx}px`,
            '--ty': `${particle.ty}px`,
          }}
        />
      ))}

      {/* Parallax background layers */}
      <motion.div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.5}px)`,
        }}
      >
        <div className="absolute top-20 left-10 w-96 h-96 bg-gradient-to-br from-orange-500/10 to-transparent rounded-full blur-3xl" />
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-gradient-to-br from-red-500/10 to-transparent rounded-full blur-3xl" />
      </motion.div>

      {/* Main content */}
      <div className="relative z-10 text-center px-4 max-w-6xl mx-auto">
        {/* Luxury watch icon */}
        <motion.div
          initial={{ scale: 0, rotate: -180 }}
          animate={{ scale: 1, rotate: 0 }}
          transition={{ duration: 1.2, type: 'spring', bounce: 0.4 }}
          className="mb-8 inline-block"
        >
          <div className="text-9xl animate-float">
            <span className="text-gold shimmer-gold">⌚</span>
          </div>
        </motion.div>

        {/* Main heading with cinematic reveal */}
        <motion.h1
          className="text-6xl md:text-8xl font-display font-bold mb-6 cinematic-reveal"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.3 }}
        >
          <span className="text-gold">OMEGA</span>
          <br />
          <span className="text-white">Price History</span>
        </motion.h1>

        {/* Subtitle with luxury text reveal */}
        <motion.p
          className="text-xl md:text-2xl font-luxury text-gray-300 mb-4 text-reveal"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.6 }}
        >
          Experience the Legacy of Swiss Excellence
        </motion.p>

        <motion.p
          className="text-base md:text-lg text-gray-400 mb-12 max-w-2xl mx-auto"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.9 }}
        >
          Track the value evolution of 32 iconic Omega timepieces from 1957 to 2024.
          Discover investment insights, price trends, and the enduring craftsmanship
          of the world's most prestigious chronographs.
        </motion.p>

        {/* CTA Buttons with haptic feedback */}
        <motion.div
          className="flex flex-col sm:flex-row gap-6 justify-center items-center"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1.2 }}
        >
          <button
            onClick={onExplore}
            className="btn-luxury haptic-click pulse-glow group"
            aria-label="Explore collection"
          >
            <span className="relative z-10">Explore Collection</span>
          </button>

          <button
            onClick={() => window.scrollTo({ top: window.innerHeight, behavior: 'smooth' })}
            className="btn-luxury btn-luxury-outline haptic-click"
            aria-label="View price analytics"
          >
            <span className="relative z-10">Price Analytics</span>
          </button>
        </motion.div>

        {/* Scroll indicator */}
        <motion.div
          className="absolute bottom-12 left-1/2 transform -translate-x-1/2"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1.5, repeat: Infinity, repeatType: 'reverse', duration: 1.5 }}
        >
          <div className="flex flex-col items-center gap-2">
            <span className="text-gold text-sm tracking-widest uppercase">Scroll</span>
            <svg
              className="w-6 h-6 text-gold"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M19 14l-7 7m0 0l-7-7m7 7V3"
              />
            </svg>
          </div>
        </motion.div>
      </div>

      {/* Decorative elements */}
      <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-gold to-transparent opacity-30" />
      <div className="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-transparent via-gold to-transparent opacity-30" />
    </div>
  );
};

export default LuxuryHero;