Skip to content

Commit 5fd91c2

Browse files
javierdv7javierdv7
committed
changes industries
1 parent 4e071bd commit 5fd91c2

File tree

2 files changed

+110
-250
lines changed

2 files changed

+110
-250
lines changed

‎src/data/industries.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const INDUSTRY_CARDS_DATA = [
3030
},
3131
{
3232
tag: "Food & Beverage",
33-
title: "Producción",
33+
title: "Alimentos y bebidas",
3434
description: "Trazabilidad completa y control microbiológico automatizado en líneas de procesamiento.",
3535
points: ["Control de frío 24/7", "Cumplimiento ISO 22000", "Dashboards KPI"],
3636
image: "/industries/foodbeverage.png",

‎src/sections/industries/IndustryCards.tsx‎

Lines changed: 109 additions & 249 deletions
Original file line numberDiff line numberDiff line change
@@ -1,278 +1,138 @@
1-
'use client';
1+
"use client";
22

3-
import { useState } from 'react';
4-
import { motion, AnimatePresence } from 'framer-motion';
5-
import { Box, Typography, Container, alpha, Stack, Chip } from '@mui/material';
6-
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
7-
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
3+
import { useState } from "react";
4+
import { motion } from "framer-motion";
5+
import { Box, Typography, Container, alpha, Stack, Chip } from "@mui/material";
6+
import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
87

9-
import { INDUSTRY_CARDS_DATA } from '@/data/industries';
8+
import { INDUSTRY_CARDS_DATA } from "@/data/industries";
109

1110
const HEADER_HEIGHT = 96;
1211

1312
const toSlug = (title: string) =>
14-
title.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
13+
title
14+
.toLowerCase()
15+
.normalize("NFD")
16+
.replace(/[\u0300-\u036f]/g, "");
1517

1618
const industryDetails = INDUSTRY_CARDS_DATA;
1719

1820
export function IndustryCards() {
19-
return (
20-
<Container maxWidth='lg' sx={{ mt: 15 }}>
21-
<Box sx={{ mb: 8, textAlign: 'center' }}>
22-
<Typography variant='h2' fontWeight={800}>
23-
Soluciones por Sector
24-
</Typography>
25-
<Typography variant='body1' sx={{ color: 'text.secondary', mt: 2 }}>
26-
Explora cómo optimizamos cada industria con tecnología de punta.
27-
</Typography>
28-
</Box>
21+
return (
22+
<Container maxWidth="lg" sx={{ mt: 15 }}>
23+
<Box sx={{ mb: 8, textAlign: "center" }}>
24+
<Typography variant="h2" fontWeight={800}>
25+
Soluciones por Sector
26+
</Typography>
27+
<Typography variant="body1" sx={{ color: "text.secondary", mt: 2 }}>
28+
Explora cómo optimizamos cada industria con tecnología de punta.
29+
</Typography>
30+
</Box>
2931

30-
{industryDetails.map((industry, index) => (
31-
<Box
32-
key={index}
33-
id={toSlug(industry.title)}
34-
sx={{ scrollMarginTop: `${HEADER_HEIGHT}px` }}
35-
>
36-
<IndustryCard industry={industry} index={index} />
37-
</Box>
38-
))}
39-
</Container>
40-
);
32+
{industryDetails.map((industry, index) => (
33+
<Box key={index} id={toSlug(industry.title)} sx={{ scrollMarginTop: `${HEADER_HEIGHT}px` }}>
34+
<IndustryCard industry={industry} index={index} />
35+
</Box>
36+
))}
37+
</Container>
38+
);
4139
}
4240

4341
function IndustryCard({ industry, index }: { industry: any; index: number }) {
44-
const [isHovered, setIsHovered] = useState(false);
42+
const [isHovered, setIsHovered] = useState(false);
4543

46-
return (
47-
<Box
48-
component={motion.div}
49-
onMouseEnter={() => setIsHovered(true)}
50-
onMouseLeave={() => setIsHovered(false)}
51-
initial={{ opacity: 0, y: 20 }}
52-
whileInView={{ opacity: 1, y: 0 }}
53-
transition={{ duration: 0.5, delay: index * 0.1 }}
54-
viewport={{ once: true }}
55-
sx={(theme) => ({
56-
position: 'relative',
57-
mb: 4,
58-
height: { xs: 'auto', md: 320 },
59-
display: 'flex',
60-
flexDirection: { xs: 'column', md: 'row' },
61-
overflow: 'hidden',
62-
backgroundColor: alpha(theme.palette.background.paper, 0.4),
63-
backdropFilter: 'blur(10px)',
64-
border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
65-
borderRadius: 2,
66-
transition: 'border-color 0.3s ease',
67-
'&:hover': {
68-
borderColor: alpha(theme.palette.primary.main, 0.3),
69-
},
70-
})}
71-
>
72-
{/* Left Image Section */}
73-
<Box
74-
sx={{
75-
position: 'relative',
76-
width: { xs: '100%', md: '40%' },
77-
height: { xs: 200, md: '100%' },
78-
overflow: 'hidden',
79-
}}
80-
>
44+
return (
8145
<Box
82-
sx={{
83-
position: 'absolute',
84-
inset: 0,
85-
backgroundImage: `url(${industry.image})`,
86-
backgroundSize: 'cover',
87-
backgroundPosition: 'center',
88-
filter:
89-
'grayscale(100%) sepia(100%) hue-rotate(345deg) saturate(500%) brightness(0.9) contrast(1.2)',
90-
transition: 'transform 0.5s ease',
91-
transform: isHovered ? 'scale(1.1)' : 'scale(1)',
92-
}}
93-
/>
94-
<Chip
95-
label={industry.tag}
96-
sx={(theme) => ({
97-
position: 'absolute',
98-
top: 20,
99-
left: 20,
100-
zIndex: 2,
101-
backgroundColor: alpha(theme.palette.primary.main, 0.9),
102-
fontWeight: 700,
103-
color: 'white',
104-
fontSize: '0.75rem',
105-
px: 1,
106-
})}
107-
/>
108-
</Box>
109-
110-
{/* Right Content Section */}
111-
<Box
112-
sx={{
113-
flex: 1,
114-
p: { xs: 3, md: 5 },
115-
display: 'flex',
116-
flexDirection: 'column',
117-
justifyContent: 'center',
118-
zIndex: 1,
119-
}}
120-
>
121-
<Typography
122-
variant='h4'
123-
fontWeight={900}
124-
sx={{ mb: 1.5, color: 'text.primary' }}
125-
>
126-
{industry.title}
127-
</Typography>
128-
<Typography
129-
variant='body1'
130-
sx={{ color: 'text.secondary', mb: 4, maxWidth: 450 }}
131-
>
132-
{industry.description}
133-
</Typography>
134-
135-
<Stack spacing={1.5}>
136-
{industry.points.map((point: string, idx: number) => (
137-
<Stack key={idx} direction='row' spacing={1.5} alignItems='center'>
138-
<CheckCircleOutlineIcon
139-
sx={{ fontSize: 18, color: 'primary.main' }}
140-
/>
141-
<Typography variant='body2' sx={{ fontWeight: 600 }}>
142-
{point}
143-
</Typography>
144-
</Stack>
145-
))}
146-
</Stack>
147-
</Box>
148-
149-
{/* Diagonal Reveal Overlay (Hover Mode) */}
150-
<AnimatePresence>
151-
{isHovered && (
152-
<Box
15346
component={motion.div}
154-
initial={{
155-
clipPath: 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)',
156-
}}
157-
animate={{ clipPath: 'polygon(5% 0, 100% 0, 100% 100%, 0% 100%)' }} // Adjusted for better text focus
158-
exit={{ clipPath: 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)' }}
159-
transition={{ type: 'spring', stiffness: 100, damping: 20 }}
47+
onMouseEnter={() => setIsHovered(true)}
48+
onMouseLeave={() => setIsHovered(false)}
49+
initial={{ opacity: 0, y: 20 }}
50+
whileInView={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.5, delay: index * 0.1 }}
52+
viewport={{ once: true }}
16053
sx={(theme) => ({
161-
position: 'absolute',
162-
inset: 0,
163-
backgroundColor: alpha(theme.palette.background.paper, 0.98),
164-
backdropFilter: 'blur(20px)',
165-
zIndex: 3,
166-
display: 'flex',
167-
flexDirection: { xs: 'column', md: 'row' },
168-
overflow: 'hidden',
54+
position: "relative",
55+
mb: 4,
56+
height: { xs: "auto", md: 320 },
57+
display: "flex",
58+
flexDirection: { xs: "column", md: "row" },
59+
overflow: "hidden",
60+
backgroundColor: alpha(theme.palette.background.paper, 0.4),
61+
backdropFilter: "blur(10px)",
62+
border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
63+
borderRadius: 2,
64+
transition: "border-color 0.3s ease",
65+
"&:hover": {
66+
borderColor: alpha(theme.palette.primary.main, 0.3),
67+
},
16968
})}
170-
>
171-
{/* Left Reveal Content */}
69+
>
70+
{/* Left Image Section */}
17271
<Box
173-
sx={{
174-
width: { xs: '100%', md: '50%' },
175-
p: { xs: 4, md: 6 },
176-
pl: { md: 8 }, // More padding on left to escape the diagonal cut
177-
display: 'flex',
178-
flexDirection: 'column',
179-
justifyContent: 'center',
180-
position: 'relative',
181-
}}
182-
>
183-
<Typography
184-
variant='overline'
18572
sx={{
186-
color: 'primary.main',
187-
fontWeight: 900,
188-
mb: 1,
189-
display: 'block',
73+
position: "relative",
74+
width: { xs: "100%", md: "40%" },
75+
height: { xs: 200, md: "100%" },
76+
overflow: "hidden",
19077
}}
191-
>
192-
VISTA PREVIA DE LOGOS
193-
</Typography>
194-
<Typography variant='h5' fontWeight={800} sx={{ mb: 3 }}>
195-
Panel de Control {industry.title}
196-
</Typography>
197-
<Typography
198-
variant='body2'
199-
sx={{ color: 'text.secondary', mb: 4, maxWidth: 350 }}
200-
>
201-
Integramos telemetría avanzada y visualización 3D específica
202-
para cada activo en {industry.title.toLowerCase()}.
203-
</Typography>
204-
<Stack
205-
direction='row'
206-
spacing={2}
207-
alignItems='center'
208-
sx={{
209-
color: 'primary.main',
210-
fontWeight: 700,
211-
cursor: 'pointer',
212-
}}
213-
>
214-
<Typography
215-
variant='body2'
216-
sx={{ textTransform: 'uppercase', letterSpacing: 1 }}
217-
>
218-
Detalles
219-
</Typography>
220-
<ArrowForwardIcon fontSize='small' />
221-
</Stack>
78+
>
79+
<Box
80+
sx={{
81+
position: "absolute",
82+
inset: 0,
83+
backgroundImage: `url(${industry.image})`,
84+
backgroundSize: "cover",
85+
backgroundPosition: "center",
86+
filter: "grayscale(100%) sepia(100%) hue-rotate(345deg) saturate(500%) brightness(0.9) contrast(1.2)",
87+
transition: "transform 0.5s ease",
88+
transform: isHovered ? "scale(1.1)" : "scale(1)",
89+
}}
90+
/>
91+
<Chip
92+
label={industry.tag}
93+
sx={(theme) => ({
94+
position: "absolute",
95+
top: 20,
96+
left: 20,
97+
zIndex: 2,
98+
backgroundColor: alpha(theme.palette.primary.main, 0.9),
99+
fontWeight: 700,
100+
color: "white",
101+
fontSize: "0.75rem",
102+
px: 1,
103+
})}
104+
/>
222105
</Box>
223106

224-
{/* Right Reveal Image (Demo Foto) */}
107+
{/* Right Content Section */}
225108
<Box
226-
sx={{
227-
flex: 1,
228-
position: 'relative',
229-
m: 2,
230-
overflow: 'hidden',
231-
}}
232-
>
233-
<Box
234109
sx={{
235-
position: 'absolute',
236-
inset: 0,
237-
backgroundImage: `url(${industry.image})`,
238-
backgroundSize: 'cover',
239-
backgroundPosition: 'center',
240-
filter:
241-
'grayscale(100%) sepia(100%) hue-rotate(345deg) saturate(500%) grayscale(0.5) brightness(0.8)',
110+
flex: 1,
111+
p: { xs: 3, md: 5 },
112+
display: "flex",
113+
flexDirection: "column",
114+
justifyContent: "center",
115+
zIndex: 1,
242116
}}
243-
/>
244-
<Box
245-
sx={(theme) => ({
246-
position: 'absolute',
247-
inset: 0,
248-
background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, transparent)`,
249-
display: 'flex',
250-
alignItems: 'center',
251-
justifyContent: 'center',
252-
})}
253-
>
254-
<Box
255-
sx={(theme) => ({
256-
px: 2,
257-
py: 1,
258-
backgroundColor: alpha(theme.palette.common.black, 0.6),
259-
backdropFilter: 'blur(10px)',
260-
borderRadius: 1.5,
261-
border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,
262-
})}
263-
>
264-
<Typography
265-
variant='caption'
266-
sx={{ color: 'white', fontWeight: 800 }}
267-
>
268-
MÓDULO LIVE
269-
</Typography>
270-
</Box>
271-
</Box>
117+
>
118+
<Typography variant="h4" fontWeight={900} sx={{ mb: 1.5, color: "text.primary" }}>
119+
{industry.title}
120+
</Typography>
121+
<Typography variant="body1" sx={{ color: "text.secondary", mb: 4, maxWidth: 450 }}>
122+
{industry.description}
123+
</Typography>
124+
125+
<Stack spacing={1.5}>
126+
{industry.points.map((point: string, idx: number) => (
127+
<Stack key={idx} direction="row" spacing={1.5} alignItems="center">
128+
<CheckCircleOutlineIcon sx={{ fontSize: 18, color: "primary.main" }} />
129+
<Typography variant="body2" sx={{ fontWeight: 600 }}>
130+
{point}
131+
</Typography>
132+
</Stack>
133+
))}
134+
</Stack>
272135
</Box>
273-
</Box>
274-
)}
275-
</AnimatePresence>
276-
</Box>
277-
);
136+
</Box>
137+
);
278138
}

0 commit comments

Comments
 (0)
⚡