From 4c12363248433b99417ad531326fc15791959b18 Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Wed, 1 Apr 2026 15:50:06 +0530
Subject: [PATCH 1/5] feat: redesign past sponsors grid, integrate traboda as
 partner, and implement interactive speaker bio modals with HUD styling

---
 app/page.tsx                                  |   9 +-
 .../{speaker2.jpeg => Abhishek_JM.jpeg}       | Bin
 .../{speaker1.jpeg => Sreepriya_C.jpeg}       | Bin
 src/components/landing/CurrentSpeakers.tsx    | 117 ++++++++++++++++--
 src/components/landing/CurrentSponsors.tsx    |  31 ++++-
 src/components/landing/Header.tsx             |   8 +-
 .../landing/PastSponsorsMarquee.tsx           |  66 ----------
 src/components/landing/PastSponsorsTable.tsx  |  71 +++++++++++
 8 files changed, 211 insertions(+), 91 deletions(-)
 rename public/inctf/assets/images/current_speakers/{speaker2.jpeg => Abhishek_JM.jpeg} (100%)
 rename public/inctf/assets/images/current_speakers/{speaker1.jpeg => Sreepriya_C.jpeg} (100%)
 delete mode 100644 src/components/landing/PastSponsorsMarquee.tsx
 create mode 100644 src/components/landing/PastSponsorsTable.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 4761d44..e3bce4b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,7 +7,7 @@ import MissionBrief from '../src/components/landing/MissionBrief';
 import CrewEligibility from '../src/components/landing/CrewEligibility';
 import CrewRewards from '../src/components/landing/CrewRewards';
 import MissionCredentials from '../src/components/landing/MissionCredentials';
-import PastSponsorsMarquee from '../src/components/landing/PastSponsorsMarquee';
+import PastSponsorsTable from '../src/components/landing/PastSponsorsTable';
 import CurrentSpeakers from '../src/components/landing/CurrentSpeakers';
 import OperationTimeline from '../src/components/landing/OperationTimeline';
 import CurrentSponsors from '../src/components/landing/CurrentSponsors';
@@ -51,10 +51,6 @@ export default async function LandingPage() {
                 <CurrentSponsors />
             </section>
 
-            {/* Past Sponsors Marquee */}
-            <section className="relative z-10 w-full overflow-hidden bg-obsidian border-t border-sky-digital/20">
-                <PastSponsorsMarquee />
-            </section>
 
             {/* Mission Timeline Section */}
             <OperationTimeline />
@@ -141,6 +137,9 @@ export default async function LandingPage() {
                 </div>
             </section>
 
+            {/* Past Sponsors */}
+            <PastSponsorsTable />
+
             {/* Footer */}
             <Footer />
         </div>
diff --git a/public/inctf/assets/images/current_speakers/speaker2.jpeg b/public/inctf/assets/images/current_speakers/Abhishek_JM.jpeg
similarity index 100%
rename from public/inctf/assets/images/current_speakers/speaker2.jpeg
rename to public/inctf/assets/images/current_speakers/Abhishek_JM.jpeg
diff --git a/public/inctf/assets/images/current_speakers/speaker1.jpeg b/public/inctf/assets/images/current_speakers/Sreepriya_C.jpeg
similarity index 100%
rename from public/inctf/assets/images/current_speakers/speaker1.jpeg
rename to public/inctf/assets/images/current_speakers/Sreepriya_C.jpeg
diff --git a/src/components/landing/CurrentSpeakers.tsx b/src/components/landing/CurrentSpeakers.tsx
index 6fdcfc5..764ec94 100644
--- a/src/components/landing/CurrentSpeakers.tsx
+++ b/src/components/landing/CurrentSpeakers.tsx
@@ -1,43 +1,50 @@
 'use client';
 import React, { useRef } from 'react';
 import { motion, useInView } from 'framer-motion';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
 
 interface Speaker {
     name: string;
     title: string;
     company: string;
     image: string;
+    bio?: string;
 }
 
 const speakers: Speaker[] = [
     {
-        name: 'Speaker Name',
-        title: 'Their Info',
-        company: 'EXPERT SPEAKER',
-        image: '/inctf/assets/images/current_speakers/speaker1.jpeg',
+        name: 'Sreepriya C',
+        title: '101 to Product Security Incident Response (PSIRT)',
+        company: 'Siemens',
+        image: '/inctf/assets/images/current_speakers/Sreepriya_C.jpeg',
+        bio: `Sreepriya Chalakkal is a Product Security Incident Response Team (PSIRT) engineer at Siemens, where she works on vulnerability handling and securing large-scale industrial and enterprise systems. Her expertise spans telecommunication security, protocol analysis, and real-world network infrastructures.\n\nPrior to this, she worked as a security researcher at ERNW GmbH, focusing on mobile and telecom security, including technologies like VoLTE and core network protocols.\n\nShe is a former core member and mentor of team bi0s and a strong advocate for diversity in cybersecurity. She founded Team Shakti and is a key organizer of ShaktiCon, contributing to building a more inclusive global security community.`
     },
     {
-        name: 'Speaker Name',
-        title: 'Their Info',
-        company: 'EXPERT SPEAKER',
-        image: '/inctf/assets/images/current_speakers/speaker2.jpeg',
+        name: 'Abhishek JM',
+        title: '',
+        company: 'Cred',
+        image: '/inctf/assets/images/current_speakers/Abhishek_JM.jpeg',
+        // Keeping bio and role blank/unclickable
+        bio: ''
     },
 ];
 
-const SpeakerCard: React.FC<{ speaker: Speaker; index: number }> = ({ speaker, index }) => {
+const SpeakerCard: React.FC<{ speaker: Speaker; index: number; onClick: () => void }> = ({ speaker, index, onClick }) => {
     const ref = useRef<HTMLDivElement>(null);
     const isInView = useInView(ref, { once: true });
+    const isClickable = !!speaker.bio;
 
     return (
         <motion.div
             ref={ref}
-            className="flex-shrink-0 w-[85vw] sm:w-72 md:w-80 snap-center group"
+            className={`flex-shrink-0 w-[85vw] sm:w-72 md:w-80 snap-center group ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
             initial={{ opacity: 0, y: 30 }}
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.5, delay: index * 0.1, ease: 'easeOut' }}
+            onClick={isClickable ? onClick : undefined}
         >
-            <div className="relative h-full min-h-[380px] md:min-h-[440px] rounded-lg overflow-hidden border border-sky-400/20 bg-slate-900/60 backdrop-blur-sm transition-all duration-300 group-hover:border-sky-400/80 group-hover:shadow-[0_0_25px_rgba(56,189,248,0.2)] p-5 md:p-8 flex flex-col items-center text-center">
+            <div className={`relative h-full min-h-[380px] md:min-h-[440px] rounded-lg overflow-hidden border border-sky-400/20 bg-slate-900/40 backdrop-blur-sm transition-all duration-300 p-5 md:p-8 flex flex-col items-center text-center ${isClickable ? 'group-hover:border-sky-400/80 group-hover:shadow-[0_0_25px_rgba(56,189,248,0.15)]' : ''
+                }`}>
 
                 <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-sky-400 z-10" />
                 <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-sky-400 z-10" />
@@ -69,6 +76,13 @@ const SpeakerCard: React.FC<{ speaker: Speaker; index: number }> = ({ speaker, i
                     <p className="font-mono text-sky-400 text-xs md:text-sm font-semibold tracking-wide mt-auto">
                         {speaker.company}
                     </p>
+                    {isClickable && (
+                        <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                            <span className="font-mono text-[9px] text-sky-400 border border-sky-400/30 px-3 py-1 rounded-full uppercase tracking-widest">
+                                View Intel
+                            </span>
+                        </div>
+                    )}
                 </div>
 
                 {/* Bottom Corner Accents */}
@@ -83,6 +97,7 @@ const CurrentSpeakers: React.FC = () => {
     const scrollRef = useRef<HTMLDivElement>(null);
     const titleRef = useRef<HTMLDivElement>(null);
     const isTitleInView = useInView(titleRef, { once: true });
+    const [selectedSpeaker, setSelectedSpeaker] = React.useState<Speaker | null>(null);
 
     const scroll = (direction: 'left' | 'right') => {
         if (scrollRef.current) {
@@ -139,9 +154,85 @@ const CurrentSpeakers: React.FC = () => {
                 style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitOverflowScrolling: 'touch' }}
             >
                 {speakers.map((speaker, index) => (
-                    <SpeakerCard key={`${speaker.name}-${index}`} speaker={speaker} index={index} />
+                    <SpeakerCard
+                        key={`${speaker.name}-${index}`}
+                        speaker={speaker}
+                        index={index}
+                        onClick={() => setSelectedSpeaker(speaker)}
+                    />
                 ))}
             </div>
+
+            {/* Speaker Bio Modal */}
+            <motion.div initial={false}>
+                {selectedSpeaker && (
+                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10">
+                        {/* Backdrop */}
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={() => setSelectedSpeaker(null)}
+                            className="absolute inset-0 bg-black/80 backdrop-blur-xl"
+                        />
+
+                        {/* Modal Content */}
+                        <motion.div
+                            initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                            animate={{ opacity: 1, scale: 1, y: 0 }}
+                            exit={{ opacity: 0, scale: 0.9, y: 20 }}
+                            className="relative w-full max-w-4xl bg-slate-900 border border-sky-400/30 rounded-lg overflow-hidden shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col md:flex-row max-h-[90vh]"
+                        >
+                            {/* Tactical Accents */}
+                            <div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-sky-400 m-4 z-10" />
+                            <div className="absolute bottom-0 right-0 w-8 h-8 border-b-2 border-r-2 border-sky-400 m-4 z-10" />
+
+                            <button
+                                onClick={() => setSelectedSpeaker(null)}
+                                className="absolute top-6 right-6 z-20 p-2 text-sky-400 hover:text-white hover:bg-sky-400/20 transition-all rounded-md"
+                            >
+                                <X size={24} />
+                            </button>
+
+                            {/* Left Side: Photo & Quick Info */}
+                            <div className="w-full md:w-1/3 bg-slate-950 p-8 flex flex-col items-center justify-center border-b md:border-b-0 md:border-r border-sky-400/20">
+                                <div className="relative w-32 h-32 md:w-48 md:h-48 mb-6">
+                                    <div className="absolute inset-0 rounded-full bg-gradient-to-br from-sky-400 via-purple-500 to-pink-500 p-[3px]">
+                                        <div className="w-full h-full rounded-full bg-slate-900 p-[2px]">
+                                            <img
+                                                src={selectedSpeaker.image}
+                                                alt={selectedSpeaker.name}
+                                                className="w-full h-full rounded-full object-cover grayscale hover:grayscale-0 transition-all duration-500"
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <h4 className="text-white font-heading font-bold text-xl md:text-2xl text-center mb-1 uppercase">
+                                    {selectedSpeaker.name}
+                                </h4>
+                                <p className="text-sky-400 font-mono text-sm uppercase tracking-widest text-center mb-4">
+                                    {selectedSpeaker.company}
+                                </p>
+                                <div className="h-px w-24 bg-sky-400/30" />
+                            </div>
+
+                            {/* Right Side: Bio & Mission Intel */}
+                            <div className="w-full md:w-2/3 p-8 md:p-12 overflow-y-auto">
+                                <div className="mb-8">
+                                    <h5 className="text-white font-heading text-lg md:text-xl font-semibold mb-6 uppercase tracking-wider border-b border-sky-400/10 pb-4">
+                                        {selectedSpeaker.title}
+                                    </h5>
+                                    <div className="prose prose-invert max-w-none">
+                                        <p className="text-white/80 font-mono text-sm leading-relaxed whitespace-pre-line mb-4">
+                                            {selectedSpeaker.bio}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </div>
+                )}
+            </motion.div>
         </section>
     );
 };
diff --git a/src/components/landing/CurrentSponsors.tsx b/src/components/landing/CurrentSponsors.tsx
index 71e7bc7..1bbb260 100644
--- a/src/components/landing/CurrentSponsors.tsx
+++ b/src/components/landing/CurrentSponsors.tsx
@@ -6,7 +6,7 @@ const CurrentSponsors = () => {
     return (
         <section className="py-8 bg-transparent relative z-20">
             <div className="container mx-auto px-4 flex justify-center">
-                <motion.div 
+                <motion.div
                     initial={{ opacity: 0, y: 30 }}
                     whileInView={{ opacity: 1, y: 0 }}
                     viewport={{ once: true }}
@@ -15,7 +15,7 @@ const CurrentSponsors = () => {
                 >
                     {/* Tactical Card Container - Enhanced Blue Visibility */}
                     <div className="relative overflow-hidden bg-slate-950/40 backdrop-blur-xl border border-sky-400/50 rounded-2xl p-8 md:p-12 shadow-[0_0_50px_rgba(0,0,0,0.5),0_0_20px_rgba(56,189,248,0.1)]">
-                        
+
                         {/* Static Red Corner Brackets - Enhanced Vibrancy & Glow */}
                         <div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-red-600 shadow-[0_0_10px_rgba(220,38,38,0.4)]" />
                         <div className="absolute top-0 right-0 w-8 h-8 border-t-2 border-r-2 border-red-600 shadow-[0_0_10px_rgba(220,38,38,0.4)]" />
@@ -34,7 +34,7 @@ const CurrentSponsors = () => {
                                 </h3>
                                 <div className="h-[1px] w-12 md:w-20 bg-gradient-to-l from-transparent to-sky-400 opacity-50"></div>
                             </div>
-                            
+
                             {/* Powered By Section */}
                             <div className="flex flex-col items-center gap-6 w-full">
                                 <div className="text-white/60 font-mono text-xs uppercase tracking-[0.25em] mb-1">
@@ -80,6 +80,31 @@ const CurrentSponsors = () => {
                                 </a>
                             </div>
 
+
+                            <div className="flex items-center gap-4 w-full opacity-20">
+                                <div className="h-px flex-grow bg-gradient-to-r from-transparent to-sky-digital" />
+                                <div className="w-2 h-2 rotate-45 border border-sky-digital" />
+                                <div className="h-px flex-grow bg-gradient-to-l from-transparent to-sky-digital" />
+                            </div>
+
+                            {/* Organizing Partner Section */}
+                            <div className="flex flex-col items-center gap-6 w-full">
+                                <div className="text-white/60 font-mono text-xs uppercase tracking-[0.25em] mb-1">
+                                    Organizing Partner
+                                </div>
+                                <a
+                                    href="https://traboda.com/"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="transition-all duration-500 hover:scale-105 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.1)]"
+                                >
+                                    <img
+                                        src="/inctf/assets/images/conference/logos/traboda_light.png"
+                                        alt="Traboda CyberLabs Logo"
+                                        className="h-10 md:h-16 w-auto object-contain brightness-0 invert opacity-90 hover:opacity-100 transition-opacity"
+                                    />
+                                </a>
+                            </div>
                         </div>
 
                         {/* Background Data Matrix (Very Subtle) */}
diff --git a/src/components/landing/Header.tsx b/src/components/landing/Header.tsx
index 1f58fa9..45b59eb 100644
--- a/src/components/landing/Header.tsx
+++ b/src/components/landing/Header.tsx
@@ -377,10 +377,10 @@ const LandingHeader = () => {
                   {/* Value Prop Cards Grid - Replacing Description */}
                   <div className="grid grid-cols-2 gap-4 sm:gap-6 mt-8 w-full text-left">
                     {[
-                      { icon: <Banknote size={18} />, title: "₹5 Lakh Prize Pool" },
-                      { icon: <Users size={18} />, title: "Internship Oppurtunities" },
-                      { icon: <ShieldCheck size={18} />, title: "Real-World Training" },
-                      { icon: <Award size={18} />, title: "Certified & Recognized" }
+                      { icon: <Banknote size={18} />, title: "₹5 Lakh Worth Grand Prize Pool" },
+                      { icon: <Users size={18} />, title: "Placement & Internship Opportunities" },
+                      { icon: <ShieldCheck size={18} />, title: "Expert Training & Sessions" },
+                      { icon: <Award size={18} />, title: "Get Certified & Recognized" }
                     ].map((prop, index) => (
                       <motion.div
                         key={index}
diff --git a/src/components/landing/PastSponsorsMarquee.tsx b/src/components/landing/PastSponsorsMarquee.tsx
deleted file mode 100644
index 49e4dda..0000000
--- a/src/components/landing/PastSponsorsMarquee.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import React from 'react';
-import { motion } from 'framer-motion';
-
-const sponsors = [
-    { name: 'Schneider Electric', logo: '/assets/images/past_sponsors/Schneider.png' },
-    { name: 'Secfence', logo: '/assets/images/past_sponsors/Secfence.png' },
-    { name: 'Audius', logo: '/assets/images/past_sponsors/audius.png' },
-    { name: 'Bugcrowd', logo: '/assets/images/past_sponsors/bugcrowd.png' },
-    { name: 'CRED', logo: '/assets/images/past_sponsors/cred.png' },
-    { name: 'Crowdstrike', logo: '/assets/images/past_sponsors/crowdstrike.png' },
-    { name: 'Great Learning', logo: '/assets/images/past_sponsors/greatLearning.png' },
-    { name: 'H&R Block', logo: '/assets/images/past_sponsors/h&r_block.png' },
-    { name: 'Salesforce', logo: '/assets/images/past_sponsors/salesforce.png' },
-    { name: 'VMware', logo: '/assets/images/past_sponsors/vmware.png' },
-    { name: 'Zoho', logo: '/assets/images/past_sponsors/zoho.png' },
-];
-
-const PastSponsorsMarquee = () => {
-    return (
-        <div className="w-full relative overflow-hidden py-12 md:py-20 flex flex-col items-center justify-center border-y border-sky-400/20 bg-slate-900/50 backdrop-blur-sm">
-            <div className="mb-8 md:mb-12 flex items-center gap-4 md:gap-6">
-                <div className="h-[1px] w-16 md:w-32 bg-gradient-to-r from-transparent to-sky-400"></div>
-                <h3 className="text-white font-heading font-medium tracking-[0.2em] text-sm md:text-lg uppercase">
-                    Our Past <span className="text-sky-400">Sponsors</span>
-                </h3>
-                <div className="h-[1px] w-16 md:w-32 bg-gradient-to-l from-transparent to-sky-400"></div>
-            </div>
-
-            <div className="w-full flex overflow-hidden group">
-                <motion.div
-                    animate={{ x: ["0%", "-50%"] }}
-                    transition={{
-                        repeat: Infinity,
-                        ease: "linear",
-                        duration: 20,
-                    }}
-                    className="flex whitespace-nowrap min-w-full items-center gap-8 md:gap-16 px-4 md:px-8"
-                    style={{ width: 'max-content' }}
-                >
-
-                    {[...sponsors, ...sponsors].map((sponsor, index) => (
-                        <div
-                            key={`${sponsor.name}-${index}`}
-                            className="relative h-14 md:h-24 w-40 md:w-64 flex-shrink-0 flex items-center justify-center opacity-70 group-hover:opacity-100 hover:!opacity-100 hover:scale-110 transition-all duration-300 filter"
-                        >
-                            <img
-                                src={sponsor.logo}
-                                alt={`${sponsor.name} Logo`}
-                                className="max-h-full max-w-full object-contain brightness-0 invert opacity-70 hover:opacity-100 transition-all duration-300"
-                                loading="lazy"
-                            />
-                        </div>
-                    ))}
-                </motion.div>
-            </div>
-
-
-            <div className="absolute top-0 bottom-0 left-0 w-24 md:w-48 bg-gradient-to-r from-obsidian to-transparent z-10 pointer-events-none"></div>
-            <div className="absolute top-0 bottom-0 right-0 w-24 md:w-48 bg-gradient-to-l from-obsidian to-transparent z-10 pointer-events-none"></div>
-        </div>
-    );
-};
-
-export default PastSponsorsMarquee;
diff --git a/src/components/landing/PastSponsorsTable.tsx b/src/components/landing/PastSponsorsTable.tsx
new file mode 100644
index 0000000..67c95ed
--- /dev/null
+++ b/src/components/landing/PastSponsorsTable.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const sponsors = [
+    { name: 'Schneider Electric', logo: '/assets/images/past_sponsors/Schneider.png' },
+    { name: 'Secfence', logo: '/assets/images/past_sponsors/Secfence.png' },
+    { name: 'audius', logo: '/assets/images/past_sponsors/audius.png', isLarge: true },
+    { name: 'bugcrowd', logo: '/assets/images/past_sponsors/bugcrowd.png' },
+    { name: 'cred', logo: '/assets/images/past_sponsors/cred.png', isLarge: true },
+    { name: 'crowdstrike', logo: '/assets/images/past_sponsors/crowdstrike.png', isLarge: true },
+    { name: 'greatLearning', logo: '/assets/images/past_sponsors/greatLearning.png' },
+    { name: 'h&r_block', logo: '/assets/images/past_sponsors/h&r_block.png', isLarge: true },
+    { name: 'salesforce', logo: '/assets/images/past_sponsors/salesforce.png', isLarge: true },
+    { name: 'vmware', logo: '/assets/images/past_sponsors/vmware.png', isLarge: true },
+    { name: 'zoho', logo: '/assets/images/past_sponsors/zoho.png', isLarge: true },
+    { name: 'Team bi0s', logo: '/assets/images/logos/bi0s_dark.png' },
+];
+
+const PastSponsorsTable = () => {
+    return (
+        <section className="w-full relative py-16 md:py-24 bg-obsidian/80 border-t border-sky-400/10" id="past-sponsors">
+            <div className="container mx-auto px-4 max-w-6xl">
+                <div className="mb-12 flex flex-col items-center gap-4 text-center">
+                    <div className="flex items-center gap-4 md:gap-6">
+                        <div className="h-[1px] w-12 md:w-24 bg-gradient-to-r from-transparent to-sky-400/40"></div>
+                        <h3 className="text-white font-heading font-medium tracking-[0.2em] text-sm md:text-xl uppercase whitespace-nowrap">
+                            Our Past <span className="text-sky-400">Sponsors</span>
+                        </h3>
+                        <div className="h-[1px] w-12 md:w-24 bg-gradient-to-l from-transparent to-sky-400/40"></div>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 border-l border-t border-sky-400/10">
+                    {sponsors.map((sponsor, index) => (
+                        <motion.div
+                            key={sponsor.name}
+                            initial={{ opacity: 0 }}
+                            whileInView={{ opacity: 1 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: index * 0.05 }}
+                            className={`aspect-[5/2] flex items-center justify-center border-r border-b border-sky-400/10 group hover:bg-sky-400/5 transition-all duration-300 relative overflow-hidden ${
+                                sponsor.isLarge ? 'p-2' : 'p-8'
+                            }`}
+                        >
+                            <img
+                                src={sponsor.logo}
+                                alt={`${sponsor.name} Logo`}
+                                className={`${
+                                    sponsor.isLarge ? 'max-h-[90%] max-w-[95%]' : 'max-h-[70%] max-w-[80%]'
+                                } object-contain opacity-100 transition-all duration-300 transform group-hover:scale-105 ${
+                                    sponsor.name.toLowerCase().includes('cred') || sponsor.name.toLowerCase().includes('bi0s') ? 'brightness-0 invert' : ''
+                                }`}
+                                loading="lazy"
+                            />
+                            
+                            {/* Tactical Corner Accents Visibility on Hover */}
+                            <div className="absolute top-0 left-0 w-1.5 h-1.5 border-l border-t border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                            <div className="absolute top-0 right-0 w-1.5 h-1.5 border-r border-t border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                            <div className="absolute bottom-0 left-0 w-1.5 h-1.5 border-l border-b border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                            <div className="absolute bottom-0 right-0 w-1.5 h-1.5 border-r border-b border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default PastSponsorsTable;

From d048eac92c29943419196def5a7f4a911d2d9fcd Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Wed, 1 Apr 2026 15:55:02 +0530
Subject: [PATCH 2/5] feat: optimize speaker bio modal with mobile scroll-lock,
 navbar occlusion, and z-index priority; deactivate abhishek jm profile state

---
 src/components/landing/CurrentSpeakers.tsx | 27 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/landing/CurrentSpeakers.tsx b/src/components/landing/CurrentSpeakers.tsx
index 764ec94..5ce9125 100644
--- a/src/components/landing/CurrentSpeakers.tsx
+++ b/src/components/landing/CurrentSpeakers.tsx
@@ -99,6 +99,23 @@ const CurrentSpeakers: React.FC = () => {
     const isTitleInView = useInView(titleRef, { once: true });
     const [selectedSpeaker, setSelectedSpeaker] = React.useState<Speaker | null>(null);
 
+    React.useEffect(() => {
+        const header = document.querySelector('header');
+        if (selectedSpeaker) {
+            document.body.style.overflow = 'hidden';
+            if (window.innerWidth <= 768 && header) {
+                header.style.display = 'none';
+            }
+        } else {
+            document.body.style.overflow = 'unset';
+            if (header) header.style.display = 'flex';
+        }
+        return () => {
+            document.body.style.overflow = 'unset';
+            if (header) header.style.display = 'flex';
+        };
+    }, [selectedSpeaker]);
+
     const scroll = (direction: 'left' | 'right') => {
         if (scrollRef.current) {
             const amount = 320;
@@ -166,22 +183,22 @@ const CurrentSpeakers: React.FC = () => {
             {/* Speaker Bio Modal */}
             <motion.div initial={false}>
                 {selectedSpeaker && (
-                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 md:p-10">
+                    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 md:p-10 text-left">
                         {/* Backdrop */}
                         <motion.div
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
                             onClick={() => setSelectedSpeaker(null)}
-                            className="absolute inset-0 bg-black/80 backdrop-blur-xl"
+                            className="absolute inset-0 bg-black/90 backdrop-blur-xl"
                         />
 
                         {/* Modal Content */}
                         <motion.div
-                            initial={{ opacity: 0, scale: 0.9, y: 20 }}
+                            initial={{ opacity: 0, scale: 0.95, y: 20 }}
                             animate={{ opacity: 1, scale: 1, y: 0 }}
-                            exit={{ opacity: 0, scale: 0.9, y: 20 }}
-                            className="relative w-full max-w-4xl bg-slate-900 border border-sky-400/30 rounded-lg overflow-hidden shadow-[0_0_50px_rgba(0,0,0,0.5)] flex flex-col md:flex-row max-h-[90vh]"
+                            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                            className="relative w-full max-w-4xl bg-slate-900 border border-sky-400/30 rounded-lg overflow-y-auto md:overflow-hidden shadow-[0_0_80px_rgba(0,0,0,0.8),0_0_30px_rgba(56,189,248,0.1)] flex flex-col md:flex-row max-h-[90vh] md:max-h-[85vh]"
                         >
                             {/* Tactical Accents */}
                             <div className="absolute top-0 left-0 w-8 h-8 border-t-2 border-l-2 border-sky-400 m-4 z-10" />

From 9616ba837937818e2ef9436a52e221adfb622312 Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Wed, 1 Apr 2026 15:57:17 +0530
Subject: [PATCH 3/5] chore: Update Abhishek JM info

---
 src/components/landing/CurrentSpeakers.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/landing/CurrentSpeakers.tsx b/src/components/landing/CurrentSpeakers.tsx
index 5ce9125..c636bbf 100644
--- a/src/components/landing/CurrentSpeakers.tsx
+++ b/src/components/landing/CurrentSpeakers.tsx
@@ -21,11 +21,10 @@ const speakers: Speaker[] = [
     },
     {
         name: 'Abhishek JM',
-        title: '',
+        title: 'Lead Security Engineer at CRED',
         company: 'Cred',
         image: '/inctf/assets/images/current_speakers/Abhishek_JM.jpeg',
-        // Keeping bio and role blank/unclickable
-        bio: ''
+        bio: `Abhishek JM is a Lead Security Engineer at CRED, specializing in mobile security and application security for large-scale fintech systems. He is also a trainer at 7ASecurity, where he has delivered hands-on training at global conferences including OWASP AppSec New Zealand, 44Con, and ThreatCon.\n\nWith extensive experience in offensive security, Abhishek leads security research projects such as Adhrit and EVABS, focusing on advanced mobile and application security testing. His work has been presented at premier venues like Black Hat (Asia, US, Europe) and OWASP Seasides, with his tool Adhrit gaining industry recognition.\n\nHe is an active contributor to the security community, regularly speaking at conferences and meetups, and has also served as a trainer for international security programs, helping mentor the next generation of cybersecurity professionals.`
     },
 ];
 

From 94d9dc237a86c2928b97b1189ef3d494c3a81c2d Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Wed, 1 Apr 2026 16:00:48 +0530
Subject: [PATCH 4/5] chore: Update Abhishek's title

---
 src/components/landing/CurrentSpeakers.tsx | 77 +++++++++++++++-------
 1 file changed, 54 insertions(+), 23 deletions(-)

diff --git a/src/components/landing/CurrentSpeakers.tsx b/src/components/landing/CurrentSpeakers.tsx
index c636bbf..be76c6b 100644
--- a/src/components/landing/CurrentSpeakers.tsx
+++ b/src/components/landing/CurrentSpeakers.tsx
@@ -1,7 +1,14 @@
 'use client';
 import React, { useRef } from 'react';
-import { motion, useInView } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronLeft, ChevronRight, X } from 'lucide-react';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger);
+}
 
 interface Speaker {
     name: string;
@@ -29,17 +36,11 @@ const speakers: Speaker[] = [
 ];
 
 const SpeakerCard: React.FC<{ speaker: Speaker; index: number; onClick: () => void }> = ({ speaker, index, onClick }) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const isInView = useInView(ref, { once: true });
     const isClickable = !!speaker.bio;
 
     return (
-        <motion.div
-            ref={ref}
-            className={`flex-shrink-0 w-[85vw] sm:w-72 md:w-80 snap-center group ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
-            initial={{ opacity: 0, y: 30 }}
-            animate={isInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.5, delay: index * 0.1, ease: 'easeOut' }}
+        <div
+            className={`speaker-card flex-shrink-0 w-[85vw] sm:w-72 md:w-80 snap-center group opacity-0 ${isClickable ? 'cursor-pointer' : 'cursor-default'}`}
             onClick={isClickable ? onClick : undefined}
         >
             <div className={`relative h-full min-h-[380px] md:min-h-[440px] rounded-lg overflow-hidden border border-sky-400/20 bg-slate-900/40 backdrop-blur-sm transition-all duration-300 p-5 md:p-8 flex flex-col items-center text-center ${isClickable ? 'group-hover:border-sky-400/80 group-hover:shadow-[0_0_25px_rgba(56,189,248,0.15)]' : ''
@@ -88,16 +89,51 @@ const SpeakerCard: React.FC<{ speaker: Speaker; index: number; onClick: () => vo
                 <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-sky-400/50 z-10" />
                 <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-sky-400/50 z-10" />
             </div>
-        </motion.div>
+        </div>
     );
 };
 
 const CurrentSpeakers: React.FC = () => {
+    const containerRef = useRef<HTMLDivElement>(null);
     const scrollRef = useRef<HTMLDivElement>(null);
-    const titleRef = useRef<HTMLDivElement>(null);
-    const isTitleInView = useInView(titleRef, { once: true });
     const [selectedSpeaker, setSelectedSpeaker] = React.useState<Speaker | null>(null);
 
+    useGSAP(() => {
+        if (!containerRef.current) return;
+
+        const tl = gsap.timeline({
+            scrollTrigger: {
+                trigger: containerRef.current,
+                start: 'top 85%',
+                toggleActions: 'play none none none'
+            }
+        });
+
+        // Animate Title
+        tl.fromTo('.speakers-header', 
+            { opacity: 0, y: 30 },
+            { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' }
+        );
+
+        // Stagger Cards
+        tl.fromTo('.speaker-card',
+            { 
+                opacity: 0, 
+                y: 40,
+                scale: 0.95
+            },
+            { 
+                opacity: 1, 
+                y: 0, 
+                scale: 1,
+                duration: 0.8, 
+                stagger: 0.1, 
+                ease: 'power3.out'
+            },
+            '-=0.6'
+        );
+    }, { scope: containerRef });
+
     React.useEffect(() => {
         const header = document.querySelector('header');
         if (selectedSpeaker) {
@@ -126,15 +162,10 @@ const CurrentSpeakers: React.FC = () => {
     };
 
     return (
-        <section className="relative z-10 w-full py-16 md:py-24 overflow-hidden">
+        <section className="relative z-10 w-full py-16 md:py-24 overflow-hidden" ref={containerRef}>
             {/* Section Header */}
-            <div ref={titleRef} className="px-6 md:px-16 mb-10 md:mb-16">
-                <motion.div
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={isTitleInView ? { opacity: 1, y: 0 } : {}}
-                    transition={{ duration: 0.5 }}
-                    className="flex flex-row items-end justify-between gap-2"
-                >
+            <div className="speakers-header px-6 md:px-16 mb-10 md:mb-16 opacity-0">
+                <div className="flex flex-row items-end justify-between gap-2">
                     <div>
                         <p className="font-mono text-sky-400 text-xs tracking-[0.3em] uppercase mb-3">
                             [ Expert Speakers ]
@@ -159,7 +190,7 @@ const CurrentSpeakers: React.FC = () => {
                             <ChevronRight size={20} />
                         </button>
                     </div>
-                </motion.div>
+                </div>
 
                 <div className="mt-6 h-[1px] w-full bg-gradient-to-r from-sky-400/60 via-sky-400/20 to-transparent" />
             </div>
@@ -180,7 +211,7 @@ const CurrentSpeakers: React.FC = () => {
             </div>
 
             {/* Speaker Bio Modal */}
-            <motion.div initial={false}>
+            <AnimatePresence>
                 {selectedSpeaker && (
                     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 md:p-10 text-left">
                         {/* Backdrop */}
@@ -248,7 +279,7 @@ const CurrentSpeakers: React.FC = () => {
                         </motion.div>
                     </div>
                 )}
-            </motion.div>
+            </AnimatePresence>
         </section>
     );
 };

From 8dd965a30523600dfe1ee86c394a95b3bb0a9cec Mon Sep 17 00:00:00 2001
From: Nitansh Shankar <167768158+BIJJUDAMA@users.noreply.github.com>
Date: Wed, 1 Apr 2026 16:05:38 +0530
Subject: [PATCH 5/5] feat: added + nodes for sponsors

---
 src/components/landing/PastSponsorsTable.tsx | 95 +++++++++++++++++---
 1 file changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/components/landing/PastSponsorsTable.tsx b/src/components/landing/PastSponsorsTable.tsx
index 67c95ed..917b8f4 100644
--- a/src/components/landing/PastSponsorsTable.tsx
+++ b/src/components/landing/PastSponsorsTable.tsx
@@ -1,7 +1,13 @@
 "use client";
 
-import React from 'react';
-import { motion } from 'framer-motion';
+import React, { useRef } from 'react';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+if (typeof window !== 'undefined') {
+  gsap.registerPlugin(ScrollTrigger);
+}
 
 const sponsors = [
     { name: 'Schneider Electric', logo: '/assets/images/past_sponsors/Schneider.png' },
@@ -19,8 +25,62 @@ const sponsors = [
 ];
 
 const PastSponsorsTable = () => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useGSAP(() => {
+        if (!containerRef.current) return;
+
+        const cells = containerRef.current.querySelectorAll('.sponsor-cell');
+        
+        // Initial state set via CSS (opacity: 0)
+        
+        gsap.to(cells, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.8,
+            stagger: 0.1,
+            ease: 'expo.out',
+            scrollTrigger: {
+                trigger: containerRef.current,
+                start: 'top 85%',
+                toggleActions: 'play none none none'
+            },
+            onStart: (target) => {
+                // Simplified Decoding jitter effect using random opacity jumps
+                gsap.to(cells, {
+                    opacity: 1,
+                    overwrite: 'auto'
+                });
+            }
+        });
+
+        // Add a secondary "decoding" flutter for each element
+        cells.forEach((cell, i) => {
+            gsap.fromTo(cell, 
+                { opacity: 0 },
+                {
+                    opacity: 1,
+                    duration: 0.1,
+                    repeat: 4,
+                    repeatDelay: 0.05,
+                    yoyo: true,
+                    delay: i * 0.1, // Match stagger
+                    scrollTrigger: {
+                        trigger: containerRef.current,
+                        start: 'top 85%',
+                    },
+                    onComplete: () => {
+                        gsap.set(cell, { opacity: 1 });
+                    }
+                }
+            );
+        });
+
+    }, { scope: containerRef });
+
     return (
-        <section className="w-full relative py-16 md:py-24 bg-obsidian/80 border-t border-sky-400/10" id="past-sponsors">
+        <section className="w-full relative py-16 md:py-24 bg-obsidian/80 border-t border-sky-400/10" id="past-sponsors" ref={containerRef}>
             <div className="container mx-auto px-4 max-w-6xl">
                 <div className="mb-12 flex flex-col items-center gap-4 text-center">
                     <div className="flex items-center gap-4 md:gap-6">
@@ -32,17 +92,14 @@ const PastSponsorsTable = () => {
                     </div>
                 </div>
 
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 border-l border-t border-sky-400/10">
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 border-l border-t border-sky-400/10 relative">
+                    {/* Parent Grid Intersection Nodes (Top/Left edges) */}
+                    <div className="absolute -top-[5px] -left-[3px] text-sky-400/40 font-mono text-[10px] z-20">+</div>
+                    
                     {sponsors.map((sponsor, index) => (
-                        <motion.div
+                        <div
                             key={sponsor.name}
-                            initial={{ opacity: 0 }}
-                            whileInView={{ opacity: 1 }}
-                            viewport={{ once: true }}
-                            transition={{ delay: index * 0.05 }}
-                            className={`aspect-[5/2] flex items-center justify-center border-r border-b border-sky-400/10 group hover:bg-sky-400/5 transition-all duration-300 relative overflow-hidden ${
-                                sponsor.isLarge ? 'p-2' : 'p-8'
-                            }`}
+                            className={`sponsor-cell aspect-[5/2] flex items-center justify-center border-r border-b border-sky-400/10 group hover:bg-sky-400/5 transition-all duration-300 relative overflow-visible opacity-0 transform translate-y-4`}
                         >
                             <img
                                 src={sponsor.logo}
@@ -60,7 +117,19 @@ const PastSponsorsTable = () => {
                             <div className="absolute top-0 right-0 w-1.5 h-1.5 border-r border-t border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                             <div className="absolute bottom-0 left-0 w-1.5 h-1.5 border-l border-b border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                             <div className="absolute bottom-0 right-0 w-1.5 h-1.5 border-r border-b border-sky-400 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-                        </motion.div>
+
+                            {/* Persistent Intersection Nodes (Bottom-Right of every cell) */}
+                            <div className="absolute -bottom-[6px] -right-[3px] text-sky-400/40 font-mono text-[10px] z-20">+</div>
+                            
+                            {/* Internal Top-Right intersections for the first row */}
+                            {index < 3 && (
+                                <div className="absolute -top-[6px] -right-[3px] text-sky-400/40 font-mono text-[10px] z-20">+</div>
+                            )}
+                            {/* Internal Bottom-Left intersections for the first column */}
+                            {index % 3 === 0 && (
+                                <div className="absolute -bottom-[6px] -left-[3px] text-sky-400/40 font-mono text-[10px] z-20">+</div>
+                            )}
+                        </div>
                     ))}
                 </div>
             </div>