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

# Event Venue Website

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

## Brief
A single-page site for [VENUE], an event venue in [CITY] known for [STYLE_NOTE], noise curfew [CURFEW]. It must sell the space: three rooms with capacity tables, an interactive seating floor plan (banquet/classroom/cocktail modes redrawn live), a six-photo gallery, three packages, a client-side availability enquiry, a manager portrait (AI-generated fictional person), and a logistics strip. One page: index.html with sections (#spaces, #plan, #gallery, #packages, #enquire). Everything runs in the browser; nothing is submitted anywhere.

- Audience: Couples and corporate event planners shortlisting three venues on a Sunday afternoon. They compare capacity, cost per hour and photos of the room full — the floor plan answers 'will my 120 fit'.
- Goal: Produce enquiries. Within ten seconds a visitor sees the main hall set and the enquiry CTA; within two minutes they've switched floor-plan modes and checked their headcount.
- Tone: Host-confident: precise numbers, warm specifics, zero wedding-industry gush. One dry line about the curfew.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (MIT), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource/cormorant-garamond (OFL-1.1), @fontsource-variable/jost (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One HTML page at the project root: index.html (entry src/main.tsx).
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (gallerywhite, linen, card, charcoal, charcoal-deep, ink, stonegray, champagne, champagne-deep, rule, good) and fontFamily display ['Cormorant Garamond', 'Georgia', 'serif'], sans ['Jost Variable', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 4px and add maxWidth { container: '1240px' }.
  - In src/fonts.ts import '@fontsource/cormorant-garamond/500.css', '@fontsource/cormorant-garamond/600.css', '@fontsource/cormorant-garamond/500-italic.css' and '@fontsource-variable/jost'; import src/fonts.ts and src/index.css from the entry file.
  - File layout: src/content.ts (every string, capacity, package, hour, spec and image path, typed), src/lib/brand.ts (venueSlug = [VENUE] lowercased with every run of non-alphanumeric characters replaced by '-', emailDomain = venueSlug without hyphens + '.com', phoneDigits for tel:), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with venueSlug + ':'), src/lib/layouts.ts (layoutFor(spaceSlug, mode) → { tables, rows, capacity, dancefloor } — deterministic seating math per mode used by the SVG plan).
  - State: src/store/enquiry.ts is a tiny external store (useSyncExternalStore) holding { space, mode, guests, window, type, name, email, sent } persisted to localStorage key venueSlug + ':enquiry'.
  - Components in src/components/: Header.tsx, Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, Footer.tsx; Hero.tsx, Spaces.tsx (SpaceCard.tsx with CapacityTable.tsx), FloorPlan.tsx (ModeSwitch.tsx, PlanSVG.tsx, CapacityReadout.tsx), Gallery.tsx (Lightbox.tsx), Packages.tsx (TierCard.tsx), ManagerNote.tsx, EnquiryForm.tsx (GuestsStepper.tsx, WindowChips.tsx, SentCard.tsx), Logistics.tsx. src/pages/Home.tsx composes them.
  - The FloorPlan is hand-rolled inline SVG: each space drawn to scale (the Main Hall as a warehouse rectangle with mezzanine line, the Gallery as an L, the Parlor as a smaller rect); mode switch animates table blocks (Motion layout, 400ms glide) and the CapacityReadout counts to the new capacity; a legend explains banquet rounds of 10, classroom rows, cocktail clusters.
  - Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
  - public/favicon.svg as described under Assets. index.html: lang en, <meta name='theme-color' content='#FAF8F4'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[VENUE] — An event venue in [CITY]</title>.
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds index.html, hashed JS/CSS, the woff2 fonts, favicon.svg and the six images. Keep it under 10 MB.

## Variables
- [VENUE] — Venue name (default: "The Foundry Hall"). Invented venue name. Used in the wordmark, title, footer, email (events@ + venueSlug without hyphens + '.com') and localStorage keys. Never a real venue.
- [CITY] — City (default: "Providence, Rhode Island"). Where the venue is. Used in the title, hero, logistics and footer. Real cities fine; street invented.
- [STYLE_NOTE] — Style note (default: "warehouse light and long dinners"). One lowercase phrase naming what the venue is loved for. Drives the hero line and one package line.
- [CURFEW] — Noise curfew (default: "midnight"). The amplified-music cutoff as a time word ('midnight', '11pm'). Used in the logistics strip and one dry FAQ-free line. Keep it short.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/event-venue-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
- Gallery White `#FAF8F4` — Page background throughout.
- Linen `#F0EBE1` — Alternate section background (Spaces, Packages), chips, hover fill.
- Card `#FFFFFF` — Space cards, tier cards, the enquiry panel, lightbox chrome.
- Charcoal `#2B2926` — Headlines and body ink, footer background, photo overlays (as rgba(43,41,38,x)).
- Charcoal Deep `#1E1C1A` — Hover surfaces, hero overlay ink.
- Stone Gray `#6E6A61` — Secondary text, captions, eyebrows, disabled states.
- Champagne `#C2A265` — The one accent: primary buttons, capacity figures, selected mode, focus ring, plan table fills.
- Champagne Deep `#A3853F` — Hover and pressed states.
- Rule `#E2DCCF` — 1px hairlines, card borders, input borders, plan grid lines.
- Good `#3E8E6D` — Availability ticks, sent check, logistics icons.

### Typography
- Display: H1, H2, H3, space names, capacity figures, the wordmark — Cormorant Garamond, gallery-elegant: Cormorant Garamond (OFL), weights 500/600
- Text and UI: body, eyebrows, buttons, forms, captions; tabular numerals for capacities and hours: Jost (OFL), weights 400/500/600

### Layout & motion
- Spacing: 8px base unit. Container max-width 1240px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 108px desktop, 80px under 1024px, 62px under 640px — galleries breathe. Type scale: H1 clamp(46px, 6.8vw, 88px) Cormorant 500, line-height 1.04; H2 clamp(30px, 4vw, 50px) Cormorant 500; H3 22px Cormorant 600; capacity figures Cormorant 600 34px Champagne tabular; lead Jost 400 17.5px / 1.65 Charcoal at 88%; body 15.5px / 1.7 (max-width 62ch); eyebrow Jost 600 12px uppercase letter-spacing 0.2em Stone Gray; caption 13px Stone Gray. Buttons: height 52px, Jost 600 13.5px uppercase letter-spacing 0.08em. Primary: Champagne fill, Charcoal text. Secondary: 1px Charcoal/40% border. Inputs: height 50px, 1px Rule border, Card fill, focus Champagne border. Focus ring everywhere: 2px Champagne outline with 3px offset.
- Radius: 4px on cards, buttons, inputs, chips and photos — architectural. 999px only for pills, mode chips and the guest stepper.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals and gallery; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for plan-mode transitions and the form swap. Composed and unhurried.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(12px) and settle over 750ms --ease-out when 12% visible (Motion whileInView, viewport once). Siblings stagger 70ms.
- Motion: Hero: the set-hall photo scales 1.04→1.0 over 2400ms while the overlay lightens 4%; the H1 rises 16px with 140ms stagger; a hairline Champagne rule draws under the promise line.
- Motion: Floor plan modes: tables and rows glide to new positions (Motion layout, 400ms --ease-io); the dancefloor/stage blocks crossfade; the CapacityReadout counts to the new figure over 450ms; mode chips fill Champagne in 150ms.
- Motion: Capacity tables: figures never animate; a hover fills the row Linen and slides a 2px Champagne rule.
- Motion: Gallery: photos scale 1.03 on hover with the caption fading up; clicking opens the Lightbox (Charcoal overlay at 88%, keyboard arrows and Escape, focus returns).
- Motion: Enquiry: guests stepper pops on change; window chips fill Champagne on select; invalid submit shakes 4px with inline labels; sending swaps to SentCard (320ms --ease-io) — a drawn Champagne 'ON THE BOOKS' seal scaling in gently, 'Thank you, [NAME].' 'We reply within a day with real availability.' space/mode/guests echo, 'Edit the enquiry' pre-filled. Persisted in localStorage.
- Motion: Links: .link-draw grows a 1px currentColor underline over 280ms on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — plan modes swap instantly, no scales, counts or staggers; everything at rest; color/border hovers stay. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Real photography, all six made for this template in one consistent style: high-ceilinged warehouse rooms in soft natural light, photographed empty or set for events — tables dressed, chairs aligned, no guests, no faces, no readable signage or vendor logos. The manager portrait is an AI-generated fictional person (a warm mid-forties host in a linen blazer) — a placeholder a real venue swaps for its own manager's photo. Every photo uses object-fit cover with the object-position given under Assets, 4px corners, no shadow. Captions in Jost 13px Stone Gray. Drawn in code: the favicon, the floor plans (spaces, tables, dancefloor, legend), the seal, chips and capacity tables. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Venue (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([VENUE] = The Foundry Hall, [CITY] = Providence, Rhode Island, [STYLE_NOTE] = warehouse light and long dinners, [CURFEW] = midnight). Put every string and number in src/content.ts and render from it. If any variable value differs, rewrite the hero, all three spaces and capacities, packages, logistics and enquiry copy so they are specific and believable for the new venue, keeping the same structure and counts (3 spaces × 3 capacities, 3 packages, 4 logistics, 6 gallery captions). All capacities, packages and facts are invented. Facts: address '88 Eddy Court, [CITY]' invented; phone (401) 555-0161; events Tue–Sun; amplified music until [CURFEW], acoustic anytime; load-in via the alley door with a freight elevator; 40-car lot plus street; step-free entry and elevator to the mezzanine. Spaces (name · size · capacities banquet/theater/cocktail · note): 'The Main Hall' '4,800 sq ft, 22-ft ceilings' '180 / 240 / 320' 'the warehouse heart: steel trusses, fairy lights, the long dinner'; 'The Gallery' '2,300 sq ft L-shaped' '80 / 110 / 150' 'daylight corner for ceremonies and slower mornings'; 'The Parlor' '900 sq ft' '30 / 40 / 60' 'cocktails, green room, or the after-party'. Packages: 'The Hall, bare' '$450/hr, 4-hour minimum' 'the room, the tables, the chairs, the freight elevator — you bring the rest'; 'Half managed' '$700/hr, 5-hour minimum' 'our preferred caterer list, a day-of coordinator, load-in crew'; 'Fully hosted' '$1,100/hr, 6-hour minimum' 'catering, bar staff, florist intro, coat check, and someone who fixes problems before you see them'. Logistics: Parking '40-car lot behind the building, street after 6'; Accessibility 'step-free entry, elevator to the mezzanine, accessible restrooms'; Load-in 'alley door, freight elevator, 8-hour windows'; Sound 'amplified until [CURFEW], acoustic anytime — the neighbors signed off, we kept the letter'.
   Layout: n/a
   Motion: n/a
2. **Header** — Left: the wordmark '[VENUE]' (Cormorant 600 21px) over 'An event venue · [CITY]' (10px uppercase Stone Gray) linking ./index.html. Right nav (Jost 500 13px uppercase letterspaced): 'Spaces' → #spaces, 'Floor plan' → #plan, 'Gallery' → #gallery, 'Packages' → #packages; a small Champagne 'Check availability' → #enquire. Under 780px: wordmark + enquire button. Under 640px the tagline hides and the CTA stays one line (shorter label 'Enquire' or smaller padding); the hero pads down by the header height so the eyebrow never overlaps it.
   Layout: Sticky top, height 72px, Gallery White/95% blur, Rule border.
3. **Hero** — Full-bleed hall-set.webp (88svh, min 600px) under a soft Charcoal gradient. Eyebrow (Bone at 75%): 'AN EVENT VENUE · [CITY]'. H1 two lines: 'Room for the' / '*long, slow celebration.*' Lead (Bone at 85%, max-width 520px): '[VENUE] is three rooms of [STYLE_NOTE] — capacities on the page, the floor plan one tap away, and availability answered within a day.' Primary 'Check availability' → #enquire and secondary-on-photo 'See the floor plan' → #plan. Bottom strip on Charcoal/70%: 'Up to 320 guests' · 'Load-in with freight elevator' · 'Amplified until [CURFEW]'. A left-to-right charcoal gradient scrim backs the text block (or the overlay raises to ~55%) so body copy reads over bright windows; the paragraph gets a max-width and the italic second half never fights the photo.
   Layout: Photo object-position 50% 55%; gradient Charcoal 0.5→0.15→0.85; content anchored bottom-left 116px up.
4. **Spaces** — Section id='spaces'. Eyebrow 'THREE ROOMS' and H2 'CAPACITIES, PRINTED.' Three SpaceCards (photo 4:3, name, sq ft + ceiling line, CapacityTable with banquet/theater/cocktail figures in Champagne tabular, one-line note): the roster. Tighten the intro sentence (drop the awkward hover phrasing); each room card gets a small 'See this room on the plan' link that selects the matching floor-plan room; mobile gets a tap cue instead of hover.
   Layout: Linen background. Three columns 24px gap; capacity rows hairline-divided with config labels small-caps.
5. **Interactive floor plan** — Section id='plan'. Eyebrow 'THE VIRTUAL FLOOR PLAN' and H2 'WILL YOUR 120 FIT? YES — SEE HOW.' The FloorPlan: a space selector (three chips), a ModeSwitch (Banquet / Classroom / Cocktail), the PlanSVG of the selected space with tables/rows/clusters gliding into place (banquet rounds of 10 with dancefloor, classroom rows with aisle, cocktail clusters with bars), and the CapacityReadout ('Banquet: 180 seated · dancefloor 20×20') counting on change; a legend explains the blocks. Caption: 'Plans are indicative; your coordinator confirms to the chair.'
   Layout: Gallery White background. The plan panel max-width 980px on Card with a Rule frame; space chips above, mode chips below; legend small-caps.
6. **Gallery** — Section id='gallery'. Eyebrow 'SET & EMPTY' and H2 'SIX VIEWS OF THREE ROOMS.' Six-photo mosaic with captions: hall-set.webp (reused) 'The Main Hall, set for 140'; hall-empty.webp 'The same hall, yours to fill'; gallery-ceremony.webp 'The Gallery, ceremony for 80'; mezzanine.webp 'The mezzanine, above it all'; parlor-bar.webp 'The Parlor, cocktail hour'; detail-trusses.webp 'Steel trusses, fairy lights, [STYLE_NOTE]'. Clicking opens the Lightbox. Rebuild the six-photo grid with explicit grid-template-areas (or a uniform 3x2): every cell filled, rows aligned, no tall-photo empty gaps, no half-spanning orphans; tall and wide shots balanced deliberately.
   Layout: Linen background. 3x2 mosaic 16px gaps (tall items span rows); captions fade up on hover.
7. **Packages and manager note** — Section id='packages'. Eyebrow 'PACKAGES' and H2 'THREE WAYS TO TAKE THE ROOM.' TierCards (price Cormorant 32px Champagne, minimums line, 4–5 inclusions with Champagne ticks): the roster; the middle tier featured with a Champagne border and 'MOST BOOKED' chip. The ManagerNote beside: manager-wren.webp portrait (3:4) with the caption 'Wren Okafor, venue manager — a fictional host' and the note: 'Wren walks every enquiry personally — tell her the guest count and the vibe; she''ll tell you which room and whether the mezzanine is worth it.' Each tier gains a one-line 'best for' note (or the card heights shrink) so no ~200px hollow band sits between features and the Enquire button; card bottoms align deliberately.
   Layout: Gallery White background. Three tiers 24px gap with the middle lifted; the note 4 cols beside on desktop (stacked under 1000px).
8. **Enquiry, logistics and footer** — Section id='enquire'. Eyebrow 'CHECK AVAILABILITY' and H2 'THREE TAPS TO A REAL ANSWER.' EnquiryForm on Card: space chips (three), GuestsStepper 20–320, WindowChips ('This month' / 'Next 1–3 months' / 'Just exploring'), event-type select (Wedding / Corporate / Birthday / Something else), name + email; primary 'Send the enquiry' with caption 'Saved in this browser — the real page emails Wren. Nothing is sent here.' SentCard: the ON THE BOOKS seal, 'Thank you, [NAME].' 'We reply within a day with real availability — hold dates go fast in spring.' space/guests echo, 'Edit the enquiry' pre-filled. LogisticsStrip: the four rows with Good icons. Footer (Charcoal, bone text): wordmark, '88 Eddy Court, [CITY]', (401) 555-0161 tel:, events@ + emailDomain; bottom line '© [VENUE]. Capacities are comfortable, not theoretical.' Style the Wedding select with a custom lucide chevron; show a live echo line ('Main Hall · 120 guests · banquet fits 180') tying the form to the room data; the form stays visually connected to the chips above.
   Layout: Linen section for the enquiry (panel max-width 640px); logistics a hairline-bounded row of four below; footer three-part with bottom line.

## Assets
- image: Template photos made for this design (free to redistribute with the template). Download each with curl -L -o into public/images/: https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/hall-set.webp → public/images/hall-set.webp (Hero, Gallery; object-position 50% 55%; alt 'The Main Hall set for dinner with long tables and fairy lights'); https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/hall-empty.webp → public/images/hall-empty.webp (Gallery; alt 'The empty Main Hall with steel trusses and tall windows'); https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/gallery-ceremony.webp → public/images/gallery-ceremony.webp (Gallery, Spaces card; alt 'The Gallery room set with ceremony chairs in daylight'); https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/mezzanine.webp → public/images/mezzanine.webp (Gallery; alt 'The mezzanine walkway above the Main Hall'); https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/parlor-bar.webp → public/images/parlor-bar.webp (Spaces card, Gallery; alt 'The Parlor with a small bar and lounge chairs'); https://media.vibefather.ai/assets/ea242f9a-b922-492b-a5cb-36c6905b9310/manager-wren.webp → public/images/manager-wren.webp (Manager note; alt 'Wren Okafor, a fictional venue manager'). Six files in total.
- image: Write ASSETS.md at the project root with a table: path, source URL, author, license — one row for each photo (source 'media.vibefather.ai, made for this template', author 'VibeFather', license 'Distributed with the template'), plus rows for @fontsource/cormorant-garamond and @fontsource-variable/jost (OFL-1.1) and lucide-react (ISC). No guest faces in any photo — rooms are photographed empty or set; the manager portrait is an AI-generated fictional person per the portrait rules; no readable signage or vendor logos.
- icon: lucide-react only: Users, LayoutGrid, Armchair, UtensilsCrossed, GlassWater, Car, Accessibility, Truck, Volume2, Check, Plus, Minus. Stroke width 1.75, 16–24px, color inherits. The floor plans (spaces, tables, dancefloor, legend blocks), the ON THE BOOKS seal, chips and favicon are drawn SVG. public/favicon.svg: viewBox 0 0 32 32, a 32x32 rect rx 5 filled #2B2926, a Champagne (#C2A265) truss-and-table glyph (two lines crossed over a small circle). No other logo: the venue name is always set as type.
- font: Install @fontsource/cormorant-garamond and @fontsource-variable/jost and import them in src/fonts.ts as listed in Setup. Vite bundles the woff2 files into dist/.
- image: Drawn in code: the interactive floor plans (three spaces, banquet/classroom/cocktail layouts, dancefloor and bars, legend), the seal, chips, capacity tables and the favicon. No other bitmaps beyond the six photos; no illustrations; no map tiles.

## Don'ts
- No backend, no form submission, no fetch to any API: the enquiry saves in the browser only (localStorage) and says so; tel: links are built from the phone digits.
- All links on this single page are anchors (./index.html#spaces, #plan, #gallery, #packages, #enquire) plus the footer mailto.
- No guest faces or identifiable events in any photo — rooms are photographed empty or artfully set; the manager portrait is an AI-generated fictional person, not any real individual; no vendor logos or readable signage.
- Self-host everything: fonts through Fontsource, icons as npm packages or inline SVG, images downloaded into public/images/. No CDN <script> or <link> tags, no Google Fonts, no analytics.
- Production build: minified, no source maps, no src/ copied into dist/, single command npm run build, output in dist/ under 10 MB.
- No real venues, caterers or rental companies; capacities and packages are invented and consistent between the space cards, the floor plan and the packages.
- No dates or years anywhere; window chips are month-relative phrases; the site never shows today's date.
- Never mention VibeFather or any other brand inside the site except the optional credit footer link; all copy is invented US English.
- Respect prefers-reduced-motion: plan modes swap instantly, no scales, counts or staggers; everything at rest; color/border hovers stay.
- The page must work at 1440x900 desktop and 390x844 mobile with zero console errors; space/mode chips, the stepper, selects and the form work with keyboard only and visible focus rings.
- Keep copy host-precise: no lorem, no 'magical day'; every capacity, hour and minimum lives in src/content.ts.

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