MVp

2025-08-17 13:21:01 +02:00
commit c988d51438
51 changed files with 5742 additions and 0 deletions
--- a/components/VideoShowcase.tsx
+++ b/components/VideoShowcase.tsx
@@ -0,0 +1,142 @@
+'use client'
+import { useEffect, useRef } from 'react'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import Image from 'next/image'
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger)
+}
+
+export default function VideoShowcase() {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const videoRef = useRef<HTMLDivElement>(null)
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    const video = videoRef.current
+    const overlay = overlayRef.current
+    
+    if (!container || !video || !overlay) return
+
+    // Check for reduced motion
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+    const ctx = gsap.context(() => {
+      if (prefersReducedMotion) {
+        // Simple fade for reduced motion
+        gsap.from(video, {
+          opacity: 0,
+          scale: 0.9,
+          duration: 1,
+          scrollTrigger: {
+            trigger: container,
+            start: 'top 60%',
+            toggleActions: 'play none none reverse'
+          }
+        })
+      } else {
+        // Video scale animation on scroll
+        gsap.fromTo(video, 
+          {
+            scale: 0.8,
+            borderRadius: '2rem'
+          },
+          {
+            scale: 1,
+            borderRadius: '1rem',
+            duration: 1,
+            ease: 'power2.out',
+            scrollTrigger: {
+              trigger: container,
+              start: 'top 70%',
+              end: 'center center',
+              scrub: 1
+            }
+          }
+        )
+
+        // Parallax effect on video
+        gsap.to(video, {
+          yPercent: -20,
+          ease: 'none',
+          scrollTrigger: {
+            trigger: container,
+            start: 'top bottom',
+            end: 'bottom top',
+            scrub: true
+          }
+        })
+
+        // Overlay fade out on scroll
+        gsap.to(overlay, {
+          opacity: 0,
+          duration: 0.5,
+          scrollTrigger: {
+            trigger: container,
+            start: 'top 50%',
+            toggleActions: 'play none none reverse'
+          }
+        })
+      }
+    }, container)
+
+    return () => ctx.revert()
+  }, [])
+
+  const handlePlayClick = () => {
+    // Replace with actual video player logic
+    console.log('Play video')
+  }
+
+  return (
+    <section ref={containerRef} className="py-32 px-6 bg-slate-800">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-5xl md:text-6xl font-bold text-white mb-6">
+            See the Magic
+          </h2>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            Watch Michael Peskov in action as he creates moments of wonder and amazement.
+          </p>
+        </div>
+
+        <div 
+          ref={videoRef}
+          className="relative aspect-video rounded-2xl overflow-hidden shadow-2xl"
+          style={{ willChange: 'transform' }}
+        >
+          <Image
+            src="/michael-peskov-magier-taschendieb-453624.jpeg"
+            alt="Michael Peskov showreel preview"
+            fill
+            className="object-cover"
+            priority
+          />
+          
+          {/* Video overlay */}
+          <div 
+            ref={overlayRef}
+            className="absolute inset-0 bg-black/40 flex items-center justify-center cursor-pointer group"
+            onClick={handlePlayClick}
+          >
+            <div className="w-20 h-20 bg-white/90 rounded-full flex items-center justify-center group-hover:bg-white group-hover:scale-110 transition-all duration-300">
+              <div className="w-0 h-0 border-l-[16px] border-l-slate-800 border-y-[12px] border-y-transparent ml-1" />
+            </div>
+          </div>
+
+          {/* Gradient overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-slate-900/50 to-transparent pointer-events-none" />
+        </div>
+
+        {/* Video info */}
+        <div className="text-center mt-8">
+          <p className="text-gray-400">
+            As seen on <span className="text-white font-semibold">SAT.1, WDR, ZDF & Amazon Prime Video</span>
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}