Scribd
Upload
6 views29 pages

Breadcode

Phina's Bakery offers fresh artisan bread delivery, emphasizing traditional baking techniques and premium ingredients. The website features a variety of products, including sourdough, tea bread, and multigrain loaves, available for order online. It also includes a navigation menu, contact information, and a scroll-to-top button for user convenience.

Uploaded by

boatengrodrick1
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views29 pages

Breadcode

Phina's Bakery offers fresh artisan bread delivery, emphasizing traditional baking techniques and premium ingredients. The website features a variety of products, including sourdough, tea bread, and multigrain loaves, available for order online. It also includes a navigation menu, contact information, and a scroll-to-top button for user convenience.

Uploaded by

boatengrodrick1
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Phina's Bakery - Fresh Bread Delivery</title>
<script src="[Link]
<script>[Link]={theme:{extend:{colors:
{primary:'#800080',secondary:'#FFD700'},borderRadius:
{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px
','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Pacifico&display=swap" rel="stylesheet">
<link href="[Link]
family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="[Link]
[Link]">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Poppins', sans-serif;
}
input, textarea, select, button {
outline: none;
}
.custom-checkbox {
position: relative;
cursor: pointer;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 2px solid #800080;
border-radius: 4px;
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #800080;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.custom-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #800080;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.custom-range {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 5px;
outline: none;
}
.custom-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: #800080;
border-radius: 50%;
cursor: pointer;
}
.custom-range::-moz-range-thumb {
width: 18px;
height: 18px;
background: #800080;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Top Contact Strip -->
<div class="bg-secondary text-primary py-2 text-center font-medium">
<span>Call us: 0243940266 | 0242910459</span>
</div>

<!-- Navigation -->


<nav class="bg-[#800080] text-white py-4 sticky top-0 z-50 shadow-md">
<div class="container mx-auto px-4 flex justify-between items-center">
<a href="#" class="text-3xl font-['Pacifico'] text-yellow-300
tracking-wide hover:text-yellow-400 transition duration-300">
Phina's Bakery
</a>
<ul class="hidden md:flex space-x-8 text-base font-medium">
<li>
<a href="#menu" class="hover:text-yellow-300 transition duration-
300">Menu</a>
</li>
<li>
<a href="#order" class="hover:text-yellow-300 transition
duration-300">Order</a>
</li>
<li>
<a href="#contact" class="hover:text-yellow-300 transition
duration-300">Contact</a>
</li>
</ul>
<!-- Mobile menu button -->
<button class="md:hidden text-yellow-300 focus:outline-none">
<i class="ri-menu-line ri-2x"></i>
</button>
</div>
</nav>

<!-- Scroll to Top Button -->


<button id="scrollTopBtn" class="fixed bottom-6 right-6 bg-[#800080]
text-yellow-300 px-4 py-2 rounded-full shadow-lg hover:bg-[#5a005a]
transition duration-300 hidden z-50">
↑ Top
</button>

<script>
// Show button when scrolled down
[Link]("scroll", function() {
const btn = [Link]("scrollTopBtn");
if ([Link] > 200) {
[Link]("hidden");
} else {
[Link]("hidden");
}
});

// Scroll to top on click


[Link]("scrollTopBtn").addEventListener("click",
function() {
[Link]({
top: 0,
behavior: "smooth"
});
});
</script>

<!-- smooth scroll style -->


<style>
html {
scroll-behavior: smooth;
}
</style>

<!-- Hero Section -->


<section class="relative">
<div class="absolute inset-0 bg-cover bg-center"
style="background-image: url('[Link]
%20beautiful%20bakery%20scene%20with%20freshly%20baked%20artisan%20bread
%20loaves%20on%20wooden%20tables.%20The%20left%20side%20has%20a%20smooth
%20gradient%20transitioning%20to%20white%20space%20for%20text.%20The
%20scene%20shows%20various%20types%20of%20bread%20with%20golden%20crusts
%2C%20some%20with%20flour%20dusting%2C%20arranged%20artistically.%20Soft
%20natural%20lighting%20from%20the%20right%20side%20creates%20a%20warm%2C
%20inviting
%20atmosphere.&width=1600&height=800&seq=1&orientation=landscape');"></
div>
<div class="absolute inset-0 bg-gradient-to-r from-white via-
white/90 to-transparent"></div>
<div class="relative container mx-auto px-4 py-24 md:py-32 flex
items-center min-h-[600px]">
<div class="max-w-xl">
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-
primary">Fresh Artisan Bread Delivered to Your Door</h1>
<p class="text-lg mb-8 text-gray-700">Experience the
warmth and aroma of freshly baked bread without leaving your home.
Phina's Bakery brings traditional baking techniques and premium
ingredients right to your doorstep.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#menu" class="bg-primary text-white px-8 py-
3 rounded-button font-medium hover:bg-primary/90 transition duration-300
text-center whitespace-nowrap">View Our Menu</a>
<a href="#order" class="bg-secondary text-primary px-
8 py-3 rounded-button font-medium hover:bg-secondary/90 transition
duration-300 text-center whitespace-nowrap">Order Now</a>
</div>
</div>
</div>
</section>

<!-- Featured Products -->


<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary mb-2">Our
Featured Breads</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Discover our
most popular artisan breads, baked fresh daily with traditional recipes
and premium ingredients</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">


<!-- Featured Product 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden
transform hover:-translate-y-1 transition duration-300">
<div class="h-64 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20a%20perfectly%20baked%20sourdough%20bread%20with
%20crispy%20golden%20crust%20and%20flour%20dusting%20on%20top.%20The
%20bread%20has%20beautiful%20scoring%20patterns%20and%20visible%20air
%20bubbles%20in%20the%20crust.%20The%20background%20is%20simple%20and
%20neutral%20to%20highlight%20the%20bread%20details.%20Professional
%20food%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=2&orientation=landscape"
alt="Sourdough Bread" class="w-full h-full object-cover object-top">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-
2">Sugar Bread</h3>
<p class="text-gray-600 mb-4">Our signature
sourdough with a perfect balance of tangy flavor and chewy texture.</p>
<div class="flex justify-between items-center mb-
4">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
<button class="w-full bg-secondary text-primary
py-2 rounded-button font-medium hover:bg-secondary/90 transition
duration-300 whitespace-nowrap">Add to Order</button>
</div>
</div>

<!-- Featured Product 2 -->


<div class="bg-white rounded-lg shadow-lg overflow-hidden
transform hover:-translate-y-1 transition duration-300">
<div class="h-64 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20freshly%20baked%20baguettes%20with%20crispy
%20golden%20crust%20and%20flour%20dusting.%20The%20baguettes%20have
%20perfect%20scoring%20marks%20along%20the%20top%20and%20a%20light%2C
%20airy%20interior%20visible%20at%20the%20cut%20end.%20The%20background
%20is%20simple%20and%20neutral%20to%20highlight%20the%20bread%20details.
%20Professional%20food%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=3&orientation=landscape"
alt="French Baguette" class="w-full h-full object-cover object-top">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-
2">Tea Bread</h3>
<p class="text-gray-600 mb-4">Crispy on the
outside, soft on the inside, our authentic Tea Bread are perfect for any
meal.</p>
<div class="flex justify-between items-center mb-
4">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
<button class="w-full bg-secondary text-primary
py-2 rounded-button font-medium hover:bg-secondary/90 transition
duration-300 whitespace-nowrap">Add to Order</button>
</div>
</div>

<!-- Featured Product 3 -->


<div class="bg-white rounded-lg shadow-lg overflow-hidden
transform hover:-translate-y-1 transition duration-300">
<div class="h-64 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20a%20rustic%20multigrain%20bread%20loaf%20with
%20visible%20seeds%20and%20grains%20on%20the%20crust.%20The%20bread%20has
%20a%20rich%20brown%20color%20and%20perfect%20texture.%20A%20slice%20is
%20cut%20to%20show%20the%20interior%20with%20various%20seeds%20and
%20grains%20throughout.%20The%20background%20is%20simple%20and%20neutral
%20to%20highlight%20the%20bread%20details.%20Professional%20food
%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=4&orientation=landscape"
alt="Multigrain Bread" class="w-full h-full object-cover object-top">
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-
2">Multigrain loaf/Wheat Bread</h3>
<p class="text-gray-600 mb-4">Packed with
nutritious seeds and grains, this hearty bread is both healthy and
delicious.</p>
<div class="flex justify-between items-center mb-
4">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
<button class="w-full bg-secondary text-primary
py-2 rounded-button font-medium hover:bg-secondary/90 transition
duration-300 whitespace-nowrap">Add to Order</button>
</div>
</div>
</div>

<div class="text-center mt-12">


<a href="#menu" class="inline-block bg-primary text-white
px-8 py-3 rounded-button font-medium hover:bg-primary/90 transition
duration-300 whitespace-nowrap">View All Products</a>
</div>
</div>
</section>
<!-- Why Choose Us -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary mb-2">Why
Choose Phina's Bakery?</h2>
<p class="text-gray-600 max-w-2xl mx-auto">We're
committed to bringing you the finest quality bread with convenience and
care</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">


<!-- Feature 1 -->
<div class="bg-white p-8 rounded-lg shadow-md text-
center">
<div class="w-16 h-16 mx-auto mb-4 text-primary flex
items-center justify-center">
<i class="ri-bread-line ri-2x"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-
3">Freshly Baked Daily</h3>
<p class="text-gray-600">All our breads are baked
fresh every morning using traditional techniques and recipes passed down
through generations.</p>
</div>

<!-- Feature 2 -->


<div class="bg-white p-8 rounded-lg shadow-md text-
center">
<div class="w-16 h-16 mx-auto mb-4 text-primary flex
items-center justify-center">
<i class="ri-truck-line ri-2x"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Fast
Delivery</h3>
<p class="text-gray-600">We deliver to your doorstep
within hours of baking, ensuring you receive bread at its freshest and
most delicious.</p>
</div>

<!-- Feature 3 -->


<div class="bg-white p-8 rounded-lg shadow-md text-
center">
<div class="w-16 h-16 mx-auto mb-4 text-primary flex
items-center justify-center">
<i class="ri-leaf-line ri-2x"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-
3">Quality Ingredients</h3>
<p class="text-gray-600">We use only premium, locally
sourced ingredients with no artificial preservatives or additives in all
our products.</p>
</div>
</div>
</div>
</section>

<!-- Menu Section -->


<section id="menu" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary mb-2">Our
Bread Menu</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Explore our
wide selection of artisan breads, each crafted with care and
expertise</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3


gap-8">
<!-- Menu Item 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden
flex flex-col">
<div class="h-48 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20a%20perfectly%20baked%20sourdough%20bread%20with
%20crispy%20golden%20crust%20and%20flour%20dusting%20on%20top.%20The
%20bread%20has%20beautiful%20scoring%20patterns%20and%20visible%20air
%20bubbles%20in%20the%20crust.%20The%20background%20is%20simple%20and
%20neutral%20to%20highlight%20the%20bread%20details.%20Professional
%20food%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=5&orientation=landscape"
alt="Sourdough Bread" class="w-full h-full object-cover object-top">
</div>
<div class="p-6 flex-grow">
<h3 class="text-xl font-bold text-primary mb-
2">Sugar Bread</h3>
<p class="text-gray-600 mb-4">Our signature
sourdough with a perfect balance of tangy flavor and chewy texture.</p>
<div class="flex justify-between items-center">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
</div>
</div>

<!-- Menu Item 2 -->


<div class="bg-white rounded-lg shadow-md overflow-hidden
flex flex-col">
<div class="h-48 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20freshly%20baked%20baguettes%20with%20crispy
%20golden%20crust%20and%20flour%20dusting.%20The%20baguettes%20have
%20perfect%20scoring%20marks%20along%20the%20top%20and%20a%20light%2C
%20airy%20interior%20visible%20at%20the%20cut%20end.%20The%20background
%20is%20simple%20and%20neutral%20to%20highlight%20the%20bread%20details.
%20Professional%20food%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=6&orientation=landscape"
alt="French Baguette" class="w-full h-full object-cover object-top">
</div>
<div class="p-6 flex-grow">
<h3 class="text-xl font-bold text-primary mb-
2">Tea Bread</h3>
<p class="text-gray-600 mb-4">Crispy on the
outside, soft on the inside, our authentic French baguettes are perfect
for any meal.</p>
<div class="flex justify-between items-center">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
</div>
</div>

<!-- Menu Item 3 -->


<div class="bg-white rounded-lg shadow-md overflow-hidden
flex flex-col">
<div class="h-48 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20a%20rustic%20multigrain%20bread%20loaf%20with
%20visible%20seeds%20and%20grains%20on%20the%20crust.%20The%20bread%20has
%20a%20rich%20brown%20color%20and%20perfect%20texture.%20A%20slice%20is
%20cut%20to%20show%20the%20interior%20with%20various%20seeds%20and
%20grains%20throughout.%20The%20background%20is%20simple%20and%20neutral
%20to%20highlight%20the%20bread%20details.%20Professional%20food
%20photography%20style%20with%20soft%20natural
%20lighting.&width=600&height=400&seq=7&orientation=landscape"
alt="Multigrain Bread" class="w-full h-full object-cover object-top">
</div>
<div class="p-6 flex-grow">
<h3 class="text-xl font-bold text-primary mb-
2">Multigrain loaf/Wheat Bread</h3>
<p class="text-gray-600 mb-4">Packed with
nutritious seeds and grains, this hearty bread is both healthy and
delicious.</p>
<div class="flex justify-between items-center">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
</div>
</div>

<!-- Menu Item 4 -->


<div class="bg-white rounded-lg shadow-md overflow-hidden
flex flex-col">
<div class="h-48 overflow-hidden">
<img src="[Link]
query=Close-up%20of%20a%20traditional%20rye%20bread%20loaf%20with%20its
%20distinctive%20dark%20color%20and%20dense%20texture.%20The%20bread
%20has%20a%20firm%20crust%20with%20caraway%20seeds%20visible%20on%20top.
%20A%20slice%20is%20cut%20to%20show%20the%20hearty%20interior.%20The
%20background%20is%20simple%20and%20neutral%20to%20highlight%20the
%20bread%20details.%20Professional%20food%20photography%20style%20with
%20soft%20natural
%20lighting.&width=600&height=400&seq=10&orientation=landscape" alt="Rye
Bread" class="w-full h-full object-cover object-top">
</div>
<div class="p-6 flex-grow">
<h3 class="text-xl font-bold text-primary mb-
2">Cocoa Bread</h3>
<p class="text-gray-600 mb-4">Dense and flavorful
rye bread with caraway seeds, perfect for hearty sandwiches.</p>
<div class="flex justify-between items-center">
<span class="text-gray-800 font-medium">Full
Size: 20 cedis</span>
<span class="text-gray-800 font-medium">Small
Size: 5 cedis</span>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Order Form Section -->


<section id="order" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto bg-white rounded-lg shadow-lg
p-8">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-primary mb-
2">Place Your Order</h2>
<p class="text-gray-600">Fill out the form below to
place your bread delivery order</p>
</div>

<form>
<!-- Personal Information -->
<div class="mb-8">
<h3 class="text-xl font-semibold text-primary mb-
4">Personal Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-
6">
<div>
<label for="name" class="block text-gray-
700 mb-2">Full Name</label>
<input type="text" id="name" class="w-
full px-4 py-2 border border-gray-300 rounded focus:border-primary
focus:ring-1 focus:ring-primary" required>
</div>
<div>
<label for="phone" class="block text-
gray-700 mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-
full px-4 py-2 border border-gray-300 rounded focus:border-primary
focus:ring-1 focus:ring-primary" required>
</div>
<div>
<label for="email" class="block text-
gray-700 mb-2">Email Address</label>
<input type="email" id="email" class="w-
full px-4 py-2 border border-gray-300 rounded focus:border-primary
focus:ring-1 focus:ring-primary" required>
</div>
<div>
<label for="address" class="block text-
gray-700 mb-2">Delivery Address</label>
<input type="text" id="address" class="w-
full px-4 py-2 border border-gray-300 rounded focus:border-primary
focus:ring-1 focus:ring-primary" required>
</div>
</div>
</div>

<form id="orderForm" class="space-y-8 max-w-xl mx-auto p-8 bg-white


rounded-2xl shadow-2xl border border-purple-300">

<!-- Order Section -->


<div>
<h3 class="text-3xl font-bold text-[#800080] mb-6 border-b-2 border-
[#800080] pb-2">Order Details</h3>

<!-- Sugar Bread -->


<div class="mb-6">
<label class="block text-[#800080] font-semibold mb-2">Sugar
Bread</label>
<div class="flex flex-col md:flex-row gap-4">
<input type="number" id="sugarQty" min="0" value="0"
class="border rounded-xl p-4 w-full border-[#800080] focus:border-
[#800080] focus:ring-[#800080] text-lg" placeholder="Quantity" />
<select id="sugarSize" class="border rounded-xl p-4 w-full
border-[#800080] text-lg focus:border-[#800080] focus:ring-[#800080]">
<option value="full">Full ($5)</option>
<option value="small">Small ($2)</option>
</select>
</div>
</div>
<!-- Butter Bread -->
<div class="mb-6">
<label class="block text-[#800080] font-semibold mb-2">Butter
Bread</label>
<div class="flex flex-col md:flex-row gap-4">
<input type="number" id="butterQty" min="0" value="0"
class="border rounded-xl p-4 w-full border-[#800080] focus:border-
[#800080] focus:ring-[#800080] text-lg" placeholder="Quantity" />
<select id="butterSize" class="border rounded-xl p-4 w-full
border-[#800080] text-lg focus:border-[#800080] focus:ring-[#800080]">
<option value="full">Full ($5)</option>
<option value="small">Small ($2)</option>
</select>
</div>
</div>

<!-- Cocoa Bread -->


<div class="mb-6">
<label class="block text-[#800080] font-semibold mb-2">Cocoa
Bread</label>
<div class="flex flex-col md:flex-row gap-4">
<input type="number" id="cocoaQty" min="0" value="0"
class="border rounded-xl p-4 w-full border-[#800080] focus:border-
[#800080] focus:ring-[#800080] text-lg" placeholder="Quantity" />
<select id="cocoaSize" class="border rounded-xl p-4 w-full
border-[#800080] text-lg focus:border-[#800080] focus:ring-[#800080]">
<option value="full">Full ($5)</option>
<option value="small">Small ($2)</option>
</select>
</div>
</div>

<!-- Wheat Bread -->


<div class="mb-6">
<label class="block text-[#800080] font-semibold mb-2">Wheat
Bread</label>
<div class="flex flex-col md:flex-row gap-4">
<input type="number" id="wheatQty" min="0" value="0"
class="border rounded-xl p-4 w-full border-[#800080] focus:border-
[#800080] focus:ring-[#800080] text-lg" placeholder="Quantity" />
<select id="wheatSize" class="border rounded-xl p-4 w-full
border-[#800080] text-lg focus:border-[#800080] focus:ring-[#800080]">
<option value="full">Full ($5)</option>
<option value="small">Small ($2)</option>
</select>
</div>
</div>

<p id="totalAmount" class="mt-4 text-xl font-bold text-


[#800080]">Your total amount is: $0</p>
</div>

<!-- Payment Method -->


<div>
<h3 class="text-3xl font-bold text-[#800080] mb-6 border-b-2 border-
[#800080] pb-2">Payment Method</h3>
<div class="space-y-4">
<label class="flex items-center space-x-3 cursor-pointer">
<input type="radio" name="payment" value="delivery" checked
class="accent-[#800080] w-5 h-5" />
<span class="text-lg text-[#800080]">Cash on Delivery</span>
</label>
<label class="flex items-center space-x-3 cursor-pointer">
<input type="radio" name="payment" value="mobile" class="accent-
[#800080] w-5 h-5" />
<span class="text-lg text-[#800080]">Mobile Money</span>
</label>
</div>
</div>

<!-- MoMo details -->


<div id="mobileMoneyDetails" class="hidden bg-yellow-100 border border-
yellow-400 p-4 rounded-xl mt-4 shadow-inner transition-all duration-500">
<h4 class="font-bold text-[#800080] mb-2">Mobile Money Payment</h4>
<p class="text-[#800080] mb-2">
Please send the amount shown above to <strong>MTN
0243940266</strong> and enter your transaction ID below:
</p>
<input type="text" id="transactionId" placeholder="Transaction ID"
class="w-full border border-[#800080] rounded-xl p-4 text-lg
focus:border-[#800080] focus:ring-[#800080]" />
</div>

<div class="text-center mt-8">


<button type="submit" class="bg-[#800080] text-yellow-300 text-lg px-
8 py-4 rounded-xl hover:bg-[#660066] transition duration-300 shadow-xl">
Place Order
</button>
</div>
</form>

<script>
[Link]("DOMContentLoaded", function() {
const totalDisplay = [Link]("totalAmount");
const momoDetails = [Link]("mobileMoneyDetails");
const paymentRadios =
[Link]('input[name="payment"]');
const form = [Link]("orderForm");

function calculateTotal() {
const sugarQty = parseInt([Link]("sugarQty").value)
|| 0;
const butterQty =
parseInt([Link]("butterQty").value) || 0;
const cocoaQty = parseInt([Link]("cocoaQty").value)
|| 0;
const wheatQty = parseInt([Link]("wheatQty").value)
|| 0;

const sugarSize = [Link]("sugarSize").value;


const butterSize = [Link]("butterSize").value;
const cocoaSize = [Link]("cocoaSize").value;
const wheatSize = [Link]("wheatSize").value;

const sugarPrice = sugarSize === "full" ? 5 : 2;


const butterPrice = butterSize === "full" ? 5 : 2;
const cocoaPrice = cocoaSize === "full" ? 5 : 2;
const wheatPrice = wheatSize === "full" ? 5 : 2;

const total = (sugarQty * sugarPrice) +


(butterQty * butterPrice) +
(cocoaQty * cocoaPrice) +
(wheatQty * wheatPrice);

[Link] = `Your total amount is: $${total}`;


return total;
}

// recalculate automatically on change

["sugarQty","sugarSize","butterQty","butterSize","cocoaQty","cocoaSize","
wheatQty","wheatSize"].forEach(id => {
[Link](id).addEventListener("input",
calculateTotal);
});

[Link](radio => {
[Link]("change", function() {
if ([Link] === "mobile") {
[Link]("hidden");
} else {
[Link]("hidden");
}
});
});

[Link]("submit", function(e) {
[Link]();
const paymentMethod =
[Link]('input[name="payment"]:checked').value;
const total = calculateTotal();

if (total === 0) {
alert("Please select at least one bread item before ordering.");
return;
}

if (paymentMethod === "mobile") {


const txId = [Link]("transactionId").[Link]();
if (!txId) {
alert("Please enter your transaction ID to confirm MoMo
payment.");
return;
}
alert(`Order confirmed! Amount: $${total}, Transaction ID: ${txId}.
Thank you!`);
} else {
alert(`Order confirmed with Cash on Delivery. Amount due: $$
{total}`);
}

[Link]();
[Link] = "Your total amount is: $0";
[Link]("hidden");
});
});
</script>
<!-- Testimonials -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-14">
<h2 class="text-3xl font-bold text-[#800080] mb-4">What Our
Customers Say</h2>
<p class="text-gray-700 max-w-2xl mx-auto leading-relaxed text-
base">
Hear from our satisfied customers who enjoy our fresh bread
delivery service
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-10">


<!-- Testimonial 1 -->
<div class="bg-purple-50 p-8 rounded-2xl shadow-lg border border-
[#800080]/30 hover:shadow-2xl transition">
<div class="flex items-center mb-4 text-[#FFD700] text-xl">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
<p class="text-gray-800 mb-8 text-base leading-relaxed">
“The bread from Phina's Bakery is absolutely amazing! The
sourdough has the perfect
texture and flavor. I love that I can have it delivered fresh
to my door without having to go to the bakery.”
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-[#800080] rounded-full flex items-
center justify-center text-white font-bold">EA</div>
<div class="ml-4">
<h4 class="font-semibold text-gray-800">Elizabeth Antwi</h4>
<p class="text-gray-600 text-sm">Regular Customer</p>
</div>
</div>
</div>

<!-- Testimonial 2 -->


<div class="bg-purple-50 p-8 rounded-2xl shadow-lg border border-
[#800080]/30 hover:shadow-2xl transition">
<div class="flex items-center mb-4 text-[#FFD700] text-xl">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
<p class="text-gray-800 mb-8 text-base leading-relaxed">
“I've tried many bakeries in town, but Phina's stands out for
quality and service. Their multigrain bread is my family's favorite, and
the delivery is always prompt and friendly.”
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-[#800080] rounded-full flex items-
center justify-center text-white font-bold">KO</div>
<div class="ml-4">
<h4 class="font-semibold text-gray-800">Kwame Osei</h4>
<p class="text-gray-600 text-sm">Weekly Subscriber</p>
</div>
</div>
</div>

<!-- Testimonial 3 -->


<div class="bg-purple-50 p-8 rounded-2xl shadow-lg border border-
[#800080]/30 hover:shadow-2xl transition">
<div class="flex items-center mb-4 text-[#FFD700] text-xl">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
</div>
<p class="text-gray-800 mb-8 text-base leading-relaxed">
“As a busy professional, I appreciate the convenience of having
fresh bread delivered. The French baguettes are as good as any I've had
in Europe, and the online ordering process is simple and efficient.”
</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-[#800080] rounded-full flex items-
center justify-center text-white font-bold">AM</div>
<div class="ml-4">
<h4 class="font-semibold text-gray-800">Abena Mensah</h4>
<p class="text-gray-600 text-sm">Business Customer</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contact Section -->


<section id="contact" class="py-20 bg-purple-50">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-14">
<h2 class="text-3xl font-bold text-[#800080] mb-4">Contact
Us</h2>
<p class="text-gray-700 max-w-2xl mx-auto leading-relaxed text-
base">
Have questions or special requests? Get in touch with our team
</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12">


<!-- Contact Info -->
<div class="bg-white p-8 rounded-2xl shadow-md border border-
[#800080]/20 h-full">
<h3 class="text-xl font-bold text-[#800080] mb-6">Our
Information</h3>
<div class="space-y-8 text-gray-700 text-base">
<div class="flex items-start gap-4">
<i class="ri-map-pin-line ri-xl text-[#800080]"></i>
<div>
<h4 class="font-semibold text-gray-800">Location</h4>
<p>Sowutuom, Accra, Ghana</p>
</div>
</div>
<div class="flex items-start gap-4">
<i class="ri-phone-line ri-xl text-[#800080]"></i>
<div>
<h4 class="font-semibold text-gray-800">Phone</h4>
<p>0243940266 / 0242910459</p>
</div>
</div>
<div class="flex items-start gap-4">
<i class="ri-mail-line ri-xl text-[#800080]"></i>
<div>
<h4 class="font-semibold text-gray-800">Email</h4>
<p>boatengrodrick1@[Link]</p>
</div>
</div>
<div class="flex items-start gap-4">
<i class="ri-time-line ri-xl text-[#800080]"></i>
<div>
<h4 class="font-semibold text-gray-800">Business
Hours</h4>
<p>Mon - Fri: 7:00 AM - 7:00 PM</p>
<p>Saturday: 8:00 AM - 5:00 PM</p>
</div>
</div>
</div>

<div class="mt-8">
<h4 class="font-semibold text-gray-800 mb-4">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-[#800080] text-white
rounded-full flex items-center justify-center hover:bg-[#5e005e]
transition">
<i class="ri-facebook-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-[#800080] text-white
rounded-full flex items-center justify-center hover:bg-[#5e005e]
transition">
<i class="ri-instagram-fill"></i>
</a>
<a href="#" class="w-10 h-10 bg-[#800080] text-white
rounded-full flex items-center justify-center hover:bg-[#5e005e]
transition">
<i class="ri-whatsapp-fill"></i>
</a>
</div>
</div>
</div>

<!-- Contact Form -->


<div class="bg-white p-8 rounded-2xl shadow-md border border-
[#800080]/20">
<h3 class="text-xl font-bold text-[#800080] mb-6">Send Us a
Message</h3>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="contact-name" class="block text-gray-700 mb-
2">Your Name</label>
<input type="text" id="contact-name" class="w-full px-4
py-3 border border-gray-300 rounded focus:border-[#800080] focus:ring-
[#800080]" required />
</div>
<div>
<label for="contact-email" class="block text-gray-700 mb-
2">Your Email</label>
<input type="email" id="contact-email" class="w-full px-4
py-3 border border-gray-300 rounded focus:border-[#800080] focus:ring-
[#800080]" required />
</div>
</div>
<div class="mb-6">
<label for="contact-subject" class="block text-gray-700 mb-
2">Subject</label>
<input type="text" id="contact-subject" class="w-full px-4
py-3 border border-gray-300 rounded focus:border-[#800080] focus:ring-
[#800080]" required />
</div>
<div class="mb-6">
<label for="contact-message" class="block text-gray-700 mb-
2">Your Message</label>
<textarea id="contact-message" rows="5" class="w-full px-4
py-3 border border-gray-300 rounded focus:border-[#800080] focus:ring-
[#800080]" required></textarea>
</div>
<button type="submit" class="bg-[#800080] text-white px-6 py-
3 rounded-xl font-bold hover:bg-[#5e005e] transition duration-300
whitespace-nowrap">
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>

<!-- Location Map -->


<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-14">
<h2 class="text-3xl font-bold text-[#800080] mb-4">Find Us</h2>
<p class="text-gray-700 max-w-2xl mx-auto leading-relaxed text-
base">
Visit us at Drive Over Lounge, close to Brainbirds School in
Sowutuom — or let us deliver fresh bread to your doorstep.
</p>
</div>

<div class="max-w-5xl mx-auto h-[400px] rounded-2xl overflow-hidden


shadow-2xl border border-[#800080]/30">
<iframe
src="[Link]
0.302731&hl=en&z=16&output=embed"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</div>
</div>
</section>

<!-- Newsletter -->


<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl font-bold text-primary mb-
4">Subscribe to Our Newsletter</h2>
<p class="text-gray-600 mb-8">Stay updated with our
latest bread offerings, promotions, and baking tips</p>

<form class="flex flex-col md:flex-row gap-4 max-w-xl mx-


auto">
<input type="email" placeholder="Your email address"
class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg
md:rounded-l-lg md:rounded-r-none rounded-r-lg focus:border-primary
focus:ring-1 focus:ring-primary" required>
<button type="submit" class="bg-primary text-white
px-6 py-3 rounded-r-lg md:rounded-r-lg md:rounded-l-none rounded-l-lg
font-medium hover:bg-primary/90 transition duration-300 whitespace-
nowrap">Subscribe</button>
</form>

<p class="text-sm text-gray-500 mt-4">By subscribing, you


agree to receive marketing emails from Phina's Bakery. You can
unsubscribe at any time.</p>
</div>
</div>
</section>

<!-- Footer -->


<footer class="bg-primary text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<!-- About -->
<div>
<h3 class="text-xl font-['Pacifico'] text-secondary
mb-4">Phina's Bakery</h3>
<p class="text-gray-200 mb-4">Delivering freshly
baked artisan bread to your doorstep since 2018. We're committed to
quality, tradition, and customer satisfaction.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-200 hover:text-
secondary transition duration-300">
<i class="ri-facebook-fill"></i>
</a>
<a href="#" class="text-gray-200 hover:text-
secondary transition duration-300">
<i class="ri-instagram-fill"></i>
</a>
<a href="#" class="text-gray-200 hover:text-
secondary transition duration-300">
<i class="ri-whatsapp-fill"></i>
</a>
</div>
</div>

<!-- Quick Links -->


<div>
<h3 class="text-lg font-semibold mb-4">Quick
Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-200 hover:text-
secondary transition duration-300">Home</a></li>
<li><a href="#menu" class="text-gray-200
hover:text-secondary transition duration-300">Our Menu</a></li>
<li><a href="#order" class="text-gray-200
hover:text-secondary transition duration-300">Order Online</a></li>
<li><a href="#contact" class="text-gray-200
hover:text-secondary transition duration-300">Contact Us</a></li>
<li><a href="#" class="text-gray-200 hover:text-
secondary transition duration-300">About Us</a></li>
</ul>
</div>

<!-- Contact Info -->


<div>
<h3 class="text-lg font-semibold mb-4">Contact
Info</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="ri-map-pin-line mt-1 mr-2"></i>
<span>Sowutuom, Accra, Ghana</span>
</li>
<li class="flex items-start">
<i class="ri-phone-line mt-1 mr-2"></i>
<span>0243940266 / 0242910459</span>
</li>
<li class="flex items-start">
<i class="ri-mail-line mt-1 mr-2"></i>
<span>boatengrodrick1@[Link]</span>
</li>
</ul>
</div>

<!-- Business Hours -->


<div>
<h3 class="text-lg font-semibold mb-4">Business
Hours</h3>
<ul class="space-y-2">
<li class="flex justify-between">
<span>Monday - Friday:</span>
<span>7:00 AM - 7:00 PM</span>
</li>
<li class="flex justify-between">
<span>Saturday:</span>
<span>8:00 AM - 5:00 PM</span>
</li>
</ul>
</div>
</div>

<div class="border-t border-gray-700 pt-6 text-center text-


gray-300 text-sm">
<p>&copy; 2025 Phina's Bakery. All rights reserved.</p>
</div>
</div>
</footer>

<script id="mobileMenuScript">
[Link]('DOMContentLoaded', function() {
const menuButton = [Link]('.ri-menu-line');
const navLinks = [Link]('.nav-links');

if (menuButton && navLinks) {


[Link]('click', function() {
[Link]('hidden');
[Link]('flex');
[Link]('flex-col');
[Link]('absolute');
[Link]('top-16');
[Link]('right-0');
[Link]('bg-primary');
[Link]('p-4');
[Link]('rounded-b-lg');
[Link]('shadow-lg');
});
}
});
</script>

<script id="formHandlingScript">
[Link]('DOMContentLoaded', function() {
const forms = [Link]('form');

[Link](form => {
[Link]('submit', function(e) {
[Link]();

// Validate form
let isValid = true;
const requiredFields =
[Link]('[required]');

[Link](field => {
if (![Link]()) {
isValid = false;
[Link]('border-red-500');
} else {
[Link]('border-red-500');
}
});
if (isValid) {
// Simulate form submission
alert('Thank you! Your form has been submitted
successfully.');
[Link]();
} else {
alert('Please fill in all required fields.');
}
});
});
});
</script>

<script id="smoothScrollScript">
[Link]('DOMContentLoaded', function() {
const links = [Link]('a[href^="#"]');

[Link](link => {
[Link]('click', function(e) {
[Link]();

const targetId = [Link]('href');


if (targetId === '#') return;

const targetElement =
[Link](targetId);
if (targetElement) {
[Link]({
top: [Link] - 80,
behavior: 'smooth'
});

// Close mobile menu if open


const navLinks = [Link]('.nav-
links');
if (navLinks &&
[Link]('absolute')) {
[Link]('hidden');
[Link]('flex', 'flex-col',
'absolute', 'top-16', 'right-0', 'bg-primary', 'p-4', 'rounded-b-lg',
'shadow-lg');
}
}
});
});
});
</script>
</body>
</html>

You might also like