From b3d05d5867fcf7fdaa04752dae10385d6a810340 Mon Sep 17 00:00:00 2001
From: laveshparyani <laveshparyani01@gmail.com>
Date: Mon, 23 Mar 2026 15:37:01 +0530
Subject: [PATCH] feat(partners): add dynamic video section to partner profile
 pages

This commit introduces a new PartnerVideo component for embedding YouTube videos on partner landing pages. It also updates the PartnerData interface to support dynamic youtubeId fields and fixes a background separation issue by setting the section to transparent and aligning its padding with other page sections.
---
 apps/web/app/partners/[slug]/page.tsx         | 11 ++++-
 .../web/components/sections/partner-video.tsx | 41 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/sections/partner-video.tsx

diff --git a/apps/web/app/partners/[slug]/page.tsx b/apps/web/app/partners/[slug]/page.tsx
index 14ed231..4d955eb 100644
--- a/apps/web/app/partners/[slug]/page.tsx
+++ b/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;
 }
 
 const PARTNERS_DATA: Record<string, PartnerData> = {
@@ -23,7 +25,8 @@ const PARTNERS_DATA: Record<string, PartnerData> = {
     bio: "Solo E started trading with $500–$600 paychecks to fund his music dream. No prop firms, no handouts — just self-taught grit. He burned $100K learning the hard way, mastering risk, discipline, and consistency. \n\nThe breakthrough came flipping $600 to $25K (then losing it), but going live on YouTube and turning $4K into $40K put him on the map. Now he refuses to deposit over $10K, proving small accounts can win big. The Solo E brand is about flipping limits, giving underdogs a system, and proving the world wrong one trade at a time.",
     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."
+    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"
   },
   "default": {
     name: "Our Global Partner",
@@ -64,6 +67,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">
diff --git a/apps/web/components/sections/partner-video.tsx b/apps/web/components/sections/partner-video.tsx
new file mode 100644
index 0000000..cf17ee3
--- /dev/null
+++ b/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>
+  );
+}