Implement landing page cards (#105)

15 files changed, 275 insertions, 63 deletions

diff --git a/.changeset/rich-lizards-switch.md b/.changeset/rich-lizards-switch.md
new file mode 100644
index 00000000..8d507afc
--- /dev/null
+++ b/.changeset/rich-lizards-switch.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Add `<Card>` and `<CardGrid>` components for landing pages and other uses
diff --git a/docs/package.json b/docs/package.json
index a5b8663c..1dda8d92 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,7 +27,7 @@
     {
       "name": "/index.html",
       "path": "dist/index.html",
-      "limit": "13 kB"
+      "limit": "14 kB"
     },
     {
       "name": "/_astro/*.js",
@@ -37,7 +37,7 @@
     {
       "name": "/_astro/*.css",
       "path": "dist/_astro/*.css",
-      "limit": "11 kB"
+      "limit": "10 kB"
     }
   ]
 }
diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css
index 0c118063..e4242e41 100644
--- a/docs/src/assets/landing.css
+++ b/docs/src/assets/landing.css
@@ -10,7 +10,9 @@
 [data-has-hero] .page {
   background: linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
     radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh /
-      105vw 200vh;
+      105vw 200vh,
+    radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50%
+      calc(100% + 20rem) / 60rem 30rem;
 }
 
 [data-has-hero] header {
diff --git a/docs/src/components/about-astro.astro b/docs/src/components/about-astro.astro
new file mode 100644
index 00000000..fb1815a1
--- /dev/null
+++ b/docs/src/components/about-astro.astro
@@ -0,0 +1,48 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<article class="flex" aria-labelledby="about-astro-heading">
+  <small id="about-astro-heading">
+    {title}
+    <span class="sr-only">Astro</span>
+  </small>
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 301 79"
+    fill="var(--sl-color-white)"
+  >
+    <path
+      d="M20.8 66.8c-3.6-3.2-4.6-10-3.1-15 2.5 3.2 6.1 4.2 9.8 4.7 5.7.9 11.3.6 16.5-2l1.9-1.1a9 9 0 0 1 .4 4.3 12 12 0 0 1-5 8.5l-3.6 2.4c-3.6 2.4-4.6 5.3-3.2 9.4l.1.5c-1.8-.8-3.2-2-4.2-3.6-1-1.7-1.6-3.5-1.6-5.5 0-1 0-2-.2-3-.3-2.3-1.4-3.3-3.4-3.4a4 4 0 0 0-4.3 3.3l-.1.5ZM.5 51s10.5-5 21-5l8-24.6c.3-1.2 1.2-2 2.2-2 1 0 1.8.8 2.1 2l8 24.5c12.5 0 21 5.1 21 5.1L45 2.4C44.4.9 43.6 0 42.4 0H21c-1.2 0-2 1-2.6 2.4L.5 51Zm111-7c0 4.3-5.4 6.8-12.8 6.8-4.9 0-6.6-1.2-6.6-3.7 0-2.6 2.1-3.9 7-3.9 4.3 0 8 .1 12.4.6v.2Zm0-5.4a56 56 0 0 0-11.4-1c-14 0-20.5 3.4-20.5 11 0 8 4.5 11 14.9 11 8.8 0 14.7-2.2 17-7.6h.3l-.2 3.6c0 2.8.5 3 2.8 3h10.9c-.6-1.6-1-6.3-1-10.4l.2-12c0-9.1-5.4-14.8-22.4-14.8a83 83 0 0 0-21.7 3C81 27 82 32 82.3 35.2c5.3-2.5 13-3.6 18.8-3.6 8.2 0 10.4 1.9 10.4 5.6v1.5Zm29.8 7.9c-1.5.2-3.5.2-5.5.2-2.2 0-4.2-.1-5.6-.3V48c0 7.5 4.9 11.8 22 11.8 16.3 0 21.6-4.3 21.6-11.8 0-7.2-3.5-10.8-19-11.5-11.9-.6-13-1.9-13-3.4 0-1.7 1.6-2.6 9.6-2.6 8.3 0 10.6 1.1 10.6 3.5v.6a120.9 120.9 0 0 1 11 0l.1-1.4c0-8.8-7.3-11.7-21.5-11.7-15.9 0-21.3 4-21.3 11.5 0 6.8 4.3 11 19.6 11.7 11.3.4 12.5 1.6 12.5 3.4 0 1.8-1.8 2.7-9.7 2.7-9 0-11.4-1.3-11.4-3.9v-.3ZM193.2 15c-4.3 4-12 8-16.3 9v8.5l4 .1-.1 12.8c0 8 4.2 14 17.2 14 5.5 0 9.1-.7 13.7-1.6-.5-3-1-7.4-1.2-10.8-2.7.9-6.1 1.3-10 1.3-5.2 0-7.3-1.4-7.3-5.5v-10l17.5.2c0-3 0-7.6.2-10.6-5.7.2-12.1.2-17.4.2l.1-7.6h-.4Zm35.3 15.8.1-8.4h-11.8a752.4 752.4 0 0 1 0 36.2h13.5c-.2-3.5-.3-9.6-.3-14.7 0-8.1 3.3-10.5 10.8-10.5 3.5 0 6 .5 8.2 1.2 0-3 .6-9 1-11.6-2.3-.6-4.7-1-7.7-1-6.5-.1-11.2 2.5-13.4 8.8h-.4Zm59 9.5c0 6.5-4.7 9.6-12.1 9.6-7.4 0-12.1-2.9-12.1-9.6 0-6.7 4.8-9.2 12-9.2 7.4 0 12.2 2.7 12.2 9.2Zm12.3-.3c0-13-10.1-18.8-24.4-18.8-14.4 0-24.2 5.8-24.2 18.8s9.1 20 24.1 20c15.1 0 24.5-7 24.5-19.9Z"
+    >
+    </path>
+  </svg>
+  <slot />
+</article>
+
+<style>
+  article {
+    max-width: 40rem;
+    margin-inline: auto;
+    padding-block: 5rem;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.5rem;
+  }
+  article > :global(*) {
+    margin-top: 0 !important;
+    max-width: 50ch;
+  }
+  small {
+    color: var(--sl-color-gray-3);
+  }
+  svg {
+    width: 15rem;
+  }
+</style>
diff --git a/docs/src/content/docs/de/index.mdx b/docs/src/content/docs/de/index.mdx
index 9c1fea1e..9a4e05f6 100644
--- a/docs/src/content/docs/de/index.mdx
+++ b/docs/src/content/docs/de/index.mdx
@@ -17,23 +17,31 @@ hero:
       link: https://github.com/withastro/starlight
 ---
 
-:::caution[Laufende Arbeiten]
-Starlight befindet sich in einem frühen Entwicklungsstadium, also rechne mit Fehlern und Änderungen, während wir es weiterentwickeln.
-Wenn du etwas findest, das nicht funktioniert, [öffne bitte ein Issue auf GitHub](https://github.com/withastro/starlight/issues/new/choose) oder gib uns auf [Discord](https://astro.build/chat) Bescheid.
-:::
+import { CardGrid, Card } from '@astrojs/starlight/components';
+import AboutAstro from '../../../components/about-astro.astro';
 
-## Was ist im Lieferumfang enthalten?
+<CardGrid stagger>
+  <Card title="Dokumentation, die begeistert" icon="open-book">
+    Site-Navigation, Suche, Internationalisierung, SEO, leicht lesbare
+    Typografie, Code-Hervorhebung, Dunkelmodus und mehr.
+  </Card>
+  <Card title="Angetrieben durch Astro" icon="rocket">
+    Nutze die volle Kraft und Leistung von Astro. Erweitere Starlight mit deinen
+    bevorzugten Astro-Integrationen.
+  </Card>
+  <Card title="Markdown, Markdoc und MDX" icon="document">
+    Bringe deine bevorzugte Dokumentenformat mit. Starlight behält alles im Auge
+    mit integrierte Frontmatter-Validierung.
+  </Card>
+  <Card title="Bringe deine eigenen Komponenten mit" icon="puzzle">
+    Starlight wird als Framework-unabhängige, vollständige Dokumentationslösung
+    geliefert. Erweitere mit React, Vue, Svelte, Solid und mehr.
+  </Card>
+</CardGrid>
 
-Starlight enthält alle notwendige Funktionen, um eine Dokumentationsseite schnell zum Laufen zu bringen:
+<AboutAstro title="Präsentiert von">
+Astro ist ein Web-Framework, das eine Komplettlösung zur Erstellung schneller Websites darstellt. Rufe deine Inhalte von überall ab und stelle sie überall bereit, alles unterstützt durch deine bevorzugten UI-Komponenten und Bibliotheken.
 
-- Unterstützung von Markdown und MDX
-- Leicht zu lesende typografische Stile
-- Syntaxhervorhebung für Code-Beispiele
-- Einfach zu konfigurierende Navigationsmenüs
-- Eingebaute Suchfunktion
-- [Internationalisierungsfunktionen](/de/guides/i18n)
-- Barrierfreie Seitenaufbau
-- Unterstützung von [Komponenten im Inhalt](/de/guides/components) mit MDX
-- Unterstützung für benutzerdefinierte Stile
-- Schnelle und [umweltfreundliche](/de/environmental-impact) Architektur
-- Kompatibilität mit dem [Astro-Ökosystem](https://astro.build/integrations)
+[Erfahre mehr über Astro](https://astro.build/)
+
+</AboutAstro>
diff --git a/docs/src/content/docs/guides/components.mdx b/docs/src/content/docs/guides/components.mdx
index fd13d091..c991664f 100644
--- a/docs/src/content/docs/guides/components.mdx
+++ b/docs/src/content/docs/guides/components.mdx
@@ -58,3 +58,52 @@ The code above generates the following tabs on the page:
   <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
   <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
 </Tabs>
+
+### Cards
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+You can display content in a box matching Starlight’s styles using the `<Card>` component.
+Wrap multiple cards in the `<CardGrid>` component to display cards side-by-side when there’s enough space.
+
+A `<Card>` should have a `title` and can optionally include an `icon` attribute set to the name of [one of Starlight’s built-in icons](https://github.com/withastro/starlight/blob/main/packages/starlight/components/Icons.ts).
+
+```mdx
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+<Card title="Check this out">Interesting content you want to highlight.</Card>
+
+<CardGrid>
+  <Card title="Stars" icon="star">
+    Sirius, Vega, Betelgeuse
+  </Card>
+  <Card title="Moons" icon="moon">
+    Io, Europa, Ganymede
+  </Card>
+</CardGrid>
+```
+
+The code above generates the following on the page:
+
+<Card title="Check this out">Interesting content you want to highlight.</Card>
+
+<CardGrid>
+  <Card title="Stars" icon="star">
+    Sirius, Vega, Betelgeuse
+  </Card>
+  <Card title="Moons" icon="moon">
+    Io, Europa, Ganymede
+  </Card>
+</CardGrid>
+
+:::tip
+Use a card grid on your home page to display your project’s key features.
+Add the `stagger` attribute to shift the second column of cards vertically and add visual interest:
+
+```astro
+<CardGrid stagger>
+  <!-- cards -->
+</CardGrid>
+```
+
+:::
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 6fd00133..62aac68f 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -17,23 +17,32 @@ hero:
       link: https://github.com/withastro/starlight
 ---
 
-:::caution[Work in progress]
-Starlight is in early development so expect bugs and changes as we develop it.
-If you find something that’s not working, [open an issue on GitHub](https://github.com/withastro/starlight/issues/new/choose) or let us know on [Discord](https://astro.build/chat).
-:::
+import { CardGrid, Card } from '@astrojs/starlight/components';
+import AboutAstro from '../../components/about-astro.astro';
 
-## What’s in the box?
+<CardGrid stagger>
+  <Card title="Documentation that delights" icon="open-book">
+    Includes: Site navigation, search, i18n, SEO, easy-to-read typography, code
+    highlighting, dark mode and more.
+  </Card>
+  <Card title="Powered by Astro" icon="rocket">
+    Leverage the full power and performance of Astro. Extend Starlight with your
+    favorite Astro integrations and libraries.
+  </Card>
+  <Card title="Markdown, Markdoc, and MDX" icon="document">
+    Bring your favorite markup language. Starlight gives you built-in
+    frontmatter validation with TypeScript type-safety.
+  </Card>
+  <Card title="Bring your own UI components" icon="puzzle">
+    Starlight ships as a framework-agnostic, complete docs solution. Extend with
+    React, Vue, Svelte, Solid, and more.
+  </Card>
+</CardGrid>
 
-Starlight includes all the features you need to get a documentation site up and running quickly:
+<AboutAstro title="Brought to you by">
+Astro is the all-in-one web framework designed for speed.
+Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.
 
-- Markdown and MDX support
-- Easy-to-read typographic styles
-- Syntax highlighting for code blocks
-- Simple-to-configure navigation menus
-- Built-in site search
-- [Internationalization features](/guides/i18n)
-- Accessible site structure
-- [Component in content](/guides/components) support with MDX
-- Support for custom styles
-- Fast and [eco-friendly](/environmental-impact) architecture
-- Compatibility with the [Astro ecosystem](https://astro.build/integrations)
+[Learn about Astro](https://astro.build/)
+
+</AboutAstro>
diff --git a/packages/starlight/components.ts b/packages/starlight/components.ts
index 1e25b6cc..610e5086 100644
--- a/packages/starlight/components.ts
+++ b/packages/starlight/components.ts
@@ -1,2 +1,4 @@
+export { default as Card } from './user-components/Card.astro';
+export { default as CardGrid } from './user-components/CardGrid.astro';
 export { default as Tabs } from './user-components/Tabs.astro';
 export { default as TabItem } from './user-components/TabItem.astro';
diff --git a/packages/starlight/components/CallToAction.astro b/packages/starlight/components/CallToAction.astro
index 977516ca..a297e989 100644
--- a/packages/starlight/components/CallToAction.astro
+++ b/packages/starlight/components/CallToAction.astro
@@ -25,7 +25,7 @@ const { link, variant, icon } = Astro.props;
     gap: 0.5em;
     align-items: center;
     border-radius: 999rem;
-    padding: 0.75rem 1.125rem;
+    padding: 0.5rem 1.125rem;
     color: var(--sl-color-white);
     line-height: 1.1875;
     text-decoration: none;
diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
index 36335b42..942eabd8 100644
--- a/packages/starlight/components/Hero.astro
+++ b/packages/starlight/components/Hero.astro
@@ -52,6 +52,7 @@ const {
     display: grid;
     align-items: center;
     gap: 1rem;
+    padding-bottom: 1rem;
   }
 
   .hero > img,
diff --git a/packages/starlight/components/Icons.ts b/packages/starlight/components/Icons.ts
index 3c5a0e22..d5ea2315 100644
--- a/packages/starlight/components/Icons.ts
+++ b/packages/starlight/components/Icons.ts
@@ -14,6 +14,9 @@ export const Icons = {
     '<path fill-rule="evenodd" clip-rule="evenodd" d="M8.51562 3C7.99605 3 7.57486 3.42119 7.57486 3.94076V5.09057H2.94076C2.42119 5.09057 2 5.51176 2 6.03133C2 6.5509 2.42119 6.97209 2.94076 6.97209H10.3025C10.1154 8.43628 9.49493 9.81581 8.51605 10.9298C7.89546 10.2235 7.41119 9.40161 7.09425 8.50519C6.92107 8.01534 6.38356 7.75864 5.89371 7.93183C5.40386 8.10501 5.14715 8.64252 5.32034 9.13237C5.71804 10.2572 6.32594 11.2885 7.10503 12.1745C5.88484 13.0016 4.43607 13.4529 2.94076 13.4529C2.42119 13.4529 2 13.8741 2 14.3936C2 14.9132 2.42119 15.3344 2.94076 15.3344C4.96251 15.3344 6.91641 14.6763 8.51606 13.4787C8.58325 13.529 8.65118 13.5784 8.71984 13.627C9.88827 14.4533 11.2259 14.995 12.6263 15.2183L11.8634 16.7441C11.8576 16.7552 11.8519 16.7665 11.8465 16.7779L10.4616 19.5478C10.2292 20.0125 10.4176 20.5776 10.8823 20.8099C11.347 21.0423 11.9121 20.8539 12.1445 20.3892L13.2782 18.1218H19.0839L20.2176 20.3892C20.45 20.8539 21.015 21.0423 21.4798 20.8099C21.9445 20.5776 22.1328 20.0125 21.9005 19.5478L20.5162 16.7792C20.5104 16.7669 20.5043 16.7548 20.498 16.7428L17.0225 9.79176C16.8631 9.47304 16.5374 9.27172 16.181 9.27172C15.8247 9.27172 15.4989 9.47304 15.3396 9.79176L13.52 13.4309C12.236 13.3317 10.9971 12.8998 9.92708 12.1745C11.2086 10.7172 12.0005 8.89713 12.1961 6.97209H14.0905C14.61 6.97209 15.0312 6.5509 15.0312 6.03133C15.0312 5.51176 14.61 5.09057 14.0905 5.09057H9.45638V3.94076C9.45638 3.42119 9.03519 3 8.51562 3ZM14.9419 14.7944C14.9357 14.8074 14.9293 14.8203 14.9226 14.833L14.2189 16.2403H18.1431L16.181 12.3161L14.9419 14.7944Z"></path>',
   pencil:
     '<path d="M22 7.24a1 1 0 0 0-.29-.71l-4.24-4.24a1 1 0 0 0-1.1-.22 1 1 0 0 0-.32.22l-2.83 2.83L2.29 16.05a1 1 0 0 0-.29.71V21a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .76-.29l10.87-10.93L21.71 8c.1-.1.17-.2.22-.33a1 1 0 0 0 0-.24v-.14l.07-.05ZM6.83 20H4v-2.83l9.93-9.93 2.83 2.83L6.83 20ZM18.17 8.66l-2.83-2.83 1.42-1.41 2.82 2.82-1.41 1.42Z"/>',
+  pen: '<path d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 1 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35 2.83 2.83-1.42 1.42-2.83-2.83 1.42-1.42ZM8 13.17l5.93-5.93 2.83 2.83L10.83 16H8v-2.83Z"/>',
+  document:
+    '<path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/>',
   external:
     '<path d="M19.33 10.18a1 1 0 0 1-.77 0 1 1 0 0 1-.62-.93l.01-1.83-8.2 8.2a1 1 0 0 1-1.41-1.42l8.2-8.2H14.7a1 1 0 0 1 0-2h4.25a1 1 0 0 1 1 1v4.25a1 1 0 0 1-.62.93Z"/><path d="M11 4a1 1 0 1 1 0 2H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4a1 1 0 1 1 2 0v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h4Z"/>',
   moon: '<path d="M21.64 13C21.4957 12.8807 21.3207 12.8043 21.1351 12.7796C20.9494 12.7548 20.7606 12.7827 20.59 12.86C19.5326 13.3439 18.3829 13.593 17.22 13.59C15.0689 13.5874 13.006 12.7345 11.4812 11.2171C9.95632 9.69979 9.09321 7.64114 9.08001 5.49003C9.08457 4.81586 9.16848 4.14458 9.33001 3.49003C9.36429 3.31557 9.35143 3.13512 9.29277 2.96728C9.2341 2.79944 9.13175 2.65028 8.99626 2.53516C8.86076 2.42004 8.69702 2.34313 8.52191 2.31234C8.3468 2.28156 8.16665 2.29802 8.00001 2.36003C6.43234 3.06494 5.06958 4.15679 4.03977 5.53301C3.00996 6.90924 2.34689 8.52465 2.11286 10.2275C1.87883 11.9304 2.08152 13.6648 2.70188 15.2678C3.32225 16.8708 4.33993 18.2898 5.65931 19.3915C6.9787 20.4932 8.55649 21.2414 10.2445 21.5658C11.9324 21.8903 13.6752 21.7803 15.309 21.2463C16.9428 20.7122 18.414 19.7716 19.5844 18.5128C20.7548 17.254 21.5861 15.7183 22 14.05C22.0504 13.859 22.0431 13.6574 21.9791 13.4705C21.915 13.2836 21.797 13.1199 21.64 13ZM12.14 19.69C10.4618 19.6782 8.82821 19.1479 7.46301 18.1718C6.0978 17.1956 5.06768 15.8214 4.5137 14.2372C3.95971 12.6529 3.90895 10.9362 4.36835 9.32203C4.82776 7.70785 5.77487 6.27513 7.08001 5.22003V5.49003C7.08266 8.17851 8.15183 10.7561 10.0529 12.6572C11.9539 14.5582 14.5315 15.6274 17.22 15.63C17.9259 15.6326 18.63 15.5589 19.32 15.41C18.6299 16.7155 17.5965 17.8079 16.3312 18.5692C15.0659 19.3305 13.6167 19.7319 12.14 19.73V19.69Z"></path>',
@@ -40,6 +43,9 @@ export const Icons = {
     '<path d="M18.71 7.20998C18.617 7.11625 18.5064 7.04186 18.3846 6.99109C18.2627 6.94032 18.132 6.91418 18 6.91418C17.868 6.91418 17.7373 6.94032 17.6154 6.99109C17.4936 7.04186 17.383 7.11625 17.29 7.20998L9.84001 14.67L6.71001 11.53C6.61349 11.4367 6.49955 11.3634 6.37469 11.3142C6.24984 11.265 6.11651 11.2409 5.98233 11.2432C5.84815 11.2455 5.71574 11.2743 5.59266 11.3278C5.46959 11.3812 5.35825 11.4585 5.26501 11.555C5.17177 11.6515 5.09846 11.7654 5.04925 11.8903C5.00005 12.0152 4.97592 12.1485 4.97824 12.2827C4.98056 12.4168 5.00929 12.5493 5.06278 12.6723C5.11628 12.7954 5.19349 12.9067 5.29001 13L9.13001 16.84C9.22297 16.9337 9.33358 17.0081 9.45543 17.0589C9.57729 17.1096 9.708 17.1358 9.84001 17.1358C9.97202 17.1358 10.1027 17.1096 10.2246 17.0589C10.3464 17.0081 10.457 16.9337 10.55 16.84L18.71 8.67998C18.8115 8.58634 18.8925 8.47269 18.9479 8.34619C19.0033 8.21969 19.0319 8.08308 19.0319 7.94498C19.0319 7.80688 19.0033 7.67028 18.9479 7.54378C18.8925 7.41728 18.8115 7.30363 18.71 7.20998Z"></path>',
   rocket:
     '<path fill-rule="evenodd" clip-rule="evenodd" d="M1.43909 8.85483L1.44039 8.85354L4.96668 5.33815C5.30653 4.99386 5.7685 4.79662 6.2524 4.78972L6.26553 4.78963L12.9014 4.78962L13.8479 3.84308C16.9187 0.772319 20.0546 0.770617 21.4678 0.975145C21.8617 1.02914 22.2271 1.21053 22.5083 1.4917C22.7894 1.77284 22.9708 2.13821 23.0248 2.53199C23.2294 3.94517 23.2278 7.08119 20.1569 10.1521L19.2107 11.0983V17.7338L19.2106 17.7469C19.2037 18.2308 19.0067 18.6933 18.6624 19.0331L15.1456 22.5608C14.9095 22.7966 14.6137 22.964 14.29 23.0449C13.9663 23.1259 13.6267 23.1174 13.3074 23.0204C12.9881 22.9235 12.7011 22.7417 12.4771 22.4944C12.2533 22.2473 12.1006 21.9441 12.0355 21.6171L11.1783 17.3417L6.65869 12.822L4.34847 12.3589L2.38351 11.965C2.05664 11.8998 1.75272 11.747 1.50564 11.5232C1.25835 11.2992 1.07653 11.0122 0.979561 10.6929C0.882595 10.3736 0.874125 10.034 0.955057 9.7103C1.03599 9.38659 1.20328 9.09092 1.43909 8.85483ZM6.8186 10.8724L2.94619 10.096L6.32006 6.73268H10.9583L6.8186 10.8724ZM15.2219 5.21703C17.681 2.75787 20.0783 2.75376 21.1124 2.8876C21.2462 3.92172 21.2421 6.31895 18.783 8.77812L12.0728 15.4883L8.51172 11.9272L15.2219 5.21703ZM13.9042 21.0538L13.1279 17.1811L17.2676 13.0414V17.68L13.9042 21.0538Z"></path><path d="M9.31827 18.3446C9.45046 17.8529 9.17864 17.3369 8.68945 17.1724C8.56178 17.1294 8.43145 17.1145 8.30512 17.1243C8.10513 17.1398 7.91519 17.2172 7.76181 17.3434C7.62613 17.455 7.51905 17.6048 7.45893 17.7835C6.97634 19.2186 5.77062 19.9878 4.52406 20.4029C4.08525 20.549 3.6605 20.644 3.29471 20.7053C3.35607 20.3395 3.45098 19.9148 3.59711 19.476C4.01221 18.2294 4.78141 17.0237 6.21648 16.5411C6.39528 16.481 6.54504 16.3739 6.65665 16.2382C6.85126 16.0016 6.92988 15.678 6.84417 15.3647C6.83922 15.3466 6.83373 15.3286 6.82767 15.3106C6.74106 15.053 6.55701 14.8557 6.33037 14.7459C6.10949 14.6389 5.84816 14.615 5.59715 14.6994C5.47743 14.7397 5.36103 14.7831 5.24786 14.8294C3.22626 15.6569 2.2347 17.4173 1.75357 18.8621C1.49662 19.6337 1.36993 20.3554 1.30679 20.8818C1.27505 21.1464 1.25893 21.3654 1.25072 21.5213C1.24662 21.5993 1.24448 21.6618 1.24337 21.7066L1.243 21.7226L1.24235 21.7605L1.2422 21.7771L1.24217 21.7827L1.24217 21.7856C1.24217 22.3221 1.67703 22.7579 2.2137 22.7579L2.2155 22.7579L2.22337 22.7578L2.23956 22.7577C2.25293 22.7575 2.27096 22.7572 2.29338 22.7567C2.33821 22.7555 2.40073 22.7534 2.47876 22.7493C2.63466 22.7411 2.85361 22.725 3.11822 22.6932C3.64462 22.6301 4.36636 22.5034 5.13797 22.2464C6.58274 21.7653 8.3431 20.7738 9.17063 18.7522C9.21696 18.639 9.26037 18.5226 9.30064 18.4029C9.30716 18.3835 9.31304 18.364 9.31827 18.3446Z"></path>',
+  star: '<path d="M22 9.67a1 1 0 0 0-.86-.67l-5.69-.83L12.9 3a1 1 0 0 0-1.8 0L8.55 8.16 2.86 9a1 1 0 0 0-.81.68 1 1 0 0 0 .25 1l4.13 4-1 5.68a1 1 0 0 0 1.45 1.07L12 18.76l5.1 2.68c.14.08.3.12.46.12a1 1 0 0 0 .99-1.19l-1-5.68 4.13-4A1 1 0 0 0 22 9.67Zm-6.15 4a1 1 0 0 0-.29.89l.72 4.19-3.76-2a1 1 0 0 0-.94 0l-3.76 2 .72-4.19a1 1 0 0 0-.29-.89l-3-3 4.21-.61a1 1 0 0 0 .76-.55L12 5.7l1.88 3.82a1 1 0 0 0 .76.55l4.21.61-3 2.99Z"/>',
+  puzzle:
+    '<path d="M17 22H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1a4 4 0 0 1 7.3-2.18c.448.64.692 1.4.7 2.18h3a1 1 0 0 1 1 1v3a4 4 0 0 1 2.18 7.3A3.86 3.86 0 0 1 18 18v3a1 1 0 0 1-1 1ZM5 8a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11v-3.18a1 1 0 0 1 1.33-.95 1.77 1.77 0 0 0 1.74-.23 2 2 0 0 0 .93-1.37 2 2 0 0 0-.48-1.59 1.89 1.89 0 0 0-2.17-.55 1 1 0 0 1-1.33-.95V8h-3.2a1 1 0 0 1-1-1.33 1.77 1.77 0 0 0-.23-1.74 1.939 1.939 0 0 0-3-.43A2 2 0 0 0 8 6c.002.23.046.456.13.67A1 1 0 0 1 7.18 8H5Z"/>',
   'list-format':
     '<path d="M3.71 16.29C3.6149 16.199 3.50276 16.1276 3.38 16.08C3.13654 15.98 2.86346 15.98 2.62 16.08C2.49725 16.1276 2.38511 16.199 2.29 16.29C2.19896 16.3851 2.1276 16.4972 2.08 16.62C2.00342 16.8021 1.9825 17.0028 2.01988 17.1968C2.05725 17.3908 2.15125 17.5694 2.29 17.71C2.3872 17.7983 2.49882 17.8694 2.62 17.92C2.7397 17.9729 2.86913 18.0002 3 18.0002C3.13087 18.0002 3.2603 17.9729 3.38 17.92C3.50119 17.8694 3.6128 17.7983 3.71 17.71C3.84876 17.5694 3.94276 17.3908 3.98013 17.1968C4.01751 17.0028 3.99658 16.8021 3.92 16.62C3.87241 16.4972 3.80104 16.3851 3.71 16.29ZM7 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H7C6.73479 6 6.48043 6.10536 6.2929 6.29289C6.10536 6.48043 6 6.73478 6 7C6 7.26522 6.10536 7.51957 6.2929 7.70711C6.48043 7.89464 6.73479 8 7 8ZM3.71 11.29C3.56938 11.1512 3.39081 11.0572 3.19682 11.0199C3.00283 10.9825 2.80211 11.0034 2.62 11.08C2.49882 11.1306 2.3872 11.2017 2.29 11.29C2.19896 11.3851 2.1276 11.4972 2.08 11.62C2.0271 11.7397 1.99977 11.8691 1.99977 12C1.99977 12.1309 2.0271 12.2603 2.08 12.38C2.13065 12.5012 2.20167 12.6128 2.29 12.71C2.3872 12.7983 2.49882 12.8694 2.62 12.92C2.7397 12.9729 2.86913 13.0002 3 13.0002C3.13087 13.0002 3.2603 12.9729 3.38 12.92C3.50119 12.8694 3.6128 12.7983 3.71 12.71C3.79833 12.6128 3.86936 12.5012 3.92 12.38C3.97291 12.2603 4.00024 12.1309 4.00024 12C4.00024 11.8691 3.97291 11.7397 3.92 11.62C3.87241 11.4972 3.80104 11.3851 3.71 11.29ZM21 11H7C6.73479 11 6.48043 11.1054 6.2929 11.2929C6.10536 11.4804 6 11.7348 6 12C6 12.2652 6.10536 12.5196 6.2929 12.7071C6.48043 12.8946 6.73479 13 7 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11ZM3.71 6.29C3.6149 6.19896 3.50276 6.12759 3.38 6.08C3.19789 6.00342 2.99718 5.9825 2.80319 6.01987C2.6092 6.05725 2.43063 6.15124 2.29 6.29C2.20167 6.3872 2.13065 6.49882 2.08 6.62C2.0271 6.7397 1.99977 6.86913 1.99977 7C1.99977 7.13087 2.0271 7.2603 2.08 7.38C2.13065 7.50119 2.20167 7.6128 2.29 7.71C2.3872 7.79833 2.49882 7.86936 2.62 7.92C2.80211 7.99658 3.00283 8.0175 3.19682 7.98013C3.39081 7.94275 3.56938 7.84876 3.71 7.71C3.79833 7.6128 3.86936 7.50119 3.92 7.38C3.97291 7.2603 4.00024 7.13087 4.00024 7C4.00024 6.86913 3.97291 6.7397 3.92 6.62C3.86936 6.49882 3.79833 6.3872 3.71 6.29ZM21 16H7C6.73479 16 6.48043 16.1054 6.2929 16.2929C6.10536 16.4804 6 16.7348 6 17C6 17.2652 6.10536 17.5196 6.2929 17.7071C6.48043 17.8946 6.73479 18 7 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16Z"></path>',
   github:
diff --git a/packages/starlight/index.ts b/packages/starlight/index.ts
index c110f9cd..9e73bc1c 100644
--- a/packages/starlight/index.ts
+++ b/packages/starlight/index.ts
@@ -55,7 +55,7 @@ export default function StarlightIntegration(
                 ? {}
                 : { theme: 'css-variables' },
           },
-          experimental: { assets: true },
+          experimental: { assets: true, inlineStylesheets: 'auto' },
         };
         updateConfig(newConfig);
       },
diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css
index aa0b45c6..07553de2 100644
--- a/packages/starlight/style/props.css
+++ b/packages/starlight/style/props.css
@@ -17,7 +17,7 @@
   --sl-hue-green: 101;
   --sl-color-green-low: hsl(var(--sl-hue-green), 39%, 22%);
   --sl-color-green: hsl(var(--sl-hue-green), 82%, 63%);
-  --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 87%);
+  --sl-color-green-high: hsl(var(--sl-hue-green), 82%, 80%);
   --sl-hue-blue: 234;
   --sl-color-blue-low: hsl(var(--sl-hue-blue), 54%, 20%);
   --sl-color-blue: hsl(var(--sl-hue-blue), 100%, 60%);
@@ -58,28 +58,6 @@
     0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(223, 13%, 10%, 0.33),
     0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);
 
-  /* Gradients (unchanged across dark & light modes) */
-  --sl-gradient-blue-purple: linear-gradient(
-    to bottom,
-    hsl(234, 100%, 59.8%) 0%,
-    hsl(281, 82.1%, 62.7%) 100%
-  );
-  --sl-gradient-red-pink: linear-gradient(
-    to bottom,
-    hsl(0, 67.9%, 52.4%) 0%,
-    hsl(295, 100%, 62.7%) 100%
-  );
-  --sl-gradient-orange-yellow: linear-gradient(
-    to bottom,
-    hsl(54, 93.5%, 57.6%) 0%,
-    hsl(14, 100%, 66.5%) 100%
-  );
-  --sl-gradient-blue-green: linear-gradient(
-    to bottom,
-    hsl(165, 86.6%, 62%) 0%,
-    hsl(227, 58.4%, 44.3%) 100%
-  );
-
   /* Text size and line height */
   --sl-text-xs: 0.8125rem; /* 13px */
   --sl-text-sm: 0.875rem; /* 14px */
@@ -151,7 +129,7 @@
   --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%);
   --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
   --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%);
-  --sl-color-green: hsl(var(--sl-hue-green), 90%, 60%);
+  --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%);
   --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%);
   --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%);
   --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%);
diff --git a/packages/starlight/user-components/Card.astro b/packages/starlight/user-components/Card.astro
new file mode 100644
index 00000000..98f611c2
--- /dev/null
+++ b/packages/starlight/user-components/Card.astro
@@ -0,0 +1,69 @@
+---
+import Icon from '../components/Icon.astro';
+import type { Icons } from '../components/Icons';
+
+interface Props {
+  icon?: keyof typeof Icons;
+  title: string;
+}
+
+const { icon, title } = Astro.props;
+---
+
+<article class="card flex">
+  <p class="title flex">
+    {icon && <Icon name={icon} class="icon" size="1.333em" />}
+    <span set:html={title} />
+  </p>
+  <div class="body"><slot /></div>
+</article>
+
+<style>
+  .card {
+    --sl-card-border: var(--sl-color-purple);
+    --sl-card-bg: var(--sl-color-purple-low);
+    border: 1px solid var(--sl-color-gray-5);
+    background-color: var(--sl-color-black);
+    padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+    flex-direction: column;
+    gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+  }
+  .card:nth-child(4n + 1) {
+    --sl-card-border: var(--sl-color-orange);
+    --sl-card-bg: var(--sl-color-orange-low);
+  }
+  .card:nth-child(4n + 3) {
+    --sl-card-border: var(--sl-color-green);
+    --sl-card-bg: var(--sl-color-green-low);
+  }
+  .card:nth-child(4n + 4) {
+    --sl-card-border: var(--sl-color-red);
+    --sl-card-bg: var(--sl-color-red-low);
+  }
+  .card:nth-child(4n + 5) {
+    --sl-card-border: var(--sl-color-blue);
+    --sl-card-bg: var(--sl-color-blue-low);
+  }
+  .title {
+    font-weight: 600;
+    font-size: var(--sl-text-h4);
+    color: var(--sl-color-white);
+    line-height: var(--sl-line-height-headings);
+    gap: 1rem;
+    align-items: center;
+  }
+  .card .icon {
+    border: 1px solid var(--sl-card-border);
+    background-color: var(--sl-card-bg);
+    padding: 0.2em;
+    border-radius: 0.25rem;
+  }
+  .card .body {
+    margin: 0;
+    font-size: clamp(
+      var(--sl-text-sm),
+      calc(0.5rem + 1vw),
+      var(--sl-text-body)
+    );
+  }
+</style>
diff --git a/packages/starlight/user-components/CardGrid.astro b/packages/starlight/user-components/CardGrid.astro
new file mode 100644
index 00000000..52a354c3
--- /dev/null
+++ b/packages/starlight/user-components/CardGrid.astro
@@ -0,0 +1,35 @@
+---
+interface Props {
+  stagger?: boolean;
+}
+
+const { stagger = false } = Astro.props;
+---
+
+<div class:list={['card-grid', { stagger }]}><slot /></div>
+
+<style>
+  .card-grid {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .card-grid > :global(*) {
+    margin-top: 0 !important;
+  }
+
+  @media (min-width: 50rem) {
+    .card-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+    }
+    .stagger {
+      --stagger-height: 5rem;
+      padding-bottom: var(--stagger-height);
+    }
+
+    .stagger > :global(*):nth-child(2n) {
+      transform: translateY(var(--stagger-height));
+    }
+  }
+</style>