sponsors animation

Author: siddharthd0

src/app/page.js

@@ -12,7 +12,6 @@ import Sponsors from "@/components/sponsors";
 const sponsorsData = [
   { imagePath: "/sponsors/open-ai.png", link: "https://openai.com" },
   { imagePath: "/sponsors/azure.png", link: "https://azure.microsoft.com" },
-  { imagePath: "/sponsors/google.png", link: "https://google.com" },
   {
     imagePath: "/sponsors/replit.png",
     link: "https://replit.com",
@@ -27,20 +26,19 @@ const sponsorsData = [
     imagePath: "/sponsors/wolfram.png",
     link: "https://wolfram.com",
   },
- 
+
   { imagePath: "/sponsors/axure.svg", link: "https://axure.com" },
-  
+
   {
     imagePath: "/sponsors/interview-cake.jpg",
     link: "https://interviewcake.com",
   },
- 
+
   {
     imagePath: "/sponsors/aops.png",
     link: "https://artofproblemsolving.com",
   },
-  
- 
+
   { imagePath: "/sponsors/cocalc.png", link: "https://cocalc.com" },
   {
     imagePath: "/sponsors/taskade.png",
@@ -61,11 +59,16 @@ export default function Home() {
     <Box my={["20px", "130px"]} px={5}>
       <Popup />
       <HeroHeader />
-      <Heading fontSize="4xl" textAlign="center" color="black" mt="70px">
+      <Heading
+        fontSize={["3xl", "4xl"]}
+        textAlign="center"
+        color="black"
+        mt="70px"
+      >
         Partners & Sponsors
       </Heading>
       <Heading
-        fontSize="xl"
+        fontSize={["md", "xl"]}
         textAlign="center"
         color="blackAlpha.800"
         fontWeight="medium"

src/components/sponsors.jsx

@@ -1,46 +1,89 @@
 import { Box, Flex, Link } from "@chakra-ui/react";
-
+import React, { useRef, useEffect } from "react";
+import { motion } from "framer-motion";
 const SponsorCard = ({ imagePath, link }) => {
   return (
     <Link href={link} isExternal>
-      <Box 
-        mx={2} 
-        mb={4} 
-        borderRadius="md" 
-        width="140px" 
-        height="100px" 
-        display="flex" 
-        alignItems="center" 
+      <Box
+        mx={4}
+        mb={4}
+        borderRadius="md"
+        width="140px"
+        height="100px"
+        display="flex"
+        alignItems="center"
         justifyContent="center"
         overflow="hidden"
-        _hover={{ transform: 'scale(1.05)' }}
+        _hover={{ transform: "scale(1.05)" }}
         transition="transform 0.2s ease-in-out"
       >
         <img src={imagePath} alt="Sponsor" width="100%" />
       </Box>
     </Link>
   );
-}
-
+};
+const TranslateWrapper = ({ children, reverse }) => {
+  return (
+    <>
+      <motion.div
+        initial={{ translateX: reverse ? "-100%" : "0%" }}
+        animate={{ translateX: reverse ? "0%" : "-100%" }}
+        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
+      >
+        {children}
+        
+      </motion.div>
+    </>
+  );
+};
 const Sponsors = ({ sponsors }) => {
-  const halfLength = Math.ceil(sponsors.length / 2);
-  const firstRowSponsors = sponsors.slice(0, halfLength);
-  const secondRowSponsors = sponsors.slice(halfLength);
-
   return (
-    <Box mt="2rem" w="100%" >
-      <Flex gap="10px" direction="row" justifyContent="center" wrap="wrap" mb={4}>
-        {firstRowSponsors.map((sponsor, index) => (
-          <SponsorCard key={index} imagePath={sponsor.imagePath} link={sponsor.link} />
-        ))}
-      </Flex>
-      <Flex gap="10px" direction="row" justifyContent="center" wrap="wrap">
-        {secondRowSponsors.map((sponsor, index) => (
-          <SponsorCard key={index} imagePath={sponsor.imagePath} link={sponsor.link} />
-        ))}
-      </Flex>
+    <Box
+      mx="auto"
+      mt="2rem"
+      w={["100%", "80%"]}
+      overflow="hidden"
+      position="relative"
+      sx={{
+        "::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: ["70px", "100px", "200px", "250px"],
+          background:
+            "linear-gradient(to right, #FCFCFC, rgba(255, 255, 255, 0))",
+          zIndex: 2,
+          pointerEvents: "none",
+        },
+        "::after": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          width: ["70px", "100px", "200px", "250px"],
+          background:
+            "linear-gradient(to left, #FCFCFC, rgba(255, 255, 255, 0))",
+          zIndex: 2,
+          pointerEvents: "none",
+        },
+      }}
+    >
+      <TranslateWrapper>
+        <Flex direction="row">
+          {sponsors.map((sponsor, index) => (
+            <SponsorCard
+              key={index}
+              imagePath={sponsor.imagePath}
+              link={sponsor.link}
+            />
+          ))}
+        </Flex>
+      </TranslateWrapper>
     </Box>
   );
-}
+};
 
 export default Sponsors;