Add execs to landing page (#356)

feat: add exec profiles to landing page

src/app/auth/layout.tsx

@@ -26,22 +26,22 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               src={"/images/assets/planet1.svg"}
               alt={"planet"}
               layout={"fill"}
-              objectFit={"contain"}
+              style={{ objectFit: "contain" }}
             />
           </div>
           <div className={"w-[267px] h-[200px] absolute  left-40 bottom-10"}>
             <Image
               src={"/images/assets/planet2.svg"}
               alt={"planet"}
               layout={"fill"}
-              objectFit={"contain"}
+              style={{ objectFit: "contain" }}
             />
           </div>
           <Image
             src={"/images/assets/starsBg.svg"}
             alt={"planet"}
             layout={"fill"}
-            objectFit={"cover"}
+            style={{ objectFit: "cover" }}
           />
         </div>
         <div className="text-4xl flex-col flex gap-6 justify-center items-center">

src/components/general/execSection.tsx

@@ -1,16 +1,166 @@
-// TODO: Implement ExecSection component
+"use client";
+
+import { useMemo } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/primitives/button";
+import useIsMobile from "@/app/lib/hooks/useIsMobile";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Navigation } from "swiper/modules";
 import Image from "next/image";
+import "swiper/css";
+
 const lpFooterEllipse = "/icons/custom/footerEllipse.svg";
+const execs = [
+  {
+    name: "Armin Talaie",
+    image: "/images/execs/armin_talaie.png",
+    title: "Co-President",
+  },
+  {
+    name: "Adrienne Leung",
+    image: "/images/execs/adrienne_leung.png",
+    title: "Co-President",
+  },
+  {
+    name: "Xavier Lam",
+    image: "/images/execs/xavier_lam.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Kevin Zhang",
+    image: "/images/execs/kevin_zhang.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Tony Liu",
+    image: "/images/execs/tony_liu.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Jessie Shang",
+    image: "/images/execs/jessie_shang.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Arman Moztarzadeh",
+    image: "/images/execs/arman_moztarzadeh.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Hriday Buddhdev",
+    image: "/images/execs/hriday_buddhdev.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Jena Arianto",
+    image: "/images/execs/jena_arianto.png",
+    title: "Design Lead",
+  },
+  {
+    name: "Daphne Tian",
+    image: "/images/execs/daphne_tian.png",
+    title: "Design Lead",
+  },
+  {
+    name: "Patty Tancharoen",
+    image: "/images/execs/patty_tancharoen.png",
+    title: "Tech Lead",
+  },
+  {
+    name: "Martin Tang",
+    image: "/images/execs/martin_tang.png",
+    title: "Operations Lead",
+  },
+  {
+    name: "Allen Nguyen",
+    image: "/images/execs/allen_nguyen.png",
+    title: "Sponsorship Coordinator",
+  },
+  {
+    name: "Iris Liu",
+    image: "/images/execs/iris_liu.png",
+    title: "Marketing Coordinator",
+  },
+  {
+    name: "Ura Hwang",
+    image: "/images/execs/ura_hwang.png",
+    title: "Marketing Coordinator",
+  },
+];
 
 export default function ExecSection() {
+  const LARGE_SIZE = 1600;
+  const TABLET_SIZE = 900;
+  const MOBILE_SIZE = 768;
+  const isLargeScreen = !useIsMobile(LARGE_SIZE);
+  const isTablet = useIsMobile(TABLET_SIZE);
+  const isMobile = useIsMobile(MOBILE_SIZE);
+
+  const carouselSize = useMemo(() => {
+    if (isLargeScreen) return 6;
+    if (isTablet) return 4;
+    if (isMobile) return 3;
+    return 8;
+  }, [isLargeScreen, isTablet, isMobile]);
+
   return (
-    <div className={"w-full min-h-96 relative  flex-shrink-0"}>
+    <div className="w-full min-h-96 relative flex-shrink-0">
+      <div className="flex flex-col items-center justify-center md:justify-between py-10 w-full">
+        <div className="flex flex-col md:flex-row text-center items-center justify-between w-full md:px-10 py-10">
+          <div className="flex flex-col-reverse md:flex-row items-center">
+            <h2 className="text-3xl font-semibold py-2 md:py-0 md:pr-4">
+              Meet our <span className="text-lp-400">2024/2025</span> execs
+            </h2>
+          </div>
+          <span className="hidden md:flex md:flex-row md:space-x-2">
+            <Button variant={"dark"} className="swiper-button-prev gap-2">
+              <ArrowLeft size={20} />
+            </Button>
+            <Button variant={"dark"} className="swiper-button-next gap-2">
+              <ArrowRight size={20} />
+            </Button>
+          </span>
+        </div>
+        <div className="flex overflow-x-auto no-scrollbar mt-4 z-10 w-full">
+          <Swiper
+            spaceBetween={10}
+            slidesPerView={carouselSize}
+            loop={true}
+            modules={[Navigation]}
+            navigation={{
+              nextEl: ".swiper-button-next",
+              prevEl: ".swiper-button-prev",
+            }}
+          >
+            {execs.map((exec, index) => (
+              <SwiperSlide
+                key={index}
+                className="flex justify-center items-center min-h-[250px] p-4"
+              >
+                <div className="flex flex-col items-center">
+                  <Image
+                    src={exec.image}
+                    alt={exec.name}
+                    width={110}
+                    height={110}
+                    className="rounded-2xl"
+                  />
+                  <p className="mt-2 font-bold text-center text-lg">
+                    {exec.name}
+                  </p>
+                  <p className="text-white text-sm text-center">{exec.title}</p>
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </div>
       <Image
         src={lpFooterEllipse}
         alt="Newsletter Image"
         fill={true}
-        objectFit={"cover"}
-        className={"absolute top-1/2 left-1/2 transform translate-y-1/2 "}
+        style={{ objectFit: "cover" }}
+        className="absolute top-1/2 left-1/2 transform translate-y-1/2 z-0"
       />
     </div>
   );

src/components/general/footerSection.tsx

@@ -12,41 +12,41 @@ export default function FooterSection() {
   return (
     <section
       id={"contact"}
-      className="flex flex-col items-center py-10 relative gap-10 text-center bg-[#3A3543] min-h-[200px]  z-20 px-20 w-full "
+      className="flex flex-col items-center py-10 relative gap-10 text-center bg-[#3A3543] min-h-[200px] z-20 px-20 w-full "
     >
       <div
         className={
-          "flex md:flex-row flex-col justify-between  w-full text-left  gap-4 text-[#F5F6FF]  z-40"
+          "flex md:flex-row flex-col justify-between w-full text-left gap-4 text-[#F5F6FF]  z-40"
         }
       >
         <div
           className={
-            "flex flex-col items-center md:items-start   w-full gap-4 max-w-3xl"
+            "flex flex-col items-center md:items-start w-full gap-4 max-w-3xl"
           }
         >
           <a href="/">
             <Image src={logo} alt="Logo" width={256} height={85} unoptimized />
           </a>
-          <p className={"opacity-70"}>{text.subheading}</p>
+          <p className={"opacity-70 hidden sm:block"}>{text.subheading}</p>
         </div>
         <div
           className={
-            "sm:flex-row flex-col flex gap-4 pt-10 md:pt-0 justify-end  opacity-70 flex-1"
+            "sm:flex-row flex-col flex gap-4 pt-10 md:pt-0 justify-end opacity-70 flex-1"
           }
         >
           {footerLinks.map((section, index) => (
             <div
               key={index}
               className={
-                "flex flex-col w-full max-w-[200px] flex-shrink-0  gap-2"
+                "flex flex-col w-full max-w-[200px] flex-shrink-0 gap-2"
               }
             >
-              <h3 className={" pb-2 font-bold"}>{section.section}</h3>
+              <h3 className={"pb-2 font-bold"}>{section.section}</h3>
               {section.links.map((link, index) => (
                 <Link
                   key={index}
                   href={link.url}
-                  className={" text-[#F5F6FF] w-full hover:text-purple-400"}
+                  className={"text-[#F5F6FF] w-full hover:text-purple-400"}
                   target={"_blank"}
                   rel={"noopener noreferrer"}
                 >
@@ -57,7 +57,7 @@ export default function FooterSection() {
           ))}
         </div>
       </div>
-      <div className={" w-full   min-h-[1px] bg-white opacity-20"}></div>
+      <div className={"w-full min-h-[1px] bg-white opacity-20"}></div>
       <div
         className={"flex gap-4 justify-between sm:flex-row flex-col  w-full"}
       >

src/components/general/imageCard.tsx

@@ -42,7 +42,7 @@ const ImageCard = ({
           src={imageSrc}
           alt={alt}
           fill={true}
-          objectFit={"cover"}
+          style={{ objectFit: "cover" }}
           unoptimized
           className={`rounded overflow-hidden relative `}
         />

src/components/general/mailingList.tsx

@@ -17,19 +17,19 @@ export default function MailingList() {
     return null;
   }
   return (
-    <section className="flex flex-col items-center py-10 relative gap-10 text-center bg-[#809CFF] px-20 w-full ">
+    <section className="flex flex-col items-center md:py-10 py-20 relative gap-10 text-center bg-[#809CFF] px-20 w-full">
       <Image
         src={lpNewsletterImage}
         alt="Newsletter Image"
         fill={true}
-        className={"absolute top-0 -left-20  w-fit max-w-[592px] "}
+        className={"absolute top-0 w-fit max-w-[592px]"}
       />
       <div className={"flex flex-col items-center gap-4 max-w-3xl z-40"}>
-        <h2 className="text-4xl text-heading font-bold">{text.heading}</h2>
-        <p className="text-lg">{text.description}</p>
+        <h2 className="text-3xl text-heading font-bold">{text.heading}</h2>
+        <p className="md:text-lg text-md mb-4">{text.description}</p>
       </div>
       <form
-        className="flex h-[49px] justify-center w-full gap-4 items-center z-40 "
+        className="flex flex-col md:flex-row h-[49px] justify-center w-full gap-4 items-center z-40 "
         method={"post"}
         action={NEWSLETTER_URI}
       >
@@ -38,9 +38,9 @@ export default function MailingList() {
           type="email"
           id="bd-email"
           placeholder={text.inputPlaceholder}
-          className="p-3 h-full bg-white border-none w-96 text-[#313131] rounded-xl"
+          className="p-3 h-full bg-white border-none md:w-96 w-full text-[#313131] rounded-xl"
         />
-        <Button className="p-3 w-[129px] h-full  font-semibold text-lg rounded-xl bg-primary text-white">
+        <Button className="p-3 w-full md:w-[129px] h-full font-semibold text-lg rounded-xl bg-primary text-white">
           {text.buttonText}
         </Button>
       </form>

src/components/general/projectSection.tsx

@@ -28,25 +28,25 @@ const text = {
 };
 
 const ProjectSection = ({ projects }: ProjectSectionProps) => {
-  const MOBILESIZE = 768,
-    TABLETSIZE = 900,
-    LARGESIZE = 1600;
-  const isMobile = useIsMobile(MOBILESIZE);
-  const isLargeScreen = !useIsMobile(LARGESIZE);
-  const isTablet = useIsMobile(TABLETSIZE);
+  const LARGE_SIZE = 1600;
+  const TABLET_SIZE = 900;
+  const MOBILE_SIZE = 768;
+  const isLargeScreen = !useIsMobile(LARGE_SIZE);
+  const isTablet = useIsMobile(TABLET_SIZE);
+  const isMobile = useIsMobile(MOBILE_SIZE);
   const carouselSize = useMemo(() => {
     if (isLargeScreen) {
       return 5;
-    } else if (isMobile) {
-      return 1;
     } else if (isTablet) {
       return 2;
+    } else if (isMobile) {
+      return 1;
     } else {
       return 3;
     }
-  }, [isMobile, isLargeScreen]);
+  }, [isLargeScreen, isTablet, isMobile]);
   return (
-    <div className="flex flex-col text-center items-center justify-center md: justify-between py-10 w-full">
+    <div className="flex flex-col text-center items-center justify-center md:justify-between py-10 w-full">
       <span className="flex flex-col md:flex-row text-center items-center justify-between md:px-10 py-10 w-full">
         <span className="flex flex-col-reverse md:flex-row items-center">
           <h1 className={`text-4xl font-bold font-sans py-2 md:py-0 md:pr-4`}>

src/components/general/statistics.tsx

@@ -17,7 +17,7 @@ export default function Statistics() {
         src="/images/eclipse.svg"
         alt="eclipse"
         fill={true}
-        objectFit={"cover"}
+        style={{ objectFit: "cover" }}
         className="absolute   max-w-none  pt-8 overflow-visible top-1/2 left-0 transform  z-10 translate-y"
       />
 

src/components/layouts/genericGreeter.tsx

@@ -19,22 +19,22 @@ export default function GenericGreeter({
             src={"/images/assets/planet1.svg"}
             alt={"planet"}
             layout={"fill"}
-            objectFit={"contain"}
+            style={{ objectFit: "contain" }}
           />
         </div>
         <div className={"w-[267px] h-[200px] absolute  left-40 bottom-10"}>
           <Image
             src={"/images/assets/planet2.svg"}
             alt={"planet"}
             layout={"fill"}
-            objectFit={"contain"}
+            style={{ objectFit: "contain" }}
           />
         </div>
         <Image
           src={"/images/assets/starsBg.svg"}
           alt={"planet"}
           layout={"fill"}
-          objectFit={"cover"}
+          style={{ objectFit: "cover" }}
         />
       </div>
       {includeStyle ? (

src/components/layouts/inaccessiblePageWrapper.tsx

@@ -36,22 +36,22 @@ export default function InaccessiblePageWrapper({
             src={"/images/assets/planet1.svg"}
             alt={"planet"}
             layout={"fill"}
-            objectFit={"contain"}
+            style={{ objectFit: "contain" }}
           />
         </div>
         <div className={"w-[267px] h-[200px] absolute  left-40 bottom-10"}>
           <Image
             src={"/images/assets/planet2.svg"}
             alt={"planet"}
             layout={"fill"}
-            objectFit={"contain"}
+            style={{ objectFit: "contain" }}
           />
         </div>
         <Image
           src={"/images/assets/starsBg.svg"}
           alt={"planet"}
           layout={"fill"}
-          objectFit={"cover"}
+          style={{ objectFit: "cover" }}
         />
       </div>
       <div className="text-4xl flex-col flex gap-6 justify-center items-center">