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

# Nutritionist Website with Plate Builder

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

## Brief
Build a bright, one-page site for [BRAND], the nutrition-coaching practice of [PRACTITIONER] in [CITY], serving [AUDIENCE] through one-to-one coaching, group programs, and [FOOD_FOCUS]. The page presents services and how coaching works, a tap-to-build daily plate tool with a friendly balance readout, a three-recipe preview, quiet client quotes, and a discovery-call booking sample. Every word stays at the kitchen level: no medical, diagnostic, or weight-loss claims anywhere on the page.

- Audience: Primary: [AUDIENCE] — people who want calmer grocery runs, faster weeknights, and steadier food habits without diets, shame, or clinical language. Secondary: freelancers and small studios adapting the layout for any coach-with-packages practice.
- Goal: Move a visitor from 'this looks like my life' to a held discovery-call slot: win them with the produce-first world in one screen, prove the coaching approach with the plate builder in one interaction, and make booking a simple weekday-and-time choice that completes inline and stays in the browser.
- Tone: Warm, plain-spoken, and appetizing — a cook in a sunny kitchen, never a clinic. Short sentences, real food words, gentle humor. Coaching talks skills, shopping, and habits; it never diagnoses, treats, prescribes, or promises weight or medical outcomes.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), typescript (Apache-2.0), tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/baloo-2 (OFL-1.1), @fontsource/nunito (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite 6 + React 18 + TypeScript project with base './', build.outDir 'dist', and build.sourcemap: false. No router, no backend, no server code.
  - Install Tailwind CSS 3.4 with PostCSS and Autrefixer. Extend the theme with the exact palette below, fontFamily.display 'Baloo 2' and fontFamily.body 'Nunito', and the four plate-group colors as named tokens.
  - Self-host Baloo 2 weights 600 and 700 and Nunito weights 400, 600, and 700 through @fontsource/baloo-2 and @fontsource/nunito, imported in src/main.tsx. Never load fonts from a CDN.
  - Use Motion from 'motion/react' (motion, AnimatePresence, useReducedMotion) for reveals, springs, and number tweens; gate every animation on useReducedMotion().
  - Keep all copy and data in src/content.ts: brand strings, hero copy, services, how-it-works steps, plate groups (targets, maxima, examples), recipes, quotes, practitioner bio, booking day and slot chips, FAQ. When variable values change, rewrite the dependent copy there and derive slugs and storage keys from [BRAND] so no default-brand remnants remain.
  - Build the plate as an inline SVG donut of 8 equal wedges with per-group fills and a white center circle; the score, readout tier, and suggestion are pure functions of the group counts defined in content.ts.
  - Persist the plate and the discovery-call request to localStorage with keys namespaced as [BRAND_SLUG] + '-plate' and [BRAND_SLUG] + '-discovery-request'; validate restored JSON and recover silently from malformed data.
  - Use only these lucide-react icons: Leaf, Sparkles, MessagesSquare, Users, ChefHat, Salad, Drumstick, Wheat, Droplets, Clock, CalendarCheck, Check, RotateCcw, Star, Quote, MapPin, ChevronDown, ArrowRight.
  - Download the six generated photos to the exact public paths listed in Assets before building. Create ASSETS.md at the project root listing every file's path, source URL, author or generator, and license.
  - A plain <title> of [BRAND] and a favicon (the code-drawn leaf mark) are enough; no meta descriptions, Open Graph tags, JSON-LD, or sitemaps.

## Variables
- [BRAND] — Brand (default: "Marigold Table"). Invented two-word practice name; a leaf-dot logomark is derived from it in code.
- [PRACTITIONER] — Practitioner (default: "June Calloway"). The invented coach's name used in the hero, about block, and booking copy.
- [CITY] — City (default: "Alder Springs"). Where the studio is; appears in the hero eyebrow, about, FAQ, and address.
- [AUDIENCE] — Audience (default: "busy parents who want weeknight dinners to come easily"). A plain-language phrase for who the coaching is for.
- [FOOD_FOCUS] — Food focus (default: "Mediterranean-inspired weeknight cooking"). The cooking style that shapes the hero line, recipes, and plate-builder examples.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/nutritionist-website-with-plate-builder 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 `#FBFAF6` — Page ground
- White `#FFFFFF` — Cards, chips, and the plate center
- Leaf green `#2E7D4F` — Primary: buttons, links, active states, logomark
- Leaf tint `#F0F7F1` — Section bands and soft chips
- Citrus `#F5A63B` — Accent: highlights, price ticks, selected-slot fills
- Spinach ink `#26332B` — Headings and body text
- Sage `#DEE9DD` — Hairline borders and dividers
- Plate veggie `#4C9A5F` — Plate-builder wedge fill for veggies and fruit
- Plate protein `#CC6B4A` — Plate-builder wedge fill for protein
- Plate grain `#DCA94E` — Plate-builder wedge fill for whole grains
- Plate fats `#8FA05C` — Plate-builder wedge fill for good fats and extras

### Typography
- Display: headlines, prices, plate readout headings: Baloo 2 (OFL), weights 600/700
- Body: paragraphs, controls, chips, meta: Nunito (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base grid. Content shell max-width 1160px with 32px desktop and 20px mobile side padding. Header 72px. Desktop sections 96px vertical padding, mobile 64px. Card grids gap 24px. Prose blocks max 62 characters per line.
- Radius: Pill 999px for buttons, chips, tags, and the logomark; 24px for photos, the plate card, and large panels; 16px for small cards and inputs. Photos get a 24px radius with a 1px sage border.
- Motion: Sections reveal once on scroll: 14px rise with a 450ms ease-out fade, sibling cards staggered 60ms. Disabled under prefers-reduced-motion.
- Motion: Hero: the produce photo scales from 1.04 to 1 over 700ms while the copy lines rise 16px with an 80ms stagger.
- Motion: Plate builder: a newly added wedge springs in (stiffness 260, damping 20) and the newest wedge pulses once; the readout heading crossfades over 200ms and the score number tweens over 300ms.
- Motion: Hover states lift cards 4px with a soft shadow, 180ms. No page drift, no custom cursor, no autoplay media.
- Motion: With prefers-reduced-motion: reduce, replace springs, tweens, and reveals with 100ms opacity changes; every interaction stays fully functional.
- Imagery: One photographic set, one shoot: fresh produce and finished dishes in a consistent airy daylight grade — white marble and light oak surfaces, soft window light from the upper left, high-key whites, gentle warm highlights, leafy greens and citrus dominant. Six generated photos (hero produce spread, three plated recipes, the coaching kitchen, a market basket); no faces, no hands, no readable packaging or logos. The plate ring, icons, logomark, and decorative arcs are drawn in code, never photographed.

## Pages & Sections
### [BRAND] — Nutrition coaching in [CITY] (`index.html`)
1. **Header and hero** — Sticky header (72px, cream at 92% with backdrop blur, 1px sage bottom rule): code-drawn logomark — a leaf-green circle holding a white Lucide Leaf glyph — beside [BRAND] in Baloo 2 700; nav anchors Services, Plate builder, Recipes, About; right-aligned leaf-green pill button 'Book a discovery call'. Hero on cream: eyebrow 'NUTRITION COACHING IN [CITY]'; H1 'Good food, made doable.'; paragraph 'Hi, I'm [PRACTITIONER]. I help [AUDIENCE] cook [FOOD_FOCUS] — with calmer grocery runs, a rotation of dinners you actually like, and plates that get eaten.'; primary pill 'Book a free discovery call' (scrolls to booking) and secondary leaf-green-outline pill 'Try the plate builder'. Proof line under the buttons: '480 households coached · 12-week Table Reset program · 120+ weeknight recipes'. Right side: the hero produce photo in a 24px-radius frame with a floating white chip card at its bottom-left: a Sparkles icon and 'In season this week — oranges, chard, leeks'.
   Layout: 12-column grid: copy in columns 1–5, photo in columns 6–12 at 4:3 with object-cover and a minimum height of 520px. H1 at clamp(40px, 4.6vw, 64px), line-height 1.05, spinach ink. The floating chip is a white pill shadow offset -16px from the photo's bottom-left. Mobile: copy stacks first, the photo follows full-width at 4:3 with the chip inside its bottom-left; every tap target at least 44px.
   Motion: Photo settles from scale 1.04 over 700ms; the eyebrow, H1, paragraph, buttons, and proof line rise 16px in an 80ms stagger; the chip fades in last with the same spring.
2. **Services and how coaching works** — White section. Eyebrow 'WHAT WE DO TOGETHER'; title 'Coaching that fits your kitchen.' Three calm cards: 'One-to-one coaching' — '$390 / month' — 'Two 50-minute sessions a month, a grocery game plan, and message check-ins between. For people who want a coach in their corner.'; 'The Table Reset' — '$249 / 12 weeks' — 'A small-group program: six live cooking classes, a pantry clean-out guide, and weekly habit threads. New groups start each season.'; 'Pantry Workshop' — '$85 / one visit' — 'Two hours in your kitchen (or on video). We reorganize, label, and shop-list your staples so weeknights stop being improvised.' Each card footer links 'Ask about it on a call' to the booking anchor. Below the cards, a 'How coaching works' strip of three steps: '01 Discovery call — 20 minutes, no charge. We talk about your weeknights.'; '02 A plan you'll actually cook — three habits, one shopping rhythm.'; '03 Weekly check-ins — we adjust, celebrate, and keep it doable.'
   Layout: Cards in a 3-column grid on white (16px radius, 1px sage border): icon disc (MessagesSquare, Users, ChefHat) on leaf tint, service name in Baloo 2 600, price line in Baloo 2 700 leaf green, body copy, footer link with ArrowRight. Steps strip beneath: three columns split by 1px sage hairlines, outlined numerals 01–03 at 40px in leaf green. Mobile: cards stack; steps stack with a left numeral rail and the hairlines become horizontal rules.
   Motion: One-time reveal: cards rise 14px staggered 60ms; hover lifts a card 4px with a soft shadow; step numerals fade in with the section, no separate looping animation.
3. **Daily plate builder** — Band on leaf tint. Eyebrow 'TRY IT NOW'; title 'Build today's plate.'; intro 'Tap a food group to add a portion. Aim for the simple rule — half the plate veggies and fruit, a quarter protein, a quarter grains, plus a drizzle of something good.' Four group rows with icon, name, example line, count, and a minus control: 'Veggies & fruit' (Salad) 'roasted broccoli · shaved carrot · orange segments' max 5; 'Protein' (Drumstick) 'eggs · white beans · salmon' max 3; 'Whole grains' (Wheat) 'farro · barley · sourdough' max 2; 'Good fats & extras' (Droplets) 'olive oil · pumpkin seeds · avocado' max 2. The plate is a drawn SVG donut of 8 equal wedges around a white center that reads 'Your plate · N / 8'. Beside it a readout panel: score meter, heading, and one suggestion sentence, plus a 'Clear the plate' reset link. The plate state persists in localStorage.
   Layout: Two columns: the plate SVG about 380px on the left, controls on the right. Each group row is a 56px-high button: icon disc in the group color, name plus examples, count '2 / 5', and a minus circle that removes that group's last portion. Wedges fill clockwise from 12 o'clock in the order added, colored by group. Scoring: target is 4 veg, 2 protein, 1 grain, 1 fat; score = max(0, 100 − 12 × Σ|count − target|). Readout tiers: score 100 'A beautifully balanced plate — the simple rule in action.'; 85–99 'Bright and balanced — {suggestion}.'; 60–84 'Almost there — {suggestion}.'; below 60 'Keep building — {suggestion}.' Suggestions: with an unfilled plate, name the group with the largest deficit ('add a scoop of whole grains'); when the plate is full but off target, name the largest surplus ('take one off the veggies and make room'). The readout is aria-live='polite'. Mobile: plate centered above the group rows, readout beneath, nothing scrolls horizontally.
   Motion: A new wedge springs in (stiffness 260, damping 20) with a single pulse on the newest wedge; removals fade over 150ms; the score tweens 300ms and the heading crossfades 200ms; reduced motion swaps all of it for instant state changes.
4. **Recipe preview** — White section. Eyebrow 'FROM THE RECIPE LIBRARY'; title 'Three dinners from this month.'; three photo cards: 'Charred Lemon & White Bean Bowl' — chips '25 min' and 'weeknight' — 'Crisp-edged beans, soft herbs, and a lemony dressing kids ask for twice.'; 'Sheet-Pan Harissa Chicken with Plums' — '35 min' and 'one pan' — 'Sweet plums, warm spice, and a pan sauce that makes its own glory.'; 'Spring Pea & Feta Farro' — '20 min' and 'meatless' — 'Chewy grains, poppy peas, salty feta — dinner tonight, lunch tomorrow.' Footer line under the grid: 'Full recipes live in the member library — have a taste on a discovery call.' The cards are visuals with meta chips, not links.
   Layout: 3-column grid of white cards (16px radius, 1px sage border): 4:3 photo at 24px radius on top, name in Baloo 2 600, meta chips with a Clock icon for the time, one-line description. Tablet uses 2 columns; mobile single column. Hover lifts 4px.
   Motion: Cards reveal in a 60ms stagger; a slow 6s scale from 1 to 1.03 on each photo loops only while hovered, and is skipped entirely under reduced motion.
5. **Testimonials** — Cream band. Eyebrow 'KITCHEN TABLE STORIES'; title 'What changes, people say.' Three quiet quote cards: 'Priya S. — parent of two' 'Our Tuesday is no longer cereal. We plan on Sunday, shop once, and actually cook. [PRACTITIONER] made it feel easy, not virtuous.'; 'Marcus & Elena T. — Table Reset cohort' 'Six dishes we rotate happily, and a grocery list that alone paid for the program.'; 'Dana W. — shift nurse' 'I eat real food on night shifts now. We built a plan around my odd hours, not against them.'
   Layout: 3-column grid of white cards (24px radius): a large Quote icon in leaf tint, the quote at 17px spinach ink, then a name row with a small sage initial disc. Mobile stacks to one column with comfortable 16px gaps.
   Motion: One-time staggered reveal only; no hover animation on quotes.
6. **About the practitioner** — White section, two columns. Left: the studio-kitchen photo (4:3, 24px radius). Right: eyebrow 'YOUR COACH'; title 'Hi, I'm [PRACTITIONER].'; body 'I trained as a nutrition coach at the Welltable Institute and spent nine years in teaching kitchens before starting [BRAND] in [CITY]. I don't hand out meal plans you abandon in a week — we build food skills: shopping, prep, and a rotation of dinners you like. When I'm not coaching, I'm at the farmers' market deciding between two kinds of chard.' Three fact chips: '9 years coaching', 'Certified nutrition coach — Welltable Institute', 'Cooking-class teacher'. A small MapPin line under the chips: 'Studio 3, 92 Alder Lane, [CITY]'.
   Layout: Photo in columns 1–6 at 4:3; copy in columns 7–12 with the fact chips as leaf-tint pills wrapping onto two lines maximum. Mobile: photo above copy, chips wrap freely.
   Motion: Section-level reveal; the photo gets a subtle 700ms settle from scale 1.03, skipped under reduced motion.
7. **Discovery-call booking** — Band in deep leaf green with cream text: eyebrow 'START HERE'; title 'Book a free discovery call.'; intro 'Pick a weekday and a time that suits you — 20 minutes, on video or at the studio (Studio 3, 92 Alder Lane, [CITY]). This demo keeps your request in your own browser; nothing is sent anywhere.' Inside a white card: day chips Monday–Saturday; slot chips 9:00, 10:30, 13:00, 15:30, 17:00; a two-option segmented control 'Video call' / 'At the studio'; name and email inputs; submit pill 'Request this slot'. On success the form is replaced by a confirmation: CalendarCheck icon, 'You're on the list, {name}!', 'We'd see you {day} at {time} ({place}). In a live site this would reach [PRACTITIONER] — in this demo it's saved locally.', and a 'Change my request' link that restores the form filled in.
   Layout: Centered white card 720px wide (24px radius) on the deep leaf band. Chips are 44px pills; selected chips fill leaf green with white text, slots fill citrus with spinach-ink text. Validate locally: a name is required and the email must match a simple pattern; errors show as inline red text under the field, never alerts. Persist the whole request to localStorage keyed from [BRAND_SLUG]; restore it on reload. The confirmation is aria-live='polite'. Mobile: the card keeps 20px side padding; chips wrap.
   Motion: Selected chips pop to 1.06 and settle (180ms); the confirmation crossfades in over 240ms; the segmented control thumb slides 200ms. All replaced by instant changes under reduced motion.
8. **FAQ and footer** — FAQ 'Fair questions.' as four details/summary items: 'Do you write meal plans or give medical advice?' — 'Neither. We work on food skills and habits — shopping, prep, and rotation. I don't diagnose, treat, or prescribe; for medical questions you'll always be pointed back to your clinician.'; 'What happens on a discovery call?' — 'Twenty minutes about your weeknights: what works, what collapses, and whether coaching fits. No pressure and no charge.'; 'Do you sell supplements or products?' — 'No. The only things I sell are time, programs, and a very opinionated spice-rack diagram.'; 'Virtual or in person?' — 'Both. Coaching happens over video anywhere; pantry visits and classes happen at the studio in [CITY].' Footer on spinach ink with cream text: leaf logomark and [BRAND], the line 'Food skills, not rules.', anchor nav (Services, Plate builder, Recipes, About, Book a call), and the note 'This site is food-and-habits coaching, not medical advice.' plus the optional [CREDIT] link.
   Layout: FAQ in a single column of max-width 760px with 1px sage dividers, 22px vertical padding per item, and a rotating ChevronDown. Footer: two rows on desktop — brand block left with nav right, note and [CREDIT] on a second row in muted cream; stacked on mobile. No social icons, no newsletter form.
   Motion: A 160ms chevron rotation on toggle with no height animation that could clip text; footer is static.

## Assets
- image: Hero produce spread. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/hero-produce.webp to public/images/hero-produce.webp. Alt: 'A spread of fresh produce — leafy greens, citrus, and herbs on a white marble table.' Used as the hero's visual anchor. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Recipe photo one. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/recipe-beans.webp to public/images/recipe-beans.webp. Alt: 'A bowl of white beans with charred lemon halves and herbs.' Used on the Charred Lemon & White Bean Bowl card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Recipe photo two. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/recipe-sheetpan.webp to public/images/recipe-sheetpan.webp. Alt: 'A sheet pan of roasted chicken with plums and red onion.' Used on the Sheet-Pan Harissa Chicken card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Recipe photo three. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/recipe-farro.webp to public/images/recipe-farro.webp. Alt: 'A plate of farro with green peas, feta, and mint.' Used on the Spring Pea & Feta Farro card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Coaching kitchen. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/studio-kitchen.webp to public/images/studio-kitchen.webp. Alt: 'A bright studio kitchen with jars of grains and a bowl of citrus.' Used in the about block. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Market basket. Download https://media.vibefather.ai/assets/e96d06da-c68d-42e7-9fc9-2ae91f028d0f/market-basket.webp to public/images/market-basket.webp. Alt: 'A woven basket filled with greens and citrus on light wood.' Used as a small square accent image beside the how-coaching-works strip. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Draw the plate builder entirely in code: an inline SVG donut of 8 equal wedges (each 45 degrees) with a 120px white center circle reading 'Your plate · N / 8', wedge fills from the four plate-group tokens, and a thin sage outer ring. No generated or stock image is used for the plate.
- icon: Install lucide-react and use only Leaf, Sparkles, MessagesSquare, Users, ChefHat, Salad, Drumstick, Wheat, Droplets, Clock, CalendarCheck, Check, RotateCcw, Star, Quote, MapPin, ChevronDown, and ArrowRight. ISC license. Draw no brand logos; the leaf logomark is original code around the Leaf glyph. Record the package and license in ASSETS.md.
- font: Self-host Baloo 2 weights 600 and 700 through @fontsource/baloo-2 (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.
- font: Self-host Nunito weights 400, 600, and 700 through @fontsource/nunito (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.

## Don'ts
- Never state or imply diagnosis, treatment, cure, prevention, detox, or weight-loss outcomes in any copy, tooltip, alt text, or metadata. Keep every sentence at the food-skills level and keep the footer's food-and-habits disclaimer present.
- Do not name or imply real nutritionists, dietitians, diet systems, or commercial programs. [PRACTITIONER], the Welltable Institute, client quotes, recipes, prices, and stats are invented for this demo.
- Photos must show produce, dishes, and kitchens only — no people's faces, no hands, no readable packaging, labels, or logos anywhere in the imagery.
- The booking flow is a local-only sample: no form submits, no APIs, no email or calendar services, no analytics. Persist to localStorage only and validate restored data.
- No dates tied to the real clock: use weekday chips and static sample slots; never render today's date, a countdown, or season-calendar math against the visitor's clock.
- No backend, server code, databases, auth, or third-party scripts. Static output in dist/ from the single build command.
- Self-host fonts through the listed Fontsource packages only; never load Google Fonts, Adobe Fonts, or any CDN stylesheet or script.
- No source maps in production, no src/ copied into dist/, keep dist/ under 20 MB, and keep Vite's base relative.
- No Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, or hotlinked files; use only the six generated photos and original code-drawn SVG/CSS art.
- No SEO work: no meta descriptions, Open Graph tags, JSON-LD, sitemaps, or keyword-stuffed headings. A plain title with [BRAND] and a favicon are enough.
- Do not let the plate builder overflow horizontally, trap keyboard focus, or animate in a way that ignores prefers-reduced-motion.
- No scroll-jacking, custom cursor, autoplay audio, page parallax, or motion beyond the specified reveals, springs, pops, and tweens.
- Keep all copy in US English and build brand-derived strings (storage keys, slugs, alt text) from [BRAND] and [BRAND_SLUG] so alternate variable values never leave default-brand remnants.
- Every internal link is a file name or in-page anchor, never a bare directory; the site must render at 1440×900 and 390×844 with zero console errors.

---
— Prompt by VibeFather · https://vibefather.ai/t/nutritionist-website-with-plate-builder · 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.