workshopclaudecode/src/App.jsx

/**
 * App.jsx - Hoofdcomponent voor de Claude Code Workshop sales page
 *
 * Importeert en rendert alle secties in de juiste volgorde.
 * De StickyBar wordt als laatste gerenderd zodat deze boven alles staat.
 */

// Component imports
import Hero from './components/Hero';
import PainPoints from './components/PainPoints';
import Benefits from './components/Benefits';
import Program from './components/Program';
import ForWho from './components/ForWho';
import Trainer from './components/Trainer';
import Pricing from './components/Pricing';
import Testimonials from './components/Testimonials';
import FAQ from './components/FAQ';
import FinalCTA from './components/FinalCTA';
import Footer from './components/Footer';
import StickyBar from './components/StickyBar';
import CookieBanner from './components/CookieBanner';

function App() {
  return (
    <div className="min-h-screen">
      {/* Main content */}
      <main>
        {/* 1. Hero - eerste indruk met headline en CTA */}
        <Hero />

        {/* 2. Pain Points - herkenbare frustraties */}
        <PainPoints />

        {/* 3. Testimonials - wat deelnemers zeggen (nu boven Benefits) */}
        <Testimonials />

        {/* 4. Benefits - wat je meeneemt naar huis */}
        <Benefits />

        {/* 5. Program - dagindeling */}
        <Program />

        {/* 6. For Who - doelgroep en vereisten */}
        <ForWho />

        {/* 7. Trainer - over Frank */}
        <Trainer />

        {/* 8. Pricing - investering en CTA */}
        <Pricing />

        {/* 9. FAQ - veelgestelde vragen */}
        <FAQ />

        {/* 10. Final CTA - afsluitende call-to-action */}
        <FinalCTA />
      </main>

      {/* 11. Footer */}
      <Footer />

      {/* 12. Sticky Bar - verschijnt na scroll */}
      <StickyBar />

      {/* 13. Cookie Banner - eenmalige melding over analytics */}
      <CookieBanner />
    </div>
  );
}

export default App;