Gym Website Prompt — Dark Near-Black and Electric Lime Gym & Fitness Studio Website Design for Lovable, Claude, Bolt and more

# Gym & Fitness Studio Website Prompt # websiteprompts.ai Build a bold, high-energy gym and fitness studio website called "APEX Gym" using React + Vite + TypeScript + Tailwind CSS + Framer Motion (motion/react) + shadcn/ui + lucide-react. ## Design System ### Colors ```css :root { --background: 0 0% 5%; /* near-black #0d0d0d */ --foreground: 0 0% 96%; /* white */ --primary: 76 85% 50%; /* electric lime #8fe619 */ --primary-foreground: 0 0% 5%; --surface: 0 0% 9%; --surface-raised: 0 0% 13%; --muted-foreground: 0 0% 55%; --border: 0 0% 16%; } ``` ### Typography - Import: `https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500;600&display=swap` - Headlines: Space Grotesk 700 — maximum scale, no apologies - Body: Inter 300–500 - Stats/numbers: Space Grotesk 700, lime green ## Sections ### 1. Navbar - Sticky near-black background, `backdrop-filter: blur(12px)` - Left: "APEX" Space Grotesk 700 uppercase letter-spacing 0.2em + small lucide Dumbbell icon in lime - Right: Classes · Membership · About · Timetable + "Start free trial →" lime button ### 2. Hero - Full-viewport height, near-black background - Full-bleed gym image with composition-independent overlay: `linear-gradient(to right, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.65) 55%, rgba(13,13,13,0.3) 100%)` - Content z-10 left-aligned: - Inter 600 uppercase 10px lime label: "Gym & Group Fitness — Shoreditch, London" - Space Grotesk 700 `clamp(58px, 9vw, 130px)` white: "Train Hard.\nRecover Smart.\nRepeat." - Lime accent on "Recover Smart." - Inter 300 white: "State-of-the-art equipment, 40+ classes a week, and a community that shows up every day" - CTAs: "Start free trial →" (lime filled, dark text) + "View classes" (ghost lime) - 3 white stat chips: "40+ classes/week · 2,500+ members · Open 6am–10pm" {/* Image brief: modern gym floor, rows of equipment, dramatic overhead lighting, members training, dark moody commercial photography */} ### 3. Stats Strip - Full-width lime `#8fe619` background, 80px - 4 dark Space Grotesk 700 stats: "2,500+ Members" · "40+ Classes/Week" · "3 Floors" · "Open 6am–10pm" - Framer Motion useSpring count-up on scroll, dark dividers ### 4. Classes - "Train Every Way" — Space Grotesk 700 white - 6-class 3×2 grid: - HIIT · Strength & Conditioning · Spin · Boxing · Yoga · Mobility - Each card: dark surface background, Space Grotesk 700 class name, Inter 300 muted description, lime lucide icon, "View timetable →" lime link - Hover: lime border + `box-shadow: 0 0 20px hsl(76 85% 50% / 0.15)` - Stagger fade-up on scroll ### 5. The Floor - "The Facility" — Space Grotesk 700 white - 3 full-width hover-raise rows: - Strength Floor (free weights, power racks, deadlift platforms — 12,000 sq ft) - Cardio Deck (100+ machines, live performance tracking, skylight-lit) - Studios (3 dedicated spaces for group classes, sprung floors, full AV) - Each: Space Grotesk 700 large name left + Inter 300 muted description right + lime "→" - `border-bottom: 1px solid hsl(var(--border))` - Hover: background raises to surface-raised, lime text ### 6. Membership - "Choose Your Plan" — Space Grotesk 700 white - 3 membership cards: - Flex (off-peak access, £35/mo) - Full Access (unlimited gym + 10 classes/mo, £55/mo — featured middle, lime border + "Best value" badge) - All In (unlimited gym + unlimited classes + 1 PT session/mo, £89/mo) - Each card: Space Grotesk 700 name, Inter 300 feature list with lucide Check in lime - Hover: lime border + glow ### 7. Trainers - "Our Coaches" — Space Grotesk 700 white - 3 trainer cards: portrait (square, no border-radius), Space Grotesk 700 white name, lime specialty chip, Inter 300 muted bio - Hover: lime border + glow {/* Image brief: athletic personal trainer in gym, black athletic wear, professional confident pose, dark dramatic lighting */} {/* Image brief: female fitness coach, gym background, strong athletic build, motivating expression */} {/* Image brief: male strength coach, weights rack behind, dark gym, editorial commercial photography */} ### 8. Testimonials - Surface-raised section - 3 cards: 5-star row in lime, Inter 300 italic white quote, member name + membership type in Inter 10px muted ### 9. Free Trial CTA - Full-width, surface raised, lime top border 3px - Space Grotesk 700 white `clamp(40px, 5vw, 72px)`: "Your First Week Is on Us" - Inter 300 muted: "No credit card · No commitment · No excuses" - "Start your free trial →" lime button (dark text) - "Join online in 2 minutes · Cancel anytime" Inter 10px muted below ### 10. Footer - Near-black, "APEX" lime wordmark - Instagram · TikTok · YouTube icons - "© 2026 APEX Gym · 88 Curtain Road, Shoreditch, London EC2A · Open 6am–10pm Daily" ## Animations - Hero text: aggressive stagger fade-up on mount (y: 40→0, 0.6s, 0.08s delay) - Stats strip: count-up on scroll - Classes grid: stagger fade-up on scroll - All hover: 0.15s ease ## Responsive - Mobile: stacked hero, single-column classes, hamburger nav ## Full Copy - Wordmark: "APEX" - Hero: "Train Hard. Recover Smart. Repeat." / "State-of-the-art equipment, 40+ classes a week, and a community that shows up every day" - Classes: HIIT · Strength & Conditioning · Spin · Boxing · Yoga · Mobility - Memberships: Flex £35/mo · Full Access £55/mo · All In £89/mo - Stats: 2,500+ Members · 40+ Classes/Week · 3 Floors · Open 6am–10pm - Testimonial: "I've been a member for 2 years. The equipment is always available, the coaches are excellent, and the classes are genuinely challenging." — Marcus T., Full Access member - CTA: "Your First Week Is on Us" / "No credit card · No commitment · No excuses"