The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Bento Grid SaaS Landing Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A single-page homepage for [BRAND], an invented [PRODUCT] product for [AUDIENCE]. The look is warm and light: cream background, white cards with hairline borders and large radii, ink text and exactly one burnt-orange accent. The centerpiece is an asymmetric 12-column bento grid whose tiles contain working micro-interactions: numbers that count up, SVG sparklines that redraw on hover, range tabs, toggles you can switch, a goal ring, a bar chart with tooltips and a fake command palette that opens with Cmd/Ctrl+K. Then come logo-free social proof (big stats plus a quote wall with initials avatars), pricing with an animated monthly/yearly switch, an accordion FAQ, a dark closing CTA band and a simple footer.

- Audience: Visitors evaluating [BRAND]: [AUDIENCE] and the people who sign off on the purchase. They skim, try the interactive tiles and want to see price and privacy answers quickly.
- Goal: Show that the product is calm, trustworthy and useful by letting visitors play with it inside the feature tiles, then lead them to the [PRIMARY_CTA] button in the hero, pricing and closing band.
- Tone: Calm, plain-spoken, a little warm. Short sentences, concrete numbers, no hype words, no exclamation marks. Feels like a well-made notebook, not a cockpit.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react, react-dom 18 (MIT), motion (motion.dev, import from motion/react) (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/inter (OFL-1.1), @fontsource/geist-mono (OFL-1.1), tailwindcss 3.4, postcss, autoprefixer (MIT), vite 5, @vitejs/plugin-react, typescript (MIT / Apache-2.0)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@5 using the react-ts template, then install motion, lucide-react, @fontsource-variable/fraunces, @fontsource-variable/inter, @fontsource/geist-mono, and as dev deps [email protected], postcss, autoprefixer.
  - vite.config.ts: plugins [react()], base './', build.outDir 'dist', build.sourcemap false. The default minification is kept.
  - tailwind.config.js content: ['./index.html','./src/**/*.{ts,tsx}']. Extend colors: cream #F6F2EA, sand #EFE8DC, line #E4DCCD, line-strong #D8CDB9, ink #1D1B17, muted #6B6459, accent #E8590C, accent-deep #C94A08, accent-tint #FCE6D9, and tint-oat #EADFCB, tint-clay #F0DCCF, tint-sage #DDE3D3, tint-stone #E1DDD6.
  - tailwind.config.js fontFamily: display ['Fraunces Variable','Georgia','serif'], sans ['Inter Variable','system-ui','sans-serif'], mono ['Geist Mono','ui-monospace','monospace']. borderRadius: card 28px, inner 16px, band 36px. boxShadow: card '0 1px 0 rgba(29,27,23,0.04), 0 1px 2px rgba(29,27,23,0.05)', lift '0 18px 40px -18px rgba(29,27,23,0.22)', panel '0 30px 80px -20px rgba(29,27,23,0.35)'.
  - src/main.tsx imports '@fontsource-variable/fraunces', '@fontsource-variable/inter', '@fontsource/geist-mono/400.css', '@fontsource/geist-mono/500.css' and './index.css'.
  - src/index.css: Tailwind directives; html scroll-behavior smooth (auto under prefers-reduced-motion); body bg-cream text-ink font-sans antialiased; ::selection bg accent-tint; :focus-visible outline 2px solid #E8590C with 2px offset; .tabular {font-variant-numeric: tabular-nums}; a @media (prefers-reduced-motion: reduce) block that sets animation and transition durations to 0.01ms.
  - All copy, plans, quotes, FAQ items, palette items and chart data arrays live in src/content.ts. The copy in this prompt is written for the default variable values. If the values differ, rewrite every headline, tile label, stat, quote, plan feature, FAQ answer and palette item to fit the new brand and product. Keep each string within about 20% of the original length so the layout holds.
  - Components in src/components: Nav, Hero, GlimpseRow, BentoGrid (with one file per tile), CommandPalette, CountUp, Sparkline, Toggle, SocialProof, Pricing, Faq, ClosingBand, Footer, Toast, Reveal. App.tsx renders them in page order.
  - Shared hooks: usePrefersReducedMotion (wraps Motion's useReducedMotion) and useCommandPalette (a context with open/close state and a global keydown listener for Meta+K / Ctrl+K that calls preventDefault).
  - index.html: <title>[BRAND] — [PRODUCT] for [AUDIENCE]</title> and <link rel="icon" href="./favicon.svg" type="image/svg+xml">. public/favicon.svg is the code-drawn logo mark.

## Variables
- [BRAND] — Brand name (default: "Brindle"). Invented product name, one or two words
- [PRODUCT] — Product category (default: "team analytics"). What the product is, lowercase, 1–3 words
- [AUDIENCE] — Target audience (default: "product and engineering teams"). Who it is for, plural noun phrase
- [HEADLINE] — Hero headline (default: "See how your team really works."). Short serif headline, 4–8 words, ends with a period
- [PRIMARY_CTA] — Primary call to action (default: "Start free for 14 days"). Button label, 2–5 words
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/bento-grid-saas-landing-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Cream `#F6F2EA` — Page background
- White `#FFFFFF` — Card and tile surfaces, palette panel
- Sand `#EFE8DC` — Secondary surfaces: hero glimpse frame, inactive pill track, tile insets, kbd chips
- Line `#E4DCCD` — 1px hairline borders on cards, dividers, chart grid lines
- Line strong `#D8CDB9` — Card border on hover, toggle off-state track
- Ink `#1D1B17` — Primary text, highlighted pricing card, closing band background, toast
- Muted `#6B6459` — Secondary text, captions, axis labels
- Burnt orange `#E8590C` — The single accent: primary buttons, toggles on, sparkline strokes, active data points, focus ring, one highlighted stat. Never used for large backgrounds.
- Burnt orange deep `#C94A08` — Primary button hover and pressed
- Accent tint `#FCE6D9` — Eyebrow dot halo, highlighted palette row, featured quote card, sparkline area fill top
- Avatar tints `#EADFCB / #F0DCCF / #DDE3D3 / #E1DDD6` — Background circles behind initials in the quote wall, rotated in that order. Initials are drawn in ink.

### Typography
- Display: hero headline, section headings, plan prices, closing band headline: Fraunces Variable (OFL), weights 400/500/600
- Text: body, nav, buttons, tile labels, FAQ: Inter Variable (OFL), weights 400/500/600
- Numbers: counters, stats, chart values, kbd hints, prices' cents and units: Geist Mono (OFL), weights 400/500

### Layout & motion
- Spacing: 8px base unit. Container max-width 1200px, centered, horizontal padding 24px (20px under 640px). Section vertical padding 128px desktop, 96px tablet, 72px mobile. Section header to content gap 56px. Bento gap 16px. Card padding 28px (22px mobile). Headings: hero 76px/1.02 desktop, 56px tablet, 42px mobile, Fraunces 500 with letter-spacing -0.02em and font-variation-settings 'opsz' 144. Section h2 52px/1.05 desktop, 36px mobile, Fraunces 500. Body 17px/1.6 Inter 400; tile labels 15px Inter 600; captions 13px Inter 500 muted. Eyebrows 12px Inter 600 uppercase with 0.08em tracking, muted.
- Radius: Cards and tiles 28px everywhere (same value for every tile, quote card and pricing card). Inner elements such as chart wells, palette rows and inputs 16px. Closing band and hero glimpse frame 36px. Buttons, pills, toggles, tabs and avatars fully rounded.
- Motion: Scroll reveal: every section's direct children fade up (opacity 0→1, y 16→0) over 0.5s with ease [0.22,1,0.36,1], staggered 0.06s. Triggered once when 20% is in view, using Motion whileInView with viewport once.
- Motion: Count-up: numbers animate from 0 to their target over 1.4s easeOut with Motion's animate() when 50% of the element enters view (once), formatted with Intl.NumberFormat and tabular numerals so the width never jitters.
- Motion: Sparklines: on view and again on every pointerenter, the stroke redraws by animating stroke-dashoffset from the path length to 0 over 0.9s easeOut, and the area fill fades from 0 to 1 over 0.6s.
- Motion: Tiles: on hover translateY(-2px), border goes from #E4DCCD to #D8CDB9 and shadow from card to lift over 0.25s.
- Motion: Buttons: the primary button darkens to accent-deep on hover and scales to 0.98 on press. An ArrowRight icon in the primary button shifts 3px right on hover.
- Motion: Toggles: the thumb slides with a Motion spring (stiffness 500, damping 32) and the track color crossfades over 0.2s.
- Motion: Pricing switch: the active pill background slides between options using a shared Motion layoutId. Each price rolls: the old value exits up (y 0→-14, opacity →0) and the new value enters from below (y 14→0) over 0.3s, using AnimatePresence mode popLayout.
- Motion: Accordion: height animates from 0 to auto over 0.32s ease [0.22,1,0.36,1] and the content fades in. The plus icon rotates 45° into an ×.
- Motion: Command palette: the backdrop fades in over 0.15s and the panel goes from scale 0.96, y 8 to scale 1, y 0 over 0.18s. It reverses on close.
- Motion: Nav: after 8px of scroll the background turns from transparent to cream at 80% opacity with backdrop-blur 12px and gains a hairline bottom border, over a 0.2s transition.
- Motion: prefers-reduced-motion: no reveals or stagger, counters show final values immediately, sparklines render fully drawn, the price changes without rolling, the accordion and palette open instantly, and the integrations highlight cycle stops.
- Imagery: No photos or bitmaps. All visuals are drawn in code: inline SVG sparklines, bars, a progress ring and a faint dot-grid pattern, plus Lucide icons at 1.75 stroke width. The logo mark is a 24px ink rounded square (radius 7) holding three vertical cream bars of heights 8, 12 and 16px; the tallest bar is burnt orange. It sits next to the wordmark [BRAND] in Fraunces 600 at 21px. Avatars are initials in tinted circles. The closing band has abstract concentric quarter-circle arcs in burnt orange at 22% opacity. There are no mascots, illustrations of people or logos.

## Pages & Sections
### Home (`index.html`)
1. **Nav** — Left: logo mark plus wordmark '[BRAND]', linking to ./index.html#top. Center links: Features (#features), Customers (#customers), Pricing (#pricing), FAQ (#faq), written as ./index.html#features and so on. Right: a text link 'Sign in' (./index.html#top) and a small primary pill button 'Get started' with an ArrowRight icon, linking to #pricing.
   Layout: Sticky top-0, z-40, height 68px, container width. Flex with space-between. Links are 15px Inter 500 in muted, turning ink on hover. Under 900px the center links and Sign in hide and a 40px round Menu icon button appears. It opens a full-width sheet under the nav: white, radius 28px, 16px from the edges, with the links stacked at 20px and a full-width primary button. Clicking a link closes it.
   Motion: Scrolled state as in Design motion. The mobile sheet fades and slides down 8px over 0.2s.
2. **Hero** — Eyebrow pill: a 6px burnt-orange dot with an accent-tint halo, then 'New · Weekly focus reports'. Headline: '[HEADLINE]'. Subcopy: '[BRAND] turns commits, tickets and calendars into a calm weekly read for [AUDIENCE]. No surveillance, no spreadsheets, no extra meetings.' Buttons: primary '[PRIMARY_CTA]' with ArrowRight (links to #pricing) and secondary 'Take the 2-minute tour' with a PlayCircle icon (links to #features). Fine print below: 'No credit card. Connects in under five minutes.'
   Layout: Centered text column, max-width 760px, padding-top 96px desktop / 56px mobile. The eyebrow is a white pill with a hairline border, 13px, 6px 14px padding, 24px above the headline. The headline is centered with max-width 13ch on desktop. The subcopy is 19px in muted, max-width 560px, 24px below. The buttons are 48px tall, 22px horizontal padding, 12px gap, 36px below the subcopy. The primary is accent with white text; the secondary is white with a hairline border and ink text. They stack full-width under 480px. Behind the hero sits an absolutely positioned SVG dot grid (dots 1.2px, 22px spacing, color #D8CDB9) with a radial mask fading out from the center, at 70% opacity.
   Motion: The eyebrow, headline, subcopy, buttons and fine print fade up with a 0.08s stagger on page load, not on scroll.
3. **Product glimpse row** — Three mini tiles in a frame. Tile A 'Focus hours this week': big counter '31.4 h' and the caption '+3.2 h vs last week', with the '+3.2 h' in accent and a 24-point sparkline below. Tile B 'Review wait time': the value '6.1 h median' and 7 vertical bars labelled M T W T F S S, where Thursday's bar is accent and the rest are #D8CDB9. Tile C 'Today': three rows, each a status dot and text: 'Sprint 42 on track' (accent dot), '3 reviews waiting' (muted dot), 'Planning at 14:00' (muted dot).
   Layout: 64px below the hero buttons. A sand (#EFE8DC) frame with radius 36px and 12px padding. At its top-left, a 28px-tall strip with three 8px circles in #D8CDB9 spaced 6px apart. Inside, a 12-column grid with 12px gap: A spans 5, B spans 4, C spans 3. All three are white cards with radius 28px, 24px padding and height 200px. On tablet, A and B span 6 each and C is hidden. On mobile, A sits on top, B below, and C is hidden.
   Motion: The frame fades up 0.3s after the hero copy. The tiles stagger in at 0.08s. The counter counts up and the sparkline draws on load.
4. **Bento features (#features)** — Eyebrow 'What you get'. H2 'Everything your team ships, measured gently.' Sub: 'Seven small tools that answer the questions you'd otherwise ask in a meeting.' Tiles: (T1) 'Live pulse' — 'Activity across repos, tickets and calendars, updated every minute.' A counter '12,480' with the label 'events today', range tabs 24h / 7d / 30d (each tab swaps in its own hardcoded 24-point array and counter target: 12,480 / 81,204 / 342,915), and a large sparkline with area fill. (T2) 'Command palette' — 'Jump to any metric, report or action without leaving the keyboard.' A fake search field 'Search metrics, reports, actions…' with a kbd chip showing '⌘ K' on Mac and 'Ctrl K' elsewhere (detect via navigator.userAgent). Below it, three static suggestion chips: 'Cycle time', 'Focus hours', 'Weekly report'. (T3) 'Nudges, not noise' — three working toggles: 'Chat digest' (on), 'Weekly email' (off), 'Anomaly alerts' (on). A footer line reads 'You'll get 2 updates a week' and recomputes from the toggles (digest = 1, email = 1, alerts = 'as needed'). (T4) 'Quarter goal' — a 112px SVG ring with 8px stroke, track #EFE8DC and accent progress counting to 72%, the number in the center in Geist Mono 28px, and the caption 'Deploys reviewed within a day'. (T5) 'Cycle time' — '4.8 days median, down from 7.1'. A 7-bar chart of weekly values [7.1, 6.6, 6.2, 5.9, 5.4, 5.1, 4.8]; the last bar is accent, the others #D8CDB9. Hovering a bar shows a small ink tooltip with the value in mono and turns that bar accent. (T6) 'Private by design' — a Lock icon in a 40px sand circle, the text 'Team-level views by default. No keystroke logging, no screenshots, ever.' and a working toggle 'Anonymize individuals' (on). (T7) 'Plays well with your stack' — a 4×2 grid of 44px sand squares, each holding a Lucide icon: GitBranch, Ticket, Calendar, MessageSquare, FileText, Bell, Database, Workflow. Caption '40+ connectors, set up in minutes'.
   Layout: Left-aligned header with the h2 max-width 18ch and the sub in muted at 18px. Grid: desktop (≥1024px) 12 columns, grid-auto-rows 232px, gap 16px. T1 col-span-6 row-span-2; T2 col-span-6; T3 col-span-3; T4 col-span-3; T5, T6 and T7 col-span-4 each. Placement: row 1 is T1 and T2; row 2 is T1 (continued), T3 and T4; row 3 is T5, T6 and T7. Tablet (640–1023px): 6 columns, auto rows 232px. T1 span 6, row-span 2; T2 span 6; T3 span 3; T4 span 3; T5 span 6; T6 span 3; T7 span 3. Mobile: 1 column, auto height, T1 min-height 420px. Every tile is a white card with radius 28px, padding 28px, a 1px #E4DCCD border and the card shadow, laid out as a flex column: label (15px Inter 600), description (14px muted, max 2 lines), then the visual, which fills the remaining space and is pushed to the bottom. T1's sparkline fills the bottom 55% of the tile, with 3 horizontal dashed grid lines in #E4DCCD. Moving the pointer over it shows a vertical hairline, a 7px accent dot with a white 2px ring, and a small ink tooltip with the value in mono, all snapped to the nearest point. T1's tabs are a sand pill track with a white sliding active pill (shared layoutId). Clicking T2's fake field, or pressing Cmd/Ctrl+K anywhere, opens the Command palette.
   Motion: The tiles reveal with a 0.06s stagger. The T1 counter counts up on view and re-counts (from the old value to the new one) when the tab changes. The T1 path morphs between datasets by animating the d attribute over 0.5s; the redraw on hover is as in Design motion. The T4 ring animates stroke-dashoffset in sync with its counter. The T5 bars grow from scaleY 0 (origin bottom) with a 0.05s stagger on view. In T7, the accent-tint highlight cycles through the icon squares one every 1.2s (the icon turns accent). This stops under reduced motion and pauses while the tile is hovered.
5. **Command palette (overlay)** — Input placeholder 'Type a command or search…'. Groups and items: Metrics — Cycle time, Focus hours, Review wait time, Deploy frequency; Reports — Weekly focus report, Sprint retro summary, Quarter goals; Actions — Create a goal, Invite a teammate, Toggle anomaly alerts, Export as CSV. Each item has a Lucide icon (Timer, Clock, Hourglass, Rocket, FileText, NotebookPen, Target, Plus, UserPlus, BellRing, Download). Empty state: 'No results for “{query}”.' Footer hints: '↑↓ to navigate', '↵ to open', 'esc to close' in mono 12px.
   Layout: A fixed overlay with ink at 30% opacity and backdrop-blur 4px. The panel is 560px wide (calc(100% − 32px) on mobile), placed 18vh from the top, white, radius 20px, panel shadow. A 56px input row with a Search icon has a hairline divider below it. The list has max-height 340px and scrolls, with group labels in 11px uppercase muted. Rows are 44px with radius 12px; the highlighted row has an accent-tint background and an accent icon. The footer is a 40px sand strip. Filtering is a case-insensitive substring match on the label. Arrow keys move the highlight and wrap around. Enter or click runs the item: the palette closes and a Toast shows 'Opened “Cycle time” — demo only'. 'Toggle anomaly alerts' really flips T3's toggle. Escape or a backdrop click closes it. The input is focused on open and focus returns to the trigger on close. Body scroll is locked while open. role=dialog with aria-modal.
   Motion: As in Design motion. The highlight moves between rows with a shared layoutId background.
6. **Toast (global)** — A short status text passed in by whatever triggers it.
   Layout: Fixed bottom-center, 24px from the bottom. An ink pill with cream 14px text, 10px 18px padding and a Check icon in accent. One toast at a time; it auto-dismisses after 2.4s. aria-live polite.
   Motion: Enters from y 12 with opacity 0 over 0.2s and exits the reverse way.
7. **Social proof (#customers)** — Eyebrow 'Customers'. H2 'Teams that stopped guessing.' Stats row: '38%' 'fewer status meetings', '4.2 h' 'focus time regained per person, weekly', '2,100+' 'teams on [BRAND]', '11 min' 'median setup time'. The first stat's number is accent; the others are ink. Quote wall, six cards: 1) 'We cancelled two standing meetings in the first week. The Monday report says everything they used to.' — Maren Okafor, Engineering Manager, Northfold. 2) 'It's the first metrics tool my team didn't ask me to switch off.' — Ilya Brandt, Head of Product, Quaywise. 3) 'Cycle time went from nine days to five once we could see where reviews were waiting.' — Priya Velasco, Staff Engineer, Tinmouth Labs. 4) 'Setup took less time than writing this quote.' — Jonah Ekwueme, CTO, Saltgrass. 5) 'The anonymized team view is what got our works council to say yes.' — Lotte Haugen, People Ops Lead, Fernhall. 6) 'I open the command palette more often than our wiki.' — Dev Ramaswamy, Product Designer, Kestrel & Co. All names and companies are invented.
   Layout: Centered header. The stats row is a 4-column grid (2×2 on mobile) inside one white card with radius 28px, divided by 1px #E4DCCD vertical rules (horizontal and vertical rules on mobile). Each cell has 32px padding, the number in Geist Mono 500 at 56px (40px mobile) with tabular numerals, and the label in 14px muted below. 56px below that is the quote wall: CSS columns, 3 on desktop, 2 on tablet, 1 on mobile, with column-gap 16px. Cards use break-inside avoid and margin-bottom 16px. Each card is white, radius 28px, padding 28px, with the quote in Fraunces 400 at 21px/1.4 in ink, then a row with a 40px initials circle (Inter 600 14px, tint rotating oat, clay, sage, stone) and name (15px 600) and role · company (13px muted) stacked. Card 3 is the featured card: accent-tint background, a 1px #F5C9AE border and a 26px quote.
   Motion: The stat numbers count up on view (38, 4.2 with one decimal, 2100 shown as 2,100+, 11). The quote cards reveal with a 0.06s stagger.
8. **Pricing (#pricing)** — Eyebrow 'Pricing'. H2 'Simple pricing that grows with the team.' Switch: 'Monthly' | 'Yearly', plus a small accent-tint badge 'Save 20%' next to Yearly. Plans: Starter — $0 for both periods, 'per seat / month', 'For small teams getting a first read.', features: Up to 5 seats; 30 days of history; Weekly focus report; Chat digest. CTA 'Start free'. Team (highlighted, badge 'Most popular') — $12 monthly / $10 yearly, 'per seat / month', 'For teams that want goals and alerts.', features: Everything in Starter; Unlimited history; Goals and anomaly alerts; Command palette and saved views; Anonymized team view. CTA '[PRIMARY_CTA]'. Business — $24 monthly / $19 yearly, 'per seat / month', 'For larger orgs with security reviews.', features: Everything in Team; SSO and SCIM; Custom data retention; Dedicated success manager; 99.9% uptime SLA. CTA 'Talk to us'. When Yearly is active, the line under each paid price reads 'billed yearly'; when Monthly, 'billed monthly'. Fine print: 'Prices in USD, excluding tax. Change plans any time.'
   Layout: Centered header. The switch is centered 32px below it: a sand pill track 4px inside, two 40px segments in 14px Inter 600, and the active segment a white pill with the card shadow, using role=radiogroup. The plan grid is 3 columns with a 16px gap, stacked on mobile with Team first. Cards are radius 28px with 32px padding. Starter and Business are white with a hairline border. Team is an ink (#1D1B17) card with cream text, raised 12px on desktop (translateY -12px), with the 'Most popular' badge as an accent pill at its top-right. The price is Fraunces 500 at 56px with the '$' at 28px, aligned to the top, and the unit line is Geist Mono 13px muted (#B8AFA2 on the ink card). The description is 15px. The CTA is a full-width 48px button: accent on Team, white with a hairline border on the others. Features are listed below a hairline with a 16px Check icon (accent on Team, ink on the others), at 15px with 12px row gap.
   Motion: The pill slides between segments and the prices roll as in Design motion. The cards reveal with a stagger.
9. **FAQ (#faq)** — Left: H2 'Questions, answered.' and the line 'Still curious? Write to hello@[brand].example and a person will reply within a day.' as plain text, not a link. Accordion items: 1) 'Does [BRAND] track individual people?' — 'No. Everything is reported at team level by default, and the anonymize switch hides names even from admins. We never record keystrokes or screens.' 2) 'Which tools does it connect to?' — 'Your code host, issue tracker, calendar and team chat, plus a CSV import for anything else. Most teams connect four sources in the first session.' 3) 'How long does setup take?' — 'The median is eleven minutes. You connect sources, pick a team and the first weekly report arrives the next Monday.' 4) 'Can we try it before paying?' — 'Yes. Starter is free for up to five seats, and Team has a 14-day trial with every feature switched on.' 5) 'How does yearly billing work?' — 'You pay for twelve months up front at the yearly rate and can add seats any time; extra seats are prorated.' 6) 'Where is our data stored?' — 'In the region you choose at signup, encrypted at rest and in transit. You can export or delete it from settings at any time.'
   Layout: Desktop 12-column grid: the left column spans 4 and is sticky at top 120px; the right column spans 8. They stack on mobile. Items sit in one white card with radius 28px, separated by 1px #E4DCCD dividers. Each trigger is a full-width button, 72px minimum height, with 24px horizontal padding, the question in 17px Inter 600 and a Plus icon in a 32px sand circle on the right. The answer is 16px muted with 24px padding and max-width 62ch. Only one item is open at a time, and item 1 is open by default. The trigger uses aria-expanded and aria-controls.
   Motion: Height and icon animation as in Design motion.
10. **Closing CTA band** — Headline: 'Give your team its afternoons back.' Sub: 'Connect your tools today and read your first weekly report on Monday.' A static email input (placeholder '[email protected]') with a primary button '[PRIMARY_CTA]'. Clicking the button (type=button, no form element) shows the Toast 'Demo only — nothing was sent.' Small line below: 'Free for up to 5 seats · Cancel any time'.
   Layout: Inside the container, a full-width ink (#1D1B17) block with radius 36px, padding 80px desktop / 48px 24px mobile, and overflow hidden. Text is left-aligned with max-width 620px. The headline is Fraunces 500 at 56px (36px mobile) in cream; the sub is 18px at #B8AFA2. The input row is 56px tall: a #2A2722 input with a 1px #3A362F border and cream text, and the button beside it (stacked on mobile), together max-width 480px. On the right edge, an absolutely positioned SVG of 5 concentric quarter-circle arcs (radii 80–400px, step 80, 1.5px stroke, burnt orange at 22% opacity) anchored to the bottom-right corner.
   Motion: The band reveals by fading up. The arcs draw in once via stroke-dashoffset over 1.2s with a 0.1s stagger, or are static under reduced motion.
11. **Footer** — Logo mark plus '[BRAND]' and the line 'Calm [PRODUCT] for [AUDIENCE].' Columns: Product (Features → ./index.html#features, Pricing → ./index.html#pricing, Changelog), Company (About, Careers, Contact), Resources (Docs, Privacy, Terms). Links without a real section point to ./index.html#top. Bottom row: '© 2026 [BRAND] Inc.' on the left and, on the right, the optional credit link from the Credit section if provided.
   Layout: padding-top 96px and padding-bottom 40px. A 12-column grid: the brand block spans 6, each link column spans 2. On mobile the brand block sits on top and the columns form a 3-column row. Column headings are 13px Inter 600 in ink; links are 14px muted, turning ink on hover. A 1px #E4DCCD divider sits 64px below, then the bottom row in 13px muted with space-between.
   Motion: None beyond the section reveal.

## Assets
- font: Fraunces Variable, Inter Variable and Geist Mono (400, 500), all OFL, installed as Fontsource npm packages and bundled by Vite. List each in ASSETS.md with its package name, source (fontsource.org), author and license OFL-1.1.
- icon: Lucide icons from the lucide-react package (ISC), stroke width 1.75: ArrowRight, PlayCircle, Menu, X, Search, Lock, Check, Plus, GitBranch, Ticket, Calendar, MessageSquare, FileText, Bell, Database, Workflow, Timer, Clock, Hourglass, Rocket, NotebookPen, Target, UserPlus, BellRing, Download. Note lucide-react (ISC) in ASSETS.md.
- image: No bitmap images. The logo mark, favicon (public/favicon.svg), dot-grid background, sparklines, bars, progress ring, closing-band arcs and initials avatars are all inline SVG or CSS drawn in code.

## Don'ts
- No backend of any kind: no server code, API routes, databases, auth or third-party APIs. Every chart value, quote and palette item is hardcoded in src/content.ts.
- No <form> that submits anywhere. The email field and all CTAs are static; the closing-band button only shows a 'Demo only' toast.
- No real brand logos or customer logos. Social proof uses only invented people, invented companies and drawn initials.
- No photos or likenesses of real people. Avatars are initials in tinted circles.
- No copy, slogans, product names or UI recreations from any real analytics tool. Integration tiles use generic Lucide icons, never a vendor's logo or name.
- No mascot or signature illustration. Use only abstract code-drawn SVG.
- No code or components from Aceternity UI, Tailwind Plus / Tailwind UI or any paid template kit. Build every effect from scratch.
- No commercial fonts and no font CDNs (fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts). Self-host Fraunces, Inter and Geist Mono through Fontsource.
- No CDN <script> or <link> tags, no hotlinked files and no analytics. Everything ships inside dist/.
- No source maps in the production build, and no src/ folder copied into dist/.
- Use relative asset paths (Vite base './'). Internal links point to file names such as ./index.html#pricing, never to a bare directory or '/'.
- Don't use the accent for large background areas. Burnt orange is only for key actions, toggles, data highlights and the focus ring.
- Don't mix card radii or paddings. Every tile, quote card and pricing card uses 28px radius and the same padding.
- Don't add dark mode, extra pages, cookie banners, SEO meta tags or JSON-LD.
- No console errors at 1440×900 or 390×844, and no horizontal scroll on mobile.
- Don't ignore prefers-reduced-motion. All reveals, count-ups, redraws, rolls and cycling highlights must be disabled or instant under it.
- Keep dist/ under 20 MB. Don't change the stack unless the user asks.

---
— Prompt by VibeFather · https://vibefather.ai/t/bento-grid-saas-landing-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.