index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PlayTheOffer</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="page">

    <!-- Hero -->
    <section class="hero">
      <div class="logo">
        <img src="logo.png" alt="PlayTheOffer logo" />
      </div>
      <p class="subtitle">PlayTheOffer</p>

      <h1>
        Interviews aren’t conversations.<br />
        They’re a game.
      </h1>

      <p class="description">
        Learn the hidden rules of hiring through realistic interview simulations
        and strategic feedback.
      </p>

      <div class="buttons">
        <button class="btn primary">Join the Waitlist</button>
        <button class="btn secondary">Learn More</button>
      </div>
    </section>

    <!-- Problem -->
    <section class="grid-section">
      <div class="grid">

        <div class="card">
          <h3>Unpredictable</h3>
          <p>Students don’t understand what recruiters actually evaluate.</p>
        </div>

        <div class="card">
          <h3>Unrealistic</h3>
          <p>Most interview preparation is generic and theoretical.</p>
        </div>

        <div class="card">
          <h3>Stressful</h3>
          <p>Even strong candidates struggle under interview pressure.</p>
        </div>

      </div>
    </section>

    <!-- Solution -->
    <section class="center-section">
      <h2>Train like it’s the real interview.</h2>

      <div class="grid">
        <div class="card">
          <h3>Mock Interviews</h3>
          <p>Practice with realistic interview scenarios.</p>
        </div>

        <div class="card">
          <h3>Strategic Feedback</h3>
          <p>Understand recruiter expectations and communication mistakes.</p>
        </div>

        <div class="card">
          <h3>Performance Scoring</h3>
          <p>Measure confidence, clarity, and structure.</p>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="cta">
      <div class="cta-box">
        <h2>Get interview-ready.</h2>
        <p>Join the first students testing PlayTheOffer.</p>

        <div class="cta-form">
          <input type="email" placeholder="Enter your email" />
          <button>Join Waitlist</button>
        </div>
      </div>
    </section>

  </div>
</body>
</html>