From 8b4eecca74395756d6b423ab7f6aede40540f2e9 Mon Sep 17 00:00:00 2001
From: laveshparyani <laveshparyani01@gmail.com>
Date: Wed, 25 Mar 2026 14:54:39 +0530
Subject: [PATCH 1/2] feat(partners): add 3D curved video carousel to Solo E TV
 profile

This commit adds a panoramic 3D curved slider built with React Three Fiber to showcase the latest YouTube videos from Solo E TV. It includes a custom shader-like curvature effect, horizontal scroll navigation, and a centered video playback modal. Also updates PARTNERS_DATA with the 6 most recent videos fetched from their channel.
---
 apps/web/app/partners/[slug]/page.tsx         |  43 ++++-
 .../sections/partner-video-carousel.tsx       | 174 ++++++++++++++++++
 2 files changed, 215 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/sections/partner-video-carousel.tsx

diff --git a/apps/web/app/partners/[slug]/page.tsx b/apps/web/app/partners/[slug]/page.tsx
index 7e3e973..d9f3d9c 100644
--- a/apps/web/app/partners/[slug]/page.tsx
+++ b/apps/web/app/partners/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { Footer } from "@/components/footer";
 import { PartnerHero } from "@/components/sections/partner-hero";
 import { PartnerBio } from "@/components/sections/partner-bio";
 import { PartnerVideo } from "@/components/sections/partner-video";
+import { PartnerVideoCarousel } from "@/components/sections/partner-video-carousel";
 import { PartnerCTA } from "@/components/sections/partner-cta";
 import { PartnerFeatures } from "@/components/sections/partner-features";
 import { TrustMetricsSection } from "@/components/sections/trust-metrics-section";
@@ -18,6 +19,7 @@ interface PartnerData {
   ctaMessage?: string;
   youtubeId?: string;
   ctaUrl?: string;
+  extraVideos?: { id: string; title: string; thumbnail: string }[];
 }
 
 const PARTNERS_DATA: Record<string, PartnerData> = {
@@ -27,8 +29,39 @@ const PARTNERS_DATA: Record<string, PartnerData> = {
     imageUrl: "/images/soloetv.png",
     quote: "Life is short and working for other people sucks",
     ctaMessage: "Trade with the broker I trust. Join me at RestroFX and experience trading the way it was meant to be. Raw spreads, lightning-fast execution, and a platform that puts you first.",
-    youtubeId: "01loBLlZRHw",
-    ctaUrl: "https://portal.restrofx.com/r/glaPWwHQ"
+    ctaUrl: "https://portal.restrofx.com/r/glaPWwHQ",
+    extraVideos: [
+      {
+        id: "R2djd5ACzPM",
+        thumbnail: "https://i.ytimg.com/vi/R2djd5ACzPM/hqdefault.jpg",
+        title: "i'm finally buying my dream car"
+      },
+      {
+        id: "_QmCh4dNVGE",
+        thumbnail: "https://i.ytimg.com/vi/_QmCh4dNVGE/hqdefault.jpg",
+        title: "Don't Trade Every Pair | Here's What Actually Works"
+      },
+      {
+        id: "DV6cte3H9rc",
+        thumbnail: "https://i.ytimg.com/vi/DV6cte3H9rc/hqdefault.jpg",
+        title: "Pulled $15k profit - here's every single trade (GatesFX)"
+      },
+      {
+        id: "KhLUPlL777U",
+        thumbnail: "https://i.ytimg.com/vi/KhLUPlL777U/hqdefault.jpg",
+        title: "Why You Should Reconsider Trading This year"
+      },
+      {
+        id: "SyC37iKc2wE",
+        thumbnail: "https://i.ytimg.com/vi/SyC37iKc2wE/hqdefault.jpg",
+        title: "I Made $20k Trading Silver | Here's My Exact Strategy"
+      },
+      {
+        id: "rExdi9Vzkxk",
+        thumbnail: "https://i.ytimg.com/vi/rExdi9Vzkxk/hqdefault.jpg",
+        title: "Is Trading Really Worth It? My 6 Years of Results"
+      }
+    ]
   },
   "default": {
     name: "Our Global Partner",
@@ -76,6 +109,12 @@ export default function PartnerProfilePage({ params }: { params: { slug: string
           </ScrollReveal>
         )}
 
+        {partner.extraVideos && (
+          <ScrollReveal>
+            <PartnerVideoCarousel videos={partner.extraVideos} />
+          </ScrollReveal>
+        )}
+
         <div className="py-4 sm:py-6">
           <ScrollReveal>
             <div className="text-center mb-12">
diff --git a/apps/web/components/sections/partner-video-carousel.tsx b/apps/web/components/sections/partner-video-carousel.tsx
new file mode 100644
index 0000000..161cc20
--- /dev/null
+++ b/apps/web/components/sections/partner-video-carousel.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Image, ScrollControls, useScroll, useCursor } from "@react-three/drei";
+import * as THREE from "three";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+interface VideoData {
+  id: string;
+  title: string;
+  thumbnail: string;
+}
+
+const CURVE_AMOUNT = 0.35;
+const GAP = 2.5;
+
+function VideoItem({ 
+  url, 
+  index, 
+  total, 
+  onSelect 
+}: { 
+  url: string; 
+  title: string; 
+  index: number; 
+  total: number;
+  onSelect: () => void;
+}) {
+  const mesh = useRef<THREE.Mesh>(null!);
+  const [hovered, setHovered] = useState(false);
+  useCursor(hovered);
+
+  useFrame(() => {
+    if (!mesh.current) return;
+    
+    // Calculate distance from center based on world position
+    const worldPos = new THREE.Vector3();
+    mesh.current.getWorldPosition(worldPos);
+    const dist = worldPos.x;
+    
+    // Apply curvature in Z and rotation based on X position
+    mesh.current.position.z = -Math.pow(Math.abs(dist), 2) * CURVE_AMOUNT;
+    mesh.current.rotation.y = -dist * 0.15;
+    
+    // Scale up on hover
+    const targetScale = hovered ? 1.1 : 1;
+    mesh.current.scale.lerp(new THREE.Vector3(targetScale, targetScale, 1), 0.1);
+  });
+
+  return (
+    <group position={[index * GAP - (total * GAP) / 2 + GAP / 2, 0, 0]}>
+      <Image
+        ref={mesh}
+        url={url}
+        transparent
+        onPointerOver={() => setHovered(true)}
+        onPointerOut={() => setHovered(false)}
+        onClick={onSelect}
+      >
+        <planeGeometry args={[2, 2.8, 32, 32]} />
+      </Image>
+    </group>
+  );
+}
+
+function Scene({ videos, onVideoSelect }: { videos: VideoData[], onVideoSelect: (id: string) => void }) {
+  const scroll = useScroll();
+  const group = useRef<any>(null!);
+
+  useFrame(() => {
+    if (!group.current) return;
+    // Maps scroll 0-1 to X position
+    const offset = scroll.offset;
+    const scrollWidth = (videos.length - 1) * GAP;
+    group.current.position.x = -offset * scrollWidth + (scrollWidth / 2);
+  });
+
+  return (
+    <group ref={group}>
+      {videos.map((video, i) => (
+        <VideoItem 
+          key={video.id} 
+          url={video.thumbnail} 
+          title={video.title} 
+          index={i} 
+          total={videos.length}
+          onSelect={() => onVideoSelect(video.id)}
+        />
+      ))}
+    </group>
+  );
+}
+
+export function PartnerVideoCarousel({ videos }: { videos: VideoData[] }) {
+  const [selectedVideo, setSelectedVideo] = useState<string | null>(null);
+
+  return (
+    <div className="relative w-full h-[600px] bg-transparent overflow-hidden my-12">
+      <div className="absolute top-0 left-0 w-full z-10 text-center pointer-events-none mt-8">
+        <motion.h2 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          className="text-4xl md:text-6xl font-bold font-heading mb-4"
+        >
+          My Latest <span className="text-primary">Content</span>
+        </motion.h2>
+        <motion.p 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+          className="text-muted-foreground uppercase tracking-widest text-sm"
+        >
+          Scroll to explore • Click to watch
+        </motion.p>
+      </div>
+
+      <Canvas camera={{ position: [0, 0, 5], fov: 35 }}>
+        <ambientLight intensity={0.5} />
+        <pointLight position={[10, 10, 10]} />
+        <ScrollControls horizontal pages={2} damping={0.2}>
+          <Scene videos={videos} onVideoSelect={setSelectedVideo} />
+        </ScrollControls>
+      </Canvas>
+
+      {/* Video Overlay / Modal */}
+      <AnimatePresence>
+        {selectedVideo && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/95 backdrop-blur-xl p-4 md:p-8"
+            onClick={() => setSelectedVideo(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              className="relative w-full max-w-6xl aspect-video rounded-3xl overflow-hidden shadow-2xl border border-white/10"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <iframe
+                src={`https://www.youtube.com/embed/${selectedVideo}?autoplay=1`}
+                className="w-full h-full"
+                allow="autoplay; encrypted-media"
+                allowFullScreen
+              />
+              <button 
+                className="absolute top-6 right-6 p-4 rounded-full bg-black/50 hover:bg-primary text-white transition-colors"
+                onClick={() => setSelectedVideo(null)}
+              >
+                ✕
+              </button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      
+      {/* Scroll Indicators */}
+      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/30">
+        <ArrowLeft size={20} />
+        <div className="w-48 h-[2px] bg-white/10 relative overflow-hidden rounded-full">
+            <motion.div 
+                className="absolute inset-0 bg-primary origin-left"
+                style={{ scaleX: 0.5 }} // This could be linked to scroll state if needed
+            />
+        </div>
+        <ArrowRight size={20} />
+      </div>
+    </div>
+  );
+}

From 40e7cbc2b43908709b447703171a9adaa2e70452 Mon Sep 17 00:00:00 2001
From: laveshparyani <laveshparyani01@gmail.com>
Date: Wed, 25 Mar 2026 15:22:04 +0530
Subject: [PATCH 2/2] feat(partners): add 3D curved video carousel for Solo E
 TV

This commit adds a new CurvedCarousel component using framer-motion to create a high-fidelity 3D cylindrical effect for showcasing videos. It also populates the Solo E TV partner page with the 6 most recent videos from their YouTube channel.
---
 apps/web/app/partners/[slug]/page.tsx         |  51 ++---
 .../sections/partner-video-carousel.tsx       | 174 ------------------
 apps/web/components/ui/curved-carousel.tsx    | 145 +++++++++++++++
 3 files changed, 161 insertions(+), 209 deletions(-)
 delete mode 100644 apps/web/components/sections/partner-video-carousel.tsx
 create mode 100644 apps/web/components/ui/curved-carousel.tsx

diff --git a/apps/web/app/partners/[slug]/page.tsx b/apps/web/app/partners/[slug]/page.tsx
index d9f3d9c..446f0ef 100644
--- a/apps/web/app/partners/[slug]/page.tsx
+++ b/apps/web/app/partners/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { Footer } from "@/components/footer";
 import { PartnerHero } from "@/components/sections/partner-hero";
 import { PartnerBio } from "@/components/sections/partner-bio";
 import { PartnerVideo } from "@/components/sections/partner-video";
-import { PartnerVideoCarousel } from "@/components/sections/partner-video-carousel";
+import { CurvedCarousel } from "@/components/ui/curved-carousel";
 import { PartnerCTA } from "@/components/sections/partner-cta";
 import { PartnerFeatures } from "@/components/sections/partner-features";
 import { TrustMetricsSection } from "@/components/sections/trust-metrics-section";
@@ -19,7 +19,7 @@ interface PartnerData {
   ctaMessage?: string;
   youtubeId?: string;
   ctaUrl?: string;
-  extraVideos?: { id: string; title: string; thumbnail: string }[];
+  featuredVideos?: { id: string; videoId: string; title: string }[];
 }
 
 const PARTNERS_DATA: Record<string, PartnerData> = {
@@ -29,38 +29,15 @@ const PARTNERS_DATA: Record<string, PartnerData> = {
     imageUrl: "/images/soloetv.png",
     quote: "Life is short and working for other people sucks",
     ctaMessage: "Trade with the broker I trust. Join me at RestroFX and experience trading the way it was meant to be. Raw spreads, lightning-fast execution, and a platform that puts you first.",
+    youtubeId: "01loBLlZRHw",
     ctaUrl: "https://portal.restrofx.com/r/glaPWwHQ",
-    extraVideos: [
-      {
-        id: "R2djd5ACzPM",
-        thumbnail: "https://i.ytimg.com/vi/R2djd5ACzPM/hqdefault.jpg",
-        title: "i'm finally buying my dream car"
-      },
-      {
-        id: "_QmCh4dNVGE",
-        thumbnail: "https://i.ytimg.com/vi/_QmCh4dNVGE/hqdefault.jpg",
-        title: "Don't Trade Every Pair | Here's What Actually Works"
-      },
-      {
-        id: "DV6cte3H9rc",
-        thumbnail: "https://i.ytimg.com/vi/DV6cte3H9rc/hqdefault.jpg",
-        title: "Pulled $15k profit - here's every single trade (GatesFX)"
-      },
-      {
-        id: "KhLUPlL777U",
-        thumbnail: "https://i.ytimg.com/vi/KhLUPlL777U/hqdefault.jpg",
-        title: "Why You Should Reconsider Trading This year"
-      },
-      {
-        id: "SyC37iKc2wE",
-        thumbnail: "https://i.ytimg.com/vi/SyC37iKc2wE/hqdefault.jpg",
-        title: "I Made $20k Trading Silver | Here's My Exact Strategy"
-      },
-      {
-        id: "rExdi9Vzkxk",
-        thumbnail: "https://i.ytimg.com/vi/rExdi9Vzkxk/hqdefault.jpg",
-        title: "Is Trading Really Worth It? My 6 Years of Results"
-      }
+    featuredVideos: [
+      { id: "1", videoId: "R2djd5ACzPM", title: "i'm finally buying my dream car" },
+      { id: "2", videoId: "_QmCh4dNVGE", title: "Don't Trade Every Pair | Here's What Actually Works" },
+      { id: "3", videoId: "DV6cte3H9rc", title: "Pulled $15k profit - here's every single trade" },
+      { id: "4", videoId: "KhLUPlL777U", title: "Why You Should Reconsider Trading This year" },
+      { id: "5", videoId: "SyC37iKc2wE", title: "I Made $20k Trading Silver | Here's My Exact Strategy" },
+      { id: "6", videoId: "rExdi9Vzkxk", title: "Is Trading Really Worth It? My 6 Years of Results" }
     ]
   },
   "default": {
@@ -109,9 +86,13 @@ export default function PartnerProfilePage({ params }: { params: { slug: string
           </ScrollReveal>
         )}
 
-        {partner.extraVideos && (
+        {partner.featuredVideos && (
           <ScrollReveal>
-            <PartnerVideoCarousel videos={partner.extraVideos} />
+            <CurvedCarousel 
+              items={partner.featuredVideos} 
+              title="Our Latest Insights"
+              subtitle="Watch the journey unfold. From strategy deep dives to lifestyle updates, stay connected with our partner's latest content."
+            />
           </ScrollReveal>
         )}
 
diff --git a/apps/web/components/sections/partner-video-carousel.tsx b/apps/web/components/sections/partner-video-carousel.tsx
deleted file mode 100644
index 161cc20..0000000
--- a/apps/web/components/sections/partner-video-carousel.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-"use client";
-
-import React, { useRef, useState } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { Image, ScrollControls, useScroll, useCursor } from "@react-three/drei";
-import * as THREE from "three";
-import { motion, AnimatePresence } from "framer-motion";
-import { ArrowLeft, ArrowRight } from "lucide-react";
-
-interface VideoData {
-  id: string;
-  title: string;
-  thumbnail: string;
-}
-
-const CURVE_AMOUNT = 0.35;
-const GAP = 2.5;
-
-function VideoItem({ 
-  url, 
-  index, 
-  total, 
-  onSelect 
-}: { 
-  url: string; 
-  title: string; 
-  index: number; 
-  total: number;
-  onSelect: () => void;
-}) {
-  const mesh = useRef<THREE.Mesh>(null!);
-  const [hovered, setHovered] = useState(false);
-  useCursor(hovered);
-
-  useFrame(() => {
-    if (!mesh.current) return;
-    
-    // Calculate distance from center based on world position
-    const worldPos = new THREE.Vector3();
-    mesh.current.getWorldPosition(worldPos);
-    const dist = worldPos.x;
-    
-    // Apply curvature in Z and rotation based on X position
-    mesh.current.position.z = -Math.pow(Math.abs(dist), 2) * CURVE_AMOUNT;
-    mesh.current.rotation.y = -dist * 0.15;
-    
-    // Scale up on hover
-    const targetScale = hovered ? 1.1 : 1;
-    mesh.current.scale.lerp(new THREE.Vector3(targetScale, targetScale, 1), 0.1);
-  });
-
-  return (
-    <group position={[index * GAP - (total * GAP) / 2 + GAP / 2, 0, 0]}>
-      <Image
-        ref={mesh}
-        url={url}
-        transparent
-        onPointerOver={() => setHovered(true)}
-        onPointerOut={() => setHovered(false)}
-        onClick={onSelect}
-      >
-        <planeGeometry args={[2, 2.8, 32, 32]} />
-      </Image>
-    </group>
-  );
-}
-
-function Scene({ videos, onVideoSelect }: { videos: VideoData[], onVideoSelect: (id: string) => void }) {
-  const scroll = useScroll();
-  const group = useRef<any>(null!);
-
-  useFrame(() => {
-    if (!group.current) return;
-    // Maps scroll 0-1 to X position
-    const offset = scroll.offset;
-    const scrollWidth = (videos.length - 1) * GAP;
-    group.current.position.x = -offset * scrollWidth + (scrollWidth / 2);
-  });
-
-  return (
-    <group ref={group}>
-      {videos.map((video, i) => (
-        <VideoItem 
-          key={video.id} 
-          url={video.thumbnail} 
-          title={video.title} 
-          index={i} 
-          total={videos.length}
-          onSelect={() => onVideoSelect(video.id)}
-        />
-      ))}
-    </group>
-  );
-}
-
-export function PartnerVideoCarousel({ videos }: { videos: VideoData[] }) {
-  const [selectedVideo, setSelectedVideo] = useState<string | null>(null);
-
-  return (
-    <div className="relative w-full h-[600px] bg-transparent overflow-hidden my-12">
-      <div className="absolute top-0 left-0 w-full z-10 text-center pointer-events-none mt-8">
-        <motion.h2 
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          className="text-4xl md:text-6xl font-bold font-heading mb-4"
-        >
-          My Latest <span className="text-primary">Content</span>
-        </motion.h2>
-        <motion.p 
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ delay: 0.2 }}
-          className="text-muted-foreground uppercase tracking-widest text-sm"
-        >
-          Scroll to explore • Click to watch
-        </motion.p>
-      </div>
-
-      <Canvas camera={{ position: [0, 0, 5], fov: 35 }}>
-        <ambientLight intensity={0.5} />
-        <pointLight position={[10, 10, 10]} />
-        <ScrollControls horizontal pages={2} damping={0.2}>
-          <Scene videos={videos} onVideoSelect={setSelectedVideo} />
-        </ScrollControls>
-      </Canvas>
-
-      {/* Video Overlay / Modal */}
-      <AnimatePresence>
-        {selectedVideo && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/95 backdrop-blur-xl p-4 md:p-8"
-            onClick={() => setSelectedVideo(null)}
-          >
-            <motion.div
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
-              className="relative w-full max-w-6xl aspect-video rounded-3xl overflow-hidden shadow-2xl border border-white/10"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <iframe
-                src={`https://www.youtube.com/embed/${selectedVideo}?autoplay=1`}
-                className="w-full h-full"
-                allow="autoplay; encrypted-media"
-                allowFullScreen
-              />
-              <button 
-                className="absolute top-6 right-6 p-4 rounded-full bg-black/50 hover:bg-primary text-white transition-colors"
-                onClick={() => setSelectedVideo(null)}
-              >
-                ✕
-              </button>
-            </motion.div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-      
-      {/* Scroll Indicators */}
-      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/30">
-        <ArrowLeft size={20} />
-        <div className="w-48 h-[2px] bg-white/10 relative overflow-hidden rounded-full">
-            <motion.div 
-                className="absolute inset-0 bg-primary origin-left"
-                style={{ scaleX: 0.5 }} // This could be linked to scroll state if needed
-            />
-        </div>
-        <ArrowRight size={20} />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/components/ui/curved-carousel.tsx b/apps/web/components/ui/curved-carousel.tsx
new file mode 100644
index 0000000..9a7c1ab
--- /dev/null
+++ b/apps/web/components/ui/curved-carousel.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import { Play } from "lucide-react";
+
+interface CarouselItem {
+  id: string;
+  title: string;
+  videoId: string;
+}
+
+interface CurvedCarouselProps {
+  items: CarouselItem[];
+  title?: string;
+  subtitle?: string;
+}
+
+export function CurvedCarousel({ items, title, subtitle }: CurvedCarouselProps) {
+  const [active, setActive] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const x = useMotionValue(0);
+  
+  // Spring for smooth dragging
+  const springX = useSpring(x, { stiffness: 300, damping: 30 });
+  
+  // Calculate the rotation based on the number of items
+  // We want to map the drag distance to an index
+  const itemWidth = 300; // estimated width of a card
+  
+  const handleDragEnd = (_: any, info: any) => {
+    // Determine the closest index based on the drag offset
+    const velocity = info.velocity.x;
+    
+    // Simple snapping
+    if (Math.abs(velocity) > 500) {
+        if (velocity > 0) setActive((prev) => Math.max(0, prev - 1));
+        else setActive((prev) => Math.min(items.length - 1, prev + 1));
+    } else {
+        const index = Math.round(-x.get() / itemWidth);
+        setActive(Math.max(0, Math.min(items.length - 1, index)));
+    }
+  };
+
+  useEffect(() => {
+    x.set(-active * itemWidth);
+  }, [active, x]);
+
+  return (
+    <section className="py-24 bg-transparent overflow-hidden perspective-1000">
+      <div className="container px-4 md:px-6 mb-12 text-center">
+        {title && <h2 className="text-4xl md:text-6xl font-bold font-heading mb-4">{title}</h2>}
+        {subtitle && <p className="text-muted-foreground text-lg md:text-xl max-w-2xl mx-auto">{subtitle}</p>}
+      </div>
+
+      <div 
+        ref={containerRef}
+        className="relative h-[500px] flex items-center justify-center cursor-grab active:cursor-grabbing"
+      >
+        <motion.div
+          drag="x"
+          dragConstraints={{ left: -(items.length - 1) * itemWidth, right: 0 }}
+          style={{ x }}
+          onDragEnd={handleDragEnd}
+          className="flex gap-8 items-center"
+        >
+          {items.map((item, index) => {
+            // Map the global x motion value to local item transforms
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const itemRotation = useTransform(springX, 
+                [- (index + 1) * itemWidth, - index * itemWidth, - (index - 1) * itemWidth], 
+                [-45, 0, 45]
+            );
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const itemScale = useTransform(springX, 
+                [- (index + 1) * itemWidth, - index * itemWidth, - (index - 1) * itemWidth], 
+                [0.8, 1, 0.8]
+            );
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const itemZ = useTransform(springX, 
+                [- (index + 1) * itemWidth, - index * itemWidth, - (index - 1) * itemWidth], 
+                [-200, 0, -200]
+            );
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const itemOpacity = useTransform(springX, 
+                [- (index + 2) * itemWidth, - index * itemWidth, - (index - 2) * itemWidth], 
+                [0, 1, 0]
+            );
+
+            return (
+              <motion.div
+                key={item.id}
+                style={{
+                  width: itemWidth,
+                  height: 400,
+                  rotateY: itemRotation,
+                  scale: itemScale,
+                  z: itemZ,
+                  opacity: itemOpacity,
+                }}
+                className="relative flex-shrink-0 group rounded-3xl overflow-hidden border border-white/10 shadow-2xl bg-black"
+                onClick={() => window.open(`https://youtube.com/watch?v=${item.videoId}`, '_blank')}
+              >
+                <Image
+                  src={`https://i.ytimg.com/vi/${item.videoId}/maxresdefault.jpg`}
+                  alt={item.title}
+                  fill
+                  className="object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-500"
+                />
+                
+                {/* Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent flex flex-col justify-end p-6">
+                  <motion.div
+                    initial={{ y: 20, opacity: 0 }}
+                    whileInView={{ y: 0, opacity: 1 }}
+                    className="p-4 rounded-full bg-primary/20 backdrop-blur-md border border-primary/40 w-fit mb-4 group-hover:scale-110 transition-transform duration-300"
+                  >
+                    <Play className="w-6 h-6 text-primary fill-primary" />
+                  </motion.div>
+                  <h3 className="text-white font-bold text-lg leading-tight group-hover:text-primary transition-colors duration-300">
+                    {item.title}
+                  </h3>
+                </div>
+
+                {/* Glassmorphic Reflection Overlay */}
+                <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+              </motion.div>
+            );
+          })}
+        </motion.div>
+      </div>
+
+      <div className="flex justify-center gap-2 mt-8">
+        {items.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => setActive(i)}
+            className={`h-2 rounded-full transition-all duration-300 ${active === i ? 'w-8 bg-primary' : 'w-2 bg-neutral-800'}`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}