upgrade

2025-11-07 00:46:35 +01:00
parent 2118f002d1
commit c3f837b90f
143 changed files with 4223 additions and 9686 deletions
--- a/frontend/src/components/hero/HeroCarousel.tsx
+++ b/frontend/src/components/hero/HeroCarousel.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+
+const videos = ["dQw4w9WgXcQ", "M7lc1UVf-VE", "aqz-KE-bpKQ"]; // placeholder IDs
+
+export default function HeroCarousel() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setIndex(i => (i + 1) % videos.length), 10000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <section id="home" className="relative min-h-[80vh] md:min-h-[85vh] flex items-center justify-center overflow-hidden">
+      {/* Background Gradient and animated glows */}
+      <div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-slate-900 to-black -z-10" />
+      <div className="absolute inset-0 -z-10 pointer-events-none">
+        <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-fuchsia-600/10 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-violet-400/10 rounded-full blur-3xl animate-pulse delay-2000" />
+      </div>
+
+      <div className="relative container mx-auto px-4 py-10 grid lg:grid-cols-2 gap-10 items-center">
+        {/* Text */}
+        <div className="text-center lg:text-left">
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight">
+            <span className="text-rainbow">Welcome to</span><br />
+            <span className="text-white">Vontor.cz</span>
+          </h1>
+          <p className="text-lg md:text-xl text-gray-300 mb-6">Creative Tech & Design by <span className="text-fuchsia-600 font-semibold">Bruno Vontor</span></p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
+            <a href="#portfolio" className="px-8 py-3 bg-gradient-to-r from-fuchsia-600 to-orange-500 text-white font-semibold rounded-lg hover:shadow-lg hover:shadow-fuchsia-600/25 transition-all duration-300 transform hover:scale-105">View Portfolio</a>
+            <a href="#contact" className="px-8 py-3 border-2 border-violet-400 text-violet-400 font-semibold rounded-lg hover:bg-violet-400 hover:text-white transition-all duration-300">Get In Touch</a>
+          </div>
+        </div>
+
+        {/* Video carousel */}
+        <div className="relative">
+          <div className="relative aspect-video bg-slate-800 rounded-xl overflow-hidden shadow-2xl">
+            {videos.map((v,i) => (
+              <iframe
+                key={v}
+                src={`https://www.youtube.com/embed/${v}?autoplay=${i===index?1:0}&mute=1&loop=1&playlist=${v}`}
+                title={`Slide ${i+1}`}
+                className={`absolute inset-0 w-full h-full transition-opacity duration-700 ${i===index? 'opacity-100':'opacity-0'}`}
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            ))}
+            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" />
+          </div>
+          {/* Indicators */}
+          <div className="flex justify-center mt-4 space-x-2">
+            {videos.map((_,i) => (
+              <button key={i} onClick={()=>setIndex(i)} aria-label={`Go to slide ${i+1}`} className={`w-3 h-3 rounded-full transition-all duration-300 ${i===index? 'bg-fuchsia-600':'bg-gray-600 hover:bg-gray-400'}`} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}