infra(landing): redesign landing page hero and structure

astro.config.mjs

@@ -26,6 +26,8 @@ export default defineConfig({
       components: {
         EditLink: "./src/components/EditLink.astro",
         Footer: "./src/components/Footer.astro",
+        Hero: "./src/components/Hero.astro",
+        SiteTitle: "./src/components/SiteTitle.astro",
         ThemeProvider: "./src/components/ThemeProvider.astro",
       },
       head: [

docs/index.mdx

@@ -4,31 +4,11 @@ description: "Build tamperproof fullstack applications on the Internet Computer:
 template: splash
 hero:
   title: "The Network is The Cloud.<br/>Agents Build."
-  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."
-  actions:
-    - text: Get started
-      link: /getting-started/quickstart/
-      icon: right-arrow
-      variant: primary
-    - text: Explore guides
-      link: /guides/
-      variant: secondary
-    - text: Try in browser
-      link: https://icp.ninja/projects/hello-world
-      icon: external
-      variant: minimal
 ---
 
-import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
+import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
-## Start building
-
-<CardGrid>
-  <LinkCard title="Quickstart" description="Install the icp CLI, create a project, and deploy your first canister in under 5 minutes." href="/getting-started/quickstart/" />
-  <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/" />
-</CardGrid>
-
-<div class="skills-banner" style="margin-top: 3rem">
+<div class="skills-banner">
 
 ## ICP skills for agents that write code
 
@@ -41,34 +21,11 @@ Teach your AI agent canister patterns, API integrations, CLI commands, and deplo
 
 </div>
 
-## The frontier cloud for your apps
-
-<CardGrid>
-  <Card title="Tamperproof by the network" icon="approve-check-circle">
-    Security is enforced by the protocol across every node. No security team, no server patching, no compliance dashboard required.
-    [Learn more](concepts/canisters.md)
-  </Card>
-  <Card title="Fullstack on the network" icon="laptop">
-    Frontend, backend, and data all run on the network. No cloud vendor, no CDN, no separate database.
-    [Learn more](concepts/app-architecture.md)
-  </Card>
-  <Card title="Sovereign by design" icon="star">
-    Apps run across independent nodes and are portable across hardware providers. No vendor lock-in.
-    [Learn more](concepts/network-overview.md)
-  </Card>
-  <Card title="Data survives upgrades" icon="document">
-    Canister memory persists automatically across executions and upgrades. No serialization, no migration scripts.
-    [Learn more](concepts/orthogonal-persistence.md)
-  </Card>
-  <Card title="Autonomous execution" icon="rocket">
-    Canisters schedule their own execution with timers. No external cron jobs, background workers, or separate infrastructure to maintain.
-    [Learn more](concepts/timers.md)
-  </Card>
-  <Card title="Canisters fund themselves" icon="setting">
-    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.
-    [Learn more](concepts/cycles.md)
-  </Card>
-</CardGrid>
+<div class="landing-actions">
+  <a href="/getting-started/quickstart/" class="landing-action-card">Quickstart for craft coders</a>
+  <a href="https://icp.ninja/projects/hello-world" class="landing-action-card">Playground for craft coders</a>
+  <a href="/guides/" class="landing-action-card">Explore Guides</a>
+</div>
 
 ## Documentation
 

src/components/Hero.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Custom Hero override for the landing page.
+ * Renders only the heading from frontmatter — the ICP Skills section
+ * and action cards live in the page body (index.mdx).
+ */
+const { data } = Astro.locals.starlightRoute.entry;
+const { title = data.title } = data.hero || {};
+---
+
+<div class="hero">
+  <div class="sl-flex stack">
+    <div class="sl-flex copy">
+      <h1 id="_top" data-page-title set:html={title} />
+    </div>
+  </div>
+</div>
+
+<style>
+  @layer starlight.core {
+    .hero {
+      display: grid;
+      align-items: center;
+      gap: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    .stack {
+      flex-direction: column;
+      gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
+      text-align: center;
+    }
+
+    .copy {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    h1 {
+      font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
+      line-height: var(--sl-line-height-headings);
+      font-weight: 600;
+      color: var(--sl-color-white);
+    }
+
+    @media (min-width: 50rem) {
+      .hero {
+        padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
+      }
+
+      .stack {
+        text-align: start;
+      }
+
+      .copy {
+        align-items: flex-start;
+      }
+    }
+  }
+</style>

src/components/SiteTitle.astro

@@ -0,0 +1,69 @@
+---
+import { logos } from 'virtual:starlight/user-images';
+import config from 'virtual:starlight/user-config';
+const { siteTitleHref } = Astro.locals.starlightRoute;
+---
+
+<a href={siteTitleHref} class="site-title sl-flex">
+  {
+    config.logo && logos.dark && (
+      <>
+        <img
+          class:list={{ 'light:sl-hidden print:hidden': !('src' in config.logo) }}
+          alt={config.logo.alt}
+          src={logos.dark.src}
+          width={logos.dark.width}
+          height={logos.dark.height}
+        />
+        {!('src' in config.logo) && (
+          <img
+            class="dark:sl-hidden print:block"
+            alt={config.logo.alt}
+            src={logos.light?.src}
+            width={logos.light?.width}
+            height={logos.light?.height}
+          />
+        )}
+      </>
+    )
+  }
+  <span class="title-group" translate="no">
+    <span class="title-docs">docs</span>
+    <span class="title-domain">.internetcomputer.org</span>
+  </span>
+</a>
+
+<style>
+  @layer starlight.core {
+    .site-title {
+      align-items: center;
+      gap: var(--sl-nav-gap);
+      text-decoration: none;
+      min-width: 0;
+    }
+
+    .title-group {
+      font-family: 'Newsreader', 'Source Serif 4', 'EB Garamond', ui-serif, Georgia, serif;
+      font-size: var(--sl-text-xl);
+      font-weight: 500;
+      letter-spacing: -0.005em;
+      white-space: nowrap;
+    }
+
+    .title-docs {
+      color: var(--sl-color-white);
+    }
+
+    .title-domain {
+      color: var(--sl-color-gray-3);
+    }
+
+    img {
+      height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
+      width: auto;
+      max-width: 100%;
+      object-fit: contain;
+      object-position: 0 50%;
+    }
+  }
+</style>

src/styles/custom.css

@@ -147,14 +147,59 @@ h1, h2, h3, h4, h5, h6 {
 /* ── Landing page hero ───────────────────────────────────── */
 
 .hero {
-  padding-block: clamp(2rem, 6vmin, 4rem) !important;
+  padding-block-start: clamp(2rem, 6vmin, 4rem) !important;
+  padding-block-end: 1.5rem !important;
 }
 
-.hero h1 {
-  font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 4vw), var(--sl-text-5xl)) !important;
+/* ── Landing action cards (three boxes under hero) ────────── */
+
+.landing-actions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-block: 0 2.5rem;
+}
+
+@media (max-width: 50rem) {
+  .landing-actions {
+    grid-template-columns: 1fr;
+  }
 }
 
-/* ── Skills banner ─────────────────────────────────────────── */
+.landing-action-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  background: var(--icp-bg-elev);
+  border: 1px solid var(--icp-rule);
+  border-radius: 8px;
+  padding: 1.25rem 1.5rem;
+  font-weight: 500;
+  font-size: var(--sl-text-base);
+  color: var(--icp-fg);
+  text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.landing-action-card:hover {
+  border-color: var(--icp-accent);
+  background: var(--icp-accent-dim);
+  color: var(--icp-fg);
+}
+
+.landing-action-card::after {
+  content: '→';
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.landing-action-card[href^="http"]::after {
+  content: '↗';
+  opacity: 1;
+}
+
+/* ── ICP Skills banner ─────────────────────────────────────── */
 
 .skills-banner {
   background: var(--icp-bg-elev);
@@ -182,15 +227,17 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 1.6;
 }
 
-.skills-banner .skills-actions {
+.skills-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   flex-wrap: wrap;
 }
 
-.skills-banner .skills-primary {
+/* ── ICP Skills action buttons ─────────────────────────────── */
+
+.skills-primary {
   display: inline-flex;
   align-items: center;
   gap: 0.625rem;
@@ -206,18 +253,18 @@ h1, h2, h3, h4, h5, h6 {
   transition: filter 0.15s ease;
 }
 
-.skills-banner .skills-primary:hover {
+.skills-primary:hover {
   filter: brightness(1.1);
 }
 
-.skills-banner .skills-primary svg {
+.skills-primary svg {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
   opacity: 0.7;
 }
 
-.skills-banner .skills-cta {
+.skills-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -232,12 +279,12 @@ h1, h2, h3, h4, h5, h6 {
   transition: background 0.15s ease, border-color 0.15s ease;
 }
 
-.skills-banner .skills-cta:hover {
+.skills-cta:hover {
   background: var(--icp-accent-dim);
   border-color: var(--icp-accent);
 }
 
-.skills-banner .skills-cta .arrow-icon {
+.skills-cta .arrow-icon {
   width: 0.85rem;
   height: 0.85rem;
 }