From 46871711c59d21a8b3b220b5e0ddd309addd3604 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Tue, 11 Mar 2025 12:31:20 +0530
Subject: [PATCH] Build landing page
---
golden-crust-bakery/index.html | 2 +-
golden-crust-bakery/src/components/Header.jsx | 15 +-
golden-crust-bakery/src/main.jsx | 10 +-
golden-crust-bakery/src/pages/Landing.jsx | 290 ++++++++++++++++++
golden-crust-bakery/tailwind.config.js | 1 -
5 files changed, 302 insertions(+), 16 deletions(-)
diff --git a/golden-crust-bakery/index.html b/golden-crust-bakery/index.html
index c05cbe1..c1e0ed6 100644
--- a/golden-crust-bakery/index.html
+++ b/golden-crust-bakery/index.html
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
- href="https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Fredoka:wght@300..700&family=Satisfy&display=swap"
+ href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Satisfy&display=swap"
rel="stylesheet"
/>
diff --git a/golden-crust-bakery/src/components/Header.jsx b/golden-crust-bakery/src/components/Header.jsx
index 8669237..e188ebe 100644
--- a/golden-crust-bakery/src/components/Header.jsx
+++ b/golden-crust-bakery/src/components/Header.jsx
@@ -28,18 +28,11 @@ export default function Header() {
const { cart, initializeCart } = useCartStore();
const { user, isAuthenticated, logout } = useAuthStore();
- const [isScrolled, setIsScrolled] = useState(false);
+
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
initializeCart();
-
- const handleScroll = () => {
- setIsScrolled(window.scrollY > 10);
- };
-
- window.addEventListener('scroll', handleScroll);
- return () => window.removeEventListener('scroll', handleScroll);
}, [initializeCart]);
const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
@@ -57,11 +50,7 @@ export default function Header() {
};
return (
- <header
- className={`sticky top-0 z-50 w-full transition-all duration-200 ${
- isScrolled ? 'bg-white shadow-sm' : 'bg-transparent'
- }`}
- >
+ <header className='sticky top-0 z-50 w-full bg-white/75 shadow-sm backdrop-blur-sm'>
<div className='container mx-auto px-4 md:px-6'>
<div className='flex h-20 items-center justify-between'>
<Link to='/' className='inline-flex items-center space-x-2'>
diff --git a/golden-crust-bakery/src/main.jsx b/golden-crust-bakery/src/main.jsx
index ca61feb..0da8ae2 100644
--- a/golden-crust-bakery/src/main.jsx
+++ b/golden-crust-bakery/src/main.jsx
@@ -6,18 +6,26 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import './index.css';
+// Pages
import App from './App.jsx';
+import Landing from './pages/Landing';
const router = createBrowserRouter([
{
path: '/',
element: <App />,
+ children: [
+ {
+ path: '/',
+ element: <Landing />,
+ },
+ ],
},
]);
createRoot(document.getElementById('root')).render(
<StrictMode>
- <Toaster />
+ <Toaster position='top-center' richColors theme='light' />
<RouterProvider router={router} />
</StrictMode>
);
diff --git a/golden-crust-bakery/src/pages/Landing.jsx b/golden-crust-bakery/src/pages/Landing.jsx
index e69de29..ed3ce8f 100644
--- a/golden-crust-bakery/src/pages/Landing.jsx
+++ b/golden-crust-bakery/src/pages/Landing.jsx
@@ -0,0 +1,290 @@
+import { useEffect } from 'react';
+import { ArrowRight, Cake, ShoppingBag, Star } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { toast } from 'sonner';
+
+import { useCartStore } from '@/lib/store';
+
+import { Button } from '@/components/ui/button';
+
+export default function Landing() {
+ const navigate = useNavigate();
+ const { initializeCart } = useCartStore();
+
+ useEffect(() => {
+ initializeCart();
+ }, [initializeCart]);
+
+ const featuredCakes = [
+ {
+ id: 1,
+ name: 'Strawberry Delight',
+ description:
+ 'Fresh strawberries on a vanilla base with cream cheese frosting',
+ price: 32.99,
+ image:
+ 'https://img.freepik.com/free-photo/layered-strawberry-vanilla-cake_1268-30137.jpg?t=st=1741675243~exp=1741678843~hmac=18ff6c24294bea6279aaa5b098c4a57da2db82fe33382670a5d1b416bcdf4542&w=1800',
+ },
+ {
+ id: 2,
+ name: 'Chocolate Dream',
+ description: 'Rich chocolate cake with ganache and chocolate shavings',
+ price: 34.99,
+ image:
+ 'https://img.freepik.com/free-photo/front-view-sweet-chocolate-cake_23-2148834059.jpg?t=st=1741675403~exp=1741679003~hmac=2b7bf4f657915b4b0db2b724abf1b841c8144d28605691ec47b8113a76033fc2&w=1800',
+ },
+ {
+ id: 3,
+ name: 'Lemon Sunshine',
+ description: 'Zesty lemon cake with lemon curd and buttercream',
+ price: 29.99,
+ image:
+ 'https://img.freepik.com/free-photo/ai-generated-cake-picture_23-2150649358.jpg?t=st=1741675442~exp=1741679042~hmac=8110dd439d3217343e7ed54e128ce94fb8db9a53297529616caa4d2119f88751&w=1800',
+ },
+ ];
+
+ 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='flex flex-col min-h-screen'>
+ <div className='flex-grow'>
+ {/* Hero Section */}
+ <section className='bg-gradient-to-b from-pink-50 to-yellow-50 py-16 md:py-24'>
+ <div className='container mx-auto px-4 md:px-6'>
+ <div className='grid grid-cols-1 md:grid-cols-2 gap-8 items-center'>
+ <div className='space-y-6'>
+ <h1 className='text-4xl md:text-6xl font-bold text-pink-600'>
+ Delicious Cakes for Every Occasion
+ </h1>
+ <p className='text-lg md:text-xl text-gray-700'>
+ Handcrafted with love, our cakes bring joy to your special
+ moments. Made with premium ingredients for an unforgettable
+ taste experience.
+ </p>
+ <div className='flex flex-col sm:flex-row gap-4'>
+ <Button
+ onClick={() => navigate('/menu')}
+ className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
+ >
+ Order Now <ArrowRight className='ml-2 h-5 w-5' />
+ </Button>
+ <Button
+ variant='outline'
+ onClick={() => navigate('/about')}
+ className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full px-8 py-6 text-lg'
+ >
+ Our Story
+ </Button>
+ </div>
+ </div>
+ <div className='relative h-[300px] md:h-[400px] rounded-2xl overflow-hidden shadow-xl'>
+ <img
+ src='https://img.freepik.com/free-photo/various-cakes-supermarket-shelves-sale_627829-7332.jpg?t=st=1741673875~exp=1741677475~hmac=833e703e6c8857b6c3348a3ce0e9217f1d18e10b83f1066781dfe84bf46f863a&w=2000'
+ alt='Delicious cake showcase'
+ className='object-cover'
+ />
+ </div>
+ </div>
+ </div>
+ </section>
+
+ {/* Featured Cakes */}
+ <section className='py-16 bg-white'>
+ <div className='container mx-auto px-4 md:px-6'>
+ <div className='text-center mb-12'>
+ <h2 className='text-3xl md:text-4xl font-bold text-gray-800 mb-4'>
+ Our Featured Cakes
+ </h2>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ Discover our most loved creations, each one crafted with care
+ and premium ingredients
+ </p>
+ </div>
+ <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
+ {featuredCakes.map((cake) => (
+ <div
+ key={cake.id}
+ className='bg-white rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105 hover:shadow-lg'
+ >
+ <div className='relative h-56 overflow-hidden'>
+ <img
+ src={cake.image}
+ alt={cake.name}
+ className='object-cover h-full w-full'
+ />
+ </div>
+ <div className='p-6'>
+ <div className='flex justify-between items-start mb-2'>
+ <h3 className='text-xl font-semibold text-gray-800'>
+ {cake.name}
+ </h3>
+ <p className='text-pink-600 font-bold'>£{cake.price}</p>
+ </div>
+ <p className='text-gray-600 mb-4'>{cake.description}</p>
+ <Button
+ onClick={() => {
+ navigate('/menu');
+ toast({
+ title: 'Check out our menu',
+ description:
+ 'Find more delicious cakes like this one!',
+ });
+ }}
+ className='w-full bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-full'
+ >
+ View Details
+ </Button>
+ </div>
+ </div>
+ ))}
+ </div>
+ <div className='text-center mt-10'>
+ <Button
+ onClick={() => navigate('/menu')}
+ variant='outline'
+ className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full px-8 py-6 text-lg'
+ >
+ View All Cakes <ArrowRight className='ml-2 h-5 w-5' />
+ </Button>
+ </div>
+ </div>
+ </section>
+
+ {/* Why Choose Us */}
+ <section className='py-16 bg-blue-50'>
+ <div className='container mx-auto px-4 md:px-6'>
+ <div className='text-center mb-12'>
+ <h2 className='text-3xl md:text-4xl font-bold text-gray-800 mb-4'>
+ Why Choose Golden Crust Bakery?
+ </h2>
+ <p className='text-gray-600 max-w-2xl mx-auto'>
+ We take pride in our commitment to quality, taste, and customer
+ satisfaction
+ </p>
+ </div>
+ <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
+ <div className='bg-white p-8 rounded-xl shadow-md text-center'>
+ <div className='mx-auto w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4'>
+ <Cake className='h-8 w-8 text-pink-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Premium Ingredients
+ </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-8 rounded-xl shadow-md text-center'>
+ <div className='mx-auto w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4'>
+ <Star className='h-8 w-8 text-yellow-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Handcrafted with Love
+ </h3>
+ <p className='text-gray-600'>
+ Each cake is made with attention to detail and passion by our
+ skilled bakers.
+ </p>
+ </div>
+ <div className='bg-white p-8 rounded-xl shadow-md text-center'>
+ <div className='mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4'>
+ <ShoppingBag className='h-8 w-8 text-blue-600' />
+ </div>
+ <h3 className='text-xl font-semibold text-gray-800 mb-2'>
+ Convenient Ordering
+ </h3>
+ <p className='text-gray-600'>
+ Easy online ordering and timely delivery to make your
+ celebrations stress-free.
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ {/* Testimonials */}
+ <section className='py-16 bg-white'>
+ <div className='container mx-auto px-4 md:px-6'>
+ <div className='text-center mb-12'>
+ <h2 className='text-3xl md:text-4xl 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-2 lg:grid-cols-3 gap-8'>
+ {reviews.map((review, index) => (
+ <div
+ key={index}
+ className='bg-pink-50 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((_, count) => (
+ <Star key={count} 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='py-16 bg-gradient-to-r from-pink-100 to-yellow-100'>
+ <div className='container mx-auto px-4 md:px-6 text-center'>
+ <h2 className='text-3xl md:text-4xl 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>
+ <Button
+ onClick={() => navigate('/menu')}
+ className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
+ >
+ Order Now <ArrowRight className='ml-2 h-5 w-5' />
+ </Button>
+ </div>
+ </section>
+ </div>
+ </div>
+ );
+}
diff --git a/golden-crust-bakery/tailwind.config.js b/golden-crust-bakery/tailwind.config.js
index 6f8fa29..f85eede 100644
--- a/golden-crust-bakery/tailwind.config.js
+++ b/golden-crust-bakery/tailwind.config.js
@@ -6,7 +6,6 @@ export default {
extend: {
fontFamily: {
sans: ['Fredoka', 'sans-serif'],
- serif: ['Baskervville', 'serif'],
script: ['Satisfy', 'cursive'],
},
--
GitLab