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

# Youth Sports Club Website

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

## Brief
Build a polished four-page website for [BRAND], an invented youth soccer club in [LOCATION] for players ages 6–13. The club emphasizes [PROGRAM_FOCUS]. Include age-group squads, fixtures and results, a sortable league standings table, three coach profiles, transparent registration fees, a validated client-side registration form, and a dedicated parent information page. Use the exact default copy and sample data below, rewriting every club-specific detail when variable values change.

- Audience: Parents and caregivers comparing youth clubs on coaching, schedules, cost, safety, and fit, plus players who want to see teams and match activity. It also suits volunteer club administrators adapting a complete static front end for their own community.
- Goal: Help a family find the right age group, understand the match rhythm and total cost, trust the people and policies behind the club, and complete an explicitly illustrative registration request without any backend.
- Tone: Energetic, welcoming, organized, and specific. Sound like a capable community club rather than a professional franchise. Use short direct sentences, concrete times and fees, no hype, no guaranteed development claims, and no pressure tactics.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), @fontsource/barlow-condensed (OFL-1.1), @fontsource-variable/manrope (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold a Vite React TypeScript app. Keep index.html, fixtures.html, register.html, and parents.html at the project root, each with a div id='root' whose data-page value is home, fixtures, register, or parents and the same src/main.tsx entry.
  - In vite.config.ts set base './', plugins [react()], build.outDir 'dist', build.sourcemap false, build.assetsInlineLimit 0, and rollupOptions.input to all four root HTML files using resolve(__dirname, '<file>'). Do not copy src/ into dist/.
  - Configure Tailwind 3.4 through PostCSS with content ['./index.html', './fixtures.html', './register.html', './parents.html', './src/**/*.{ts,tsx}']. Add the Design colors and fontFamily display ['Barlow Condensed', 'Arial Narrow', 'sans-serif'] and sans ['Manrope Variable', 'system-ui', 'sans-serif'].
  - In src/fonts.ts import '@fontsource/barlow-condensed/600.css', '@fontsource/barlow-condensed/700.css', and '@fontsource-variable/manrope'; import src/fonts.ts and src/index.css from the entry file.
  - src/main.tsx reads the root element's data-page value and renders the matching page without a router. Every navigation link points to ./index.html, ./fixtures.html, ./register.html, or ./parents.html, with section hashes only where specified.
  - Keep every visible string, fee, time, phone number, address, coach, squad, fixture, result, standing, parent policy, FAQ, and image path in typed records in src/content.ts. Derive brand-dependent values and rewrite all dependent content when variables change.
  - Add src/lib/brand.ts for brandSlug and the reserved .example email address, src/lib/fees.ts for parsing [SEASON_FEE] and calculating totals, and src/lib/standings.ts for stable multi-key sorting and goal-difference calculations.
  - Use Motion for React for section reveals, mobile navigation, filter changes, standings row reordering, accordions, and form confirmation. Use Lucide icons only. Keep interactive state local to each page; do not persist registration personal data.
  - Before the first build, download the six supplied images into public/images/ with the exact paths under Assets. The production build itself never fetches anything.
  - Create public/favicon.svg from the original corner-flag motif under Assets. Give each HTML file a plain variable-aware title and a local favicon link; do not add SEO metadata or structured data.
  - Write ASSETS.md at the project root with every supplied image, font package, and icon package as specified under Assets. Keep dist/ under 20 MB with no source maps.

## Variables
- [BRAND] — Club name (default: "Riverglade Youth Soccer"). An invented youth club name used in the wordmark, page titles, fixture data, standings, email, and footer. Never use a real club or league.
- [LOCATION] — Club location (default: "Fort Collins, Colorado"). City and state or region used in the hero, field details, contact copy, and footer. Streets and venues remain invented.
- [PROGRAM_FOCUS] — Program focus (default: "confidence, teamwork, and a love of the game"). A concise lowercase phrase that shapes the hero, squad descriptions, coaching copy, and registration introduction.
- [SEASON_FEE] — Season fee per player (default: "$180"). The base USD fee for one player. Parse the amount and calculate multi-player, kit, discount, and installment totals from this single value.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/youth-sports-club-website 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
- Chalk `#F6F3EA` — Main page background and quiet information sections
- Paper `#FFFEF8` — Cards, forms, table surfaces, and text on Forest
- Forest `#173F35` — Primary buttons, dark bands, footer, headings, and selected controls
- Field `#2E6B4F` — Links, secondary badges, field-line details, and hover states
- Volt `#D8F45D` — Primary accent for CTAs, active sort indicators, score highlights, and focus details
- Ink `#17221C` — Body text and table numerals on light surfaces
- Slate `#647067` — Secondary text, captions, metadata, and disabled states
- Line `#D8DDD2` — Hairline borders, table rules, inputs, and card outlines
- Clay `#C95D43` — Small loss or cancellation status accents; never the sole status signal

### Typography
- Display headlines, score numerals, squad names, and the wordmark: Barlow Condensed (OFL), weights 600/700
- Body, navigation, tables, forms, captions, and parent information: Manrope (OFL), weights 400/500/600/700/800

### Layout & motion
- Spacing: Use an 8px base grid and a 1240px maximum content width with 40px desktop gutters, 28px tablet gutters, and 18px mobile gutters. Major sections use 96px vertical padding desktop and 64px mobile. Use a 12-column desktop grid with 24px gaps. H1 is clamp(58px, 7vw, 96px) Barlow Condensed 700 with 0.94 line height; page H1 is clamp(50px, 6vw, 78px); H2 is clamp(38px, 4vw, 56px) with 0.98 line height; H3 is 26px. Body is 16px/1.7 with a 65ch maximum; small metadata is 12px/1.4 Manrope 800 uppercase with 0.12em tracking. Tables use 14px with tabular numerals. Buttons and inputs are at least 48px high. Focus uses a 2px Volt outline plus a 2px Forest outer ring on light surfaces.
- Radius: Use 18px radii on photographic frames and major cards, 12px on tables and forms, 8px on inputs, and fully rounded chips and buttons. Cards use 1px Line borders rather than heavy shadows; only the registration summary gets a restrained 0 16px 44px Forest shadow at 8% opacity.
- Motion: On the home hero, reveal the eyebrow, headline lines, body, and CTAs with y 24 to 0 and opacity 0 to 1 over 600ms, staggered by 75ms; settle hero-match.webp from scale 1.035 to 1 over 900ms.
- Motion: Reveal section headings and card groups once with y 18 and opacity over 480ms and a 60ms sibling stagger. Content remains visible without IntersectionObserver and is never hidden while waiting for animation.
- Motion: Filter fixture cards with a 180ms opacity and y 8 transition; animate standings row order with a 240ms layout transition and rotate the active sort arrow without animating the numbers.
- Motion: Mobile navigation opens with opacity and height over 220ms. Accordions use height and opacity over 200ms. Selected squad, kit, and payment controls use color and border transitions only.
- Motion: Registration success replaces the form in place over 220ms and moves focus to its heading. Do not shake invalid fields or animate fee totals with counting effects.
- Motion: Respect prefers-reduced-motion through Motion's reduced-motion hook and CSS overrides: remove transforms, smooth scrolling, staggers, and nonessential transitions while preserving all final states and interactions.
- Imagery: Use the six supplied documentary editorial sports photographs as one coherent shoot: natural grass, plain forest-green and chalk unbranded kits, warm late-afternoon sunlight, realistic texture, and subtle 35mm grain. Youth players are visible only from behind, at distance, or in non-identifiable profile; no recognizable child appears. The three adult coaches are fictional people who do not resemble any real individual. No image contains readable text, squad numbers, logos, sponsors, branded products, or recognizable venues. Use object-fit cover with the specified focal positions and descriptive alt text; never place text over a face. Field lines, the corner-flag favicon, score rules, icons, and small diagrams are drawn in code.

## Pages & Sections
### Club home, age groups, match preview, and coaches (`index.html`)
1. **Content model and default sample data** — All copy below is written for [BRAND] = Riverglade Youth Soccer, [LOCATION] = Fort Collins, Colorado, [PROGRAM_FOCUS] = confidence, teamwork, and a love of the game, and [SEASON_FEE] = $180. Put every value in src/content.ts and rewrite club-specific copy when variables change. Default operational details: invented address 18 Willowbank Lane, [LOCATION]; home ground Willowbank Community Fields; phone (970) 555-0148; email hello@ + brandSlug without hyphens + .example; office hours Tue and Thu 16:30–19:30; players ages 6–13. Squads: U8, ages 6–7, First touches, Elliot Brooks, Tuesday 17:30–18:30, Field 2, 12-player sample squad, short games and lots of ball contact; U10, ages 8–9, Pass and move, Elliot Brooks, Tuesday and Thursday 17:30–18:45, Field 2, 14-player sample squad, simple combinations and confident receiving; U12, ages 10–11, Read the game, Nina Alvarez, Tuesday and Thursday 18:00–19:15, Field 1, 16-player sample squad, positioning, transitions, and set-piece basics; U14, ages 12–13, Play with purpose, Maya Chen, Tuesday and Thursday 18:30–19:45, Field 1, 16-player sample squad, tactical choices and shared leadership. Upcoming fixtures: Matchday 08, U10, home vs Cedar Union, Saturday 09:30, Willowbank Field 2; Matchday 08, U12, away vs East Vale Athletic, Saturday 11:00, East Vale Community Park; Matchday 08, U14, home vs North Quarry, Saturday 13:30, Willowbank Field 1; Matchday 08, U8, home vs Sunnybank Rovers, Sunday 10:00, Willowbank Field 2. Recent results: Matchday 07, U8, [BRAND] 3–2 Briar Patch; U10, [BRAND] 1–1 Elm City; U12, [BRAND] 4–0 West Orchard; U14, Silver Creek 3–2 [BRAND]. U12 sample standings rows, all with seven played: [BRAND] W5 D1 L1 GF18 GA8 Pts16; Cedar Union W5 D0 L2 GF16 GA9 Pts15; East Vale Athletic W4 D2 L1 GF15 GA8 Pts14; North Quarry W3 D2 L3 GF12 GA12 Pts11; West Orchard W1 D2 L5 GF8 GA16 Pts5; Silver Creek W1 D1 L6 GF7 GA19 Pts4. Calculate GD as GF minus GA. Coaches: Maya Chen, Head of coaching and U14, Youth coaching certificate and first-aid trained, Calm explanations, brave decisions, and room for every player to lead; Elliot Brooks, U8 and U10 coach, Primary-school PE teacher and first-aid trained, Practices built around movement, laughter, and many touches; Nina Alvarez, U12 and goalkeeping coach, Goalkeeping coach and safeguarding lead, Clear positioning, kind feedback, and a focus on the next action. All clubs, opponents, people, fixtures, results, standings, credentials, and policies are invented sample content. Keep every named value synchronized across pages.
   Layout: n/a
   Motion: n/a
2. **Shared header and mobile navigation** — Use an original code-drawn corner-flag line motif beside the text wordmark [BRAND] and small caption YOUTH SOCCER · [LOCATION]. Desktop navigation: Teams → ./index.html#teams, Fixtures → ./fixtures.html, Parents → ./parents.html. Primary CTA: Register → ./register.html. Mark the current page with aria-current='page'. Mobile uses a Menu button with an expanded panel containing the same links and CTA; close it after navigation and on Escape.
   Layout: Sticky top, 76px high, Chalk at 96% opacity with subtle blur and a Line bottom border. Wordmark left, navigation centered, CTA right inside the 1240px container. Below 900px show wordmark, compact Register button, and Menu only.
   Motion: Use the specified mobile-panel transition; do not animate the sticky position.
3. **Match-day photographic hero** — Eyebrow: YOUTH SOCCER · AGES 6–13 · [LOCATION]. H1: Big weekends. Brave first touches. Lead: [BRAND] helps players build [PROGRAM_FOCUS] through thoughtful coaching, friendly competition, and Saturdays that feel worth the early alarm. Primary CTA: Register a player → ./register.html. Secondary CTA: See fixtures → ./fixtures.html. Add three compact facts: Four age groups · Two trained adults at practice · Clear fees, no tryout charge. Use hero-match.webp with alt 'Youth soccer players passing on a sunny community field, seen from behind' and object-position center 58%. Overlay a Paper next-match card at the lower-right: NEXT WHISTLE · U10 · MATCHDAY 08 / [BRAND] vs Cedar Union / Saturday 09:30 · Willowbank Field 2 / View match center.
   Layout: Within the first desktop screen after the header, use a 5/7 grid with copy left and a 16:9 photograph right. Hero top padding is 56px and bottom padding 72px. The image spans its column with 18px radius and the next-match card overlaps its bottom-left edge by 32px. On mobile order eyebrow, H1, image, lead, CTAs, then a non-overlapping next-match card; keep the image at 190px high and both CTAs full width.
   Motion: Use the hero entrance sequence. The match card fades in after the image settles; no autoplay carousel or looping decoration.
4. **Age-group squads** — Section id='teams'. Eyebrow: FIND YOUR SQUAD. H2: A clear next step for every player. Intro: Four small-age-band squads, with coaching and expectations that grow with the players. Render all four squads from the content model. Each card shows age band, U label, squad name, coach, practice schedule, field, sample squad size, and one concrete development focus. Button on each card: Register for U8/U10/U12/U14 → ./register.html?team=u8 etc. The registration page reads this query and preselects the matching age group; without a query it defaults to U8. Use training.webp beneath the cards with alt 'Youth players practicing a passing drill while a coach watches' and caption: Lots of touches. Simple instructions. One more good decision than last week.
   Layout: Chalk section with a 4/8 heading grid followed by four equal cards in a 2×2 grid at desktop and one column on mobile. Selected-card hover uses a 3px lift and Field border. Place the 4:3 training photograph and caption in a 7/5 split below, with the quote right.
   Motion: Reveal cards with the standard stagger. No hidden card content on hover.
5. **Match center preview** — Eyebrow: AROUND THE CLUB. H2: The next whistle and the last scores. Left block: NEXT UP, the first two upcoming fixtures from the content model, each with squad, opponent, home/away label, time, and venue. Right block: LAST WEEKEND, the four recent results with large tabular scores and W/D/L text labels. Bottom CTA: Open fixtures and standings → ./fixtures.html. Add a small note: Sample club schedule for this demo, not a live league feed.
   Layout: A Forest section with Paper text. Use a 6/6 grid: two upcoming fixture rows on the left and a compact 2×2 result grid on the right. Volt is reserved for scores and the CTA; separate rows with Paper borders at 18% opacity. Stack blocks on mobile.
   Motion: Reveal the two columns once; score values do not count up.
6. **Coach profiles** — Eyebrow: THE PEOPLE ON THE TOUCHLINE. H2: Coaching players, not just positions. Intro: Three fictional profile placeholders show how a club can make its approach and responsibilities visible. Render Maya, Elliot, and Nina using coach-maya.webp, coach-elliot.webp, and coach-nina.webp with 3:4 crops and object-position center 28%. Each card includes name, role, generic sample credentials, and the coaching line from the content model. Add caption: Demo profiles with fictional portraits; replace them with the club's own staff information.
   Layout: Paper section with three equal cards. Portraits have 18px top radii; text sits below rather than over the face. Align roles, credentials, and descriptions by row on desktop and stack on mobile.
   Motion: Use one gentle portrait reveal per card and a short text stagger. No grayscale filter or hover-only biography.
7. **Registration callout and shared footer** — Callout eyebrow: READY FOR THE NEXT WHISTLE? H2: One season. One clear fee. Copy: Registration is [SEASON_FEE] per player, including training, league registration, and the end-of-season festival. See what is included, calculate any kit and sibling options, and save a demo request. CTA: Check fees and register → ./register.html. Secondary CTA: Read the parent guide → ./parents.html. Footer repeats [BRAND], [PROGRAM_FOCUS], and links to all four pages. Contact: 18 Willowbank Lane, [LOCATION]; (970) 555-0148; derived reserved .example email. Bottom note: Invented club, sample data, no live registration. © [BRAND] plus the optional [CREDIT] link. Do not add a year or social icons.
   Layout: Callout is a Volt panel with Forest text in an 8/4 grid, followed by a Forest footer with a 5/3/4 grid for statement, navigation, and contact. Stack on mobile with large tap targets.
   Motion: Simple link-color transitions only.

### Fixtures, results, and sortable standings (`fixtures.html`)
1. **Match center introduction** — Use the shared header and footer from index.html. Eyebrow: MATCH CENTER · SAMPLE CLUB DATA. H1: Every kickoff, one clear view. Intro: Filter by squad, switch between upcoming fixtures and recent results, then sort the U12 table by the numbers that matter to you. This is illustrative club data, not a live league feed. Add compact legend chips: HOME · AWAY · FULL TIME.
   Layout: Chalk intro in a 7/5 grid with text left and a Forest matchday summary card right. The summary reads MATCHDAY 08 / 4 squads in action / 3 home · 1 away and is derived from the fixture records. Keep this introduction compact enough to reveal the filter controls within the first desktop screen.
   Motion: Reveal the heading and summary once with the standard entrance.
2. **Filterable fixtures and results** — Create squad filter buttons All squads, U8, U10, U12, U14 and status tabs Upcoming, Results, All. Default to All squads and Upcoming. Render the exact fixture and result records from the content model. Upcoming cards show Matchday, squad, home/away, both club names, time, and venue; result cards show Matchday, squad, both names, final score, and a textual W/D/L badge from [BRAND]'s perspective. Update the visible count and announce it through aria-live. Empty combinations show No sample matches match these filters and a Reset filters button; never leave a blank panel. Filters do not alter the standings table.
   Layout: Place filter controls in a Paper panel above a two-column card grid. Controls wrap on mobile rather than scrolling horizontally. Cards use 12px radii, Line borders, and clear home/away and score hierarchy. Stack to one column under 760px.
   Motion: Use the specified filter transitions. Preserve focus on the active filter and do not animate layout heights excessively.
3. **Accessible sortable league standings** — Eyebrow: U12 DIVISION · SAMPLE TABLE. H2: Sort the standings. Provide columns Club, P, W, D, L, GF, GA, GD, Pts. Default order is Pts descending, then GD descending, GF descending, then Club ascending. Every header is a real button with an accessible Sort by label and aria-sort on its column; clicking a new column sorts descending for numeric fields and ascending for Club, and clicking the active column reverses direction. Display the active arrow and a text summary such as Sorted by points, descending. Calculate GD from GF and GA rather than storing it separately. Highlight [BRAND]'s row with a subtle Volt left rule and the text Our club available to screen readers. On mobile keep all columns inside a labeled horizontal table-scroll region with a 680px minimum table width and a sticky first column; the page itself must not overflow. Add note: Table uses invented results for demonstration and is not connected to a league.
   Layout: A Paper table panel with 12px radius and Line border. Header row uses Chalk fill and compact uppercase labels; rows are at least 52px high with tabular numerals. Club names have a readable 180px minimum width. Below 640px show a swipe hint inside the region caption, not as page-wide overflow.
   Motion: Use 240ms row layout transitions and the active-arrow rotation. Reduced motion reorders instantly.

### Season fees and player registration (`register.html`)
1. **Fee introduction and inclusions** — Use the shared header and footer from index.html. Eyebrow: PLAYER REGISTRATION · SAMPLE FEES. H1: Know the cost before the kickoff. Intro: One clear [SEASON_FEE] season fee per player, with optional kit and a sibling discount. The demo calculates a total and saves nothing after you leave; it does not collect payment or send personal information. Inclusion cards: Training — all squad sessions led by two adults; Match registration — sample league registration and home-field costs; Club festival — one end-of-season community event. Fee facts: Base fee [SEASON_FEE] per player; optional full kit $38 each with shirt, shorts, and socks; $25 sibling discount when two players are registered together; three equal demo installments available at no extra charge. Refund note: Sample policy — full refund before team placement, 50% after the first match, then discussed case by case for injury or relocation.
   Layout: Compact Chalk hero in a 7/5 grid with the headline left and a Forest fee card right showing [SEASON_FEE] / PER PLAYER / SEASON. Below, use three equal inclusion cards and a horizontal line of fee facts. Stack on mobile.
   Motion: Standard heading and card reveals only.
2. **Validated registration form and live fee calculator** — H2: Build your demo registration. Form fields: Number of players, 1 or 2; Player 1 first name; Player 1 age group U8/U10/U12/U14 preselected from the optional team query; Experience with choices New to soccer, Some club experience, Returning player; Player 2 first name and age group shown only when two players are selected; Kit quantity select from zero to the number of players with $38 each; Payment rhythm Full season total or Three equal installments; Parent or caregiver name; Email; Best contact choice Email or Phone; optional Notes textarea with helper Do not include medical or sensitive information; required acknowledgment I understand this is a demo request and nothing will be sent. Validate required names, a plausible email, both player details when present, and acknowledgment. Show inline errors and an error summary on submit. Derive base total as player count times parsed [SEASON_FEE], kit total as kit quantity times $38, sibling discount as $25 only for two players, and grand total as base plus kit minus discount. For installment selection show three equal installments of grand total divided by three, rounded to cents, with any rounding remainder included in the final installment. Keep a visible order summary synchronized with the form. Submit button: Save demo request. Success state: Your demo request is ready. Nothing was sent, no payment was taken, and this personal information was not stored. Show a plain-text summary of players, squads, contact choice, kit, payment rhythm, discount, and total. Provide Copy summary with a local fallback, Edit request, and Start over. Do not persist personal fields in localStorage.
   Layout: Use a 7/5 grid with the form left and a sticky fee summary right. The summary lists Base, Kit, Sibling discount, Total, and selected payment rhythm with tabular figures. Inputs use visible labels and 48px minimum heights; two-column name/email and player fields collapse to one column below 640px. Success replaces the form in place and receives focus.
   Motion: Use color transitions for selected options, a 200ms reveal for Player 2 fields, and the specified success transition. Errors fade in without shaking.
3. **Registration notes and parent-guide link** — Add three concise notes: Team fit — age group is a starting point; a coach confirms placement with the family. Playing time — the sample club aims for meaningful participation in every match, not equal minutes in every situation. What happens next in a real club — connect this static request to the club's own secure registration and payment process before using it publicly. CTA: Read arrival, pickup, and safeguarding information → ./parents.html.
   Layout: A Paper three-column notes row above a Forest parent-guide strip. Stack notes on mobile and keep the CTA at least 48px high.
   Motion: Simple reveal and link-color transitions.

### Parent information and club policies (`parents.html`)
1. **Parent guide hero** — Use the shared header and footer from index.html. Eyebrow: THE PARENT GUIDE. H1: The details that make Saturday easier. Intro: Arrival, pickup, kit, weather, and who to talk to — organized for the people who make the season possible. Use parent-meeting.webp with alt 'Caregivers speaking with a coach beside a community soccer field' and object-position center 45%. Add quick links to Matchday rhythm, Kit and weather, Safeguarding, and FAQ.
   Layout: Use a 5/7 grid with copy left and a 4:3 photograph right, similar in scale to the home hero but with 48px top padding. Quick links form a wrapped chip row below the intro. On mobile place the photograph after the H1 and before the body copy.
   Motion: Standard heading and image entrance; no parallax.
2. **Matchday rhythm and what to bring** — Section id='matchday'. Eyebrow: MATCHDAY RHYTHM. H2: Arrive ready, leave together. Timeline: 40 minutes before — arrive, find the squad, and check in with the coach; 30 minutes before — cleats on, water ready, team warm-up; 10 minutes before — team talk and player positions; Kickoff — caregivers stay behind the touchline marker; After the whistle — players check out with the coach before leaving. What to pack: labeled water bottle, shin guards, appropriate cleats, weather layer, any personal medication kept with the caregiver, and a small snack for after play. Note: Coaches do not administer or store medication in this sample policy.
   Layout: Chalk section with a vertical five-stop timeline on the left spanning 7 columns and a Paper packing checklist on the right spanning 5. Keep the timeline linear on mobile with a Volt dot and Forest rail.
   Motion: Reveal timeline stops with a 60ms stagger; check marks do not animate continuously.
3. **Kit, weather, and communication** — Section id='kit'. H2: Practical answers before you need them. Three cards: Kit — the optional $38 bundle includes shirt, shorts, and socks; shin guards and cleats are supplied by the family. Weather — a real club should post cancellations through its own chosen channel; this demo has no live alert service. Do not assume a match is canceled from this page. Communication — schedule questions go to the squad coach; safeguarding concerns go privately to Nina Alvarez, the sample safeguarding lead; urgent safety issues go to local emergency services. Add a small code-drawn field diagram showing the coaching area, player warm-up side, and caregiver touchline zone; label it Original schematic, not a venue map.
   Layout: Paper section with three equal cards followed by a wide Forest panel containing the original SVG field schematic on the left and short touchline guidance on the right. Stack on mobile.
   Motion: Draw the field lines once over 450ms on reveal; show the completed diagram immediately with reduced motion.
4. **Safeguarding and touchline conduct** — Section id='safeguarding'. Eyebrow: SAMPLE CLUB POLICY. H2: Clear boundaries help everyone relax. Safeguarding points: Two adults remain present at practice; players check in and out with the coach; a caregiver names the pickup adult at arrival; coaches do not arrange private one-to-one meetings; concerns go privately to the safeguarding lead. Touchline points: cheer effort rather than instructions, never challenge a child or referee, no photographing other children without their caregiver's permission, and keep the technical area clear. Label all of this as illustrative policy text that a real club must review and replace with its own local requirements.
   Layout: A Forest section with two Paper cards, Safeguarding and Touchline conduct, each containing five concise icon-supported rows. Place the policy disclaimer below in visible small text rather than a tooltip.
   Motion: Standard card reveal only; safety content never waits behind interaction.
5. **Parent frequently asked questions** — Section id='faq'. H2: Before the first session. Six accordions with exact default answers: How early should we arrive? — Forty minutes before kickoff gives players time to check in, change, and warm up without rushing. Is playing time guaranteed? — The club aims for meaningful participation in every match, but equal minutes in every situation are not promised. What if my child is new? — Choose New to soccer on the form. Coaches introduce skills in small steps and pair new players with a welcoming buddy. What happens in bad weather? — The sample club communicates changes through its squad channel. This demo does not send alerts, so always confirm with the coach. Do we need the full kit? — No. The kit bundle is optional; suitable sportswear, shin guards, water, and appropriate footwear are the essentials. Can I take photographs? — Ask the coach first and never photograph other children without their caregiver's permission. Rewrite operational answers for a changed club while keeping the sample-policy disclaimer.
   Layout: Chalk section in a 4/8 grid with heading left and six full-width accordion rows right. Each question is a 56px minimum button with a plus icon and visible focus; only one answer needs to be open.
   Motion: Use the specified accordion transition and rotate the plus to an X. All answers remain operable with reduced motion.

## Assets
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/hero-match.webp to public/images/hero-match.webp; alt: Youth soccer players passing on a sunny community field, seen from behind; use in the home hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/training.webp to public/images/training.webp; alt: Youth players practicing a passing drill while a coach watches; use beneath Age-group squads. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/coach-maya.webp to public/images/coach-maya.webp; alt: Maya Chen, a fictional youth soccer head coach, beside a training field; use in Maya's coach card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/coach-elliot.webp to public/images/coach-elliot.webp; alt: Elliot Brooks, a fictional youth soccer coach, beside a grass field; use in Elliot's coach card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/coach-nina.webp to public/images/coach-nina.webp; alt: Nina Alvarez, a fictional goalkeeping and safeguarding coach, beside a portable goal; use in Nina's coach card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/22e25540-f0e2-4b9c-9f4e-ac74edbe218c/parent-meeting.webp to public/images/parent-meeting.webp; alt: Caregivers speaking with a coach beside a community soccer field; use in the Parent guide hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- font: Install and self-host @fontsource/barlow-condensed and @fontsource-variable/manrope, both OFL-1.1; bundle the required woff2 files locally and list both packages and licenses in ASSETS.md.
- icon: Use lucide-react (ISC) for menu, close, arrow, chevron, plus, check, clock, map-pin, users, shield, cloud-sun, shirt, whistle-compatible generic sports, copy, and mail icons; if an exact whistle icon is unavailable use CircleDot rather than drawing a branded symbol. Bundle locally with consistent 20px strokes and record the package and license in ASSETS.md.
- image: Draw the corner-flag favicon and wordmark motif, field-line details, and parent-guide field schematic as original SVG. public/favicon.svg uses a 32×32 Forest rounded square with a simple Volt flag outline and no letters. In ASSETS.md include all six photo source URLs, author VibeFather, the exact generated-image redistribution credit, both font packages, and lucide-react. No other bitmap images or maps.

## Don'ts
- Do not add a backend, API routes, database, authentication, analytics, external form submission, payment collection, live league feed, weather API, map embed, or third-party request. Filtering, sorting, calculations, validation, clipboard actions, and confirmations must run entirely in the browser.
- Do not imply that registration, payment, availability, fixture data, standings, weather alerts, or safeguarding status are live. Label sample data and demo confirmation clearly; never store registration personal data in localStorage or transmit it.
- Do not hotlink images or load scripts, styles, fonts, icons, or other runtime assets from a CDN. Download the six supplied images, self-host both fonts, and use relative local paths throughout.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than npm run build. Output index.html, fixtures.html, register.html, and parents.html with all links pointing to file names, never bare directories.
- Do not scatter editable content through components. Keep copy and records in src/content.ts, derive all brand-dependent contact details, parse [SEASON_FEE] once, and rewrite all default-only copy and data when variables change.
- Do not use real clubs, leagues, opponent teams, crests, uniforms, mascots, slogans, branded palettes, copied fixtures or standings, affiliation claims, existing-site code, exact copy, custom commercial fonts, or unique sports iconography.
- Do not use real player, coach, parent, caregiver, referee, or public-figure identities or likenesses. Youth imagery must not contain identifiable children; coach portraits are fictional placeholders, never initials-only substitutes.
- Do not add logos, sponsors, readable text, squad numbers, branded equipment, famous venues, or recognizable landmarks to generated imagery. Do not use Unsplash, Pexels, Pixabay, Google Images, CC BY-NC, CC BY-SA, placeholder services, or assets with unclear redistribution rights.
- Do not fabricate verified results, accreditation, safeguarding certification, reviews, membership counts, or guarantees of playing time or player development. All clubs, people, credentials, records, fees, and policies are invented illustrative content.
- Do not show calendar dates or years anywhere. Use Matchday numbers, weekdays, and times for the sample schedule; do not introduce a countdown, live timestamp, or copyright year.
- Do not mention VibeFather or its own pricing, licensing, metrics, or membership inside the site UI except the optional [CREDIT] footer link. All site copy, labels, sample data, and alt text are original US English.
- Do not leave decorative or dead controls. Mobile navigation, squad-to-registration preselection, fixture filters, reset, every standings sort, registration calculations and conditional fields, validation, copy, edit, reset, quick links, and accordions must all work with keyboard and touch.
- Do not compromise accessibility or responsiveness: no horizontal page overflow at 390px, no hover-only information, no color-only result states, no unlabeled form fields or icon buttons, no focus traps, and no console errors at 390×844 or 1440×900. Keep the mobile standings table inside its own labeled scroll region.
- Do not ignore prefers-reduced-motion, hide core content behind animation, add autoplay carousels or parallax, or introduce 3D, smooth scrolling that cannot be disabled, fake urgency, lorem ipsum, or generic sports slogans.

---
— Prompt by VibeFather · https://vibefather.ai/t/youth-sports-club-website · 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.