Skip to content

Commit 1e5dce9

Browse files
RidRid
committed
style: update promotional elements with new color scheme
Signed-off-by: Rid <rid@cylo.io>
1 parent 68f1cd5 commit 1e5dce9

File tree

2 files changed

+164
-172
lines changed

2 files changed

+164
-172
lines changed

‎apps/web/src/app/[locale]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export default async function IndexPage() {
9292
{promoBannerData && (
9393
<div className="mb-4 flex flex-col items-center gap-2">
9494
{/* Black Friday Text */}
95-
<div className="text-sm font-bold text-white/90 uppercase tracking-[0.2em]">
95+
<div className="text-sm font-bold text-red-600 dark:text-white/90 uppercase tracking-[0.2em]">
9696
Black Friday
9797
</div>
9898
{/* Promo Badge */}
@@ -161,11 +161,11 @@ export default async function IndexPage() {
161161
{/* Promo Code Display - show if promo active */}
162162
{promoBannerData && (
163163
<div className="flex items-center justify-center gap-3 mb-4">
164-
<span className="text-sm text-white/60 font-medium">
164+
<span className="text-sm text-red-600/80 dark:text-white/60 font-medium">
165165
Use code
166166
</span>
167-
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 backdrop-blur-md border border-white/20">
168-
<span className="text-lg font-bold font-mono text-white tracking-wider">
167+
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/10 dark:bg-white/10 backdrop-blur-md border border-red-500/20 dark:border-white/20">
168+
<span className="text-lg font-bold font-mono text-red-600 dark:text-white tracking-wider">
169169
{promoBannerData.promo_code}
170170
</span>
171171
</div>

‎apps/web/src/components/promo-hero-wrapper.tsx‎

Lines changed: 160 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -21,193 +21,185 @@ export function PromoHeroWrapper({
2121
}
2222

2323
return (
24-
<div className="relative mb-12 mt-8 overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
24+
<div className="relative mb-12 mt-8 overflow-hidden rounded-3xl border border-black/10 dark:border-white/10 bg-gradient-to-br from-rose-50 via-white to-red-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
2525
{/* Animations */}
26-
{hasPromo && (
27-
<style jsx>{`
28-
@keyframes float {
29-
0%,
30-
100% {
31-
transform: translateY(0px) rotate(0deg);
32-
}
33-
50% {
34-
transform: translateY(-20px) rotate(5deg);
35-
}
26+
<style jsx>{`
27+
@keyframes float {
28+
0%,
29+
100% {
30+
transform: translateY(0px) rotate(0deg);
3631
}
37-
.animate-float {
38-
animation: float 3s ease-in-out infinite;
32+
50% {
33+
transform: translateY(-20px) rotate(5deg);
3934
}
40-
`}</style>
41-
)}
35+
}
36+
.animate-float {
37+
animation: float 3s ease-in-out infinite;
38+
}
39+
`}</style>
4240

4341
{/* Gradient overlay - conditional based on promo */}
44-
{hasPromo && (
45-
<div
46-
className="absolute inset-0 opacity-80"
47-
style={{
48-
background: `radial-gradient(circle at 50% 50%, ${gradientFrom}40 0%, transparent 70%)`
49-
}}
50-
/>
51-
)}
42+
<div
43+
className="absolute inset-0 opacity-40 dark:opacity-80"
44+
style={{
45+
background: `radial-gradient(circle at 50% 50%, ${gradientFrom}40 0%, transparent 70%)`
46+
}}
47+
/>
5248

53-
{/* Floating decorative elements - only show if promo active */}
54-
{hasPromo && (
55-
<>
56-
{/* Floating icons */}
57-
<div
58-
className="absolute top-[15%] left-[10%] animate-float opacity-20"
59-
style={{ animationDelay: "0s", animationDuration: "3s" }}
49+
{/* Floating decorative elements */}
50+
<>
51+
{/* Floating icons */}
52+
<div
53+
className="absolute top-[15%] left-[10%] animate-float opacity-10 dark:opacity-20"
54+
style={{ animationDelay: "0s", animationDuration: "3s" }}
55+
>
56+
<svg
57+
width="32"
58+
height="32"
59+
viewBox="0 0 24 24"
60+
fill="none"
61+
stroke="currentColor"
62+
className="text-red-500 dark:text-white"
6063
>
61-
<svg
62-
width="32"
63-
height="32"
64-
viewBox="0 0 24 24"
65-
fill="none"
66-
stroke="currentColor"
67-
className="text-white"
68-
>
69-
<path
70-
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
71-
strokeWidth="2"
72-
strokeLinecap="round"
73-
strokeLinejoin="round"
74-
/>
75-
</svg>
76-
</div>
77-
<div
78-
className="absolute top-[20%] right-[15%] animate-float opacity-20"
79-
style={{ animationDelay: "0.5s", animationDuration: "3.5s" }}
64+
<path
65+
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
66+
strokeWidth="2"
67+
strokeLinecap="round"
68+
strokeLinejoin="round"
69+
/>
70+
</svg>
71+
</div>
72+
<div
73+
className="absolute top-[20%] right-[15%] animate-float opacity-10 dark:opacity-20"
74+
style={{ animationDelay: "0.5s", animationDuration: "3.5s" }}
75+
>
76+
<svg
77+
width="36"
78+
height="36"
79+
viewBox="0 0 24 24"
80+
fill="none"
81+
stroke="currentColor"
82+
className="text-red-500 dark:text-white"
8083
>
81-
<svg
82-
width="36"
83-
height="36"
84-
viewBox="0 0 24 24"
85-
fill="none"
86-
stroke="currentColor"
87-
className="text-white"
88-
>
89-
<path
90-
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
91-
strokeWidth="2"
92-
strokeLinecap="round"
93-
strokeLinejoin="round"
94-
/>
95-
<line
96-
x1="7"
97-
y1="7"
98-
x2="7.01"
99-
y2="7"
100-
strokeWidth="2"
101-
strokeLinecap="round"
102-
strokeLinejoin="round"
103-
/>
104-
</svg>
105-
</div>
106-
<div
107-
className="absolute bottom-[20%] left-[12%] animate-float opacity-20"
108-
style={{ animationDelay: "1s", animationDuration: "4s" }}
84+
<path
85+
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
86+
strokeWidth="2"
87+
strokeLinecap="round"
88+
strokeLinejoin="round"
89+
/>
90+
<line
91+
x1="7"
92+
y1="7"
93+
x2="7.01"
94+
y2="7"
95+
strokeWidth="2"
96+
strokeLinecap="round"
97+
strokeLinejoin="round"
98+
/>
99+
</svg>
100+
</div>
101+
<div
102+
className="absolute bottom-[20%] left-[12%] animate-float opacity-10 dark:opacity-20"
103+
style={{ animationDelay: "1s", animationDuration: "4s" }}
104+
>
105+
<svg
106+
width="40"
107+
height="40"
108+
viewBox="0 0 24 24"
109+
fill="none"
110+
stroke="currentColor"
111+
className="text-red-500 dark:text-white"
109112
>
110-
<svg
111-
width="40"
112-
height="40"
113-
viewBox="0 0 24 24"
114-
fill="none"
115-
stroke="currentColor"
116-
className="text-white"
117-
>
118-
<polyline
119-
points="20 12 20 22 4 22 4 12"
120-
strokeWidth="2"
121-
strokeLinecap="round"
122-
strokeLinejoin="round"
123-
/>
124-
<rect
125-
x="2"
126-
y="7"
127-
width="20"
128-
height="5"
129-
strokeWidth="2"
130-
strokeLinecap="round"
131-
strokeLinejoin="round"
132-
/>
133-
<path
134-
d="M12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zm0 0h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"
135-
strokeWidth="2"
136-
strokeLinecap="round"
137-
strokeLinejoin="round"
138-
/>
139-
</svg>
140-
</div>
113+
<polyline
114+
points="20 12 20 22 4 22 4 12"
115+
strokeWidth="2"
116+
strokeLinecap="round"
117+
strokeLinejoin="round"
118+
/>
119+
<rect
120+
x="2"
121+
y="7"
122+
width="20"
123+
height="5"
124+
strokeWidth="2"
125+
strokeLinecap="round"
126+
strokeLinejoin="round"
127+
/>
128+
<path
129+
d="M12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zm0 0h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"
130+
strokeWidth="2"
131+
strokeLinecap="round"
132+
strokeLinejoin="round"
133+
/>
134+
</svg>
135+
</div>
136+
<div
137+
className="absolute bottom-[25%] right-[10%] animate-float opacity-10 dark:opacity-20"
138+
style={{ animationDelay: "1.5s", animationDuration: "3.2s" }}
139+
>
140+
<svg
141+
width="28"
142+
height="28"
143+
viewBox="0 0 24 24"
144+
fill="none"
145+
stroke="currentColor"
146+
className="text-red-500 dark:text-white"
147+
>
148+
<path
149+
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
150+
strokeWidth="2"
151+
strokeLinecap="round"
152+
strokeLinejoin="round"
153+
/>
154+
</svg>
155+
</div>
156+
157+
{/* Sparkles */}
158+
{[
159+
{ delay: 0, top: "30%", left: "20%" },
160+
{ delay: 0.3, top: "60%", left: "25%" },
161+
{ delay: 0.6, top: "40%", right: "30%" },
162+
{ delay: 0.9, bottom: "40%", right: "20%" },
163+
{ delay: 1.2, top: "70%", left: "40%" },
164+
{ delay: 1.5, top: "50%", right: "40%" }
165+
].map((sparkle, i) => (
141166
<div
142-
className="absolute bottom-[25%] right-[10%] animate-float opacity-20"
143-
style={{ animationDelay: "1.5s", animationDuration: "3.2s" }}
167+
key={i}
168+
className="absolute animate-pulse opacity-30 dark:opacity-60"
169+
style={{ ...sparkle, animationDelay: `${sparkle.delay}s` }}
144170
>
145-
<svg
146-
width="28"
147-
height="28"
148-
viewBox="0 0 24 24"
149-
fill="none"
150-
stroke="currentColor"
151-
className="text-white"
152-
>
153-
<path
154-
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
155-
strokeWidth="2"
156-
strokeLinecap="round"
157-
strokeLinejoin="round"
158-
/>
159-
</svg>
171+
<div className="w-1 h-1 bg-red-500 dark:bg-white rounded-full" />
160172
</div>
173+
))}
161174

162-
{/* Sparkles */}
163-
{[
164-
{ delay: 0, top: "30%", left: "20%" },
165-
{ delay: 0.3, top: "60%", left: "25%" },
166-
{ delay: 0.6, top: "40%", right: "30%" },
167-
{ delay: 0.9, bottom: "40%", right: "20%" },
168-
{ delay: 1.2, top: "70%", left: "40%" },
169-
{ delay: 1.5, top: "50%", right: "40%" }
170-
].map((sparkle, i) => (
171-
<div
172-
key={i}
173-
className="absolute animate-pulse opacity-60"
174-
style={{ ...sparkle, animationDelay: `${sparkle.delay}s` }}
175-
>
176-
<div className="w-1 h-1 bg-white rounded-full" />
177-
</div>
178-
))}
179-
180-
{/* Gradient orbs */}
181-
<div
182-
className="absolute top-0 left-1/4 w-96 h-96 rounded-full blur-3xl opacity-20 animate-pulse"
183-
style={{
184-
background: `radial-gradient(circle, ${gradientFrom} 0%, transparent 70%)`
185-
}}
186-
/>
187-
<div
188-
className="absolute bottom-0 right-1/4 w-96 h-96 rounded-full blur-3xl opacity-20 animate-pulse"
189-
style={{
190-
background: `radial-gradient(circle, ${gradientTo} 0%, transparent 70%)`,
191-
animationDelay: "1s"
192-
}}
193-
/>
194-
</>
195-
)}
175+
{/* Gradient orbs */}
176+
<div
177+
className="absolute top-0 left-1/4 w-96 h-96 rounded-full blur-3xl opacity-10 dark:opacity-20 animate-pulse"
178+
style={{
179+
background: `radial-gradient(circle, ${gradientFrom} 0%, transparent 70%)`
180+
}}
181+
/>
182+
<div
183+
className="absolute bottom-0 right-1/4 w-96 h-96 rounded-full blur-3xl opacity-10 dark:opacity-20 animate-pulse"
184+
style={{
185+
background: `radial-gradient(circle, ${gradientTo} 0%, transparent 70%)`,
186+
animationDelay: "1s"
187+
}}
188+
/>
189+
</>
196190

197191
{/* Content */}
198192
<div className="relative z-10 px-6 py-8 md:px-12 md:py-12 lg:py-14">
199193
{children}
200194
</div>
201195

202-
{/* Bottom gradient line - only if promo active */}
203-
{hasPromo && (
204-
<div
205-
className="absolute bottom-0 left-0 right-0 h-[2px]"
206-
style={{
207-
background: `linear-gradient(90deg, transparent, ${gradientFrom}, ${gradientTo}, transparent)`
208-
}}
209-
/>
210-
)}
196+
{/* Bottom gradient line */}
197+
<div
198+
className="absolute bottom-0 left-0 right-0 h-[2px]"
199+
style={{
200+
background: `linear-gradient(90deg, transparent, ${gradientFrom}, ${gradientTo}, transparent)`
201+
}}
202+
/>
211203
</div>
212204
)
213205
}

0 commit comments

Comments
 (0)