From ab820e6a53b01ed08a25df92de8b5ff41945f801 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Tue, 11 Mar 2025 15:22:57 +0530
Subject: [PATCH] Build about page
---
golden-crust-bakery/src/main.jsx | 5 +
golden-crust-bakery/src/pages/About.jsx | 272 ++++++++++++++++++++++++
2 files changed, 277 insertions(+)
create mode 100644 golden-crust-bakery/src/pages/About.jsx
diff --git a/golden-crust-bakery/src/main.jsx b/golden-crust-bakery/src/main.jsx
index 0da8ae2..df52613 100644
--- a/golden-crust-bakery/src/main.jsx
+++ b/golden-crust-bakery/src/main.jsx
@@ -9,6 +9,7 @@ import './index.css';
// Pages
import App from './App.jsx';
import Landing from './pages/Landing';
+import About from './pages/About';
const router = createBrowserRouter([
{
@@ -19,6 +20,10 @@ const router = createBrowserRouter([
path: '/',
element: <Landing />,
},
+ {
+ path: '/about',
+ element: <About />,
+ },
],
},
]);
diff --git a/golden-crust-bakery/src/pages/About.jsx b/golden-crust-bakery/src/pages/About.jsx
new file mode 100644
index 0000000..4763221
--- /dev/null
+++ b/golden-crust-bakery/src/pages/About.jsx
@@ -0,0 +1,272 @@
+import { useNavigate } from 'react-router-dom';
+import { ArrowRight, Award, Clock, Heart, Users } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+
+export default function About() {
+ const navigate = useNavigate();
+
+ const reviews = [
+ {
+ name: 'Sophia Patel',
+ img: 'https://img.freepik.com/free-psd/3d-illustration-person-with-long-hair_23-2149436197.jpg?t=st=1741676033~exp=1741679633~hmac=d35bb3732ce662b10cc27aeeeb8f7055efc62b78e3642aa24f1beae0accddd45&w=1480',
+ comment:
+ 'The cake was absolutely delicious and beautifully decorated. Everyone at the party loved it! Will definitely order again.',
+ },
+ {
+ name: 'Liam Johnson',
+ img: 'https://img.freepik.com/free-psd/3d-illustration-person-with-sunglasses_23-2149436188.jpg?t=st=1741676063~exp=1741679663~hmac=2ea273721392950d9ee9cca8ae25fe80bd6d78d33c5ad6d6189cb20dd8f7f5be&w=1480',
+ comment:
+ 'Amazing taste and perfect texture! The custom design was exactly as I imagined. Highly recommended!',
+ },
+ {
+ name: 'Emma Williams',
+ img: 'https://img.freepik.com/free-psd/3d-illustration-person-with-rainbow-sunglasses_23-2149436181.jpg?t=st=1741676083~exp=1741679683~hmac=f3c74b0465c88d8090fc9fd8d54f8d0fbdf0c7ba00140199a6df67c79493ead0&w=1480',
+ comment:
+ "Fresh, flavorful, and elegantly crafted. It was the highlight of our celebration. Can't wait to try another one!",
+ },
+ ];
+
+ return (
+ <div className='py-8 md:py-12'>
+ <div className='text-center mb-12'>
+ <h1 className='text-4xl font-bold text-gray-800 mb-4'>
+ About Golden Crust Bakery
+ </h1>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ Our story of passion, quality ingredients, and the love for baking
+ </p>
+ </div>
+
+ {/* Our Story */}
+ <section className='mb-16 container mx-auto px-4'>
+ <div className='grid grid-cols-1 md:grid-cols-2 gap-8 items-center'>
+ <div className='order-2 md:order-1'>
+ <h2 className='text-3xl font-bold text-gray-800 mb-4'>Our Story</h2>
+ <p className='text-gray-600 mb-4'>
+ Golden Crust Bakery was founded in 2010 with a simple mission: to
+ create delicious, handcrafted cakes that bring joy to every
+ celebration.
+ </p>
+ <p className='text-gray-600 mb-4'>
+ What started as a small home kitchen operation has grown into a
+ beloved local bakery, known for our attention to detail, premium
+ ingredients, and exceptional customer service.
+ </p>
+ <p className='text-gray-600 mb-4'>
+ Every cake we create is made with love and care, using recipes
+ that have been perfected over years of passionate baking. We
+ believe that a cake is more than just dessert—it's a centerpiece
+ of your special moments and memories.
+ </p>
+ <Button
+ onClick={() => navigate('/contact')}
+ className='bg-pink-500 hover:bg-pink-600 text-white rounded-full mt-2'
+ >
+ Get in Touch <ArrowRight className='ml-2 h-4 w-4' />
+ </Button>
+ </div>
+ <div className='relative h-[300px] md:h-[400px] rounded-2xl overflow-hidden shadow-xl order-1 md:order-2'>
+ <img
+ src='https://img.freepik.com/free-photo/front-view-friends-barista_23-2148436154.jpg?t=st=1741677372~exp=1741680972~hmac=33f200e859f92c94f56e1621df35f78b4e9cf528dddab61882f34e9d1b4f1eb4&w=1800'
+ alt='Our bakery team'
+ className='object-cover'
+ />
+ </div>
+ </div>
+ </section>
+
+ {/* Our Values */}
+ <section className='mb-16 bg-pink-50 py-12 rounded-2xl'>
+ <div className='container mx-auto px-4'>
+ <div className='text-center mb-8'>
+ <h2 className='text-3xl font-bold text-gray-800 mb-4'>
+ Our Values
+ </h2>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ The principles that guide everything we do at Golden Crust Bakery
+ </p>
+ </div>
+
+ <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4'>
+ <div className='bg-white p-6 rounded-xl shadow-sm text-center'>
+ <div className='mx-auto w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4'>
+ <Award className='h-8 w-8 text-pink-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Quality
+ </h3>
+ <p className='text-gray-600'>
+ We use only the finest ingredients to ensure exceptional taste
+ and quality in every bite.
+ </p>
+ </div>
+
+ <div className='bg-white p-6 rounded-xl shadow-sm text-center'>
+ <div className='mx-auto w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4'>
+ <Heart className='h-8 w-8 text-yellow-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Passion
+ </h3>
+ <p className='text-gray-600'>
+ Our love for baking shines through in every cake we create, with
+ attention to every detail.
+ </p>
+ </div>
+
+ <div className='bg-white p-6 rounded-xl shadow-sm text-center'>
+ <div className='mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4'>
+ <Users className='h-8 w-8 text-blue-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Community
+ </h3>
+ <p className='text-gray-600'>
+ We're proud to be part of our local community, supporting events
+ and celebrations.
+ </p>
+ </div>
+
+ <div className='bg-white p-6 rounded-xl shadow-sm text-center'>
+ <div className='mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4'>
+ <Clock className='h-8 w-8 text-green-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Reliability
+ </h3>
+ <p className='text-gray-600'>
+ We deliver on our promises, ensuring your cake is perfect and on
+ time for your special day.
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ {/* Our Team */}
+ <section className='mb-16 container mx-auto px-4'>
+ <div className='text-center mb-8'>
+ <h2 className='text-3xl font-bold text-gray-800 mb-4'>
+ Meet Our Team
+ </h2>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ The talented individuals who bring your cake dreams to life
+ </p>
+ </div>
+
+ <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
+ {[
+ {
+ name: 'Emma Thompson',
+ role: 'Founder & Head Baker',
+ bio: 'With over 15 years of experience in pastry arts, Emma leads our team with creativity and passion.',
+ img: 'https://img.freepik.com/free-photo/photo-pleasant-looking-girl-has-healthy-soft-skin-dark-staright-hair_273609-18461.jpg?t=st=1741686287~exp=1741689887~hmac=116de42822039e12d85f23e97e7f8847c335abe7a252dd0dadd666fd6f5b8ff2&w=2000',
+ },
+ {
+ name: 'Michael Chen',
+ role: 'Pastry Chef',
+ bio: 'A graduate of Le Cordon Bleu, Michael specializes in intricate cake decorations and flavors.',
+ img: 'https://img.freepik.com/free-photo/indoor-picture-cheerful-handsome-young-man-having-folded-hands-looking-directly-smiling-sincerely-wearing-casual-clothes_176532-10257.jpg?t=st=1741686456~exp=1741690056~hmac=ca8481b6e3d92b08c8be06d103df4509d66d147af808c042bafa78e93558eda4&w=2000',
+ },
+ {
+ name: 'Sophia Rodriguez',
+ role: 'Customer Experience Manager',
+ bio: 'Sophia ensures that every customer receives exceptional service from order to delivery.',
+ img: 'https://img.freepik.com/free-photo/close-up-portrait-pretty-young-woman-isolated_273609-35589.jpg?t=st=1741686360~exp=1741689960~hmac=1bc751189360c60efb55cd9d98f940487a299bbef5ef9d7fdca0364e34b30dff&w=2000',
+ },
+ ].map((member, index) => (
+ <div
+ key={index}
+ className='bg-white rounded-xl shadow-md overflow-hidden'
+ >
+ <div className='relative h-64'>
+ <img
+ src={member.img}
+ alt={member.name}
+ className='object-cover'
+ />
+ </div>
+ <div className='p-6'>
+ <h3 className='text-xl font-semibold text-gray-800 mb-1'>
+ {member.name}
+ </h3>
+ <p className='text-pink-600 font-medium mb-3'>{member.role}</p>
+ <p className='text-gray-600'>{member.bio}</p>
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ {/* Testimonials */}
+ <section className='mb-16 bg-yellow-50 py-12 rounded-2xl'>
+ <div className='container mx-auto px-4'>
+ <div className='text-center mb-8'>
+ <h2 className='text-3xl font-bold text-gray-800 mb-4'>
+ What Our Customers Say
+ </h2>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ Don't just take our word for it - hear from our satisfied
+ customers
+ </p>
+ </div>
+
+ <div className='grid grid-cols-1 md:grid-cols-3 gap-6 px-4'>
+ {reviews.map((review, i) => (
+ <div key={i} className='bg-white p-6 rounded-xl shadow-sm'>
+ <div className='flex items-center mb-4'>
+ <div className='mr-4'>
+ <img
+ src={review.img}
+ className='w-12 h-12 rounded-full'
+ ></img>
+ </div>
+ <div>
+ <h4 className='font-semibold text-gray-800'>
+ {review.name}
+ </h4>
+ <div className='flex text-yellow-400'>
+ {[...Array(5)].map((_, j) => (
+ <Award key={j} className='h-4 w-4 fill-current' />
+ ))}
+ </div>
+ </div>
+ </div>
+ <p className='text-gray-600 italic'>{review.comment}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ {/* Call to Action */}
+ <section className='text-center bg-gradient-to-r from-pink-100 to-yellow-100 py-12 rounded-2xl'>
+ <div className='container mx-auto px-4'>
+ <h2 className='text-3xl font-bold text-gray-800 mb-4'>
+ Ready to Order Your Dream Cake?
+ </h2>
+ <p className='text-gray-700 max-w-2xl mx-auto mb-8'>
+ Browse our menu and place your order today. Make your special
+ occasion even more memorable with a cake from Golden Crust Bakery.
+ </p>
+ <div className='flex flex-col sm:flex-row gap-4 justify-center'>
+ <Button
+ onClick={() => navigate('/menu')}
+ className='bg-pink-500 hover:bg-pink-600 text-white rounded-full'
+ >
+ Browse Our Menu <ArrowRight className='ml-2 h-4 w-4' />
+ </Button>
+ <Button
+ variant='outline'
+ onClick={() => navigate('/contact')}
+ className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
+ >
+ Contact Us
+ </Button>
+ </div>
+ </div>
+ </section>
+ </div>
+ );
+}
--
GitLab