Bolt (Vibe Coding) TutorialBeginner75 min read

Build a Fitness Coach Landing Page with Bolt

Build and publish a responsive fitness coaching landing page with training programs, fictional transformation stories, pricing, an accessible FAQ, and a safe demonstration consultation form.

JoezCool2Updated Aug 26, 2026

Build **ForgeFit Coaching**, a polished demonstration landing page for a fictional personal fitness coach. You will use Bolt to create a responsive React and Tailwind website with organized mock data, clear calls to action, accessible interaction, and a consultation form that does not send or store information.

forgefit-coaching-la-qer4.bolt.host

ForgeFit Coaching — Forge the body you train for

ForgeFit Coaching — personalized fitness coaching that meets you where you are. Book a free consultation and start building strength that lasts.

View Finished Project

Demonstration Content Only

ForgeFit Coaching is a fictional business. The coach, testimonials, statistics, prices, results, address, telephone number, and email address in this tutorial are mock content. Do not present fictional health results as real customer outcomes.

Before You Begin

- A free or paid Bolt account - A modern web browser - Approximately 75 minutes - No database, payment provider, API key, or customer information

Bolt

Open Bolt

Create and edit the ForgeFit Coaching project with Bolt.

Start Building with Bolt

Part 1 — Create the Brand and Hero

Start with the smallest useful version of the landing page: its brand, navigation, hero, and demonstration statistics.

What You’ll Build

- A charcoal, white, and orange visual system - A responsive sticky navigation bar - A fitness-focused hero section - Clearly labeled fictional statistics

Step 1 — Create a New Bolt Project

Create a New Bolt Project

Open Bolt, start a new project, and wait for its prompt area to appear. Use a new project so unrelated routes, components, and dependencies are not included in this lesson.

Do not connect a database or enter personal information.

Build the First Public Interface

Copy this focused prompt into Bolt.

Build the ForgeFit Foundation

Create the first version of a responsive landing page for a fictional personal fitness coaching business called ForgeFit Coaching. Use React, TypeScript, and Tailwind CSS. Build only a sticky navigation bar, a bold hero section, two calls to action, and a four-item statistics row. Use a charcoal and near-black background, energetic orange accents, high-contrast white typography, large condensed headings, rounded elements, restrained shadows, and an original professional fitness design. The navigation must link to Programs, Results, About, Pricing, and Contact section anchors that will be added later. The hero must include the headline “Forge the body you train for.”, supporting copy, a “Book a Free Consultation” button linking to

Creates the ForgeFit brand, responsive navigation, hero, and fictional statistics.

Wait for Bolt to finish and open the preview.

Step 3 — Test the First Version

Verify the Hero and Navigation

Check the first version before adding more sections.

- Resize the preview to desktop, tablet, and mobile widths. - Confirm the headline and both hero buttons remain readable. - Confirm the navigation does not cover the hero content. - Select **View Programs** and confirm it targets `#programs`, even though that section has not been added yet. - Confirm every statistic is identified as fictional demonstration data. - Use the Tab key and confirm links and buttons have visible focus indicators.

If the mobile navigation is missing or overlaps the page, ask Bolt to repair only the navigation before continuing.

Part 1 Checklist

Part 1 Complete

The public foundation is ready. The next part will add the coach, programs, and coaching process without recreating the hero.

Part 2 — Present the Coach and Programs

Expand the existing landing page with data-driven content that explains who the coach is, what programs are available, and how coaching begins.

Step 1 — Add the Coach Profile

Add the About Section

Add the Fictional Coach Profile

Extend the existing ForgeFit Coaching landing page without changing or recreating the working navigation, hero, statistics, styling, or section links. Add an About section with id="about" for a clearly fictional coach named Marcus Delgado. Include a professional coach image or safe placeholder, the title “Head Coach & Founder, ForgeFit Coaching,” a short biography, three fictional credentials, and three coaching highlights. Keep the content in an organized local data structure so it can be replaced later. Match the current charcoal, white, and orange design. Use semantic headings, descriptive image alt text, responsive two-column layout on larger screens, and a single-column mobile layout. Do not add authentication, a database, APIs, or real personal information. Run the application and fix all build and TypeScript errors.

Adds the fictional coach profile while preserving the existing foundation.

Verify that selecting **About** in the navigation scrolls to the new section and that the image, credentials, and biography stack cleanly on mobile.

Step 2 — Add Three Training Programs

Build the Programs Section

Add Training Programs

Extend the existing ForgeFit Coaching page without changing or duplicating any completed section. Add a Programs section with id="programs" using an organized local mock-data array. Create three responsive program cards: Strength Foundations, Total Body Transformation, and One-on-One Performance Coaching. Each card must show a tagline, duration, experience level, four included features, and a button linking to #contact. Highlight Total Body Transformation as the most popular choice without making unsupported health promises. Match the existing design, use semantic article elements and headings, preserve accessible focus states, and keep the cards readable at mobile, tablet, and desktop widths. Do not add payments or working enrollment. Run the application and fix all build and TypeScript errors.

Creates three data-driven program cards with consultation links.

Select each program button and confirm it targets the future consultation section. Check that the highlighted card remains readable and does not become wider than the viewport.

Step 3 — Explain How Coaching Works

Add the Three-Step Process

Add How Coaching Works

Add a “How Coaching Works” section to the existing ForgeFit Coaching page. Preserve every completed section and the established design. Use an ordered local mock-data array to display three steps: Book your free consultation, Get your custom plan, and Train, track, and progress. Give each step a number, icon, heading, and concise explanation. Use a semantic ordered list, responsive layout, clear reading order, sufficient contrast, and decorative icons hidden from assistive technology. Do not add new routes, authentication, a database, or real scheduling. Run the application and fix all build and TypeScript errors.

Adds a clear three-step explanation of the coaching process.

Confirm the steps appear in the correct order and remain understandable without relying on their icons.

Part 2 Checklist

Part 2 Complete

Visitors can now understand the fictional coach, compare programs, and see how the coaching process works.

Use sample content responsibly. Transformation stories must be visibly identified as fictional, and prices must not behave like real checkout controls.

Step 1 — Add Fictional Transformation Stories

Build the Results Section

Add Sample Transformation Stories

Extend the existing ForgeFit Coaching page with a Results section using id="results". Preserve all completed sections. Add three fictional transformation-story cards from organized local mock data. Each card should include initials, a fictional name, client description, short quote, and sample result. Place a prominent statement above the cards saying “Sample testimonials — fictional demonstration content.” Clearly mark every result as fictional, avoid guaranteed outcomes, avoid medical advice, and do not use real customer photos or identities. Use semantic figure and blockquote elements, accessible star labels, responsive cards, and the existing charcoal and orange design. Run the application and fix all build and TypeScript errors.

Adds responsibly labeled fictional testimonials and sample outcomes.

Verify that the fictional-content notice is visible before the first testimonial and that no result is presented as typical or guaranteed.

Step 2 — Add Mock Pricing Plans

Build the Pricing Section

Add Mock Pricing

Add a Pricing section with id="pricing" to the existing ForgeFit Coaching landing page. Preserve all completed work. Use organized local mock data to create three monthly plan cards named Starter, Transformation, and Performance with fictional prices of $79, $199, and $349 per month. Include a short description, four or five features, and a button linking to

Adds three mock pricing plans without introducing payments.

Check that all pricing buttons scroll toward the consultation area and never open a checkout page.

Step 3 — Review Claims and Disclosures

Check Demonstration Content

Review the statistics, testimonials, results, coach credentials, prices, and contact details currently shown.

- Confirm the statistics section says the numbers are fictional. - Confirm the Results section labels its testimonials as sample content. - Confirm individual result lines include “Sample result” or “fictional.” - Confirm pricing says the values are fictional. - Confirm there are no promises of guaranteed weight loss, pain relief, medical improvement, or athletic performance.

Do not continue until all demonstration content is unambiguous.

Part 3 Checklist

Part 3 Complete

The page now includes responsible sample social proof and pricing without representing fictional information as real.

Part 4 — Build the FAQ and Consultation Form

Add the page’s primary interactive features. The form will validate locally and demonstrate success without transmitting information.

Step 1 — Add the Accessible FAQ

Build the FAQ Accordion

Add an Accessible FAQ

Add an FAQ section with id="faq" to the existing ForgeFit Coaching page without changing or duplicating completed sections. Store six questions and answers in organized local mock data. Include questions about gym access, beginner suitability, coaching delivery, cancellation, nutrition guidance, and whether the testimonials and statistics are real. The final answer must clearly explain that the site is a demonstration and its testimonials, statistics, and results are fictional. Build an accessible accordion that opens one answer at a time, supports mouse and keyboard interaction, uses real button elements, exposes aria-expanded and aria-controls, and clearly indicates the open state. Match the current design and respect prefers-reduced-motion. Run the application and fix all build and TypeScript errors.

Creates a keyboard-accessible FAQ accordion with a disclosure question.

Use Tab to reach every question. Open questions with Enter and Space, and confirm opening a new answer closes the previous answer.

Step 2 — Add the Consultation Form

Build the Demo Consultation Form

Add the Consultation Form

Add a Contact section with id="contact" to the existing ForgeFit Coaching page. Preserve all existing sections and section links. Build a demonstration consultation form with labeled fields for full name, email address, primary fitness goal, preferred program, and a short message. Use the existing program data for the preferred-program options. Clearly state before and below the form that it is a demo and no information is sent or stored. Keep all values only in temporary React component state. Do not connect a database, email service, scheduling service, analytics service, server action, API, or third-party form provider. Use correct input types, autocomplete attributes, required indicators, semantic labels, and accessible descriptions. Match the existing responsive design. Run the application and fix all build and TypeScript errors.

Adds a safe demonstration form that keeps values only in temporary component state.

Confirm the form contains all five fields and that the demonstration notice is visible without submitting anything.

Step 3 — Add Validation and a Demo Success State

Validate the Form Locally

Add Local Validation

Improve only the existing ForgeFit consultation form. Add client-side validation for every required field, validate the email format, and require at least 10 characters in the message. Display specific inline error messages with aria-invalid and aria-describedby, and use an accessible live region for the result. When a valid form is submitted, prevent network submission and show a polished success state that explicitly says the request was received for demonstration purposes only. Include a button that resets the local form so another test can be performed. Do not transmit, log, persist, cache, or store any submitted value. Preserve all existing page sections and styling. Run the application and fix all build and TypeScript errors.

Adds accessible local validation and a non-transmitting success demonstration.

Test these observable outcomes:

1. Submit the empty form and confirm every required field receives a useful error. 2. Enter an invalid email and confirm the email-specific error appears. 3. Enter fewer than 10 characters in the message and confirm the length error appears. 4. Complete every field with mock information and submit. 5. Confirm the success state explicitly says it is a demonstration. 6. Select the reset button and confirm the empty form returns.

Never enter real personal, health, or contact information while testing.

Part 4 Checklist

Part 4 Complete

ForgeFit now has useful interaction while remaining safe for a public demonstration.

Part 5 — Polish, Test, and Publish

Finish the page with a clear call to action, complete footer, accessibility review, responsive testing, and publication.

Step 1 — Add the Final Call to Action and Footer

Complete the Page

Add the CTA and Footer

Complete the existing ForgeFit Coaching landing page without removing, recreating, or duplicating any working section. Add a final call-to-action section with the heading “Your strongest year starts today.” and a button linking to

Adds the closing call to action, navigation, and complete fictional-content disclaimer.

Select each footer link and confirm it reaches the expected section. Confirm the footer disclaimer is readable on mobile without horizontal scrolling.

Step 2 — Run the Accessibility and Responsive Review

Polish Accessibility and Responsiveness

Audit the Complete Landing Page

Review and polish the complete ForgeFit Coaching landing page while preserving its content, mock-data structures, visual identity, and working interactions. Fix any responsive overflow, overlapping sticky navigation, unreadable text, inconsistent section spacing, missing image alt text, incorrect heading order, unlabeled control, insufficient contrast, invisible keyboard focus, or inaccessible accordion state. Ensure all section anchors account for the sticky header. Make the mobile navigation usable and close it after a section link is selected. Respect prefers-reduced-motion and avoid unnecessary animation. Confirm the consultation form remains demo-only and does not send or store data. Do not add new features, routes, authentication, databases, APIs, payments, or analytics. Run the build and TypeScript checks and repair any errors.

Performs a focused accessibility, responsive-layout, and safety audit.

Verify at approximately 375px mobile, 768px tablet, and 1440px desktop widths. Zoom the browser to 200% and confirm content remains usable.

Use only the keyboard to:

- Open and close the mobile menu - Follow navigation links - Operate the FAQ - Complete the form with mock information - Submit and reset the demonstration form

Step 3 — Perform the Final Safety Test

Complete the Final Test

Complete this final review before publishing:

- Open every navigation and footer link. - Confirm all sections appear exactly once. - Confirm external images load and include descriptive alternative text. - Confirm all fictional statistics, testimonials, results, prices, credentials, and contact details are disclosed. - Confirm the form rejects empty, invalid, and too-short entries. - Confirm a valid mock submission changes only the local interface. - Refresh the page and confirm submitted values are not restored. - Confirm no authentication, database, payment, analytics, or external form service was added. - Ask Bolt to run the application build and TypeScript checks one final time.

If Bolt reports an error, repair that error and repeat only the affected checks.

Step 4 — Publish the Bolt Project

Publish and Verify the Public Page

Use Bolt’s publishing controls to publish the project. Publishing controls can change over time, so follow the labels currently shown in your Bolt workspace.

After publication:

1. Open the published URL in a new browser tab. 2. Refresh the page directly. 3. Repeat the navigation, FAQ, and demo-form checks on the published version. 4. Confirm the public page still identifies ForgeFit as fictional demonstration content. 5. Save the published URL with your project notes.

Do not publish real contact or health information in this demonstration project.

Final Project Checklist

ForgeFit Coaching Is Complete

You built and published a responsive fitness coach landing page with organized mock data, accessible interaction, responsible fictional-content disclosures, and a safe demonstration consultation form.

Optional Next Projects

Keep these enhancements outside the beginner lesson because they introduce real data, privacy, security, or third-party services:

- Replace mock content with information approved by a real coach - Connect a secure form-processing service with explicit consent and a privacy policy - Integrate scheduling through a trusted provider - Add a protected client portal with server-side authorization - Add payments only after implementing secure pricing, policies, and fulfillment workflows

Preserve the Demonstration Version

Duplicate the project before connecting real services. The completed mock-data version remains useful for testing, portfolio demonstrations, and future tutorials without exposing customer information.