se agregan logos de expositores

Pachix-Dev · May 15, 2024 · 5157126 · 5157126
1 parent 3014e6d
commit 5157126
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 101 deletions.
diff --git a/public/exhibitors/altech.webp b/public/exhibitors/altech.webp
diff --git a/public/exhibitors/cleveland.webp b/public/exhibitors/cleveland.webp
diff --git a/public/exhibitors/ema.webp b/public/exhibitors/ema.webp
diff --git a/public/exhibitors/mitsubishi.webp b/public/exhibitors/mitsubishi.webp
diff --git a/public/exhibitors/nsk.webp b/public/exhibitors/nsk.webp
diff --git a/public/exhibitors/vega.webp b/public/exhibitors/vega.webp
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -13,6 +13,9 @@ import { Bullets } from './Bullets'
 import { WhyExhibit } from '../WhyExhibit/WhyExhibit'
 import { AlliesStrategicSlide } from './AlliesStrategicSlide'
 import { SocialMediaSlide } from './SocialMediaSlide'
+import { MarqueeReact } from './MarqueeReact'
+import {exhibitors_1, exhibitors_2} from '../../constans_logos'
+
 export function Home() {
   const { t } = useTranslation()
   const { stateLang } = useLanguage()
@@ -86,109 +89,13 @@ export function Home() {
           </Col>
         </Row>
       </Container>
-      <Container fluid className='my-5'>
+      <Container className='my-5'>
         <h3 className='mt-5 mb-4'>{t('menu.title_exhibitors')} 2024</h3>
-        <Row className='gap-2 md:justify-content-md-center align-items-center justify-content-center pt-4'>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.benq.com/es-mx/index.html" target='_blank'>
-              <img src="/exhibitors/benq.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="http://www.ryasa.com.mx/" target='_blank'>
-              <img src="/exhibitors/ryasa.webp" alt="ryasa" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.euchner.mx/" target='_blank'>
-              <img src="/exhibitors/euchner.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.ifm.com/mx/" target='_blank'>
-              <img src="/exhibitors/ifm.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-        </Row>
-        <Row className='gap-2 md:justify-content-md-center align-items-center justify-content-center pt-4'>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.ika.technology/" target='_blank'>
-              <img src="/exhibitors/ika.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.infoportal-mx.com/" target='_blank'>
-              <img src="/exhibitors/info-portal.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://shop.knipex.com.mx/" target='_blank'>
-              <img src="/exhibitors/knipex.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://store.lacasadelcontrol.com.mx/" target='_blank'>
-              <img src="/exhibitors/ccg.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-        </Row>
-        <Row className='gap-2 md:justify-content-md-center align-items-center justify-content-center pt-4'>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.leanmdc.com/" target='_blank'>
-              <img src="/exhibitors/lean-mdc.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://mx.misumi-ec.com/es/" target='_blank'>
-              <img src="/exhibitors/misumi.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.mitutoyo.com.mx/es_MX" target='_blank'>
-              <img src="/exhibitors/mitutoyo.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href='https://mx.mitsubishielectric.com/fa/en/' target='_blank' rel='noreferrer'>
-              <img src='/mitsubishi.webp' className='img-fluid' loading='lazy' alt='mitsubishi' />
-            </a>
-          </Col>
-        </Row>
-        <Row className='gap-2 md:justify-content-md-center align-items-center justify-content-center pt-4'>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.mytec.mx/" target='_blank'>
-              <img src="/exhibitors/mytec.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://lasalle.mx/" target='_blank'>
-              <img src="/exhibitors/la-salle.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.tecmilenio.mx/es" target='_blank'>
-              <img src="/exhibitors/tec-milenio.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.wago.com/mx-es/" target='_blank'>
-              <img src="/exhibitors/wago.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-        </Row>
-        <Row className='gap-2 md:justify-content-md-center align-items-center justify-content-center pt-4'>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="" target='_blank'>
-              <img src="/exhibitors/pulsar.webp" alt="pulsar" className="img-fluid" />
-            </a>
-          </Col>
-          <Col xs={4} sm={4} md={4} lg={2} className='d-flex justify-content-center'>
-            <a href="https://www.ckdmex.com.mx/" target='_blank'>
-              <img src="/exhibitors/ckd.webp" alt="" className="img-fluid" />
-            </a>
-          </Col>
-        </Row>
+        <MarqueeReact images={exhibitors_1} />
+        <MarqueeReact images={exhibitors_2} direction="left"/>
       </Container>
+
+
       <WhyExhibit />
       {/* <Container className='home mt-5 pb-4'>
         <Row>

diff --git a/src/components/Home/MarqueeReact.jsx b/src/components/Home/MarqueeReact.jsx
@@ -0,0 +1,21 @@
+import Marquee from 'react-fast-marquee'
+
+export function MarqueeReact({ images, direction = 'right' }) {
+  return (
+    <Marquee gradient direction={direction}>
+      {images.map((image, index) => (
+        <div key={index} className='m-2 text-center h-100'>
+          <a href={image.link} target='_blank'>
+            <img
+              src={image.src}
+              alt={image.alt}
+              width={image.width}
+              height={image.height}
+              loading='lazy'
+            />
+          </a>
+        </div>
+      ))}
+    </Marquee>
+  )
+}
diff --git a/src/constans_logos.js b/src/constans_logos.js
@@ -0,0 +1,32 @@
+
+const exhibitors_1 = [
+    { src: '/exhibitors/altech.webp', alt: '', width: 170 },
+    { src: '/exhibitors/benq.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ccg.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ckd.webp', alt: '', width: 170 },
+    { src: '/exhibitors/cleveland.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ema.webp', alt: '', width: 170 },
+    { src: '/exhibitors/euchner.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ifm.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ika.webp', alt: '', width: 170 },
+    { src: '/exhibitors/info-portal.webp', alt: '', width: 170 },
+    { src: '/exhibitors/knipex.webp', alt: '', width: 170 },
+    { src: '/exhibitors/la-salle.webp', alt: '', width: 170 }
+
+]
+const exhibitors_2 = [
+    { src: '/exhibitors/lean-mdc.webp', alt: '', width: 170 },
+    { src: '/exhibitors/misumi.webp', alt: '', width: 170 },
+    { src: '/exhibitors/mitsubishi.webp', alt: '', width: 170 },
+    { src: '/exhibitors/mitutoyo.webp', alt: '', width: 170 },
+    { src: '/exhibitors/mytec.webp', alt: '', width: 170 },
+    { src: '/exhibitors/nsk.webp', alt: '', width: 170 },
+    { src: '/exhibitors/pulsar.webp', alt: '', width: 170 },
+    { src: '/exhibitors/ryasa.webp', alt: '', width: 170 },
+    { src: '/exhibitors/tec-milenio.webp', alt: '', width: 170 },
+    { src: '/exhibitors/vega.webp', alt: '', width: 170 },
+    { src: '/exhibitors/wago.webp', alt: '', width: 170 }
+]
+
+
+export { exhibitors_1, exhibitors_2 }