From 43405b723a3801d9b0fcea8884c77268ae69d3a6 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Tue, 11 Mar 2025 11:23:35 +0530
Subject: [PATCH] Build the footer
---
golden-crust-bakery/src/App.jsx | 3 +-
golden-crust-bakery/src/components/Footer.jsx | 183 ++++++++++++++++++
2 files changed, 185 insertions(+), 1 deletion(-)
create mode 100644 golden-crust-bakery/src/components/Footer.jsx
diff --git a/golden-crust-bakery/src/App.jsx b/golden-crust-bakery/src/App.jsx
index fd5f888..7214e7c 100644
--- a/golden-crust-bakery/src/App.jsx
+++ b/golden-crust-bakery/src/App.jsx
@@ -1,6 +1,7 @@
import { Outlet } from 'react-router-dom';
import Header from './components/Header';
+import Footer from './components/Footer';
export default function App() {
return (
@@ -9,7 +10,7 @@ export default function App() {
<main>
<Outlet />
</main>
- {/* <Footer /> */}
+ <Footer />
</>
);
}
diff --git a/golden-crust-bakery/src/components/Footer.jsx b/golden-crust-bakery/src/components/Footer.jsx
new file mode 100644
index 0000000..10fadf4
--- /dev/null
+++ b/golden-crust-bakery/src/components/Footer.jsx
@@ -0,0 +1,183 @@
+import { Link } from 'react-router-dom';
+import {
+ Cake,
+ Facebook,
+ Instagram,
+ Mail,
+ MapPin,
+ Phone,
+ Youtube,
+} from 'lucide-react';
+
+export default function Footer() {
+ return (
+ <footer className='bg-gray-800 text-gray-300'>
+ <div className='container mx-auto px-4 py-12 md:py-16'>
+ <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8'>
+ <div>
+ <div className='flex items-center space-x-2 mb-4'>
+ <Cake className='h-8 w-8 text-pink-400' />
+ <span className='font-bold text-xl text-white font-script mt-2'>
+ Golden Crust <span className='hidden md:inline'>Bakery</span>
+ </span>
+ </div>
+ <p className='text-gray-300 mb-6'>
+ Handcrafted cakes made with love for every occasion. We use only
+ the finest ingredients to create memorable desserts.
+ </p>
+ <div className='flex space-x-4'>
+ <Link
+ to='#'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ <Facebook className='h-5 w-5' />
+ <span className='sr-only'>Facebook</span>
+ </Link>
+ <Link
+ to='#'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ <Instagram className='h-5 w-5' />
+ <span className='sr-only'>Instagram</span>
+ </Link>
+ <Link
+ to='#'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ <Youtube className='h-5 w-5' />
+ <span className='sr-only'>Youtube</span>
+ </Link>
+ </div>
+ </div>
+
+ <div>
+ <h3 className='text-white font-medium text-lg mb-4'>Quick Links</h3>
+ <ul className='space-y-2'>
+ <li>
+ <Link
+ to='/'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Home
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/menu'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Menu
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/about'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ About Us
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/contact'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Contact
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/orders'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ My Orders
+ </Link>
+ </li>
+ </ul>
+ </div>
+
+ <div>
+ <h3 className='text-white font-medium text-lg mb-4'>
+ Cake Categories
+ </h3>
+ <ul className='space-y-2'>
+ <li>
+ <Link
+ to='/menu?category=Birthday'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Birthday Cakes
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/menu?category=Wedding'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Wedding Cakes
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/menu?category=Special Occasion'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Special Occasion
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/menu?category=Seasonal'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ Seasonal Cakes
+ </Link>
+ </li>
+ <li>
+ <Link
+ to='/menu'
+ className='text-gray-300 hover:text-pink-400 transition-colors'
+ >
+ View All
+ </Link>
+ </li>
+ </ul>
+ </div>
+
+ <div>
+ <h3 className='text-white font-medium text-lg mb-4'>Contact Us</h3>
+ <ul className='space-y-4 text-gray-300'>
+ <li className='flex items-start'>
+ <MapPin className='h-5 w-5 text-pink-400 mr-2 mt-0.5' />
+ <span>Golden Crust Bakery, Bakery Street, London, UK</span>
+ </li>
+ <li className='flex items-center'>
+ <Phone className='h-5 w-5 text-pink-400 mr-2' />
+ <span>(+44) 8765432109</span>
+ </li>
+ <li className='flex items-center'>
+ <Mail className='h-5 w-5 text-pink-400 mr-2' />
+ <span>info@goldencrust.com</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div className='border-t border-gray-600 mt-12 pt-8 text-center text-gray-300 text-sm'>
+ <p>
+ © {new Date().getFullYear()} Golden Crust Bakery. All rights
+ reserved.
+ </p>
+ <div className='mt-2 space-x-4'>
+ <Link to='#' className='hover:text-pink-400 transition-colors'>
+ Terms of Service
+ </Link>
+ <Link to='#' className='hover:text-pink-400 transition-colors'>
+ Privacy Policy
+ </Link>
+ </div>
+ </div>
+ </div>
+ </footer>
+ );
+}
--
GitLab