```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cakes Business</title>
  <style>
    :root {
      --primary-color: #f95959;
      --secondary-color: #cd7f32;
      --accent-color: #2980b9;
      --text-color: #2c3e50;
      --light-color: #ecf0f1;
      --dark-color: #2c3e50;
      --gold-color: #f39c12;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: all 0.3s ease;
    }

    body {
      font-family: 'Poppins', Arial, sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background-color: var(--light-color);
    }

    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    section {
      padding: 60px 0;
    }

    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 1rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--dark-color);
    }

    p {
      margin-bottom: 1rem;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      align-content: start;
    }

    /* Hero Section */
    .hero {
      position: relative;
      height: 80vh;
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800"><rect width="1200" height="800" fill="%23F95959"/><circle cx="300" cy="300" r="200" fill="%23CD7F32"/><circle cx="900" cy="600" r="150" fill="%232980B9"/></svg>');
      background-size: cover;
      background-position: center;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 20px;
    }

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

    .hero h1 {
      font-size: 4rem;
      margin-bottom: 1.5rem;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 1s forwards 0.3s;
    }

    .hero p {
      font-size: 1.5rem;
      max-width: 600px;
      margin: 0 auto 2.5rem;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 1s forwards 0.6s;
    }

    .hero-btn {
      display: inline-block;
      padding: 15px 30px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 50px;
      font-size: 1.1rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      animation: fadeUp 1s forwards 0.9s;
    }

    .hero-btn:hover {
      background: #e54949;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      transform: translateY(-3px);
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Introduction Section */
    .intro {
      background-color: white;
      padding: 50px 0;
    }

    .intro-content {
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
    }

    .intro h2 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
    }

    .intro p {
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    /* Highlights Section */
    .highlights {
      background-color: var(--light-color);
    }

    .highlight-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      margin-top: 40px;
    }

    .highlight-card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }

    .highlight-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

    .highlight-img {
      height: 200px;
      background-color: #ddd;
      background-size: cover;
      background-position: center;
    }

    .highlight-content {
      padding: 25px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .highlight-content h3 {
      margin-bottom: 15px;
    }

    /* Gallery Section */
    .gallery {
      padding: 50px 0;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    .gallery-item {
      position: relative;
      height: 250px;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .gallery-item:hover {
      transform: scale(1.03);
    }

    .gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .gallery-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
      font-size: 0.9rem;
    }

    /* Contact Section */
    .contact-form {
      max-width: 600px;
      margin: 0 auto;
    }

    .form-group {
      margin-bottom: 25px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
    }

    input, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-family: inherit;
      font-size: 1rem;
    }

    input:focus, textarea:focus {
      outline: none;
      border-color: var(--accent-color);
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    button[type="submit"] {
      background: var(--primary-color);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
    }

    button[type="submit"]:hover {
      background: var(--secondary-color);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* Footer */
    footer {
      background-color: var(--dark-color);
      color: white;
      padding: 50px 0 20px;
    }

    .footer-content {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 30px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      list-style: none;
      margin-bottom: 30px;
    }

    .footer-links li {
      margin: 0 15px;
    }

    .footer-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: var(--accent-color);
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 3rem;
      }

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

      .intro h2 {
        font-size: 2rem;
      }
    }

    @media (max-width: 480px) {
      .hero {
        height: auto;
        padding: 40px 20px;
      }

      .hero h1 {
        font-size: 2.5rem;
      }

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

      section {
        padding: 40px 0;
      }
    }
  </style>
</head>
<body>
  <main class="container">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <h1 id="page-title">Cakes Business</h1>
        <p id="hero-text">Create your dream desserts with our premium cake creations</p>
        <a href="#" class="hero-btn">View Our Cakes</a>
      </div>
    </section>

    <!-- Introduction Section -->
    <section class="intro">
      <div class="content-wrapper">
        <div class="intro-content">
          <h2>Welcome to Our Bakery</h2>
          <p id="intro-text">At Cakes Business, we specialize in creating exquisite cakes and desserts that bring joy to every occasion. With over 15 years of experience, our master bakers use only the finest ingredients to craft each dessert from scratch.</p>
          <p id="intro-text2">Every bite tells a story of passion, creativity, and perfection. From classic favorites to unique designs, we can't wait to bring your culinary vision to life.</p>
        </div>
      </div>
    </section>

    <!-- Highlights Section -->
    <section class="highlights">
      <div class="content-wrapper">
        <h2>Our Signature Cakes</h2>
        <div class="highlight-grid">
          <div class="highlight-card">
            <div class="highlight-img" style="background-color: #FFD700;"></div>
            <div class="highlight-content">
              <h3>Vanilla Bean Delight</h3>
              <p>Perfected with Madagascar vanilla and artisan buttercream frosting. Available in three sizes.</p>
            </div>
          </div>
          <div class="highlight-card">
            <div class="highlight-img" style="background-color: #98FB98;"></div>
            <div class="highlight-content">
              <h3>Chocolate Dream</h3>
              <p>Made with bittersweet chocolate and rich ganache. Decorated with hand-piped frosting.</p>
            </div>
          </div>
          <div class="highlight-card">
            <div class="highlight-img" style="background-color: #FF6347;"></div>
            <div class="highlight-content">
              <h3>Fresh Fruit Tart</h3>
              <p>A French classic featuring a flaky pastry, vanilla custard, and seasonal fruits.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery">
      <div class="content-wrapper">
        <h2>Cake Gallery</h2>
        <div class="gallery-grid">
          <div class="gallery-item">
            <div class="gallery-img" style="background-color: #FFDAB9;"></div>
            <div class="gallery-caption">Red Velvet Wedding Cake</div>
          </div>
          <div class="gallery-item">
            <div class="gallery-img" style="background-color: #D2B48C;"></div>
            <div class="gallery-caption">Chocolate Marble Fancies</div>
          </div>
          <div class="gallery-item">
            <div class="gallery-img" style="background-color: #B0E0E6;"></div>
            <div class="gallery-caption">Fruit Parfait Layer Cake</div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="contact">
      <div class="content-wrapper">
        <h2>Contact Us</h2>
        <div class="contact-form">
          <form id="contactForm">
            <div class="form-group">
              <label for="name">Your Name</label>
              <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
              <label for="email">Email Address</label>
              <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="content-wrapper">
        <div class="footer-content">
          <h3>Cakes Business</h3>
          <p id="footer-text">Bringing sweet dreams to life since 2008.</p>
        </div>
        <ul class="footer-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
        <div class="copyright">
          &copy; 2023 Cakes Business. All Rights Reserved.
        </div>
      </div>
    </footer>
  </main>

  <script>
    // Set page metadata dynamically
    document.addEventListener('DOMContentLoaded', function() {
      // Variables from the theme configuration
      const themeName = 'Cakes Business';
      const pageName = 'Homepage';
      
      // Set header title
      document.title = `${pageName} - ${themeName}`;
      
      // Set top text
      const heroTextElement = document.getElementById('hero-text');
      if (heroTextElement) {
        heroTextElement.textContent = `Create your dream desserts with our premium cake creations from ${themeName}.`;
      }
      
      // Set intro text
      const introTextElements = [
        document.getElementById('intro-text'),
        document.getElementById('intro-text2')
      ];
      
      if (introTextElements.length > 0) {
        introTextElements.forEach(el => {
          if (el) {
            el.innerHTML = el.textContent.replace(/{theme}/g, themeName);
          }
        });
      }
      
      // Set footer text
      const footerTextElement = document.getElementById('footer-text');
      if (footerTextElement) {
        footerTextElement.textContent = `Bringing ${themeName} to life since 2008. Serving exceptional desserts for ${pageName}.`;
      }
      
      // Form submission
      const contactForm = document.getElementById('contactForm');
      if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
          e.preventDefault();
          const name = document.getElementById('name').value;
          const email = document.getElementById('email').value;
          const message = document.getElementById('message').value;
          
          if (name && email && message) {
            // In a production site, you'd send this data to a server
            alert(`Thank you ${name}! Your message has been received and we'll get back to you soon at ${email}.`);
            contactForm.reset();
          }
        });
      }
    });
  </script>
</body>
</html>
```