Skip to content

Commit c7414eb

Browse files
tranhoangpichtranhoangpich
committed
feat(frontend): add ios-friendly landing UI
1 parent b51edc7 commit c7414eb

2 files changed

Lines changed: 487 additions & 73 deletions

File tree

‎apps/frontend/src/app/globals.css‎

Lines changed: 360 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,370 @@
11
@import "tailwindcss";
22

33
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
4+
color-scheme: light;
5+
--ios-purple: #8c52ff;
6+
--ios-teal: #5ce1e6;
7+
--ios-gold: #f4ca44;
8+
--ios-green: #59b379;
9+
--ios-ink: #0b0b16;
10+
--ios-ink-soft: #151528;
11+
--ios-surface: #ffffff;
12+
--ios-surface-muted: #f6f7fb;
13+
--ios-outline: rgba(15, 24, 46, 0.12);
14+
--ios-shadow: 0 20px 60px rgba(24, 28, 52, 0.12);
15+
--ios-glow: 0 0 80px rgba(92, 225, 230, 0.35);
16+
--ios-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
17+
"Segoe UI", sans-serif;
618
}
719

8-
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
20+
* {
21+
box-sizing: border-box;
1322
}
1423

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
24+
body {
25+
margin: 0;
26+
min-height: 100vh;
27+
font-family: var(--ios-font);
28+
color: var(--ios-ink);
29+
background: linear-gradient(120deg, #f4f6ff 0%, #f7fcff 60%, #f0f3ff 100%);
2030
}
2131

22-
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
32+
.page {
33+
position: relative;
34+
min-height: 100vh;
35+
overflow: hidden;
36+
padding: 28px 20px 80px;
37+
}
38+
39+
.page-glow {
40+
position: absolute;
41+
width: 480px;
42+
height: 480px;
43+
border-radius: 999px;
44+
filter: blur(80px);
45+
opacity: 0.7;
46+
z-index: 0;
47+
}
48+
49+
.page-glow--left {
50+
top: -140px;
51+
left: -160px;
52+
background: radial-gradient(circle, var(--ios-purple), transparent 70%);
53+
}
54+
55+
.page-glow--right {
56+
bottom: -220px;
57+
right: -200px;
58+
background: radial-gradient(circle, var(--ios-teal), transparent 70%);
59+
}
60+
61+
.nav,
62+
.shell {
63+
position: relative;
64+
z-index: 1;
65+
}
66+
67+
.nav {
68+
display: flex;
69+
align-items: center;
70+
justify-content: space-between;
71+
max-width: 1100px;
72+
margin: 0 auto 40px;
73+
padding: 16px 20px;
74+
background: rgba(255, 255, 255, 0.7);
75+
border: 1px solid var(--ios-outline);
76+
border-radius: 18px;
77+
box-shadow: var(--ios-shadow);
78+
backdrop-filter: blur(16px);
79+
}
80+
81+
.logo {
82+
display: flex;
83+
align-items: center;
84+
gap: 14px;
85+
}
86+
87+
.logo-mark {
88+
width: 42px;
89+
height: 42px;
90+
display: grid;
91+
place-items: center;
92+
border-radius: 14px;
93+
font-weight: 700;
94+
color: var(--ios-ink);
95+
background: linear-gradient(135deg, var(--ios-purple), var(--ios-teal));
96+
box-shadow: var(--ios-glow);
97+
}
98+
99+
.logo-title {
100+
font-size: 18px;
101+
font-weight: 700;
102+
letter-spacing: 0.3px;
103+
}
104+
105+
.logo-subtitle {
106+
font-size: 12px;
107+
color: rgba(11, 11, 22, 0.55);
108+
}
109+
110+
.nav-actions {
111+
display: flex;
112+
gap: 12px;
113+
}
114+
115+
.primary-button,
116+
.secondary-button,
117+
.ghost-button {
118+
border: none;
119+
border-radius: 999px;
120+
padding: 12px 20px;
121+
font-size: 14px;
122+
font-weight: 600;
123+
cursor: pointer;
124+
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
125+
}
126+
127+
.primary-button {
128+
color: #101019;
129+
background: linear-gradient(90deg, var(--ios-gold), var(--ios-green));
130+
box-shadow: 0 16px 30px rgba(89, 179, 123, 0.28);
131+
}
132+
133+
.secondary-button {
134+
background: var(--ios-surface);
135+
color: var(--ios-ink);
136+
border: 1px solid var(--ios-outline);
137+
}
138+
139+
.ghost-button {
140+
background: transparent;
141+
color: var(--ios-ink);
142+
}
143+
144+
.primary-button:hover,
145+
.secondary-button:hover,
146+
.ghost-button:hover {
147+
transform: translateY(-1px);
148+
}
149+
150+
.shell {
151+
max-width: 1100px;
152+
margin: 0 auto;
153+
display: flex;
154+
flex-direction: column;
155+
gap: 40px;
156+
}
157+
158+
.hero {
159+
display: grid;
160+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
161+
gap: 32px;
162+
align-items: center;
163+
}
164+
165+
.hero-copy h1 {
166+
font-size: clamp(32px, 5vw, 48px);
167+
line-height: 1.1;
168+
margin: 0 0 16px;
169+
}
170+
171+
.hero-copy p {
172+
font-size: 16px;
173+
line-height: 1.6;
174+
color: rgba(11, 11, 22, 0.7);
175+
margin-bottom: 20px;
176+
}
177+
178+
.accent {
179+
color: var(--ios-gold);
180+
}
181+
182+
.badge {
183+
display: inline-flex;
184+
align-items: center;
185+
padding: 6px 12px;
186+
border-radius: 999px;
187+
font-size: 12px;
188+
font-weight: 600;
189+
color: var(--ios-ink);
190+
background: rgba(92, 225, 230, 0.2);
191+
margin-bottom: 12px;
192+
}
193+
194+
.pill {
195+
padding: 2px 8px;
196+
border-radius: 999px;
197+
background: rgba(140, 82, 255, 0.12);
198+
}
199+
200+
.hero-actions {
201+
display: flex;
202+
flex-wrap: wrap;
203+
gap: 12px;
204+
margin-bottom: 24px;
205+
}
206+
207+
.hero-meta {
208+
display: grid;
209+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
210+
gap: 12px;
211+
}
212+
213+
.hero-meta div {
214+
background: var(--ios-surface);
215+
border: 1px solid var(--ios-outline);
216+
border-radius: 16px;
217+
padding: 12px 14px;
218+
box-shadow: var(--ios-shadow);
219+
}
220+
221+
.hero-meta span {
222+
display: block;
223+
font-size: 12px;
224+
color: rgba(11, 11, 22, 0.6);
225+
}
226+
227+
.stat {
228+
font-size: 16px;
229+
color: var(--ios-ink);
230+
}
231+
232+
.hero-card {
233+
background: rgba(255, 255, 255, 0.8);
234+
border: 1px solid var(--ios-outline);
235+
border-radius: 24px;
236+
padding: 22px;
237+
box-shadow: var(--ios-shadow);
238+
backdrop-filter: blur(12px);
239+
display: grid;
240+
gap: 18px;
241+
}
242+
243+
.card-header {
244+
display: flex;
245+
align-items: center;
246+
justify-content: space-between;
247+
gap: 12px;
248+
}
249+
250+
.card-header h3 {
251+
margin: 0;
252+
font-size: 18px;
253+
}
254+
255+
.card-header span {
256+
font-size: 12px;
257+
color: rgba(11, 11, 22, 0.6);
258+
}
259+
260+
.chip {
261+
padding: 6px 12px;
262+
border-radius: 999px;
263+
background: rgba(140, 82, 255, 0.16);
264+
font-size: 12px;
265+
font-weight: 600;
266+
}
267+
268+
.dropzone {
269+
border: 2px dashed rgba(140, 82, 255, 0.25);
270+
border-radius: 20px;
271+
padding: 24px;
272+
display: grid;
273+
gap: 12px;
274+
text-align: center;
275+
background: rgba(140, 82, 255, 0.06);
276+
}
277+
278+
.dropzone span {
279+
display: block;
280+
font-size: 12px;
281+
color: rgba(11, 11, 22, 0.6);
282+
}
283+
284+
.drop-icon {
285+
font-size: 28px;
286+
}
287+
288+
.card-footer {
289+
display: flex;
290+
align-items: center;
291+
justify-content: space-between;
292+
gap: 12px;
293+
font-size: 13px;
294+
color: rgba(11, 11, 22, 0.7);
295+
}
296+
297+
.steps {
298+
display: grid;
299+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
300+
gap: 18px;
301+
}
302+
303+
.step {
304+
display: flex;
305+
gap: 12px;
306+
align-items: flex-start;
307+
padding: 18px;
308+
border-radius: 18px;
309+
background: var(--ios-surface);
310+
border: 1px solid var(--ios-outline);
311+
box-shadow: var(--ios-shadow);
312+
}
313+
314+
.step-number {
315+
width: 32px;
316+
height: 32px;
317+
border-radius: 10px;
318+
display: grid;
319+
place-items: center;
320+
background: rgba(92, 225, 230, 0.2);
321+
font-weight: 700;
322+
}
323+
324+
.step h4 {
325+
margin: 0 0 6px;
326+
}
327+
328+
.step p {
329+
margin: 0;
330+
font-size: 13px;
331+
color: rgba(11, 11, 22, 0.6);
332+
}
333+
334+
.footer-card {
335+
display: flex;
336+
align-items: center;
337+
justify-content: space-between;
338+
gap: 18px;
339+
padding: 24px;
340+
border-radius: 22px;
341+
background: linear-gradient(
342+
135deg,
343+
rgba(140, 82, 255, 0.16),
344+
rgba(92, 225, 230, 0.2)
345+
);
346+
border: 1px solid var(--ios-outline);
347+
}
348+
349+
.footer-card h3 {
350+
margin: 0 0 8px;
351+
}
352+
353+
.footer-card p {
354+
margin: 0;
355+
color: rgba(11, 11, 22, 0.7);
356+
}
357+
358+
@media (max-width: 720px) {
359+
.nav {
360+
flex-direction: column;
361+
align-items: flex-start;
362+
gap: 16px;
363+
}
364+
365+
.card-footer,
366+
.footer-card {
367+
flex-direction: column;
368+
align-items: flex-start;
369+
}
26370
}

0 commit comments

Comments
 (0)