Skip to content

Commit af91ee0

Browse files
MoytesMoytes
committed
aCTULIZACION DE LANDIG PAGE FILANL DE FRON-END
1 parent 357f7e7 commit af91ee0

14 files changed

Lines changed: 2018 additions & 728 deletions

File tree

‎src/components/landing/invernadero/CTASection.tsx‎

Lines changed: 261 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Card, Typography, Button, Row, Col, Space, Grid } from 'antd';
3-
import { ExperimentOutlined } from '@ant-design/icons';
2+
import { Card, Typography, Button, Row, Col, Grid, Flex } from 'antd';
3+
import { ExperimentOutlined, RocketOutlined, MessageOutlined } from '@ant-design/icons';
44
import { useNavigate } from 'react-router-dom';
55
import { theme, hexToRgba } from '../../../theme/landing/invernadero/theme';
66
import { useScrollAnimation } from '../../../hook/landing/invernadero/Hero/useScrollAnimation';
@@ -12,113 +12,275 @@ export const CTASection = () => {
1212
const { ref, isVisible } = useScrollAnimation({ threshold: 0.1, triggerOnce: true });
1313

1414
const screens = useBreakpoint();
15-
const isMobile = !screens.md;
1615
const navigate = useNavigate();
1716

1817
const handleLoginRedirect = () => {
1918
navigate('/login');
2019
};
2120

21+
const handleContactRedirect = () => {
22+
navigate('/login');
23+
};
24+
25+
const styles = {
26+
section: {
27+
padding: screens.xs ? '60px 16px' : screens.sm ? '80px 24px' : screens.lg ? '120px 32px' : '140px 40px',
28+
background: `linear-gradient(135deg, ${hexToRgba(theme.secondaryDark, 0.15)} 0%, ${hexToRgba(theme.primary, 0.95)} 50%, ${hexToRgba(theme.primaryDark, 0.9)} 100%)`,
29+
position: 'relative',
30+
overflow: 'hidden',
31+
} as React.CSSProperties,
32+
33+
backgroundGlow: {
34+
position: 'absolute',
35+
top: 0,
36+
left: 0,
37+
right: 0,
38+
bottom: 0,
39+
background: `
40+
radial-gradient(circle at 80% 20%, ${hexToRgba(theme.accent, 0.15)} 0%, transparent 50%),
41+
radial-gradient(circle at 20% 80%, ${hexToRgba(theme.secondary, 0.15)} 0%, transparent 50%),
42+
radial-gradient(circle at 50% 50%, ${hexToRgba(theme.textLight, 0.08)} 0%, transparent 60%)
43+
`,
44+
zIndex: 0
45+
} as React.CSSProperties,
46+
47+
contentWrapper: {
48+
position: 'relative',
49+
zIndex: 1,
50+
maxWidth: '1200px',
51+
margin: '0 auto'
52+
} as React.CSSProperties,
53+
54+
card: (isVisible: boolean): React.CSSProperties => ({
55+
background: `linear-gradient(145deg, ${hexToRgba(theme.primary, 0.95)}, ${hexToRgba(theme.primaryDark, 0.98)})`,
56+
border: `1px solid ${hexToRgba(theme.textLight, 0.15)}`,
57+
borderRadius: screens.xs ? '20px' : '28px',
58+
boxShadow: `0 25px 60px ${hexToRgba(theme.primaryDark, 0.4)}, 0 0 0 1px ${hexToRgba(theme.secondary, 0.1)}`,
59+
textAlign: 'center',
60+
opacity: isVisible ? 1 : 0,
61+
transform: isVisible ? 'translateY(0) scale(1)' : 'translateY(40px) scale(0.95)',
62+
transition: 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1)',
63+
backdropFilter: 'blur(20px)',
64+
overflow: 'hidden',
65+
position: 'relative',
66+
}),
67+
68+
cardBody: {
69+
padding: screens.xs ? '40px 24px' : screens.sm ? '60px 40px' : screens.lg ? '80px 60px' : '100px 80px',
70+
position: 'relative',
71+
zIndex: 1,
72+
} as React.CSSProperties,
73+
74+
iconWrapper: (): React.CSSProperties => ({
75+
display: 'inline-flex',
76+
alignItems: 'center',
77+
justifyContent: 'center',
78+
width: screens.xs ? '80px' : screens.sm ? '100px' : '120px',
79+
height: screens.xs ? '80px' : screens.sm ? '100px' : '120px',
80+
borderRadius: screens.xs ? '20px' : '24px',
81+
background: `linear-gradient(135deg, ${theme.accent}, ${hexToRgba(theme.accent, 0.8)})`,
82+
marginBottom: screens.xs ? '24px' : '32px',
83+
fontSize: screens.xs ? '32px' : screens.sm ? '40px' : '48px',
84+
color: theme.primaryDark,
85+
boxShadow: `0 15px 35px ${hexToRgba(theme.accent, 0.4)}`,
86+
animation: 'pulseIcon 3s ease-in-out infinite',
87+
}),
88+
89+
title: (): React.CSSProperties => ({
90+
color: theme.text,
91+
marginBottom: screens.xs ? '16px' : '24px',
92+
fontSize: screens.xs ? '1.75rem' : screens.sm ? '2.25rem' : screens.lg ? '2.75rem' : '3.25rem',
93+
fontWeight: 700,
94+
lineHeight: 1.2,
95+
background: `linear-gradient(135deg, ${theme.text}, ${theme.textLight})`,
96+
WebkitBackgroundClip: 'text',
97+
WebkitTextFillColor: 'transparent',
98+
}),
99+
100+
subtitle: (): React.CSSProperties => ({
101+
fontSize: screens.xs ? '16px' : screens.sm ? '18px' : screens.lg ? '20px' : '22px',
102+
color: theme.textLight,
103+
lineHeight: 1.6,
104+
marginBottom: screens.xs ? '24px' : '32px',
105+
maxWidth: '800px',
106+
margin: '0 auto',
107+
fontWeight: 400,
108+
}),
109+
110+
buttonGroup: (isVisible: boolean): React.CSSProperties => ({
111+
opacity: isVisible ? 1 : 0,
112+
transform: isVisible ? 'translateY(0)' : 'translateY(20px)',
113+
transition: 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s',
114+
display: 'flex',
115+
gap: screens.xs ? '16px' : '24px',
116+
flexDirection: screens.xs ? 'column' : 'row',
117+
justifyContent: 'center',
118+
alignItems: 'center',
119+
width: screens.xs ? '100%' : 'auto',
120+
}),
121+
122+
primaryButton: {
123+
background: `linear-gradient(135deg, ${theme.secondary}, ${theme.accent})`,
124+
border: 'none',
125+
borderRadius: screens.xs ? '12px' : '16px',
126+
fontWeight: 600,
127+
boxShadow: `0 8px 25px ${hexToRgba(theme.secondary, 0.4)}`,
128+
height: screens.xs ? '52px' : '60px',
129+
fontSize: screens.xs ? '16px' : '18px',
130+
padding: screens.xs ? '0 24px' : '0 40px',
131+
transition: 'all 0.3s ease',
132+
display: 'flex',
133+
alignItems: 'center',
134+
gap: '8px',
135+
} as React.CSSProperties,
136+
137+
secondaryButton: {
138+
color: theme.accent,
139+
borderColor: theme.accent,
140+
borderRadius: screens.xs ? '12px' : '16px',
141+
fontWeight: 600,
142+
background: 'transparent',
143+
height: screens.xs ? '52px' : '60px',
144+
fontSize: screens.xs ? '16px' : '18px',
145+
padding: screens.xs ? '0 24px' : '0 40px',
146+
transition: 'all 0.3s ease',
147+
display: 'flex',
148+
alignItems: 'center',
149+
gap: '8px',
150+
} as React.CSSProperties,
151+
152+
decorativeElements: {
153+
position: 'absolute',
154+
top: '10%',
155+
right: '5%',
156+
width: screens.xs ? '60px' : '100px',
157+
height: screens.xs ? '60px' : '100px',
158+
borderRadius: '50%',
159+
background: `radial-gradient(circle, ${hexToRgba(theme.secondary, 0.2)} 0%, transparent 70%)`,
160+
zIndex: 0,
161+
} as React.CSSProperties,
162+
163+
decorativeElements2: {
164+
position: 'absolute',
165+
bottom: '10%',
166+
left: '5%',
167+
width: screens.xs ? '40px' : '80px',
168+
height: screens.xs ? '40px' : '80px',
169+
borderRadius: '50%',
170+
background: `radial-gradient(circle, ${hexToRgba(theme.accent, 0.2)} 0%, transparent 70%)`,
171+
zIndex: 0,
172+
} as React.CSSProperties,
173+
};
174+
22175
return (
23-
<section ref={ref} style={{
24-
padding: isMobile ? '50px 20px' : '80px 20px',
25-
background: `linear-gradient(135deg, ${hexToRgba(theme.secondaryDark, 0.1)} 0%, ${hexToRgba(theme.primary, 0.9)} 100%)`,
26-
position: 'relative'
27-
}}>
28-
<div style={{
29-
position: 'absolute',
30-
top: 0,
31-
left: 0,
32-
right: 0,
33-
bottom: 0,
34-
background: `
35-
radial-gradient(circle at 80% 20%, ${hexToRgba(theme.accent, 0.1)} 0%, transparent 50%),
36-
radial-gradient(circle at 20% 80%, ${hexToRgba(theme.secondary, 0.1)} 0%, transparent 50%)
37-
`,
38-
zIndex: 0
39-
}}></div>
40-
41-
<div style={{ position: 'relative', zIndex: 1 }}>
176+
<section ref={ref} style={styles.section}>
177+
<div style={styles.backgroundGlow}></div>
178+
<div style={styles.decorativeElements} />
179+
<div style={styles.decorativeElements2} />
180+
181+
<style>
182+
{`
183+
@keyframes pulseIcon {
184+
0%, 100% {
185+
transform: scale(1) rotate(0deg);
186+
box-shadow: 0 15px 35px ${hexToRgba(theme.accent, 0.4)};
187+
}
188+
50% {
189+
transform: scale(1.05) rotate(5deg);
190+
box-shadow: 0 20px 45px ${hexToRgba(theme.accent, 0.6)};
191+
}
192+
}
193+
194+
.cta-card {
195+
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
196+
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
197+
}
198+
199+
.cta-card:hover {
200+
transform: translateY(-8px);
201+
box-shadow: 0 35px 80px ${hexToRgba(theme.primaryDark, 0.5)};
202+
}
203+
204+
.cta-button-primary:hover {
205+
transform: translateY(-2px);
206+
box-shadow: 0 12px 35px ${hexToRgba(theme.secondary, 0.6)};
207+
}
208+
209+
.cta-button-secondary:hover {
210+
transform: translateY(-2px);
211+
background: ${hexToRgba(theme.accent, 0.1)};
212+
}
213+
214+
@media (max-width: 768px) {
215+
.cta-card:hover {
216+
transform: translateY(-4px);
217+
}
218+
}
219+
`}
220+
</style>
221+
222+
<div style={styles.contentWrapper}>
42223
<Row justify="center">
43-
<Col xs={24} lg={16}>
224+
<Col xs={24} lg={20} xl={18}>
44225
<Card
45-
style={{
46-
background: hexToRgba(theme.primaryDark, 0.9),
47-
border: `1px solid ${hexToRgba(theme.accent, 0.4)}`,
48-
borderRadius: '16px',
49-
boxShadow: `0 10px 40px ${hexToRgba(theme.accent, 0.2)}`,
50-
textAlign: 'center',
51-
opacity: isVisible ? 1 : 0,
52-
transform: isVisible ? 'translateY(0)' : 'translateY(40px)',
53-
transition: 'opacity 0.8s ease, transform 0.8s ease'
54-
}}
55-
bodyStyle={{ padding: isMobile ? '30px 24px' : '60px 40px' }}
226+
className="cta-card"
227+
style={styles.card(isVisible)}
228+
bodyStyle={styles.cardBody}
56229
>
57-
<ExperimentOutlined style={{
58-
fontSize: isMobile ? '48px' : '64px',
59-
color: theme.accent,
60-
marginBottom: '24px',
61-
display: 'block'
62-
}} />
63-
<Title
64-
level={isMobile ? 3 : 2}
65-
style={{ color: theme.text, marginBottom: '16px' }}
66-
>
67-
¿Listo para revolucionar tu invernadero?
68-
</Title>
69-
<Paragraph style={{
70-
fontSize: isMobile ? '16px' : '18px',
71-
color: theme.textLight,
72-
lineHeight: '1.6',
73-
marginBottom: '32px',
74-
maxWidth: '600px',
75-
margin: '0 auto 32px'
76-
}}>
77-
Únete a la nueva era de la agricultura de precisión. Nuestro sistema de control climático
78-
automatizado maximizará tu productividad y reducirá tus costos operativos.
79-
</Paragraph>
80-
81-
<Space
82-
direction={isMobile ? 'vertical' : 'horizontal'}
83-
size={isMobile ? 'middle' : 'large'}
84-
style={{ width: isMobile ? '100%' : 'auto' }}
85-
>
86-
<Button
87-
type="primary"
88-
size="large"
89-
block={isMobile}
90-
onClick={handleLoginRedirect}
91-
style={{
92-
background: `linear-gradient(45deg, ${theme.secondaryDark}, ${theme.secondary})`,
93-
border: 'none',
94-
borderRadius: '8px',
95-
fontWeight: 'bold',
96-
padding: '0 32px',
97-
height: '48px',
98-
fontSize: '16px',
99-
boxShadow: `0 4px 15px ${hexToRgba(theme.secondary, 0.4)}`
100-
}}
101-
>
102-
Solicitar Demo
103-
</Button>
104-
<Button
105-
size="large"
106-
block={isMobile}
107-
onClick={handleLoginRedirect}
108-
style={{
109-
color: theme.accent,
110-
borderColor: theme.accent,
111-
borderRadius: '8px',
112-
fontWeight: 'bold',
113-
padding: '0 32px',
114-
height: '48px',
115-
fontSize: '16px',
116-
background: 'transparent'
117-
}}
118-
>
119-
Contactar Ventas
120-
</Button>
121-
</Space>
230+
<Flex vertical align="center">
231+
<div style={styles.iconWrapper()}>
232+
<ExperimentOutlined />
233+
</div>
234+
235+
<Title level={1} style={styles.title()}>
236+
¿Listo para Transformar tu Agricultura?
237+
</Title>
238+
239+
<Paragraph style={styles.subtitle()}>
240+
Únete a la revolución de la agricultura 4.0. Nuestro sistema de control climático inteligente
241+
no solo maximiza tu productividad y reduce costos, sino que también garantiza la sostenibilidad
242+
y calidad de tus cultivos mediante tecnología de vanguardia.
243+
</Paragraph>
244+
245+
<div style={styles.buttonGroup(isVisible)}>
246+
<Button
247+
type="primary"
248+
size="large"
249+
icon={<RocketOutlined />}
250+
onClick={handleLoginRedirect}
251+
className="cta-button-primary"
252+
style={styles.primaryButton}
253+
>
254+
Solicitar Demo Gratuita
255+
</Button>
256+
257+
<Button
258+
size="large"
259+
icon={<MessageOutlined />}
260+
onClick={handleContactRedirect}
261+
className="cta-button-secondary"
262+
style={styles.secondaryButton}
263+
>
264+
Consultar con Especialista
265+
</Button>
266+
</div>
267+
268+
<div style={{
269+
marginTop: screens.xs ? '24px' : '32px',
270+
opacity: isVisible ? 1 : 0,
271+
transform: isVisible ? 'translateY(0)' : 'translateY(10px)',
272+
transition: 'all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
273+
}}>
274+
<Paragraph style={{
275+
color: theme.textLight,
276+
fontSize: screens.xs ? '14px' : '16px',
277+
margin: 0,
278+
fontStyle: 'italic',
279+
}}>
280+
✅ Implementación garantizada • Soporte 24/7 • Resultados en 30 días
281+
</Paragraph>
282+
</div>
283+
</Flex>
122284
</Card>
123285
</Col>
124286
</Row>

0 commit comments

Comments
 (0)