Landing Pages

┌─────────────────────────────────────────────────────────────────┐
│  HERO SECTION (Above the Fold)                                  │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  Logo + Navigation (minimal)                             │   │
│  │                                                          │   │
│  │  HEADLINE: Clear Value Proposition                       │   │
│  │  SUBHEADLINE: Supporting benefit statement               │   │
│  │                                                          │   │
│  │  [PRIMARY CTA BUTTON]    [Secondary Link]                │   │
│  │                                                          │   │
│  │  Trust Signal: "Trusted by 10,000+ companies"           │   │
│  └─────────────────────────────────────────────────────────┘   │
├─────────────────────────────────────────────────────────────────┤
│  SOCIAL PROOF                                                   │
│  Logo bar: Google | Microsoft | Airbnb | Stripe | Nike         │
├─────────────────────────────────────────────────────────────────┤
│  PROBLEM/SOLUTION                                               │
│  "Are you struggling with [pain point]?"                       │
│  "Here's how we solve it..."                                   │
├─────────────────────────────────────────────────────────────────┤
│  FEATURES/BENEFITS                                              │
│  [Icon] Benefit 1  |  [Icon] Benefit 2  |  [Icon] Benefit 3   │
├─────────────────────────────────────────────────────────────────┤
│  HOW IT WORKS                                                   │
│  Step 1 → Step 2 → Step 3                                      │
├─────────────────────────────────────────────────────────────────┤
│  TESTIMONIALS                                                   │
│  "Quote from customer" - Name, Title, Company                  │
├─────────────────────────────────────────────────────────────────┤
│  FAQ                                                            │
│  Common objections addressed                                   │
├─────────────────────────────────────────────────────────────────┤
│  FINAL CTA                                                      │
│  [PRIMARY CTA BUTTON]                                          │
└─────────────────────────────────────────────────────────────────┘

// React component for lead generation landing page
import { useState } from 'react';

interface LeadFormData {
  email: string;
  name: string;
  company: string;
}

export function LeadGenLandingPage() {
  const [formData, setFormData] = useState<LeadFormData>({
    email: '',
    name: '',
    company: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    // Track form submission
    window.gtag?.('event', 'generate_lead', {
      form_name: 'ebook_download',
      form_destination: '/thank-you'
    });

    await submitLead(formData);
    window.location.href = '/thank-you';
  };

  return (
    <div className="landing-page">
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-content">
          <span className="badge">Free Download</span>
          <h1>The Ultimate Guide to Marketing Attribution</h1>
          <p className="subheadline">
            Learn how leading brands measure marketing ROI and optimize
            ad spend with our comprehensive 50-page guide.
          </p>

          {/* Form */}
          <form onSubmit={handleSubmit} className="lead-form">
            <input
              type="email"
              placeholder="Work email"
              value={formData.email}
              onChange={(e) => setFormData({...formData, email: e.target.value})}
              required
            />
            <button type="submit" disabled={isSubmitting}>
              {isSubmitting ? 'Sending...' : 'Download Free Guide'}
            </button>
          </form>

          <p className="trust-signal">
            <span className="checkmark">✓</span> No credit card required
            <span className="separator">•</span>
            <span className="checkmark">✓</span> Instant access
          </p>
        </div>

        <div className="hero-image">
          <img src="/ebook-mockup.png" alt="Guide Preview" />
        </div>
      </section>

      {/* Social Proof */}
      <section className="social-proof">
        <p>Trusted by marketing teams at</p>
        <div className="logo-bar">
          {['Google', 'Meta', 'Shopify', 'Hubspot'].map(logo => (
            <img key={logo} src={`/logos/${logo}.svg`} alt={logo} />
          ))}
        </div>
      </section>

      {/* What's Inside */}
      <section className="benefits">
        <h2>What You'll Learn</h2>
        <div className="benefits-grid">
          <BenefitCard
            icon="📊"
            title="Attribution Models Explained"
            description="Understand first-touch, last-touch, linear, and data-driven models"
          />
          <BenefitCard
            icon="🎯"
            title="Platform Setup Guides"
            description="Step-by-step instructions for GA4, Meta, and Google Ads"
          />
          <BenefitCard
            icon="💰"
            title="Budget Optimization"
            description="Learn to reallocate spend based on true performance"
          />
        </div>
      </section>

      {/* Testimonial */}
      <section className="testimonial">
        <blockquote>
          "This guide helped us reduce CAC by 40% by finally understanding
          which channels actually drive conversions."
        </blockquote>
        <cite>
          <img src="/testimonial-avatar.jpg" alt="Sarah Chen" />
          <div>
            <strong>Sarah Chen</strong>
            <span>VP Marketing, TechCorp</span>
          </div>
        </cite>
      </section>

      {/* Final CTA */}
      <section className="final-cta">
        <h2>Ready to Master Attribution?</h2>
        <button onClick={() => document.querySelector('.lead-form')?.scrollIntoView({ behavior: 'smooth' })}>
          Get Your Free Guide
        </button>
      </section>
    </div>
  );
}

export function SaaSLandingPage() {
  return (
    <div className="saas-landing">
      {/* Hero with Product Demo */}
      <section className="hero">
        <nav className="minimal-nav">
          <Logo />
          <div className="nav-links">
            <a href="#features">Features</a>
            <a href="#pricing">Pricing</a>
            <a href="/login">Sign In</a>
            <a href="/signup" className="cta-nav">Start Free Trial</a>
          </div>
        </nav>

        <div className="hero-content">
          <h1>Attribution that actually works</h1>
          <p className="subheadline">
            Stop guessing which marketing channels drive revenue.
            Get accurate attribution in minutes, not months.
          </p>

          <div className="cta-group">
            <a href="/signup" className="btn-primary">
              Start Free Trial
            </a>
            <a href="#demo" className="btn-secondary">
              <PlayIcon /> Watch Demo
            </a>
          </div>

          <p className="no-cc">No credit card required • 14-day free trial</p>
        </div>

        <div className="product-screenshot">
          <img
            src="/dashboard-screenshot.png"
            alt="Attribution Dashboard"
            loading="eager"
          />
        </div>
      </section>

      {/* Problem Statement */}
      <section className="problem">
        <h2>The attribution problem is real</h2>
        <div className="stats-grid">
          <StatCard
            stat="73%"
            description="of marketers can't accurately measure ROI"
          />
          <StatCard
            stat="$21B"
            description="wasted on ineffective ad spend yearly"
          />
          <StatCard
            stat="117%"
            description="overcounting from platform self-reporting"
          />
        </div>
      </section>

      {/* Solution */}
      <section className="solution">
        <h2>Here's how we fix it</h2>
        <div className="feature-showcase">
          <FeatureTab
            title="Unified Data"
            description="Connect all your marketing platforms in minutes"
            image="/feature-unified.png"
          />
          <FeatureTab
            title="True Attribution"
            description="See the real customer journey, not platform-claimed credit"
            image="/feature-attribution.png"
          />
          <FeatureTab
            title="Actionable Insights"
            description="Know exactly where to increase or decrease spend"
            image="/feature-insights.png"
          />
        </div>
      </section>

      {/* Social Proof with Numbers */}
      <section className="results">
        <h2>Real results from real customers</h2>
        <div className="results-grid">
          <ResultCard
            metric="+156%"
            label="Average ROAS improvement"
          />
          <ResultCard
            metric="-34%"
            label="Reduction in wasted ad spend"
          />
          <ResultCard
            metric="2hrs"
            label="Setup time (not weeks)"
          />
        </div>
      </section>

      {/* Testimonials Carousel */}
      <section className="testimonials">
        <TestimonialCarousel testimonials={testimonials} />
      </section>

      {/* Pricing */}
      <section id="pricing" className="pricing">
        <h2>Simple, transparent pricing</h2>
        <PricingTable plans={plans} />
      </section>

      {/* FAQ */}
      <section className="faq">
        <h2>Frequently asked questions</h2>
        <FAQAccordion items={faqItems} />
      </section>

      {/* Final CTA */}
      <section className="final-cta">
        <h2>Ready to see your true marketing ROI?</h2>
        <p>Join 5,000+ marketers who've taken control of their attribution.</p>
        <a href="/signup" className="btn-primary btn-large">
          Start Your Free Trial
        </a>
      </section>
    </div>
  );
}

interface AIDAStructure {
  attention: {
    headline: string;
    hook: string;
  };
  interest: {
    problem: string;
    agitation: string;
  };
  desire: {
    solution: string;
    benefits: string[];
    proof: string;
  };
  action: {
    cta: string;
    urgency: string;
  };
}

// Example implementation
const landingPageCopy: AIDAStructure = {
  attention: {
    headline: "Stop Wasting 40% of Your Ad Budget",
    hook: "Most marketers can't tell which campaigns actually drive revenue."
  },
  interest: {
    problem: "Platform self-reporting inflates numbers by 117% on average.",
    agitation: "You're making million-dollar decisions based on flawed data."
  },
  desire: {
    solution: "Get accurate, unified attribution across all channels.",
    benefits: [
      "See the true customer journey",
      "Know exactly where to spend more (and less)",
      "Prove marketing ROI to leadership"
    ],
    proof: "Used by 5,000+ marketing teams including Shopify, Notion, and Webflow."
  },
  action: {
    cta: "Start Your Free Trial",
    urgency: "14-day trial • No credit card required • Setup in 10 minutes"
  }
};

const headlineFormulas = {
  // Value proposition headlines
  valueProposition: [
    "[Achieve Result] Without [Pain Point]",
    "The [Adjective] Way to [Desired Outcome]",
    "[Product] That Actually [Delivers Benefit]"
  ],

  // Problem-focused headlines
  problemFocused: [
    "Stop [Pain Point]. Start [Desired State]",
    "Why [Target Audience] Are Switching From [Old Way]",
    "The Hidden Cost of [Current Problem]"
  ],

  // Social proof headlines
  socialProof: [
    "How [Customer] [Achieved Result] in [Timeframe]",
    "Join [Number]+ [Target Audience] Who [Benefit]",
    "The [Category] Trusted by [Notable Companies]"
  ],

  // Curiosity headlines
  curiosity: [
    "The [Counterintuitive] Way to [Result]",
    "What [Experts] Won't Tell You About [Topic]",
    "[Number] [Industry] Secrets for [Outcome]"
  ],

  // Urgency headlines
  urgency: [
    "[Limited Time]: Get [Offer] Before [Deadline]",
    "Last Chance to [Achieve Result]",
    "Only [Number] Spots Left for [Offer]"
  ]
};

// Headline scoring function
function scoreHeadline(headline: string): HeadlineScore {
  const criteria = {
    hasNumber: /\d+/.test(headline),
    underSixtyChars: headline.length <= 60,
    actionVerb: /get|start|discover|learn|stop|boost|grow/i.test(headline),
    benefit: /save|increase|improve|faster|easier|more/i.test(headline),
    specificity: /\d+%|\$\d+|\d+ (days|hours|minutes)/.test(headline)
  };

  const score = Object.values(criteria).filter(Boolean).length;

  return {
    score,
    maxScore: 5,
    criteria,
    recommendation: score >= 4
      ? 'Strong headline'
      : 'Consider adding: ' + Object.entries(criteria)
          .filter(([_, v]) => !v)
          .map(([k]) => k)
          .join(', ')
  };
}

const ctaFormulas = {
  // Action-focused
  actionCTAs: [
    "Start [Doing Benefit]",
    "Get [Desired Outcome]",
    "Claim Your [Offer]",
    "See How It Works"
  ],

  // Value-focused
  valueCTAs: [
    "Get Free Access",
    "Try It Free",
    "Start Saving Today",
    "Unlock [Benefit]"
  ],

  // Low-commitment
  lowCommitmentCTAs: [
    "See Demo",
    "Learn More",
    "View Examples",
    "Calculate Your [Metric]"
  ]
};

// A/B test results for CTA copy
const ctaTestResults = {
  test1: {
    control: { text: "Submit", conversionRate: 2.1 },
    variant: { text: "Get My Free Guide", conversionRate: 3.8 },
    lift: "+81%"
  },
  test2: {
    control: { text: "Sign Up", conversionRate: 1.5 },
    variant: { text: "Start My Free Trial", conversionRate: 2.4 },
    lift: "+60%"
  },
  test3: {
    control: { text: "Download", conversionRate: 4.2 },
    variant: { text: "Send Me the Guide", conversionRate: 5.1 },
    lift: "+21%"
  }
};

/* Visual hierarchy through size, color, and spacing */
.landing-page {
  /* Typography scale */
  --font-size-hero: 56px;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 24px;
  --font-size-body: 18px;
  --font-size-small: 14px;

  /* Color hierarchy */
  --color-primary: #2563eb;      /* CTAs, links */
  --color-text-primary: #111827; /* Headlines */
  --color-text-secondary: #6b7280; /* Body text */
  --color-text-muted: #9ca3af;   /* Captions */

  /* Spacing scale */
  --space-section: 120px;
  --space-element: 48px;
  --space-text: 24px;
}

.hero h1 {
  font-size: var(--font-size-hero);
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-text);
}

.hero .subheadline {
  font-size: var(--font-size-h3);
  color: var(--color-text-secondary);
  font-weight: 400;
  line-height: 1.5;
  max-width: 600px;
}

/* CTA button prominence */
.btn-primary {
  background: var(--color-primary);
  color: white;
  font-size: var(--font-size-body);
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

// F-Pattern for content-heavy pages
function FPatternLayout() {
  return (
    <div className="f-pattern">
      {/* Top horizontal scan */}
      <header className="horizontal-scan-1">
        <Logo />
        <Navigation />
        <h1>Main Headline Here</h1>
      </header>

      {/* Second horizontal scan */}
      <section className="horizontal-scan-2">
        <h2>Secondary Important Content</h2>
        <p>Supporting information users will scan</p>
      </section>

      {/* Left-aligned vertical scan */}
      <main className="vertical-scan">
        <article>
          <h3>Feature 1</h3>
          <p>Description...</p>
        </article>
        <article>
          <h3>Feature 2</h3>
          <p>Description...</p>
        </article>
        <article>
          <h3>Feature 3</h3>
          <p>Description...</p>
        </article>
      </main>
    </div>
  );
}

// Z-Pattern for simple landing pages
function ZPatternLayout() {
  return (
    <div className="z-pattern">
      {/* Top-left: Logo/Brand */}
      {/* Top-right: Navigation/CTA */}
      <header className="z-top">
        <Logo />
        <nav>
          <a href="#features">Features</a>
          <a href="/signup" className="cta">Sign Up</a>
        </nav>
      </header>

      {/* Center: Main content (diagonal scan) */}
      <main className="z-middle">
        <h1>Bold Value Proposition</h1>
        <p>Supporting message that guides eye diagonally</p>
        <img src="/hero-image.png" alt="Product" />
      </main>

      {/* Bottom-left: Secondary info */}
      {/* Bottom-right: Primary CTA */}
      <footer className="z-bottom">
        <p>Trusted by 10,000+ companies</p>
        <button className="primary-cta">Get Started Free</button>
      </footer>
    </div>
  );
}

// Mobile-first landing page component
function MobileLandingPage() {
  return (
    <div className="mobile-landing">
      {/* Sticky CTA */}
      <div className="sticky-cta-bar">
        <button className="btn-primary full-width">
          Start Free Trial
        </button>
      </div>

      {/* Thumb-friendly navigation */}
      <nav className="mobile-nav">
        <button className="hamburger" aria-label="Menu">
          <span></span>
        </button>
        <Logo />
        <a href="/signup" className="btn-small">Sign Up</a>
      </nav>

      {/* Hero optimized for small screens */}
      <section className="hero-mobile">
        <h1>Attribution That Works</h1>
        <p>Stop wasting ad budget on channels that don't convert.</p>

        <button className="btn-primary">
          Start Free Trial
        </button>

        {/* Scrollable horizontal proof */}
        <div className="logo-scroll">
          {logos.map(logo => (
            <img key={logo} src={logo} alt="" />
          ))}
        </div>
      </section>

      {/* Collapsible sections */}
      <Accordion>
        <AccordionItem title="How It Works">
          <HowItWorks />
        </AccordionItem>
        <AccordionItem title="Features">
          <Features />
        </AccordionItem>
        <AccordionItem title="Pricing">
          <Pricing />
        </AccordionItem>
      </Accordion>

      {/* Bottom sheet form */}
      <BottomSheet trigger="Get Started">
        <LeadForm />
      </BottomSheet>
    </div>
  );
}

// Mobile-specific styles
const mobileStyles = `
  /* Touch targets minimum 44x44px */
  .btn-primary {
    min-height: 44px;
    padding: 12px 24px;
  }

  /* Readable text without zooming */
  body {
    font-size: 16px; /* Prevents iOS zoom on input focus */
  }

  /* Thumb-friendly zones */
  .sticky-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: white;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    z-index: 100;
  }

  /* Single column layout */
  .features-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Reduce cognitive load */
  .hero-mobile h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero-mobile p {
    font-size: 18px;
    margin-bottom: 24px;
  }
`;

// Performance optimization checklist
const performanceChecklist = {
  images: {
    format: 'WebP or AVIF for modern browsers',
    sizing: 'Serve appropriately sized images per viewport',
    loading: 'Lazy load below-fold images',
    priority: 'Preload LCP image'
  },

  fonts: {
    subsetting: 'Only load characters you need',
    display: 'font-display: swap for faster text rendering',
    preload: 'Preload critical fonts'
  },

  javascript: {
    splitting: 'Code split non-critical JS',
    defer: 'Defer non-critical scripts',
    bundleSize: 'Keep initial JS under 100KB'
  },

  css: {
    critical: 'Inline critical CSS',
    purge: 'Remove unused CSS',
    minify: 'Minify and compress'
  }
};

// Next.js Image optimization
import Image from 'next/image';

function OptimizedHero() {
  return (
    <section className="hero">
      {/* Preloaded, priority LCP image */}
      <Image
        src="/hero-dashboard.png"
        alt="Dashboard preview"
        width={1200}
        height={800}
        priority
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
      />
    </section>
  );
}

// Font optimization
function FontOptimization() {
  return (
    <Head>
      {/* Preconnect to font origin */}
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

      {/* Preload critical font */}
      <link
        rel="preload"
        href="/fonts/inter-var.woff2"
        as="font"
        type="font/woff2"
        crossOrigin="anonymous"
      />

      {/* Font-display swap */}
      <style>{`
        @font-face {
          font-family: 'Inter';
          src: url('/fonts/inter-var.woff2') format('woff2');
          font-display: swap;
        }
      `}</style>
    </Head>
  );
}

// Comprehensive landing page tracking
class LandingPageAnalytics {
  constructor() {
    this.initScrollTracking();
    this.initElementVisibility();
    this.initFormTracking();
    this.initCTATracking();
  }

  // Track scroll depth milestones
  initScrollTracking() {
    let maxScroll = 0;
    const milestones = [25, 50, 75, 90, 100];
    const fired = new Set<number>();

    const handler = () => {
      const scrollPercent = Math.round(
        (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
      );

      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;

        milestones.forEach(milestone => {
          if (scrollPercent >= milestone && !fired.has(milestone)) {
            fired.add(milestone);
            this.track('scroll_depth', {
              percent: milestone,
              page: window.location.pathname
            });
          }
        });
      }
    };

    window.addEventListener('scroll', this.throttle(handler, 200), { passive: true });
  }

  // Track when key elements become visible
  initElementVisibility() {
    const elements = [
      { selector: '.hero', name: 'hero_viewed' },
      { selector: '.social-proof', name: 'social_proof_viewed' },
      { selector: '.features', name: 'features_viewed' },
      { selector: '.pricing', name: 'pricing_viewed' },
      { selector: '.final-cta', name: 'final_cta_viewed' }
    ];

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const element = elements.find(el =>
              entry.target.matches(el.selector)
            );
            if (element) {
              this.track(element.name, {
                time_to_view: performance.now()
              });
              observer.unobserve(entry.target);
            }
          }
        });
      },
      { threshold: 0.5 }
    );

    elements.forEach(el => {
      const element = document.querySelector(el.selector);
      if (element) observer.observe(element);
    });
  }

  // Track form interactions
  initFormTracking() {
    document.querySelectorAll('form').forEach(form => {
      const formName = form.getAttribute('data-form-name') || form.id;

      // Track form start
      let formStarted = false;
      form.addEventListener('focusin', () => {
        if (!formStarted) {
          formStarted = true;
          this.track('form_start', { form_name: formName });
        }
      });

      // Track field completion
      form.querySelectorAll('input, textarea, select').forEach(field => {
        field.addEventListener('blur', () => {
          if ((field as HTMLInputElement).value) {
            this.track('form_field_complete', {
              form_name: formName,
              field_name: field.getAttribute('name')
            });
          }
        });
      });

      // Track submission
      form.addEventListener('submit', () => {
        this.track('form_submit', {
          form_name: formName,
          fields_completed: this.getCompletedFieldCount(form)
        });
      });
    });
  }

  // Track CTA clicks
  initCTATracking() {
    document.querySelectorAll('[data-cta]').forEach(cta => {
      cta.addEventListener('click', () => {
        this.track('cta_click', {
          cta_text: cta.textContent?.trim(),
          cta_location: cta.getAttribute('data-cta-location'),
          page_section: this.getCurrentSection(cta)
        });
      });
    });
  }

  track(event: string, params: Record<string, any>) {
    // Google Analytics 4
    window.gtag?.('event', event, params);

    // Console for debugging
    if (process.env.NODE_ENV === 'development') {
      console.log('Track:', event, params);
    }
  }

  throttle(fn: Function, delay: number) {
    let lastCall = 0;
    return (...args: any[]) => {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        fn(...args);
      }
    };
  }

  getCompletedFieldCount(form: HTMLFormElement): number {
    return Array.from(form.elements).filter((el: any) =>
      el.value && el.value.trim() !== ''
    ).length;
  }

  getCurrentSection(element: Element): string {
    return element.closest('section')?.getAttribute('data-section') || 'unknown';
  }
}

// Initialize on page load
new LandingPageAnalytics();

const testingIdeas = {
  headlines: [
    "Test benefit-focused vs feature-focused",
    "Test question vs statement",
    "Test with/without numbers",
    "Test first-person vs second-person"
  ],

  socialProof: [
    "Logo bar vs customer count",
    "Video testimonial vs text quote",
    "Star ratings vs specific metrics",
    "Industry-specific vs general testimonials"
  ],

  cta: [
    "Button color/contrast",
    "Action-focused vs benefit-focused copy",
    "Single CTA vs multiple CTAs",
    "Button size and placement"
  ],

  forms: [
    "Number of fields",
    "Single-step vs multi-step",
    "Inline validation vs submit validation",
    "Field labels vs placeholders"
  ],

  layout: [
    "Video vs static image hero",
    "Long-form vs short-form page",
    "Pricing visible vs hidden",
    "Navigation vs no navigation"
  ],

  trust: [
    "Security badges placement",
    "Money-back guarantee visibility",
    "Free trial emphasis",
    "Privacy/data messaging"
  ]
};

## Pre-Launch Checklist

### Above the Fold
□ Clear, benefit-focused headline
□ Supporting subheadline
□ Primary CTA visible without scrolling
□ Trust signal (reviews, logos, guarantee)
□ Hero image/video that reinforces message

### Copy & Content
□ Benefits over features
□ Scannable formatting (bullets, headers)
□ Social proof throughout
□ Addresses objections
□ Single, focused message

### Design & UX
□ Visual hierarchy guides the eye
□ Consistent branding
□ Sufficient white space
□ Mobile-responsive
□ Fast load time (<3s)

### CTA & Conversion
□ Single primary CTA per section
□ Action-oriented button copy
□ CTA stands out visually
□ Minimal form fields
□ Clear next step

### Technical
□ Page speed optimized
□ Analytics tracking configured
□ Form submissions working
□ Mobile-friendly
□ No broken links or images

### Trust & Credibility
□ Testimonials with photos/names
□ Company logos
□ Security indicators
□ Contact information
□ Privacy policy linked