|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>The Chumbak Story - Handcrafted Fridge Magnets</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #D9A66F; |
|
|
color: #3A2921; |
|
|
} |
|
|
|
|
|
h1, h2, h3 { |
|
|
font-family: 'Playfair Display', serif; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
background: linear-gradient(135deg, #D9A66F 0%, #C75B36 100%); |
|
|
background-blend-mode: overlay; |
|
|
} |
|
|
|
|
|
.magnet-card { |
|
|
transition: all 0.3s ease; |
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
} |
|
|
|
|
|
.magnet-card:hover { |
|
|
transform: perspective(1000px) rotateY(10deg); |
|
|
box-shadow: 0 10px 25px rgba(58, 41, 33, 0.2); |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
@keyframes fadeInDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes pulseSlow { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 4s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.animate-float-1 { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.animate-float-2 { |
|
|
animation: float 5s ease-in-out infinite reverse; |
|
|
} |
|
|
|
|
|
.animate-float-3 { |
|
|
animation: float 7s ease-in-out infinite 1s; |
|
|
} |
|
|
|
|
|
.animate-fade-in-down { |
|
|
animation: fadeInDown 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
.animate-fade-in-up { |
|
|
animation: fadeInUp 1s ease-out 0.3s forwards; |
|
|
} |
|
|
|
|
|
.animate-pulse-slow { |
|
|
animation: pulseSlow 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.delay-100 { |
|
|
animation-delay: 0.1s; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-[#C75B36] text-white py-4 px-6 shadow-md"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="text-2xl font-bold font-serif">The Chumbak Story</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#story" class="hover:text-[#3A2921] transition">Our Story</a> |
|
|
<a href="#gallery" class="hover:text-[#3A2921] transition">Gallery</a> |
|
|
<a href="#testimonials" class="hover:text-[#3A2921] transition">Memories</a> |
|
|
<a href="#order" class="hover:text-[#3A2921] transition">Order</a> |
|
|
</div> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-image min-h-[80vh] flex items-center justify-center text-center px-4 relative overflow-hidden"> |
|
|
|
|
|
<div class="absolute top-1/4 left-1/4 w-16 h-16 rounded-full bg-[#C75B36] bg-opacity-20 animate-float-1"></div> |
|
|
<div class="absolute bottom-1/3 right-1/4 w-12 h-12 rounded-full bg-[#3A2921] bg-opacity-10 animate-float-2"></div> |
|
|
<div class="absolute top-1/3 right-1/3 w-10 h-10 rounded-full bg-[#C75B36] bg-opacity-15 animate-float-3"></div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-white/20 p-8 rounded-xl shadow-lg backdrop-blur-lg border border-white/10 transform transition-all duration-500 hover:scale-105 hover:bg-white/30"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 text-[#3A2921] animate-fade-in-down">Fridge Magnets Made from the Heart</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 text-[#3A2921] animate-fade-in-up delay-100">The Chumbak Story started with a single goal — to turn emotions into tiny pieces of art. Each magnet tells a story — of love, family, memory, or friendship.</p> |
|
|
<a href="https://api.whatsapp.com/send/?phone=918368420841&text&type=phone_number&app_absent=0" target="_blank" class="bg-[#C75B36] hover:bg-[#3A2921] text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 inline-block animate-pulse-slow">Make Your Custom Order</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="story" class="py-20 px-6 bg-[#D9A66F]"> |
|
|
<div class="container mx-auto max-w-4xl"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Why We Do What We Do</h2> |
|
|
<div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-10"> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://images.unsplash.com/photo-1516589091380-5d9d3a0c1f1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Grandmother and granddaughter baking together" |
|
|
class="rounded-xl shadow-lg floating"> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<p class="text-lg mb-6">It all began with a simple refrigerator door. As a child, I would watch my grandmother carefully arrange photos, notes, and little trinkets on her fridge - each item holding a precious memory. When she passed, those magnets became tangible connections to her love.</p> |
|
|
<p class="text-lg mb-6">Years later, when my best friend moved across the country, I wanted to give her something more meaningful than a typical goodbye gift. I created a custom fridge magnet with our favorite photo and a handwritten note on the back. That's when The Chumbak Story was born.</p> |
|
|
<p class="text-lg">Today, we handcraft each magnet with the same care and attention we would give to our own memories. Because we believe that the little moments - the everyday joys, the quiet love, the spontaneous laughter - deserve to be celebrated and remembered.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-20 px-6 bg-[#f5e9dc]"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Memory Gallery</h2> |
|
|
<div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div> |
|
|
<p class="max-w-2xl mx-auto text-lg">Each Chumbak tells a unique story. Here are some of the memories we've had the honor of preserving.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Father and son fishing at sunset" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">For Dad's Birthday</h3> |
|
|
<p class="text-[#C75B36]">"His favorite fishing spot, now always with him"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" |
|
|
alt="Couple holding hands on their wedding day" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">First Anniversary</h3> |
|
|
<p class="text-[#C75B36]">"The restaurant where we had our first date"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Family standing in front of their new home" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">Housewarming Memory</h3> |
|
|
<p class="text-[#C75B36]">"The key to our first home together"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Graduate hugging proud parents" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">Graduation Day</h3> |
|
|
<p class="text-[#C75B36]">"A proud moment frozen in time"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" |
|
|
alt="Family building sandcastle at beach" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">Family Vacation</h3> |
|
|
<p class="text-[#C75B36]">"That perfect sunset we all watched together"</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" |
|
|
alt="Friends hugging and laughing together" |
|
|
class="w-full h-64 object-cover rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold mb-2 text-[#3A2921]">Best Friends Forever</h3> |
|
|
<p class="text-[#C75B36]">"Our inside joke that never gets old"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-20 px-6 bg-[#D9A66F]"> |
|
|
<div class="container mx-auto max-w-6xl"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Memories Shared</h2> |
|
|
<div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div> |
|
|
<p class="max-w-2xl mx-auto text-lg">Here's what some of our customers say about their Chumbak memories</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="text-[#C75B36] text-4xl mb-4">"</div> |
|
|
<p class="text-lg mb-6">Every morning when I get milk for my coffee, I see the Chumbak my daughter made of our last family vacation. It's the first thing that makes me smile each day.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-bold">Sarah K.</h4> |
|
|
<p class="text-sm text-[#C75B36]">Mother of two</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="text-[#C75B36] text-4xl mb-4">"</div> |
|
|
<p class="text-lg mb-6">I gave my husband a Chumbak with our wedding photo for our anniversary. He cried when he saw it, and now it holds up all our important reminders on the fridge.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-bold">Michael & Jen</h4> |
|
|
<p class="text-sm text-[#C75B36]">Married 5 years</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-white p-8 rounded-xl shadow-md"> |
|
|
<div class="text-[#C75B36] text-4xl mb-4">"</div> |
|
|
<p class="text-lg mb-6">After my mom passed, my siblings and I each got a Chumbak made from her favorite recipe card. It's like having a little piece of her in our kitchens.</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-bold">The Thompson Family</h4> |
|
|
<p class="text-sm text-[#C75B36]">Keeping memories alive</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="order" class="py-20 px-6 bg-[#3A2921] text-white"> |
|
|
<div class="container mx-auto max-w-4xl text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Have a Story to Turn into a Chumbak?</h2> |
|
|
<p class="text-xl mb-10 max-w-2xl mx-auto">We'll help you turn your memory into something you can hold.</p> |
|
|
<a href="https://api.whatsapp.com/send/?phone=918368420841&text&type=phone_number&app_absent=0" target="_blank" class="bg-[#C75B36] hover:bg-[#D9A66F] text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 inline-block">Make Your Custom Order</a> |
|
|
|
|
|
<div class="mt-16 flex justify-center"> |
|
|
<div class="w-24 h-24 rounded-full bg-[#C75B36] flex items-center justify-center text-white text-4xl floating"> |
|
|
<i class="fas fa-heart"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-[#C75B36] text-white py-12 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold font-serif mb-4">The Chumbak Story</h3> |
|
|
<p class="italic">"A memory on your fridge. A smile in your heart."</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:space-x-12 space-y-4 md:space-y-0 text-center md:text-left"> |
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Explore</h4> |
|
|
<ul class="space-y-1"> |
|
|
<li><a href="#story" class="hover:text-[#3A2921] transition">Our Story</a></li> |
|
|
<li><a href="#gallery" class="hover:text-[#3A2921] transition">Gallery</a></li> |
|
|
<li><a href="#testimonials" class="hover:text-[#3A2921] transition">Memories</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Connect</h4> |
|
|
<ul class="space-y-1"> |
|
|
<li><a href="#" class="hover:text-[#3A2921] transition">Contact Us</a></li> |
|
|
<li><a href="#" class="hover:text-[#3A2921] transition">Instagram</a></li> |
|
|
<li><a href="#" class="hover:text-[#3A2921] transition">Facebook</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-bold mb-2">Legal</h4> |
|
|
<ul class="space-y-1"> |
|
|
<li><a href="#" class="hover:text-[#3A2921] transition">Privacy Policy</a></li> |
|
|
<li><a href="#" class="hover:text-[#3A2921] transition">Terms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-[#D9A66F] mt-12 pt-8 text-center"> |
|
|
<p>© 2023 The Chumbak Story. All memories preserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('.md\\:hidden').addEventListener('click', function() { |
|
|
|
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=devdetex/chumbak" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
