@netlify/spark-ui 1.18.0 → 1.20.0

package/packages/styles/tokens.overrides.css

@@ -0,0 +1,6 @@
+/* Manual token overrides for values that can't be expressed in DTCG format */
+/* (e.g. CSS keywords like currentcolor, or % units for dimension tokens)  */
+
+:root {
+  --ntl-radius-circle: 50%;
+}

package/skills/landing-page.md

@@ -0,0 +1,189 @@
+# Spark UI Landing Page Guidelines
+
+Build a marketing landing page using Netlify Spark UI. Follow these guidelines strictly.
+
+## Page Structure
+
+Wrap every section in `<PageSection>` (props: `spaceTop`, `spaceBottom`, `theme`). Use this order (include only what fits the request):
+
+1. **PageHero** or **PageHeroGraphic** — Hero section. Use `PageHeroGraphic` when you need a side-by-side layout with a graphic.
+2. **TrustBarTicker** — Animated stats or logos
+3. **Cards grid** — Feature cards in `.ntl-grid`
+4. **SwitchbackGroup** — Alternating content + media
+5. **TabbedContent** — Tabbed panels
+6. **HeadingBlock + CTA** — Closing CTA
+
+## Components
+
+| Component | Purpose |
+|-----------|---------|
+| `PageHero` | Centered hero: heading, text, CTAs |
+| `PageHeroGraphic` | Side-by-side hero: left heading + right `graphic` slot |
+| `PageSection` | Section wrapper (spacing, theme) |
+| `HeadingBlock` | Section heading (eyebrow, text, CTAs, alignment) |
+| `Card` | Card with eyebrow, headline, paragraph, image/icon slots, link |
+| `Switchback` / `SwitchbackGroup` | Side-by-side content + media |
+| `TrustBarTicker` / `TrustBarTickerItem` | Animated ticker |
+| `TabbedContent` / `Tab` / `TabList` / `TabPanelGroup` / `TabbedContentPanel` | Tabs |
+| `TestimonialSlider` | Testimonial carousel |
+| `Button` | CTA (variants: primary, outline, ghost) |
+| `ActionLink` | Arrow link |
+| `Eyebrow` | Label text |
+| `CodeBlock` | Code display |
+| `Blockquote` | Quote |
+
+All imports: `@netlify/spark-ui/components/{Name}.astro`
+
+## Page Skeleton
+
+```astro
+---
+import { Image } from 'astro:assets';
+import PageHero from '@netlify/spark-ui/components/PageHero.astro';
+import PageHeroGraphic from '@netlify/spark-ui/components/PageHeroGraphic.astro';
+import PageSection from '@netlify/spark-ui/components/PageSection.astro';
+import HeadingBlock from '@netlify/spark-ui/components/HeadingBlock.astro';
+import Card from '@netlify/spark-ui/components/Card.astro';
+import TrustBarTicker from '@netlify/spark-ui/components/TrustBarTicker.astro';
+import TrustBarTickerItem from '@netlify/spark-ui/components/TrustBarTickerItem.astro';
+import Switchback from '@netlify/spark-ui/components/Switchback.astro';
+import SwitchbackGroup from '@netlify/spark-ui/components/SwitchbackGroup.astro';
+import TabbedContent from '@netlify/spark-ui/components/TabbedContent.astro';
+import Tab from '@netlify/spark-ui/components/Tab.astro';
+import TabList from '@netlify/spark-ui/components/TabList.astro';
+import TabPanelGroup from '@netlify/spark-ui/components/TabPanelGroup.astro';
+import TabbedContentPanel from '@netlify/spark-ui/components/TabbedContentPanel.astro';
+
+import heroData from '../data/hero.json';
+import cardData from '../data/cards.json';
+import switchbackData from '../data/switchback.json';
+import tabbedContentData from '../data/tabbed-content.json';
+import tickerData from '../data/trust-bar-ticker.json';
+---
+
+<!-- Option A: Centered hero -->
+<PageHero data-theme="dark" heading={heroData.heading} text={heroData.text} ctas={heroData.ctas} />
+
+<!-- Option B: Side-by-side hero with graphic -->
+<PageHeroGraphic data-theme="dark" heading={heroData.heading} text={heroData.text} ctas={heroData.ctas}>
+  <Image slot="graphic" src="/hero-graphic.png" alt="..." width={600} height={400} />
+</PageHeroGraphic>
+
+<!-- Trust bar (stats variant) -->
+<PageSection spaceTop="var(--ntl-space-l)" spaceBottom="var(--ntl-space-xl)">
+  <TrustBarTicker>
+    {tickerData.stats.map(s => <TrustBarTickerItem iconSrc={s.iconSrc}>{s.text}</TrustBarTickerItem>)}
+  </TrustBarTicker>
+</PageSection>
+
+<!-- Cards -->
+<PageSection>
+  <HeadingBlock eyebrow={cardData.eyebrow} heading={cardData.heading} text={cardData.text} alignment="center" />
+  <div class="ntl-grid" style="--ntl-grid-column-min-size: 20rem;">
+    {cardData.items.map(({ eyebrow, heading, text, cta, image }) => (
+      <Card eyebrow={eyebrow} headline={heading} paragraph={text} link={cta}>
+        {image && <Image slot="image" src={image.src} alt={image.alt} width={image.width} height={image.height} />}
+      </Card>
+    ))}
+  </div>
+</PageSection>
+
+<!-- Switchbacks — alternate isReversed, vary mediaPattern 1-3 -->
+<PageSection>
+  <HeadingBlock eyebrow={switchbackData.eyebrow} heading={switchbackData.heading} />
+  <SwitchbackGroup>
+    {switchbackData.items.map(({ eyebrow, heading, text, list, cta, mediaPattern, image }, i) => (
+      <Switchback eyebrow={eyebrow} heading={heading} text={text} list={list} cta={cta}
+        isReversed={i % 2 === 0} mediaPattern={mediaPattern}>
+        <Image slot="media" src={image.src} alt={image.alt} width={image.width} height={image.height} />
+      </Switchback>
+    ))}
+  </SwitchbackGroup>
+</PageSection>
+
+<!-- Tabbed content — isUniformHeight prevents height shift, noPadding for custom layouts -->
+<PageSection>
+  <HeadingBlock eyebrow={tabbedContentData.eyebrow} heading={tabbedContentData.heading} />
+  <TabbedContent>
+    <TabList>
+      {tabbedContentData.items.map(({ title, icon, isSelected }) => (
+        <Tab isSelected={isSelected}><img src={icon} alt="" width="16" height="16" />{title}</Tab>
+      ))}
+    </TabList>
+    <TabPanelGroup isUniformHeight noPadding>
+      {tabbedContentData.items.map(({ heading, list, text, ctas, codeBlock, isSelected }) => (
+        <TabbedContentPanel isHidden={!isSelected} heading={heading} list={list} text={text} ctas={ctas} codeBlock={codeBlock} />
+      ))}
+    </TabPanelGroup>
+  </TabbedContent>
+</PageSection>
+
+<!-- Trust bar (logos variant) -->
+<PageSection>
+  <HeadingBlock eyebrow={tickerData.eyebrow} heading={tickerData.heading} ctas={tickerData.ctas} alignment="center" />
+  <TrustBarTicker>
+    {tickerData.logos.map(l => (
+      <TrustBarTickerItem><Image src={l.src} alt={l.alt} width={l.width} height={l.height} /></TrustBarTickerItem>
+    ))}
+  </TrustBarTicker>
+</PageSection>
+```
+
+## Additional Patterns
+
+Card with icon (bundled SVGs at `@netlify/spark-ui/assets/icons/*.svg`: ai, cdn, data-storage, dev, ecommerce, edge-functions, forms, functions, marketing, security, sparkles):
+```astro
+import FunctionsIcon from '@netlify/spark-ui/assets/icons/functions.svg';
+<Card headline="..." paragraph="..." isCardClickable link={{ id: "link", href: "#" }}>
+  <FunctionsIcon slot="icon" />
+</Card>
+```
+
+HeadingBlock props: `heading`, `headingLevel` (1-4, default 2), `text`, `eyebrow`, `alignment` ("start"|"center"), `headingMaxWidth`, `textMaxWidth`, `ctas`.
+
+## Data Shapes
+
+Keep content in JSON files. Key shapes:
+
+- **Hero:** `{ heading, text, ctas: [{ id, text, href, variant? }] }`
+- **Card item:** `{ eyebrow, heading, text (HTML ok), cta: { id, href, text }, image?: { src, alt, width, height } }`
+- **Switchback item:** `{ eyebrow, heading, text, list: string[], cta: { id, href, text }, mediaPattern: 1|2|3, image: { src, alt, width, height } }`
+- **TabbedContent item:** `{ title, icon?, isSelected, heading, text?, list?: string[], ctas?, codeBlock?: { heading?, icon?, lang, code } }`
+- **TrustBarTicker:** `{ stats: [{ iconSrc, text }], logos: [{ src, alt, width, height }] }`
+
+## Layout Utilities
+
+No custom layout CSS. Use these classes:
+
+- `.ntl-flow` — Vertical stack. Gap: `--ntl-flow-space`
+- `.ntl-cluster` — Horizontal wrap. Gap: `--ntl-cluster-gap`
+- `.ntl-grid` — Responsive grid. Requires `--ntl-grid-column-min-size`
+- `.ntl-stack` — Overlay children (CSS Grid)
+- `.ntl-breakout` — Full-width breakout
+
+## Design Tokens
+
+Use `--ntl-` prefixed tokens (auto-flip light/dark):
+
+- Backgrounds: `--ntl-color-bg`, `bg-2`, `bg-3`, `bg-inverse`
+- Text: `--ntl-color-text`, `text-weak`, `text-weaker`
+- Headings: `--ntl-heading-text-color`
+- Spacing: `--ntl-space-3xs` to `--ntl-space-4xl`
+- Fonts: `--ntl-font-family-text` (Instrument Sans), `display` (Figtree), `mono` (Martian Mono)
+- Border widths: `--ntl-border-width-thin` (1px), `base` (1.5px), `thick` (2px), `heavy` (3px)
+- Z-index: `--ntl-z-index-base` (0), `raised` (10), `sticky` (100), `overlay` (200), `modal` (300), `toast` (400), `tooltip` (500)
+- Motion durations: `--ntl-motion-duration-fast` (100ms), `base` (200ms), `slow` (300ms), `slower` (500ms)
+- Motion easing: `--ntl-motion-easing-default`, `in`, `out`, `spring` (cubic-bezier overshoot)
+
+## Rules
+
+1. Always wrap sections in `<PageSection>`.
+2. Use layout utility classes, not custom CSS.
+3. Use `--ntl-` tokens for colors, spacing, typography. No hardcoded values.
+4. Keep content in JSON data files following the shapes above.
+5. Use semantic tokens + `theme` prop for dark mode.
+6. Alternate `isReversed` on Switchbacks.
+7. All images need alt text.
+8. One `h1` only (in PageHero). Use `headingLevel` for h2/h3.
+9. CTAs need `id`, `text`, `href`. Secondary: `variant: "outline"`.
+10. Follow the patterns above. Do not invent custom wrappers.