Skip to content

Commit 4b77704

Browse files
author
iexitdev
committed
Refine landing page layout
1 parent 6c22a22 commit 4b77704

5 files changed

Lines changed: 242 additions & 114 deletions

File tree

‎apps/site/src/components/ChartKitFeatures.astro‎

Lines changed: 169 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,117 @@ const features = [
4141
description: "AGENTS.md and llms.txt are available for coding agents."
4242
}
4343
];
44+
45+
const featurePatterns = [
46+
{
47+
top: "-8px",
48+
left: "50%",
49+
marginLeft: "-80px",
50+
width: "100%",
51+
height: "100%",
52+
patternX: "-12",
53+
patternY: "4",
54+
squares: [
55+
[7, 1, 0.07],
56+
[10, 2, 0.14],
57+
[8, 4, 0.1],
58+
[9, 6, 0.18],
59+
[11, 3, 0.055],
60+
[5, 5, 0.12]
61+
]
62+
},
63+
{
64+
top: "8px",
65+
left: "38%",
66+
marginLeft: "-48px",
67+
width: "112%",
68+
height: "96%",
69+
patternX: "6",
70+
patternY: "-10",
71+
squares: [
72+
[3, 2, 0.16],
73+
[8, 1, 0.06],
74+
[11, 4, 0.13],
75+
[5, 6, 0.085],
76+
[10, 7, 0.18],
77+
[6, 3, 0.045]
78+
]
79+
},
80+
{
81+
top: "-18px",
82+
left: "58%",
83+
marginLeft: "-112px",
84+
width: "108%",
85+
height: "110%",
86+
patternX: "-20",
87+
patternY: "12",
88+
squares: [
89+
[6, 1, 0.09],
90+
[9, 3, 0.18],
91+
[12, 2, 0.065],
92+
[8, 6, 0.12],
93+
[11, 7, 0.15],
94+
[5, 4, 0.05]
95+
]
96+
},
97+
{
98+
top: "0px",
99+
left: "30%",
100+
marginLeft: "-36px",
101+
width: "118%",
102+
height: "104%",
103+
patternX: "14",
104+
patternY: "8",
105+
squares: [
106+
[2, 1, 0.13],
107+
[5, 3, 0.055],
108+
[9, 2, 0.16],
109+
[7, 5, 0.09],
110+
[12, 6, 0.18],
111+
[4, 7, 0.07]
112+
]
113+
},
114+
{
115+
top: "-12px",
116+
left: "62%",
117+
marginLeft: "-96px",
118+
width: "104%",
119+
height: "108%",
120+
patternX: "-4",
121+
patternY: "-16",
122+
squares: [
123+
[4, 1, 0.18],
124+
[7, 2, 0.08],
125+
[10, 5, 0.14],
126+
[13, 4, 0.055],
127+
[8, 7, 0.11],
128+
[5, 6, 0.16]
129+
]
130+
},
131+
{
132+
top: "12px",
133+
left: "46%",
134+
marginLeft: "-72px",
135+
width: "114%",
136+
height: "98%",
137+
patternX: "18",
138+
patternY: "2",
139+
squares: [
140+
[5, 2, 0.06],
141+
[11, 1, 0.16],
142+
[8, 4, 0.1],
143+
[14, 5, 0.18],
144+
[10, 7, 0.07],
145+
[6, 6, 0.13]
146+
]
147+
}
148+
];
44149
---
45150

46151
<section
47152
id="features"
48-
class="relative overflow-hidden scroll-mt-20 bg-black py-24 text-white transition-colors duration-300 sm:py-28 [html[data-theme='light']_&]:bg-white [html[data-theme='light']_&]:text-black"
153+
class="relative scroll-mt-20 bg-black py-28 text-white transition-colors duration-300 sm:py-32 [html[data-theme='light']_&]:bg-white [html[data-theme='light']_&]:text-black"
49154
>
50-
<div class="feature-section-pattern" aria-hidden="true"></div>
51155
<div
52156
class="relative z-10 mx-auto max-w-[1320px] px-6 sm:px-8 md:px-10 lg:px-12 xl:px-16"
53157
>
@@ -65,36 +169,82 @@ const features = [
65169
</div>
66170

67171
<div
68-
class="relative isolate mx-auto mt-16 grid max-w-[1120px] grid-cols-1 overflow-hidden rounded-2xl border border-white/10 bg-black/[0.82] transition-colors duration-300 sm:grid-cols-2 lg:grid-cols-3 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-white/[0.82]"
172+
class="relative mx-auto mt-16 grid max-w-[1120px] grid-cols-1 overflow-hidden rounded-2xl border border-dashed border-white/16 bg-black transition-colors duration-300 sm:grid-cols-2 md:grid-cols-3 [html[data-theme='light']_&]:border-black/14 [html[data-theme='light']_&]:bg-white"
69173
>
70-
<div class="feature-cross-wash" aria-hidden="true"></div>
71174
{
72175
features.map(({ description, icon: Icon, title }, index) => (
73176
<article
74177
class:list={[
75-
"relative z-10 flex min-h-[220px] flex-col justify-center border-white/10 p-9 transition-colors duration-300 sm:p-12 [html[data-theme='light']_&]:border-black/10",
178+
"relative min-h-[240px] overflow-hidden border-dashed border-white/12 p-6 transition-colors duration-300 sm:p-7 md:p-8 [html[data-theme='light']_&]:border-black/12",
76179
index > 0 ? "border-t" : "",
77180
index < 2 ? "sm:border-t-0" : "",
78-
index < 3 ? "lg:border-t-0" : "",
181+
index < 3 ? "md:border-t-0" : "",
79182
index % 2 === 1 ? "sm:border-l" : "",
80183
index >= 2 ? "sm:border-t" : "",
81-
index >= 3 ? "lg:border-t" : "",
184+
index >= 3 ? "md:border-t" : "",
82185
index % 2 === 0 ? "sm:border-l-0" : "",
83-
index % 3 === 0 ? "lg:border-l-0" : "",
84-
index % 3 !== 0 ? "lg:border-l" : ""
186+
index % 3 === 0 ? "md:border-l-0" : "",
187+
index % 3 !== 0 ? "md:border-l" : ""
85188
]}
86189
>
87-
<div class="relative z-10 flex items-center gap-2.5">
88-
<Icon
89-
class="size-4 text-white/72 transition-colors duration-300 [html[data-theme='light']_&]:text-black/68"
90-
stroke-width={1.9}
91-
aria-hidden="true"
92-
/>
93-
<h3 class="text-sm font-semibold leading-5 tracking-[-0.01em] text-white transition-colors duration-300 [html[data-theme='light']_&]:text-black">
94-
{title}
95-
</h3>
190+
<div
191+
class="pointer-events-none absolute [mask-image:linear-gradient(white,transparent)]"
192+
style={`top: ${featurePatterns[index].top}; left: ${featurePatterns[index].left}; margin-left: ${featurePatterns[index].marginLeft}; width: ${featurePatterns[index].width}; height: ${featurePatterns[index].height};`}
193+
aria-hidden="true"
194+
>
195+
<div class="absolute inset-0 bg-gradient-to-r from-white/[0.045] to-white/[0.01] opacity-100 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] [html[data-theme='light']_&]:from-black/[0.045] [html[data-theme='light']_&]:to-black/[0.01]">
196+
<svg
197+
class="absolute inset-0 h-full w-full text-white stroke-white/22 mix-blend-overlay [html[data-theme='light']_&]:text-black [html[data-theme='light']_&]:stroke-black/22"
198+
aria-hidden="true"
199+
>
200+
<defs>
201+
<pattern
202+
id={`feature-grid-${index}`}
203+
width="20"
204+
height="20"
205+
patternUnits="userSpaceOnUse"
206+
x={featurePatterns[index].patternX}
207+
y={featurePatterns[index].patternY}
208+
>
209+
<path d="M.5 20V.5H20" fill="none" />
210+
</pattern>
211+
</defs>
212+
<rect
213+
width="100%"
214+
height="100%"
215+
stroke-width="0"
216+
fill={`url(#feature-grid-${index})`}
217+
/>
218+
<svg
219+
x={featurePatterns[index].patternX}
220+
y={featurePatterns[index].patternY}
221+
class="overflow-visible"
222+
>
223+
{featurePatterns[index].squares.map(([x, y, opacity]) => (
224+
<rect
225+
fill="currentColor"
226+
opacity={opacity}
227+
stroke-width="0"
228+
width="21"
229+
height="21"
230+
x={x * 20}
231+
y={y * 20}
232+
/>
233+
))}
234+
</svg>
235+
</svg>
236+
</div>
96237
</div>
97-
<p class="relative z-10 mt-4 max-w-[17rem] text-sm font-light leading-6 text-white/52 transition-colors duration-300 [html[data-theme='light']_&]:text-black/52">
238+
239+
<Icon
240+
class="relative z-10 size-12 text-white/72 transition-colors duration-300 md:size-[38px] [html[data-theme='light']_&]:text-black/70"
241+
stroke-width={1}
242+
aria-hidden="true"
243+
/>
244+
<h3 class="relative z-10 mt-10 text-sm font-medium leading-5 text-white transition-colors duration-300 md:text-base [html[data-theme='light']_&]:text-black">
245+
{title}
246+
</h3>
247+
<p class="relative z-10 mt-2 max-w-[17rem] text-xs font-light leading-5 text-white/52 transition-colors duration-300 [html[data-theme='light']_&]:text-black/52">
98248
{description}
99249
</p>
100250
</article>
@@ -103,74 +253,3 @@ const features = [
103253
</div>
104254
</div>
105255
</section>
106-
107-
<style>
108-
.feature-section-pattern,
109-
.feature-cross-wash {
110-
pointer-events: none;
111-
position: absolute;
112-
inset: 0;
113-
}
114-
115-
.feature-section-pattern {
116-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg stroke-width='6.5' stroke='hsla(0, 0%25, 100%25, 1.00)' fill='none'%3E%3Cline x1='0' y1='0' x2='400' y2='400'%3E%3C/line%3E%3Cline x1='400' y1='0' x2='0' y2='400'%3E%3C/line%3E%3Cline x1='400' y1='0' x2='800' y2='400'%3E%3C/line%3E%3Cline x1='800' y1='0' x2='400' y2='400'%3E%3C/line%3E%3Cline x1='0' y1='400' x2='400' y2='800'%3E%3C/line%3E%3Cline x1='400' y1='400' x2='0' y2='800'%3E%3C/line%3E%3Cline x1='400' y1='400' x2='800' y2='800'%3E%3C/line%3E%3Cline x1='800' y1='400' x2='400' y2='800'%3E%3C/line%3E%3C/g%3E%3C/svg%3E");
117-
background-repeat: repeat;
118-
background-size: 95px 95px;
119-
mask-image: linear-gradient(
120-
to bottom,
121-
transparent 0%,
122-
rgba(0, 0, 0, 0.28) 10%,
123-
#000 24%,
124-
#000 76%,
125-
rgba(0, 0, 0, 0.28) 90%,
126-
transparent 100%
127-
);
128-
opacity: 0.08;
129-
-webkit-mask-image: linear-gradient(
130-
to bottom,
131-
transparent 0%,
132-
rgba(0, 0, 0, 0.28) 10%,
133-
#000 24%,
134-
#000 76%,
135-
rgba(0, 0, 0, 0.28) 90%,
136-
transparent 100%
137-
);
138-
z-index: 0;
139-
}
140-
141-
.feature-cross-wash {
142-
background:
143-
radial-gradient(
144-
circle at 50% 0%,
145-
rgba(0, 85, 218, 0.08),
146-
transparent 42%
147-
),
148-
linear-gradient(
149-
45deg,
150-
rgba(0, 0, 0, 0.86) 0%,
151-
rgba(0, 0, 0, 0.8) 42%,
152-
rgba(0, 0, 0, 0.88) 100%
153-
);
154-
z-index: 0;
155-
}
156-
157-
:global(html[data-theme="light"]) .feature-section-pattern {
158-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg stroke-width='6.5' stroke='hsla(215, 16%25, 47%25, 1.00)' fill='none'%3E%3Cline x1='0' y1='0' x2='400' y2='400'%3E%3C/line%3E%3Cline x1='400' y1='0' x2='0' y2='400'%3E%3C/line%3E%3Cline x1='400' y1='0' x2='800' y2='400'%3E%3C/line%3E%3Cline x1='800' y1='0' x2='400' y2='400'%3E%3C/line%3E%3Cline x1='0' y1='400' x2='400' y2='800'%3E%3C/line%3E%3Cline x1='400' y1='400' x2='0' y2='800'%3E%3C/line%3E%3Cline x1='400' y1='400' x2='800' y2='800'%3E%3C/line%3E%3Cline x1='800' y1='400' x2='400' y2='800'%3E%3C/line%3E%3C/g%3E%3C/svg%3E");
159-
opacity: 0.12;
160-
}
161-
162-
:global(html[data-theme="light"]) .feature-cross-wash {
163-
background:
164-
radial-gradient(
165-
circle at 50% 0%,
166-
rgba(0, 85, 218, 0.055),
167-
transparent 42%
168-
),
169-
linear-gradient(
170-
45deg,
171-
rgba(255, 255, 255, 0.84) 0%,
172-
rgba(255, 255, 255, 0.78) 42%,
173-
rgba(255, 255, 255, 0.88) 100%
174-
);
175-
}
176-
</style>

‎apps/site/src/components/ChartKitStats.astro‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,19 @@ const stats = rawStats.map((stat) => {
3333
data-stat-counters
3434
class="relative bg-black py-10 text-white transition-colors duration-300 sm:py-12 [html[data-theme='light']_&]:bg-white [html[data-theme='light']_&]:text-black"
3535
>
36-
<div
37-
class="pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-white/14 to-transparent transition-colors duration-300 sm:inset-x-8 md:inset-x-10 lg:inset-x-12 xl:inset-x-16 [html[data-theme='light']_&]:via-black/12"
38-
>
36+
<div class="pointer-events-none absolute inset-x-0 top-0 mx-auto max-w-[1160px] px-5">
37+
<div
38+
class="h-px bg-gradient-to-r from-transparent via-white/14 to-transparent transition-colors duration-300 [html[data-theme='light']_&]:via-black/12"
39+
>
40+
</div>
3941
</div>
40-
<div
41-
class="pointer-events-none absolute inset-x-6 bottom-0 h-px bg-gradient-to-r from-transparent via-white/14 to-transparent transition-colors duration-300 sm:inset-x-8 md:inset-x-10 lg:inset-x-12 xl:inset-x-16 [html[data-theme='light']_&]:via-black/12"
42-
>
42+
<div class="pointer-events-none absolute inset-x-0 bottom-0 mx-auto max-w-[1160px] px-5">
43+
<div
44+
class="h-px bg-gradient-to-r from-transparent via-white/14 to-transparent transition-colors duration-300 [html[data-theme='light']_&]:via-black/12"
45+
>
46+
</div>
4347
</div>
44-
<div class="mx-auto max-w-[1320px] px-6 sm:px-8 md:px-10 lg:px-12 xl:px-16">
48+
<div class="mx-auto max-w-[1160px] px-5">
4549
<dl class="grid grid-cols-2 gap-x-4 gap-y-8 lg:grid-cols-4 lg:gap-x-6">
4650
{
4751
stats.map((stat) => (

‎apps/site/src/components/Footer.astro‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const footerGroups = [
3131
label: "Migration"
3232
},
3333
{
34-
href: "/docs/react-native/recipes",
35-
label: "Recipes"
34+
href: "/docs/react-native/getting-started/contributing",
35+
label: "Contributing"
3636
},
3737
{
3838
href: "/docs/react-native/troubleshooting",
@@ -68,12 +68,17 @@ const footerGroups = [
6868
>
6969
<div>
7070
<nav
71-
class="mx-auto grid w-full grid-cols-1 justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 sm:gap-x-16 md:gap-x-24 lg:gap-x-32 xl:gap-x-40"
71+
class="mx-auto grid w-full max-w-[520px] grid-cols-2 justify-items-start gap-x-10 gap-y-10 max-sm:px-5 sm:max-w-none sm:grid-cols-3 sm:justify-items-center sm:gap-x-16 md:gap-x-24 lg:gap-x-32 xl:gap-x-40"
7272
aria-label="Footer"
7373
>
7474
{
75-
footerGroups.map((group) => (
76-
<div class="text-left">
75+
footerGroups.map((group, index) => (
76+
<div
77+
class:list={[
78+
"text-left",
79+
index === 2 && "col-span-2 sm:col-span-1"
80+
]}
81+
>
7782
<h2 class="text-sm font-semibold tracking-[-0.01em] text-white transition-colors duration-300 [html[data-theme='light']_&]:text-black">
7883
{group.title}
7984
</h2>

‎apps/site/src/components/Hero.astro‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const demoOptions = [
66
"Health",
77
"Developer",
88
"Analytics",
9-
"Crypto",
109
"Fitness"
1110
];
1211
---
@@ -30,10 +29,10 @@ const demoOptions = [
3029
</h1>
3130

3231
<p
33-
class="mt-8 max-w-[620px] text-base font-light leading-[1.45] tracking-[-0.005em] text-wrap text-white/60 transition-colors duration-300 sm:mt-9 sm:text-[17px] md:text-lg lg:mt-11 [html[data-theme='light']_&]:text-black/60"
32+
class="mt-8 max-w-[620px] text-[15px] font-light leading-6 text-wrap text-white/60 transition-colors duration-300 sm:mt-9 sm:text-base sm:leading-7 lg:mt-11 [html[data-theme='light']_&]:text-black/60"
3433
>
35-
Composable chart primitives with SVG defaults, interaction APIs, and
36-
migration-friendly components for production mobile apps.
34+
Charts that look sharp, feel native, and stay flexible as your app
35+
grows.
3736
</p>
3837
</div>
3938

0 commit comments

Comments
 (0)