Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Modern Web Development Bootcamp — Course Landing</title> | |
| <meta name="description" content="Master modern web development with hands-on projects, real-world mentorship, and lifetime access. Enroll now with our 14-day money-back guarantee." /> | |
| <meta property="og:title" content="Modern Web Development Bootcamp" /> | |
| <meta property="og:description" content="Learn full-stack web development with hands-on projects, real-world mentorship, and lifetime access." /> | |
| <meta property="og:type" content="website" /> | |
| <meta property="og:image" content="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?q=80&w=1200&auto=format&fit=crop" /> | |
| <link rel="preconnect" href="https://unpkg.com" /> | |
| <link rel="preconnect" href="https://cdn.tailwindcss.com" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: 'rgb(var(--primary-50) / <alpha-value>)', | |
| 100: 'rgb(var(--primary-100) / <alpha-value>)', | |
| 200: 'rgb(var(--primary-200) / <alpha-value>)', | |
| 300: 'rgb(var(--primary-300) / <alpha-value>)', | |
| 400: 'rgb(var(--primary-400) / <alpha-value>)', | |
| 500: 'rgb(var(--primary-500) / <alpha-value>)', | |
| 600: 'rgb(var(--primary-600) / <alpha-value>)', | |
| 700: 'rgb(var(--primary-700) / <alpha-value>)', | |
| 800: 'rgb(var(--primary-800) / <alpha-value>)', | |
| 900: 'rgb(var(--primary-900) / <alpha-value>)', | |
| }, | |
| secondary: { | |
| 50: 'rgb(var(--secondary-50) / <alpha-value>)', | |
| 100: 'rgb(var(--secondary-100) / <alpha-value>)', | |
| 200: 'rgb(var(--secondary-200) / <alpha-value>)', | |
| 300: 'rgb(var(--secondary-300) / <alpha-value>)', | |
| 400: 'rgb(var(--secondary-400) / <alpha-value>)', | |
| 500: 'rgb(var(--secondary-500) / <alpha-value>)', | |
| 600: 'rgb(var(--secondary-600) / <alpha-value>)', | |
| 700: 'rgb(var(--secondary-700) / <alpha-value>)', | |
| 800: 'rgb(var(--secondary-800) / <alpha-value>)', | |
| 900: 'rgb(var(--secondary-900) / <alpha-value>)', | |
| }, | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-white text-gray-800 antialiased"> | |
| <!-- Header --> | |
| <header class="fixed inset-x-0 top-0 z-40 border-b border-gray-100 bg-white/80 backdrop-blur"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="flex h-16 items-center justify-between"> | |
| <a href="#" class="flex items-center gap-2"> | |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-500 text-white"> | |
| <i data-feather="book-open"></i> | |
| </span> | |
| <span class="font-semibold tracking-tight">Web Dev Bootcamp</span> | |
| </a> | |
| <nav class="hidden items-center gap-8 md:flex"> | |
| <a href="#overview" class="text-sm font-medium text-gray-700 hover:text-gray-900">Overview</a> | |
| <a href="#curriculum" class="text-sm font-medium text-gray-700 hover:text-gray-900">Curriculum</a> | |
| <a href="#instructor" class="text-sm font-medium text-gray-700 hover:text-gray-900">Instructor</a> | |
| <a href="#testimonials" class="text-sm font-medium text-gray-700 hover:text-gray-900">Testimonials</a> | |
| <a href="#pricing" class="text-sm font-medium text-gray-700 hover:text-gray-900">Pricing</a> | |
| <a href="#faq" class="text-sm font-medium text-gray-700 hover:text-gray-900">FAQ</a> | |
| </nav> | |
| <div class="flex items-center gap-3"> | |
| <a href="#pricing" class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-400"> | |
| Enroll Now | |
| </a> | |
| <button id="menuToggle" class="rounded-lg p-2 text-gray-700 hover:bg-gray-100 md:hidden" aria-label="Open menu"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="mobileMenu" class="hidden border-t border-gray-100 pb-4 pt-2 md:hidden"> | |
| <nav class="flex flex-col gap-2"> | |
| <a href="#overview" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">Overview</a> | |
| <a href="#curriculum" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">Curriculum</a> | |
| <a href="#instructor" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">Instructor</a> | |
| <a href="#testimonials" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">Testimonials</a> | |
| <a href="#pricing" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">Pricing</a> | |
| <a href="#faq" class="rounded-lg px-2 py-2 text-sm font-medium hover:bg-gray-100">FAQ</a> | |
| </nav> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <section id="overview" class="relative mt-16 overflow-hidden bg-gradient-to-b from-primary-50 to-white"> | |
| <div class="absolute right-0 top-0 -z-10 h-64 w-64 translate-x-1/3 -translate-y-1/3 rounded-full bg-primary-200/50 blur-3xl"></div> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 items-center gap-10 py-16 lg:grid-cols-2"> | |
| <div> | |
| <div class="inline-flex items-center gap-2 rounded-full border border-primary-200 bg-white/80 px-3 py-1 text-xs font-medium text-primary-700 shadow-sm"> | |
| <i data-feather="shield"></i> | |
| 14-day money-back guarantee | |
| </div> | |
| <h1 class="mt-4 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl"> | |
| Modern Web Development Bootcamp | |
| </h1> | |
| <p class="mt-4 max-w-prose text-lg text-gray-700"> | |
| Build job‑ready skills in HTML, CSS, JavaScript, React, Node.js, databases, and deployment. Learn by building 7 real projects with mentor feedback and lifetime access. | |
| </p> | |
| <ul class="mt-6 flex flex-wrap gap-4 text-sm text-gray-700"> | |
| <li class="inline-flex items-center gap-2"> | |
| <i data-feather="check-circle" class="text-primary-500"></i> 120+ lessons • 40+ hours | |
| </li> | |
| <li class="inline-flex items-center gap-2"> | |
| <i data-feather="check-circle" class="text-primary-500"></i> 7 capstone projects | |
| </li> | |
| <li class="inline-flex items-center gap-2"> | |
| <i data-feather="check-circle" class="text-primary-500"></i> Certificate of completion | |
| </li> | |
| </ul> | |
| <div class="mt-8 flex flex-wrap items-center gap-3"> | |
| <a href="#pricing" class="inline-flex items-center rounded-lg bg-primary-500 px-5 py-3 text-sm font-semibold text-white shadow hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-400"> | |
| <i data-feather="zap"></i> | |
| <span class="ml-2">Enroll Now</span> | |
| </a> | |
| <a href="assets/syllabus.pdf" target="_blank" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-5 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-400"> | |
| <i data-feather="download-cloud"></i> | |
| <span class="ml-2">Download Syllabus</span> | |
| </a> | |
| </div> | |
| <p class="mt-3 text-xs text-gray-500">No risk. Full refund within 14 days.</p> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -inset-6 -z-10 rounded-2xl bg-primary-100/60 blur-2xl"></div> | |
| <div class="aspect-video overflow-hidden rounded-2xl border border-gray-200 bg-gray-900 shadow-xl"> | |
| <iframe class="h-full w-full" src="https://www.youtube.com/embed/ysz5S6PUM-U" title="Course trailer" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> | |
| </div> | |
| <p class="mt-2 text-center text-xs text-gray-500">Preview the course</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Curriculum --> | |
| <section id="curriculum" class="py-16"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-end justify-between gap-6"> | |
| <div> | |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">Curriculum</h2> | |
| <p class="mt-2 max-w-2xl text-gray-700">Expand each module to see the lessons and projects you’ll build.</p> | |
| </div> | |
| <button id="expandAll" class="hidden rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 md:inline-flex"> | |
| <i data-feather="plus-square"></i> | |
| <span class="ml-2">Expand All</span> | |
| </button> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">1</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Web Foundations: HTML & CSS</h3> | |
| <p class="text-sm text-gray-600">Semantic HTML, modern CSS, Flexbox & Grid</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Semantic Structure</p> | |
| <p class="text-sm text-gray-600">Accessibility-first HTML elements</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Modern CSS Layouts</p> | |
| <p class="text-sm text-gray-600">Flexbox, Grid, and responsive design</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: Portfolio Site</p> | |
| <p class="text-sm text-gray-600">Responsive portfolio with a11y best practices</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">2</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">JavaScript Essentials</h3> | |
| <p class="text-sm text-gray-600">ES6+, DOM, async JS, APIs</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Core Syntax & Patterns</p> | |
| <p class="text-sm text-gray-600">Modules, destructuring, and promises</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">DOM & Events</p> | |
| <p class="text-sm text-gray-600">Building interactive UIs</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: SPA To‑Do App</p> | |
| <p class="text-sm text-gray-600">Local storage, routing, and filtering</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">3</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Frontend Frameworks: React</h3> | |
| <p class="text-sm text-gray-600">Hooks, routing, state management</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">React Fundamentals</p> | |
| <p class="text-sm text-gray-600">Components, props, state, effects</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Routing & Forms</p> | |
| <p class="text-sm text-gray-600">React Router and controlled inputs</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: E‑commerce UI</p> | |
| <p class="text-sm text-gray-600">Product listing, cart, and checkout</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">4</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Backend with Node & Express</h3> | |
| <p class="text-sm text-gray-600">REST APIs, auth, middleware</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">REST APIs</p> | |
| <p class="text-sm text-gray-600">Routes, controllers, and validation</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Authentication</p> | |
| <p class="text-sm text-gray-600">JWT, sessions, and secure flows</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: API + Dashboard</p> | |
| <p class="text-sm text-gray-600">Protected routes and admin panel</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">5</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Databases & ORM</h3> | |
| <p class="text-sm text-gray-600">SQL, Prisma, migrations</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">SQL Basics</p> | |
| <p class="text-sm text-gray-600">Relationships and indexing</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Prisma ORM</p> | |
| <p class="text-sm text-gray-600">Schema, queries, and migrations</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: Data‑rich App</p> | |
| <p class="text-sm text-gray-600">Reports and filters with joins</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">6</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">Testing & Quality</h3> | |
| <p class="text-sm text-gray-600">Jest, RTL, linting, CI</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Unit & Integration Tests</p> | |
| <p class="text-sm text-gray-600">Jest and React Testing Library</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">E2E Tests</p> | |
| <p class="text-sm text-gray-600">Playwright basics</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Project: Add Full Test Suite</p> | |
| <p class="text-sm text-gray-600">Coverage and CI pipeline</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="module border border-gray-200 rounded-xl bg-white"> | |
| <button class="module-toggle flex w-full items-center justify-between p-5 text-left" aria-expanded="false"> | |
| <div class="flex items-center gap-3"> | |
| <span class="flex h-8 w-8 items-center justify-center rounded bg-primary-100 text-primary-700">7</span> | |
| <div> | |
| <h3 class="font-semibold text-gray-900">DevOps & Deployment</h3> | |
| <p class="text-sm text-gray-600">Docker, CI/CD, cloud hosting</p> | |
| </div> | |
| </div> | |
| <i data-feather="chevron-down" class="module-icon h-5 w-5 text-gray-500 transition-transform"></i> | |
| </button> | |
| <div class="module-content hidden border-t border-gray-100 p-5"> | |
| <ul class="grid gap-3 sm:grid-cols-2"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Docker & Containers</p> | |
| <p class="text-sm text-gray-600">Images, Compose, and best practices</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="play-circle" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Deploy to Cloud</p> | |
| <p class="text-sm text-gray-600">Static hosting and serverless</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="tool" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <div> | |
| <p class="font-medium text-gray-900">Capstone: Launch Your App</p> | |
| <p class="text-sm text-gray-600">End‑to‑end deployment pipeline</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Instructor --> | |
| <section id="instructor" class="bg-gray-50 py-16"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2"> | |
| <div> | |
| <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=800&auto=format&fit=crop" alt="Instructor headshot" class="h-64 w-64 rounded-full object-cover shadow-lg ring-4 ring-white" /> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">Meet Your Instructor</h2> | |
| <p class="mt-2 text-lg text-gray-700"><strong>Alex Rivera</strong> — Senior Full‑Stack Engineer</p> | |
| <ul class="mt-4 space-y-2 text-gray-700"> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="award" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>10+ years building products for startups and enterprises</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="briefcase" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Previously led frontend at a Series B SaaS company</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-feather="book" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Mentored 1,200+ developers transitioning to web dev roles</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 flex gap-3"> | |
| <a href="#" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50"> | |
| <i data-feather="linkedin"></i> | |
| <span class="ml-2">LinkedIn</span> | |
| </a> | |
| <a href="#" class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50"> | |
| <i data-feather="twitter"></i> | |
| <span class="ml-2">Twitter</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-16"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="mx-auto max-w-3xl text-center"> | |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">What Students Say</h2> | |
| <p class="mt-2 text-gray-700">Real results from our community.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="video-card group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"> | |
| <div class="relative aspect-video bg-gray-100"> | |
| <iframe class="h-full w-full" src="https://www.youtube.com/embed/WhWc3b3KhnY" title="Student testimonial 1" allowfullscreen></iframe> | |
| <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=200&auto=format&fit=crop" alt="Sarah K." class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <p class="font-semibold text-gray-900">Sarah K.</p> | |
| <p class="text-sm text-gray-600">Landed a junior dev role in 5 weeks</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="video-card group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"> | |
| <div class="relative aspect-video bg-gray-100"> | |
| <iframe class="h-full w-full" src="https://www.youtube.com/embed/3PHXvlpOkf4" title="Student testimonial 2" allowfullscreen></iframe> | |
| <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?q=80&w=200&auto=format&fit=crop" alt="David M." class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <p class="font-semibold text-gray-900">David M.</p> | |
| <p class="text-sm text-gray-600">Built a production SaaS MVP</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="video-card group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"> | |
| <div class="relative aspect-video bg-gray-100"> | |
| <iframe class="h-full w-full" src="https://www.youtube.com/embed/6YbH8r0Z3fU" title="Student testimonial 3" allowfullscreen></iframe> | |
| <div class="absolute inset-0 bg-black/20 opacity-0 transition-opacity group-hover:opacity-100"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center gap-3"> | |
| <img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=200&auto=format&fit=crop" alt="Leila P." class="h-10 w-10 rounded-full object-cover" /> | |
| <div> | |
| <p class="font-semibold text-gray-900">Leila P.</p> | |
| <p class="text-sm text-gray-600">Mentorship made all the difference</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="bg-gray-50 py-16"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="mx-auto max-w-3xl text-center"> | |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">Pricing</h2> | |
| <p class="mt-2 text-gray-700">Choose a plan that fits your goals. 14‑day money‑back guarantee.</p> | |
| </div> | |
| <div class="mt-10 grid gap-6 lg:grid-cols-3"> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"> | |
| <h3 class="text-lg font-semibold text-gray-900">Starter</h3> | |
| <p class="mt-1 text-sm text-gray-600">Self‑paced access to core content.</p> | |
| <div class="mt-6 flex items-baseline gap-1"> | |
| <span class="text-3xl font-extrabold text-gray-900">$199</span> | |
| <span class="text-sm text-gray-600">one‑time</span> | |
| </div> | |
| <ul class="mt-4 space-y-2 text-sm text-gray-700"> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>All videos and lessons</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Downloadable resources</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Community access</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-6 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-semibold text-gray-800 hover:bg-gray-50">Enroll</a> | |
| <p class="mt-3 text-center text-xs text-gray-500">14‑day refund policy</p> | |
| </div> | |
| <div class="rounded-2xl border-2 border-primary-500 bg-white p-6 shadow-lg ring-1 ring-primary-400 relative"> | |
| <div class="absolute -top-3 right-4 rounded-full bg-primary-500 px-3 py-1 text-xs font-semibold text-white">Most Popular</div> | |
| <h3 class="text-lg font-semibold text-gray-900">Pro</h3> | |
| <p class="mt-1 text-sm text-gray-600">Everything in Starter, plus mentor feedback.</p> | |
| <div class="mt-6 flex items-baseline gap-1"> | |
| <span class="text-3xl font-extrabold text-gray-900">$399</span> | |
| <span class="text-sm text-gray-600">one‑time</span> | |
| </div> | |
| <ul class="mt-4 space-y-2 text-sm text-gray-700"> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Project reviews and feedback</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Private mentor Q&A sessions</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Certificate of completion</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="mt-6 block w-full rounded-lg bg-primary-500 px-4 py-2 text-center text-sm font-semibold text-white shadow hover:bg-primary-600">Enroll Pro</a> | |
| <p class="mt-3 text-center text-xs text-gray-500">14‑day refund policy</p> | |
| </div> | |
| <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"> | |
| <h3 class="text-lg font-semibold text-gray-900">Team</h3> | |
| <p class="mt-1 text-sm text-gray-600">Upskill your team with cohort tracking.</p> | |
| <div class="mt-6 flex items-baseline gap-1"> | |
| <span class="text-3xl font-extrabold text-gray-900">$999</span> | |
| <span class="text-sm text-gray-600">up to 10 seats</span> | |
| </div> | |
| <ul class="mt-4 space-y-2 text-sm text-gray-700"> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Team dashboard and progress</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Group mentor sessions</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-feather="check" class="mt-0.5 h-4 w-4 text-primary-500"></i> | |
| <span>Priority support</span> | |
| </li> | |
| </ul> | |
| <a href="mailto:team@example.com?subject=Web%20Dev%20Bootcamp%20Team%20Plan" class="mt-6 block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-semibold text-gray-800 hover:bg-gray-50">Contact Sales</a> | |
| <p class="mt-3 text-center text-xs text-gray-500">Custom invoicing available</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <div class="inline-flex items-center gap-2 rounded-full border border-primary-200 bg-white px-4 py-2 text-sm font-medium text-primary-700 shadow-sm"> | |
| <i data-feather="shield"></i> | |
| <span>14‑day money‑back guarantee</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="py-16"> | |
| <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold tracking-tight text-gray-900">Frequently Asked Questions</h2> | |
| <div class="mt-6 divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white"> | |
| <details class="faq-item group p-5"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between"> | |
| <span class="font-medium text-gray-900">Do I need prior experience?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-gray-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <div class="mt-3 text-gray-700"> | |
| No. We start from the basics and ramp up to advanced topics. However, familiarity with computers is recommended. | |
| </div> | |
| </details> | |
| <details class="faq-item group p-5"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between"> | |
| <span class="font-medium text-gray-900">How long do I have access?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-gray-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <div class="mt-3 text-gray-700"> | |
| Lifetime access to all updates and lessons. You can learn at your own pace. | |
| </div> | |
| </details> | |
| <details class="faq-item group p-5"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between"> | |
| <span class="font-medium text-gray-900">What is the refund policy?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-gray-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <div class="mt-3 text-gray-700"> | |
| Try it risk‑free. Get a full refund within 14 days if you’re not satisfied. | |
| </div> | |
| </details> | |
| <details class="faq-item group p-5"> | |
| <summary class="flex cursor-pointer list-none items-center justify-between"> | |
| <span class="font-medium text-gray-900">Is there a certificate?</span> | |
| <i data-feather="plus" class="h-5 w-5 text-gray-500 transition-transform group-open:rotate-45"></i> | |
| </summary> | |
| <div class="mt-3 text-gray-700"> | |
| Yes. You’ll receive a certificate after completing all projects and assessments. | |
| </div> | |
| </details> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-100 bg-white py-10"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col items-center justify-between gap-6 sm:flex-row"> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary-500 text-white"> | |
| <i data-feather="book-open"></i> | |
| </span> | |
| <span class="font-semibold">Web Dev Bootcamp</span> | |
| </div> | |
| <p class="text-sm text-gray-600">© <span id="year"></span> Web Dev Bootcamp. All rights reserved.</p> | |
| <div class="flex items-center gap-4"> | |
| <a href="#overview" class="text-sm text-gray-700 hover:text-gray-900">Overview</a> | |
| <a href="#pricing" class="text-sm text-gray-700 hover:text-gray-900">Pricing</a> | |
| <a href="#faq" class="text-sm text-gray-700 hover:text-gray-900">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="script.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |