feat: enhance hero section with modern TV background, auto-sliding videos, and futuristic UI elements

artgolwebdev · artgolwebdev · commit 78970c17ab5d · 2025-08-31T02:26:53.000+03:00
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { motion, useScroll, useTransform } from "motion/react";
 import { useRef } from "react";
-import { ImageWithFallback } from "./figma/ImageWithFallback";
+import { TVBackground } from "./TVBackground";
 
 export function HeroSection() {
   const ref = useRef(null);
@@ -19,19 +19,14 @@ export function HeroSection() {
       data-scroll-section
       className="relative h-screen flex items-center justify-center overflow-hidden bg-black"
     >
-      {/* Parallax Background */}
+      {/* TV Background */}
       <motion.div 
         data-scroll
         data-scroll-speed="-2"
         style={{ y }}
         className="absolute inset-0 w-full h-[120%] -z-10"
       >
-        <ImageWithFallback
-          src="https://images.unsplash.com/photo-1688550181338-e013f4b72aba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxESiUyMGJvb3RoJTIwbmVvbiUyMGxpZ2h0c3xlbnwxfHx8fDE3NTY1ODYyNTB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-          alt="DJ booth with neon lights"
-          className="w-full h-full object-cover opacity-40"
-        />
-        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/80" />
+        <TVBackground />
       </motion.div>
 
       {/* Hero Content */}
@@ -58,9 +53,9 @@ export function HeroSection() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 3.2 }}
-          className="mb-6"
+          className="mb-8"
         >
-          <motion.p
+          <motion.div
             animate={{ 
               opacity: [0.6, 1, 0.6],
               scale: [0.98, 1, 0.98]
@@ -70,37 +65,103 @@ export function HeroSection() {
               repeat: Infinity,
               ease: "easeInOut"
             }}
-            className="text-sm sm:text-base lg:text-lg font-light text-white/70 tracking-wider uppercase"
-            style={{ fontFamily: "'Inter', sans-serif" }}
+            className="relative"
           >
-            Experience the future of sound
-          </motion.p>
+            <motion.p
+              className="text-sm sm:text-base lg:text-lg font-light text-white/70 tracking-wider uppercase mb-2"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Experience the future of sound
+            </motion.p>
+            
+            {/* Futuristic line */}
+            <motion.div
+              animate={{ width: [0, 100, 0] }}
+              transition={{ 
+                duration: 4, 
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+              className="h-px bg-gradient-to-r from-transparent via-[#00FF85] to-transparent mx-auto"
+            />
+          </motion.div>
         </motion.div>
         
-        {/* Decorative Image Below Title */}
+        {/* Futuristic DJ Interface */}
         <motion.div
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
           transition={{ duration: 1, delay: 2.8 }}
           className="mb-8 relative"
         >
-          <div className="w-32 h-32 sm:w-40 sm:h-40 mx-auto relative overflow-hidden rounded-full border-2 border-[#00FF85]/30 backdrop-blur-sm">
-            <ImageWithFallback
-              src="https://images.unsplash.com/photo-1572327918400-f1932eded229?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxESiUyMGhhbmRzJTIwdHVybnRhYmxlcyUyMG1peGluZ3xlbnwxfHx8fDE3NTY1ODczMzV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
-              alt="DJ hands on turntables"
-              className="w-full h-full object-cover opacity-70"
+          <div className="w-48 h-48 sm:w-56 sm:h-56 mx-auto relative">
+            {/* Main Interface Circle */}
+            <div className="w-full h-full relative">
+              {/* Outer Ring */}
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
+                className="absolute inset-0 border-2 border-[#00FF85]/40 rounded-full"
+              />
+              
+              {/* Middle Ring */}
+              <motion.div
+                animate={{ rotate: -360 }}
+                transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+                className="absolute inset-4 border border-[#00FF85]/30 rounded-full"
+              />
+              
+              {/* Inner Ring */}
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
+                className="absolute inset-8 border border-[#00FF85]/20 rounded-full"
+              />
+              
+              {/* Center Element */}
+              <div className="absolute inset-12 bg-gradient-to-br from-[#00FF85]/20 to-black/80 rounded-full flex items-center justify-center backdrop-blur-sm">
+                <motion.div
+                  animate={{ 
+                    scale: [1, 1.1, 1],
+                    opacity: [0.8, 1, 0.8]
+                  }}
+                  transition={{ 
+                    duration: 2, 
+                    repeat: Infinity,
+                    ease: "easeInOut"
+                  }}
+                  className="w-8 h-8 bg-[#00FF85] rounded-full"
+                />
+              </div>
+            </div>
+            
+            {/* Floating Elements */}
+            <motion.div
+              animate={{ 
+                y: [0, -20, 0],
+                rotate: [0, 180, 360]
+              }}
+              transition={{ 
+                duration: 8, 
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+              className="absolute -top-4 -right-4 w-6 h-6 border border-[#00FF85]/60 rounded-full"
+            />
+            
+            <motion.div
+              animate={{ 
+                y: [0, 20, 0],
+                rotate: [360, 180, 0]
+              }}
+              transition={{ 
+                duration: 6, 
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+              className="absolute -bottom-4 -left-4 w-4 h-4 bg-[#00FF85]/40 rounded-full"
             />
-            <div className="absolute inset-0 bg-gradient-to-b from-[#00FF85]/20 to-black/40" />
           </div>
-          {/* Rotating ring around image */}
-          <motion.div
-            animate={{ rotate: 360 }}
-            transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-            className="absolute inset-0 w-32 h-32 sm:w-40 sm:h-40 mx-auto border border-[#00FF85]/50 rounded-full"
-            style={{
-              background: "conic-gradient(from 0deg, transparent, #00FF85, transparent)"
-            }}
-          />
         </motion.div>
 
         <motion.p
@@ -113,7 +174,7 @@ export function HeroSection() {
         </motion.p>
       </motion.div>
 
-      {/* Enhanced Scroll Indicator */}
+      {/* Futuristic Scroll Indicator */}
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -123,24 +184,51 @@ export function HeroSection() {
         <motion.div
           animate={{ y: [0, 10, 0] }}
           transition={{ duration: 2, repeat: Infinity }}
-          className="flex flex-col items-center space-y-2"
+          className="flex flex-col items-center space-y-3"
         >
+          {/* Main Scroll Bar */}
+          <div className="relative">
+            <motion.div
+              animate={{ height: [20, 40, 20] }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="w-1 bg-gradient-to-b from-[#00FF85] to-transparent rounded-full"
+            />
+            <motion.div
+              animate={{ 
+                y: [0, 20, 0],
+                opacity: [0.8, 1, 0.8]
+              }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="absolute top-0 w-3 h-3 bg-[#00FF85] rounded-full -left-1"
+            />
+          </div>
+          
+          {/* SCROLL Text */}
           <motion.div
-            animate={{ y: [0, 12, 0] }}
-            transition={{ duration: 2, repeat: Infinity }}
-            className="w-1 h-3 bg-[#00FF85] rounded-full"
-          />
-          <motion.p
             animate={{ opacity: [0.6, 1, 0.6] }}
             transition={{ duration: 2, repeat: Infinity }}
-            className="text-xs text-white/60 font-medium tracking-wider"
+            className="text-center"
           >
-            SCROLL
-          </motion.p>
+            <motion.p
+              className="text-xs text-white/60 font-medium tracking-widest uppercase"
+            >
+              SCROLL
+            </motion.p>
+            <motion.div
+              animate={{ width: [0, 20, 0] }}
+              transition={{ duration: 2, repeat: Infinity }}
+              className="h-px bg-[#00FF85] mx-auto mt-1"
+            />
+          </motion.div>
+          
+          {/* Bottom Indicator */}
           <motion.div
-            animate={{ y: [0, 8, 0] }}
+            animate={{ 
+              y: [0, 8, 0],
+              scale: [1, 1.2, 1]
+            }}
             transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
-            className="w-1 h-2 bg-white/40 rounded-full"
+            className="w-2 h-2 bg-white/40 rounded-full"
           />
         </motion.div>
       </motion.div>
diff --git a/src/components/TVBackground.tsx b/src/components/TVBackground.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+interface VideoSlide {
+  id: number;
+  src: string;
+  poster: string;
+  alt: string;
+}
+
+const videoSlides: VideoSlide[] = [
+  {
+    id: 1,
+    src: "https://player.vimeo.com/external/434045526.sd.mp4?s=c27eecc69a27dbc4ff2b87d38afc35f1a9e7c02d&profile_id=164&oauth2_token_id=57447761",
+    poster: "https://images.unsplash.com/photo-1688550181338-e013f4b72aba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxESiUyMGJvb3RoJTIwbmVvbiUyMGxpZ2h0c3xlbnwxfHx8fDE3NTY1ODYyNTB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    alt: "DJ booth with neon lights"
+  },
+  {
+    id: 2,
+    src: "https://player.vimeo.com/external/434045526.sd.mp4?s=c27eecc69a27dbc4ff2b87d38afc35f1a9e7c02d&profile_id=164&oauth2_token_id=57447761",
+    poster: "https://images.unsplash.com/photo-1558258021-971dd2148be5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25jZXJ0JTIwY3Jvd2QlMjBlbmVyZ3l8ZW58MXx8fHwxNzU2NTg2MjUxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    alt: "Concert crowd energy"
+  },
+  {
+    id: 3,
+    src: "https://player.vimeo.com/external/434045526.sd.mp4?s=c27eecc69a27dbc4ff2b87d38afc35f1a9e7c02d&profile_id=164&oauth2_token_id=57447761",
+    poster: "https://images.unsplash.com/photo-1604025707953-41752f5793ab?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmdXR1cmlzdGljJTIwcHVycGxlJTIwbGlnaHRzfGVufDF8fHx8MTc1NjU4NjI1MXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+    alt: "Futuristic purple lights"
+  }
+];
+
+export function TVBackground() {
+  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentVideoIndex((prev) => (prev + 1) % videoSlides.length);
+        setIsTransitioning(false);
+      }, 500);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="absolute inset-0 w-full h-full -z-10">
+      {/* TV Frame */}
+      <div className="relative w-full h-full">
+        {/* TV Bezel */}
+        <div className="absolute inset-0 border-8 border-gray-800 rounded-3xl shadow-2xl">
+          {/* TV Screen */}
+          <div className="absolute inset-2 bg-black rounded-2xl overflow-hidden">
+            {/* Video Content */}
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={currentVideoIndex}
+                initial={{ opacity: 0, scale: 1.1 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.5 }}
+                className="w-full h-full relative"
+              >
+                <video
+                  key={videoSlides[currentVideoIndex].id}
+                  autoPlay
+                  muted
+                  loop
+                  poster={videoSlides[currentVideoIndex].poster}
+                  className="w-full h-full object-cover"
+                >
+                  <source src={videoSlides[currentVideoIndex].src} type="video/mp4" />
+                </video>
+                
+                {/* Video Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/30 to-black/80" />
+              </motion.div>
+            </AnimatePresence>
+
+            {/* TV Scan Lines Effect */}
+            <div className="absolute inset-0 pointer-events-none">
+              <div className="w-full h-full bg-gradient-to-b from-transparent via-white/5 to-transparent opacity-30 animate-pulse" />
+            </div>
+          </div>
+
+          {/* TV Stand */}
+          <div className="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-32 h-4 bg-gradient-to-b from-gray-700 to-gray-900 rounded-b-lg" />
+        </div>
+
+        {/* Floating UI Elements */}
+        <motion.div
+          animate={{ 
+            y: [0, -10, 0],
+            opacity: [0.7, 1, 0.7]
+          }}
+          transition={{ 
+            duration: 4, 
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+          className="absolute top-8 right-8 w-16 h-16"
+        >
+          <svg viewBox="0 0 64 64" fill="none" className="w-full h-full">
+            <circle cx="32" cy="32" r="30" stroke="#00FF85" strokeWidth="2" fill="none" opacity="0.6" />
+            <circle cx="32" cy="32" r="20" stroke="#00FF85" strokeWidth="1" fill="none" opacity="0.4" />
+            <circle cx="32" cy="32" r="8" fill="#00FF85" opacity="0.8" />
+          </svg>
+        </motion.div>
+
+        {/* Video Progress Indicator */}
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
+          {videoSlides.map((_, index) => (
+            <motion.div
+              key={index}
+              animate={{
+                scale: currentVideoIndex === index ? 1.2 : 1,
+                opacity: currentVideoIndex === index ? 1 : 0.4
+              }}
+              transition={{ duration: 0.3 }}
+              className={`w-2 h-2 rounded-full ${
+                currentVideoIndex === index ? 'bg-[#00FF85]' : 'bg-white/40'
+              }`}
+            />
+          ))}
+        </div>
+
+        {/* Corner Accents */}
+        <div className="absolute top-4 left-4 w-8 h-8 border-l-2 border-t-2 border-[#00FF85] rounded-tl-lg" />
+        <div className="absolute top-4 right-4 w-8 h-8 border-r-2 border-t-2 border-[#00FF85] rounded-tr-lg" />
+        <div className="absolute bottom-4 left-4 w-8 h-8 border-l-2 border-b-2 border-[#00FF85] rounded-bl-lg" />
+        <div className="absolute bottom-4 right-4 w-8 h-8 border-r-2 border-b-2 border-[#00FF85] rounded-br-lg" />
+      </div>
+    </div>
+  );
+}
