Skip to content

Commit 439ee16

Browse files
marc0olomarc0olo
authored
infra(landing): redesign landing page hero and structure (#152)
## Summary - **Custom `SiteTitle` component** (`src/components/SiteTitle.astro`): replaces the Starlight site title in the navbar with `docs.internetcomputer.org` at 20px serif — \`docs\` in heading color (ink/bone), \`.internetcomputer.org\` in muted gray. - **Custom `Hero` component** (`src/components/Hero.astro`): heading-only hero — renders \`hero.title\` from frontmatter ("The Network is The Cloud. Agents Build.") with no tagline and no action buttons. Bottom padding reduced to 1.5rem to pull the skills box visually closer. - **ICP Skills banner**: restored below the hero as a standalone box with heading, description, and action buttons. - **Three action cards** below the skills banner — Quickstart (internal \`→\`), Playground/ICP Ninja (external \`↗\`), Explore Guides (internal \`→\`) — ordered by recommended developer journey, with directional arrows via CSS \`::after\`. - **Removed**: hero tagline, hero action buttons, "Start building" section, "The frontier cloud for your apps" CardGrid. - **Kept unchanged**: Documentation and External resources sections.
1 parent 428388d commit 439ee16

5 files changed

Lines changed: 197 additions & 61 deletions

File tree

‎astro.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export default defineConfig({
2626
components: {
2727
EditLink: "./src/components/EditLink.astro",
2828
Footer: "./src/components/Footer.astro",
29+
Hero: "./src/components/Hero.astro",
30+
SiteTitle: "./src/components/SiteTitle.astro",
2931
ThemeProvider: "./src/components/ThemeProvider.astro",
3032
},
3133
head: [

‎docs/index.mdx‎

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,11 @@ description: "Build tamperproof fullstack applications on the Internet Computer:
44
template: splash
55
hero:
66
title: "The Network is The Cloud.<br/>Agents Build."
7-
tagline: "Build fullstack apps on a public network where security is enforced by the protocol. No cloud vendor, no server patching, no security team. Tamperproof. Sovereign."
8-
actions:
9-
- text: Get started
10-
link: /getting-started/quickstart/
11-
icon: right-arrow
12-
variant: primary
13-
- text: Explore guides
14-
link: /guides/
15-
variant: secondary
16-
- text: Try in browser
17-
link: https://icp.ninja/projects/hello-world
18-
icon: external
19-
variant: minimal
207
---
218

22-
import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
9+
import { CardGrid, LinkCard } from '@astrojs/starlight/components';
2310

24-
## Start building
25-
26-
<CardGrid>
27-
<LinkCard title="Quickstart" description="Install the icp CLI, create a project, and deploy your first canister in under 5 minutes." href="/getting-started/quickstart/" />
28-
<LinkCard title="Choose your path" description="Not sure what to build next? Find the right guide based on your goal." href="/getting-started/choose-your-path/" />
29-
</CardGrid>
30-
31-
<div class="skills-banner" style="margin-top: 3rem">
11+
<div class="skills-banner">
3212

3313
## ICP skills for agents that write code
3414

@@ -41,34 +21,11 @@ Teach your AI agent canister patterns, API integrations, CLI commands, and deplo
4121

4222
</div>
4323

44-
## The frontier cloud for your apps
45-
46-
<CardGrid>
47-
<Card title="Tamperproof by the network" icon="approve-check-circle">
48-
Security is enforced by the protocol across every node. No security team, no server patching, no compliance dashboard required.
49-
[Learn more](concepts/canisters.md)
50-
</Card>
51-
<Card title="Fullstack on the network" icon="laptop">
52-
Frontend, backend, and data all run on the network. No cloud vendor, no CDN, no separate database.
53-
[Learn more](concepts/app-architecture.md)
54-
</Card>
55-
<Card title="Sovereign by design" icon="star">
56-
Apps run across independent nodes and are portable across hardware providers. No vendor lock-in.
57-
[Learn more](concepts/network-overview.md)
58-
</Card>
59-
<Card title="Data survives upgrades" icon="document">
60-
Canister memory persists automatically across executions and upgrades. No serialization, no migration scripts.
61-
[Learn more](concepts/orthogonal-persistence.md)
62-
</Card>
63-
<Card title="Autonomous execution" icon="rocket">
64-
Canisters schedule their own execution with timers. No external cron jobs, background workers, or separate infrastructure to maintain.
65-
[Learn more](concepts/timers.md)
66-
</Card>
67-
<Card title="Canisters fund themselves" icon="setting">
68-
Pre-load a canister with cycles and it pays for its own compute, storage, and bandwidth. No usage-based billing to pass on, no per-user pricing logic to build.
69-
[Learn more](concepts/cycles.md)
70-
</Card>
71-
</CardGrid>
24+
<div class="landing-actions">
25+
<a href="/getting-started/quickstart/" class="landing-action-card">Quickstart for craft coders</a>
26+
<a href="https://icp.ninja/projects/hello-world" class="landing-action-card">Playground for craft coders</a>
27+
<a href="/guides/" class="landing-action-card">Explore Guides</a>
28+
</div>
7229

7330
## Documentation
7431

‎src/components/Hero.astro‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
/**
3+
* Custom Hero override for the landing page.
4+
* Renders only the heading from frontmatter — the ICP Skills section
5+
* and action cards live in the page body (index.mdx).
6+
*/
7+
const { data } = Astro.locals.starlightRoute.entry;
8+
const { title = data.title } = data.hero || {};
9+
---
10+
11+
<div class="hero">
12+
<div class="sl-flex stack">
13+
<div class="sl-flex copy">
14+
<h1 id="_top" data-page-title set:html={title} />
15+
</div>
16+
</div>
17+
</div>
18+
19+
<style>
20+
@layer starlight.core {
21+
.hero {
22+
display: grid;
23+
align-items: center;
24+
gap: 1rem;
25+
padding-bottom: 1rem;
26+
}
27+
28+
.stack {
29+
flex-direction: column;
30+
gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
31+
text-align: center;
32+
}
33+
34+
.copy {
35+
flex-direction: column;
36+
gap: 1rem;
37+
align-items: center;
38+
}
39+
40+
h1 {
41+
font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
42+
line-height: var(--sl-line-height-headings);
43+
font-weight: 600;
44+
color: var(--sl-color-white);
45+
}
46+
47+
@media (min-width: 50rem) {
48+
.hero {
49+
padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
50+
}
51+
52+
.stack {
53+
text-align: start;
54+
}
55+
56+
.copy {
57+
align-items: flex-start;
58+
}
59+
}
60+
}
61+
</style>

‎src/components/SiteTitle.astro‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
import { logos } from 'virtual:starlight/user-images';
3+
import config from 'virtual:starlight/user-config';
4+
const { siteTitleHref } = Astro.locals.starlightRoute;
5+
---
6+
7+
<a href={siteTitleHref} class="site-title sl-flex">
8+
{
9+
config.logo && logos.dark && (
10+
<>
11+
<img
12+
class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
13+
alt={config.logo.alt}
14+
src={logos.dark.src}
15+
width={logos.dark.width}
16+
height={logos.dark.height}
17+
/>
18+
{!('src' in config.logo) && (
19+
<img
20+
class="dark:sl-hidden print:block"
21+
alt={config.logo.alt}
22+
src={logos.light?.src}
23+
width={logos.light?.width}
24+
height={logos.light?.height}
25+
/>
26+
)}
27+
</>
28+
)
29+
}
30+
<span class="title-group" translate="no">
31+
<span class="title-docs">docs</span>
32+
<span class="title-domain">.internetcomputer.org</span>
33+
</span>
34+
</a>
35+
36+
<style>
37+
@layer starlight.core {
38+
.site-title {
39+
align-items: center;
40+
gap: var(--sl-nav-gap);
41+
text-decoration: none;
42+
min-width: 0;
43+
}
44+
45+
.title-group {
46+
font-family: 'Newsreader', 'Source Serif 4', 'EB Garamond', ui-serif, Georgia, serif;
47+
font-size: var(--sl-text-xl);
48+
font-weight: 500;
49+
letter-spacing: -0.005em;
50+
white-space: nowrap;
51+
}
52+
53+
.title-docs {
54+
color: var(--sl-color-white);
55+
}
56+
57+
.title-domain {
58+
color: var(--sl-color-gray-3);
59+
}
60+
61+
img {
62+
height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
63+
width: auto;
64+
max-width: 100%;
65+
object-fit: contain;
66+
object-position: 0 50%;
67+
}
68+
}
69+
</style>

‎src/styles/custom.css‎

Lines changed: 58 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -147,14 +147,59 @@ h1, h2, h3, h4, h5, h6 {
147147
/* ── Landing page hero ───────────────────────────────────── */
148148

149149
.hero {
150-
padding-block: clamp(2rem, 6vmin, 4rem) !important;
150+
padding-block-start: clamp(2rem, 6vmin, 4rem) !important;
151+
padding-block-end: 1.5rem !important;
151152
}
152153

153-
.hero h1 {
154-
font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 4vw), var(--sl-text-5xl)) !important;
154+
/* ── Landing action cards (three boxes under hero) ────────── */
155+
156+
.landing-actions {
157+
display: grid;
158+
grid-template-columns: repeat(3, 1fr);
159+
gap: 1rem;
160+
margin-block: 0 2.5rem;
161+
}
162+
163+
@media (max-width: 50rem) {
164+
.landing-actions {
165+
grid-template-columns: 1fr;
166+
}
155167
}
156168

157-
/* ── Skills banner ─────────────────────────────────────────── */
169+
.landing-action-card {
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
gap: 0.375rem;
174+
background: var(--icp-bg-elev);
175+
border: 1px solid var(--icp-rule);
176+
border-radius: 8px;
177+
padding: 1.25rem 1.5rem;
178+
font-weight: 500;
179+
font-size: var(--sl-text-base);
180+
color: var(--icp-fg);
181+
text-decoration: none;
182+
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
183+
}
184+
185+
.landing-action-card:hover {
186+
border-color: var(--icp-accent);
187+
background: var(--icp-accent-dim);
188+
color: var(--icp-fg);
189+
}
190+
191+
.landing-action-card::after {
192+
content: '→';
193+
opacity: 0.5;
194+
flex-shrink: 0;
195+
}
196+
197+
.landing-action-card[href^="http"]::after {
198+
content: '↗';
199+
opacity: 1;
200+
}
201+
202+
/* ── ICP Skills banner ─────────────────────────────────────── */
158203

159204
.skills-banner {
160205
background: var(--icp-bg-elev);
@@ -182,15 +227,17 @@ h1, h2, h3, h4, h5, h6 {
182227
line-height: 1.6;
183228
}
184229

185-
.skills-banner .skills-actions {
230+
.skills-actions {
186231
display: flex;
187232
align-items: center;
188233
justify-content: center;
189234
gap: 1rem;
190235
flex-wrap: wrap;
191236
}
192237

193-
.skills-banner .skills-primary {
238+
/* ── ICP Skills action buttons ─────────────────────────────── */
239+
240+
.skills-primary {
194241
display: inline-flex;
195242
align-items: center;
196243
gap: 0.625rem;
@@ -206,18 +253,18 @@ h1, h2, h3, h4, h5, h6 {
206253
transition: filter 0.15s ease;
207254
}
208255

209-
.skills-banner .skills-primary:hover {
256+
.skills-primary:hover {
210257
filter: brightness(1.1);
211258
}
212259

213-
.skills-banner .skills-primary svg {
260+
.skills-primary svg {
214261
width: 1rem;
215262
height: 1rem;
216263
flex-shrink: 0;
217264
opacity: 0.7;
218265
}
219266

220-
.skills-banner .skills-cta {
267+
.skills-cta {
221268
display: inline-flex;
222269
align-items: center;
223270
gap: 0.5rem;
@@ -232,12 +279,12 @@ h1, h2, h3, h4, h5, h6 {
232279
transition: background 0.15s ease, border-color 0.15s ease;
233280
}
234281

235-
.skills-banner .skills-cta:hover {
282+
.skills-cta:hover {
236283
background: var(--icp-accent-dim);
237284
border-color: var(--icp-accent);
238285
}
239286

240-
.skills-banner .skills-cta .arrow-icon {
287+
.skills-cta .arrow-icon {
241288
width: 0.85rem;
242289
height: 0.85rem;
243290
}

0 commit comments

Comments
 (0)