carousel nearly finished, need animation for background

Author: addison

frontend/src/components/Carousel.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { sponsorInfo } from "../../public/data/sponsorInfos";
+
+interface CarouselImages {
+    images: { category: string; href: string; svg: string; alt: string; description: string; }[];
+    onImageClick: (info: sponsorInfo) => void;
+}
+
+export default function Carousel({ images, onImageClick }: CarouselImages) {
+    return (
+        <div className="carousel flex flex-col items-center w-full px-20 py-6">
+            <div className="flex justify-center flex-wrap gap-20 w-full">
+                {images.map((image, index) => (
+                    <img
+                        key={index}
+                        src={image.svg}
+                        alt={image.alt}
+                        className="cursor-pointer transform transition-transform duration-300 hover:scale-105 object-contain"
+                        style={{ height: '150px', maxWidth: '225px' }}
+                        onClick={() => onImageClick(image)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

frontend/src/pages/sponsors.tsx

@@ -3,22 +3,44 @@ import { useState } from 'react';
 import { diamondLinks, goldLinks, silverLinks, sponsorInfo } from '@/../public/data/sponsorInfos';
 import SponsorModal from '@/components/Sponsors/SponsorModal';
 import PageTitle from '@/components/PageTitle';
+import Carousel from '@/components/Carousel';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export default function SponsorsPage() {
-  const logostyle = 'grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105';
-  const logodiv = 'block gap-y-8 h-14';
   const background = 'rgba(57, 119, 248, 0.6)';
 
   const [showModal, setShowModal] = useState(false);
   const [information, setInformation] = useState<sponsorInfo | null>(null);
+  const [currentCategory, setCurrentCategory] = useState<'Diamond' | 'Gold' | 'Silver'>('Diamond');  
+
+  const sponsors = {
+    Diamond: diamondLinks,
+    Gold: goldLinks,
+    Silver: silverLinks
+  }
+
+  const handleClick = (info: sponsorInfo) => {
+    setInformation(info);
+    setShowModal(true);
+  };
+
+  const handleCategoryChange = (category: 'Diamond' | 'Gold' | 'Silver') => {
+    setCurrentCategory(category);
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+    exit: { opacity: 0, y: 20, transition: { duration: 0.3 } },
+  };
 
   return (
     <Layout>
-      <PageTitle title="SPONSORS" />
-      
+      <PageTitle title="Our Sponsors" />
+
       <section className="py-8">
         <div className="flex justify-center items-center mb-20">
-          <div className="w-100 flex flex-col gap-16">
+          <div className="w-full flex flex-col gap-16">
             {showModal && (
               <SponsorModal
                 sponsorInfo={information}
@@ -29,63 +51,43 @@ export default function SponsorsPage() {
             )}
             <div
               style={{ backgroundColor: `${background}` }}
-              className="flex flex-wrap rounded-[1rem] pl-14 py-14 gap-16 items-center"
-            >
-              <h2 className="text-4xl font-black">Diamond Sponsors</h2>
-              {diamondLinks.map((item, index) => {
-                return (
-                  <div
-                    key={index}
-                    className={`${logodiv}`}
-                    onClick={() => {
-                      setInformation(item);
-                      setShowModal(true);
-                    }}
-                  >
-                    <img className={`h-14 ${logostyle}`} src={item.svg} alt={item.alt} />
-                  </div>
-                );
-              })}
-            </div>
-            <div
-              style={{ backgroundColor: `${background}` }}
-              className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
+              className="relative flex flex-col items-center rounded-[1rem] p-14 gap-16 justify-center"
             >
-              <h2 className="text-4xl font-black">Gold Sponsors</h2>
-              {goldLinks.map((item, index) => {
-                return (
-                  <div
-                    key={index}
-                    className=""
-                    onClick={() => {
-                      setInformation(item);
-                      setShowModal(true);
-                    }}
+
+              <div className="absolute top-4 left-8 py-8 px-12 w-full flex justify-around">
+                {['Diamond', 'Gold', 'Silver'].map(category => (
+                  <h2
+                    key={category}
+                    className={`text-2xl mb-4 cursor-pointer transform transition-transform duration-300 ease-in-out ${
+                      currentCategory === category ? 'text-green-500 scale-110' : 'text-white'
+                    } hover:scale-105`}
+                    onClick={() => handleCategoryChange(category as 'Diamond' | 'Gold' | 'Silver')}
                   >
-                    <img className={`h-6 ${logostyle}`} src={item.svg} alt={item.alt} />
-                  </div>
-                );
-              })}
-            </div>
-            <div
-              style={{ backgroundColor: `${background}` }}
-              className="flex flex-wrap rounded-[1rem] px-14 py-14 gap-16 items-center"
-            >
-              <h2 className="text-4xl font-black">Silver Sponsors</h2>
-              {silverLinks.map((item, index) => {
-                return (
-                  <div
-                    key={index}
-                    className="h-14"
-                    onClick={() => {
-                      setInformation(item);
-                      setShowModal(true);
-                    }}
+                    // {category.toLowerCase()}
+                  </h2>
+                ))}
+              </div>
+
+              <div className="mt-16 w-full flex justify-center flex-wrap gap-24">
+                <AnimatePresence mode='wait'>
+                  <motion.div
+                    key={currentCategory}
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                    exit="exit"
+                    className="w-full flex justify-center"
                   >
-                    <img className={`h-8 ${logostyle}`} src={item.svg} alt={item.alt} />
-                  </div>
-                );
-              })}
+                    <Carousel
+                      images={sponsors[currentCategory].map(item => ({
+                        ...item,
+                        category: currentCategory,
+                      }))}
+                      onImageClick={handleClick}
+                    />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
             </div>
           </div>
         </div>