Here's a cohesive, responsive cake shop website built with React, TypeScript, and modern UI components, featuring a warm, inviting design perfect for a bakery:

import React, { useState } from 'react';
import { Cake, Phone, Mail, MapPin, Instagram, Facebook, Clock, Star } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

// Type definitions
type Cake = {
  id: number;
  name: string;
  description: string;
  price: string;
  image: string;
};

type Testimonial = {
  id: number;
  name: string;
  quote: string;
  rating: number;
};

const CakeShop: React.FC = () => {
  // Sample data
  const cakes: Cake[] = [
    {
      id: 1,
      name: "Vanilla Dream",
      description: "Soft vanilla sponge with buttercream frosting",
      price: "$35",
      image: "https://picsum.photos/id/292/500/400" // Cake image
    },
    {
      id: 2,
      name: "Chocolate Indulgence",
      description: "Rich chocolate cake with ganache filling",
      price: "$40",
      image: "https://picsum.photos/id/431/500/400" // Chocolate dessert
    },
    {
      id: 3,
      name: "Strawberry Delight",
      description: "Fresh strawberries with cream and sponge",
      price: "$38",
      image: "https://picsum.photos/id/1080/500/400" // Strawberry cake
    },
    {
      id: 4,
      name: "Red Velvet",
      description: "Classic red velvet with cream cheese frosting",
      price: "$42",
      image: "https://picsum.photos/id/1023/500/400" // Red velvet
    },
  ];

  const testimonials: Testimonial[] = [
    {
      id:1,
      name: "Sarah Johnson",
      quote: "The best cake I've ever had! My wedding cake was perfect.",
      rating:5
    },
    {
      id:2,
      name: "Michael Lee",
      quote: "Fresh, delicious, and always beautiful. Highly recommend!",
      rating:5
    },
    {
      id:3,
      name: "Emily Chen",
      quote: "My kids go crazy for their cupcakes. Perfect every time!",
      rating:4
    }
  ];

  const [orderCake, setOrderCake] = useState<Cake | null>(null);

  return (
    <div className="min-h-screen bg-amber-50 text-gray-800">
      {/* Navbar */}
      <nav className="sticky top-0 bg-white shadow-sm z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <div className="flex items-center gap-2">
            <Cake className="h-8 w-8 text-pink-400" />
            <span className="text-xl font-bold text-pink-500">Sweet Treats</span>
          </div>
          <div className="hidden md:flex gap-8">
            <a href="#home" className="hover:text-pink-400 transition">Home</a>
            <a href="#about" className="hover:text-pink-400 transition">About</a>
            <a href="#menu" className="hover:text-pink-400 transition">Menu</a>
            <a href="#testimonials" className="hover:text-pink-400 transition">Testimonials</a>
            <a href="#contact" className="hover:text-pink-400 transition">Contact</a>
          </div>
          <Button className="bg-pink-400 hover:bg-pink-500 text-white">Order Now</Button>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative h-[80vh] flex items-center">
        <div className="absolute inset-0">
          <img 
            src="https://picsum.photos/id/292/1920/1080" 
            alt="Delicious cake" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/40"></div>
        </div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-white">
          <h1 className="text-4xl md:text-6xl font-bold mb-4">Delicious Cakes <br /> For Every Occasion</h1>
          <p className="text-xl mb-8 max-w-2xl">Handcrafted with love using the finest ingredients. Perfect for birthdays, weddings, and all your sweet moments.</p>
          <Button className="bg-pink-400 hover:bg-pink-500 text-white px-8 py-3 text-lg">View Our Menu</Button>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row gap-8 items-center">
            <div className="md:w-1/2">
              <img 
                src="https://picsum.photos/id/1010/600/400" 
                alt="Our bakery" 
                className="rounded-lg shadow-lg w-full h-auto"
              />
            </div>
            <div className="md:w-1/2">
              <h2 className="text-3xl font-bold mb-6 text-pink-500">Our Story</h2>
              <p className="text-lg mb-4">Sweet Treats was founded in 2010 with a simple mission: to create beautiful, delicious cakes that bring joy to people's lives. Our master bakers use traditional techniques combined with modern flavors to craft every cake with care.</p>
              <p className="text-lg mb-6">We source local, organic ingredients whenever possible, ensuring every bite is not only tasty but also supports our community. Whether you need a small cake for dinner or a showstopper for your big day, we're here to make it special.</p>
              <Button className="bg-pink-400 hover:bg-pink-500 text-white">Learn More</Button>
            </div>
          </div>
        </div>
      </section>

      {/* Menu Section */}
      <section id="menu" className="py-16 bg-amber-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12 text-center text-pink-500">Our Cakes</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {cakes.map(cake => (
              <Card key={cake.id} className="overflow-hidden hover:shadow-lg transition-shadow duration-300">
                <img src={cake.image} alt={cake.name} className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="text-xl font-semibold mb-2">{cake.name}</h3>
                  <p className="text-gray-600 mb-4">{cake.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-bold text-pink-500">{cake.price}</span>
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button 
                          className="bg-pink-400 hover:bg-pink-500 text-white" 
                          onClick={() => setOrderCake(cake)}
                        >
                          Order
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Order {cake.name}</DialogTitle>
                        </DialogHeader>
                        <div className="space-y-4">
                          <p>Price: {cake.price}</p>
                          <Input placeholder="Your name" />
                          <Input placeholder="Your phone number" />
                          <Textarea placeholder="Special requests (flavor variations, delivery notes)" />
                          <Button className="w-full bg-pink-400 hover:bg-pink-500 text-white">Confirm Order</Button>
                        </div>
                      </DialogContent>
                    </Dialog>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12 text-center text-pink-500">What Our Customers Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map(test => (
              <Card key={test.id} className="p-6">
                <div className="flex mb-4">
                  {Array.from({ length: test.rating }).map((_, idx) => (
                    <Star key={idx} className="h-5 w-5 text-yellow-400 fill-yellow-400" />
                  ))}
                </div>
                <p className="italic mb-4">{test.quote}</p>
                <p className="font-semibold text-pink-500">- {test.name}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 bg-amber-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-12 text-center text-pink-500">Contact Us</h2>
          <div className="flex flex-col md:flex-row gap-8">
            <div className="md:w-1/2 space-y-6">
              <div className="flex items-center gap-4">
                <MapPin className="h-6 w-6 text-pink-500" />
                <p>123 Bakery Lane, Sweet City, SC 12345</p>
              </div>
              <div className="flex items-center gap-4">
                <Phone className="h-6 w-6 text-pink-500" />
                <p>(123) 456-7890</p>
              </div>
              <div className="flex items-center gap-4">
                <Mail className="h-6 w-6 text-pink-500" />
                <p>hello@sweettreats.com</p>
              </div>
              <div className="flex items-center gap-4">
                <Clock className="h-6 w-6 text-pink-500" />
                <div>
                  <p>Mon-Fri: 9am - 6pm</p>
                  <p>Sat-Sun: 10am - 5pm</p>
                </div>
              </div>
              <div className="flex gap-4 mt-6">
                <a href="#" className="hover:text-pink-500 transition"><Instagram className="h-6 w-6" /></a>
                <a href="#" className="hover:text-pink-500 transition"><Facebook className="h-6 w-6" /></a>
              </div>
            </div>
            <div className="md:w-1/2">
              <Card className="p-6">
                <h3 className="text-xl font-semibold mb-4">Send us a message</h3>
                <div className="space-y-4">
                  <Input placeholder="Your name" />
                  <Input placeholder="Your email" />
                  <Textarea placeholder="Your message" rows={4} />
                  <Button className="w-full bg-pink-400 hover:bg-pink-500 text-white">Send Message</Button>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-pink-500 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="flex justify-center gap-4 mb-4">
            <a href="#" className="hover:text-amber-500 transition"><Instagram className="h-6 w-6" /></a>
            <a href="#" className="hover:text-amber-500 transition"><Facebook className="h-6 w-6" /></a>
          </div>
          <p>© 2024 Sweet Treats. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default CakeShop;

Key Features:

• Warm Pastel Color Scheme: Soft pinks and creams create an inviting bakery atmosphere
• Responsive Layout: Adapts seamlessly from mobile to desktop devices
• Interactive Menu: Cake ordering dialogs for easy custom orders
• Customer Testimonials: Social proof section with star ratings
• Full Contact Information: Includes location, hours, and contact form
• Smooth Animations: Hover effects on cards, buttons, and navigation elements
• Component-Based Structure: Uses shadcn/ui components for consistent UI
• Lucide Icons: Clean, relevant icons for navigation and contact elements

The site is built to showcase your cake shop's offerings while providing all essential information for customers to order or visit your bakery. You can easily extend it with more cake varieties, online payment integration, or a blog section for recipe tips as your business grows.

作者声明:本文包含人工智能生成内容。