<answer>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cakes Homepage</title>
    <style>
        :root {
            --primary-color: #f7e9e2;
            --secondary-color: #d89a73;
            --accent-color: #b36d57;
            --text-color: #333;
            --background-color: #fff;
            --hero-bg: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://placekitten.com/1920/1080');
            --heading-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

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

        .hero {
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: var(--hero-bg);
            background-size: cover;
            background-position: center;
            color: white;
            padding: 1rem;
        }

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

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
        }

        .hero h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent-color);
            transform: scaleX(0);
            transform-origin: left;
            animation: strike 1s forwards;
        }

        @keyframes strike {
            to { transform: scaleX(1); }
        }

        .about {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            color: var(--accent-color);
        }

        .about p {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            max-width: 800px;
        }

        .menu {
            padding: 4rem 2rem;
            background-color: var(--primary-color);
        }

        .menu h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 2.5rem;
            color: var(--accent-color);
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .menu-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .menu-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }

        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .menu-item-content {
            padding: 1.5rem;
        }

        .menu-item h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--accent-color);
        }

        .menu-item p {
            color: #666;
            margin-bottom: 1rem;
        }

        .price {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--accent-color);
            display: block;
        }

        .contact {
            padding: 4rem 2rem;
        }

        .contact h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 2.5rem;
            color: var(--accent-color);
        }

        .form-container {
            max-width: 700px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        input, textarea {
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: var(--heading-font);
            font-size: 1rem;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent-color);
        }

        button {
            background-color: var(--accent-color);
            color: white;
            padding: 0.8rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
            align-self: flex-start;
        }

        button:hover {
            background-color: #9a5a48;
        }

        footer {
            background-color: var(--text-color);
            color: white;
            text-align: center;
            padding: 2rem 1rem;
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .about h2, .menu h2, .contact h2 {
                font-size: 1.8rem;
            }
            
            .menu-grid {
                grid-template-columns: 1fr;
            }
            
            .form-container {
                width: 100%;
            }
            
            button {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="hero">
        <div class="hero-content">
            <h1 id="main-heading">Homepage</h1>
            <p id="hero-text">Experience the finest selection of artisan cakes to delight your senses and elevate yourTreeNode</p>
        </div>
    </div>

    <section class="about" id="about-section">
        <h2>About Our Cakes</h2>
        <p id="about-text">At our bakery, we specialize in crafting exquisite cakes using only the finest ingredients. Our master bakers bring years of experience and passion to every creation, ensuring that each piece is a work of art that brings joy to your table. Whether you're celebrating a special occasion or simply indulging in a little sweetness, our cakes are designed to impress.</p>
        <img src="https://placekitten.com/800/400" alt="Delicate strawberry shortcake with whipped cream and fresh berries" id="cake-image">
    </section>

    <section class="menu">
        <h2 id="menu-heading">Our Menu</h2>
        <div class="menu-grid" id="menu-items">
            <!-- Menu items will be populated by JavaScript -->
        </div>
    </section>

    <section class="contact">
        <h2 id="contact-heading">Contact Us</h2>
        <div class="form-container">
            <form id="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">Email</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>
    </section>

    <footer>
        <p>&copy; 2023 Cakes元气。保留所有权利</p>
    </footer>

    <script>
        // Initial theme and page data
        const pageData = {
            theme: 'Cakes',
            heading: 'Homepage',
            colors: {
                primary: '#f7e9e2',
                secondary: '#d89a73',
                accent: '#b36d57'
            }
        };

        // Set page variables
        document.documentElement.style.setProperty('--primary-color', pageData.colors.primary);
        document.documentElement.style.setProperty('--secondary-color', pageData.colors.secondary);
        document.documentElement.style.setProperty('--accent-color', pageData.colors.accent);
        document.getElementById('main-heading').textContent = pageData.heading;
        document.getElementById('hero-text').textContent = `Experience the finest selection of ${pageData.theme} to delight your senses and elevate your day.`;
        document.getElementById('about-heading').textContent = `${pageData.heading} About`;
        document.getElementById('about-text').textContent = `At our ${pageData.theme} bakery, we specialize in crafting exquisite ${pageData.theme.toLowerCase()} using only the finest ingredients. Our master bakers bring years of experience and passion to every creation, ensuring that each piece is a work of art that brings joy to your table. Whether you're celebrating a special occasion or simply indulging in a little sweetness, our ${pageData.theme.toLowerCase()} are designed to impress.`;
        document.getElementById('contact-heading').textContent = `Contact ${pageData.heading}`;

        // Theme data and replacement function
        const themes = {
            'Cakes': {
                colors: {
                    primary: '#f7e9e2',
                    secondary: '#d89a73',
                    accent: '#b36d57'
                }
            },
            'Weddings': {
                colors: {
                    primary: '#e8f4f8',
                    secondary: '#b3d9e5',
                    accent: '#7fb9d9'
                }
            },
            'Corporate': {
                colors: {
                    primary: '#f0f0f0',
                    secondary: '#cccccc',
                    accent: '#888888'
                }
            }
        };

        function replaceTheme(themeName) {
            const theme = themes[themeName];
            if (theme) {
                document.documentElement.style.setProperty('--primary-color', theme.colors.primary);
                document.documentElement.style.setProperty('--secondary-color', theme.colors.secondary);
                document.documentElement.style.setProperty('--accent-color', theme.colors.accent);
            }
        }

        function replaceText() {
            const heading = document.getElementById('main-heading');
            const heroText = document.getElementById('hero-text');
            const menuHeading = document.getElementById('menu-heading');
            const aboutText = document.getElementById('about-text');
            const cakeImageAlt = document.getElementById('cake-image').alt;
            
            if (pageData.heading === 'Weddings') {
                heading.textContent = 'Wedding Cakes';
                heroText.textContent = `Create unforgettable memories with our elegant wedding cakes, perfectly crafted for your special day.`;
                menuHeading.textContent = 'Wedding Menu';
                aboutText.textContent = `Celebrating love and celebration, our wedding cakes are designed with detail and care. Each cake is a masterpiece that serves as the centerpiece of your celebration. From classic Captain's Cakes to modern creations, we offer something for every style and budget.`;
                cakeImageAlt = 'Elegant wedding cake with intricate details and soft pastel frosting';
            } else if (pageData.heading === 'Corporate') {
                heading.textContent = 'Corporate Cakes';
                heroText.textContent = `Impress your clients with our professional-grade cakes for meetings, events, and celebrations. Quality and presentation are guaranteed.`;
                menuHeading.textContent = 'Corporate Menu';
                aboutText.textContent = `Designed with businesses in mind, our corporate cakes are ranges from elegant three-tiered confections to minimalist designs perfect for conferences and executive events. Each cake is crafted to reflect your brand's sophistication while bringing a touch of sweetness to your corporate gatherings.`;
                cakeImageAlt = 'Sophisticated three-tiered chocolate cake with clean lines and understated elegance';
            } else {
                heading.textContent = pageData.heading;
                heroText.textContent = `Experience the finest selection of ${pageData.theme.toLowerCase()} to delight your senses and elevate your day.`;
                menuHeading.textContent = `${pageData.theme} Menu`;
                aboutText.textContent = `At our ${pageData.theme.toLowerCase()} bakery, we specialize in crafting exquisite ${pageData.theme.toLowerCase()} using only the finest ingredients. Our master bakers bring years of experience and passion to every creation, ensuring that each piece is a work of art that brings joy to your table. Whether you're celebrating a special occasion or simply indulging in a little sweetness, our ${pageData.theme.toLowerCase()} are designed to impress.`;
                cakeImageAlt = `Delicate strawberry shortcake with whipped cream and fresh berries`;
            }
        }

        // Apply initial theme and text replacement
        replaceTheme(pageData.theme);
        replaceText();

        // Simple animation script
        document.addEventListener('DOMContentLoaded', function() {
            const menuItems = [
                {
                    name: 'Chocolate Fudge Cake',
                    description: 'Rich chocolate cake with layers of buttercream filling',
                    price: '¥58',
                    image: 'https://placekitten.com/500/350'
                },
                {
                    name: 'Vanilla Bean Pudding Cake',
                    description: 'Fluffy vanilla sponge with creamy pudding layer',
                    price: '¥48',
                    image: 'https://placekitten.com/501/350'
                },
                {
                    name: 'Lemon Tart Cake',
                    description: 'Buttery shortcrust with zesty lemon filling and meringue top',
                    price: '¥42',
                    image: 'https://placekitten.com/502/350'
                },
                {
                    name: 'Red Velvet Cake',
                    description: 'Classic red velvet flavor with cream cheese frosting',
                    price: '¥52',
                    image: 'https://placekitten.com/503/350'
                },
                {
                    name: 'Carrot Cake',
                    description: 'Moist spiced cake with carrot glaze and cream cheese frosting',
                    price: '¥45',
                    image: 'https://placekitten.com/504/350'
                },
                {
                    name: 'Salted Caramel Cheesecake',
                    description: 'Creamy cheesecake with Givenchy salted caramel filling',
                    price: '¥68',
                    image: 'https://placekitten.com/505/350'
                }
            ];

            const menuContainer = document.getElementById('menu-items');
            
            menuItems.forEach(item => {
                const menuItem = document.createElement('div');
                menuItem.className = 'menu-item';
                menuItem.innerHTML = `
                    <img src="${item.image}" alt="${item.name} ${item.description}">
                    <div class="menu-item-content">
                        <h3>${item.name}</h3>
                        <p>${item.description}</p>
                        <span class="price">${item.price}</span>
                    </div>
                `;
                menuContainer.appendChild(menuItem);
            });

            document.getElementById('contact-form').addEventListener('submit', function(e) {
                e.preventDefault();
                alert('Thank you for your message. We'll get back to you soon!');
                this.reset();
            });
        });
    </script>
</body>
</html>
</answer>