+
+
+
+ {managersJr.map((manager, index) => (
+
-
- {manager.name}
-
- {manager.management}
-
-
-
-
- ))}
-
+ >
+
+ 
+
+
+ {manager.name}
+
+
+ {manager.management}
+
+
+
+
+ ))}
+
+ {scrollSnaps.map((_, index) => (
+ onDotButtonClick(index)}
+ className={'embla__dot'.concat(
+ index === selectedIndex
+ ? ' embla__dot--selected'
+ : ''
+ )}
+ />
+ ))}
+
+
);
};
diff --git a/frontend/src/components/shared/embla-carousel/EmblaCarousel.jsx b/frontend/src/components/shared/embla-carousel/EmblaCarousel.jsx
index 2bab0cf6..5a17ab3b 100644
--- a/frontend/src/components/shared/embla-carousel/EmblaCarousel.jsx
+++ b/frontend/src/components/shared/embla-carousel/EmblaCarousel.jsx
@@ -1,7 +1,7 @@
// Libraries
import useEmblaCarousel from 'embla-carousel-react';
import Autoplay from 'embla-carousel-autoplay';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
import {
DotButton,
useDotButton,
@@ -14,93 +14,65 @@ import { useSnackbar } from '@contexts/SnackbarContext';
import { getApiUrl } from '@assets/getApi';
import { handleError } from '@assets/handleError';
import AddImagesCarouselDialog from '@components/shared/embla-carousel/AddImagesCarouselDialog';
-
-// Icons
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import AddIcon from '@mui/icons-material/Add';
-
-// Material-UI
-import { IconButton, Box } from '@mui/material';
-
-const getCarouselImages = async (setImages, showSnack) => {
- try {
- const response = await fetch(
- `${getApiUrl().apiUrl}carousel-images/banners/`,
- {
- method: 'GET',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- },
- }
- );
-
- await handleError(response, showSnack);
-
- if (response.status === 200) {
- const data = await response.json();
- setImages(data);
- }
- } catch (error) {
- if (getApiUrl().environment === 'development') {
- console.error(error);
- }
- }
-};
-
-const deleteCarouselImage = async (id, showSnack, setImages) => {
- try {
- const response = await fetch(
- `${getApiUrl().apiUrl}carousel-images/banners/${id}/`,
- {
- method: 'DELETE',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- },
- }
- );
-
- await handleError(response, showSnack);
-
- if (response.status === 204) {
- showSnack('success', 'Imagen eliminada correctamente');
- getCarouselImages(setImages, showSnack);
- }
- } catch (error) {
- if (getApiUrl().environment === 'development') {
- console.error(error);
- }
- }
-};
-
-const IconButtonsStyle = {
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
- color: 'white',
- '&:hover': {
- backgroundColor: 'white',
- color: 'gray',
- },
- transition: 'all 0.3s',
-};
+import { LazyLoadImage } from '@components/shared/embla-carousel/EmblaCarouselLazyLoadImage';
export function EmblaCarousel() {
const { showSnack } = useSnackbar();
const [images, setImages] = useState([]);
const [openAddDialog, setOpenAddDialog] = useState(false);
- const permissions = JSON.parse(localStorage.getItem('permissions')) || [];
-
- useEffect(() => {
- getCarouselImages(setImages);
- }, []);
-
+ const [slidesInView, setSlidesInView] = useState([]);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ delay: 4000, stopOnInteraction: false }),
]);
+ const getCarouselImages = async () => {
+ try {
+ const response = await fetch(
+ `${getApiUrl().apiUrl}carousel-images/banners/`,
+ {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+
+ await handleError(response, showSnack);
+
+ if (response.status === 200) {
+ const data = await response.json();
+ setImages(data);
+ }
+ } catch (error) {
+ if (getApiUrl().environment === 'development') {
+ console.error(error);
+ }
+ }
+ };
+
+ useEffect(() => {
+ getCarouselImages();
+ }, []);
+
const { selectedIndex, scrollSnaps, onDotButtonClick } =
useDotButton(emblaApi);
+ const updateSlidesInView = useCallback(() => {
+ if (!emblaApi) return;
+
+ const inView = emblaApi.slidesInView();
+ setSlidesInView((prev) => [...new Set([...prev, ...inView])]);
+ }, [emblaApi]);
+
+ useEffect(() => {
+ if (!emblaApi) return;
+
+ updateSlidesInView(emblaApi);
+ emblaApi.on('slidesInView', updateSlidesInView);
+ emblaApi.on('reInit', updateSlidesInView);
+ }, [emblaApi, updateSlidesInView, images]);
+
return (
<>
+
- {images.length > 0 &&
- images.map((image, index) => (
-
+ {images.map((image, index) => (
+
-
- {permissions &&
- permissions.includes(
- 'carousel_image.add_banner'
- ) ? (
-
- setOpenAddDialog(true)
- }
- sx={IconButtonsStyle}
- >
-
- ) : null}
- {permissions &&
- permissions.includes(
- 'carousel_image.delete_banner'
- ) ? (
-
- deleteCarouselImage(
- image.id,
- showSnack,
- setImages
- )
- }
- sx={IconButtonsStyle}
- >
-
- ) : null}
-
- 
-
+ image={image}
+ getCarouselImages={getCarouselImages}
+ setImages={setImages}
+ setOpenAddDialog={setOpenAddDialog}
+ inView={slidesInView.indexOf(index) > -1}
+ />
))}
+
{scrollSnaps.map((_, index) => (
diff --git a/frontend/src/components/shared/embla-carousel/EmblaCarouselLazyLoadImage.jsx b/frontend/src/components/shared/embla-carousel/EmblaCarouselLazyLoadImage.jsx
new file mode 100644
index 00000000..0af35cc2
--- /dev/null
+++ b/frontend/src/components/shared/embla-carousel/EmblaCarouselLazyLoadImage.jsx
@@ -0,0 +1,118 @@
+import React, { useState, useCallback } from 'react';
+
+// Material-UI
+import { Box } from '@mui/material';
+
+// Icons
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+
+// Custom Hooks
+import { useSnackbar } from '@contexts/SnackbarContext';
+
+// Custom Functions and Components
+import { getApiUrl } from '@assets/getApi';
+import { handleError } from '@assets/handleError';
+
+const PLACEHOLDER_SRC = `data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D`;
+
+const IconButtonsStyle = {
+ backgroundColor: 'rgba(0, 0, 0, 0.5)',
+ color: 'white',
+ '&:hover': {
+ backgroundColor: 'white',
+ color: 'gray',
+ },
+ transition: 'all 0.3s',
+};
+
+export const LazyLoadImage = (props) => {
+ const { image, inView, setOpenAddDialog, setImages, getCarouselImages } =
+ props;
+ const [hasLoaded, setHasLoaded] = useState(false);
+ const permissions = JSON.parse(localStorage.getItem('permissions')) || [];
+ const { showSnack } = useSnackbar();
+
+ const setLoaded = useCallback(() => {
+ if (inView) setHasLoaded(true);
+ }, [inView, setHasLoaded]);
+
+ const deleteCarouselImage = async (id) => {
+ try {
+ const response = await fetch(
+ `${getApiUrl().apiUrl}carousel-images/banners/${id}/`,
+ {
+ method: 'DELETE',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
+
+ await handleError(response, showSnack);
+
+ if (response.status === 204) {
+ showSnack('success', 'Imagen eliminada correctamente');
+ getCarouselImages(setImages, showSnack);
+ }
+ } catch (error) {
+ if (getApiUrl().environment === 'development') {
+ console.error(error);
+ }
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/frontend/src/images/about/organigrama.png b/frontend/src/images/about/organigrama.png
index 836e88ba..d677e47b 100644
Binary files a/frontend/src/images/about/organigrama.png and b/frontend/src/images/about/organigrama.png differ
diff --git a/frontend/src/images/cyc-logos/logotipo-navbar.png b/frontend/src/images/cyc-logos/logotipo-navbar.png
deleted file mode 100644
index 23652400..00000000
Binary files a/frontend/src/images/cyc-logos/logotipo-navbar.png and /dev/null differ
diff --git a/frontend/src/images/login/new-login-image.jpg b/frontend/src/images/login/new-login-image.jpg
deleted file mode 100644
index 3f9774d0..00000000
Binary files a/frontend/src/images/login/new-login-image.jpg and /dev/null differ
diff --git a/frontend/src/images/managers-jr/1010198435.jpg b/frontend/src/images/managers-jr/1010198435.jpg
new file mode 100644
index 00000000..5df0a48c
Binary files /dev/null and b/frontend/src/images/managers-jr/1010198435.jpg differ
diff --git a/frontend/src/images/managers-jr/1010198435.webp b/frontend/src/images/managers-jr/1010198435.webp
new file mode 100644
index 00000000..9f8d5419
Binary files /dev/null and b/frontend/src/images/managers-jr/1010198435.webp differ
diff --git a/frontend/src/images/managers-jr/79509094.webp b/frontend/src/images/managers-jr/79509094.webp
deleted file mode 100644
index 79b6c6b5..00000000
Binary files a/frontend/src/images/managers-jr/79509094.webp and /dev/null differ
diff --git a/frontend/src/images/managers-jr/52716114.webp b/frontend/src/images/managers/52716114.webp
similarity index 100%
rename from frontend/src/images/managers-jr/52716114.webp
rename to frontend/src/images/managers/52716114.webp
diff --git a/frontend/src/images/quality/files.jpg b/frontend/src/images/quality/files.jpg
deleted file mode 100644
index 1185496f..00000000
Binary files a/frontend/src/images/quality/files.jpg and /dev/null differ
diff --git a/frontend/src/images/trivia/trivia.svg b/frontend/src/images/trivia/trivia.svg
deleted file mode 100644
index 4755b561..00000000
--- a/frontend/src/images/trivia/trivia.svg
+++ /dev/null
@@ -1,6278 +0,0 @@
-
-
-
diff --git a/frontend/src/images/workstations/piso-2.png b/frontend/src/images/workstations/piso-2.png
deleted file mode 100644
index ce8698bf..00000000
Binary files a/frontend/src/images/workstations/piso-2.png and /dev/null differ
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 627050a4..43b6b489 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -140,14 +140,29 @@ calendar-month {
}
}
-.embla__container {
+/* .embla__container {
max-width: 1280px;
-}
+} */
-@media (max-width: 1440px) {
+/* @media (max-width: 1440px) {
.embla__container {
max-width: 1024px;
}
+} */
+
+.embla__slide {
+ transform: translate3d(0, 0, 0);
+ flex: 0 0 100%;
+ min-width: 0;
+ padding-left: 1rem;
+}
+
+.embla__slide__img {
+ border-radius: 1.8rem;
+ display: block;
+ height: auto;
+ width: 100%;
+ object-fit: cover;
}
.embla__dots {
@@ -156,6 +171,7 @@ calendar-month {
justify-content: center;
align-items: center;
}
+
.embla__dot {
-webkit-tap-highlight-color: rgba(49, 49, 49, 0.5);
-webkit-appearance: none;
@@ -175,6 +191,7 @@ calendar-month {
justify-content: center;
border-radius: 50%;
}
+
.embla__dot:after {
box-shadow: inset 0 0 0 0.1rem rgb(187, 187, 187);
width: 1.2rem;
@@ -184,6 +201,54 @@ calendar-month {
align-items: center;
content: '';
}
+
.embla__dot--selected:after {
box-shadow: inset 0 0 0 0.1rem rgb(54, 49, 61);
}
+
+.embla__lazy-load {
+ position: relative;
+ height: 100%;
+}
+
+.embla__lazy-load__spinner {
+ border: 0.4rem solid rgba(0, 0, 0, 0.1);
+ border-left: 0.4rem solid rgb(54, 49, 61);
+ font-size: 1rem;
+ display: inline-flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ text-indent: -9999em;
+ animation: loading 1.1s infinite linear;
+ border-radius: 50%;
+ width: 5rem;
+ height: 5rem;
+}
+
+.embla__lazy-load__spinner:after {
+ border-radius: inherit;
+ width: 5rem;
+ height: 5rem;
+}
+
+.embla__lazy-load__img {
+ opacity: 0;
+ transition: opacity 0.2s ease-in-out;
+}
+
+.embla__lazy-load--has-loaded .embla__lazy-load__img {
+ opacity: 1;
+}
+
+@keyframes loading {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+ {permissions &&
+ permissions.includes('carousel_image.add_banner') ? (
+ setOpenAddDialog(true)}
+ sx={IconButtonsStyle}
+ >
+
+ ) : null}
+ {permissions &&
+ permissions.includes('carousel_image.delete_banner') ? (
+ deleteCarouselImage(image.id)}
+ sx={IconButtonsStyle}
+ >
+
+ ) : null}
+
+ {!hasLoaded && }
+ 
window.open(image.link) : null}
+ />
+
+