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

# Coworking Space Website

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

## Brief
A single-page site for [SPACE], a [DESKS]-desk coworking space in [CITY] — [VIBE]. It must show the space honestly: an interactive floor map with per-zone availability (sample state), three membership plans, amenities, community events with client-side RSVP, a noise-honesty strip, and a tour booking form that carries the map selection through. One page: index.html with sections (#map, #plans, #amenities, #events, #tour). Everything runs in the browser; nothing is submitted anywhere.

- Audience: Freelancers and small teams scouting a desk: remote workers escaping home, two-person startups, moonlighting side-project builders. They want to feel the space's sound level, see real pricing, and book a tour without an email maze.
- Goal: Book the tour. Within ten seconds a visitor sees the space, the from-price and the map; within two minutes they've hovered the map, picked a plan and chosen a tour day.
- Tone: Warm and matter-of-fact, like the community manager's welcome email. Real numbers (desks, hours, prices), honest noise talk, one joke about the printer.

## 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-variable/sora (OFL-1.1), @fontsource-variable/albert-sans (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 (offwhite, linen, card, walnut, bark, coral, coral-deep, sage, rule) and fontFamily display ['Sora Variable', 'system-ui', 'sans-serif'], sans ['Albert Sans Variable', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 12px and add maxWidth { container: '1200px' }.
  - In src/fonts.ts import '@fontsource-variable/sora' and '@fontsource-variable/albert-sans'; import src/fonts.ts and src/index.css from the entry file.
  - File layout: src/content.ts (every string, plan, amenity, event, zone, availability seed, price and image path, typed), src/lib/brand.ts (spaceSlug = [SPACE] lowercased with every run of non-alphanumeric characters replaced by '-', emailDomain = spaceSlug without hyphens + '.com'), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with spaceSlug + ':'), src/lib/floorplan.ts (zone list with geometry ids, seeded availability counts stable across reloads, takenZones(zoneId) deterministic list).
  - State: src/store/tour.ts is a tiny external store (useSyncExternalStore) holding { zoneId, name, email, day, rsvps: string[] } persisted to localStorage key spaceSlug + ':tour'. Selecting a zone on the map writes zoneId; the tour form and RSVPs read from it.
  - Components in src/components/: Header.tsx, Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, Footer.tsx; Hero.tsx, FloorMap.tsx (MapZone.tsx, ZoneTip.tsx), Plans.tsx (PlanCard.tsx), Amenities.tsx, Events.tsx (EventCard.tsx, RsvpButton.tsx), NoiseStrip.tsx, TourForm.tsx (DayChips.tsx, Confirmed.tsx). src/pages/Home.tsx composes them.
  - 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='#F8F6F1'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[SPACE] — Coworking 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
- [SPACE] — Space name (default: "The Print Works"). Invented coworking name. Used in the wordmark, title, footer, email (hello@ + spaceSlug without hyphens + .com) and localStorage keys. Never a real space or brand.
- [CITY] — City (default: "Philadelphia, Pennsylvania"). Where the space is. Used in the hero, events' neighborhood lines and the footer. Real cities fine; the street invented.
- [DESKS] — Desk count (default: "40"). Total desks as digits. Drives the hero strip, the map's zone capacities and the plans' availability lines. Keep it 15–80.
- [VIBE] — Vibe phrase (default: "warm, plant-heavy and quietly busy"). One lowercase phrase describing the atmosphere. Drives the hero line, the noise strip's honesty and the tour form's reassurance.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/coworking-space-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
- Offwhite `#F8F6F1` — Page background throughout.
- Linen `#EFEAE0` — Alternate section background (Amenities, Events), hover fill, chips.
- Card `#FFFFFF` — Plan cards, event cards, the tour panel, confirmation.
- Walnut `#3E3227` — Primary ink: headlines, body text, primary buttons, focus ring.
- Bark `#71614F` — Secondary text, captions, eyebrows, zone labels' idle state.
- Coral `#E2654A` — The one accent: selected zones, prices, RSVP ticks, focus ring details, tour button.
- Coral Deep `#C24E35` — Hover and pressed states.
- Sage `#7E9070` — Quiet second color: availability dots, 'included' ticks, plan highlights.
- Rule `#E0D9CC` — 1px hairlines, card borders, input borders, floor-plan linework.

### Typography
- Display: H1, H2, H3, plan names, event titles, the wordmark: Sora (OFL), weights 600/700
- Text and UI: body, eyebrows, buttons, form fields, captions; tabular numerals for prices and availability: Albert Sans (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base unit. Container max-width 1200px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 96px desktop, 72px under 1024px, 56px under 640px. Type scale: H1 clamp(42px, 6.2vw, 78px) Sora 700, line-height 1.04; H2 clamp(28px, 3.8vw, 46px) Sora 700; H3 21px Sora 600; lead Albert Sans 400 17.5px / 1.65 Walnut at 90%; body 15.5px / 1.7 (max-width 64ch); eyebrow Albert Sans 700 12px uppercase letter-spacing 0.16em Bark; caption 13px Bark. Buttons: height 50px, Albert Sans 700 14px. Primary: Walnut fill, Card text. Secondary: 1px Walnut border, Walnut text. Inputs: height 50px, 1px Rule border, Card fill, focus Walnut border. Focus ring everywhere: 2px Walnut outline with 3px offset.
- Radius: 12px on cards, buttons, inputs, chips and photos. 999px only for pills, availability dots and RSVP ticks.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals and zone transitions; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for map selection and the tour swap. Calm — this is a workspace pitch.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(12px) and settle over 650ms --ease-out when 15% visible (Motion whileInView, viewport once). Siblings stagger 70ms.
- Motion: Hero: the lounge photo scales 1.04→1.0 over 2400ms; the headline rises; the from-price ticks up once.
- Motion: Floor map: zones idle at Rule strokes with Bark labels; hover fills Linen, lifts 1px and shows the availability tooltip (Sage dot '6 of 8 free' tabular); taken desks within a zone dim as small squares; clicking selects — the zone fills Coral at 12% with a Coral stroke and the legend updates; selection swaps with a 200ms --ease-io crossfade. The plan draws in on first view (stroke-dashoffset, 1000ms).
- Motion: Plans: the featured card lifts 6px permanently; hover ticks the price 2px; the 'included' checks stagger 40ms.
- Motion: Events: RSVP toggles the button to 'Going ✓' (Sage tick drawing, 300ms) and increments the count with a tabular tick; second click cancels politely ('Maybe not' on hover).
- Motion: Tour form: day chips fill Walnut on select; invalid submit shakes 4px with inline labels; sending swaps to Confirmed (300ms --ease-io) — a drawn floor-plan fragment stamp 'TOUR BOOKED' rotating in -5deg→-2deg, the selected zone echoed ('Asking about: the mezzanine, 3 dedicated desks free').
- Motion: Links: .link-draw grows a 1px currentColor underline over 280ms on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — the plan renders drawn, no lifts, ticks, staggers or stamps; zone selection is an instant color change. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Warm workplace photography, all six made for this template in one consistent style: big windows, pale wood and plants, walnut tones with coral accents — desks, lounges, booths and kitchen corners, never a person (no faces, no hands, no laptops-with-screensavers-of-people). No readable text or signage. Every photo uses object-fit cover with the object-position given under Assets, 12px corners, no shadow; photos on Offwhite get a 1px Rule outline. Captions in Albert Sans 13px Bark. Drawn in code: the floor plan (linework zones, desks as small squares, doors as arcs), tooltips, availability dots, the stamp, chips and the favicon. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Space (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([SPACE] = The Print Works, [CITY] = Philadelphia, Pennsylvania, [DESKS] = 40, [VIBE] = warm, plant-heavy and quietly busy). Put every string, price and list in src/content.ts and render from it. If any variable value differs, rewrite the hero, plans, amenities, events, zones and tour copy so they are specific and believable for the new space, keeping the same structure and counts (3 plans, 8 amenities, 4 events, 6 map zones, 3 noise lines). All members, hosts and availability figures are invented; availability is labeled 'sample state' once near the map. Plans: 'Hot desk' $210/mo or $28/day 'any free desk, locker included'; 'Dedicated desk' $395/mo 'your desk, your monitor arms, 24/7'; 'Private room (2–4)' $980/mo 'a door, a whiteboard, and a doorbell you can ignore'. Hours: Mon–Fri 7:00–19:00, Sat 9:00–15:00, Sun closed (members with dedicated desks: 24/7 code). Zones (id · name · capacity · seeded free): 'lounge-hot' the lounge hot desks 8/6 free; 'window-row' the window row (dedicated) 10/3 free; 'mezzanine' the mezzanine (dedicated) 12/5 free; 'booths' the phone booths 4/2 free; 'studios' the two studios (private) 2/1 free; 'kitchen' the kitchen table (hot) 4/4 free. Events (weekday-named, no dates): 'Tuesday · Not-a-networking breakfast' '8:30, kitchen — bagels and deliberate small talk, hosts: June'; 'Wednesday · Silent co-working' 'two hours, mezzanine, headphones encouraged'; 'Thursday · Show-and-tell' 'one member, ten minutes, zero decks allowed'; 'Friday · Fix-it Friday' 'the community toolbox opens; bring the wobbly thing'.
   Layout: n/a
   Motion: n/a
2. **Header** — Left: the wordmark '[SPACE]' (Sora 700 19px) over 'Coworking · [CITY] · [DESKS] desks' (10px uppercase Bark) linking ./index.html. Right nav (Albert Sans 600 14px): 'The floor' → #map, 'Plans' → #plans, 'Events' → #events, and a Walnut 'Book a tour' → #tour. Under 820px: wordmark + tour button.
   Layout: Sticky top, height 72px, Offwhite/94% blur, Rule border.
3. **Hero** — Two columns. Left: eyebrow 'COWORKING IN [CITY]'; H1 'A good room' / '*to think in.*'; lead (max-width 520px): '[SPACE] is [VIBE] — [DESKS] desks in a converted print works, plants that survive us, and coffee that deserves the mugs. Hot desks from $210 a month, days from $28.'; primary 'Book a tour' → #tour and secondary 'See the floor' → #map; three quick facts with Sage ticks: 'Free trial day, no card'; 'Month-to-month, leave anytime'; 'Dogs: yes, distractible ones especially'. Right: lounge-wide.webp (4:3) with the caption 'The lounge, 9:40am — sample of an ordinary Tuesday'. Below the fold line a quick 'See the floor' cue (or a mini plan strip) appears so the floor plan is discoverable within ten seconds; the photo aligns to the top of the headline block; on mobile the badges wrap cleanly.
   Layout: Offwhite background, vertical padding 104px top; left 6 cols, right 5 cols offset 1.
4. **Interactive floor map** — Section id='map'. Eyebrow 'THE FLOOR' and H2 'Pick where you''d sit.' The FloorMap: an SVG plan (viewBox 0 0 900 540) of the print works — six zones as rounded linework regions with desks as small squares (taken desks filled Bark at 30%), doors as quarter-arc swings, one staircase glyph and a north arrow; hover any zone for the availability tooltip; click to select (fills Coral at 12%, Coral stroke, the legend line updates to the zone's line: 'the mezzanine — 12 dedicated desks, 5 free (sample)'). A caption under the map: 'Availability is sample state for this template — the real space would show it live.' A side panel (4 cols) restates the selected zone, its price line and a shortcut 'Tour this spot →' → #tour. Under 1024px the map scrolls horizontally as a whole.
   Layout: Linen background. Map 8 cols on Card with a Rule frame; side panel 4 cols sticky top 96px.
5. **Membership plans** — Section id='plans'. Eyebrow 'PLANS' and H2 'Three ways to belong.' PlanCards: 1) 'Hot desk' — '$210/mo' or '$28/day' — 'Any free desk, morning pick of the lounge or kitchen table; locker included; Mon–Sat hours.' — 'Included: wifi · coffee · lockers · printing (fair-use)'. 2) 'Dedicated desk' (featured, Coral outline, chip 'Most loved') — '$395/mo' — 'Your own desk in the window row or mezzanine, monitor arms welcome, 24/7 door code.' — 'Everything in hot desk, plus: your desk · 24/7 · guest passes (2/mo)'. 3) 'Private room (2–4)' — '$980/mo' — 'A door that closes, a whiteboard that fills, and a doorbell you can ignore; includes three desks.' — 'Everything in dedicated, plus: the room · storage · 4 hours of meeting-room credit'. A caption: 'All month-to-month. Leave with a week''s notice and your plants go with you.'
   Layout: Offwhite background. Three columns 24px gap; the featured card lifted 6px with a 2px Coral border; checks in Sage; prices Sora 700 34px tabular with the day-pass alternate in 15px Bark.
6. **Amenities and noise strip** — Section id='amenities'. Eyebrow 'WHAT''S IN THE BUILDING' — eight amenity tiles with icons: Wifi '1 Gb up and down, tested weekly, bragged about monthly'; Phone 'four phone booths, one famously quiet'; Printer 'printer, scanner, and the community stapler (rarely lost)'; Coffee 'locally roasted, bottomless, one decaf for the afternoons'; Lockers 'lockers with keys that don''t copy themselves'; Utensils 'a kitchen you''d cook in, and people who do'; Bike 'bike racks inside the door and a pump'; Moon '24/7 codes for dedicated desks and rooms'. The NoiseStrip under: 'Sounds like:' three honest lines — 'The lounge: coffee-shop energy until 4, then quiet hour'; 'The mezzanine: library rules, enforced by eyebrows'; 'The booths: so quiet you can hear your own pitch'. The noise strip gets its own visual treatment: a zone-by-zone loudness scale with Sage dots, larger text, the booth photo beside it - not a thin afterthought.
   Layout: Linen background. 4x2 grid 16px gap tiles on Card; NoiseStrip a hairline-bounded strip of three columns.
7. **Community events** — Section id='events'. Eyebrow 'THIS WEEK, MOST WEEKS' and H2 'Community, scheduled gently.' Four EventCards: 'Tuesday · Not-a-networking breakfast' — 'Bagels at 8:30 in the kitchen; the name is the rule. Host: June.' — 'Going: 11'; 'Wednesday · Silent co-working' — 'Two focused hours on the mezzanine; headphones encouraged, typing encouraged-er.' — 'Going: 7'; 'Thursday · Show-and-tell' — 'One member, ten minutes, zero decks allowed. The ceramicist and the spreadsheet guy are both regulars.' — 'Going: 9'; 'Friday · Fix-it Friday' — 'The community toolbox opens; bring the wobbly thing, leave with the unwobbly thing.' — 'Going: 5'. Each card's RsvpButton toggles client-side (count ticks).
   Layout: Offwhite background. 2x2 grid 20px gap; cards on Card Rule-bordered with weekday chips; RSVP button 999px.
8. **Tour form** — Section id='tour'. Eyebrow 'COME SEE IT' and H2 'Tours take twenty minutes and end in the lounge.' A Card panel: the selected-zone line first ('Asking about: the mezzanine — 5 of 12 free (sample)', changeable via a small zone select synced with the map); name and email inputs; DayChips (Mon/Tue/Wed/Thu/Fri of next week + 'Saturday morning'); a quiet time select ('9–11', '11–1', '3–5'); primary 'Book the tour' with caption 'Saved in this browser — the real page would email the host. Nothing is sent here.' Confirmed: the 'TOUR BOOKED' stamp, 'See you [DAY], [WINDOW].' the zone echo, 'We''ll have coffee on and the wobbly chair fixed.' and 'Change my tour' returning pre-filled. Persisted in localStorage. CRITICAL: the tour form must render - the Reveal wrapper uses a generous viewport margin (amount 12% or less, once:true) and any block taller than the viewport reveals with amount 0px or no whileInView at all; verify in the built page that the form, day chips and submit button are visible on desktop before shipping.
   Layout: Linen background; panel max-width 620px, 28px padding, Rule border; chips wrap.
9. **Footer** — Walnut background, Offwhite-toned text. Three columns: 1) wordmark + '[SPACE]' over 'Coworking · [CITY] · a former print works'. 2) 'Visit': '2210 Cadwalader St, [CITY]', hello@ + emailDomain, '(215) 555-0175'. 3) 'Hours': Mon–Fri 7:00–19:00, Sat 9:00–15:00, Sun closed; 'Dedicated members: 24/7'. Bottom line: '© [SPACE]. Availability shown as sample; the coffee is real.'
   Layout: Vertical padding 64px, 3 columns, bottom line 32px below an Offwhite/15% rule. Under 768px: stacked.

## 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/0e590ff7-ff46-49c2-b368-2048828d527a/lounge-wide.webp → public/images/lounge-wide.webp (Hero; object-position 50% 55%; alt 'A warm lounge of mixed desks and plants in big-window daylight'); https://media.vibefather.ai/assets/0e590ff7-ff46-49c2-b368-2048828d527a/window-row.webp → public/images/window-row.webp (Plans side; alt 'A row of dedicated desks along tall windows'); https://media.vibefather.ai/assets/0e590ff7-ff46-49c2-b368-2048828d527a/booth-quiet.webp → public/images/booth-quiet.webp (Noise strip side; alt 'A plywood phone booth with a bench and a small light'); https://media.vibefather.ai/assets/0e590ff7-ff46-49c2-b368-2048828d527a/kitchen-table.webp → public/images/kitchen-table.webp (Events side; alt 'A long kitchen table with coffee gear and bagels'); https://media.vibefather.ai/assets/0e590ff7-ff46-49c2-b368-2048828d527a/mezzanine.webp → public/images/mezzanine.webp (Map side; alt 'A mezzanine of quiet desks with plants along the rail'); https://media.vibefather.ai/assets/0e590ff7-ff46-49c2-b368-2048828d527a/studio-door.webp → public/images/studio-door.webp (Plans private-room card; alt 'A private studio door with a glass panel and a whiteboard wall'). 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-variable/sora and @fontsource-variable/albert-sans (OFL-1.1) and lucide-react (ISC). Never replace photos with stock sites or images with people, faces, hands or readable signage.
- icon: lucide-react only: Wifi, Phone, Printer, Coffee, Lock, Utensils, Bike, Moon, Check, Plus, X, CalendarDays, ArrowRight, MapPin. Stroke width 1.75, 16–24px, color inherits. The floor plan, tooltips, availability squares, the TOUR BOOKED stamp and the favicon are drawn SVG. public/favicon.svg: viewBox 0 0 32 32, a 32x32 rect rx 8 filled #3E3227, an Offwhite desk-grid glyph (four small squares) with one Coral square. No other logo: the space name is always set as type.
- font: Install @fontsource-variable/sora and @fontsource-variable/albert-sans 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 plan (zones, desks, doors, stairs, north arrow), availability dots and taken squares, tooltips, the stamp, chips 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 map selection, RSVPs and tour save in the browser only (localStorage); availability is labeled sample state; the form says nothing is sent.
- All links on this single page are anchors (./index.html#map, #plans, #amenities, #events, #tour).
- 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 coworking brands, members or hosts; no photos with people, faces or hands; no readable signage; all prices, counts and events invented.
- No dates or years anywhere: events are weekday-named, the tour picker shows weekday chips without full dates; 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: the plan renders drawn, no lifts/ticks/stamps/staggers; zone selection is a color change; hovers stay.
- The site must work at 1440x900 desktop and 390x844 mobile with zero console errors; zones, chips, RSVPs and the form work with keyboard only and visible focus rings; the map is focusable per-zone (arrow keys move between zones).
- Keep copy concrete: no lorem, no 'synergy'; every price, count and amenity lives in src/content.ts.

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