Spaces:
Running
Running
File size: 9,166 Bytes
e6d79a5 6c6f59e e6d79a5 6c6f59e e6d79a5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | The Roll Joint</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.team-card:hover {
transform: translateY(-10px);
}
</style>
</head>
<body class="font-sans bg-pink-50">
<!-- Navigation -->
<nav class="bg-primary text-white sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold flex items-center">
<i data-feather="coffee" class="mr-2"></i>
The Roll Joint
</a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-secondary">Home</a>
<a href="menu.html" class="hover:text-secondary">Menu</a>
<a href="about.html" class="hover:text-secondary font-bold">About</a>
<a href="contact.html" class="hover:text-secondary">Contact</a>
<a href="gallery.html" class="hover:text-secondary">Gallery</a>
<a href="aunty-nans-kitchen.html" class="hover:text-secondary">Auntie Nan's Kitchen</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="bg-primary text-white py-20 text-center">
<div class="container mx-auto px-6">
<h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Our Story</h1>
<p class="text-xl max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">From a small family bakery to your favorite neighborhood roll spot</p>
</div>
</section>
<!-- Our Story -->
<section class="py-16 px-6">
<div class="container mx-auto max-w-4xl">
<div class="mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold mb-6 text-primary">The Beginning</h2>
<p class="text-gray-700 mb-4">In 2010, master baker James Rollinson opened The Roll Joint with a simple mission: to create the most delicious, handcrafted rolls using traditional techniques and premium ingredients.</p>
<p class="text-gray-700">What started as a small corner bakery with just three employees has grown into a beloved neighborhood institution, but we've never lost sight of our commitment to quality and craftsmanship.</p>
</div>
<div class="mb-16" data-aos="fade-up">
<h2 class="text-3xl font-bold mb-6 text-primary">Our Philosophy</h2>
<p class="text-gray-700 mb-4">We believe in the art of slow baking - giving our doughs time to develop flavor naturally, sourcing ingredients locally whenever possible, and never cutting corners.</p>
<p class="text-gray-700">Every roll that leaves our oven is made with the same care and attention we put into our very first batches over a decade ago.</p>
</div>
<div data-aos="fade-up">
<h2 class="text-3xl font-bold mb-6 text-primary">Meet the Team</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
<img src="http://static.photos/people/200x200/201" alt="James Rollinson" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-bold text-primary">James Rollinson</h3>
<p class="text-gray-600 mb-2">Founder & Head Baker</p>
<p class="text-gray-700 text-sm">"I still wake up at 3am every morning to start the first batch - it's my favorite time of day."</p>
</div>
<div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
<img src="http://static.photos/people/200x200/202" alt="Maria Chen" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-bold text-primary">Maria Chen</h3>
<p class="text-gray-600 mb-2">Pastry Chef</p>
<p class="text-gray-700 text-sm">"Our seasonal specials let me get creative while respecting tradition."</p>
</div>
<div class="team-card bg-white p-6 rounded-lg shadow-sm text-center transition duration-300">
<img src="http://static.photos/people/200x200/203" alt="David Wilson" class="w-32 h-32 rounded-full mx-auto mb-4">
<h3 class="text-xl font-bold text-primary">David Wilson</h3>
<p class="text-gray-600 mb-2">Coffee Master</p>
<p class="text-gray-700 text-sm">"The perfect cup should complement our rolls without overpowering them."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="py-16 px-6 bg-secondary">
<div class="container mx-auto max-w-4xl">
<h2 class="text-3xl font-bold mb-12 text-primary text-center" data-aos="fade-up">Our Core Values</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center" data-aos="fade-up" data-aos-delay="100">
<div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="heart" class="text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-primary">Passion</h3>
<p class="text-gray-700">We truly love what we do and it shows in every bite</p>
</div>
<div class="text-center" data-aos="fade-up" data-aos-delay="200">
<div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="award" class="text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-primary">Quality</h3>
<p class="text-gray-700">We never compromise on ingredients or techniques</p>
</div>
<div class="text-center" data-aos="fade-up" data-aos-delay="300">
<div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<i data-feather="users" class="text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2 text-primary">Community</h3>
<p class="text-gray-700">We're proud to be part of our neighborhood's story</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary text-white py-12 px-6">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">The Roll Joint</h3>
<p class="text-secondary">Artisan bakery specializing in handcrafted rolls since 2010.</p>
</div>
<div>
<h4 class="font-bold mb-4">Hours</h4>
<p class="mb-1">Monday - Friday: 7am - 6pm</p>
<p class="mb-1">Saturday: 8am - 5pm</p>
<p>Sunday: 9am - 3pm</p>
</div>
<div>
<h4 class="font-bold mb-4">Contact</h4>
<p class="mb-1">123 Baker Street</p>
<p class="mb-1">Rollington, CA 90210</p>
<p class="mb-1">(555) 123-4567</p>
<p>hello@rolljoint.com</p>
</div>
<div>
<h4 class="font-bold mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="hover:text-secondary"><i data-feather="instagram"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="facebook"></i></a>
<a href="#" class="hover:text-secondary"><i data-feather="twitter"></i></a>
</div>
</div>
</div>
<div class="border-t border-teal-700 mt-8 pt-8 text-center text-secondary">
<p>© 2023 The Roll Joint Bakery. All rights reserved.</p>
</div>
</div>
</footer>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
</script>
</body>
</html> |