```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Birthday Cake - Homepage</title>
  <style>
    :root {
      --font-primary: 'Arial', sans-serif;
      --background-main: #f8f9fa;
      --text-color: #2c3e50;
      --accent-color: #e67e22;
      --light-accent: #f39c12;
      --card-bg: white;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 2rem;
      --spacing-xl: 4rem;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-primary);
      line-height: 1.6;
      color: var(--text-color);
      background-color: var(--background-main);
    }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: var(--spacing-md);
    }

    .hero {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23e67e22' opacity='0.2'/%3E%3Ccircle cx='50' cy='50' r='40' fill='%23e67e22' opacity='0.2'/%3E%3C/svg%3E");
      background-size: cover;
      color: white;
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: var(--spacing-xl) var(--spacing-md);
      border-radius: 10px;
      margin-bottom: var(--spacing-xl);
      position: relative;
    }

    .hero-content {
      max-width: 800px;
    }

    .hero h1 {
      font-size: 3rem;
      margin-bottom: var(--spacing-md);
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero p {
      font-size: 1.2rem;
      margin-bottom: var(--spacing-lg);
    }

    .btn {
      display: inline-block;
      background-color: var(--accent-color);
      color: white;
      padding: 0.8rem 2rem;
      border-radius: 30px;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
    }

    .btn:hover {
      background-color: var(--light-accent);
      transform: translateY(-3px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    section {
      margin-bottom: var(--spacing-xl);
    }

    h2 {
      text-align: center;
      margin-bottom: var(--spacing-lg);
      color: var(--text-color);
      font-size: 2.5rem;
      position: relative;
    }

    h2::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 3px;
      background-color: var(--accent-color);
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--spacing-lg);
    }

    .card {
      background-color: var(--card-bg);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card-image {
      height: 200px;
      background-color: var(--accent-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }

    .card-content {
      padding: var(--spacing-md);
    }

    .card h3 {
      margin-bottom: var(--spacing-sm);
      font-size: 1.5rem;
    }

    .card p {
      margin-bottom: var(--spacing-md);
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: var(--spacing-md);
    }

    .gallery-item {
      aspect-ratio: 4/3;
      background-color: var(--light-accent);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      overflow: hidden;
    }

    form {
      background-color: var(--card-bg);
      padding: var(--spacing-lg);
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .form-group {
      margin-bottom: var(--spacing-md);
    }

    .form-group label {
      display: block;
      margin-bottom: var(--spacing-sm);
      font-weight: bold;
    }

    .form-control {
      width: 100%;
      padding: 0.8rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1rem;
    }

    textarea.form-control {
      min-height: 150px;
      resize: vertical;
    }

    button[type="submit"] {
      background-color: var(--accent-color);
      color: white;
      border: none;
      padding: 0.8rem 2rem;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    button[type="submit"]:hover {
      background-color: var(--light-accent);
    }

    footer {
      text-align: center;
      padding: var(--spacing-lg) var(--spacing-md);
      background-color: var(--text-color);
      color: white;
      margin-top: var(--spacing-xl);
      border-radius: 10px;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }

      .hero p {
        font-size: 1rem;
      }

      .card-grid,
      .gallery {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
<main>
  <section class="hero">
    <div class="hero-content">
      <h1 id="page-title"></h1>
      <p>Welcome to the celebration! Your special day deserves the best. Let's make it memorable.</p>
      <a href="#contact" class="btn">Book Your Birthday Party</a>
    </div>
  </section>

  <section class="intro">
    <h2>The Birthday Cake Experience</h2>
    <div class="intro-content">
      <p>Welcome to our premium cake decorating studio! We specialize in creating custom, beautiful birthday cakes that delight both children and adults. Our team of expert bakers uses only the finest ingredients to craft cakes that are not only delicious but also visually stunning.</p>
      <p>Each cake is made with attention to detail and personalized according to your specifications. Whether it's a child's birthday, a milestone celebration, or a corporate event, we can create a cake that perfectly matches your theme and occasion.</p>
      <p>Our passion for baking and commitment to quality has made us the top choice for birthday cakes in the city.</p>
    </div>
  </section>

  <section class="highlights">
    <h2>Our Signature Cakes</h2>
    <div class="card-grid">
      <article class="card">
        <div class="card-image">Vanilla Bean Extravaganza</div>
        <div class="card-content">
          <h3>Freshly Baked Daily</h3>
          <p>Layers of vanilla cake with REAL vanilla beans, buttercream frosting, and roasted pineapple filling.</p>
          <a href="#" class="btn">View Options</a>
        </div>
      </article>
      <article class="card">
        <div class="card-image">Rainbow Unicorn Dreams</div>
        <div class="card-content">
          <h3>Kids' Favorite</h3>
          <p>Multi-layered cake with colorful frosting, edible glitter, and fondant decorations to delight young princesses.</p>
          <a href="#" class="btn">View Options</a>
        </div>
      </article>
      <article class="card">
        <div class="card-image">Red Velvet Elegance</div>
        <div class="card-content">
          <h3>Bachelorette Party Special</h3>
          <p>Classic red velvet sponge with cream cheese frosting, decorated with champagne bottles and elegant ribbons.</p>
          <a href="#" class="btn">View Options</a>
        </div>
      </article>
    </div>
  </section>

  <section class="gallery">
    <h2>Cake Gallery</h2>
    <div class="gallery-grid">
      <div class="gallery-item">Chocolate Mousse Birch</div>
      <div class="gallery-item">Diva Cupcakes</div>
      <div class="gallery-item">Wedding Cake Slice</div>
      <div class="gallery-item">Birthday Terrarium Cake</div>
      <div class="gallery-item">Cheesecake Bouquet</div>
      <div class="gallery-item">Minion Birthday Cake</div>
    </div>
  </section>

  <section id="contact">
    <h2>Contact Us</h2>
    <form>
      <div class="form-group">
        <label for="name">Your Name</label>
        <input type="text" id="name" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel" id="phone" class="form-control">
      </div>
      <div class="form-group">
        <label for="cake-date">Preferred Date</label>
        <input type="date" id="cake-date" class="form-control">
      </div>
      <div class="form-group">
        <label for="cake-type">Cake Type</label>
        <select id="cake-type" class="form-control">
          <option value="">Select a Cake Type</option>
          <option value="birthday">Birthday Cake</option>
          <option value="wedding">Wedding Cake</option>
          <option value="anniversary">Anniversary Cake</option>
          <option value="specialty">Specialty Cake</option>
        </select>
      </div>
      <div class="form-group">
        <label for="catering">Catering Request</label>
        <textarea id="catering" class="form-control" placeholder="Please describe any additional requirements or special requests"></textarea>
      </div>
      <button type="submit">Submit Request</button>
    </form>
  </section>

  <footer>
    <p>&copy; 2023 Birthday Cake Studio. All rights reserved.</p>
  </footer>
</main>

<script>
  // Set page title and content based on the variables
  const { theme, page } = {
    theme: "Birthday Cake",
    page: "Homepage"
  };

  document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('title').textContent = `${theme} - ${page}`;
    document.getElementById('page-title').textContent = theme;
    const introContent = document.querySelector('.intro-content p:last-child');
    introContent.textContent = `${theme} is the perfect place to celebrate your special day. We offer creative cake designs and exceptional service tailored to your preferences.`;
  });
</script>
</body>
</html>
```