<!--
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{<br />
    --primary:#3a5765; /* brand blue-slate */<br />
    --primary-600:#2f4651;<br />
    --primary-700:#24363e;<br />
    --accent:#f5b942; /* warm gold accent */<br />
    --bg:#f7fafb; /* soft light */<br />
    --ink:#0f1d24; /* dark text */<br />
    --muted:#5a6c75;<br />
    --ring: rgba(58,87,101,.35);<br />
  }<br />
  .nl-wrap{font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg);}<br />
  .nl-container{max-width:1400px; margin:0 auto; padding:56px 36px;}<br />
  .nl-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:60px;}<br />
  .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)}<br />
  .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;}<br />
  .nl-title{font-size: clamp(26px, 3.2vw, 36px); line-height:1.25; margin:12px 0 12px; color:var(--primary-700);}<br />
  .nl-sub{font-size: clamp(15px, 1.6vw, 17px); color:#2a3a42; max-width:70ch; line-height:1.6}<br />
  .nl-cta{display:flex; gap:16px; align-items:center; margin-top:22px; flex-wrap:wrap}<br />
  .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}<br />
  .nl-input:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}<br />
  .nl-button{background:var(--primary); color:#fff; padding:14px 20px; border-radius:12px; text-decoration:none; border:none; cursor:pointer; font-weight:600}<br />
  .nl-button:hover{background:var(--primary-600)}<br />
  .nl-hero-right img{width:100%; border-radius:18px; border:1px solid #e5edf2; box-shadow:0 10px 28px rgba(36,54,62,.12)}<br />
  .nl-badges{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-size:13px}<br />
  .tag{display:inline-block; font-size:12px; padding:4px 8px; background:#eef5f8; color:var(--primary-700); border-radius:999px; margin-right:6px}</p>
<p>  .nl-section{margin-top:80px}<br />
  .nl-h2{font-size: clamp(20px, 2.6vw, 26px); color:var(--primary-700); margin:0 0 14px}<br />
  .nl-lead{color:#2a3a42; max-width:78ch; font-size:16px; line-height:1.65}</p>
<p>  .nl-journey{display:grid; gap:28px; grid-template-columns: repeat(3, 1fr);}<br />
  .step{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:26px; box-shadow:0 8px 18px rgba(15,29,36,.05)}<br />
  .step h3{margin:0 0 10px; font-size:17px; color:var(--primary)}<br />
  .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}<br />
  .step ul{margin:12px 0 0 18px}<br />
  .step li{margin:8px 0}</p>
<p>  .nl-two{display:grid; gap:32px; grid-template-columns: 1fr 1fr}<br />
  .card{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:26px; box-shadow:0 8px 18px rgba(15,29,36,.05)}<br />
  .card h3{margin:0 0 8px; font-size:17px; color:var(--primary)}<br />
  .check{list-style:none; padding:0; margin:10px 0 0}<br />
  .check li{margin:10px 0; padding-left:26px; position:relative; line-height:1.55}<br />
  .check li:before{content:"✓"; position:absolute; left:0; top:0; font-weight:700;}</p>
<p>  .nl-proof{display:grid; grid-template-columns: repeat(3,1fr); gap:28px}<br />
  .proof{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:22px; box-shadow:0 8px 18px rgba(15,29,36,.05)}<br />
  .proof img{width:100%; border-radius:14px; margin-bottom:12px}<br />
  .metric{display:flex; gap:12px; align-items:center; font-weight:700; color:var(--primary-700)}<br />
  .metric small{font-weight:600; color:var(--muted)}<br />
  .proof p{margin:8px 0 0; line-height:1.6}</p>
<p>  .nl-testimonials{display:grid; grid-template-columns: repeat(3, 1fr); gap:28px}<br />
  .t{background:#fff; border:1px solid #e5edf2; border-radius:18px; padding:22px; box-shadow:0 8px 18px rgba(15,29,36,.05)}<br />
  .t blockquote{margin:0 0 10px; font-style:italic; color:#23343c; line-height:1.6}<br />
  .t .who{font-size:14px; color:var(--muted)}</p>
<p>  .nl-faq{display:grid; grid-template-columns:1fr 1fr; gap:28px}<br />
  details{background:#fff; border:1px solid #e5edf2; border-radius:16px; padding:16px 18px}<br />
  summary{font-weight:700; color:var(--primary-700); cursor:pointer}<br />
  details p{margin:10px 0 0; line-height:1.6}</p>
<p>  .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}<br />
  .nl-cta-bar strong{color:var(--primary-700)}<br />
  .nl-mini{font-size:13px; color:var(--muted)}</p>
<p>  /* Responsive */<br />
  @media (max-width: 1200px){ .nl-grid{grid-template-columns: 1fr; gap:36px} }<br />
  @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} }<br />
</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">Escape the 9–5. Build a lean, automated SaaS — 100% Free Course, Framework &amp; Starter Kit.</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> — course, framework, and starter kit.</p>
<!-- Newsletter plugin area -->
<div class="nl-cta">
<div style="flex: 1 1 360px;">[newsletter_form]</div>
<button class="nl-button">See what you get</button>

</div>
<div class="nl-badges">Trusted by builders in AEC + indie hackers
<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 src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1400&amp;q=80&amp;auto=format&amp;fit=crop" alt="FreeBuilder preview" /></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>
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.

</div>
</div>
<!-- PROOF / CASE STUDIES -->
<div class="nl-section">
<h2 class="nl-h2">Proof &amp; 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 src="https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" alt="BidLight" />
<div class="metric">BidLight <small>— AI Estimation SaaS for AEC</small></div>
Paid pilots and a clear ROI story for architects estimating faster. Ongoing monthly productization using FreeBuilder modules.

</div>
<div class="proof"><img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" alt="Prigmar" />
<div class="metric">Prigmar <small>— Content &amp; Ops Automation</small></div>
Automates outreach, posting, and support playbooks used to acquire and retain early users without paid ads.

</div>
<div class="proof"><img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=1200&amp;q=80&amp;auto=format&amp;fit=crop" alt="Community Build" />
<div class="metric">Community Pilots <small>— In Progress</small></div>
Documented sprints where 9–5 builders ship micro‑SaaS in 30–45 days. Transparent metrics and retros are shared in the newsletter.

</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>Yes. The <strong>FreeBuilder course</strong>, the <strong>framework</strong>, and the <strong>starter kit</strong> are 100% free.

</details><details>
<summary>Do I need to buy anything else?</summary>No. Some tools we demo have free tiers. When something costs money, we explain the trade‑offs and alternatives.

</details><details>
<summary>How often do you send emails?</summary>Once per week, plus occasional launch breakdowns or teardown specials.

</details><details>
<summary>Can I follow without leaving my job?</summary>Yes. The system is designed for nights/weekends with strict scope control so you can protect your energy and deliver.

</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_form]</div>
<div class="nl-mini">By subscribing, you agree to receive emails. Unsubscribe anytime.</div>
</div>
</div>
</section>