This header section includes:
1. A fixed-top navigation bar with the brand name on the left and the navigation links on the right, hidden on mobile.
2. A hamburger button that toggles the mobile navigation menu, which is hidden by default and shown on small screens.
3. The mobile navigation menu, which is a vertical list of links.
4. The navigation links are generated dynamically using the `headerNav` array provided in the project settings.
5. The header has a dark background color and white text, following the provided design guidelines.
6. The navigation links use the `text-neutral-300` class for the default state and `text-primary` for the hover state, to provide a subtle highlight effect.
7. The mobile menu button uses an SVG icon for the hamburger menu.
This header section is designed to be responsive, with the mobile menu appearing on small screens and the full navigation links hidden. The navigation links are dynamically generated to match the provided data, ensuring a consistent and maintainable structure.
Unleash Your Fitness Potential
Experience the transformative power of personalized coaching with Dan Go.
Book a Free Consultation
This hero section includes:
1. A full-width container with a dark background color and white text.
2. A centered layout with a left-aligned content block and a right-aligned image.
3. The content block includes a bold, large headline, a supporting paragraph, and a call-to-action button.
4. The call-to-action button has a primary color background and a hover effect.
5. The right-aligned image is a high-quality fitness model photo, using the first image from the provided list.
6. The image is rounded and has a subtle shadow effect.
7. The section is vertically padded for desktop and mobile layouts.
This hero section is designed to be visually striking, with a bold, high-contrast color scheme and a clear, impactful message. The layout balances text and imagery to create an engaging and persuasive introduction to the website.
Incredible Transformations
This transformations section includes:
1. A full-width container with a dark background color and white text.
2. A centered heading that introduces the "Incredible Transformations" section.
3. A grid layout with two rows, each containing two before-and-after transformation images.
4. The images are arranged in a side-by-side layout on larger screens, and stacked on smaller screens.
5. Each image is rounded and has a subtle shadow effect.
6. The images are sourced from the provided URLs in the websiteMeta section.
This transformations section is designed to showcase the impressive results that clients have achieved through Dan Go's coaching. The layout and image presentation create a clear, impactful visual narrative that highlights the dramatic changes. The consistent use of the dark background and white text maintains the overall visual style of the website.
What Our Clients Say
"Working with Dan has been life-changing. His coaching and support have helped me transform my body and mindset in ways I never thought possible."
Jane Doe
Fitness Transformation
"I was skeptical at first, but Dan's approach is unlike anything I've tried before. The results speak for themselves - I'm stronger, leaner, and more confident than ever."
John Smith
Fitness Transformation
"Dan's program has completely transformed my relationship with fitness. I'm stronger, healthier, and more motivated than ever before."
Sarah Johnson
Fitness Transformation
This testimonials section includes:
1. A full-width container with a dark background color and white text.
2. A centered heading that introduces the "What Our Clients Say" section.
3. A responsive layout with three testimonial cards, each containing:
- A blockquote with the client's testimonial text
- An image of the client
- The client's name and a brief description
4. The testimonial cards are displayed in a horizontal row on larger screens and a vertical stack on smaller screens.
5. Each testimonial card has a rounded border, a subtle drop shadow, and a neutral-800 background color.
6. The client images are sourced from the provided URLs in the websiteMeta section.
This testimonials section is designed to showcase the positive experiences of Dan Go's clients in a visually engaging and impactful way. The layout and presentation of the testimonials create a sense of social proof and credibility, reinforcing the effectiveness of Dan Go's coaching services. The consistent use of the dark background and white text maintains the overall visual style of the website.
Ready to Transform Your Fitness?
Book a free consultation with Dan Go and take the first step towards your fitness goals.
Book a Free Consultation
This CTA (Call-to-Action) section includes:
1. A full-width container with a primary color background and white text.
2. A centered layout with a left-aligned content block and a right-aligned image.
3. The content block includes a bold, large headline, a supporting paragraph, and a call-to-action button.
4. The call-to-action button has a white background and primary color text, with a hover effect.
5. The right-aligned image is a high-quality fitness coach consultation photo, using the first image from the provided list.
6. The image is rounded and has a subtle shadow effect.
7. The section is vertically padded for desktop and mobile layouts.
This CTA section is designed to encourage users to take the next step and book a free consultation with Dan Go. The layout and content are focused on driving conversions, with a clear and compelling call-to-action button. The consistent use of the primary color background and white text maintains the overall visual style of the website.
This footer section includes:
1. A full-width container with a dark background color and white text.
2. A centered layout with a left-aligned copyright notice and a right-aligned navigation links.
3. The navigation links are generated dynamically using the `footerNav` array provided in the project settings.
4. The navigation links use the `text-neutral-400` class for the default state and `text-primary` for the hover state, to provide a subtle highlight effect.
5. The footer has a consistent visual style with the rest of the website, using the dark background color and white text.
This footer section is designed to be simple and functional, providing essential information and navigation links. The dynamic generation of the navigation links ensures a maintainable and consistent structure across the website.
