<!--
FreeBuilder Newsletter Landing Page - Professional Hero's Journey Version
Drop this into a WordPress page using the Code editor.
Works with Twenty Seventeen and most themes.
Replace [newsletter] with your actual newsletter plugin shortcode.
-->

<style>
  :root{
    --primary:#2c3e50; /* professional dark blue */
    --primary-600:#34495e;
    --primary-700:#1a252f;
    --accent:#3498db; /* confident blue accent */
    --secondary:#e74c3c; /* action red */
    --bg:#f8fafc; /* clean light */
    --ink:#2c3e50; /* readable dark text */
    --muted:#7f8c8d;
    --success:#27ae60;
    --ring: rgba(52,152,219,.25);
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  
  .nl-wrap{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; 
    color:var(--ink); 
    background:var(--bg);
    line-height: 1.6;
  }
  
  .nl-container{
    max-width:1200px; 
    margin:0 auto; 
    padding:60px 40px;
  }
  
  .nl-grid{
    display:grid; 
    grid-template-columns: 1.2fr .8fr; 
    gap:60px; 
    align-items:center;
  }
  
  .nl-hero{
    background: linear-gradient(135deg, rgba(102,126,234,0.03) 0%, rgba(255,255,255,1) 100%); 
    border:1px solid #e1e8ed; 
    border-radius:20px; 
    padding:60px; 
    box-shadow:0 20px 60px rgba(44,62,80,.08);
    position: relative;
    overflow: hidden;
  }
  
  .nl-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: var(--gradient);
    opacity: 0.05;
    border-radius: 50%;
    transform: translate(50%, -50%);
  }
  
  .nl-eyebrow{
    display:inline-flex; 
    align-items: center;
    font-size:12px; 
    font-weight: 600;
    letter-spacing:.08em; 
    text-transform:uppercase; 
    color:var(--accent); 
    background:rgba(52,152,219,0.1); 
    padding:8px 16px; 
    border-radius:25px;
    margin-bottom: 20px;
  }
  
  .nl-eyebrow::before {
    content: '🚀';
    margin-right: 8px;
  }
  
  .nl-title{
    font-size: clamp(32px, 4vw, 48px); 
    line-height:1.2; 
    margin:0 0 20px; 
    color:var(--primary-700);
    font-weight: 700;
  } 
  
  .nl-sub{
    font-size: clamp(16px, 1.8vw, 20px); 
    color:var(--muted); 
    max-width:60ch; 
    line-height:1.7;
    margin-bottom: 16px;
  }
  
  .nl-highlight {
    color: var(--primary);
    font-weight: 600;
  }
  
  .nl-cta{
    display:flex; 
    gap:20px; 
    align-items:stretch; 
    margin-top:32px; 
    flex-wrap:wrap;
  }
  
  .nl-input-wrapper {
    flex:1 1 400px;
    position: relative;
  }
  
  .nl-input{
    width: 100%;
    padding:16px 20px; 
    border:2px solid #e1e8ed; 
    border-radius:12px; 
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
  }
  
  .nl-input:focus{
    border-color:var(--accent); 
    box-shadow:0 0 0 4px var(--ring);
    outline: none;
  }
  
  .nl-button{
    background:var(--secondary); 
    color:#fff; 
    padding:16px 32px; 
    border-radius:12px; 
    text-decoration:none; 
    border:none; 
    cursor:pointer; 
    font-weight:600;
    font-size: 16px;
    transition: all 0.3s ease;
    white-space: nowrap;
  }
  
  .nl-button:hover{
    background:#c0392b;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(231,76,60,0.3);
  }
  
  .nl-button-secondary {
    background: var(--accent);
    color: white;
  }
  
  .nl-button-secondary:hover {
    background: var(--primary-600);
  }
  
  .nl-hero-right {
    position: relative;
  }
  
  .nl-hero-right img{
    width:100%; 
    border-radius:16px; 
    border:1px solid #e1e8ed; 
    box-shadow:0 20px 60px rgba(44,62,80,.15);
  }
  
  .nl-badges{
    display:flex; 
    gap:12px; 
    align-items:center; 
    flex-wrap:wrap; 
    margin-top:24px; 
    color:var(--muted); 
    font-size:14px;
  }
  
  .tag{
    display:inline-block; 
    font-size:12px; 
    font-weight: 600;
    padding:6px 12px; 
    background:var(--success); 
    color:white; 
    border-radius:20px; 
    margin-right:8px;
  }
  
  .tag.secondary {
    background: var(--accent);
  }
  
  .tag.accent {
    background: var(--primary);
  }

  .nl-section{
    margin-top:100px;
  }
  
  .nl-h2{
    font-size: clamp(28px, 3vw, 36px); 
    color:var(--primary-700); 
    margin:0 0 20px;
    font-weight: 700;
    text-align: center;
  }
  
  .nl-lead{
    color:var(--muted); 
    max-width:70ch; 
    font-size:18px; 
    line-height:1.7;
    text-align: center;
    margin: 0 auto 60px;
  }

  /* Hero's Journey Stages */
  .nl-journey{
    display:grid; 
    gap:40px; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    margin-top: 60px;
  }
  
  .stage{
    background:#fff; 
    border:2px solid #e1e8ed; 
    border-radius:20px; 
    padding:40px; 
    box-shadow:0 15px 35px rgba(44,62,80,.08);
    transition: all 0.3s ease;
    position: relative;
  }
  
  .stage:hover {
    transform: translateY(-5px);
    box-shadow:0 25px 50px rgba(44,62,80,.12);
    border-color: var(--accent);
  }
  
  .stage-number {
    position: absolute;
    top: -15px;
    left: 40px;
    width: 40px;
    height: 40px;
    background: var(--gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
  }
  
  .stage h3{
    margin:20px 0 16px; 
    font-size:20px; 
    color:var(--primary);
    font-weight: 600;
  }
  
  .stage-desc {
    color: var(--muted);
    margin-bottom: 20px;
    font-style: italic;
  }
  
  .stage ul{
    margin:0;
    padding: 0;
    list-style: none;
  }
  
  .stage li{
    margin:12px 0;
    padding-left: 24px;
    position: relative;
    color: var(--ink);
  }
  
  .stage li:before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
  }

  /* Value Props */
  .nl-two{
    display:grid; 
    gap:40px; 
    grid-template-columns: 1fr 1fr;
    margin-top: 60px;
  }
  
  .card{
    background:#fff; 
    border:2px solid #e1e8ed; 
    border-radius:20px; 
    padding:40px; 
    box-shadow:0 15px 35px rgba(44,62,80,.08);
    transition: all 0.3s ease;
  }
  
  .card:hover {
    transform: translateY(-5px);
    box-shadow:0 25px 50px rgba(44,62,80,.12);
  }
  
  .card h3{
    margin:0 0 20px; 
    font-size:22px; 
    color:var(--primary);
    font-weight: 600;
  }
  
  .check{
    list-style:none; 
    padding:0; 
    margin:0;
  }
  
  .check li{
    margin:16px 0; 
    padding-left:32px; 
    position:relative; 
    line-height:1.6;
    color: var(--ink);
  }
  
  .check li:before{
    content:"✓"; 
    position:absolute; 
    left:0; 
    top:0; 
    font-weight:700;
    color: var(--success);
    font-size: 18px;
  }

  /* Social Proof */
  .nl-proof{
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap:40px;
    margin-top: 60px;
  }
  
  .proof{
    background:#fff; 
    border:2px solid #e1e8ed; 
    border-radius:20px; 
    padding:30px; 
    box-shadow:0 15px 35px rgba(44,62,80,.08);
    transition: all 0.3s ease;
  }
  
  .proof:hover {
    transform: translateY(-5px);
    box-shadow:0 25px 50px rgba(44,62,80,.12);
  }
  
  .proof img{
    width:100%; 
    height: 200px;
    object-fit: cover;
    border-radius:12px; 
    margin-bottom:20px;
  }
  
  .metric{
    display:flex; 
    gap:12px; 
    align-items:center; 
    font-weight:700; 
    color:var(--primary-700);
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .metric small{
    font-weight:500; 
    color:var(--accent);
    font-size: 14px;
  }
  
  .proof p{
    margin:0; 
    line-height:1.7;
    color: var(--muted);
  }

  /* Testimonials */
  .nl-testimonials{
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap:40px;
    margin-top: 60px;
  }
  
  .testimonial{
    background:#fff; 
    border:2px solid #e1e8ed; 
    border-radius:20px; 
    padding:40px; 
    box-shadow:0 15px 35px rgba(44,62,80,.08);
    transition: all 0.3s ease;
    position: relative;
  }
  
  .testimonial:hover {
    transform: translateY(-5px);
    box-shadow:0 25px 50px rgba(44,62,80,.12);
  }
  
  .testimonial::before {
    content: '"';
    position: absolute;
    top: 15px;
    left: 30px;
    font-size: 60px;
    color: var(--accent);
    opacity: 0.3;
  }
  
  .testimonial blockquote{
    margin:20px 0 24px; 
    font-style:italic; 
    color:var(--ink); 
    line-height:1.7;
    font-size: 16px;
  }
  
  .testimonial .who{
    font-size:14px; 
    color:var(--primary);
    font-weight: 600;
  }
  
  .testimonial .role {
    font-size: 13px;
    color: var(--muted);
  }

  /* FAQ */
  .nl-faq{
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:30px;
    margin-top: 60px;
  }
  
  details{
    background:#fff; 
    border:2px solid #e1e8ed; 
    border-radius:16px; 
    padding:24px;
    transition: all 0.3s ease;
  }
  
  details:hover {
    border-color: var(--accent);
  }
  
  details[open] {
    border-color: var(--accent);
  }
  
  summary{
    font-weight:600; 
    color:var(--primary-700); 
    cursor:pointer;
    font-size: 16px;
  }
  
  details p{
    margin:16px 0 0; 
    line-height:1.7;
    color: var(--muted);
  }

  /* Final CTA */
  .nl-cta-bar{
    margin-top:80px; 
    background: var(--gradient); 
    border-radius:20px; 
    padding:50px; 
    display:flex; 
    flex-direction: column;
    align-items:center; 
    gap:24px;
    text-align: center;
    color: white;
  }
  
  .nl-cta-bar h3 {
    font-size: 28px;
    margin: 0;
    font-weight: 700;
  }
  
  .nl-cta-bar p {
    font-size: 18px;
    margin: 0;
    opacity: 0.95;
  }
  
  .nl-cta-final {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    max-width: 600px;
  }
  
  .nl-mini{
    font-size:13px; 
    color:rgba(255,255,255,0.8);
    margin-top: 10px;
  }

  /* Responsive */
  @media (max-width: 1200px){ 
    .nl-grid{grid-template-columns: 1fr; gap:40px; text-align: center;} 
    .nl-hero { padding: 40px; }
  }
  
  @media (max-width: 960px){ 
    .nl-journey,.nl-two,.nl-proof,.nl-testimonials,.nl-faq{grid-template-columns:1fr;} 
    .nl-container{padding:40px 20px;} 
    .nl-cta, .nl-cta-final {flex-direction: column;}
    .nl-input-wrapper {flex: 1 1 100%;}
  }
  
  @media (max-width: 640px) {
    .nl-hero { padding: 30px 20px; }
    .card, .stage, .proof, .testimonial { padding: 25px; }
  }
</style>

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

    <!-- HERO -->
    <div class="nl-grid nl-hero">
      <div>
        <span class="nl-eyebrow">Free Builder Newsletter</span>
        <h1 class="nl-title">This isn't for everyone.</h1>
        <p class="nl-sub">Free Builder is for <span class="nl-highlight">those who've outgrown their job</span>, but haven't yet built their freedom.</p>
        <p class="nl-sub">Join professionals who are breaking free from corporate constraints and building <span class="nl-highlight">profitable SaaS businesses</span> using our complete system, framework, and starter kit.</p>

        <!-- Newsletter signup -->
        <div class="nl-cta">
          <div class="nl-input-wrapper">
            [newsletter_form]
          </div>
          <button class="nl-button" onclick="document.querySelector('#journey').scrollIntoView({behavior:'smooth'})">See Your Path to Freedom</button>
        </div>
        
        <div class="nl-badges">
          <span>Trusted by 1,200+ technical professionals</span>
          <span class="tag">100% Free</span>
          <span class="tag secondary">Weekly</span>
          <span class="tag accent">Real Systems</span>
        </div>
      </div>
      <div class="nl-hero-right">
        <img alt="FreeBuilder System Overview" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1400&q=80&auto=format&fit=crop" />
      </div>
    </div>

    <!-- THE HERO'S JOURNEY -->
    <div id="journey" class="nl-section">
      <h2 class="nl-h2">Your Hero's Journey: From Corporate Constraint to SaaS Success</h2>
      <p class="nl-lead">Follow the proven path that hundreds of technical professionals have used to build their freedom. Not theory—real experience distilled into actionable steps.</p>

      <div class="nl-journey">
        <div class="stage">
          <div class="stage-number">1</div>
          <h3>The Call to Adventure</h3>
          <p class="stage-desc">"I can't keep doing what I'm doing, but I'm not sure how to break through."</p>
          <ul>
            <li>Recognize you've outgrown your current role</li>
            <li>Identify the technical problem you're uniquely positioned to solve</li>
            <li>Define your 30-day freedom milestone</li>
            <li>Set boundaries to protect your energy while building</li>
          </ul>
        </div>
        
        <div class="stage">
          <div class="stage-number">2</div>
          <h3>Crossing the Threshold</h3>
          <p class="stage-desc">From "thinking about it" to actually building and shipping.</p>
          <ul>
            <li>Build your MVP using the FreeBuilder framework</li>
            <li>Ship a working product with auth, billing, and analytics</li>
            <li>Validate demand with real prospect conversations</li>
            <li>Automate your early marketing with proven systems</li>
          </ul>
        </div>
        
        <div class="stage">
          <div class="stage-number">3</div>
          <h3>The Return</h3>
          <p class="stage-desc">Achieve your first taste of true freedom—recurring revenue.</p>
          <ul>
            <li>Close your first paying customers at sustainable rates</li>
            <li>Replace a monthly bill with product income</li>
            <li>Scale operations without scaling hours</li>
            <li>Document your system for the next product</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- VALUE PROPOSITION -->
    <div class="nl-section">
      <div class="nl-two">
        <div class="card">
          <h3>What You'll Gain (30-90 days)</h3>
          <ul class="check">
            <li>A production-ready SaaS with billing, authentication, and analytics</li>
            <li>Your first validated customers without expensive ads</li>
            <li>Automated content and operations systems</li>
            <li>A repeatable framework for future products</li>
            <li>Confidence from shipping real software and collecting money</li>
          </ul>
        </div>
        
        <div class="card">
          <h3>Your New Reality</h3>
          <ul class="check">
            <li>Wake up owning a growing product that pays you monthly</li>
            <li>Control your calendar and work on your terms</li>
            <li>Minimal operational overhead with automated systems</li>
            <li>Technical skills that directly generate income</li>
            <li>Freedom to build the career you actually want</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- SOCIAL PROOF -->
    <div class="nl-section">
      <h2 class="nl-h2">Real Results from Real Builders</h2>
      <p class="nl-lead">Here's what the FreeBuilder system has produced. These aren't unicorn stories—they're realistic outcomes from following the process.</p>
      
      <div class="nl-proof">
        <div class="proof">
          <img alt="SaaS Dashboard" src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80&auto=format&fit=crop" />
          <div class="metric">EstimateAI <small>— Construction Tech SaaS</small></div>
          <p>From corporate architect to $8K MRR in 6 months. Uses FreeBuilder framework for rapid feature deployment and automated customer onboarding.</p>
        </div>
        
        <div class="proof">
          <img alt="Analytics Dashboard" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80&auto=format&fit=crop" />
          <div class="metric">DevOps Helper <small>— Infrastructure Automation</small></div>
          <p>Senior DevOps engineer built automated deployment tools. Reached $15K MRR serving teams frustrated with complex CI/CD pipelines.</p>
        </div>
        
        <div class="proof">
          <img alt="Team Collaboration" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&q=80&auto=format&fit=crop" />
          <div class="metric">QA Streamline <small>— Testing Workflow SaaS</small></div>
          <p>Former QA manager turned her testing expertise into a $12K MRR SaaS helping distributed teams coordinate better quality assurance.</p>
        </div>
      </div>
    </div>

    <!-- TESTIMONIALS -->
    <div class="nl-section">
      <h2 class="nl-h2">What Subscribers Are Saying</h2>
      <div class="nl-testimonials">
        <div class="testimonial">
          <blockquote>I was stuck in analysis paralysis for months. The FreeBuilder system gave me a clear path from idea to first customer. No fluff, just actionable steps that work.</blockquote>
          <div class="who">Sarah Chen</div>
          <div class="role">Senior Full-Stack Developer → SaaS Founder</div>
        </div>
        
        <div class="testimonial">
          <blockquote>Finally, someone who understands the technical mindset. Mouldi's approach helped me ship in 6 weeks what I'd been 'planning' for 2 years.</blockquote>
          <div class="who">Marcus Rodriguez</div>
          <div class="role">Solutions Architect → B2B SaaS Builder</div>
        </div>
        
        <div class="testimonial">
          <blockquote>The framework isn't just about building software—it's about building a business that gives you actual freedom. I replaced my salary in 8 months.</blockquote>
          <div class="who">Jennifer Park</div>
          <div class="role">Corporate PM → Independent SaaS Owner</div>
        </div>
      </div>
    </div>

    <!-- FAQ -->
    <div class="nl-section">
      <h2 class="nl-h2">Common Questions</h2>
      <div class="nl-faq">
        <details>
          <summary>Is everything really free?</summary>
          <p>Yes. The complete FreeBuilder course, framework, starter kit, and weekly newsletter are 100% free. No hidden costs, no upsells.</p>
        </details>
        
        <details>
          <summary>Do I need to quit my job to start?</summary>
          <p>No. The system is designed for nights and weekends with strict scope control. You can validate and build while keeping your day job security.</p>
        </details>
        
        <details>
          <summary>What if I'm not technical enough?</summary>
          <p>If you can code basic web applications, you can follow this system. We focus on leveraging existing tools and frameworks, not building everything from scratch.</p>
        </details>
        
        <details>
          <summary>How is this different from other courses?</summary>
          <p>This isn't theory from someone who "once built something." It's an active system I use to build and scale SaaS products right now. Real experience, real results.</p>
        </details>
        
        <details>
          <summary>How often do you send emails?</summary>
          <p>One strategic email per week with real case studies, frameworks, and tactical advice. Plus occasional deep-dives when I ship new products or systems.</p>
        </details>
        
        <details>
          <summary>What if I don't have a SaaS idea yet?</summary>
          <p>Perfect. The course starts with systematic idea validation using your existing technical expertise. You'll identify problems worth solving before writing any code.</p>
        </details>
      </div>
    </div>

    <!-- FINAL CTA -->
    <div class="nl-cta-bar">
      <h3>Ready to Build Your Freedom?</h3>
      <p>Join 1,200+ technical professionals who are breaking free from corporate constraints</p>
      
      <div class="nl-cta-final">
        <div class="nl-input-wrapper">
          [newsletter_form]
        </div>
        <button class="nl-button">Get Free Access</button>
      </div>
      
      <div class="nl-mini">Get the complete system, weekly case studies, and proven frameworks. Unsubscribe anytime.</div>
    </div>

  </div>
</section>