Feature logo slider

package.json

@@ -15,6 +15,8 @@
 		"react-intersection-observer": "^9.5.2",
 		"react-router-dom": "^6.16.0",
 		"react-router-hash-link": "^2.4.3",
+		"react-slick": "^0.29.0",
+		"slick-carousel": "^1.8.1",
 		"web-vitals": "^3.4.0"
 	},
 	"scripts": {

src/components/sections/sponsors.jsx

@@ -10,29 +10,33 @@ const sponsorImages = import.meta.glob("../../images/sponsors/*", { eager: true,
 
 // Components
 const Section = React.lazy(() => import('../section'));
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 function Sponsors() {
+	const settings = {
+		infinite: true,
+		slidesToShow: 4,
+      	slidesToScroll: 1,
+		adaptiveHeight: true,
+		autoplay: true,
+		speed: 4100,
+		autoplaySpeed: 0,
+		cssEase: "linear",
+	}
 	return (
 		<Section id='our-sponsors' bgColor='bg-white' textAlignment='center'>
 			<h2>{i18n.t('sponsors.title')}</h2>
-			<div className='flex flex-col sm:flex-row flex-wrap justify-center items-center w-full h-full'>
-				{sponsors.map((sponsor, index) => {
-					return (
-						<div
-							key={index}
-							className='w-full md:w-4/12 lg:w-3/12 h-2/6 sm:h-3/6 p-2 flex flex-col justify-center items-center'
-						>
-							<a href={sponsor.link} rel='noreferrer' target='_blank'>
-								<img
-									className='h-32  w-36 object-contain'
-									src={sponsorImages[`../../images/sponsors/${sponsor.src}`]}
-									alt={i18n.t(sponsor.alt)}
-								/>
-							</a>
-						</div>
-					);
-				})}
-			</div>
+			<Slider {...settings}>
+				{sponsors.map((sponsor, index) => (
+					<div key={index} className="py-10 px-5 mx-10" >	
+					<a href={sponsor.link} rel='noreferrer' target='_blank'>
+						<img src={sponsorImages[`../../images/sponsors/${sponsor.src}`]} alt={i18n.t(sponsor.alt)} className=" h-24 my-0 mx-auto"/>
+					</a>	
+					</div>
+				))}
+			</Slider>
 		</Section>
 	);
 }

src/data/sponsors.json

@@ -1,4 +1,9 @@
 [
+  {
+    "src": "2pi.png",
+    "alt": "sponsors.logos.pi",
+    "link": "https://2pi.network/"
+  },
   {
     "src": "extrimian.png",
     "alt": "sponsors.logos.extrimian",
@@ -9,44 +14,84 @@
     "alt": "sponsors.logos.auth0",
     "link": "https://auth0.com/"
   },
+  {
+    "src": "poap.png",
+    "alt": "sponsors.logos.poap",
+    "link": "https://poap.xyz/"
+  },
   {
     "src": "vercel.png",
     "alt": "sponsors.logos.vercel",
     "link": "https://vercel.com/"
   },
+  {
+    "src": "flowics.svg",
+    "alt": "sponsors.logos.flowics",
+    "link": "https://www.flowics.com/"
+  }, 
   {
     "src": "ef.png",
     "alt": "sponsors.logos.ef",
     "link": "https://ethereum.org/"
   },
   {
-    "src": "2pi.png",
-    "alt": "sponsors.logos.pi",
-    "link": "https://2pi.network/"
+    "src":"modo.png",
+    "alt": "sponsors.logos.modo",
+    "link": "https://www.modo.com.ar/"
+  },
+  {
+    "src":"PAE.png",
+    "alt":"sponsors.logos.PAE",
+    "link":"https://www.pan-energy.com/"
+  },
+  {
+    "src": "daffy.svg",
+    "alt": "sponsors.logos.daffy",
+    "link": "https://daffy.org/"
+  },
+  {
+    "src":"Emi.png",
+    "alt":"sponsors.logos.Emi",
+    "link":"https://www.emilabs.ai/"
+  },
+  {
+    "src":"Accenture.png",
+    "alt":"sponsors.logos.Accenture",
+    "link":"https://www.accenture.com/"
+  },
+  {
+    "src":"Nestle.png",
+    "alt": "sponsors.logos.Nestle",
+    "link": "https://www.nestle.com.ar/"
+  },
+  {
+    "src":"BuenosAiresCiudad.png",
+    "alt":"sponsors.logos.BuenosAiresCiudad",
+    "link":"https://www.buenosaires.gob.ar/"
+  },
+  {
+    "src":"MetLife.png",
+    "alt":"sponsors.logos.MetLife",
+    "link":"https://www.metlife.com.ar/"
   },
   {
     "src": "oz.png",
     "alt": "sponsors.logos.oz",
     "link": "https://openzeppelin.com/"
   },
   {
-    "src": "exactly.svg",
-    "alt": "sponsors.logos.exactly",
-    "link": "https://https://exactly.finance/"
+    "src":"BBVA.png",
+    "alt":"sponsors.logos.BBVA",
+    "link":"https://www.bbva.com.ar/"
   },
   {
-    "src": "poap.png",
-    "alt": "sponsors.logos.poap",
-    "link": "https://poap.xyz/"
-  },
-  {
-    "src": "flowics.svg",
-    "alt": "sponsors.logos.flowics",
-    "link": "https://www.flowics.com/"
+    "src":"Defy.png",
+    "alt":"sponsors.logos.Defy",
+    "link":"https://www.defyeducation.com"
   },
   {
-    "src": "daffy.svg",
-    "alt": "sponsors.logos.daffy",
-    "link": "https://daffy.org/"
-  }
+    "src": "exactly.svg",
+    "alt": "sponsors.logos.exactly",
+    "link": "https://https://exactly.finance/"
+  }  
 ]

src/i18n/en.js

@@ -287,7 +287,16 @@ const i18n_en = {
 			exactly: 'Exactly Finance logo',
 			poap: 'Poap logo',
 			flowics: 'Flowics logo',
-			daffy: 'Daffy logo'
+			daffy: 'Daffy logo',
+			Accenture: 'Accenture logo',
+			BBVA: 'BBVA logo',
+			BuenosAiresCiudad: 'Buenos Aires Ciudad logo',
+			Defy: 'Defy logo',
+			Emi: 'Emi logo',
+			MetLife: 'MetLife logo',
+			modo: 'MODO logo',
+			Nestle: 'Nestle logo',
+			PAE: 'Pan American Energy logo',
 		}
 	},
 	contact: {

src/i18n/es.js

@@ -286,7 +286,16 @@ const i18n_es = {
 			exactly: 'Logo de Exactly Finance',
 			poap: 'Logo de Poap',
 			flowics: 'Logo de Flowics',
-			daffy: 'Logo de Daffy'
+			daffy: 'Logo de Daffy',
+			Accenture: 'Logo de Accenture',
+			BBVA: 'Logo de BBVA',
+			BuenosAiresCiudad: 'Logo de Buenos Aires Ciudad',
+			Defy: 'Logo de Defy',
+			Emi: 'Logo de Emi',
+			MetLife: 'Logo de MetLife',
+			modo: 'Logo de Modo',
+			Nestle: 'Logo de Nestle',
+			PAE: 'Logo de Pan American Energy',
 		}
 	},
 	contact: {