diff --git a/golden-crust-bakery/src/main.jsx b/golden-crust-bakery/src/main.jsx index 0da8ae25223dcc0797175e82d903c0e276b6da84..df52613da2d29c8409d1ccbe255ea3167f276513 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 0000000000000000000000000000000000000000..4763221b18e81e0e1c4847c4d5a9995409e80ecf --- /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> + ); +}