Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Mar 20

Commit

818eed4

verified ·

1 Parent(s): fc0b1a2

Update academy.html

Browse files

Files changed (1) hide show

academy.html +120 -208

academy.html CHANGED Viewed

@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sales Academy | McGPT</title>
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
     <link rel="icon" type="image/png" href="Images/scaleway-logomark-white.png">
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
@@ -22,49 +21,34 @@
         }
       }
     </script>
     <style>
         body { font-family: 'Space Grotesk', sans-serif; }
         .nav-link { @apply text-white/80 hover:text-white transition-all duration-200 relative text-sm uppercase font-bold px-1; }
-        .nav-link.active { @apply text-white border-b-2 border-primary; }
         /* AUTH GUARD */
         body:not(.logged-in) main, body:not(.logged-in) header nav, body:not(.logged-in) #mobileMenuBtn { display: none !important; }
-        .why-btn {
-            @apply flex items-center justify-center py-6 px-4 rounded-[1.5rem] font-black uppercase tracking-[0.1em] text-sm md:text-lg
-                   transition-all duration-300 border-2 shadow-2xl cursor-pointer transform
-                   hover:-translate-y-1 active:scale-95 text-center w-full;
-            background-color: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
         }
-        .btn-buy { border-color: rgba(6, 182, 212, 0.4); color: #06b6d4; }
-        .btn-now { border-color: rgba(59, 130, 246, 0.4); color: #3b82f6; }
-        .btn-us  { border-color: rgba(139, 92, 246, 0.4); color: #8b5cf6; }
-        .btn-buy.active { background-color: #06b6d4 !important; color: white !important; }
-        .btn-now.active { background-color: #3b82f6 !important; color: white !important; }
-        .btn-us.active  { background-color: #8b5cf6 !important; color: white !important; }
-        .content-wrap { display: none !important; }
-        .content-wrap.active { display: block !important; }
-        .module-card {
-            @apply flex flex-col items-center justify-between text-center transition-all;
-            padding: 2.5rem 2rem !important;
-            background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important;
-            border-radius: 2.5rem !important; min-height: 360px !important; box-sizing: border-box !important;
         }
-        .active-buy { border-left: 8px solid #06b6d4 !important; }
-        .active-now { border-left: 8px solid #3b82f6 !important; }
-        .active-us   { border-left: 8px solid #8b5cf6 !important; }
-        .oval-button {
-            @apply px-10 py-3 rounded-full text-xs font-black uppercase tracking-widest transition-all shadow-lg transform hover:scale-105 active:scale-95;
-            margin-top: auto !important;
         }
-        .buy-theme .oval-button { background: #06b6d4; color: white; }
-        .now-theme .oval-button { background: #3b82f6; color: white; }
-        .us-theme .oval-button  { background: #8b5cf6; color: white; }
     </style>
 </head>
 <body class="bg-[#3D1862] text-white min-h-screen flex flex-col">
@@ -73,7 +57,7 @@
     <div class="container mx-auto px-4 py-4 flex justify-between items-center">
         <a href="index.html" class="flex items-center space-x-2 group">
             <img src="Images/scaleway-logomark-white.png" alt="Logo" class="h-8 transition-transform group-hover:rotate-12">
-            <span class="text-2xl font-bold tracking-tight text-white font-heading">McGPT</span>
         </a>
         <nav class="hidden lg:flex space-x-8 items-center">
             <a href="value-mapper.html" class="nav-link">Map Industry</a>
@@ -81,164 +65,104 @@
             <a href="proof.html" class="nav-link">Proof</a>
             <a href="scorecard.html" class="nav-link">Scorecard</a>
             <a href="academy.html" class="nav-link active">Sales Academy</a>
         </nav>
         <div class="flex items-center space-x-4">
-            <div data-netlify-identity-button class="text-[10px] font-bold uppercase cursor-pointer hover:text-primary transition-colors"></div>
             <button id="mobileMenuBtn" class="lg:hidden text-white p-2"><i data-feather="menu"></i></button>
         </div>
     </div>
-    <div id="mobileMenu" class="hidden lg:hidden bg-[#0f051a] border-t border-white/10">
-        <nav class="flex flex-col p-6 space-y-4 font-bold uppercase tracking-widest text-sm">
-            <a href="value-mapper.html" class="py-3 border-b border-white/5">Map Industry</a>
-            <a href="intel.html" class="py-3 border-b border-white/5">Map Products</a>
-            <a href="proof.html" class="py-3 border-b border-white/5">Proof</a>
-            <a href="scorecard.html" class="py-3 border-b border-white/5">Scorecard</a>
-            <a href="academy.html" class="py-3 text-primary">Academy</a>
-        </nav>
-    </div>
 </header>
 <main class="flex-grow bg-gradient-to-br from-[#3D1862] to-[#0f051a]">
     <div class="container mx-auto px-4 py-12">
         <div class="text-center max-w-4xl mx-auto mb-16">
-            <h1 class="text-5xl md:text-7xl font-extrabold mb-4 tracking-tighter">Sales Academy</h1>
-            <h2 class="text-xl md:text-2xl font-medium mb-4 tracking-tighter text-white/80 italic">Qualify the "3 Whys" and master value-centric selling!</h2>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-5xl mx-auto mb-20 px-8">
-            <button onclick="toggleWhy('buy')" id="btn-buy" class="why-btn btn-buy">Why Buy?</button>
-            <button onclick="toggleWhy('now')" id="btn-now" class="why-btn btn-now">Why Now?</button>
-            <button onclick="toggleWhy('us')" id="btn-us" class="why-btn btn-us">Why Us?</button>
-        </div>
-        <div id="academy-content" class="max-w-full mx-auto pb-24 hidden">
-            <div id="wrap-buy" class="content-wrap buy-theme">
-                <div class="flex flex-col lg:flex-row gap-10">
-                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
-                        <img src="Images/Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
-                        <h2 class="text-2xl md:text-3xl font-black text-skyAccent uppercase tracking-widest text-center leading-tight">Identify & Listen</h2>
                     </div>
-                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
-                        <div class="module-card active-buy">
-                            <div class="w-full">
-                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 01</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Targeting Customers</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master ICP mapping and reverse-engineered qualification to find high-value targets.</p>
-                            </div>
-                            <a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/content/all" target="_blank" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-buy">
-                            <div class="w-full">
-                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 02</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Elite Prospecting</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Learn strategic business pain identification and outreach frequency logic.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-buy">
-                            <div class="w-full">
-                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 03</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Buyer Engagement</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Navigate gatekeepers and establish authority across social selling platforms.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-buy">
-                            <div class="w-full">
-                                <span class="text-skyAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 04</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Pitching Scaleway</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Adapt our core value propositions to different industry stakeholders.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
                     </div>
                 </div>
-            </div>
-            <div id="wrap-now" class="content-wrap now-theme">
-                <div class="flex flex-col lg:flex-row gap-10">
-                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
-                        <img src="Images/Strategic_Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
-                        <h2 class="text-2xl md:text-3xl font-black text-blueAccent uppercase tracking-widest text-center leading-tight">Learn & Investigate</h2>
-                    </div>
-                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
-                        <div class="module-card active-now">
-                            <div class="w-full">
-                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 05</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Mapping Stakeholders</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Identify mobilizers and map the executive power base to reduce inaction risk.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-now">
-                            <div class="w-full">
-                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 06</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Multithreaded Deals</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master the Challenger sale by engaging multiple stakeholders driven by motivation.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-now">
-                            <div class="w-full">
-                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 07</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">MEDDICC Mastery</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Quantify verified business cases and justify unique value propositions.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-now">
-                            <div class="w-full">
-                                <span class="text-blueAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 08</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Urgency & Upselling</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Align solutions with objectives by quantifying the cost of doing nothing.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
                     </div>
                 </div>
-            </div>
-            <div id="wrap-us" class="content-wrap us-theme">
-                <div class="flex flex-col lg:flex-row gap-10">
-                    <div class="lg:w-1/4 flex flex-col items-center justify-center bg-white/5 rounded-[3rem] p-10 border border-white/10 h-auto">
-                        <img src="Images/ELITE_Sales.png" alt="Badge" class="w-48 h-48 md:w-64 md:h-64 object-contain mb-6 drop-shadow-2xl">
-                        <h2 class="text-2xl md:text-3xl font-black text-violetAccent uppercase tracking-widest text-center leading-tight">Access & Deliver</h2>
-                    </div>
-                    <div class="lg:w-3/4 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
-                        <div class="module-card active-us">
-                            <div class="w-full">
-                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 09</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Maximising PSA</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Partner with engineering to warrant deeper technical investigation and win.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-us">
-                            <div class="w-full">
-                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 10</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Solution Proposal</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Build corporate proposals that demonstrate tangible value and sell internally.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-us">
-                            <div class="w-full">
-                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 11</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Forecast Mastery</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Utilize account mapping and triggering events for data-driven accuracy.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                        <div class="module-card active-us">
-                            <div class="w-full">
-                                <span class="text-violetAccent font-bold text-[10px] uppercase block mb-2 tracking-widest">Mod 12</span>
-                                <h3 class="text-lg font-black mb-4 leading-tight">Closing Deals</h3>
-                                <p class="text-white/70 text-sm leading-relaxed mb-6 italic">Master negotiation tactics and BATNA to increase win rates.</p>
-                            </div>
-                            <a href="#" class="oval-button">Start</a>
-                        </div>
-                    </div>
                 </div>
             </div>
@@ -247,49 +171,37 @@
 </main>
 <script>
-    // --- NETLIFY AUTH GUARD ---
     const checkAuth = (user) => {
-        if (user) {
-            document.body.classList.add('logged-in');
-        } else {
-            window.location.href = "index.html";
-        }
     };
     netlifyIdentity.on('init', user => checkAuth(user));
     netlifyIdentity.on('login', user => { checkAuth(user); netlifyIdentity.close(); });
     netlifyIdentity.on('logout', () => window.location.href = "index.html");
-    // --- MOBILE MENU ---
-    function setupMobileMenu() {
-        const btn = document.getElementById('mobileMenuBtn');
-        const menu = document.getElementById('mobileMenu');
-        if (!btn || !menu) return;
-        btn.addEventListener('click', () => {
-            const isHidden = menu.classList.toggle('hidden');
-            btn.innerHTML = isHidden ? '<i data-feather="menu"></i>' : '<i data-feather="x"></i>';
-            feather.replace();
-        });
-    }
-    // --- ACADEMY TOGGLE LOGIC ---
-    function toggleWhy(id) {
-        const container = document.getElementById('academy-content');
-        container.classList.remove('hidden');
-        document.querySelectorAll('.why-btn').forEach(btn => btn.classList.remove('active'));
-        document.querySelectorAll('.content-wrap').forEach(wrap => wrap.classList.remove('active'));
-        document.getElementById('btn-' + id).classList.add('active');
-        document.getElementById('wrap-' + id).classList.add('active');
-        feather.replace();
-        container.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
-    window.onload = () => {
-        setupMobileMenu();
-        feather.replace();
-    };
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Partners | McGPT Corporate</title>
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
     <link rel="icon" type="image/png" href="Images/scaleway-logomark-white.png">
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
         }
       }
     </script>
     <style>
         body { font-family: 'Space Grotesk', sans-serif; }
         .nav-link { @apply text-white/80 hover:text-white transition-all duration-200 relative text-sm uppercase font-bold px-1; }
+        .nav-link.active { @apply text-white border-b-2 border-primary; transform: translateY(4px); }
         /* AUTH GUARD */
         body:not(.logged-in) main, body:not(.logged-in) header nav, body:not(.logged-in) #mobileMenuBtn { display: none !important; }
+        /* LMS BUTTON STYLING */
+        .track-btn {
+            @apply w-full flex items-center justify-between p-5 rounded-2xl border border-white/5 bg-white/5
+                   transition-all duration-300 text-left group hover:bg-white/10 hover:border-white/20 mb-3;
         }
+        .track-btn.active-track {
+            @apply border-primary bg-primary/20 ring-1 ring-primary shadow-[0_0_30px_rgba(168,85,247,0.2)];
         }
+        .track-num { @apply font-black text-[10px] text-white/20 group-hover:text-primary transition-colors mr-4; }
+        .track-title { @apply font-bold text-xs md:text-sm uppercase tracking-wider text-white/70 group-hover:text-white transition-colors; }
+        .active-track .track-num { @apply text-primary opacity-100; }
+        .active-track .track-title { @apply text-white; }
+        /* IFRAME CONTAINER */
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
     </style>
 </head>
 <body class="bg-[#3D1862] text-white min-h-screen flex flex-col">
     <div class="container mx-auto px-4 py-4 flex justify-between items-center">
         <a href="index.html" class="flex items-center space-x-2 group">
             <img src="Images/scaleway-logomark-white.png" alt="Logo" class="h-8 transition-transform group-hover:rotate-12">
+            <span class="text-2xl font-bold tracking-tight text-white">McGPT</span>
         </a>
         <nav class="hidden lg:flex space-x-8 items-center">
             <a href="value-mapper.html" class="nav-link">Map Industry</a>
             <a href="proof.html" class="nav-link">Proof</a>
             <a href="scorecard.html" class="nav-link">Scorecard</a>
             <a href="academy.html" class="nav-link active">Sales Academy</a>
+            <a href="partners.html" class="nav-link">Partners</a>
         </nav>
         <div class="flex items-center space-x-4">
+            <div data-netlify-identity-button class="text-[10px] font-bold uppercase cursor-pointer hover:text-primary"></div>
             <button id="mobileMenuBtn" class="lg:hidden text-white p-2"><i data-feather="menu"></i></button>
         </div>
     </div>
 </header>
 <main class="flex-grow bg-gradient-to-br from-[#3D1862] to-[#0f051a]">
     <div class="container mx-auto px-4 py-12">
         <div class="text-center max-w-4xl mx-auto mb-16">
+            <h1 class="text-5xl md:text-7xl font-extrabold mb-6 tracking-tighter uppercase">Partner Portal</h1>
+            <p class="text-xl text-white/60 italic font-medium leading-relaxed">
+                Welcome to the temporary Scaleway Partner Enablement hub. <br class="hidden md:block">
+                Select a module from the sidebar to launch the training presentation.
+            </p>
         </div>
+        <div class="flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto">
+            <aside class="lg:w-1/3 order-2 lg:order-1">
+                <div class="glass-panel rounded-[2.5rem] p-8 sticky top-28">
+                    <div class="flex items-center justify-between mb-8">
+                        <h3 class="text-xs font-black uppercase tracking-[0.2em] text-primary">Training Curriculum</h3>
+                        <i data-feather="book-open" class="text-primary w-4"></i>
                     </div>
+                    <div id="lms-menu" class="space-y-1">
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_1', 'Scaleway Foundations')" class="track-btn active-track">
+                            <span class="flex items-center">
+                                <span class="track-num">01</span>
+                                <span class="track-title">Scaleway Foundations</span>
+                            </span>
+                            <i data-feather="play" class="w-3 text-primary opacity-0 group-hover:opacity-100"></i>
+                        </button>
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_2', 'Scaleway Sales Partner')" class="track-btn">
+                            <span class="flex items-center">
+                                <span class="track-num">02</span>
+                                <span class="track-title">Scaleway Sales Partner</span>
+                            </span>
+                        </button>
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_3', 'Scaleway Presales Partner')" class="track-btn">
+                            <span class="flex items-center">
+                                <span class="track-num">03</span>
+                                <span class="track-title">Scaleway Presales Partner</span>
+                            </span>
+                        </button>
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_4', 'Scaleway Associate: Network')" class="track-btn">
+                            <span class="flex items-center">
+                                <span class="track-num">04</span>
+                                <span class="track-title">Scaleway Associate: Network</span>
+                            </span>
+                        </button>
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_5', 'Scaleway Associate: Security & Identity')" class="track-btn">
+                            <span class="flex items-center">
+                                <span class="track-num">05</span>
+                                <span class="track-title">Security & Identity</span>
+                            </span>
+                        </button>
+                        <button onclick="loadModule(this, 'https://view.genially.com/LINK_6', 'Scaleway Associate: Kubernetes')" class="track-btn">
+                            <span class="flex items-center">
+                                <span class="track-num">06</span>
+                                <span class="track-title">Scaleway Associate: Kubernetes</span>
+                            </span>
+                        </button>
                     </div>
                 </div>
+            </aside>
+            <div class="lg:w-2/3 order-1 lg:order-2">
+                <div class="mb-6">
+                    <div class="flex items-center space-x-3 mb-2">
+                        <span class="h-2 w-2 rounded-full bg-skyAccent animate-pulse"></span>
+                        <span class="text-[10px] font-black uppercase tracking-[0.3em] text-skyAccent">Now Playing</span>
                     </div>
+                    <h2 id="display-title" class="text-3xl md:text-4xl font-black uppercase tracking-tight">Scaleway Foundations</h2>
                 </div>
+                <div class="rounded-[2.5rem] overflow-hidden border border-white/20 shadow-[0_0_60px_rgba(0,0,0,0.5)] bg-black aspect-video relative">
+                    <iframe id="video-player"
+                            src="https://view.genially.com/LINK_1"
+                            class="absolute inset-0 w-full h-full"
+                            allowfullscreen="true">
+                    </iframe>
+                </div>
+                <div class="mt-8 p-6 glass-panel rounded-2xl flex items-start space-x-4">
+                    <i data-feather="info" class="text-violetAccent w-5 mt-1"></i>
+                    <p class="text-sm text-white/50 italic leading-relaxed">
+                        Instructions: Interact with the presentation above to complete the module. If the content does not load, please refresh your browser or check your VPN settings.
+                    </p>
                 </div>
             </div>
 </main>
 <script>
+    // --- NETLIFY AUTH ---
     const checkAuth = (user) => {
+        if (user) { document.body.classList.add('logged-in'); feather.replace(); }
+        else { window.location.href = "index.html"; }
     };
     netlifyIdentity.on('init', user => checkAuth(user));
     netlifyIdentity.on('login', user => { checkAuth(user); netlifyIdentity.close(); });
     netlifyIdentity.on('logout', () => window.location.href = "index.html");
+    // --- LMS LOGIC ---
+    function loadModule(element, url, title) {
+        // Change Iframe Source
+        document.getElementById('video-player').src = url;
+        // Change Title Heading
+        document.getElementById('display-title').innerText = title;
+        // Reset and Set Active State on Buttons
+        document.querySelectorAll('.track-btn').forEach(btn => btn.classList.remove('active-track'));
+        element.classList.add('active-track');
+        // Smooth scroll to top of player for mobile users
+        if(window.innerWidth < 1024) {
+            window.scrollTo({
+                top: document.getElementById('display-title').offsetTop - 100,
+                behavior: 'smooth'
+            });
+        }
     }
+    window.onload = () => { feather.replace(); };
 </script>
 </body>
 </html>