<!--
FreeBuilder Newsletter Landing Page (Expanded Layout)
Drop this into a WordPress page using the Code editor.
Works with Twenty Seventeen and most themes.
Replace the [newsletter_form] or [mailpoet_form id="1"] with your actual plugin shortcode.
-->

<style>
  :root{
    --primary:#3a5765; /* brand blue-slate */
    --primary-600:#2f4651;
    --primary-700:#24363e;
    --accent:#f5b942; /* warm gold accent */
    --bg:#f7fafb; /* soft light */
    --ink:#0f1d24; /* dark text */
    --muted:#5a6c75;
    --ring: rgba(58,87,101,.35);
  }
  .nl-wrap{font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg);}  
  .nl-container{max-width:1400px; margin:0 auto; padding:56px 36px;}  
  .nl-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:60px;}  
  .nl-hero{background:linear-gradient(135deg, #eaf2f6 0%, #ffffff 100%); border:1px solid #e5edf2; border-radius:22px; padding:56px; box-shadow:0 12px 36px rgba(15,29,36,.06)}
  .nl-eyebrow{display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:#e8f0f4; padding:6px 10px; border-radius:999px;}
  .nl-title{font-size: clamp(26px, 3.2vw, 36px); line-height:1.25; margin:12px 0 12px; color:var(--primary-700);} 
  .nl-sub{font-size: clamp(15px, 1.6vw, 17px); color:#2a3a42; max-width:70ch; line-height:1.6}
  .nl-cta{display:flex; gap:16px; align-items:center; margin-top:22px; flex-wrap:wrap}
  .nl-input{flex:1 1 360px; padding:14px 16px; border:1px solid #cbd8df; border-radius:12px; box-shadow:0 1px 0 #fff inset; outline:none}
  .nl-input:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
  .nl-button{background:var(--primary); color:#fff; padding:14px 20px; border-radius:12px; text-decoration:none; border:none; cursor:pointer; font-weight:600}
  .nl-button:hover{background:var(--primary-600)}
  .nl-hero-right img{width:100%; border-radius:18px; border:1px solid #e5edf2; box-shadow:0 10px 28px rgba(36,54,62,.12)}
  .nl-badges{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:13px}
  .tag{display:inline-block; font-size:12px; padding:4px 8px; background:#eef5f8; color:var(--primary-700); border-radius:999px; margin-right:6px}

  .nl-section{margin-top:80px}
  .nl-h2{font-size: clamp(20px, 2.6vw, 26px); color:var(--primary-700); margin:0 0 14px}
  .nl-lead{color:#2a3a42; max-width:78ch; font-size:16px; line-height:1.65}

  .nl-journey{display:grid; gap:28px; grid-template-columns: repeat(3, 1fr);}  
  .step{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:26px; box-shadow:0 8px 18px rgba(15,29,36,.05)}
  .step h3{margin:0 0 10px; font-size:17px; color:var(--primary)}
  .step .n{display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:999px; background:var(--accent); color:#1a2328; font-weight:700; margin-right:8px}
  .step ul{margin:12px 0 0 18px}
  .step li{margin:8px 0}

  .nl-two{display:grid; gap:32px; grid-template-columns: 1fr 1fr}
  .card{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:26px; box-shadow:0 8px 18px rgba(15,29,36,.05)}
  .card h3{margin:0 0 8px; font-size:17px; color:var(--primary)}
  .check{list-style:none; padding:0; margin:10px 0 0}
  .check li{margin:10px 0; padding-left:26px; position:relative; line-height:1.55}
  .check li:before{content:"✓"; position:absolute; left:0; top:0; font-weight:700;}

  .nl-proof{display:grid; grid-template-columns: repeat(3,1fr); gap:28px}
  .proof{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:22px; box-shadow:0 8px 18px rgba(15,29,36,.05)}
  .proof img{width:100%; border-radius:14px; margin-bottom:12px}
  .metric{display:flex; gap:12px; align-items:center; font-weight:700; color:var(--primary-700)}
  .metric small{font-weight:600; color:var(--muted)}
  .proof p{margin:8px 0 0; line-height:1.6}

  .nl-testimonials{display:grid; grid-template-columns: repeat(3, 1fr); gap:28px}
  .t{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:22px; box-shadow:0 8px 18px rgba(15,29,36,.05)}
  .t blockquote{margin:0 0 10px; font-style:italic; color:#23343c; line-height:1.6}
  .t .who{font-size:14px; color:var(--muted)}

  .nl-faq{display:grid; grid-template-columns:1fr 1fr; gap:28px}
  details{background:#fff; border:1px solid #e5edf2; border-radius:16px; padding:16px 18px}
  summary{font-weight:700; color:var(--primary-700); cursor:pointer}
  details p{margin:10px 0 0; line-height:1.6}

  .nl-cta-bar{margin-top:64px; background:linear-gradient(135deg, #dfeaf0, #ffffff); border:1px solid #e5edf2; border-radius:18px; padding:26px; display:flex; flex-wrap:wrap; align-items:center; gap:18px}
  .nl-cta-bar strong{color:var(--primary-700)}
  .nl-mini{font-size:13px; color:var(--muted)}

  /* Responsive */
  @media (max-width: 1200px){ .nl-grid{grid-template-columns: 1fr; gap:36px} }
  @media (max-width: 960px){ .nl-journey,.nl-two,.nl-proof,.nl-testimonials,.nl-faq{grid-template-columns:1fr} .nl-hero{padding:32px} .nl-container{padding:36px 20px} }
</style>

<section class="nl-wrap">
  <div class="nl-container">

    <!-- HERO -->
    <div class="nl-grid nl-hero">
      <div>
        <span class="nl-eyebrow">FreeBuilder Newsletter</span>
        <h1 class="nl-title">Build a lean, automated SaaS 100% Free </p> <p class="nl-sub">Course, Framework & Starter Kit.</p></h1>
        <p class="nl-sub">Join a weekly field report showing how real people use the <strong>FreeBuilder Framework</strong> and Starter Kit to launch cash‑flowing products and reclaim their time. Everything is <strong>100% free</strong>   <p class="nl-sub">course, framework, and starter kit.</p></p>

        <!-- Newsletter plugin area -->
        <div class="nl-cta">
          <div style="flex:1 1 360px">[newsletter]</div>
          <button class="nl-button" onclick="document.querySelector('#nl-alt').scrollIntoView({behavior:'smooth'})">See what you get</button>
        </div>
        <div class="nl-badges">
          <span>Trusted by builders in AEC + indie hackers</span>
          <span class="tag">100% Free</span><span class="tag">Weekly</span><span class="tag">Tactical</span><span class="tag">No spam</span>
        </div>
      </div>
      <div class="nl-hero-right">
        <img alt="FreeBuilder preview" src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1400&q=80&auto=format&fit=crop" />
      </div>
    </div>

    <!-- THE HERO’S JOURNEY (with FreeBuilder course) -->
    <div id="nl-alt" class="nl-section">
      <h2 class="nl-h2">Your Journey: From Employee to Owner (with the FreeBuilder Course)</h2>
      <p class="nl-lead">Follow a simple arc designed for busy 9–5s. Learn nights/weekends, ship a tiny product, automate with Prigmar, and grow into freedom.</p>

      <div class="nl-journey">
        <div class="step">
          <h3><span class="n">1</span>Call to Action → Clarity</h3>
          <ul>
            <li>Define the problem you’ll solve in AEC or your domain.</li>
            <li>Pick a razor‑thin use case (example: BidLight — AI estimation for architects).</li>
            <li>Set a 30‑day micro‑outcome and guardrails.</li>
          </ul>
        </div>
        <div class="step">
          <h3><span class="n">2</span>Trials → Build the MVP</h3>
          <ul>
            <li>Ship a narrow feature set with FreeBuilder modules (auth, billing, roles, analytics).</li>
            <li>Connect payments (Stripe), launch a waitlist, run 5 discovery calls.</li>
            <li>Automate outreach/content with Prigmar to get first users.</li>
          </ul>
        </div>
        <div class="step">
          <h3><span class="n">3</span>Transformation → First Revenue</h3>
          <ul>
            <li>Close your first 1–5 paying users at a fair monthly rate.</li>
            <li>Replace one recurring bill in your life using product income.</li>
            <li>Iterate weekly using data; harden ops with FreeBuilder modules.</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- OBJECTIVES / GAINS / DESIRED STATE -->
    <div class="nl-section nl-two">
      <div class="card">
        <h3>Objectives (30–90 days)</h3>
        <ul class="check">
          <li>Launch a working MVP (hosted, billed, permissioned).</li>
          <li>Acquire first validated users without paid ads.</li>
          <li>Automate weekly content + ops using Prigmar.</li>
          <li>Document the process so it’s repeatable.</li>
        </ul>
      </div>
      <div class="card">
        <h3>Gains You’ll Keep</h3>
        <ul class="check">
          <li>A reusable SaaS skeleton (FreeBuilder) to spin up new products.</li>
          <li>Proven outreach scripts and content loops.</li>
          <li>Billing + analytics wired from day one.</li>
          <li>Confidence from shipping and collecting money.</li>
        </ul>
      </div>
    </div>

    <div class="nl-section">
      <div class="card">
        <h3>Desired State</h3>
        <p>You wake up owning a small, growing product that pays you monthly. You control your calendar, not a manager. Your stack runs with minimal ops because FreeBuilder handles auth/billing/roles and Prigmar handles posting, scheduling, and basic support flows.</p>
      </div>
    </div>

    <!-- PROOF / CASE STUDIES -->
    <div class="nl-section">
      <h2 class="nl-h2">Proof & Case Studies</h2>
      <p class="nl-lead">Here’s what the FreeBuilder approach has produced or is producing. Full write‑ups are published inside the newsletter.</p>
      <div class="nl-proof">
        <div class="proof">
          <img alt="BidLight" src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?w=1200&q=80&auto=format&fit=crop" />
          <div class="metric">BidLight <small>— AI Estimation SaaS for AEC</small></div>
          <p>Paid pilots and a clear ROI story for architects estimating faster. Ongoing monthly productization using FreeBuilder modules.</p>
        </div>
        <div class="proof">
          <img alt="Prigmar" src="https://images.unsplash.com/photo-1556157382-97eda2d62296?w=1200&q=80&auto=format&fit=crop" />
          <div class="metric">Prigmar <small>— Content & Ops Automation</small></div>
          <p>Automates outreach, posting, and support playbooks used to acquire and retain early users without paid ads.</p>
        </div>
        <div class="proof">
          <img alt="Community Build" src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&q=80&auto=format&fit=crop" />
          <div class="metric">Community Pilots <small>— In Progress</small></div>
          <p>Documented sprints where 9–5 builders ship micro‑SaaS in 30–45 days. Transparent metrics and retros are shared in the newsletter.</p>
        </div>
      </div>
      <p class="nl-mini">Want full metrics and timelines? Subscribe and reply to any email with “case study” to get the current deck.</p>
    </div>

    <!-- TESTIMONIALS -->
    <div class="nl-section">
      <h2 class="nl-h2">What Readers Say</h2>
      <div class="nl-testimonials">
        <div class="t">
          <blockquote>“No guru fluff. Clear steps, working code, and the truth about the grind.”</blockquote>
          <div class="who">— Senior BIM Engineer</div>
        </div>
        <div class="t">
          <blockquote>“I shipped a tiny tool in 3 weeks and made my first sales call. The checklist saved me months.”</blockquote>
          <div class="who">— Indie Dev</div>
        </div>
        <div class="t">
          <blockquote>“The FreeBuilder breakdown showed exactly how to sell value, not features.”</blockquote>
          <div class="who">— Architect</div>
        </div>
      </div>
    </div>

    <!-- FAQ -->
    <div class="nl-section">
      <h2 class="nl-h2">FAQ</h2>
      <div class="nl-faq">
        <details>
          <summary>Is the course really free?</summary>
          <p>Yes. The <strong>FreeBuilder course</strong>, the <strong>framework</strong>, and the <strong>starter kit</strong> are 100% free.</p>
        </details>
        <details>
          <summary>Do I need to buy anything else?</summary>
          <p>No. Some tools we demo have free tiers. When something costs money, we explain the trade‑offs and alternatives.</p>
        </details>
        <details>
          <summary>How often do you send emails?</summary>
          <p>Once per week, plus occasional launch breakdowns or teardown specials.</p>
        </details>
        <details>
          <summary>Can I follow without leaving my job?</summary>
          <p>Yes. The system is designed for nights/weekends with strict scope control so you can protect your energy and deliver.</p>
        </details>
      </div>
    </div>

    <!-- FINAL CTA -->
    <div class="nl-cta-bar">
      <strong>Get the free course, starter kit, playbooks, and proof each week.</strong>
      <div style="flex:1 1 360px">[newsletter]</div>
      <div class="nl-mini">By subscribing, you agree to receive emails. Unsubscribe anytime.</div>
    </div>

  </div>
</section>
