Spaces:

KairosEtp
/

course-landing

Running

App Files Files Community

KairosEtp commited on Oct 31, 2025

Commit

dfbfae0

verified ·

1 Parent(s): c3710ff

Create an online course landing page with course overview, curriculum breakdown with expandable modules, instructor credentials, student testimonials with videos, pricing and enrollment options, FAQ section, and money-back guarantee badge.

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +694 -19
script.js +147 -0
style.css +81 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Course Landing
-emoji: 💻
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Course Landing
+colorFrom: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,694 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>

script.js ADDED Viewed

	@@ -0,0 +1,147 @@

+(function () {
+  const qs = (sel, ctx = document) => ctx.querySelector(sel);
+  const qsa = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
+  // Mobile menu
+  const menuToggle = qs('#menuToggle');
+  const mobileMenu = qs('#mobileMenu');
+  if (menuToggle && mobileMenu) {
+    menuToggle.addEventListener('click', () => {
+      const isHidden = mobileMenu.classList.contains('hidden');
+      mobileMenu.classList.toggle('hidden', !isHidden);
+      menuToggle.setAttribute('aria-expanded', String(isHidden));
+    });
+  }
+  // Expand/Collapse all curriculum modules
+  const expandBtn = qs('#expandAll');
+  const modules = qsa('.module');
+  if (expandBtn && modules.length) {
+    const toggleAll = () => {
+      const shouldOpen = expandBtn.dataset.state !== 'open';
+      modules.forEach((mod) => {
+        const content = qs('.module-content', mod);
+        const icon = qs('.module-icon', mod);
+        const summaryBtn = qs('.module-toggle', mod);
+        if (shouldOpen) {
+          openModule(mod, content, icon, summaryBtn, false);
+        } else {
+          closeModule(mod, content, icon, summaryBtn, false);
+        }
+      });
+      expandBtn.dataset.state = shouldOpen ? 'open' : 'closed';
+      const icon = qs('i', expandBtn);
+      if (icon) {
+        icon.setAttribute('data-feather', shouldOpen ? 'minus-square' : 'plus-square');
+        // Replace icon
+        if (window.feather && typeof feather.replace === 'function') {
+          feather.replace();
+        }
+      }
+    };
+    expandBtn.addEventListener('click', toggleAll);
+  }
+  // Individual module toggle
+  function openModule(module, content, icon, summaryBtn, animate = true) {
+    summaryBtn.setAttribute('aria-expanded', 'true');
+    content.classList.remove('hidden');
+    content.classList.add('open');
+    if (icon) icon.style.transform = 'rotate(180deg)';
+    if (animate) {
+      // auto height animation
+      content.style.maxHeight = '0px';
+      requestAnimationFrame(() => {
+        content.style.maxHeight = content.scrollHeight + 'px';
+      });
+      const onEnd = (e) => {
+        if (e.propertyName !== 'max-height') return;
+        content.style.maxHeight = 'none';
+        content.removeEventListener('transitionend', onEnd);
+      };
+      content.addEventListener('transitionend', onEnd);
+    } else {
+      content.style.maxHeight = 'none';
+    }
+  }
+  function closeModule(module, content, icon, summaryBtn, animate = true) {
+    summaryBtn.setAttribute('aria-expanded', 'false');
+    if (animate) {
+      // from current height to 0
+      content.style.maxHeight = content.scrollHeight + 'px';
+      requestAnimationFrame(() => {
+        content.style.maxHeight = '0px';
+      });
+      const onEnd = (e) => {
+        if (e.propertyName !== 'max-height') return;
+        content.classList.remove('open');
+        content.classList.add('hidden');
+        content.style.maxHeight = '';
+        content.removeEventListener('transitionend', onEnd);
+      };
+      content.addEventListener('transitionend', onEnd);
+    } else {
+      content.classList.remove('open');
+      content.classList.add('hidden');
+      content.style.maxHeight = '';
+    }
+    if (icon) icon.style.transform = 'rotate(0deg)';
+  }
+  modules.forEach((mod) => {
+    const content = qs('.module-content', mod);
+    const icon = qs('.module-icon', mod);
+    const summaryBtn = qs('.module-toggle', mod);
+    summaryBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      const isOpen = summaryBtn.getAttribute('aria-expanded') === 'true';
+      if (isOpen) {
+        closeModule(mod, content, icon, summaryBtn, true);
+      } else {
+        openModule(mod, content, icon, summaryBtn, true);
+      }
+    });
+  });
+  // FAQ accordion behavior: only one open at a time
+  const faqs = qsa('#faq details');
+  if (faqs.length) {
+    faqs.forEach((faq) => {
+      faq.addEventListener('toggle', () => {
+        if (faq.open) {
+          faqs.forEach((other) => {
+            if (other !== faq) other.removeAttribute('open');
+          });
+        }
+      });
+    });
+  }
+  // Smooth scroll offset for fixed header
+  const offset = 16; // header height-ish
+  qsa('a[href^="#"]').forEach((a) => {
+    a.addEventListener('click', (e) => {
+      const id = a.getAttribute('href');
+      if (!id || id === '#') return;
+      const el = qs(id);
+      if (!el) return;
+      e.preventDefault();
+      const top = el.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({ top, behavior: 'smooth' });
+      history.pushState(null, '', id);
+    });
+  });
+  // Footer year
+  const yearEl = qs('#year');
+  if (yearEl) {
+    yearEl.textContent = String(new Date().getFullYear());
+  }
+  // Replace Feather icons if dynamically inserted
+  if (window.feather && typeof feather.replace === 'function') {
+    feather.replace();
+  }
+})();

style.css CHANGED Viewed

@@ -1,28 +1,91 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Theme variables (light default). Replace the RGB values with your brand colors. */
+:root {
+  --primary-50: 239 246 255;
+  --primary-100: 219 234 254;
+  --primary-200: 191 219 254;
+  --primary-300: 147 197 253;
+  --primary-400: 96 165 250;
+  --primary-500: 59 130 246;
+  --primary-600: 37 99 235;
+  --primary-700: 29 78 216;
+  --primary-800: 30 64 175;
+  --primary-900: 30 58 138;
+  --secondary-50: 250 245 255;
+  --secondary-100: 243 232 255;
+  --secondary-200: 233 213 255;
+  --secondary-300: 196 181 253;
+  --secondary-400: 167 139 250;
+  --secondary-500: 139 92 246;
+  --secondary-600: 124 58 237;
+  --secondary-700: 109 40 217;
+  --secondary-800: 91 33 182;
+  --secondary-900: 76 29 149;
+}
+/* Optional: Dark theme (if desired) */
+/* [data-theme="dark"] {
+  color-scheme: dark;
+} */
+/* Base */
+html, body {
+  height: 100%;
+}
 body {
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.55;
+}
+/* Focus ring improvements */
+:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px rgb(var(--primary-500) / 0.35);
 }
+/* Module details animation */
+details > summary {
+  list-style: none;
+}
+details > summary::-webkit-details-marker {
+  display: none;
 }
+/* Module content collapsible */
+.module .module-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 220ms ease;
+}
+.module .module-content.open {
+  /* JS will set a max-height or use auto */
 }
+/* FAQ details animation (for browsers not supporting <details>) */
+.faq-item[open] .faq-content {
+  max-height: 500px;
+}
+.faq-item .faq-content {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 220ms ease;
 }
+/* Backdrop blur fallback */
+@supports not (backdrop-filter: blur(12px)) {
+  header {
+    background-color: rgba(255, 255, 255, 0.96);
+  }
 }
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+/* Utility shadow rings for cards */
+.shadow-ring {
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.06);
+}