
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us - Your Cake Shop</title>
  <style>
    /* Modern Typographic Scale */
    :root {
      --light-theme: #f9f7f2;
      --dark-theme: #2c3637;
      --primary-color: #ff6b8b;
      --secondary-color: #4ecdc4;
      --accent-color: #ffd166;
      --text-color: #2d3436;
      --text-light: #636e72;
      --shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      color: var(--text-color);
      background-color: var(--light-theme);
      line-height: 1.6;
    }

    /* Container System */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* Header Styles */
    header {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      padding: 1.5rem 0;
      box-shadow: var(--shadow);
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
    }

    .logo-icon {
      margin-right: 8px;
      font-size: 2rem;
    }

    nav ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    nav li {
      margin-left: 2rem;
    }

    nav a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      padding: 5px 0;
      position: relative;
    }

    nav a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 3px;
      background-color: white;
      transition: all 0.3s ease;
    }

    nav a:hover::after {
      width: 100%;
    }

    /* Hero Section */
    .hero {
      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="400" height="400" viewBox="0 0 200 200"><rect width="200" height="200" fill="%23ffd166" opacity="0.2"/></svg>');
      background-size: cover;
      background-position: center;
      height: 350px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-top: 70px;
      border-radius: 0 0 30% 30% / 60px;
      padding: 2rem;
      color: white;
    }

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

    .hero h1 {
      font-size: 3.5rem;
      margin-bottom: 0.5rem;
      font-weight: 800;
      letter-spacing: 1px;
    }

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

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

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

    /* Section Styles */
    section {
      padding: 5rem 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 3rem;
    }

    .section-title h2 {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
      font-weight: 700;
    }

    .subtitle {
      font-size: 1.2rem;
      color: var(--text-light);
      max-width: 600px;
      margin: 0 auto;
    }

    /* About Sections */
    .about-story {
      line-height: 1.8;
    }

    .about-story p {
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
    }

    .divider {
      height: 4px;
      width: 60px;
      background: var(--accent-color);
      margin: 1rem auto;
      display: flex;
      align-items: center;
    }

    .divider::before {
      content: '';
      height: 2px;
      width: 40px;
      background: currentColor;
      margin-right: 10px;
    }

    .quality-bake i {
      font-size: 3rem;
      color: var(--primary-color);
      margin-bottom: 1.5rem;
    }

    .philosophy-box {
      background-color: white;
      border-radius: 10px;
      padding: 2.5rem;
      box-shadow: var(--shadow);
      max-width: 850px;
      margin: 0 auto;
    }

    .team-box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .team-member {
      flex: 1 0 300px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform 0.3s ease;
    }

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

    .member-img {
      height: 250px;
      background-size: cover;
      background-position: center;
      background-color: var(--accent-color);
    }

    .member-detail {
      padding: 1.5rem;
    }

    .member-detail h3 {
      font-size: 1.3rem;
      margin-bottom: 0.5rem;
    }

    .member-detail p {
      color: var(--text-light);
      font-style: italic;
      margin-bottom: 1rem;
    }

    /* Contact Section */
    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }

    .contact-info, .customer-says {
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: var(--shadow);
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1.5rem;
    }

    .contact-icon {
      width: 50px;
      height: 50px;
      background: var(--accent-color);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 1rem;
      flex-shrink: 0;
    }

    .contact-item i {
      font-size: 1.3rem;
      color: var(--primary-color);
    }

    /* Map Placeholder */
    .map {
      width: 100%;
      height: 400px;
      background-color: var(--secondary-color);
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      margin-top: 1.5rem;
    }

    /* Footer */
    footer {
      background: var(--dark-theme);
      color: white;
      padding: 4rem 0 2rem;
    }

    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .footer-logo {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .footer-social {
      display: flex;
      gap: 1rem;
    }

    .social-icon {
      width: 40px;
      height: 40px;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: all 0.3s ease;
    }

    .social-icon:hover {
      background: var(--primary-color);
      transform: translateY(-3px);
    }

    .copyright {
      text-align: center;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
        color: var(--text-light);
    }

    /* Responsive Styles */
    @media (max-width: 992px) {
      .logo {
        font-size: 1.5rem;
      }
      
      .hero h1 {
        font-size: 2.5rem;
      }
      
      .contact-wrapper {
        grid-template-columns: 1fr;
      }
      
      .quality-bake i {
        font-size: 2.5rem;
      }
    }

    @media (max-width: 768px) {
      .header-container {
        flex-direction: column;
        text-align: center;
      }
      
      nav ul {
        margin-top: 1rem;
        justify-content: center;
      }
      
      nav li {
        margin: 0 0.5rem;
      }
      
      .hero {
        margin-top: 4rem;
        padding: 1.5rem;
        height: auto;
      }
      
      .hero h1 {
        font-size: 2rem;
      }
      
      .hero p {
        font-size: 1rem;
      }
      
      .section-title h2 {
        font-size: 2rem;
      }
      
      .team-member {
        flex: 1 0 100%;
      }
      
      .contact-item {
        flex-direction: column;
        text-align: center;
      }
      
      .contact-icon {
        margin-right: 0;
        margin-bottom: 0.8rem;
      }
    }
  </style>
</head>
<body>
  <!-- Header & Navigation -->
  <header>
    <div class="container header-container">
      <a href="index.html" class="logo">
        <span class="logo-icon">🍰</span>
        Your Cake Shop
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html" class="active">About</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-content">
      <h1 class="text-shadow">Our Sweet Story</h1>
      <p><span class="text-light">Welcome to [Your Cake Shop Name]</span> — where passion for baking creates unforgettable moments.</p>
      <a href="#about-story" class="btn">Learn More</a>
    </div>
  </section>

  <!-- About Section -->
  <section id="about-story" class="about-story">
    <div class="container">
      <div class="section-title">
        <h2>Our Sweet Beginning</h2>
        <p class="subtitle">Discover the journey that has shaped our love for baking and our commitment to quality.</p>
      </div>

      <div class="story-content">
        <p>Welcome to [Your Cake Shop Name], where every slice tells a story and every creation is baked with a generous helping of passion and artistry. Our journey began with a simple dream: to bring joy and unforgettable moments to our community through the magic of freshly baked cakes. From humble beginnings in [Year of establishment/Kitchen], we've grown into a beloved local landmark, cherished for our exquisite flavors, stunning designs, and unwavering commitment to quality.</p>
      </div>

      <div class="divider"></div>

      <!-- Second Content Block -->
      <div class="quality-bake">
        <div class="container">
          <div class="section-title">
            <h2>Our Quality Promise</h2>
            <p class="subtitle">At [Your Cake Shop Name], baking isn't just a craft — it's our heartfelt expression.</p>
          </div>

          <p class="text-center">We believe that the best cakes start with the finest ingredients. That's why we meticulously source premium butter, free-range eggs, rich Belgian chocolate, and real fruit purees to ensure every bite is a symphony of taste and texture. Our talented team of dedicated bakers pours their skill and creativity into every single cake, from classic comforting sponges to elaborate, custom-designed masterpieces. We constantly innovate, drawing inspiration from global trends while staying true to the timeless appeal of home-baked goodness.</p>
        </div>
      </div>

      <div class="divider"></div>

      <!-- Third Content Block -->
      <div class="philosophy-section">
        <div class="container">
          <div class="section-title">
            <h2>The Heart of Our Bakery</h2>
            <p class="subtitle">Our philosophy: Bake with Love, Serve with a Smile</p>
          </div>

          <div class="philosophy-box">
            <p>Our mission extends beyond just baking delicious cakes. We strive to be a part of your celebrations, big or small, making them sweeter and more memorable. We pride ourselves on personalized service, working closely with each customer to understand their vision and bring it to life with a bespoke creation. Whether it's a birthday, wedding, anniversary, or just an everyday treat, we promise a cake that not only looks incredible but tastes divine. We're more than just a cake shop; we're a place where traditions are celebrated, new memories are made, and every visit feels like coming home.</p>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <!-- Fourth Content Block -->
      <div class="container">
        <div class="section-title">
          <h2>Meet Our Master Bakers</h2>
          <p class="subtitle">Behind every delicious bite is a craftsman dedicated to perfection.</p>
          </div>
          {
            "teamMembers": [
              {
                "name": "Sarah Johnson",
                "position": "Master Baker",
                "bio": "With over 15 years of experience, Sarah specializes in intricate frosting designs and classic cake recipes passed down through generations.",
                "imgColor": "#ffd166"
              },
              {
                "name": "Marcus Chen",
                "position": "Pastry Chef",
                "bio": "A culinary artist who transforms seasonal fruits into edible sculptures, Marcus is our resident flavor innovator.",
                "imgColor": "#4ecdc4"
              },
              {
                "name": "Olivia Martinez",
                "position": "Head Designer",
                "bio": "Olivia brings personality to every cake with her eye for color and composition, blending technical skill with artistic vision.",
                "imgColor": "#ff6b8b"
              }
            ]
          }

          <div class="team-box" id="team">
            <!-- Team members will be inserted here by JavaScript -->
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="cta">
    <div class="container">
      <div class="section-title">
        <h2>Join Our Sweet Family</h2>
        <p class="subtitle">We invite you to experience the [Your Cake Shop Name] difference.</p>
      </div>

      <div class="philosophy-box">
        <p>Open House: Every Saturday from 10 AM, tour our bakery and watch the magic happen! Advance notice required for special orders.</p>
        <a href="contact.html" class="btn">Book a Consultation</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-column">
          <a href="#" class="footer-logo">Your Cake Shop</a>
          <p>Baking artisanal cakes with love since [Year]</p>
        </div>
        <div class="footer-column">
          <h3>Explore</h3>
          <nav>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About Us</a></li>
              <li><a href="menu.html">Our Cakes</a></li>
              <li><a href="events.html">Special Occasions</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="footer-column">
          <h3>Connect</h3>
          <div class="footer-social">
            <a href="#" class="social-icon">☆</a>
            <a href="#" class="social-icon">📸</a>
            <a href="#" class="social-icon">📱</a>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>&copy; [Year] Your Cake Shop. All Rights Reserved.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript for Interactive Elements -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Function to render team members
      function renderTeamMembers() {
        const teamContainer = document.getElementById('team');
        teamContainer.innerHTML = '';
        
        const teamMembers = [
          {
            name: 'Sarah Johnson',
            position: 'Master Baker',
            bio: 'With over 15 years of experience, Sarah specializes in intricate frosting designs and classic cake recipes passed down through generations.',
            imgColor: '#ffd166'
          },
          {
            name: 'Marcus Chen',
            position: 'Pastry Chef',
            bio: 'A culinary artist who transforms seasonal fruits into edible sculptures, Marcus is our resident flavor innovator.',
            imgColor: '#4ecdc4'
          },
          {
            name: 'Olivia Martinez',
            position: 'Head Designer',
            bio: 'Olivia brings personality to every cake with her eye for color and composition, blending technical skill with artistic vision.',
            imgColor: '#ff6b8b'
          }
        ];

        teamMembers.forEach(member => {
          const memberHTML = `
            <div class="team-member">
              <div class="member-img" style="background-color: ${member.imgColor}"></div>
              <div class="member-detail">
                <h3>${member.name}</h3>
                <p>${member.position}</p>
                <p class="text-light">${member.bio}</p>
              </div>
            </div>
          `;
          teamContainer.innerHTML += memberHTML;
        });
      }

      // Render team members when page loads
      renderTeamMembers();

      // Smooth scroll for navigation links
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
          });
        });
      });

      // Add scroll event listener
      window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
          header.style.boxShadow = '0 6px 10px rgba(0,0,0,0.1)';
        } else {
          header.style.boxShadow = 'var(--shadow)';
        }
      });
    });
  </script>
</body>
</html>
