Skip to content

Commit 91ad1dd

Browse files
CuB1zCuB1z
committed
feat: Improve UI by adding giddeon
1 parent 47a25a1 commit 91ad1dd

7 files changed

Lines changed: 200 additions & 42 deletions

File tree

‎frontend/public/assets/giddeon_1.png‎

606 KB
Loading

‎frontend/public/assets/giddeon_2.png‎

636 KB
Loading

‎frontend/src/components/dashboard/ai/AICta.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,21 @@ export default function AICta() {
1111
<h2 className={styles.aiCtaTitle}>Asistente con IA</h2>
1212
</div>
1313
<div className={styles.cta}>
14-
<p>¿Estás preparado para planear tu próximo viaje? Descubre el poder de nuestra IA para ayudarte a planificar tus viajes en cuestión de segundos.</p>
15-
<Button
16-
style={["primary", "big", "full"]}
17-
label="Comenzar"
18-
to="/itineraries/new?editorType=ai"
19-
/>
14+
<div className={styles.ctaContent}>
15+
<span className={styles.ctaEyebrow}>Experiencia IA</span>
16+
<h3 className={styles.ctaHeading}>Tu viaje en segundos</h3>
17+
<p>
18+
¿Estás preparado para planear tu próximo viaje? Descubre el poder de nuestra IA
19+
para crear itinerarios útiles y detallados al instante.
20+
</p>
21+
<div className={styles.ctaAction}>
22+
<Button
23+
style={["primary", "big", "full"]}
24+
label="Comenzar"
25+
to="/itineraries/new?editorType=ai"
26+
/>
27+
</div>
28+
</div>
2029
</div>
2130
</section>
2231
);

‎frontend/src/components/sections/Cta.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ export default function Cta() {
1414
>
1515
<div className={styles.ctaSurface}>
1616
<div className={styles.ctaContent}>
17-
<p className={styles.ctaLead}>
18-
Diseña tu itinerario en minutos y organiza cada parada en un solo
19-
lugar.
20-
</p>
17+
<h3 className={styles.ctaHeading}>
18+
Diseña tu itinerario en minutos
19+
</h3>
2120
<p className={styles.ctaText}>
22-
Prueba la demo y empieza a planificar hoy.
21+
Organiza cada parada en un solo lugar. Prueba la demo y empieza a
22+
planificar hoy.
2323
</p>
2424
<div className={styles.actions}>
2525
<DemoButton style="primary" />

‎frontend/src/styles/components/dashboard/ai/AICta.module.css‎

Lines changed: 90 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,39 +21,114 @@
2121
}
2222

2323
.cta {
24+
--cta-overlay: linear-gradient(
25+
90deg, var(--bg-secondary) 0%,
26+
color-mix(in srgb, var(--bg-secondary) 92%, transparent) 48%,
27+
transparent 72%
28+
);
2429
width: 100%;
2530
padding: var(--space-xl);
2631
display: flex;
27-
flex-direction: column;
28-
justify-content: center;
29-
gap: var(--space-md);
30-
32+
align-items: center;
3133
background: var(--bg-secondary);
34+
background-image: var(--cta-overlay), url("/assets/giddeon_2.png");
35+
background-repeat: no-repeat;
36+
background-position-y: 24px;
37+
background-position-x: right;
38+
background-size: cover, auto 115%;
3239
border-radius: var(--border-radius-lg);
3340
border: 2px solid var(--border-secondary);
41+
position: relative;
42+
overflow: hidden;
3443

35-
p {
36-
color: var(--text-tertiary);
37-
font-size: var(--font-size-md);
38-
text-wrap: balance;
39-
margin-bottom: var(--space-md);
40-
}
44+
.ctaContent {
45+
width: min(64%, 720px);
46+
display: flex;
47+
flex-direction: column;
48+
justify-content: center;
49+
gap: var(--space-md);
50+
z-index: 1;
51+
52+
.ctaEyebrow {
53+
width: fit-content;
54+
padding: 4px var(--space-sm);
55+
border-radius: var(--border-radius-full);
56+
border: 1px solid var(--info-border);
57+
color: var(--info-text);
58+
background: var(--info-bg);
59+
font-size: var(--font-size-xs);
60+
font-weight: var(--font-weight-medium);
61+
}
62+
63+
.ctaHeading {
64+
color: var(--text-primary);
65+
font-size: var(--font-size-xxl);
66+
line-height: 1.15;
67+
text-wrap: balance;
68+
margin: 0;
69+
}
4170

71+
p {
72+
color: var(--text-tertiary);
73+
font-size: var(--font-size-md);
74+
line-height: 1.6;
75+
text-wrap: pretty;
76+
margin: 0;
77+
max-width: 56ch;
78+
}
79+
80+
.ctaAction {
81+
margin-top: var(--space-md);
82+
}
83+
}
4284
}
4385
}
4486

4587
@media (min-width: 768px) {
4688
.aiCtaSection {
47-
max-width: 100%;
48-
4989
.cta {
5090
padding: var(--space-xxl);
91+
background-size: cover, auto 115%;
5192

52-
p {
53-
margin-bottom: var(--space-xl);
54-
font-size: var(--font-size-md);
93+
.ctaContent {
94+
.ctaHeading {
95+
font-size: var(--font-size-xxxl);
96+
}
97+
}
98+
}
99+
}
100+
}
101+
102+
@media (max-width: 767px) {
103+
.aiCtaSection {
104+
.cta {
105+
--cta-overlay: linear-gradient(
106+
-90deg,
107+
var(--bg-secondary) 0%,
108+
color-mix(in srgb, var(--bg-secondary) 60%, transparent) 44%,
109+
transparent 100%
110+
);
111+
padding: var(--space-lg);
112+
align-items: flex-start;
113+
justify-content: flex-start;
114+
115+
.ctaContent {
116+
width: 100%;
55117
max-width: 100%;
118+
119+
.ctaHeading {
120+
font-size: var(--font-size-xl);
121+
}
56122
}
57123
}
58124
}
125+
}
126+
127+
@media (max-width: 480px) {
128+
.aiCtaSection {
129+
.cta {
130+
background-size: cover, auto 70%;
131+
background-position: right 16px top 16px;
132+
}
133+
}
59134
}

‎frontend/src/styles/components/sections/Cta.module.css‎

Lines changed: 88 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
.ctaSurface {
2+
position: relative;
3+
isolation: isolate;
4+
overflow: hidden;
25
width: 100%;
36
border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-secondary));
47
border-radius: var(--border-radius-xl);
@@ -7,48 +10,119 @@
710
radial-gradient(circle at 92% 115%, color-mix(in srgb, var(--info) 18%, transparent), transparent 42%),
811
linear-gradient(150deg, color-mix(in srgb, var(--bg-tertiary) 56%, transparent), var(--bg-secondary));
912
box-shadow: 0 24px 54px color-mix(in srgb, var(--bg-primary) 56%, transparent);
13+
14+
&::after {
15+
content: "";
16+
position: absolute;
17+
right: 0;
18+
bottom: 0;
19+
width: 200px;
20+
height: 200px;
21+
pointer-events: none;
22+
background: url("/assets/giddeon_1.png") no-repeat;
23+
background-size: cover;
24+
}
1025
}
1126

1227
.ctaContent {
13-
width: min(980px, 100%);
14-
margin: 0 auto;
15-
padding: clamp(var(--space-xxl), 4vw, var(--space-largest)) clamp(var(--space-lg), 5vw, var(--space-largest));
28+
position: relative;
29+
z-index: 1;
30+
width: min(64%, 800px);
31+
margin: 0;
32+
padding: var(--space-xxl);
1633
display: flex;
1734
flex-direction: column;
18-
align-items: center;
35+
align-items: flex-start;
1936
justify-content: center;
20-
text-align: center;
21-
gap: var(--space-lg);
37+
text-align: left;
38+
gap: var(--space-md);
2239
}
2340

24-
.ctaLead {
25-
font-size: clamp(var(--font-size-xl), 2.6vw, var(--font-size-xxxl));
41+
.ctaHeading {
42+
font-size: var(--font-size-xxxl);
43+
max-width: 16ch;
2644
color: var(--text-primary);
2745
font-weight: var(--font-weight-bold);
28-
width: 100%;
29-
max-width: 100%;
46+
line-height: 1.12;
3047
text-wrap: balance;
48+
margin: 0;
3149
}
3250

3351
.ctaText {
34-
font-size: clamp(var(--font-size-md), 1.7vw, var(--font-size-lg));
52+
font-size: clamp(var(--font-size-lg), 1.9vw, var(--font-size-xl));
3553
color: var(--text-secondary);
36-
max-width: 48ch;
54+
max-width: 44ch;
3755
line-height: 1.55;
3856
text-wrap: pretty;
57+
margin: 0;
3958
}
4059

4160
.actions {
42-
margin-top: var(--space-xs);
61+
margin-top: var(--space-lg);
4362
}
4463

4564
@media (max-width: 640px) {
4665
.ctaSurface {
4766
border-radius: var(--border-radius-lg);
67+
68+
&::before {
69+
background:
70+
linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, transparent) 0%, color-mix(in srgb, var(--bg-secondary) 90%, transparent) 62%, color-mix(in srgb, var(--bg-secondary) 78%, transparent) 100%),
71+
linear-gradient(90deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--bg-secondary) 88%, transparent) 62%, transparent 100%);
72+
}
73+
74+
&::after {
75+
width: 170px;
76+
height: 170px;
77+
right: -24px;
78+
bottom: -24px;
79+
opacity: 0.34;
80+
}
4881
}
4982

5083
.ctaContent {
51-
gap: var(--space-lg);
84+
width: 100%;
85+
max-width: 100%;
86+
gap: var(--space-sm);
5287
padding: var(--space-xxl) var(--space-xl);
88+
89+
.ctaHeading {
90+
font-size: var(--font-size-xxl);
91+
max-width: 100%;
92+
text-wrap: pretty;
93+
}
94+
95+
.ctaText {
96+
font-size: var(--font-size-lg);
97+
max-width: 100%;
98+
line-height: 1.6;
99+
}
100+
}
101+
}
102+
103+
@media (max-width: 500px) {
104+
.ctaSurface {
105+
&::after {
106+
width: 130px;
107+
height: 130px;
108+
right: -20px;
109+
bottom: -18px;
110+
opacity: 0.28;
111+
}
112+
}
113+
114+
.ctaContent {
115+
max-width: 100%;
116+
padding: var(--space-xl) var(--space-lg);
117+
118+
.ctaHeading {
119+
font-size: var(--font-size-xl);
120+
max-width: 100%;
121+
}
122+
123+
.ctaText {
124+
font-size: var(--font-size-md);
125+
max-width: 100%;
126+
}
53127
}
54128
}

‎frontend/tests/components/sections/Cta.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ describe("Cta", () => {
6363
const { container } = render(<Cta />);
6464

6565
const ctaContent = container.querySelector("div[class*='ctaContent']");
66-
const lead = ctaContent?.querySelector("p[class*='ctaLead']");
66+
const heading = ctaContent?.querySelector("h3[class*='ctaHeading']");
6767
const paragraphs = ctaContent?.querySelectorAll("p[class*='ctaText']");
6868
const actionsDiv = ctaContent?.querySelector("div[class*='actions']");
6969
const button = actionsDiv?.querySelector("button");
7070

71-
expect(lead).toBeInTheDocument();
71+
expect(heading).toBeInTheDocument();
7272
expect(paragraphs).toHaveLength(1);
7373
expect(actionsDiv).toBeInTheDocument();
7474
expect(button).toBeInTheDocument();

0 commit comments

Comments
 (0)