+
## ICP skills for agents that write code
@@ -41,34 +21,11 @@ Teach your AI agent canister patterns, API integrations, CLI commands, and deplo
-## The frontier cloud for your apps
-
-
-
- Security is enforced by the protocol across every node. No security team, no server patching, no compliance dashboard required.
- [Learn more](concepts/canisters.md)
-
-
- Frontend, backend, and data all run on the network. No cloud vendor, no CDN, no separate database.
- [Learn more](concepts/app-architecture.md)
-
-
- Apps run across independent nodes and are portable across hardware providers. No vendor lock-in.
- [Learn more](concepts/network-overview.md)
-
-
- Canister memory persists automatically across executions and upgrades. No serialization, no migration scripts.
- [Learn more](concepts/orthogonal-persistence.md)
-
-
- Canisters schedule their own execution with timers. No external cron jobs, background workers, or separate infrastructure to maintain.
- [Learn more](concepts/timers.md)
-
-
- 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)
-
-
+
## Documentation
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 00000000..734ae8b4
--- /dev/null
+++ b/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 || {};
+---
+
+
+
+
diff --git a/src/components/SiteTitle.astro b/src/components/SiteTitle.astro
new file mode 100644
index 00000000..cd4789bd
--- /dev/null
+++ b/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;
+---
+
+
+ {
+ config.logo && logos.dark && (
+ <>
+ 
+ {!('src' in config.logo) && (
+ 
+ )}
+
+ )
+ }
+
+ docs
+ .internetcomputer.org
+
+
+
+
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 7b8f3ccc..f00a160f 100644
--- a/src/styles/custom.css
+++ b/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,7 +227,7 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.6;
}
-.skills-banner .skills-actions {
+.skills-actions {
display: flex;
align-items: center;
justify-content: center;
@@ -190,7 +235,9 @@ h1, h2, h3, h4, h5, h6 {
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;
}