theDS3
diff --git a/‎src/app/datathon/page.tsx‎
Lines changed: 3 additions & 4 deletions b/‎src/app/datathon/page.tsx‎
Lines changed: 3 additions & 4 deletions
diff --git a/‎src/components/Datathon/HighlightCarousel/index.tsx‎
Lines changed: 135 additions & 67 deletions b/‎src/components/Datathon/HighlightCarousel/index.tsx‎
Lines changed: 135 additions & 67 deletions
diff --git a/‎src/components/Datathon/Sponsors/index.tsx‎
Lines changed: 6 additions & 6 deletions b/‎src/components/Datathon/Sponsors/index.tsx‎
Lines changed: 6 additions & 6 deletions
diff --git a/‎src/components/Main/Sponsors/SponsorCard/index.tsx‎
Lines changed: 30 additions & 13 deletions b/‎src/components/Main/Sponsors/SponsorCard/index.tsx‎
Lines changed: 30 additions & 13 deletions
diff --git a/‎src/components/Main/Sponsors/index.tsx‎
Lines changed: 37 additions & 17 deletions b/‎src/components/Main/Sponsors/index.tsx‎
Lines changed: 37 additions & 17 deletions
diff --git a/‎src/public/Sponsors/Databricks.svg‎
Lines changed: 35 additions & 0 deletions b/‎src/public/Sponsors/Databricks.svg‎
Lines changed: 35 additions & 0 deletions
diff --git a/‎src/public/Datathon/Sponsors/FGF.svg‎ ‎src/public/Sponsors/FGF.svg‎src/public/Datathon/Sponsors/FGF.svg renamed to src/public/Sponsors/FGF.svg b/‎src/public/Datathon/Sponsors/FGF.svg‎ ‎src/public/Sponsors/FGF.svg‎src/public/Datathon/Sponsors/FGF.svg renamed to src/public/Sponsors/FGF.svg
diff --git a/‎…ublic/Datathon/Sponsors/Klick Health.svg‎ ‎src/public/Sponsors/Klick Health.svg‎src/public/Datathon/Sponsors/Klick Health.svg renamed to src/public/Sponsors/Klick Health.svg b/‎…ublic/Datathon/Sponsors/Klick Health.svg‎ ‎src/public/Sponsors/Klick Health.svg‎src/public/Datathon/Sponsors/Klick Health.svg renamed to src/public/Sponsors/Klick Health.svg
diff --git a/‎src/public/Datathon/Sponsors/MLH.svg‎ ‎src/public/Sponsors/MLH.svg‎src/public/Datathon/Sponsors/MLH.svg renamed to src/public/Sponsors/MLH.svg b/‎src/public/Datathon/Sponsors/MLH.svg‎ ‎src/public/Sponsors/MLH.svg‎src/public/Datathon/Sponsors/MLH.svg renamed to src/public/Sponsors/MLH.svg
diff --git a/‎…c/public/Datathon/Sponsors/MSReactor.svg‎ ‎src/public/Sponsors/MSReactor.svg‎src/public/Datathon/Sponsors/MSReactor.svg renamed to src/public/Sponsors/MSReactor.svg b/‎…c/public/Datathon/Sponsors/MSReactor.svg‎ ‎src/public/Sponsors/MSReactor.svg‎src/public/Datathon/Sponsors/MSReactor.svg renamed to src/public/Sponsors/MSReactor.svg
@@ -9,7 +9,6 @@ import DatathonHero from '@/components/Datathon/Hero';
 import AboutDatathon from '@/components/Datathon/About';
 import { FAQ } from '@/components/Datathon/FAQ';
 import { ImageCarousel } from '@/components/Datathon/HighlightCarousel';
-import Sponsors from '@/components/Datathon/Sponsors';
 
 import img1 from '@/public/Datathon/carousel/IMG_1818.png';
 import img2 from '@/public/Datathon/carousel/IMG_1883.png';
@@ -73,7 +72,7 @@ export default function Datathon() {
   const links: Link[] = [
     { title: 'Home', href: '/' },
     { title: 'About', href: '#about-us' },
-    { title: 'Sponsors', href: '#sponsors' },
+    //{ title: 'Sponsors', href: '#sponsors' },
     { title: 'Highlights', href: '#highlights' },
     { title: 'FAQ', href: '#faq' },
   ];
@@ -94,10 +93,10 @@ export default function Datathon() {
             </p>
             <LinkButton
               href="/datathon/leaderboard/past"
-              className="mt-6 px-12 py-2 text-lg md:text-2xl lg:text-6xl font-bold transition-all shadow-lg">
+              className="mt-6 px-12 py-2 text-lg md:text-2xl lg:text-6xl font-bold transition-all shadow-lg mb-20">
               →
             </LinkButton>
-            <Sponsors />
+            {/* <Sponsors/> Tag Removed */}
             <ImageCarousel images={images} />
             <FAQ faqs={faqs} />
           </div>
 
@@ -1,84 +1,152 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay, Pagination, EffectCoverflow } from 'swiper/modules';
 import Image from 'next/image';
-import Autoplay from 'embla-carousel-autoplay';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-coverflow';
 
 interface ImageCarouselProps {
   images: string[];
 }
 
 export function ImageCarousel({ images }: ImageCarouselProps) {
-  const [emblaRef, emblaApi] = useEmblaCarousel(
-    {
-      loop: true,
-      align: 'center',
-    },
-    [Autoplay({ playOnInit: true, stopOnInteraction: false, delay: 3000 })],
-  );
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <section className="w-full flex flex-col items-center mt-20">
+      <h1 className="text-[#d9d9d9] text-4xl md:text-6xl font-semibold tracking-widest text-center pb-4 md:pb-6">
+        Bootcamp Highlights
+      </h1>
 
-  //@ts-ignore
-  useEffect(() => {
-    if (!emblaApi) return;
+      <div className="w-full max-w-[2200px] relative">
+        <div className="mb-8 px-4 md:px-8 pt-6 md:pt-8  pb-12">
+          <Swiper
+            modules={[Autoplay, Pagination, EffectCoverflow]}
+            spaceBetween={20}
+            centeredSlides
+            loop
+            grabCursor
+            slideToClickedSlide={true}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+              pauseOnMouseEnter: true,
+            }}
+            effect="coverflow"
+            coverflowEffect={{
+              rotate: 0,
+              stretch: -80,
+              depth: 150,
+              modifier: 2,
+              slideShadows: false,
+            }}
+            pagination={{ clickable: true }}
+            breakpoints={{
+              0: { slidesPerView: 1.1, spaceBetween: 10 },
+              640: { slidesPerView: 1.5, spaceBetween: 15 },
+              1024: { slidesPerView: 2.2, spaceBetween: 20 },
+              1440: { slidesPerView: 2.5, spaceBetween: 25 },
+            }}>
+            {images.map((img, idx) => (
+              <SwiperSlide key={idx}>
+                {({ isActive }) => (
+                  <div
+                    className={`relative rounded-3xl overflow-hidden transition-all duration-500 ease-out will-change-transform cursor-pointer ${
+                      isActive
+                        ? 'scale-[1.15] brightness-100 z-10'
+                        : 'scale-95 brightness-[0.65] opacity-80'
+                    }`}
+                    style={{
+                      aspectRatio: '16/9',
+                      width: '100%',
+                      maxWidth: '900px',
+                      margin: '0 auto',
+                      pointerEvents: 'auto',
+                    }}>
+                    <Image
+                      src={img}
+                      alt={`Bootcamp Project ${idx + 1}`}
+                      fill
+                      quality={100}
+                      className="object-cover transition-transform duration-500"
+                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 70vw, 50vw"
+                      priority={idx === 0}
+                    />
+                  </div>
+                )}
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
 
-    const onSelect = () => setSelectedIndex(emblaApi.selectedScrollSnap());
-    emblaApi.on('select', onSelect);
+        <style
+          jsx
+          global>{`
+          html,
+          body {
+            overflow-x: hidden !important;
+          }
 
-    return () => emblaApi.off('select', onSelect);
-  }, [emblaApi]);
+          .swiper {
+            overflow: visible !important;
+          }
 
-  return (
-    <div
-      id="highlights"
-      className="relative w-full max-w-[95vw] mx-auto px-6 sm:px-8 lg:px-12 mt-8">
-      <h2 className="text-white text-5xl font-bold tracking-wide pb-14 text-center">
-        Last Year&apos;s Highlights
-      </h2>
-      <div
-        ref={emblaRef}
-        className="overflow-hidden">
-        <div className="flex px-6 sm:px-8 lg:px-12 gap-6 sm:gap-8 lg:gap-10">
-          {images.map((image, index) => (
-            <div
-              key={index}
-              className="relative flex-[0_0_90%] sm:flex-[0_0_60%] lg:flex-[0_0_40%] transition-transform duration-300">
-              <div
-                className={`transition-transform duration-300 ${
-                  selectedIndex === index
-                    ? 'scale-110 opacity-100'
-                    : 'scale-95 opacity-80'
-                }`}>
-                <div
-                  className="relative w-full h-0"
-                  style={{ paddingBottom: '66.25%' }}>
-                  <Image
-                    src={image}
-                    alt={`Image ${index + 1}`}
-                    layout="fill"
-                    objectFit="cover"
-                    className="rounded-lg shadow-lg"
-                    priority={index === 0}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+          .swiper-wrapper {
+            overflow: visible !important;
+          }
+
+          .swiper-slide {
+            height: auto !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            padding: 30px 0 !important;
+          }
+
+          .swiper-pagination {
+            position: relative !important;
+            width: 100% !important;
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+            gap: 12px !important;
+            padding: 40px 0 20px 0 !important;
+          }
+
+          .swiper-pagination-bullet {
+            width: 14px !important;
+            height: 14px !important;
+            background: #a855f7 !important;
+            opacity: 0.4 !important;
+            margin: 0 6px !important;
+            border-radius: 50% !important;
+            transition:
+              transform 0.2s ease,
+              opacity 0.2s ease !important;
+            cursor: pointer !important;
+          }
+
+          .swiper-pagination-bullet-active {
+            opacity: 1 !important;
+            transform: scale(1.15) !important;
+            background: #a855f7 !important;
+          }
+
+          .swiper-button-next,
+          .swiper-button-prev {
+            display: none !important;
+          }
+
+          .swiper {
+            padding-bottom: 0 !important;
+          }
 
-      <div className="flex justify-center mt-8 space-x-3 sm:space-x-4">
-        {images.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => emblaApi?.scrollTo(index)}
-            className={`w-4 h-4 sm:w-5 sm:h-5 rounded-full transition-colors ${
-              selectedIndex === index ? 'bg-white' : 'bg-gray-500'
-            }`}
-          />
-        ))}
+          .swiper-slide > div {
+            overflow: hidden !important;
+          }
+        `}</style>
       </div>
-    </div>
+    </section>
   );
 }
@@ -1,11 +1,11 @@
 import SponsorsCard, { type Sponsors } from './SponsorsCard';
 
-import FGF from '@/public/Datathon/Sponsors/FGF.svg';
-import KlickHealth from '@/public/Datathon/Sponsors/Klick Health.svg';
-import theScore from '@/public/Datathon/Sponsors/theScore.svg';
-import VectorInstitute from '@/public/Datathon/Sponsors/Vector Institute.svg';
-import MSReactor from '@/public/Datathon/Sponsors/MSReactor.svg';
-import MLH from '@/public/Datathon/Sponsors/MLH.svg';
+import FGF from '@/public/Sponsors/FGF.svg';
+import KlickHealth from '@/public/Sponsors/Klick Health.svg';
+import theScore from '@/public/Sponsors/theScore.svg';
+import VectorInstitute from '@/public/Sponsors/Vector Institute.svg';
+import MSReactor from '@/public/Sponsors/MSReactor.svg';
+import MLH from '@/public/Sponsors/MLH.svg';
 
 const sponsors: Sponsors[] = [
   {
 
@@ -1,19 +1,36 @@
-export interface Sponsor {
-  logo?: {
-    src: string;
-    alt: string;
-  };
-  text: string;
-  author: string;
-  position: string;
+import Image from 'next/image';
+import Link from 'next/link';
+import { type StaticImageData } from 'next/image';
+
+export interface Sponsors {
+  name: string;
+  logo: StaticImageData;
+  link: string;
+  className?: string;
 }
 
-export default function SponsorCard({ text, author, position }: Sponsor) {
+export default function SponsorsCard({
+  name,
+  logo,
+  link,
+  className,
+}: Sponsors) {
   return (
-    <div className="mx-auto rounded-lg bg-[#13161b] shadow-xl p-5 flex flex-col max-w-md lg:max-w-xl">
-      <p className="text-2xl pb-2">{text}</p>
-      <p className="text-sm font-bold text-right pb-1 pt-8">{author}</p>
-      <p className="text-xs font-medium text-right pb-1">{position}</p>
+    <div
+      className={`relative group rounded-xl border bg-white p-1 shadow-lg transition-transform transform hover:scale-105 ${className}`}>
+      <Link
+        href={link}
+        target="_blank"
+        rel="noopener"
+        className="block rounded-lg bg-white flex justify-center items-center
+                   w-72 h-44 sm:w-80 sm:h-48 md:w-64 md:h-36 p-6">
+        <Image
+          src={logo}
+          alt={name}
+          quality={100}
+          className="object-contain h-24 sm:h-28 md:h-20 max-w-full"
+        />
+      </Link>
     </div>
   );
 }
@@ -1,38 +1,58 @@
 import { Button } from '@/components/Button';
-import SponsorCard, { type Sponsor } from './SponsorCard';
+import SponsorsCard, { type Sponsors } from './SponsorCard';
 
-const sponsors: Sponsor[] = [
+import FGF from '@/public/Sponsors/FGF.svg';
+import KlickHealth from '@/public/Sponsors/Klick Health.svg';
+import theScore from '@/public/Sponsors/theScore.svg';
+import VectorInstitute from '@/public/Sponsors/Vector Institute.svg';
+import MSReactor from '@/public/Sponsors/MSReactor.svg';
+import MLH from '@/public/Sponsors/MLH.svg';
+import Databricks from '@/public/Sponsors/Databricks.svg';
+
+const sponsors: Sponsors[] = [
+  { name: 'Databricks', logo: Databricks, link: 'https://www.databricks.com/' },
+  {
+    name: 'Vector Institute',
+    logo: VectorInstitute,
+    link: 'https://vectorinstitute.ai/',
+  },
   {
-    text: '"... they are trendsetters trailblazers who strive to create an inclusive environment for students on campus and for students to engage with data sciences and statistics and more."',
-    author: 'Gwendolyn Wang',
-    position: 'Department Manager UTSC CMS',
+    name: 'Microsoft Reactor',
+    logo: MSReactor,
+    link: 'https://developer.microsoft.com/en-us/reactor/',
+    className: 'p-2',
   },
+  { name: 'FGF Brands', logo: FGF, link: 'https://www.fgfbrands.com/' },
+  { name: 'TheScore', logo: theScore, link: 'https://www.thescore.com/' },
+  { name: 'MLH', logo: MLH, link: 'https://mlh.io/' },
+  { name: 'Klick Health', logo: KlickHealth, link: 'https://www.klick.com/' },
 ];
 
 export default function Sponsors() {
   return (
     <section
       id="sponsors"
-      className="text-center">
-      <h2 className="text-gray-300 text-5xl font-bold tracking-wider pt-24 pb-8">
+      className="flex flex-col items-center justify-center py-24 md:py-[15vh] text-center">
+      <h2 className="text-white text-5xl font-bold tracking-wide pb-8">
         Support Our Mission!
       </h2>
-      <p className="description text-2xl px-4 md:px-20 lg:px-28">
+      <p className="description text-2xl px-4 md:px-20 lg:px-28 mb-6">
         Support our mission and make your organization visible to numerous
         capable University of Toronto students. From merchandise to customized
-        events, we support our industry partners by curating sponsorship
-        packages that fit your needs.
+        events, we curate sponsorship packages that fit your needs.
       </p>
-      {/** Do not replace the <a> tag below with <Link>
-       *   <Link> does not work after a single click
-       */}
       <a href="mailto:thedatasciencecube@gmail.com">
         <Button className="mt-6">Contact Us</Button>
       </a>
-      <div className="sponsors flex flex-col md:flex-row justify-center items-center md:justify-between md:items-start md:flex-wrap gap-8 md:gap-16 lg:gap-20 pt-8 md:pt-12">
-        {sponsors.map((sponsor: Sponsor, id) => (
-          <SponsorCard
-            key={id}
+
+      <h3 className="text-white text-5xl font-semibold tracking-wide mt-32 mb-8">
+        Our Sponsors
+      </h3>
+
+      <div className="flex flex-wrap justify-center gap-6 sm:gap-8 lg:gap-10 w-full max-w-7xl mx-auto mt-6">
+        {sponsors.map((sponsor, idx) => (
+          <SponsorsCard
+            key={idx}
             {...sponsor}
           />
         ))}