Skip to content

Commit dde83e9

Browse files
morningmanmorningman
authored
[refactor](next) add user stories landing page (#3649)
1 parent 8bf4721 commit dde83e9

4 files changed

Lines changed: 487 additions & 1 deletion

File tree

‎src/components/home-next/NavbarNext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function buildNavItems(docsHref: string, releasesHref: string): NavItem[] {
3838
{ label: 'Doris vs. Others', href: '/why-doris/compare' },
3939
{ label: 'Benchmarks', href: '/why-doris/benchmarks' },
4040
{ label: 'Key Features', href: '/why-doris/key-features' },
41-
{ label: 'User Stories (coming soon)', href: '#' },
41+
{ label: 'User Stories', href: '/why-doris/users' },
4242
],
4343
},
4444
{

‎src/components/why-doris-next/UsersNext.scss‎

Lines changed: 291 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,291 @@
1+
.users-next {
2+
--un-green-dark: #06805F;
3+
--un-green-darker: #054C39;
4+
--un-green-darkest: #033A2C;
5+
--un-cream-light: #FAF6EE;
6+
--un-cream-warm: #EFE6D2;
7+
--un-paper: #FFFCF5;
8+
--un-yellow: #FFD23F;
9+
--un-yellow-bright: #FFE066;
10+
--un-ink: #0F1A14;
11+
--un-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
12+
--un-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
13+
--un-container: 1320px;
14+
--un-gutter: 56px;
15+
16+
position: relative;
17+
background: var(--un-paper);
18+
color: var(--un-ink);
19+
font-family: var(--un-sans);
20+
overflow-x: hidden;
21+
22+
* {
23+
box-sizing: border-box;
24+
}
25+
}
26+
27+
.users-next__container {
28+
max-width: var(--un-container);
29+
margin: 0 auto;
30+
padding: 0 var(--un-gutter);
31+
width: 100%;
32+
}
33+
34+
.users-next__accent {
35+
color: var(--un-yellow);
36+
}
37+
38+
[data-reveal] {
39+
opacity: 0;
40+
transform: translateY(24px);
41+
transition:
42+
opacity 0.7s cubic-bezier(.2, .8, .2, 1),
43+
transform 0.7s cubic-bezier(.2, .8, .2, 1);
44+
}
45+
46+
[data-reveal].is-visible {
47+
opacity: 1;
48+
transform: none;
49+
}
50+
51+
[data-reveal-delay='1'] {
52+
transition-delay: 0.08s;
53+
}
54+
55+
[data-reveal-delay='2'] {
56+
transition-delay: 0.16s;
57+
}
58+
59+
[data-reveal-delay='3'] {
60+
transition-delay: 0.24s;
61+
}
62+
63+
/* ---------------- Hero ---------------- */
64+
65+
.users-next__hero {
66+
position: relative;
67+
background: var(--un-green-dark);
68+
color: var(--un-cream-light);
69+
overflow: hidden;
70+
padding: 96px 0 88px;
71+
}
72+
73+
.users-next__hero-bg {
74+
position: absolute;
75+
inset: 0;
76+
z-index: 0;
77+
background:
78+
radial-gradient(ellipse 60% 50% at 78% 22%, rgba(45, 223, 168, 0.18), transparent 70%),
79+
radial-gradient(ellipse 50% 70% at 0% 100%, rgba(255, 210, 63, 0.05), transparent 70%);
80+
}
81+
82+
.users-next__hero-grid {
83+
position: absolute;
84+
inset: 0;
85+
background-image: radial-gradient(rgba(245, 239, 228, 0.09) 1.2px, transparent 1.2px);
86+
background-size: 28px 28px;
87+
mask-image: linear-gradient(180deg, black, black 75%, transparent);
88+
-webkit-mask-image: linear-gradient(180deg, black, black 75%, transparent);
89+
}
90+
91+
.users-next__hero-stack {
92+
position: relative;
93+
z-index: 5;
94+
max-width: 1040px;
95+
}
96+
97+
.users-next__hero-title {
98+
font-family: var(--un-mono);
99+
font-weight: 700;
100+
text-transform: uppercase;
101+
letter-spacing: -0.035em;
102+
word-spacing: -0.18em;
103+
line-height: 0.92;
104+
color: var(--un-cream-light);
105+
margin: 0;
106+
font-size: clamp(40px, 4.4vw, 62px);
107+
}
108+
109+
.users-next__bolt-inline {
110+
display: inline-block;
111+
vertical-align: -0.12em;
112+
margin: 0 0.06em 0 0.04em;
113+
}
114+
115+
.users-next__hero-sub {
116+
font-size: 16px;
117+
line-height: 1.5;
118+
word-spacing: -0.12em;
119+
color: rgba(245, 239, 228, 0.85);
120+
margin: 22px 0 0;
121+
max-width: 620px;
122+
font-weight: 400;
123+
}
124+
125+
.users-next__hero-cta {
126+
margin-top: 32px;
127+
}
128+
129+
.users-next__cta {
130+
display: inline-flex;
131+
align-items: center;
132+
justify-content: center;
133+
padding: 14px 28px;
134+
background: var(--un-yellow);
135+
color: var(--un-ink);
136+
font-family: var(--un-mono);
137+
font-weight: 700;
138+
font-size: 14px;
139+
letter-spacing: 0.04em;
140+
border-radius: 4px;
141+
text-decoration: none;
142+
transition:
143+
transform 0.2s cubic-bezier(.2, .8, .2, 1),
144+
box-shadow 0.2s cubic-bezier(.2, .8, .2, 1),
145+
background 0.2s ease;
146+
}
147+
148+
.users-next__cta:hover {
149+
transform: translateY(-2px);
150+
background: var(--un-yellow-bright);
151+
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5);
152+
color: var(--un-ink);
153+
text-decoration: none;
154+
}
155+
156+
/* ---------------- Grid section ---------------- */
157+
158+
.users-next__section {
159+
position: relative;
160+
background: var(--un-paper);
161+
padding: 88px 0 120px;
162+
}
163+
164+
.users-next__cats {
165+
list-style: none;
166+
margin: 0 auto;
167+
padding: 0;
168+
display: flex;
169+
flex-wrap: wrap;
170+
gap: 12px 24px;
171+
justify-content: center;
172+
max-width: 58rem;
173+
color: #4C576C;
174+
}
175+
176+
.users-next__cats li {
177+
padding: 1px 0;
178+
}
179+
180+
.users-next__cat {
181+
display: block;
182+
cursor: pointer;
183+
white-space: nowrap;
184+
border: 0;
185+
border-radius: 2.5rem;
186+
padding: 12px 24px;
187+
font-size: 16px;
188+
color: inherit;
189+
background: #fff;
190+
box-shadow: 0px 1px 4px 0px rgba(0, 89, 68, 0.10);
191+
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
192+
}
193+
194+
.users-next__cat:hover {
195+
background: var(--ifm-color-primary, #11A679);
196+
color: #fff;
197+
}
198+
199+
.users-next__cat.is-active {
200+
background: var(--ifm-color-primary, #11A679);
201+
color: #fff;
202+
}
203+
204+
.users-next__grid {
205+
list-style: none;
206+
padding: 0;
207+
margin: 48px 0 0;
208+
display: grid;
209+
grid-template-columns: repeat(4, 1fr);
210+
gap: 32px;
211+
}
212+
213+
.users-next__more-wrap {
214+
display: flex;
215+
justify-content: center;
216+
margin-top: 36px;
217+
}
218+
219+
.users-next__more {
220+
display: inline-flex;
221+
align-items: center;
222+
gap: 6px;
223+
cursor: pointer;
224+
padding: 16px 32px;
225+
border: 1px solid var(--ifm-color-primary, #11A679);
226+
background: transparent;
227+
border-radius: 4px;
228+
color: var(--ifm-color-primary, #11A679);
229+
font-size: 16px;
230+
transition: background 0.2s ease, color 0.2s ease;
231+
}
232+
233+
.users-next__more:hover {
234+
background: var(--ifm-color-primary, #11A679);
235+
color: #fff;
236+
}
237+
238+
/* ---------------- Responsive ---------------- */
239+
240+
@media (max-width: 1100px) {
241+
.users-next {
242+
--un-gutter: 36px;
243+
}
244+
245+
.users-next__grid {
246+
grid-template-columns: repeat(3, 1fr);
247+
gap: 24px;
248+
}
249+
}
250+
251+
@media (max-width: 768px) {
252+
.users-next {
253+
--un-gutter: 22px;
254+
}
255+
256+
.users-next__hero {
257+
padding: 64px 0 56px;
258+
}
259+
260+
.users-next__section {
261+
padding: 56px 0 72px;
262+
}
263+
264+
.users-next__cats {
265+
gap: 12px;
266+
justify-content: flex-start;
267+
flex-wrap: nowrap;
268+
overflow-x: auto;
269+
scrollbar-width: none;
270+
-ms-overflow-style: none;
271+
}
272+
273+
.users-next__cats::-webkit-scrollbar {
274+
display: none;
275+
}
276+
277+
.users-next__cat {
278+
padding: 8px 16px;
279+
font-size: 14px;
280+
}
281+
282+
.users-next__grid {
283+
grid-template-columns: repeat(2, 1fr);
284+
gap: 12px;
285+
margin-top: 24px;
286+
}
287+
288+
.users-next__hero-sub {
289+
font-size: 15px;
290+
}
291+
}

0 commit comments

Comments
 (0)