Skip to content

Commit d4820e8

Browse files
mu29mu29
committed
chore: add a showcase section to the bottom of the home page
1 parent e25c7ec commit d4820e8

4 files changed

Lines changed: 93 additions & 25 deletions

File tree

‎packages/docs/src/page-cloud/FreeSetupSection/FreeSetupSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const FreeSetupSection: FC<unknown> = () => (
77
id="setup"
88
alignHorizontal="center"
99
className={[
10-
'gap-32',
10+
'gap-40',
1111
'bg-background-variant/70',
1212
'mx-24',
1313
'max-md:mx-16',

‎packages/docs/src/page-demo/index.tsx‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,51 @@ const INITIAL_SOURCE = `
118118
</VStack>
119119
</Grid>
120120
</VStack>
121-
<VStack alignHorizontal="center" className={['gap-8', 'px-24', 'max-md:px-16', 'py-196', 'max-md:py-128']}>
122-
<Heading level={2} size="4xl" weight="bold" align="center">
123-
Unlock the full potential of your team
124-
</Heading>
125-
<Body size="xl" align="center" className={['text-foreground', 'mb-32']}>
126-
Move from idea to production in minutes.
127-
<br />
128-
Build faster, collaborate better, and ship with confidence.
129-
</Body>
130-
<ButtonCta variant="primary" size="xl" href="/docs">
131-
Start building ›
121+
<VStack alignHorizontal="center" className={['gap-40', 'px-24', 'max-md:px-16', 'py-196', 'max-md:py-128']}>
122+
<VStack className={['gap-8']}>
123+
<Heading level={2} size="4xl" weight="bold" align="center">
124+
See what you can build
125+
</Heading>
126+
<Body size="xl" align="center" className={['max-w-[610px]', 'text-foreground']}>
127+
Browse examples and discover what's possible with Server Driven UI. From landing pages to blog, all built with real components.
128+
</Body>
129+
</VStack>
130+
<Grid columns={4} className={['gap-16', 'max-lg:grid-cols-2', 'max-md:grid-cols-1']}>
131+
<VStack className={['gap-8', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
132+
<Heading level={3} size="lg" weight="semibold">
133+
Marketing Campaigns
134+
</Heading>
135+
<Body className={['text-foreground']}>
136+
Launch seasonal sales, flash deals, and product highlights. Update banners and pricing in real-time without bothering engineers.
137+
</Body>
138+
</VStack>
139+
<VStack className={['gap-8', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
140+
<Heading level={3} size="lg" weight="semibold">
141+
Landing Pages
142+
</Heading>
143+
<Body className={['text-foreground']}>
144+
Build conversion-focused pages with hero sections, feature grids, and CTAs. Perfect for product launches and signups.
145+
</Body>
146+
</VStack>
147+
<VStack className={['gap-8', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
148+
<Heading level={3} size="lg" weight="semibold">
149+
Rapid Prototyping
150+
</Heading>
151+
<Body className={['text-foreground']}>
152+
Test new ideas without waiting for dev cycles. Create beta announcements, feature previews, and A/B test variants instantly.
153+
</Body>
154+
</VStack>
155+
<VStack className={['gap-8', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
156+
<Heading level={3} size="lg" weight="semibold">
157+
Editorial Content
158+
</Heading>
159+
<Body className={['text-foreground']}>
160+
Craft rich blog posts, announcements, and help articles. Mix text, images, and callouts with full editorial control.
161+
</Body>
162+
</VStack>
163+
</Grid>
164+
<ButtonCta variant="primary" size="xl" href="/showcase">
165+
View examples →
132166
</ButtonCta>
133167
</VStack>
134168
</VStack>

‎packages/docs/src/page-home/index.tsx‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -118,17 +118,51 @@ const INITIAL_SOURCE = `
118118
</VStack>
119119
</Grid>
120120
</VStack>
121-
<VStack alignHorizontal="center" className={['gap-8', 'px-24', 'max-md:px-16', 'py-196', 'max-md:py-128']}>
122-
<Heading level={2} size="4xl" weight="bold" align="center">
123-
Unlock the full potential of your team
124-
</Heading>
125-
<Body size="xl" align="center" className={['text-foreground', 'mb-32']}>
126-
Move from idea to production in minutes.
127-
<br />
128-
Build faster, collaborate better, and ship with confidence.
129-
</Body>
130-
<ButtonCta variant="primary" size="xl" href="/docs">
131-
Start building ›
121+
<VStack alignHorizontal="center" className={['gap-40', 'px-24', 'max-md:px-16', 'py-196', 'max-md:py-128']}>
122+
<VStack className={['gap-8']}>
123+
<Heading level={2} size="4xl" weight="bold" align="center">
124+
See what you can build
125+
</Heading>
126+
<Body size="xl" align="center" className={['max-w-[610px]', 'text-foreground']}>
127+
Browse examples and discover what's possible with Server Driven UI. From landing pages to blog, all built with real components.
128+
</Body>
129+
</VStack>
130+
<Grid columns={4} className={['gap-16', 'max-lg:grid-cols-2', 'max-md:grid-cols-1']}>
131+
<VStack className={['gap-12', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
132+
<Heading level={4} size="lg" weight="semibold">
133+
Marketing Campaigns
134+
</Heading>
135+
<Body size="md">
136+
Launch seasonal sales, flash deals, and product highlights. Update banners and pricing in real-time without bothering engineers.
137+
</Body>
138+
</VStack>
139+
<VStack className={['gap-12', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
140+
<Heading level={4} size="lg" weight="semibold">
141+
Landing Pages
142+
</Heading>
143+
<Body size="md">
144+
Build conversion-focused pages with hero sections, feature grids, and CTAs. Perfect for product launches and signups.
145+
</Body>
146+
</VStack>
147+
<VStack className={['gap-12', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
148+
<Heading level={4} size="lg" weight="semibold">
149+
Rapid Prototyping
150+
</Heading>
151+
<Body size="md">
152+
Test new ideas without waiting for dev cycles. Create beta announcements, feature previews, and A/B test variants instantly.
153+
</Body>
154+
</VStack>
155+
<VStack className={['gap-12', 'p-24', 'rounded-sm', 'border', 'bg-background']}>
156+
<Heading level={4} size="lg" weight="semibold">
157+
Editorial Content
158+
</Heading>
159+
<Body size="md">
160+
Craft rich blog posts, announcements, and help articles. Mix text, images, and callouts with full editorial control.
161+
</Body>
162+
</VStack>
163+
</Grid>
164+
<ButtonCta variant="primary" size="xl" href="/showcase">
165+
View examples →
132166
</ButtonCta>
133167
</VStack>
134168
</VStack>

‎packages/docs/src/page-showcase/ShowcaseHeroBanner/ShowcaseHeroBanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ export const ShowcaseHeroBanner: FC<unknown> = () => (
1212
<HStack className={['gap-8', 'mt-16']}>
1313
<Button variant="primary" size="lg" asChild={true}>
1414
<Link href="#promotion" plain={true}>
15-
Start browsing ›
15+
View examples ›
1616
</Link>
1717
</Button>
1818
<Button variant="outline" size="lg" asChild={true}>
1919
<Link href="/docs" plain={true}>
20-
View docs →
20+
Read the docs →
2121
</Link>
2222
</Button>
2323
</HStack>

0 commit comments

Comments
 (0)