Skip to content

Commit 317368b

Browse files
brilloutbrillout
authored
landing page: refactor stability graphic (#3179)
1 parent 457a1d4 commit 317368b

8 files changed

Lines changed: 177 additions & 83 deletions

File tree

‎docs/pages/index/sections/Dx/DxContent.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ const DxContent = () => {
158158
</Block>
159159
</TwoColumn>
160160
<ClosingWords href="/hooks">
161-
See list of hooks <ChevronsRight className="w-4 h-4 md:w-5 md:h-5" />
161+
Explore hooks <ChevronsRight className="w-4 h-4 md:w-5 md:h-5 mt-[1px]" />
162162
</ClosingWords>
163163
</Section>
164164

@@ -260,8 +260,8 @@ const DxContent = () => {
260260
</Block>
261261
</TwoColumn>
262262
<ClosingWords href="/extensions">
263-
See growing ecosystem of extensions
264-
<ChevronsRight className="w-4 h-4 md:w-5 md:h-5" />
263+
See extensions
264+
<ChevronsRight className="w-4 h-4 md:w-5 md:h-5 mt-[1px]" />
265265
</ClosingWords>
266266
</Section>
267267
</div>

‎docs/pages/index/sections/Flexibility/index.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,12 @@ const FlexibilitySection = () => {
126126
}
127127
/>
128128
<p>
129-
Use powerful hooks for <b>unprecedented flexibility</b> and extensive control over tool integration,
130-
data lifecycle, pre-rendering, state management, and more.
129+
Use powerful hooks for <b>unmatched flexibility</b> and extensive control over tool integration, data
130+
lifecycle, pre-rendering, state management, and more.
131131
</p>
132132
<p className="my-5">
133-
Hooks unlock unprecedented deep integrations — use them directly for maximum control, or via Vike
134-
extensions such as <code>vike-react</code> and <code>vike-react-apollo</code> for zero-config
135-
integration.
133+
Hooks unlock deep integrations — use them directly for maximum control, or via Vike extensions such as{' '}
134+
<code>vike-react</code> and <code>vike-react-apollo</code> for zero-config integrations.
136135
</p>
137136
<div className="mt-1 mb-9">
138137
{/*

‎docs/pages/index/sections/Stability/StableGraphic/EcoComponents.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ const EcoComponents = () => {
9797
}, [])
9898

9999
return (
100-
<div className="relative z-10 mb-10">
101-
<div className="md:-mt-4 flex gap-1 md:gap-4">
100+
<div className="relative z-10">
101+
<div className="grid grid-cols-2 gap-2 md:grid-cols-4 md:gap-3">
102102
{objectEntries(ecosystemComponents).map(([category, components]) => (
103-
<div key={category} className="flex flex-col items-center gap-1 flex-1">
103+
<div key={category} className="flex min-h-full flex-col items-center gap-1.5 px-1 py-1 md:px-1.5 md:py-1.5">
104104
<BoxOrange className="text-xs text-grey" $type="category">
105105
{ecoComponentCategoryNames[category]}
106106
</BoxOrange>
107107
<div className="flex-1">
108-
<ul className="list-none flex flex-wrap gap-1 md:gap-2 justify-center">
108+
<ul className="list-none flex flex-wrap justify-center gap-1 md:gap-1.5">
109109
{components.map((component) => {
110110
const opacity = decorations[category]?.[component.name] ?? 1
111111

@@ -122,7 +122,7 @@ const EcoComponents = () => {
122122
<a
123123
href={component.link}
124124
target="_blank"
125-
className="py-0.5 px-0.5 md:py-1 md:px-2 w-full text-accent/70 hover:text-accent text-tiny md:text-xs"
125+
className="py-0.5 px-1 md:py-1 md:px-2 w-full text-accent/70 hover:text-accent text-tiny md:text-xs"
126126
>
127127
{component.name}
128128
</a>
@@ -156,11 +156,19 @@ export const BoxOrange = cm.li.variants<{ $size?: VikeComponentSize; $type: 'lib
156156
lib: `
157157
inset-ring-1
158158
inset-ring-accent/30
159-
bg-white
159+
bg-linear-to-br from-white to-accent/6
160160
rounded-field
161+
shadow-xs
162+
shadow-accent/5
161163
`,
162164
category: `
163-
mb-3
165+
rounded-full
166+
px-2
167+
py-0.75
168+
text-[11px]
169+
font-semibold
170+
tracking-[0.12em]
171+
text-accent/80
164172
`,
165173
},
166174
},

‎docs/pages/index/sections/Stability/StableGraphic/ImageGroup.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎docs/pages/index/sections/Stability/StableGraphic/Legend.tsx‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,56 @@
11
import React from 'react'
2-
import LayoutComponent from '../../../components/LayoutComponent'
32
import { BoxOrange } from './EcoComponents'
43
import { BoxBlue } from './VikeComponents'
54

6-
const StableGraphicLegend = () => {
5+
type StableGraphicLegendKind = 'vike' | 'ecosystem' | 'hooks'
6+
7+
interface StableGraphicLegendProps {
8+
kind: StableGraphicLegendKind
9+
}
10+
11+
const legendCopy: Record<StableGraphicLegendKind, string> = {
12+
vike: 'Vike internal components',
13+
ecosystem: 'Tools',
14+
hooks: 'Vike hooks',
15+
}
16+
17+
const legendTextClass: Record<StableGraphicLegendKind, string> = {
18+
vike: 'text-secondary/90',
19+
ecosystem: 'text-accent/90',
20+
hooks: 'text-base-content/60',
21+
}
22+
23+
const StableGraphicLegend = ({ kind }: StableGraphicLegendProps) => {
24+
const isVike = kind === 'vike'
25+
const isHooks = kind === 'hooks'
26+
727
return (
8-
<LayoutComponent $size="sm">
9-
<div className="mt-4 grid md:grid-cols-2 gap-2 md:gap-10">
10-
{/* <img src={vikeLogo} alt="" className="h-auto w-5" /> */}
11-
<div className="flex gap-2 items-center">
12-
<BoxBlue $size="big" className="w-8! h-6! flex-none! m-0!" />
13-
<p className="flex-1 font-bold text-grey text-xs md:text-sm">Vike internal components</p>
14-
</div>
15-
<div className="flex gap-2 items-center">
16-
<BoxOrange $size="big" $type="lib" className="w-8! h-6! flex-none! m-0!">
28+
<div className="flex">
29+
<div className="inline-flex items-center gap-2.5 py-1">
30+
{isVike ? (
31+
<BoxBlue $size="big" className="m-0! h-6! w-8! flex-none!" />
32+
) : isHooks ? (
33+
<span
34+
className="h-6 w-8 flex-none"
35+
style={{
36+
backgroundImage:
37+
'linear-gradient(to bottom, #d8d8d8 0%, #d8d8d8 100%), linear-gradient(to right, #d8d8d8 0%, #d8d8d8 100%)',
38+
backgroundPosition: 'center top, center bottom',
39+
backgroundRepeat: 'no-repeat',
40+
backgroundSize: '4px 100%, 21px 4px',
41+
}}
42+
/>
43+
) : (
44+
<BoxOrange $size="big" $type="lib" className="m-0! h-6! w-8! flex-none!">
1745
<div className="bg-linear-to-bl to-accent/7 absolute inset-0 pointer-events-none select-none" />
18-
<span className="w-10 h-4 block"></span>
46+
<span className="block h-4 w-10"></span>
1947
</BoxOrange>
20-
<p className="flex-1 font-bold text-grey text-xs md:text-sm">JavaScript ecosystem</p>
21-
</div>
48+
)}
49+
<p className={`text-xs font-semibold tracking-[0.02em] md:text-sm ${legendTextClass[kind]}`}>
50+
{legendCopy[kind]}
51+
</p>
2252
</div>
23-
</LayoutComponent>
53+
</div>
2454
)
2555
}
2656

‎docs/pages/index/sections/Stability/StableGraphic/VikeComponents.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import cm from '@classmatejs/react'
22
import React from 'react'
33
import { splitIntoRows, VikeComponent, VikeComponentSize } from './grid.utils'
4-
import ImageGroup from './ImageGroup'
54

65
const bigComponents: VikeComponent[] = (
76
[
@@ -26,7 +25,7 @@ const bigComponents: VikeComponent[] = (
2625
link: 'https://vike.dev/data-fetching',
2726
},
2827
{
29-
name: 'Powerful hooks',
28+
name: 'Hooks',
3029
link: 'https://vike.dev/hooks',
3130
},
3231
{
@@ -92,16 +91,15 @@ const componentRows = splitIntoRows(components, rowCount)
9291

9392
const VikeComponents = () => {
9493
return (
95-
<div className="p-3 bg-linear-to-t to-white via-white rounded-box relative md:w-[90%] md:mx-auto border-3 border-[#e7eaf3]">
96-
<ImageGroup />
97-
<ul className="list-none flex flex-wrap gap-1 lg:hidden justify-center">
94+
<div className="relative pt-0.5 md:pt-1">
95+
<ul className="relative z-10 list-none flex flex-wrap justify-center gap-1 md:gap-1.5 lg:hidden">
9896
{components.map((component) => (
9997
<BoxBlue key={component.link} $size={component.size}>
10098
<InnerLink href={component.link}>{component.name}</InnerLink>
10199
</BoxBlue>
102100
))}
103101
</ul>
104-
<div className="hidden lg:flex lg:flex-col lg:gap-1.5">
102+
<div className="relative z-10 hidden lg:flex lg:flex-col lg:gap-1.5">
105103
{componentRows.map((row, rowIndex) => (
106104
<ul key={rowIndex} className="list-none flex flex-wrap gap-1.5">
107105
{row.map((component) => (
@@ -121,14 +119,17 @@ export default VikeComponents
121119
export const BoxBlue = cm.li.variants<{ $size: VikeComponentSize }>({
122120
base: `
123121
inset-ring-1
124-
inset-ring-secondary/50 hover:inset-ring-secondary
125-
rounded-field
126-
bg-gradient-to-bl to-secondary/7 hover:to-secondary/12
122+
inset-ring-secondary/45 hover:inset-ring-secondary
123+
rounded-[0.9rem]
124+
bg-gradient-to-br from-white to-secondary/7 hover:to-secondary/14
127125
text-base-content/90 hover:text-base-content
126+
shadow-xs shadow-secondary/10
128127
flex
129128
lg:flex-1 lg:basis-0 lg:min-w-max
130129
items-center justify-center
131-
text-center text-xs md:text-sm
130+
text-center
131+
text-tiny md:text-xs
132+
hover:text-accent/70
132133
relative
133134
`,
134135
variants: {
@@ -141,6 +142,6 @@ export const BoxBlue = cm.li.variants<{ $size: VikeComponentSize }>({
141142

142143
const InnerLink = cm.a`
143144
text-base-content
144-
py-1 px-2
145+
py-0.75 px-1.75
145146
w-full
146147
`

‎docs/pages/index/sections/Stability/StableGraphic/index.tsx‎

Lines changed: 88 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,97 @@ import StableGraphicLegend from './Legend'
66

77
const Outer = cm.div`relative mx-auto`
88

9+
const SectionFrame = cm.div.variants<{ $tone: 'ecosystem' | 'vike' }>({
10+
base: `
11+
relative
12+
overflow-hidden
13+
rounded-[2rem]
14+
border
15+
px-2.5 py-2.5
16+
md:px-4 md:py-3
17+
`,
18+
variants: {
19+
$tone: {
20+
ecosystem: 'border-accent/15 bg-linear-to-b from-white via-white to-accent/4',
21+
vike: 'border-secondary/15 bg-linear-to-b from-white via-white to-secondary/5',
22+
},
23+
},
24+
})
25+
26+
const DecouplingDivider = () => (
27+
<div className="relative flex items-center justify-center h-10 md:h-13">
28+
<div className="absolute inset-0 flex items-stretch justify-center py-0 gap-2.5 sm:gap-10 md:gap-9 lg:gap-12">
29+
{Array.from({ length: 10 }, (_, barIndex) => barIndex).map((barIndex) => (
30+
<span
31+
key={barIndex}
32+
className="h-full w-3.5 md:w-4.5"
33+
style={{
34+
backgroundImage:
35+
'linear-gradient(to bottom, #d8d8d8 0%, #d8d8d8 100%), linear-gradient(to right, #d8d8d8 0%, #d8d8d8 100%)',
36+
backgroundPosition: 'center top, center bottom',
37+
backgroundRepeat: 'no-repeat',
38+
backgroundSize: '4px 100%, 18px 4px',
39+
}}
40+
/>
41+
))}
42+
</div>
43+
</div>
44+
)
45+
46+
const EcosystemSection = () => (
47+
<SectionFrame $tone="ecosystem">
48+
<div className="pointer-events-none absolute inset-x-8 top-0 h-18 rounded-full bg-accent/10 blur-3xl" />
49+
<div className="relative z-10">
50+
<EcoComponents />
51+
</div>
52+
</SectionFrame>
53+
)
54+
55+
const VikeSection = () => (
56+
<SectionFrame $tone="vike">
57+
<div className="pointer-events-none absolute inset-x-10 bottom-0 h-20 rounded-full bg-secondary/10 blur-3xl" />
58+
<div className="relative z-10">
59+
<VikeComponents />
60+
</div>
61+
</SectionFrame>
62+
)
63+
964
const StableGraphic = () => {
1065
return (
1166
<Outer>
12-
<EcoComponents />
13-
<VikeComponents />
14-
<StableGraphicLegend />
67+
<div className="grid md:hidden">
68+
<div className="grid gap-1.5 mb-4">
69+
<StableGraphicLegend kind="ecosystem" />
70+
<StableGraphicLegend kind="hooks" />
71+
<StableGraphicLegend kind="vike" />
72+
</div>
73+
<EcosystemSection />
74+
<DecouplingDivider />
75+
<VikeSection />
76+
</div>
77+
78+
<div className="hidden md:grid md:grid-cols-[9rem_minmax(0,1fr)] md:gap-x-2">
79+
<div className="col-start-1 row-start-1 flex items-center">
80+
<StableGraphicLegend kind="ecosystem" />
81+
</div>
82+
<div className="col-start-2 row-start-1">
83+
<EcosystemSection />
84+
</div>
85+
86+
<div className="col-start-1 row-start-2 flex items-center">
87+
<StableGraphicLegend kind="hooks" />
88+
</div>
89+
<div className="col-start-2 row-start-2">
90+
<DecouplingDivider />
91+
</div>
92+
93+
<div className="col-start-1 row-start-3 flex items-center">
94+
<StableGraphicLegend kind="vike" />
95+
</div>
96+
<div className="col-start-2 row-start-3">
97+
<VikeSection />
98+
</div>
99+
</div>
15100
</Outer>
16101
)
17102
}

0 commit comments

Comments
 (0)