#2 Builder.io Landing Page (Steps & Prompt)

"FitLife" Landing Page Builder.io Prompts & Steps Guide

---

📲 Module Steps to Build FitLife Landing Page

1. Hero Section

• Add a Section block in Builder.io.

• Use a 2-column layout: left for text, right for an image.

• Add Heading: "Transform Your Life with FitLife"

• Add Subheading: "Your personal fitness companion."

• Add Button: "Get Started"

• Add image of people working out.

• Make sure everything is centered and responsive.

Prompt:
Create a full-width responsive hero section for a fitness app called 'FitLife'. Include a big catchy headline like 'Transform Your Life with FitLife', a subheading, a call-to-action button saying 'Get Started', and an image of happy people working out. Centered layout with vibrant colors. Mobile friendly.

---

2. Features Grid

• Add a Grid block with 3 columns.

• For each column, add:

  • Icon

  • Title

  • Description

• Example Features:

  1. Personalized Workouts

  2. Track Your Progress

  3. 24/7 Expert Support

• Stack columns on mobile view.

Prompt:
Generate a 3-column features grid showcasing benefits of the FitLife app. Feature 1: 'Personalized Workouts', Feature 2: 'Track Your Progress', Feature 3: '24/7 Expert Support'. Each feature should have an icon, title, and short description. Make it responsive with stacked columns on mobile.

---

3. Testimonial Slider

• Add a Carousel or Slider block.

• Add 3 testimonial cards:

  • User photo

  • Name

  • Star rating

  • Feedback

• Add soft pastel background.

• Make slider touch and mobile-friendly.

Prompt:
Design a testimonial slider section for FitLife with 3 rotating customer reviews. Include user photos, names, star ratings, and their feedback. Use soft pastel background and smooth sliding animations. Ensure it's responsive and touch-friendly on mobile.

---

4. Blog Preview Section

• Add a Grid block with 3 columns.

• Each column is a blog card with:

  • Image

  • Title

  • Short excerpt

  • 'Read More' link

• Apply hover effect.

Prompt:
Build a blog preview section showing 3 recent articles from the FitLife blog. Each blog card should have an image, title, short excerpt, and 'Read More' link. Arrange them in a responsive grid with hover effects. Modern and clean style.

---

5. Footer with Links

• Add a Footer block.

• Include:

  • FitLife logo

  • Navigation links: About, Features, Blog, Contact

  • Social icons: Facebook, Instagram, Twitter

  • Copyright text

• Use dark background.

Prompt:
Create a footer for the FitLife landing page. Include the app logo, navigation links (About, Features, Blog, Contact), and social media icons (Facebook, Instagram, Twitter). Add copyright text at the bottom. Use dark background with light text. Fully responsive.

---

6. Fully Responsive & Dynamic

• Switch to mobile view and adjust spacing.

• Ensure all blocks resize properly.

• Test menus, sliders, and buttons on mobile.

Prompt:
Make the entire FitLife landing page fully responsive across desktop, tablet, and mobile. Ensure dynamic resizing, mobile-friendly menus, and touch-friendly sliders. Apply modern design principles with clean spacing and hierarchy.

---

🚀 Pro Tip

You can use these prompts directly inside Builder.io's AI Generate tool to quickly scaffold each section and then fine-tune the design visually!

Happy Building! 💪🏽✨