Sweet Delights Bakery Landing Page
A responsive landing page for a fictional bakery built with React and Tailwind CSS.
Features
- Responsive design that works on mobile, tablet, and desktop devices
- Clean and modern UI with warm, bakery-themed colors
- Multiple sections including:
- Hero banner
- Featured products
- About section
- Customer testimonials
- Contact form
- Footer with newsletter signup
Technologies Used
- React
- Tailwind CSS
- Modern JavaScript (ES6+)
Setup
- Clone the repository
- Install dependencies with
npm install - Start the development server with
npm start
MIT Licensed
I'll create a bakery landing page by updating the necessary files.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sweet Delights Bakery</title>
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap">
<style type="text/tailwindcss">
@theme {
--color-primary: #8B4513;
--color-secondary: #D2691E;
--color-accent: #F5DEB3;
--color-danger: #8B0000;
--color-success: #556B2F;
}
.text-primary {
color: theme(--color-primary);
}
.text-secondary {
color: theme(--color-secondary);
}
.bg-primary {
background-color: theme(--color-primary);
}
.bg-secondary {
background-color: theme(--color-secondary);
}
.bg-accent {
background-color: theme(--color-accent);
}
.bg-danger {
background-color: theme(--color-danger);
}
.bg-success {
background-color: theme(--color-success);
}
.font-playfair {
font-family: 'Playfair Display', serif;
}
.font-poppins {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
App.jsx
import React, { useState } from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import BestSellers from './components/BestSellers';
import About from './components/About';
import Testimonials from './components/Testimonials';
import Contact from './components/Contact';
import Footer from './components/Footer';
const App = () => {
return (
<div className="font-poppins">
<Header />
<Hero />
<BestSellers />
<About />
<Testimonials />
<Contact />
<Footer />
</div>
);
};
export default App;
components/Header.jsx
import React, { useState } from 'react';
const Header = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-50 bg-white shadow-md">
<div className="container mx-auto px-4 py-3">
<div className="flex items-center justify-between">
<div className="flex items-center">
<span className="text-primary font-playfair font-bold text-2xl">Sweet Delights</span>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-10">
<a href="#home" className="text-gray-800 hover:text-primary transition-colors">Home</a>
<a href="#bestsellers" className="text-gray-800 hover:text-primary transition-colors">Menu</a>
<a href="#about" className="text-gray-800 hover:text-primary transition-colors">About</a>
<a href="#testimonials" className="text-gray-800 hover:text-primary transition-colors">Testimonials</a>
<a href="#contact" className="text-gray-800 hover:text-primary transition-colors">Contact</a>
</nav>
{/* Mobile menu button */}
<button
className="md:hidden text-gray-800 hover:text-primary"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d={isMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
/>
</svg>
</button>
</div>
{/* Mobile Navigation */}
{isMenuOpen && (
<nav className="md:hidden mt-4 pb-4 space-y-2">
<a
href="#home"
className="block text-gray-800 hover:text-primary transition-colors"
onClick={() => setIsMenuOpen(false)}
>
Home
</a>
<a
href="#bestsellers"
className="block text-gray-800 hover:text-primary transition-colors"
onClick={() => setIsMenuOpen(false)}
>
Menu
</a>
<a
href="#about"
className="block text-gray-800 hover:text-primary transition-colors"
onClick={() => setIsMenuOpen(false)}
>
About
</a>
<a
href="#testimonials"
className="block text-gray-800 hover:text-primary transition-colors"
onClick={() => setIsMenuOpen(false)}
>
Testimonials
</a>
<a
href="#contact"
className="block text-gray-800 hover:text-primary transition-colors"
onClick={() => setIsMenuOpen(false)}
>
Contact
</a>
</nav>
)}
</div>
</header>
);
};
export default Header;
components/Hero.jsx
import React from 'react';
const Hero = () => {
return (
<section id="home" className="relative bg-accent py-20 md:py-32">
<div className="container mx-auto px-4">
<div className="max-w-3xl">
<h1 className="font-playfair text-4xl md:text-6xl font-bold text-primary mb-6">
Freshly Baked Goodness Every Morning
</h1>
<p className="text-lg md:text-xl text-gray-800 mb-8">
Handcrafted bread, pastries and desserts made with love using traditional recipes and the finest ingredients.
</p>
<div className="flex flex-wrap gap-4">
<a
href="#bestsellers"
className="px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-secondary transition-colors"
>
View Our Menu
</a>
<a
href="#contact"
className="px-6 py-3 border-2 border-primary text-primary font-semibold rounded-lg hover:bg-primary hover:text-white transition-colors"
>
Order Now
</a>
</div>
</div>
</div>
</section>
);
};
export default Hero;
components/BestSellers.jsx
import React from 'react';
const BestSellers = () => {
const products = [
{
id: 1,
name: 'Artisan Sourdough',
description: 'Naturally leavened with a crispy crust and soft interior',
price: '$6.50',
image: 'https://images.unsplash.com/photo-1585478259715-4ee8df0acf8d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300&q=80'
},
{
id: 2,
name: 'Chocolate Croissant',
description: 'Butter-layered pastry filled with rich dark chocolate',
price: '$3.95',
image: 'https://images.unsplash.com/photo-1630926647936-b8a1c4695860?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300&q=80'
},
{
id: 3,
name: 'Cinnamon Rolls',
description: 'Soft rolls with cinnamon sugar and cream cheese frosting',
price: '$4.25',
image: 'https://images.unsplash.com/photo-1613273853661-31890d53f7d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300&q=80'
},
{
id: 4,
name: 'Strawberry Tart',
description: 'Buttery pastry shell with vanilla custard and fresh strawberries',
price: '$5.75',
image: 'https://images.unsplash.com/photo-1488477304112-4944851de03d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&h=300&q=80'
},
];
return (
<section id="bestsellers" className="py-20 bg-white">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="font-playfair text-3xl md:text-4xl font-bold text-primary mb-4">
Our Best Sellers
</h2>
<p className="max-w-2xl mx-auto text-gray-600">
Discover our most popular baked goods that keep our customers coming back for more.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{products.map(product => (
<div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div className="h-48 overflow-hidden">
<img
src={product.image}
alt={product.name}
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500"
/>
</div>
<div className="p-6">
<div className="flex justify-between items-center mb-2">
<h3 className="font-semibold text-lg text-gray-800">{product.name}</h3>
<span className="font-bold text-primary">{product.price}</span>
</div>
<p className="text-gray-600 text-sm mb-4">{product.description}</p>
<button className="w-full py-2 bg-secondary text-white font-semibold rounded hover:bg-primary transition-colors">
Add to Order
</button>
</div>
</div>
))}
</div>
<div className="text-center mt-12">
<a
href="#contact"
className="inline-block px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-secondary transition-colors"
>
View Full Menu
</a>
</div>
</div>
</section>
);
};
export default BestSellers;
components/About.jsx
import React from 'react';
const About = () => {
return (
<section id="about" className="py-20 bg-accent">
<div className="container mx-auto px-4">
<div className="max-w-6xl mx-auto">
<div className="flex flex-col md:flex-row items-center gap-12">
<div className="md:w-1/2 mb-10 md:mb-0">
<div className="relative">
<img
src="https://images.unsplash.com/photo-1556741533-6e6a62bd8b49?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
alt="Bakery owner"
className="rounded-lg shadow-xl w-full h-auto"
/>
<div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
<p className="font-playfair italic text-primary text-lg">
"Baking is love made visible"
</p>
</div>
</div>
</div>
<div className="md:w-1/2">
<h2 className="font-playfair text-3xl md:text-4xl font-bold text-primary mb-6">
Our Story
</h2>
<p className="text-gray-800 mb-4">
Sweet Delights Bakery was founded in 2010 by Maria Johnson, who turned her passion for baking into a beloved community establishment. What started as a small operation selling at farmers markets has grown into a full-service bakery while maintaining the same dedication to quality and craftsmanship.
</p>
<p className="text-gray-800 mb-6">
We believe in using traditional methods, allowing our doughs to develop naturally for better flavor and texture. Every item is hand-crafted daily using locally-sourced ingredients whenever possible, supporting our community and ensuring the freshest products for our customers.
</p>
<div className="flex gap-8">
<div>
<p className="font-playfair font-bold text-3xl text-primary">12+</p>
<p className="text-gray-600">Years of Experience</p>
</div>
<div>
<p className="font-playfair font-bold text-3xl text-primary">50+</p>
<p className="text-gray-600">Unique Recipes</p>
</div>
<div>
<p className="font-playfair font-bold text-3xl text-primary">5000+</p>
<p className="text-gray-600">Happy Customers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default About;
components/Testimonials.jsx
import React, { useState } from 'react';
const Testimonials = () => {
const testimonials = [
{
id: 1,
name: "Emily Thompson",
role: "Local Resident",
quote: "I've tried bakeries all over the city, and Sweet Delights consistently delivers the best sourdough bread. The texture and flavor are absolutely perfect!",
image: "https://randomuser.me/api/portraits/women/12.jpg"
},
{
id: 2,
name: "Michael Rodriguez",
role: "Food Blogger",
quote: "The pastries here are on another level. You can taste the quality of the ingredients and the care that goes into each item. Their croissants are as good as any I've had in France.",
image: "https://randomuser.me/api/portraits/men/32.jpg"
},
{
id: 3,
name: "Sarah Chen",
role: "Office Manager",
quote: "Sweet Delights is our go-to for office meetings and celebrations. Their catering service is reliable, and everyone always raves about the selection. Highly recommended!",
image: "https://randomuser.me/api/portraits/women/44.jpg"
},
];
const [activeTestimonial, setActiveTestimonial] = useState(0);
const nextTestimonial = () => {
setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
};
const prevTestimonial = () => {
setActiveTestimonial((prev) => (prev - 1 + testimonials.length) % testimonials.length);
};
return (
<section id="testimonials" className="py-20 bg-white">
<div className="container mx-auto px-4">
<div className="text-center mb-16">
<h2 className="font-playfair text-3xl md:text-4xl font-bold text-primary mb-4">
Customer Love
</h2>
<p className="max-w-2xl mx-auto text-gray-600">
Don't just take our word for it - here's what our customers have to say.
</p>
</div>
<div className="max-w-4xl mx-auto">
<div className="relative bg-accent rounded-xl p-8 md:p-10 shadow-lg">
<div className="flex flex-col md:flex-row gap-8 items-center">
<div className="w-24 h-24 md:w-32 md:h-32 flex-shrink-0">
<img
src={testimonials[activeTestimonial].image}
alt={testimonials[activeTestimonial].name}
className="w-full h-full object-cover rounded-full border-4 border-white shadow"
/>
</div>
<div>
<svg className="text-primary h-10 w-10 mb-4 opacity-30" fill="currentColor" viewBox="0 0 32 32">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p className="text-gray-800 mb-6 italic text-lg">
{testimonials[activeTestimonial].quote}
</p>
<div>
<p className="font-bold text-gray-800">{testimonials[activeTestimonial].name}</p>
<p className="text-gray-600">{testimonials[activeTestimonial].role}</p>
</div>
</div>
</div>
<div className="flex justify-center mt-8">
{testimonials.map((_, index) => (
<button
key={index}
className={`w-3 h-3 rounded-full mx-1 ${
index === activeTestimonial ? 'bg-primary' : 'bg-gray-300'
}`}
onClick={() => setActiveTestimonial(index)}
aria-label={`Go to testimonial ${index + 1}`}
/>
))}
</div>
<button
onClick={prevTestimonial}
className="absolute top-1/2 -left-4 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100"
aria-label="Previous testimonial"
>
<svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
onClick={nextTestimonial}
className="absolute top-1/2 -right-4 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md hover:bg-gray-100"
aria-label="Next testimonial"
>
<svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</section>
);
};
export default Testimonials;
components/Contact.jsx
import React, { useState } from 'react';
const Contact = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
message: '',
order: 'inquiry'
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = (e) => {
e.preventDefault();
// In a real app, you would send the form data to a server
alert('Thank you for your message! We will get back to you soon.');
setFormData({
name: '',
email: '',
phone: '',
message: '',
order: 'inquiry'
});
};
return (
<section id="contact" className="py-20 bg-gray-50">
<div className="container mx-auto px-4">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="font-playfair text-3xl md:text-4xl font-bold text-primary mb-4">
Contact Us
</h2>
<p className="max-w-2xl mx-auto text-gray-600">
Have a question or want to place an order? Reach out to us and we'll get back to you as soon as possible.
</p>
</div>
<div className="flex flex-col md:flex-row gap-12">
<div className="md:w-1/2">
<div className="bg-white p-8 rounded-lg shadow-md">
<h3 className="font-playfair text-2xl font-bold text-primary mb-6">Send Us a Message</h3>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-gray-700 mb-2">Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
required
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-gray-700 mb-2">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
required
/>
</div>
<div className="mb-4">
<label htmlFor="phone" className="block text-gray-700 mb-2">Phone (optional)</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
<div className="mb-4">
<label htmlFor="order" className="block text-gray-700 mb-2">What is this regarding?</label>
<select
id="order"
name="order"
value={formData.order}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
>
<option value="inquiry">General Inquiry</option>
<option value="order">Place an Order</option>
<option value="catering">Catering Services</option>
<option value="feedback">Feedback</option>
</select>
</div>
<div className="mb-6">
<label htmlFor="message" className="block text-gray-700 mb-2">Your Message</label>
<textarea
id="message"
name="message"
value={formData.message}
onChange={handleChange}
rows="4"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
required
></textarea>
</div>
<button
type="submit"
className="w-full py-3 bg-primary text-white font-semibold rounded-lg hover:bg-secondary transition-colors"
>
Send Message
</button>
</form>
</div>
</div>
<div className="md:w-1/2">
<div className="bg-white p-8 rounded-lg shadow-md mb-8">
<h3 className="font-playfair text-2xl font-bold text-primary mb-6">Visit Us</h3>
<div className="space-y-4">
<div className="flex items-start gap-4">
<div className="text-primary mt-1">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div>
<h4 className="font-bold text-gray-800">Address</h4>
<p className="text-gray-600">123 Main Street, Bakerytown, BT 12345</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="text-primary mt-1">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h4 className="font-bold text-gray-800">Hours</h4>
<p className="text-gray-600">Monday - Friday: 7am - 7pm</p>
<p className="text-gray-600">Saturday: 8am - 5pm</p>
<p className="text-gray-600">Sunday: 8am - 3pm</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="text-primary mt-1">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</div>
<div>
<h4 className="font-bold text-gray-800">Phone</h4>
<p className="text-gray-600">(555) 123-4567</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="text-primary mt-1">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<div>
<h4 className="font-bold text-gray-800">Email</h4>
<p className="text-gray-600">info@sweetdelightsbakery.com</p>
</div>
</div>
</div>
</div>
<div className="bg-accent p-8 rounded-lg shadow-md">
<h3 className="font-playfair text-2xl font-bold text-primary mb-6">Special Orders</h3>
<p className="text-gray-800 mb-6">
Planning a special event? We offer custom cakes, dessert tables, and catering packages for weddings, birthdays, and corporate events.
</p>
<a
href="#"
className="inline-block px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-secondary transition-colors"
>
Learn More About Custom Orders
</a>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default Contact;
components/Footer.jsx
import React from 'react';
const Footer = () => {
return (
<footer className="bg-primary text-white py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="font-playfair text-xl font-bold mb-4">Sweet Delights</h3>
<p className="mb-6">
Crafting delicious moments with every bite since 2010.
</p>
<div className="flex space-x-4">
<a href="#" aria-label="Facebook" className="text-white hover:text-accent">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
</svg>
</a>
<a href="#" aria-label="Instagram" className="text-white hover:text-accent">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" />
</svg>
</a>
<a href="#" aria-label="Twitter" className="text-white hover:text-accent">
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.028 10.028 0 01-3.127 1.195 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
</svg>
</a>
</div>
</div>
<div>
<h3 className="font-bold text-lg mb-4">Quick Links</h3>
<ul className="space-y-2">
<li><a href="#home" className="hover:text-accent transition-colors">Home</a></li>
<li><a href="#bestsellers" className="hover:text-accent transition-colors">Menu</a></li>
<li><a href="#about" className="hover:text-accent transition-colors">About Us</a></li>
<li><a href="#testimonials" className="hover:text-accent transition-colors">Testimonials</a></li>
<li><a href="#contact" className="hover:text-accent transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h3 className="font-bold text-lg mb-4">Our Products</h3>
<ul className="space-y-2">
<li><a href="#" className="hover:text-accent transition-colors">Breads</a></li>
<li><a href="#" className="hover:text-accent transition-colors">Pastries</a></li>
<li><a href="#" className="hover:text-accent transition-colors">Cakes</a></li>
<li><a href="#" className="hover:text-accent transition-colors">Cookies</a></li>
<li><a href="#" className="hover:text-accent transition-colors">Seasonal Specials</a></li>
</ul>
</div>
<div>
<h3 className="font-bold text-lg mb-4">Newsletter</h3>
<p className="mb-4">
Subscribe to get special offers, free giveaways, and new product announcements.
</p>
<form className="flex">
<input
type="email"
placeholder="Your email"
className="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800"
/>
<button
type="submit"
className="bg-secondary px-4 py-2 rounded-r-lg hover:bg-accent hover:text-primary transition-colors"
>
Join
</button>
</form>
</div>
</div>
<div className="border-t border-white/20 mt-10 pt-6 text-sm text-center">
<p>© 2023 Sweet Delights Bakery. All rights reserved.</p>
</div>
</div>
</footer>
);
};
export default Footer;
index.jsx
import React from 'react';
// DON'T change this to 'react-dom/client' - it's fine as-is
import { createRoot } from 'react-dom';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
README.md
# Sweet Delights Bakery Landing Page
A responsive landing page for a fictional bakery built with React and Tailwind CSS.
## Features
- Responsive design that works on mobile, tablet, and desktop devices
- Clean and modern UI with warm, bakery-themed colors
- Multiple sections including:
- Hero banner
- Featured products
- About section
- Customer testimonials
- Contact form
- Footer with newsletter signup
## Technologies Used
- React
- Tailwind CSS
- Modern JavaScript (ES6+)
## Setup
1. Clone the repository
2. Install dependencies with `npm install`
3. Start the development server with `npm start`