Skip to content
Snippets Groups Projects
Commit ab820e6a authored by ALMAZROUEI Shamma (2021) WKIS203's avatar ALMAZROUEI Shamma (2021) WKIS203
Browse files

Build about page

parent 46871711
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
golden-crust-bakery/src/main.jsx
+ 5
− 0
View file @ ab820e6a
......@@ -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 />,
},
],
},
]);
......
golden-crust-bakery/src/pages/About.jsx 0 → 100644
+ 272
− 0
View file @ ab820e6a
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>
);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

GitLab by CIM Team | RHUL