add logo slider w compressed photos

src/app/page.tsx

@@ -37,6 +37,7 @@ import {
 } from "@/components/ui/card";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import LogoSlider from "@/components/logo-slider";
 
 export default function HomePage() {
   const [mailingList, setMailingList] = useState({
@@ -287,41 +288,25 @@ export default function HomePage() {
             </div>
           </div>
         </div>
-
         <div
           className=""
           style={{
             backgroundImage: "url('media/WelcomeWeek25/welcome-week-25-3.jpg')",
             backgroundSize: "cover",
-            backgroundPosition: "center",
+            backgroundPosition: "bottom",
             backgroundRepeat: "no-repeat",
           }}
         >
           <div className="bg-black bg-opacity-70 p-16">
-            <div className="flex flex-col items-center justify-center text-center text-white lg:mb-48 lg:ml-64 lg:mr-64 lg:mt-16">
-              <h1 className="p-16">ABOUT FSAE</h1>
-              <p className="text-xl">
-                FSAE Electric, initiated in 2013, is a cutting-edge addition to
-                the Formula SAE competition. It focuses on the development of
-                vehicles powered exclusively by electric motors, aligning with
-                the global shift towards sustainable and eco-friendly
-                transportation solutions.
-              </p>
-              <p className="mt-2 text-xl lg:mt-4">
-                Each year, over 400 teams from universities worldwide
-                participate in events hosted globally. Teams go head-to-head,
-                defending their design choices in static events under the
-                scrutiny of industry judges. The real test comes in dynamic
-                events, where our vehicles' performance and our drivers' skills
-                are put to the ultimate test. Winning top honors requires
-                excelling in multiple categories, showcasing the culmination of
-                our team's hard work and dedication.
-              </p>
-              <div className="flex w-full justify-center pt-8">
-                <Link href={FSAE_LINKS.ev}>
-                  <OutlineButton>MORE ABOUT FSAE</OutlineButton>
+            <div className="flex flex-col items-center justify-center text-center text-white lg:mb-24 lg:ml-16 lg:mr-16 lg:mt-8">
+              <h1 className="p-8">WHERE WE WORK</h1>
+              <p className="mb-8 text-xl lg:ml-32 lg:mr-32"></p>
+              <LogoSlider />
+              {/* <div className="flex w-full justify-center pt-8">
+                <Link href="/where-we-work">
+                  <OutlineButton>READ MORE</OutlineButton>
                 </Link>
-              </div>
+              </div> */}
             </div>
           </div>
         </div>
@@ -534,6 +519,46 @@ export default function HomePage() {
             </div>
           </div>
         </div>
+
+        <div
+          className="w-full"
+          style={{
+            backgroundImage: "url('placeholder.png')",
+
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+          }}
+        >
+          <div className="bg-black bg-opacity-70 p-16">
+            <div className="flex flex-col items-center justify-center text-center text-white lg:mb-8 lg:ml-48 lg:mr-48 lg:mt-8">
+              <h1 className="p-8">ABOUT FSAE</h1>
+              <p className="text-xl">
+                FSAE Electric, initiated in 2013, is a cutting-edge addition to
+                the Formula SAE competition. It focuses on the development of
+                vehicles powered exclusively by electric motors, aligning with
+                the global shift towards sustainable and eco-friendly
+                transportation solutions.
+              </p>
+              <p className="mt-2 text-xl lg:mt-4">
+                Each year, over 400 teams from universities worldwide
+                participate in events hosted globally. Teams go head-to-head,
+                defending their design choices in static events under the
+                scrutiny of industry judges. The real test comes in dynamic
+                events, where our vehicles' performance and our drivers' skills
+                are put to the ultimate test. Winning top honors requires
+                excelling in multiple categories, showcasing the culmination of
+                our team's hard work and dedication.
+              </p>
+              <div className="flex w-full justify-center pt-8">
+                <Link href={FSAE_LINKS.ev}>
+                  <OutlineButton>MORE ABOUT FSAE</OutlineButton>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <Footer />
       </main>
     </HydrationProvider>

src/components/logo-slider.tsx

@@ -0,0 +1,107 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+type LogoSliderProps = {
+  logos?: string[];
+};
+
+const defaultLogos = [
+  "home/where-we-work/spacex.png",
+  "home/where-we-work/nvidia.png",
+  "home/where-we-work/boeing.png",
+  "home/where-we-work/rivian.png",
+  "home/where-we-work/nasa.png",
+  "home/where-we-work/honda-racing.png",
+  "home/where-we-work/hp.png",
+  "home/where-we-work/tesla.png",
+  "home/where-we-work/blue-origin.png",
+  "home/where-we-work/itt.png",
+  "home/where-we-work/haas.png",
+  "home/where-we-work/applied-materials.png",
+  "home/where-we-work/ey.png",
+  "home/where-we-work/northrop-grumman.png",
+  "home/where-we-work/arm.png",
+  "home/where-we-work/western-digital.png",
+];
+
+export default function LogoSlider({ logos = defaultLogos }: LogoSliderProps) {
+  const firstRowBaseLogos = logos.filter((_, index) => index % 2 === 0);
+  const secondRowBaseLogos = logos.filter((_, index) => index % 2 !== 0);
+
+  const firstRowLogos = [
+    ...(firstRowBaseLogos.length ? firstRowBaseLogos : logos),
+    ...(firstRowBaseLogos.length ? firstRowBaseLogos : logos),
+  ];
+  const secondRowLogos = [
+    ...(secondRowBaseLogos.length ? secondRowBaseLogos : logos),
+    ...(secondRowBaseLogos.length ? secondRowBaseLogos : logos),
+  ];
+
+  return (
+    <div
+      className="relative w-full overflow-hidden py-6"
+      style={{
+        WebkitMaskImage:
+          "linear-gradient(to right, transparent, transparent 1%, black, black, transparent 100%, transparent)",
+      }}
+    >
+      <div className="flex flex-col gap-4">
+        <motion.div
+          className="flex w-max items-center"
+          animate={{ x: ["0%", "-50%"] }}
+          transition={{
+            x: {
+              repeat: Infinity,
+              repeatType: "loop",
+              duration: 60,
+              ease: "linear",
+            },
+          }}
+        >
+          {firstRowLogos.map((logo, index) => (
+            <div
+              key={`row1-${logo}-${index}`}
+              className="flex shrink-0 items-center justify-center rounded-md p-4"
+            >
+              <Image
+                src={`/${logo}`}
+                alt="Company logo"
+                width={200}
+                height={75}
+                className="max-h-28 object-contain"
+              />
+            </div>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="flex w-max items-center"
+          animate={{ x: ["-50%", "0%"] }}
+          transition={{
+            x: {
+              repeat: Infinity,
+              repeatType: "loop",
+              duration: 60,
+              ease: "linear",
+            },
+          }}
+        >
+          {secondRowLogos.map((logo, index) => (
+            <div
+              key={`row2-${logo}-${index}`}
+              className="mx-6 flex h-24 w-56 shrink-0 items-center justify-center rounded-md p-4"
+            >
+              <Image
+                src={`/${logo}`}
+                alt="Company logo"
+                width={200}
+                height={75}
+                className="max-h-28 object-contain"
+              />
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}