Merge pull request #4 from stackified/dev

feat(partners): add dynamic video section to partner profile pages

Author: stackified

apps/web/app/partners/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { Navbar } from "@/components/navbar";
 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 { PartnerCTA } from "@/components/sections/partner-cta";
 import { PartnerFeatures } from "@/components/sections/partner-features";
 import { TrustMetricsSection } from "@/components/sections/trust-metrics-section";
@@ -15,6 +16,7 @@ interface PartnerData {
   imageUrl: string;
   quote?: string;
   ctaMessage?: string;
+  youtubeId?: string;
   ctaUrl?: string;
 }
 
@@ -25,6 +27,7 @@ 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"
   },
   "default": {
@@ -67,6 +70,12 @@ export default function PartnerProfilePage({ params }: { params: { slug: string
           </ScrollReveal>
         </div>
 
+        {partner.youtubeId && (
+          <ScrollReveal>
+            <PartnerVideo youtubeId={partner.youtubeId} />
+          </ScrollReveal>
+        )}
+
         <div className="py-4 sm:py-6">
           <ScrollReveal>
             <div className="text-center mb-12">

apps/web/components/sections/partner-video.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface PartnerVideoProps {
+  youtubeId: string;
+}
+
+export function PartnerVideo({ youtubeId }: PartnerVideoProps) {
+  if (!youtubeId) return null;
+
+  return (
+    <section className="py-24 relative overflow-hidden bg-transparent">
+      <div className="container px-4 md:px-6">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.8 }}
+          className="relative max-w-5xl mx-auto group"
+        >
+          {/* Premium Glowing Backdrop */}
+          <div className="absolute -inset-4 bg-primary/20 rounded-[2rem] blur-3xl opacity-50 -z-10 group-hover:opacity-75 transition-opacity duration-700" />
+          
+          <div className="relative aspect-video rounded-3xl overflow-hidden border-2 border-white/10 shadow-2xl bg-background/50 backdrop-blur-sm">
+            <iframe
+              src={`https://www.youtube.com/embed/${youtubeId}?rel=0&modestbranding=1`}
+              title="YouTube video player"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              className="absolute inset-0 w-full h-full"
+            />
+          </div>
+
+          {/* Decorative Border Glow */}
+          <div className="absolute inset-0 rounded-3xl border border-primary/20 pointer-events-none group-hover:border-primary/40 transition-colors duration-500" />
+        </motion.div>
+      </div>
+    </section>
+  );
+}