Description
## Included in every theme
– **React 18 + Bootstrap 5.3.3**, loaded from CDN. No build step, no npm install — upload and it runs.
– **Three files per theme**: `index.html`, `app.jsx`, `styles.css`. Nothing else to wire up.
– **6 ready-made colour schemes** plus a live colour picker. Every colour is a CSS variable, so one change repaints the whole page.
– Colour choice is remembered between visits (`localStorage`).
– **Fully responsive**, tested from 375px to 1920px. No horizontal scroll at any width.
– **Sticky header** that compacts on scroll, with an off-canvas mobile menu.
– **Scroll-reveal animations** with a built-in failsafe — if JavaScript ever fails, the page still renders fully instead of going blank.
– Animated counters, working forms with validation states, and accessible labels throughout.
– `prefers-reduced-motion` respected: all motion is disabled for visitors who ask for it.
– **Real stock photography** from Unsplash. Every image URL was checked and returns HTTP 200.
– Clean, commented source code. Every content block sits in a plain array at the top of the file, so editing text means editing one line — no hunting through markup.
—
# The 30 Themes
## 1. Restaurant — “Maison Verde”
**Seasonal fine dining restaurant**
A warm, editorial design for restaurants that want to look like they take food seriously. Playfair Display headings on a cream canvas.
– Tabbed menu with 5 categories and 26 dishes, dotted price leaders and dietary tags
– Gallery with full-screen lightbox (keyboard arrows, ESC to close)
– Reservation form with date, time, party size and dietary notes
– Opening-hours table, private dining packages, testimonial carousel
– Full-bleed hero with a glass information card and seasonal ingredient marquee
## 2. Advertising Agency — “Signal”
**Performance marketing agency**
Dark, confident and results-led. Electric accent colour, glow gradients and oversized numerals.
– Filterable case-study grid with headline metrics
– Six service cards, four-stage process timeline, animated results band
– Three-tier pricing with a featured plan
– Team profiles, client marquee, dark enquiry form with budget qualifier
## 3. Architecture — “Aperture”
**Architecture and urban design studio**
Quiet and typographic. Off-white paper, hairline rules and very large headings — the buildings do the talking.
– Filterable project grid by sector (residential, cultural, commercial, interiors)
– Full-width panoramic feature image
– Numbered practice commitments, awards list, studio team with duotone portraits
– Journal section and a project-enquiry form with budget banding
## 4. Blog / Magazine — “The Long Read”
**Independent essay publication**
Print-inspired editorial layout with Fraunces serif on cream stock.
– Large featured article with author, date and read time
– Category-filtered article grid, “most read” ranked list, pull quotes
– Topic browser with article counts, writer profiles
– Newsletter signup and a reader-funded transparency section
## 5. Coming Soon — “Vesper”
**Product launch / waitlist page**
Night-sky dark with drifting aurora gradients and glass panels.
– **Live countdown** to launch, ticking to the second
– Waitlist form with queue position and social proof avatars
– Product roadmap with shipped/upcoming states
– Feature grid, sneak-peek screens, FAQ accordion, founder bios
## 6. Construction — “Ironclad”
**Commercial construction and civil engineering**
Industrial and direct. Hazard-stripe divider, condensed uppercase headings, concrete greys.
– Filterable project portfolio with contract values
– Statistics band, four-stage process, health & safety section with accreditation badges
– Board-level team profiles, client testimonials
– Tender enquiry form with project type and contract value
## 7. Creative Agency — “Studio Kite”
**Brand and digital design studio**
Bright and playful — the light-hearted counterpart to the Signal agency theme.
– **Rotating headline word** animation in the hero
– Mosaic image grid, expanding service rows with animated arrows
– Filterable work grid, four-stage process cards
– Team profiles, testimonials, dark contact section
## 8. Fitness — “Forge Athletic”
**Strength and conditioning gym**
High contrast, volt-yellow on near-black, condensed Oswald caps.
– **Working class timetable** — six day tabs, colour-coded availability (“3 left”, “Full”)
– Four training programmes, coach profiles with specialisms
– Three membership tiers with a featured plan
– Facility gallery, member results, free-trial signup form
## 9. Freelancer — “Mara Ellison”
**Personal site for a freelance professional**
Calm and personal. Newsreader serif, warm off-white, one accent colour.
– **Availability badge** with a pulsing status indicator
– Service list with published prices, four-step working process
– Case studies with measured outcomes, tool stack
– FAQ accordion and a project enquiry form with timeline and budget
## 10. Music / Band — “Nightjar”
**Band, artist or record release**
Stage lighting in web form. Anton condensed caps, deep black, hot accent.
– **Clickable tracklist** with play/pause states
– Tour dates with Sold Out / Last Tickets / On Sale states
– Video section, photo gallery with lightbox, merch store grid
– Mailing list signup and booking/press contact block
## 11. Photography Portfolio — “Vantage”
**Fine art photography portfolio**
Gallery-wall minimal. Cormorant Garamond, paper white, images at full strength.
– Filterable plate gallery with full-screen lightbox
– Series/collections section, limited-edition print shop
– Exhibition and awards list, press mentions
– Studio biography and a commission enquiry form
## 12. Photo Studio — “Northlight”
**Commercial photography studio and studio hire**
Bright working studio: cool whites, soft grey panels, crisp technical detail.
– Six services with published starting prices
– Filterable portfolio with lightbox
– **Studio hire rooms with full specifications** — floor area, ceiling height, lighting, daily rate
– Four-stage shoot process, team profiles, availability booking form
## 13. Real Estate — “Meridian Estates”
**Estate agency, sales and lettings**
Quietly premium. Deep navy with a brass accent, Lora serif headings.
– **Four-field property search** in the hero
– Filterable listings (for sale / to let / sold) with bedrooms, bathrooms and floor area
– Neighbourhood tiles, six services with published fees
– Partner-led team section, four-stage selling process, free valuation form
## 14. Sports Club — “Ironside FC”
**Football or sports club**
Matchday energy. Club navy, Bebas Neue, crest motif.
– **Live countdown to the next fixture**
– Fixtures and results tabs with win/draw/loss colour coding
– **League table** with the club’s own row highlighted
– Squad grid, club news, three ticket tiers, academy trial registration
## 15. Technology / IT — “Cortex Systems”
**Managed infrastructure and cloud operations**
Control-room aesthetic. Deep slate, terminal green, JetBrains Mono for anything measured.
– **Live terminal panel** showing service health output
– Five-layer platform architecture, each with its own published SLA
– Uptime metrics, case studies, security certifications grid
– Three engagement tiers and a technical estate-review form
## 16. SaaS — “Cadence”
**Software product landing page**
Calm modern product marketing. Soft off-white, confident indigo, Plus Jakarta Sans.
– **Monthly / yearly pricing toggle** — prices recalculate live with an annual saving
– **Competitor comparison table**
– Browser-framed product screenshot, alternating feature deep-dives
– Integrations grid, customer quotes, FAQ accordion, demo request form
## 17. E-commerce — “Fold & Thread”
**Fashion and lifestyle store**
Quiet retail. Bone paper, Tenor Sans, product photography given the full width.
– **Fully working shopping cart** — slide-out drawer, quantity controls, line removal, subtotal, free-delivery threshold and order total
– Cart persists between visits (`localStorage`)
– Colour swatches and size selection per product; out-of-stock sizes struck through and disabled
– Second product photo on hover, category filter and price sorting
– Add-to-bag toast notification, size guide table, customer reviews
## 18. Medical — “Kingsway Health”
**Private clinic, GP or dental practice**
Calm and clinical. Cool white, soft teal, rounded cards, plenty of air.
– **Working appointment booker** — choose a service, pick from a 10-day strip, then a time slot
– Availability recalculates per service; changing day or service clears the selection
– Sundays disabled, live slot counts, booking locked until a time is chosen
– Six specialties with prices, clinician profiles with next availability
– Published fee table, insurer list, patient FAQ
## 19. Law Firm — “Hartley & Voss”
**Solicitors and commercial advisers**
Quiet authority. Deep navy, parchment, Libre Baskerville.
– Six practice areas with detailed sub-services
– **Case results section** with outcome figures on a dark background
– Four-stage engagement process, partner profiles with credentials
– **Three published fee models** (fixed, capped, retainer)
– Regulatory footnotes and a consultation request form
## 20. Education — “Lumen Learn”
**Online course platform**
Bright classroom. Warm white, violet primary, Poppins.
– **Course cards with live seat-capacity bars** (“34 of 40 seats taken · 6 left”)
– Category filter, instructor avatars, discounted pricing
– **Four-module curriculum accordion** with lesson lists
– Tutor profiles, student outcomes on a dark band, syllabus request form
## 21. Travel — “Meridian Trails”
**Tour operator or travel agency**
Field-notebook warmth. Sand paper, deep forest green, Epilogue.
– Trip finder with destination, month and difficulty
– Region-filtered tour cards with duration, group size, grade, departure date and price
– **Day-by-day itinerary as a vertical timeline** with accommodation for each night
– Included/excluded list with clear tick and cross states
– Local guide profiles, traveller reviews, enquiry form
## 22. Hotel — “The Wren”
**Hotel, spa or resort**
Soft hospitality. Warm chalk, muted sea blue, Marcellus.
– **Date-range booking bar** that calculates the number of nights live
– The stay length feeds three places at once: the hero bar, the total on every room card, and the booking summary
– Invalid date ranges show a warning and lock the form
– Four room types with size, view, amenities and low-availability warnings
– Restaurant section with service times, spa and facilities, direct-booking offers, 9.4/10 review score
## 23. Wedding — “Elena & Tom”
**Wedding invitation site**
Pressed-flower stationery. Ivory, sage, Italiana at generous letterspacing.
– **Live countdown** to the wedding day
– Story timeline, hour-by-hour running order
– **Smart RSVP form** — accepting reveals guest count, children, meal choice, dietary needs and a song request; declining hides them and changes the message prompt
– Photo gallery with lightbox, gift list, practical FAQ
## 24. Barbershop — “Bellweather & Sons”
**Barbershop or salon**
Shopfront character. Warm charcoal, tobacco amber, Zilla Slab, barber-pole divider.
– **Booking starts with the barber** — each has their own diary, so availability changes with your choice
– Then service, day and time, with a live summary and price
– Open/closed status indicator in the hero
– Price list with duration and cost, three membership tiers, shop gallery, opening hours with today highlighted
## 25. Car Dealership — “Vantage Motors”
**Used car dealership**
Showroom floor. Graphite dark, electric cyan, Saira, specification tables throughout.
– **Four-field stock search** (make, body, fuel, max price) plus sorting
– **Working finance calculator** — pick a vehicle, drag the deposit slider, choose a term; monthly payment, total interest and total payable recalculate live using a proper amortising formula
– Monthly figures on the stock cards use the same assumptions as the calculator
– Part-exchange valuation form, dealer promises, FCA credit-broker disclosures
## 26. Charity / Non-profit — “Riverkeep”
**Environmental charity or non-profit**
Clear water. Cool white, river green, Rubik, progress bars throughout.
– **Donation widget** with single/monthly toggle, preset amounts, custom entry, and a line showing what each amount buys
– The hero widget and the donate section share one state — the amount chosen at the top is still there at the bottom
– Campaign appeals with funding progress bars and percentages
– **Published spending breakdown** by category, four ways to volunteer, volunteer signup form
## 27. Podcast — “The Long Signal”
**Podcast or audio show**
Broadcast desk. Warm dark, signal orange, Bricolage Grotesque, animated waveform.
– **Docked audio player** that rises from the bottom when an episode is selected
– Play, pause, switch episode and close; the active row highlights in the list; the progress bar is clickable
– Episode list with guest, date and duration
– Platform subscribe buttons, guest profiles, published sponsorship rates
## 28. Interior Design — “Halcyon Interiors”
**Interior design studio**
Sample-board calm. Warm plaster, clay accent, Instrument Serif.
– **Draggable before/after comparison slider** — works with mouse, pen and touch, with a range-input fallback and multiple projects to switch between
– Room-by-room services with starting prices
– Project gallery, four-stage process
– **Three packages** including an e-design tier, client testimonials, consultation form
## 29. App Landing — “Tally”
**Mobile app landing page**
Friendly product design. Soft mint canvas, ink green, Urbanist, everything rounded.
– **Phone mockup whose screen changes when you select a feature** — every phone frame on the page updates together
– App Store and Google Play badges, star-rating block
– Three-step onboarding explainer, three pricing tiers
– App-store style reviews, FAQ, regulatory footer
## 30. Conference — “Groundwork 2026”
**Conference or event**
Printed-programme look. Near-black, signal yellow, heavy Chivo headings.
– **Two-day schedule grid filtered by day and by track** — breaks and keynotes stay visible whichever track you pick
– Live countdown to the event
– Speaker grid, three ticket tiers with sold-out and remaining-place states
– Venue section with travel and accessibility details, sponsor grid, notification signup
