#3 builder.io export & deploy

 Absolutely — I’ll guide you step by step on how to export and deploy your complete landing page from Builder.io. Think of this as your friendly "Builder.io Deployment Cheat Sheet" 📦🚀

---

✅ Step 1: Finish Designing in Builder.io

• Go to Builder.io Dashboard.

• Open your FitLife landing page project.

• Make sure you have:

  • Hero section

  • Features grid

  • Testimonial slider

  • Blog preview

  • Footer

• Click Preview to test responsiveness (toggle mobile/tablet/desktop views).

---

✅ Step 2: Publish the Page (Deploy on Builder.io’s Hosting)

1. Click "Publish" (top-right corner).

2. Choose:

   • Published to Builder Hosting ➡️ Instant deploy on builder.io subdomain.

   • Ex: https://yourproject.builder.io

⚡ Quickest way to deploy!

---

✅ Step 3: Export for Code Integration (React / Next.js / Angular / Vue)

If you want to deploy on your own website/app:

Option 1: Copy Embed Code

1. Click "Get Code" button at the top.

2. Select "Embed Code" option.

3. Copy the provided <iframe> code.

4. Paste it into your website's HTML page (like WordPress, Wix, or plain HTML).

Option 2: Export to Code Framework

1. In Builder.io, click on "Integrations".

2. Choose your framework:

   • Next.js

   • React

   • Angular

   • Vue

3. It will show SDK installation steps.
   Example (for Next.js):

   npm install @builder.io/react
   

4. Use BuilderComponent in your code:

   import { BuilderComponent, builder } from '@builder.io/react';
   
   builder.init('YOUR_PUBLIC_API_KEY');
   
   export default function Page({ content }) {
     return <BuilderComponent model="page" content={content} />;
   }
   

---

✅ Step 4: Deploy to Your Hosting (Netlify, Vercel, Firebase etc.)

If you exported code:

1. Push your code to GitHub.

2. Connect your repo to hosting:

   • Netlify

   • Vercel

   • Firebase Hosting

3. Click Deploy. Boom! 🚀

---

✅ Step 5: Optional — Use Builder.io CMS for Dynamic Content

• Go to Builder.io → Models.

• Create CMS models like Blog Posts, Testimonials.

• Bind your page components to dynamic data via Custom Fields.

• Now your FitLife landing page becomes dynamic 🔥

---

✅ Step 6: Test Everything

• Open your deployed page link.

• Test:

  • Responsiveness (mobile/tablet/desktop).

  • Blog posts loading dynamically.

  • Testimonials slider works.

  • All links in footer working.

---