┌─────────────────────────────────────────────────────────────────────────────┐
│                       Level 1 Beginner Projects Lab                         │
├───────┬───────────────────────────────┬─────────────────────────────────────┤
│ Lab   │ Project Title                 │ Key Concepts Exercised              │
├───────┼───────────────────────────────┼─────────────────────────────────────┤
│ Lab 1 │ SaaS Product Landing Page     │ Hero section, features grid, pricing│
│ Lab 2 │ Developer Portfolio           │ Offcanvas nav, project cards, modal │
│ Lab 3 │ Tech Blog Platform            │ Breadcrumbs, badges, pagination     │
│ Lab 4 │ Login & Register UI           │ Floating inputs, form validation    │
│ Lab 5 │ E-Commerce Product Page       │ Image gallery, badge pricing, tabs  │
│ Lab 6 │ Storefront Homepage Grid      │ Responsive filter sidebar, cards    │
│ Lab 7 │ Responsive Admin Dashboard    │ Metric cards, quick tables, nav     │
└───────┴───────────────────────────────┴─────────────────────────────────────┘

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">CloudScale</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
      <a href="#signup" class="btn btn-primary btn-sm ms-lg-3">Get Started</a>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<header class="py-5 bg-light text-center border-bottom">
  <div class="container py-4">
    <h1 class="display-4 fw-bold text-dark">Scale Your Infrastructure Instantly</h1>
    <p class="lead text-muted col-lg-8 mx-auto">Deploy modern microservices in seconds with automated clustering, zero-downtime rollouts, and multi-region CDN.</p>
    <div class="d-flex justify-content-center gap-3 mt-4">
      <a href="#trial" class="btn btn-primary btn-lg">Start Free 14-Day Trial</a>
      <a href="#docs" class="btn btn-outline-secondary btn-lg">Documentation</a>
    </div>
  </div>
</header>

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-12 col-md-6 col-lg-5">
      <div class="card shadow-sm border-0 rounded-3">
        <div class="card-body p-4 p-md-5">
          <div class="text-center mb-4">
            <h3 class="fw-bold">Welcome Back</h3>
            <p class="text-muted small">Please sign in to your dashboard</p>
          </div>
          <form class="needs-validation" novalidate>
            <div class="mb-3">
              <label for="loginEmail" class="form-label">Email Address</label>
              <input type="email" class="form-control" id="loginEmail" placeholder="you@company.com" required>
              <div class="invalid-feedback">Valid email required.</div>
            </div>
            <div class="mb-3">
              <div class="d-flex justify-content-between">
                <label for="loginPass" class="form-label">Password</label>
                <a href="#" class="small text-decoration-none">Forgot?</a>
              </div>
              <input type="password" class="form-control" id="loginPass" required>
              <div class="invalid-feedback">Password cannot be empty.</div>
            </div>
            <div class="form-check mb-4">
              <input type="checkbox" class="form-check-input" id="rememberMe">
              <label class="form-check-label small" for="rememberMe">Keep me signed in</label>
            </div>
            <button class="btn btn-primary w-100 py-2 fw-semibold" type="submit">Sign In</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid py-4">
  <!-- Metrics KPI Row -->
  <div class="row g-3 mb-4">
    <div class="col-12 col-sm-6 col-xl-3">
      <div class="card shadow-sm border-0 p-3 bg-primary text-white">
        <span class="text-white-50 small text-uppercase fw-bold">Total Revenue</span>
        <h3 class="mt-2 mb-0 fw-bold">$84,230</h3>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
      <div class="card shadow-sm border-0 p-3 bg-success text-white">
        <span class="text-white-50 small text-uppercase fw-bold">Active Subscriptions</span>
        <h3 class="mt-2 mb-0 fw-bold">1,420</h3>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
      <div class="card shadow-sm border-0 p-3 bg-warning text-dark">
        <span class="text-dark-50 small text-uppercase fw-bold">Pending Invoices</span>
        <h3 class="mt-2 mb-0 fw-bold">28</h3>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-xl-3">
      <div class="card shadow-sm border-0 p-3 bg-info text-white">
        <span class="text-white-50 small text-uppercase fw-bold">Conversion Rate</span>
        <h3 class="mt-2 mb-0 fw-bold">4.8%</h3>
      </div>
    </div>
  </div>

  <!-- Recent Orders Table -->
  <div class="card shadow-sm border-0">
    <div class="card-header bg-white py-3">
      <h5 class="mb-0 fw-bold">Recent Transactions</h5>
    </div>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Order ID</th>
            <th>Customer</th>
            <th>Status</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="fw-semibold">#ORD-9021</td>
            <td>Sarah Jenkins</td>
            <td><span class="badge bg-success-subtle text-success">Completed</span></td>
            <td>$320.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>