Star Cake #2
Description
<title>Custom Vegan Birthday Cakes</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
background-color: #FDFBF8;
font-family: 'Roboto', sans-serif;
color: #4A4A4A;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
color: #5C4033;
}
.active-tab {
background-color: #D3E4CD !important;
color: #5C4033 !important;
border-left-color: #8DB38B !important;
}
.chart-container {
position: relative;
width: 100%;
max-width: 450px;
margin-left: auto;
margin-right: auto;
height: 320px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.customizer-canvas {
width: 200px;
height: 200px;
border-radius: 50%;
transition: background-color 0.5s ease;
border: 5px solid #EAE0D5;
}
</style>
<!-- Main Container -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header/Hero Section -->
<header class="text-center py-16 md:py-24">
<h1 class="text-4xl md:text-6xl font-bold tracking-tight mb-4">Elevate Your Celebration with a Conscience</h1>
<p class="max-w-3xl mx-auto text-lg md:text-xl text-gray-600">Discover exquisite, custom-designed vegan birthday cakes that are as compassionate as they are delicious. We believe everyone deserves a show-stopping cake on their special day.</p>
</header>
<!-- Why Choose Us? Section -->
<section id="why-us" class="py-16">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">Why Choose Our Cakes?</h2>
<p class="mt-4 max-w-2xl mx-auto text-gray-600">This section allows you to explore the core values and qualities that make our cakes special. Click on each benefit to learn more about our commitment to taste, ethics, and artistry.</p>
</div>
<div class="flex flex-col md:flex-row max-w-5xl mx-auto bg-white rounded-2xl shadow-lg overflow-hidden">
<!-- Tabs -->
<div class="w-full md:w-1/3 bg-gray-50 border-b md:border-b-0 md:border-r border-gray-200">
<nav class="flex md:flex-col p-4">
<button data-tab="taste" class="tab-button w-full text-left p-4 rounded-lg mb-2 border-l-4 border-transparent hover:bg-gray-200 transition-colors duration-300">
<span class="text-2xl mr-3">🎂</span> Taste That Amazes
</button>
<button data-tab="ethical" class="tab-button w-full text-left p-4 rounded-lg mb-2 border-l-4 border-transparent hover:bg-gray-200 transition-colors duration-300">
<span class="text-2xl mr-3">🌍</span> Ethical & Sustainable
</button>
<button data-tab="custom" class="tab-button w-full text-left p-4 rounded-lg mb-2 border-l-4 border-transparent hover:bg-gray-200 transition-colors duration-300">
<span class="text-2xl mr-3">🎨</span> Customization
</button>
<button data-tab="allergen" class="tab-button w-full text-left p-4 rounded-lg mb-2 border-l-4 border-transparent hover:bg-gray-200 transition-colors duration-300">
<span class="text-2xl mr-3">❤️</span> Allergen-Friendly
</button>
<button data-tab="local" class="tab-button w-full text-left p-4 rounded-lg border-l-4 border-transparent hover:bg-gray-200 transition-colors duration-300">
<span class="text-2xl mr-3">👋</span> Support Local
</button>
</nav>
</div>
<!-- Content -->
<div id="tab-content" class="w-full md:w-2/3 p-8 md:p-12">
<!-- Dynamic content will be injected here -->
</div>
</div>
</section>
<!-- Interactive Cake Customizer -->
<section id="customizer" class="py-16 bg-white rounded-2xl my-16 shadow-lg">
<div class="text-center mb-12 px-6">
<h2 class="text-3xl md:text-4xl font-bold">Your Vision, Our Creation</h2>
<p class="mt-4 max-w-2xl mx-auto text-gray-600">Our promise of "Customization Beyond Compare" means your dream cake comes to life. Use this simple simulator to see how different choices can create a unique cake. This interactive element demonstrates our collaborative design process.</p>
</div>
<div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16 px-6">
<div class="flex-shrink-0">
<div id="customizer-display" class="customizer-canvas bg-pink-200 mx-auto"></div>
</div>
<div class="text-center lg:text-left max-w-md">
<h3 class="text-2xl font-bold mb-4">Your Custom Cake</h3>
<p id="customizer-description" class="text-gray-700 min-h-[60px]">A beautiful light pink cake with classic vanilla frosting.</p>
<div class="mt-6 flex flex-wrap justify-center lg:justify-start gap-3">
<button data-style="color" data-value="#D3E4CD" class="customizer-button bg-green-200 hover:bg-green-300 text-green-800 font-bold py-2 px-4 rounded-full transition-transform transform hover:scale-105">Mint Green</button>
<button data-style="color" data-value="#FDE68A" class="customizer-button bg-yellow-200 hover:bg-yellow-300 text-yellow-800 font-bold py-2 px-4 rounded-full transition-transform transform hover:scale-105">Lemon Cream</button>
<button data-style="color" data-value="#C7D2FE" class="customizer-button bg-indigo-200 hover:bg-indigo-300 text-indigo-800 font-bold py-2 px-4 rounded-full transition-transform transform hover:scale-105">Lavender</button>
<button data-style="decoration" data-value="berries" class="customizer-button bg-red-200 hover:bg-red-300 text-red-800 font-bold py-2 px-4 rounded-full transition-transform transform hover:scale-105">Add Berries</button>
<button data-style="decoration" data-value="flowers" class="customizer-button bg-purple-200 hover:bg-purple-300 text-purple-800 font-bold py-2 px-4 rounded-full transition-transform transform hover:scale-105">Add Flowers</button>
</div>
</div>
</div>
</section>
<!-- Our Impact Section -->
<section id="impact" class="py-16">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">A Celebration with Impact</h2>
<p class="mt-4 max-w-2xl mx-auto text-gray-600">Choosing our cakes goes beyond taste. It's a responsible choice for the planet. This section visualizes our commitment to ethical and sustainable practices, translating our values into measurable impact.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
<div class="bg-white p-8 rounded-2xl shadow-lg">
<h3 class="text-2xl font-bold text-center mb-4">100% Plant-Based Promise</h3>
<p class="text-center text-gray-600 mb-6">Every single ingredient is derived from plants, ensuring a completely cruelty-free experience.</p>
<div class="chart-container">
<canvas id="ingredientsChart"></canvas>
</div>
</div>
<div class="bg-white p-8 rounded-2xl shadow-lg">
<h3 class="text-2xl font-bold text-center mb-4">Lighter on the Planet</h3>
<p class="text-center text-gray-600 mb-6">Our vegan recipes have a significantly lower environmental footprint compared to traditional dairy-based cakes. (Illustrative data).</p>
<div class="chart-container">
<canvas id="footprintChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-16">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold">Imagine Your Centerpiece</h2>
<p class="mt-4 max-w-2xl mx-auto text-gray-600">While every cake is unique, this gallery provides a glimpse into the artistry and style we bring to our creations. Let these designs spark inspiration for your own personalized, show-stopping cake.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-5xl mx-auto">
<img src="https://placehold.co/600x400/D3E4CD/5C4033?text=Elegant+Tiered" alt="Elegant tiered vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
<img src="https://placehold.co/600x400/FDE68A/5C4033?text=Whimsical+Kids" alt="Whimsical kids vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
<img src="https://placehold.co/600x400/C7D2FE/5C4033?text=Floral+Design" alt="Floral design vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
<img src="https://placehold.co/600x400/FECACA/5C4033?text=Chocolate+Decadence" alt="Chocolate vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
<img src="https://placehold.co/600x400/E5E7EB/5C4033?text=Modern+Minimalist" alt="Modern minimalist vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
<img src="https://placehold.co/600x400/FBCFE8/5C4033?text=Celebration+Cake" alt="Colorful celebration vegan cake" class="rounded-lg shadow-md aspect-w-3 aspect-h-2 object-cover w-full h-full">
</div>
</section>
<!-- Contact/CTA Section -->
<footer class="text-center py-16 md:py-24 bg-white mt-16 rounded-t-2xl">
<h2 class="text-3xl md:text-4xl font-bold">Ready for a Deliciously Compassionate Cake?</h2>
<p class="mt-4 max-w-2xl mx-auto text-gray-600 mb-8">Make your next birthday celebration truly special, memorable, and guilt-free. Contact us today to start designing your custom vegan birthday cake!</p>
<div class="space-y-4 sm:space-y-0 sm:space-x-6">
<p class="text-xl font-bold text-gray-800">Star Cake</p>
<p class="text-lg font-semibold text-gray-800">Mobile: 01715247588</p>
<p class="text-lg font-semibold text-gray-800">Facebook: <a href="https://www.facebook.com/StarCake" target="_blank" class="text-blue-600 hover:underline">Star Cake</a></p>
<p class="text-lg font-semibold text-gray-800">Web: <a href="https://facelook452.blogspot.com" target="_blank" class="text-blue-600 hover:underline">facelook452.blogspot.com</a></p>
</div>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabContentData = {
taste: {
title: "Taste That Amazes",
text: "Prepare to be delighted! Our cakes are made with premium plant-based ingredients, ensuring rich flavors, moist textures, and a truly indulgent experience that will impress even the most discerning palates. You won't believe it's vegan!"
},
ethical: {
title: "Ethical & Sustainable",
text: "Celebrate responsibly. Our cakes are 100% free from animal products, making them a kind choice for the planet and its inhabitants. We prioritize sustainable sourcing to ensure every bite feels good."
},
custom: {
title: "Customization Beyond Compare",
text: "Your vision, our creation! From whimsical themes to elegant designs, we work closely with you to bring your dream cake to life. Every cake is a unique masterpiece, tailored to the birthday person's personality and the party's theme."
},
allergen: {
title: "Allergen-Friendly Options",
text: "We understand dietary needs. Beyond being vegan, we offer a range of options to accommodate common allergies, ensuring peace of mind for you and your guests. Ask about our gluten-free, soy-free, and nut-free creations!"
},
local: {
title: "Support Local & Passionate Bakers",
text: "When you choose us, you're supporting a local business passionate about creating joy through vegan baking. We pour our hearts and souls into every single cake we bake!"
}
};
const tabButtons = document.querySelectorAll('.tab-button');
const tabContentContainer = document.getElementById('tab-content');
function updateTabContent(tabId) {
const content = tabContentData[tabId];
tabContentContainer.innerHTML = `
<h3 class="text-3xl font-bold mb-4">${content.title}</h3>
<p class="text-gray-700 text-lg leading-relaxed">${content.text}</p>
`;
tabButtons.forEach(button => {
button.classList.remove('active-tab');
if (button.dataset.tab === tabId) {
button.classList.add('active-tab');
}
});
}
tabButtons.forEach(button => {
button.addEventListener('click', () => {
updateTabContent(button.dataset.tab);
});
});
updateTabContent('taste');
const customizerDisplay = document.getElementById('customizer-display');
const customizerDescription = document.getElementById('customizer-description');
const customizerButtons = document.querySelectorAll('.customizer-button');
let cakeState = { color: 'light pink', decoration: 'classic vanilla frosting' };
customizerButtons.forEach(button => {
button.addEventListener('click', () => {
const style = button.dataset.style;
const value = button.dataset.value;
if (style === 'color') {
customizerDisplay.style.backgroundColor = value;
cakeState.color = button.textContent.toLowerCase();
} else if (style === 'decoration') {
cakeState.decoration = `topped with ${value}`;
}
customizerDescription.textContent = `A beautiful ${cakeState.color} cake with ${cakeState.decoration}.`
});
});
const ingredientsChartCtx = document.getElementById('ingredientsChart').getContext('2d');
new Chart(ingredientsChartCtx, {
type: 'doughnut',
data: {
labels: ['Plant-Based Ingredients'],
datasets: [{
label: '% of Ingredients',
data: [100],
backgroundColor: ['#8DB38B'],
borderColor: ['#FDFBF8'],
borderWidth: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
},
tooltip: {
callbacks: {
label: function(context) {
return `${context.label}: 100% Guaranteed`;
}
}
}
},
cutout: '70%'
}
});
const footprintChartCtx = document.getElementById('footprintChart').getContext('2d');
new Chart(footprintChartCtx, {
type: 'bar',
data: {
labels: ['Our Vegan Cake', 'Traditional Cake'],
datasets: [{
label: 'Relative Carbon Footprint Units',
data: [3, 8],
backgroundColor: [
'#8DB38B',
'#D1A698'
],
borderColor: [
'#6B8E6A',
'#A88579'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: {
beginAtZero: true,
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
},
plugins: {
legend: {
display: false
}
}
}
});
});
</script>