┌─────────────────────────────────────────────────────────────┐
│                 Level 1 Tailwind Projects Portfolio         │
├────┬─────────────────────────────┬──────────────────────────┤
│ #  │ Project Lab                 │ Core Capabilities Tested │
├────┼─────────────────────────────┼──────────────────────────┤
│ 1  │ SaaS Landing Page & Hero    │ Gradients, Flex, Grid    │
│ 2  │ Modern Developer Portfolio  │ Responsive Typography    │
│ 3  │ SaaS Metrics Dashboard      │ Grid columns, Cards, Stat│
│ 4  │ Authentication Login Page   │ Forms, Focus, Validation │
│ 5  │ E-commerce Product Grid     │ Aspect ratio, Badges, Hvr│
│ 6  │ Glassmorphism Mobile Drawer │ Backdrop blur, Z-index   │
└────┴─────────────────────────────┴──────────────────────────┘

<section class="relative overflow-hidden bg-slate-900 py-20 sm:py-32 text-white">
  <!-- Gradient Glow Background -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-500/20 rounded-full blur-3xl pointer-events-none"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <!-- Category Badge -->
    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-950/80 border border-indigo-500/30 text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-8">
      <span>🚀 Version 2.0 Released</span>
    </div>

    <!-- Main Headline -->
    <h1 class="text-4xl sm:text-6xl lg:text-7xl font-black tracking-tight leading-tight max-w-4xl mx-auto">
      Build Modern Web Apps with <span class="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent">Extreme Velocity</span>
    </h1>

    <!-- Subtitle -->
    <p class="mt-6 text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed">
      A comprehensive frontend engineering curriculum covering modern frameworks, reactive signals, networking protocols, and enterprise design systems.
    </p>

    <!-- CTA Button Group -->
    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
      <button class="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-500 font-bold rounded-xl shadow-lg shadow-indigo-600/30 transition transform hover:-translate-y-0.5">
        Explore Tracks
      </button>
      <button class="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold rounded-xl border border-slate-700 transition">
        View Roadmap
      </button>
    </div>
  </div>
</section>