Skip to content

Commit

Permalink
Update About and Home components; add new manager image, refactor Swi…
Browse files Browse the repository at this point in the history 
…perSlider to use Embla Carousel for improved performance and user experience
  • Loading branch information
@S-e-b-a-s
S-e-b-a-s committed Dec 2, 2024
1 parent c8873af commit f316aa7
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 90 deletions.
12 changes: 10 additions & 2 deletions frontend/src/components/pages/About.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import cesarGarzon from '@images/managers/cesar-garzon.jpg';
import yannethPinzon from '@images/managers/yanneth-pinzon.webp';
import angelaDuran from '@images/managers/angela-duran.jpeg';
import adrianaPaez from '@images/managers/adriana-paez.jpg';
import manager1 from '@images/managers/52716114.webp';
import diegoGonzales from '@images/managers/diego-gonzales.jpg';
import riskInterControl from '@images/managers/risk-internal-control.jfif';
import melidaSandoval from '@images/managers/melida-sandoval.jpg';
Expand Down Expand Up @@ -62,15 +63,22 @@ const managements = [
'Planificar, coordinar, dirigir y controlar las actividades que impactan el óptimo funcionamiento de la organización, garantizando un cumplimiento de los procesos establecidos con los más altos estándares de calidad.',
},
{
name: 'Adriana Páez',
name: 'Adriana Barrera',
management: 'Gerente de Operaciones',
image: manager1,
description:
'Dirigir, organizar y supervisar las operaciones con equipos altamente productivos, promoviendo la excelencia en cada proceso para alcanzar resultados sobresalientes que superen las expectativas de nuestros clientes y garanticen la sostenibilidad del negocio.',
},
{
name: 'Adriana Páez',
management: 'Gerente de Operaciones de Ventas',
image: adrianaPaez,
description:
'Liderar, planificar y controlar las operaciones de las campañas de Cobranzas, con equipos productivos y con alta calidad que garanticen los resultados frente a los clientes y la rentabilidad de cada una de ellas.',
},
{
name: 'Héctor Gabriel Sotelo',
management: 'Gerente de Operaciones de Ventas',
management: 'Gerente de Operaciones de Servicio al Cliente',
image: hectorSotelo,
description:
'Liderar, planificar y controlar las operaciones de las campañas de Servicios y Ventas, con equipos productivos y con alta calidad que garanticen los resultados frente a los clientes y la rentabilidad de cada una de ellas.',
Expand Down
48 changes: 27 additions & 21 deletions frontend/src/components/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,13 +273,15 @@ const Home = () => {
</Box>
</>
) : (
<CarouselComponent
contain={true}
items={yesterdayBirthdays}
day={'Ayer'}
height={'465px'}
width={'100%'}
/>
<Suspense>
<CarouselComponent
contain={true}
items={yesterdayBirthdays}
day={'Ayer'}
height={'465px'}
width={'100%'}
/>
</Suspense>
)}
</Card>
<Card sx={{ maxWidth: 350, width: 350, height: 700 }}>
Expand Down Expand Up @@ -312,13 +314,15 @@ const Home = () => {
</Box>
</>
) : (
<CarouselComponent
contain={true}
items={todayBirthdays}
day={'Hoy'}
height={'465px'}
width={'100%'}
/>
<Suspense>
<CarouselComponent
contain={true}
items={todayBirthdays}
day={'Hoy'}
height={'465px'}
width={'100%'}
/>
</Suspense>
)}
</Card>{' '}
<Card sx={{ maxWidth: 350, width: 350, height: 700 }}>
Expand Down Expand Up @@ -351,13 +355,15 @@ const Home = () => {
</Box>
</>
) : (
<CarouselComponent
contain={true}
items={tomorrowBirthdays}
day={'Mañana'}
height={'465px'}
width={'100%'}
/>
<Suspense>
<CarouselComponent
contain={true}
items={tomorrowBirthdays}
day={'Mañana'}
height={'465px'}
width={'100%'}
/>
</Suspense>
)}
</Card>{' '}
</Box>
Expand Down
152 changes: 85 additions & 67 deletions frontend/src/components/shared/SwiperSlider.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
// Material-UI
import React, { useEffect, useState, useCallback } from 'react';
import useEmblaCarousel from 'embla-carousel-react';
import Autoplay from 'embla-carousel-autoplay';
import { Box, Typography } from '@mui/material';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import {
DotButton,
useDotButton,
} from '@components/shared/embla-carousel/EmblaCarouselDotButton';
import '@src/index.css';

// Media
import managersJr1 from '@images/managers-jr/52716114.webp';
import managersJr2 from '@images/managers-jr/53069726.webp';
import managersJr4 from '@images/managers-jr/1016002011.webp';
import managersJr4 from '@images/managers-jr/1010198435.jpg';
import managersJr5 from '@images/managers-jr/1016033764.webp';
import managersJr6 from '@images/managers-jr/91498957.webp';
import managersJr8 from '@images/managers-jr/28553156.webp';
Expand All @@ -30,21 +29,15 @@ const managersJr = [
image: managersJr9,
description: '',
},
{
name: 'Adriana Barrera',
management: 'GERENTE DE CUENTAS',
image: managersJr1,
description: '',
},
{
name: 'Katterene Castrillon',
management: 'GERENTE DE CUENTAS',
image: managersJr2,
description: '',
},
{
name: 'Luis Pachon',
management: 'GERENTE DE CUENTAS',
name: 'Luis Peña',
management: 'GERENTE JR. INFRAESTRUCTURA Y REDES',
image: managersJr4,
description: '',
},
Expand All @@ -63,59 +56,84 @@ const managersJr = [
];

const SwiperSlider = () => {
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ delay: 4000, stopOnInteraction: false }),
]);

const { selectedIndex, scrollSnaps, onDotButtonClick } =
useDotButton(emblaApi);

return (
<Swiper
style={{
width: '100%',
height: 'max-content',
padding: '2rem',
userSelect: 'none',
}}
autoplay={{
delay: 2500,
disableOnInteraction: false,
}}
slidesPerView={3}
spaceBetween={30}
pagination={{
clickable: true,
}}
modules={[Pagination, Autoplay]}
className="mySwiper"
>
{managersJr.map((manager, index) => (
<SwiperSlide role="listitem" key={index}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: '10px',
padding: '3rem',
}}
>
<img
src={manager.image}
alt={manager.name}
<div className="embla" style={{ margin: 'auto', maxWidth: '80rem' }}>
<div
className="embla__viewport"
ref={emblaRef}
style={{ overflow: 'hidden' }}
>
<div
className="embla__container"
style={{
backfaceVisibility: 'hidden',
display: 'flex',
touchAction: 'pan-y pinch-zoom',
}}
>
{managersJr.map((manager, index) => (
<div
className="embla__slide"
key={index}
style={{
width: '100%',
maxWidth: '350px',
borderRadius: '5%',
objectFit: 'cover',
flex: '0 0 35%',
minWidth: 0,
}}
/>
<Box sx={{ mt: '1rem', textAlign: 'center' }}>
<Typography variant="h4">{manager.name}</Typography>
<Typography variant="subtitle1">
{manager.management}
</Typography>
</Box>
</Box>
</SwiperSlide>
))}
</Swiper>
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
justifyContent: 'center',
borderRadius: '10px',
}}
>
<img
src={manager.image}
alt={manager.name}
style={{
width: '100%',
maxWidth: '350px',
borderRadius: '5%',
objectFit: 'cover',
}}
/>
<Box sx={{ mt: '1rem', textAlign: 'center' }}>
<Typography variant="h4">
{manager.name}
</Typography>
<Typography variant="subtitle1">
{manager.management}
</Typography>
</Box>
</Box>
</div>
))}
</div>
</div>
<div className="embla__dots">
{scrollSnaps.map((_, index) => (
<DotButton
key={index}
onClick={() => onDotButtonClick(index)}
className={'embla__dot'.concat(
index === selectedIndex
? ' embla__dot--selected'
: ''
)}
/>
))}
</div>
</div>
);
};

Expand Down
Binary file modified frontend/src/images/about/organigrama.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/managers-jr/1010198435.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/managers-jr/1010198435.webp
View file
Binary file not shown.
0 ...tend/src/images/managers-jr/52716114.webp → frontend/src/images/managers/52716114.webp
View file
File renamed without changes.

0 comments on commit f316aa7

Please sign in to comment.