The live demo was built from exactly this text — nothing added.

# Esports Team Website

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

## Brief
Build a complete original esports organization website for [BRAND], competing in [DISCIPLINE] from [HOME_CITY] during the [SEASON_NAME]. Use [TEAM_CODE] as the short team code. Deliver a cinematic home page plus roster, matches, shop, and news hash routes. All team members, opponents, sponsors, competition names, products, headlines, statistics, and stories are invented. Keep every variable value, navigation label, player record, match record, product, sponsor, story, UI string, and alt text in src/content.ts. When variable values change, rewrite the entire content set to form a coherent new organization rather than merely replacing the header name.

- Audience: Esports teams, gaming collectives, creator squads, community tournament organizations, and their fans, players, partners, and merchandise customers.
- Goal: Give fans a fast way to understand the team, inspect the roster and stats, follow fixtures and results, read original team stories, discover invented partners, and assemble a merchandise order in a working local demo cart.
- Tone: Focused, competitive, precise, and editorial. Use short declarative copy about preparation, teamwork, rounds, maps, and recovery. Avoid aggressive trash talk, gambling language, empty superlatives, fake live activity, and generic startup language.

## Stack
- Framework: Vite 5 + React 18 + TypeScript 5
- Styling: Tailwind CSS 3.4
- Libraries: react 18.3.1 (MIT), react-dom 18.3.1 (MIT), motion 11 (MIT), lucide-react (ISC), tailwindcss 3.4 (MIT), @fontsource/barlow-condensed (OFL-1.1), @fontsource/inter (OFL-1.1), @fontsource/jetbrains-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Configure Vite with base: './', build.outDir: 'dist', build.sourcemap: false, and emptyOutDir: true; use one index.html entry and no server code.
  - Implement a small typed hash router with window hashchange events. Routes are home, #/roster, #/matches, #/shop, and #/news; all navigation hrefs use ./index.html or ./index.html#/route, and an unknown hash returns to home.
  - Configure Tailwind with the colors and font families from Design. Put clipped-corner utilities, keyframes, focus styles, reduced-motion overrides, and custom scrollbar styling in src/index.css.
  - Import only the specified local Fontsource weights in src/main.tsx. Do not use a font CDN.
  - Create src/content.ts as the single content source. Export a content factory that accepts the five variables and returns fully rewritten team, roster, match, sponsor, product, story, navigation, and UI content.
  - Download the six generated photographs into public/images before running the app, reference them through relative local paths, and create ASSETS.md at the project root with every source and credit.
  - Use Motion's React API for entrance, layout, modal, drawer, and route transitions. Use lucide-react for interface icons only; draw the team mark, sponsor marks, stat bars, and product illustrations as original inline SVG or CSS.
  - Keep cart contents, selected variants, and dismissed UI preferences in localStorage where useful. No cart, filter, drawer, accordion, or checkout control may be decorative or nonfunctional.

## Variables
- [BRAND] — Team name (default: "Static Vale"). Invented esports organization name used throughout the site.
- [TEAM_CODE] — Short team code (default: "STV"). Three uppercase letters for score bugs, jersey art, and compact labels.
- [DISCIPLINE] — Competitive discipline (default: "Tactical arena"). A generic or invented competition category, never a real game title.
- [HOME_CITY] — Home city (default: "Rotterdam"). The team's base, used in the hero and footer.
- [SEASON_NAME] — Season or series name (default: "Meridian Open"). An invented season or competition name for the schedule and news.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/esports-team-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
- Void `#080A0B` — Page background and the darkest footer surface.
- Carbon `#111517` — Cards, drawers, navigation, and alternating content bands.
- Steel `#2A3134` — One-pixel rules, table borders, stat tracks, and disabled states.
- Chalk `#F3F6EF` — Primary headings, scores, and high-emphasis text.
- Mist `#98A39F` — Secondary copy and metadata; use at readable sizes on Void or Carbon.
- Volt `#C8FF3D` — The single electric accent for calls to action, active filters, selected stats, and thin lighting details.

### Typography
- Display and scores: Barlow Condensed (OFL), weights 600/700/800
- Body and interface: Inter (OFL), weights 400/500/600
- Statistics, labels, and match metadata: JetBrains Mono (OFL), weights 400/500/600

### Layout & motion
- Spacing: Use a 12-column grid with a 1440px maximum content width, 48px desktop gutters, 20px mobile gutters, and 24px desktop grid gaps. Major sections have 112px desktop and 72px mobile vertical padding. Card padding is 28px desktop and 20px mobile. Keep data rows compact at 64–76px high and body measure below 68 characters.
- Radius: Use square corners with one 18px clipped top-right corner on major image cards and a 10px clipped bottom-left corner on small data panels. Buttons have 2px radii, modal drawers have none, and only tiny status chips may be fully rounded. Never soften the design into generic rounded cards.
- Motion: On initial home load, reveal the hero headline in two masked lines over 560ms, fade the eyebrow and calls to action after a 100ms stagger, and ease the arena image from scale 1.045 to 1 over 900ms.
- Motion: Reveal section headings and card groups with Motion whileInView using 24px upward travel, 480ms duration, and 70ms child stagger; trigger once at 18% visibility.
- Motion: Run the sponsor strip as a slow seamless 28-second marquee and pause it on hover or keyboard focus. Do not marquee navigation, match data, or essential copy.
- Motion: On roster hover or focus, slide the portrait 6px upward and reveal a compact stat rail; on selection, open the player detail drawer with a 240ms horizontal transition and shared focus management.
- Motion: Use 180ms fade-and-8px route transitions, 200ms accordion height transitions, and 240ms cart and product drawers. Respect prefers-reduced-motion by removing transforms, smooth scrolling, parallax, counting effects, and marquee movement while preserving every final visible state.
- Imagery: Use exactly six supplied AI-generated photographs as one coherent fictional team shoot: one wide arena group image and five individual 3:4 player portraits. All feature plain black performance apparel, charcoal haze, teal-black shadows, subtle acid-lime rim light, realistic editorial photography, and no text or logos. The wide hero is a spacious group scene, never a tight face close-up. Crop individual portraits consistently at mid-torso on desktop and slightly higher on mobile. Reuse the group image or portraits in selected news cards rather than adding unrelated stock. Draw all merchandise as polished original black-and-volt SVG product illustrations and draw simple abstract sponsor marks in code. Every team portrait is a fictional placeholder, never an initials-only substitute or a real person's likeness.

## Pages & Sections
### Home (`index.html`)
1. **Global header and announcement rail** — A 34px top rail reads 'NEXT / [TEAM_CODE] vs Iron Union / SAT 19:00 CET' and links to ./index.html#/matches. The 76px main header contains an original three-slash team mark, [BRAND], and links labeled Home, Roster, Matches, Shop, News. The active route gets a volt underline. A cart button shows the live item count and opens the shop cart drawer. On mobile, use a 64px header with a Menu button that opens a full-width accessible navigation drawer below the header.
   Layout: Sticky at the top above a Void background with a Steel bottom border and opaque Carbon background; no translucent glass. Desktop navigation is horizontal. Mobile navigation is hidden until requested, traps no scroll after closing, and closes on route selection or Escape.
   Motion: The announcement rail enters with a 12px fade; the mobile drawer and cart count use short Motion transitions without delaying navigation.
2. **Cinematic team hero** — Eyebrow: '[HOME_CITY] / [DISCIPLINE]'. The oversized H1 is '[BRAND]' followed by the outlined second line 'NO QUIET ROUNDS.' Supporting copy: 'Five players. One read. Patient setups, decisive finishes, and every round accounted for.' Primary CTA 'Meet the roster' links to ./index.html#/roster; secondary CTA 'Match center' links to ./index.html#/matches. Add a compact next-match panel labeled 'NEXT SERIES', '[TEAM_CODE] vs IRU', 'Meridian semifinal / Best of 3', and 'Saturday / 19:00 CET'.
   Layout: Minimum height 740px at 1440×900 including the header offset. The wide hero-arena image occupies columns 5–12 and the full hero height with an angular left mask and a dark gradient protecting the copy. Headline and copy occupy columns 1–7 and overlap the image edge slightly. Set [BRAND] at 152px/0.82 with 700 weight and 'NO QUIET ROUNDS.' at 74px; on mobile use 64px and 42px. Put the next-match panel at the lower right on desktop and directly below the CTAs on mobile. Ensure the group photograph is visible within the first mobile viewport by placing it behind the lower half rather than below all copy.
   Motion: Use the specified masked headline and image-scale entrance. Add only a subtle image translation tied to the first 400px of scroll; remove it for reduced motion and on small screens.
3. **Season numbers** — Four exact default metrics: '12–4 / SERIES RECORD', '68% / MAP WIN RATE', '1.18 / TEAM K/D', '14 / CLUTCH WINS'. Add the note 'Local sample data for the [SEASON_NAME].' rather than implying a live data connection.
   Layout: A bordered four-column band directly after the hero, with 64px condensed scores and mono labels. Use two columns on mobile and keep the note full width.
   Motion: Reveal each metric with the section stagger; do not use long count-up animations or fake realtime updates.
4. **Featured roster** — Heading 'Five ways to win a round.' Copy: 'Different instincts, one shared playbook.' Show Kestrel / IGL, Mako / Entry, and Sable / Flex as the three featured players, with jersey numbers 01, 14, and 07 and their respective player photographs. Each card includes one signature stat: Kestrel '72% KAST', Mako '58% opening duels', Sable '1.16 K/D'. CTA: 'Full roster'.
   Layout: Section heading spans four columns and cards span the remaining area in a three-card row. Use 3:4 clipped portrait frames, a number watermark, role label, handle, and stat rail. On mobile use a horizontal snap carousel with 82vw cards, visible next-card peek, scroll buttons, and no hidden roster content.
   Motion: Portrait and stat-rail hover behavior follows Design. Carousel controls use native smooth scrolling only when reduced motion is not requested.
5. **Match center preview** — Heading 'The next test. The last receipt.' Upcoming: '[TEAM_CODE] vs Iron Union', 'Semifinal / Best of 3 / Saturday 19:00 CET'. Latest result: '[TEAM_CODE] 2–1 Ochre Labs', map scores 'Array 13–9 / Causeway 8–13 / Foundry 13–7', and 'Mako 1.42 series rating'. CTA 'All fixtures & results'.
   Layout: Two unequal panels: upcoming fixture spans seven columns with oversized team codes and a volt NEXT chip; latest result spans five with a compact map table. Stack on mobile with the score visible without horizontal scrolling.
   Motion: Hovering the latest result highlights the deciding map row; panels reveal with the shared section timing.
6. **Invented partner strip** — Label 'BUILT WITH OUR PARTNERS'. Show five fictional sponsor names: Brivo Chairs, Zestfuel, Loam Coffee, Twill Hardware, and Aster Mobility. Give each a different simple original geometric mark drawn in SVG, with no existing brand resemblance. Include a static 'Partnership enquiries' mailto link using hello@[brand-slug].example so no real message is sent.
   Layout: Two identical groups inside an overflow-hidden marquee rail for wide screens; each partner is a 220px cell with abstract mark and text. On narrow screens or reduced motion, show a static two-column wrapping grid without duplicated accessible content.
   Motion: Slow seamless marquee on capable desktop clients; pause on hover or focus and disable under reduced motion.
7. **Merchandise preview** — Heading 'The off-map uniform.' Copy: 'Heavy cotton, quiet branding, and room for long LAN days.' Show four products: Home Jersey €64, Scrim Hoodie €72, Static Cap €28, and Team Scarf €24. Use original SVG product illustrations, not photographs. Each card has a working Quick view button and an Add button that chooses the default size and opens the cart. CTA 'Shop all six pieces'.
   Layout: Four equal cards with 4:3 product-art areas, mono product numbers 01–04, name, price, and color label. Use a two-column mobile grid with stacked button labels that fit at 390px.
   Motion: Product art shifts no more than 8px on hover; quick view and cart use accessible Motion drawers.
8. **Latest team stories** — Heading 'Notes from inside the round.' Feature 'Five maps, one calm finish' with the dek 'The timeout that helped [BRAND] stop chasing and start trading.' Secondary stories: 'Inside our 40-minute reset routine' and 'A home kit built for long LAN days'. Include labels Matches, Culture, and Team respectively, plus '6 min read', '4 min read', and '3 min read'.
   Layout: Featured story spans seven columns and uses a cropped hero-arena image; two stacked story rows span five with small player-image crops or original code-drawn diagrams. Stack on mobile. Every Read story control links to ./index.html#/news and identifies which story to expand through local content state.
   Motion: Use image-mask reveals once and a subtle arrow translation on link hover.
9. **Global footer** — Large statement 'STAY READY.' followed by '[BRAND] / [HOME_CITY]'. Include the five route links, a Contact link using hello@[brand-slug].example, and a compact text line 'Independent [DISCIPLINE] team competing in the [SEASON_NAME].' Add the optional [CREDIT] footer link only where the renderer supplies it. Do not add social icons with dead destinations or a fake newsletter form.
   Layout: Void footer with a Steel top border, huge condensed statement across eight columns, and two small link columns. On mobile the statement wraps safely and links become a two-column grid.
   Motion: No continuous animation; reveal the statement once with a masked line.

### Roster (`#/roster`)
1. **Roster introduction** — Eyebrow 'ACTIVE FIVE / [SEASON_NAME]'. H1 'Different instincts. One read.' Intro: 'Meet the five players behind [BRAND], their roles, and the numbers that shape a series.' Add a compact legend explaining KAST as 'rounds with a kill, assist, survival, or trade' and K/D as 'kill-death ratio'; if [DISCIPLINE] changes, replace these with suitable fictional metrics and explanations.
   Layout: A 5/7 split header with an outlined '05' roster count on the right. Keep the heading at 84px desktop and 52px mobile, with the metric glossary in two short rows beneath.
   Motion: Shared heading reveal; the roster count draws in with a 300ms opacity transition.
2. **Role filters and complete player grid** — Provide filter buttons All, IGL, Entry, Flex, Support, and Anchor with live result counts. Default players: Kestrel / Mara Voss / #01 / IGL / player-kestrel image / 72% KAST / 1.08 K/D / 14 clutches; Mako / Jae Park / #14 / Entry / player-mako image / 58% opening duels / 1.24 K/D / 186 damage per round; Sable / Luis Serrano / #07 / Flex / player-sable image / 69% KAST / 1.16 K/D / 7.8 round impact; Tinker / Amara Okafor / #22 / Support / player-tinker image / 76% KAST / 0.96 K/D / 31% assist rate; Vexa / Elias Nyström / #09 / Anchor / player-vexa image / 71% KAST / 1.11 K/D / 18 site holds. Label all values as invented season sample data.
   Layout: Filter row sits above a responsive three-column card grid; the final two cards align to the grid rather than stretching. Each clipped card contains the portrait, number, handle, full name, role, and two visible metrics. Filtering updates immediately with an aria-live count. Mobile is one column with 3:4 images no taller than 460px.
   Motion: Animate card layout changes with Motion layout transitions, preserve focus on the active filter, and show all cards immediately under reduced motion.
3. **Player detail drawer** — Selecting a player opens a right-side drawer with the same portrait, handle, name, role, number, a two-sentence biography, four labeled stat bars, and three recent performances. Kestrel's bio: 'Mara calls the early round slowly and the final twenty seconds fast. She tracks opponent utility with a handwritten three-color system.' Mako's bio: 'Jae creates the first opening and calls his own timing. He reviews every lost entry before watching a single highlight.' Sable's bio: 'Luis moves between second entry and late-round anchor. His calm mid-round calls keep the playbook flexible.' Tinker's bio: 'Amara builds rounds around information and well-timed support. She also runs the team's replay tagging library.' Vexa's bio: 'Elias prefers patient holds and narrow crossfires. He leads the final ten-minute defensive walkthrough before every match.' Recent performances use plausible local map names and scores from content.ts. Include Previous and Next player controls.
   Layout: Desktop drawer is 520px wide and full height; mobile is a full-width bottom sheet capped at 92vh with internal scrolling. Use a visible Close button, focus trap, Escape support, backdrop click, restored trigger focus, and inert background while open.
   Motion: Slide 24px with a 240ms fade rather than sweeping across the entire viewport; stat bars fill once to their values and stay visible with reduced motion.
4. **Team principles** — Three short principles: '01 / Trade before heroics — The second player matters more than the highlight.' '02 / Say the useful thing — Information first, volume second.' '03 / Review without theater — One lesson, one owner, one next drill.' CTA 'See how the season is going' links to matches.
   Layout: Three bordered columns beneath the roster with oversized mono numbers and 18px body copy. Stack with 20px gaps on mobile.
   Motion: Simple group reveal with no additional interaction.

### Matches (`#/matches`)
1. **Season header** — Eyebrow '[SEASON_NAME] / MATCH CENTER'. H1 'Every round leaves a trace.' Copy: 'Upcoming fixtures, final scores, and the map-by-map story.' Show summary chips '12–4 series', '34 maps played', '6 finals reached'. Mark all data as local season samples; never label a static entry LIVE unless the content editor deliberately sets that state.
   Layout: Wide editorial header with the H1 on seven columns and summary chips in a three-column rail on five columns. Chips become a horizontal wrapping row on mobile.
   Motion: Shared heading and chip stagger only.
2. **Fixture and result filters** — Buttons All, Upcoming, and Results filter six matches. Upcoming entries: [TEAM_CODE] vs Iron Union / IRU / Semifinal / Saturday 19:00 CET / Best of 3; [TEAM_CODE] vs Drift Nine / DFN / Lower final / Next Friday 18:30 CET / Best of 3. Results: [TEAM_CODE] 2–1 Ochre Labs / OCH / Week 6; [TEAM_CODE] 2–0 North & Neon / NNN / Week 5; [TEAM_CODE] 1–2 Drift Nine / DFN / Week 4; [TEAM_CODE] 2–0 Boro Five / BR5 / Week 3. Include local timezone labels and no auto-refreshed scores.
   Layout: A segmented filter row with result count precedes full-width match rows. Each row uses a 120px status column, flexible fixture column, 120px format column, and a Chevron button. On mobile rearrange into status and score on top, fixture and metadata below, with no table overflow.
   Motion: Use short list updates and preserve keyboard focus. Expanded rows animate height once and never hide content after animations complete.
3. **Expandable match details** — Upcoming rows expand to show 'Map pool: Array, Causeway, Foundry', 'First pick: Array', and a short scouting note written for that opponent. Completed rows show map scores and three player ratings. The Ochre Labs series uses Array 13–9, Causeway 8–13, Foundry 13–7 with Mako 1.42, Kestrel 1.18, and Vexa 1.09. North & Neon uses Array 13–6 and Foundry 13–11. Drift Nine loss uses Causeway 11–13, Array 13–10, Foundry 9–13. Boro Five uses Array 13–4 and Foundry 13–8. A 'Download match card' button creates a plain-text local file containing the visible fixture and score data, not a dead share link.
   Layout: Expanded content sits inside the same bordered row, with a three-column map table and a scouting or review column. On mobile each map becomes a compact two-line score block. Download uses a secondary button below the detail grid.
   Motion: Chevron rotates 180 degrees; detail rows fade after height expansion and remain readable with reduced motion.
4. **Preparation note** — Heading 'The plan fits on one page.' Copy: 'Three likely maps. Two opponent habits. One reset word if the round gets loud.' Add a small original SVG bracket diagram using only invented team codes from content.ts; it is informational, not a prediction widget.
   Layout: Two-column Carbon band with copy on four columns and the diagram on eight. On mobile the diagram remains fully visible with labels at least 12px.
   Motion: Draw diagram lines once using opacity and stroke length; show the final diagram immediately under reduced motion.

### Shop (`#/shop`)
1. **Shop introduction** — Eyebrow 'TEAM GOODS / SIX PIECES'. H1 'Built for the long day.' Copy: 'Heavy fabrics, practical layers, and an original [TEAM_CODE] slash mark. Every product is a fictional demo item.' Show a small fulfillment note 'Demo store / no payment is collected'.
   Layout: Editorial 7/5 split with an original folded-jersey SVG composition on the right, using black fabric, volt piping, and the abstract three-slash mark. On mobile the artwork remains at least 240px tall below the copy.
   Motion: Product-art layers separate by 8px on entrance, then remain still.
2. **Product filters and merchandise grid** — Filter All, Wear, and Accessories with live counts. Six products: Home Jersey / Wear / €64 / sizes XS–XL / recycled performance knit; Scrim Hoodie / Wear / €72 / sizes S–XXL / 420gsm brushed cotton; Arena Overshirt / Wear / €88 / sizes S–XL / cotton ripstop; Static Cap / Accessories / €28 / adjustable / washed twill; Team Scarf / Accessories / €24 / one size / double-sided knit; LAN Duffel / Accessories / €58 / 32 liter / recycled canvas. Every card uses a distinct polished inline SVG product view, color and material labels, price, Quick view, and Add button.
   Layout: Three-column product grid with 4:3 Carbon art panels and a one-pixel Steel border. Use original angular folds and subtle SVG shading, not empty rectangles or remote product photos. Two columns on mobile, collapsing to one below 350px; buttons remain usable at 390px without text clipping.
   Motion: Filtering uses layout animation and the product art translates at most 8px on hover. Add confirms with a small check icon and opens the cart.
3. **Product quick view** — Quick view opens the large product illustration, name, price, material, fit note, size selector, quantity stepper, and Add to cart. Fit notes are specific: jersey 'athletic unisex cut', hoodie 'relaxed drop shoulder', overshirt 'boxy layer with two chest pockets', cap 'six-panel adjustable back', scarf '160cm double-sided knit', duffel '32 liters with a separate shoe pocket'. No fake stock countdown or crossed-out sale price.
   Layout: Right drawer at 520px desktop and full-width bottom sheet on mobile. Product art occupies 280px, followed by scrolling details and a sticky Add button. Support Escape, focus trap, backdrop close, and restored trigger focus.
   Motion: Use a 240ms drawer entrance and immediate visible controls under reduced motion.
4. **Persistent cart and mock checkout** — Cart rows include product, size, unit price, quantity controls, remove action, subtotal, and free-demo-shipping line at €0. Checkout is a two-step local interaction: first a validated contact form with email and country fields, then an order review and 'Place demo order' button. Completion says 'Demo order saved in this browser. No payment was taken and no email was sent.' Generate an order reference locally and offer 'Clear demo order'. Never send or imply sending the data anywhere.
   Layout: Cart is a right drawer with a scrollable item area and sticky totals. Checkout replaces drawer content while keeping a Back to cart control. Empty state contains 'Your kit bag is empty' and a working Continue shopping button. Mobile uses full width and 44px controls.
   Motion: Rows animate removal without collapsing other controls; checkout panels crossfade over 180ms and reduced motion removes transforms.
5. **Product care band** — Three notes: 'Cold wash / Turn printed pieces inside out.', 'Carry more / The duffel fits a keyboard sleeve and headset.', 'Repair first / Spare snaps ship with the overshirt.' Add a small size-fit note rather than fake reviews.
   Layout: Three equal bordered columns below the grid with Lucide icons beside concise text. Stack on mobile.
   Motion: One group reveal only.

### News (`#/news`)
1. **Newsroom introduction and filters** — Eyebrow 'TEAM JOURNAL / NOTES FROM THE SERVER ROOM'. H1 'What happened. What we learned.' Copy: 'Match reviews, preparation notes, and the working life behind [BRAND].' Filter All, Matches, Culture, and Team with live counts. Four stories: 'Five maps, one calm finish' / Matches / 6 min read; 'Inside our 40-minute reset routine' / Culture / 4 min read; 'A home kit built for long LAN days' / Team / 3 min read; 'Scrim notes: defending the split' / Matches / 5 min read.
   Layout: Header spans eight columns with filter controls directly underneath. On mobile filters wrap into two rows and remain at least 40px tall.
   Motion: Shared heading reveal and short filter transitions.
2. **Story index** — Feature the first story with dek 'The timeout that helped [BRAND] stop chasing and start trading.' Use the arena group image. Story two dek: 'A repeatable routine for noisy venues, delayed starts, and lost openings.' Use the Kestrel portrait. Story three dek: 'Why the final pattern uses three slashes and almost no branding.' Use an original code-drawn jersey detail. Story four dek: 'Three small adjustments from a week of replay reviews.' Use the Vexa portrait. Every story has a working Read story button, label, and read time.
   Layout: Featured story is a wide 7/5 image-and-copy row. The other three form a three-column grid with consistent 16:10 image crops. Mobile is one column. Do not use dead article URLs.
   Motion: Image masks reveal once and the selected story moves smoothly into the reader only when motion is allowed.
3. **Inline article reader** — Display the first story by default below the index so the route never opens an empty detail state. Selecting Read story updates this reader and scrolls its heading into view. Each story has a unique title, dek, three original paragraphs of 70–110 words each, and one pull quote stored in content.ts. Story one covers a tactical timeout, a lost middle map, and the decisive final round; pull quote: 'We stopped asking for a hero round and started asking for the next trade.' Story two covers hydration, a ten-minute aim warmup, role-specific review, and five minutes without screens; pull quote: 'The routine is ordinary so the match does not have to be.' Story three covers fabric tests, travel washing, and the original three-slash mark; pull quote: 'The kit had to work after the arena lights went off.' Story four covers replay tags, defensive spacing, and one drill repeated across three scrims; pull quote: 'A useful note names the next action.' End with Previous story and Next story controls.
   Layout: Article is centered at 720px with 20px body text, 1.7 line height, a volt pull-quote rule, and a bordered story-navigation row. Keep the story index above it for easy selection. On mobile use 18px body text and 20px gutters.
   Motion: Crossfade the article body over 180ms without animating each paragraph individually. Focus the article heading after selection and respect reduced motion.

## Assets
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/hero-arena.webp to public/images/hero-arena.webp. Use for the home hero, featured match story, and selected editorial crops. Alt: 'Five fictional [BRAND] players standing together in a dark arena tunnel.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. List the local path, exact source URL, VibeFather as generator, and this exact credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/player-kestrel.webp to public/images/player-kestrel.webp. Use on Kestrel's roster card, player drawer, home roster preview, and reset-routine story. Alt: 'Kestrel, fictional [BRAND] in-game leader, in a black team jersey.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record the path, source URL, generator, and exact credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/player-mako.webp to public/images/player-mako.webp. Use on Mako's roster card, player drawer, and home roster preview. Alt: 'Mako, fictional [BRAND] entry player, in a black team jersey and cap.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record the path, source URL, generator, and exact credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/player-sable.webp to public/images/player-sable.webp. Use on Sable's roster card, player drawer, and home roster preview. Alt: 'Sable, fictional [BRAND] flex player, in a black team jersey.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record the path, source URL, generator, and exact credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/player-tinker.webp to public/images/player-tinker.webp. Use on Tinker's roster card and player drawer, plus editorial thumbnails if needed. Alt: 'Tinker, fictional [BRAND] support player, in a black team jersey.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record the path, source URL, generator, and exact credit in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/d4c68bea-b954-48e3-858a-850cab503040/player-vexa.webp to public/images/player-vexa.webp. Use on Vexa's roster card, player drawer, and defending-the-split story. Alt: 'Vexa, fictional [BRAND] anchor, in a black team jersey.' Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record the path, source URL, generator, and exact credit in ASSETS.md.
- icon: Install lucide-react and use Menu, X, ShoppingBag, ArrowUpRight, ChevronDown, ChevronLeft, ChevronRight, Plus, Minus, Check, Download, and ArrowLeft icons at 18–22px with 1.75px strokes. Do not use brand icons. Draw the original three-slash team mark, abstract sponsor marks, stat bars, bracket, and all six merchandise illustrations as inline SVG or CSS. Credit Lucide's ISC license in ASSETS.md; original code-drawn artwork needs no external source.
- font: Self-host Barlow Condensed 600/700/800 through @fontsource/barlow-condensed, Inter 400/500/600 through @fontsource/inter, and JetBrains Mono 400/500/600 through @fontsource/jetbrains-mono. Import the exact weight CSS files locally and record all three packages and their OFL-1.1 licenses in ASSETS.md.

## Don'ts
- Do not use any backend, server logic, API routes, database, authentication, remote form submission, analytics, third-party API, or live score service. The build must be static files in dist/ and all interactions must run locally.
- Do not load scripts, styles, fonts, images, icons, video, or other assets from CDNs or remote runtime URLs. Download the six supplied photographs and self-host the specified Fontsource fonts.
- Do not use real esports teams, player handles, people's likenesses, team histories, existing sponsor brands or slogans, game publisher logos, game characters, weapon artwork, recognizable in-game scenes, trademarked leagues, trophy designs, or broadcast graphics.
- Do not copy website code, copy, photography, merchandise designs, headlines, statistics, icons, mascots, or emblem designs from an existing organization. Keep the team, competition, opponents, sponsors, products, and stories fictional and original.
- Do not use Unsplash, Pexels, Pixabay, Google Images, Simple Icons, CC BY-NC or CC BY-SA assets, commercial fonts, restricted component-library source, or placeholder-image services.
- Do not replace the supplied portraits with initials circles, silhouettes, unrelated stock, or extra generated people. Do not put text, logos, recognizable individuals, game characters, or branded equipment inside the photographs.
- Do not use bare directory links or path-based client routes that break on static hosting. Every navigation target must be ./index.html or ./index.html#/roster, #/matches, #/shop, or #/news as appropriate, and unknown hashes must recover to home.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemap code, keyword blocks, or heading-hierarchy instructions. Use only a plain document title containing [BRAND] and an original local favicon.
- Do not ship source maps, copy src/ into dist/, exceed 20 MB, or leave console errors at 1440×900 and 390×844. Use relative asset paths and keep all copy in US English.
- Do not ignore prefers-reduced-motion, hide essential content behind animation, or allow motion to block reading and controls. Marquees stop for reduced motion and all final states are immediately visible.
- Do not create dead buttons, placeholder social links, fake newsletter success, fake payment, fake email delivery, fake inventory pressure, or fake live activity. Filters, player details, match expansion, downloads, quick views, variants, quantities, cart, and mock checkout must work and honestly identify local-only behavior.
- Do not turn the layout into generic rounded cards, blue-purple gradients, glassmorphism, excessive glow, or a typography-only hero. Preserve the dark editorial sports grid, clipped corners, single volt accent, prominent arena image, and consistent player portraits.
- Do not hard-code the default team identity outside src/content.ts or leave Static Vale-specific copy when variables change. Rewrite names, codes, opponents, products, statistics, stories, alt text, and sample data as one coherent content set.

---
— Prompt by VibeFather · https://vibefather.ai/t/esports-team-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.