2025年5月24日
Qwen3 网页开发：卖水果的网站！
初始提示词：
编写一个水果电子商务网站。
改进提示词：
无
最终效果：
在线预览：
https://chat.qwen.ai/s/deploy/f7b1cc63-083b-479d-9df8-ff395f1298a0
最终代码：
import React, { useState, useEffect } from 'react';
const App = () => {
const [cart, setCart] = useState([]);
const [activeCategory, setActiveCategory] = useState('All');
const [searchTerm, setSearchTerm] = useState('');
const [isCartOpen, setIsCartOpen] = useState(false);
// Mock data for fruits
const fruits = [
{ id: 1, name: 'Apple', price: 2.99, category: 'Citrus', image: 'https://placehold.co/300x200?text=Apple ' },
{ id: 2, name: 'Banana', price: 0.99, category: 'Tropical', image: 'https://placehold.co/300x200?text=Banana ' },
{ id: 3, name: 'Orange', price: 3.49, category: 'Citrus', image: 'https://placehold.co/300x200?text=Orange ' },
{ id: 4, name: 'Mango', price: 4.99, category: 'Tropical', image: 'https://placehold.co/300x200?text=Mango ' },
{ id: 5, name: 'Grapes', price: 5.99, category: 'Berries', image: 'https://placehold.co/300x200?text=Grapes ' },
{ id: 6, name: 'Strawberry', price: 7.99, category: 'Berries', image: 'https://placehold.co/300x200?text=Strawberry ' },
{ id: 7, name: 'Pineapple', price: 3.99, category: 'Tropical', image: 'https://placehold.co/300x200?text=Pineapple ' },
{ id: 8, name: 'Lemon', price: 1.99, category: 'Citrus', image: 'https://placehold.co/300x200?text=Lemon ' },
{ id: 9, name: 'Blueberry', price: 6.99, category: 'Berries', image: 'https://placehold.co/300x200?text=Blueberry ' },
{ id: 10, name: 'Kiwi', price: 2.49, category: 'Exotic', image: 'https://placehold.co/300x200?text=Kiwi ' },
{ id: 11, name: 'Cherry', price: 8.99, category: 'Berries', image: 'https://placehold.co/300x200?text=Cherry ' },
{ id: 12, name: 'Avocado', price: 1.99, category: 'Exotic', image: 'https://placehold.co/300x200?text=Avocado ' },
];
// Get unique categories
const categories = ['All', ...new Set(fruits.map(fruit => fruit.category))];
// Filter fruits based on active category and search term
const filteredFruits = fruits.filter(fruit => {
const matchesCategory = activeCategory === 'All' || fruit.category === activeCategory;
const matchesSearch = fruit.name.toLowerCase().includes(searchTerm.toLowerCase());
return matchesCategory && matchesSearch;
});
// Add to cart function
const addToCart = (fruit) => {
setCart(prevCart => {
const existingItem = prevCart.find(item => item.id === fruit.id);
if (existingItem) {
return prevCart.map(item =>
item.id === fruit.id ? { ...item, quantity: item.quantity + 1 } : item
);
}
return [...prevCart, { ...fruit, quantity: 1 }];
});
};
// Remove from cart function
const removeFromCart = (id) => {
setCart(prevCart => prevCart.filter(item => item.id !== id));
};
// Update quantity in cart
const updateQuantity = (id, newQuantity) => {
if (newQuantity < 1) return;
setCart(prevCart =>
prevCart.map(item =>
item.id === id ? { ...item, quantity: newQuantity } : item
)
);
};
// Calculate total price
const calculateTotal = () => {
return cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2);
};
// Handle scroll animation
useEffect(() => {
const handleScroll = () => {
const header = document.querySelector('header');
if (window.scrollY > 10) {
header.classList.add('bg-white', 'shadow-md');
header.classList.remove('bg-transparent');
} else {
header.classList.remove('bg-white', 'shadow-md');
header.classList.add('bg-transparent');
}
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent">
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center space-x-2">
<svg className="w-8 h-8 text-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2Z" fill="#10B981"/>
<path d="M12 12C9.23858 12 7 14.2386 7 17C7 19.7614 9.23858 22 12 22C14.7614 22 17 19.7614 17 17C17 14.2386 14.7614 12 12 12Z" fill="#10B981"/>
<path d="M12 12V7" stroke="white" strokeWidth="2" strokeLinecap="round"/>
<path d="M12 22V17" stroke="white" strokeWidth="2" strokeLinecap="round"/>
</svg>
<h1 className="text-xl font-bold text-white">FreshFruit</h1>
</div>
{/* Search bar */}
<div className="hidden md:flex items-center w-1/3">
<input
type="text"
placeholder="Search fruits..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-4 py-2 rounded-l-lg focus:outline-none"
/>
<button className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-r-lg transition-colors">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
{/* Cart button */}
<div className="relative">
<button
onClick={() => setIsCartOpen(!isCartOpen)}
className="flex items-center space-x-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M5.4 5H21L17 13H7M5.4 5L7 13M7 13L4.707 15.293C4.077 15.923 4.523 17 5.414 17H17M17 17C16.4696 17 15.9609 17.2107 15.5858 17.5858C15.2107 17.9609 15 18.4696 15 19C15 19.5304 15.2107 20.0391 15.5858 20.4142C15.9609 20.7893 16.4696 21 17 21C17.5304 21 18.0391 20.7893 18.4142 20.4142C18.7893 20.0391 19 19.5304 19 19C19 18.4696 18.7893 17.9609 18.4142 17.5858C18.0391 17.2107 17.5304 17 17 17Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>Cart ({cart.length})</span>
</button>
{/* Cart dropdown */}
{isCartOpen && (
<div className="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-50 animate-fadeIn">
<div className="p-4 border-b">
<h3 className="font-bold text-lg">Your Cart</h3>
</div>
<div className="max-h-96 overflow-y-auto">
{cart.length === 0 ? (
<div className="p-4 text-center text-gray-500">Your cart is empty</div>
) : (
cart.map(item => (
<div key={item.id} className="flex items-center p-4 border-b last:border-b-0 hover:bg-gray-50">
<img src={item.image} alt={item.name} className="w-12 h-12 object-cover rounded" />
<div className="ml-3 flex-grow">
<h4 className="font-medium">{item.name}</h4>
<p className="text-sm text-gray-600">${item.price.toFixed(2)} x {item.quantity}</p>
</div>
<div className="flex items-center">
<button
onClick={() => updateQuantity(item.id, item.quantity - 1)}
className="w-6 h-6 flex items-center justify-center rounded-full bg-gray-200 text-gray-700"
>
-
</button>
<span className="mx-2">{item.quantity}</span>
<button
onClick={() => updateQuantity(item.id, item.quantity + 1)}
className="w-6 h-6 flex items-center justify-center rounded-full bg-gray-200 text-gray-700"
>
+
</button>
<button
onClick={() => removeFromCart(item.id)}
className="ml-2 text-red-500 hover:text-red-700"
>
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 7L18.1327 19.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224C6.81296 21 5.94208 20.1891 5.86732 19.1425L5 7M10 11V17M14 11V17M15 7V4C15 3.44772 14.5523 3 14 3H10C9.44772 3 9 3.44772 9 4V7M4 7H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
</div>
</div>
))
)}
</div>
<div className="p-4 border-t">
<div className="flex justify-between mb-4">
<span className="font-bold">Total:</span>
<span className="font-bold text-green-600">${calculateTotal()}</span>
</div>
<button className="w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg transition-colors">
Checkout
</button>
</div>
</div>
)}
</div>
</div>
</header>
{/* Hero Section */}
<section className="pt-32 pb-16 bg-gradient-to-r from-green-400 to-emerald-500 text-white">
<div className="container mx-auto px-4">
<div className="flex flex-col md:flex-row items-center">
<div className="md:w-1/2 mb-8 md:mb-0">
<h2 className="text-4xl md:text-5xl font-bold mb-4">Fresh Fruits Delivered to Your Door</h2>
<p className="text-lg mb-6 opacity-90">Discover the freshest, most delicious fruits sourced directly from local farms. Healthy eating has never been easier or more enjoyable.</p>
<div className="flex space-x-4">
<button className="bg-white text-green-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors">
Shop Now
</button>
<button className="border border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-medium transition-colors">
Learn More
</button>
</div>
</div>
<div className="md:w-1/2 flex justify-center">
<div className="relative">
<div className="absolute inset-0 bg-white rounded-full transform translate-x-4 translate-y-4"></div>
<div className="relative grid grid-cols-2 gap-4">
<img src="https://placehold.co/200x200?text=Fresh+Fruits " alt="Fresh fruits" className="rounded-lg shadow-lg transform rotate-6" />
<img src="https://placehold.co/200x200?text=Organic+Quality " alt="Organic quality" className="rounded-lg shadow-lg -rotate-6" />
</div>
</div>
</div>
</div>
</div>
</section>
{/* Categories */}
<section className="py-12 bg-white">
<div className="container mx-auto px-4">
<h3 className="text-2xl font-bold text-gray-800 mb-8 text-center">Shop by Category</h3>
<div className="flex flex-wrap justify-center gap-3">
{categories.map(category => (
<button
key={category}
onClick={() => setActiveCategory(category)}
className={`px-4 py-2 rounded-full transition-colors ${
activeCategory === category
? 'bg-green-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
{category}
</button>
))}
</div>
</div>
</section>
{/* Products Grid */}
<section className="py-16 bg-gray-50">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
{filteredFruits.map(fruit => (
<div
key={fruit.id}
className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
>
<div className="relative">
<img
src={fruit.image}
alt={fruit.name}
className="w-full h-48 object-cover"
/>
<div className="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">
{fruit.category}
</div>
</div>
<div className="p-4">
<h3 className="font-bold text-lg mb-1">{fruit.name}</h3>
<div className="flex justify-between items-center">
<span className="text-green-600 font-bold">${fruit.price.toFixed(2)}</span>
<button
onClick={() => addToCart(fruit)}
className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm transition-colors"
>
Add to Cart
</button>
</div>
</div>
</div>
))}
</div>
{filteredFruits.length === 0 && (
<div className="text-center py-16">
<h3 className="text-xl font-semibold text-gray-700 mb-2">No fruits found</h3>
<p className="text-gray-500">Try adjusting your search or filter criteria</p>
</div>
)}
</div>
</section>
{/* Features Section */}
<section className="py-16 bg-white">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="flex flex-col items-center text-center">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
<h4 className="font-bold text-lg mb-2">100% Organic</h4>
<p className="text-gray-600">All our fruits are grown without synthetic pesticides or fertilizers.</p>
</div>
<div className="flex flex-col items-center text-center">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 8V12L15 15M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
<h4 className="font-bold text-lg mb-2">Fast Delivery</h4>
<p className="text-gray-600">Get your fresh produce delivered within 24 hours of ordering.</p>
</div>
<div className="flex flex-col items-center text-center">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-green-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M2.03998 12.06C2.01619 12.2215 2.01619 12.3885 2.03998 12.55C2.16965 13.4659 2.49539 14.345 2.99482 15.12C3.49425 15.895 4.15416 16.5463 4.92561 17.0291C5.69706 17.5119 6.56362 17.8123 7.46339 17.9055C8.36316 17.9988 9.27717 17.8825 10.14 17.56C10.3095 17.502 10.4986 17.502 10.6681 17.56C11.5309 17.8825 12.4449 17.9988 13.3447 17.9055C14.2445 17.8123 15.111 17.5119 15.8825 17.0291C16.6539 16.5463 17.3138 15.895 17.8133 15.12C18.3127 14.345 18.6385 13.4659 18.7681 12.55C18.8429 12.3863 18.8963 12.2144 18.9272 12.038C19.0157 11.526 19.0157 11.004 18.9272 10.492C18.8963 10.3156 18.8429 10.1437 18.7681 9.98C18.6385 9.06409 18.3127 8.18502 17.8133 7.41001C17.3138 6.635 16.6539 5.98374 15.8825 5.50093C15.111 5.01811 14.2445 4.71769 13.3447 4.62445C12.4449 4.53121 11.5309 4.64752 10.6681 4.97001C10.4986 5.02804 10.3095 5.02804 10.14 4.97001C9.27717 4.64752 8.36316 4.53121 7.46339 4.62445C6.56362 4.71769 5.69706 5.01811 4.92561 5.50093C4.15416 5.98374 3.49425 6.635 2.99482 7.41001C2.49539 8.18502 2.16965 9.06409 2.03998 9.98C1.95151 10.492 1.95151 11.014 2.03998 11.526C1.95151 11.69 1.95151 11.857 2.03998 12.02" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
<h4 className="font-bold text-lg mb-2">Customer Support</h4>
<p className="text-gray-600">Our team is available 24/7 to help with any questions or concerns.</p>
</div>
</div>
</div>
</section>
{/* Newsletter */}
<section className="py-16 bg-green-600 text-white">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto text-center">
<h3 className="text-2xl md:text-3xl font-bold mb-4">Subscribe to Our Newsletter</h3>
<p className="text-green-100 mb-6">Stay updated with our latest offers, promotions, and healthy eating tips.</p>
<form className="flex flex-col sm:flex-row gap-3 justify-center">
<input
type="email"
placeholder="Enter your email address"
className="px-4 py-3 rounded-lg text-gray-900 focus:outline-none flex-grow"
/>
<button
type="submit"
className="bg-white text-green-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors"
>
Subscribe
</button>
</form>
</div>
</div>
</section>
{/* Footer */}
<footer className="bg-gray-900 text-gray-300 py-12">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div className="flex items-center space-x-2 mb-4">
<svg className="w-6 h-6 text-green-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2Z" fill="#10B981"/>
<path d="M12 12C9.23858 12 7 14.2386 7 17C7 19.7614 9.23858 22 12 22C14.7614 22 17 19.7614 17 17C17 14.2386 14.7614 12 12 12Z" fill="#10B981"/>
<path d="M12 12V7" stroke="white" strokeWidth="2" strokeLinecap="round"/>
<path d="M12 22V17" stroke="white" strokeWidth="2" strokeLinecap="round"/>
</svg>
<h3 className="text-xl font-bold">FreshFruit</h3>
</div>
<p className="mb-4">Bringing you the freshest produce straight from local farms to your doorstep.</p>
<div className="flex space-x-4">
<a href="#" className="hover:text-white transition-colors">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 16.9913 5.65689 21.1286 10.4371 21.8841V14.8913H7.89848V12H10.4371V9.79762C10.4371 7.29545 11.9353 5.90218 14.2273 5.90218C15.3212 5.90218 16.4591 6.10591 16.4591 6.10591V8.5625H15.1888C13.9496 8.5625 13.5629 9.33864 13.5629 10.1364V12H16.3352L15.8829 14.8913H13.5629V21.8841C18.3431 21.1286 22 16.9913 22 12Z"/>
</svg>
</a>
<a href="#" className="hover:text-white transition-colors">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20.9999 4.74996C20.9349 4.48996 19.6699 3.99996 18.4499 3.99996C17.0749 3.99996 16.3999 4.75996 16.3999 5.83996C16.3999 6.99996 16.4299 8.49996 16.3649 9.00996C16.2999 9.50996 15.9649 9.99996 15.4449 9.99996C14.6549 9.99996 14.0949 9.34496 14.0949 8.44496C14.0949 7.04496 14.0549 5.28496 14.0549 4.38496C14.0549 3.48496 13.5249 2.99996 12.7349 2.99996C11.9449 2.99996 10.7249 3.54496 9.44488 4.99996C8.16488 6.45496 7.39488 8.49996 7.39488 10.74C7.39488 13.02 8.43488 15.165 9.77988 16.44C11.1249 17.715 12.9549 18.18 14.9949 18.18C16.5399 18.18 17.3349 17.97 17.6649 17.85C17.9949 17.73 18.4499 17.52 18.4499 17.1C18.4499 16.68 18.0699 16.41 17.3099 16.41C16.3799 16.41 15.1499 16.62 14.0049 16.68C12.8599 16.74 11.7099 16.74 11.7099 16.74C11.7099 16.74 10.5599 16.74 9.41488 16.68C8.26988 16.62 7.03988 16.41 6.10988 16.41C5.34988 16.41 4.96988 16.68 4.96988 17.1C4.96988 17.52 5.42488 17.73 5.75488 17.85C6.08488 17.97 6.87988 18.18 8.42488 18.18C9.30488 18.18 10.1799 18.06 10.9449 17.85C10.4049 18.39 9.71488 18.81 8.93988 19.08C8.16488 19.35 7.31988 19.5 6.44488 19.5C5.56988 19.5 4.72488 19.35 3.94988 19.08C3.17488 18.81 2.48488 18.39 1.94488 17.85C1.40488 17.31 1.00488 16.65 0.749878 15.9C0.494878 15.15 0.374878 14.31 0.374878 13.44C0.374878 11.28 0.964878 9.33496 2.14488 7.67496C3.32488 6.01496 5.00488 4.70496 6.99988 3.99996C7.63988 3.78496 8.13488 3.62496 8.44488 3.52996C9.23488 3.29496 9.98988 3.11496 10.6649 2.99996C11.3399 2.88496 11.9249 2.84496 12.3949 2.84496C12.8649 2.84496 13.4499 2.88496 14.1249 2.99996C14.7999 3.11496 15.5549 3.29496 16.3449 3.52996C16.6549 3.62496 17.1499 3.78496 17.7899 3.99996C18.7199 4.31996 19.6499 4.74996 20.4749 5.28496C20.7749 5.47496 20.9999 4.99996 20.9999 4.74996Z"/>
</svg>
</a>
<a href="#" className="hover:text-white transition-colors">
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.47715 2 2 6.47715 2 12C2 16.9913 5.65689 21.1286 10.4371 21.8841V14.8913H7.89848V12H10.4371V9.79762C10.4371 7.29545 11.9353 5.90218 14.2273 5.90218C15.3212 5.90218 16.4591 6.10591 16.4591 6.10591V8.5625H15.1888C13.9496 8.5625 13.5629 9.33864 13.5629 10.1364V12H16.3352L15.8829 14.8913H13.5629V21.8841C18.3431 21.1286 22 16.9913 22 12C22 6.47715 17.5228 2 12 2Z"/>
</svg>
</a>
</div>
</div>
<div>
<h4 className="text-white font-bold mb-4">Quick Links</h4>
<ul className="space-y-2">
<li><a href="#" className="hover:text-white transition-colors">Home</a></li>
<li><a href="#" className="hover:text-white transition-colors">Shop</a></li>
<li><a href="#" className="hover:text-white transition-colors">About Us</a></li>
<li><a href="#" className="hover:text-white transition-colors">Contact</a></li>
<li><a href="#" className="hover:text-white transition-colors">FAQ</a></li>
</ul>
</div>
<div>
<h4 className="text-white font-bold mb-4">Categories</h4>
<ul className="space-y-2">
{categories.map(category => (
<li key={category}>
<a
href="#"
onClick={(e) => {
e.preventDefault();
setActiveCategory(category);
}}
className="hover:text-white transition-colors"
>
{category}
</a>
</li>
))}
</ul>
</div>
<div>
<h4 className="text-white font-bold mb-4">Contact Us</h4>
<address className="not-italic space-y-2">
<p className="flex items-start">
<svg className="w-5 h-5 mr-2 mt-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 11C12.5523 11 13 10.5523 13 10C13 9.44772 12.5523 9 12 9C11.4477 9 11 9.44772 11 10C11 10.5523 11.4477 11 12 11Z" fill="currentColor"/>
</svg>
123 Fresh Fruit Street, Green Valley, CA 92507
</p>
<p className="flex items-start">
<svg className="w-5 h-5 mr-2 mt-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 16.92V19.92C22 20.4723 21.7893 20.9996 21.4142 21.3746C21.0391 21.7497 20.5119 22 19.96 22H4.04C3.48772 22 2.96044 21.7893 2.58538 21.4142C2.21033 21.0391 2 20.5119 2 19.96V16.92" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M17 2H7C5.89543 2 5 2.89543 5 4V16C5 17.1046 5.89543 18 7 18H17C18.1046 18 19 17.1046 19 16V4C19 2.89543 18.1046 2 17 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 14L16 10L12 6L8 10L12 14Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
contact@freshfruit.com
</p>
<p className="flex items-start">
<svg className="w-5 h-5 mr-2 mt-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 16.92V19.92C22 20.4723 21.7893 20.9996 21.4142 21.3746C21.0391 21.7497 20.5119 22 19.96 22H4.04C3.48772 22 2.96044 21.7893 2.58538 21.4142C2.21033 21.0391 2 20.5119 2 19.96V16.92" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M17 2H7C5.89543 2 5 2.89543 5 4V16C5 17.1046 5.89543 18 7 18H17C18.1046 18 19 17.1046 19 16V4C19 2.89543 18.1046 2 17 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 14L16 10L12 6L8 10L12 14Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
support@freshfruit.com
</p>
<p className="flex items-start">
<svg className="w-5 h-5 mr-2 mt-0.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 16.92V19.92C22 20.4723 21.7893 20.9996 21.4142 21.3746C21.0391 21.7497 20.5119 22 19.96 22H4.04C3.48772 22 2.96044 21.7893 2.58538 21.4142C2.21033 21.0391 2 20.5119 2 19.96V16.92" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M17 2H7C5.89543 2 5 2.89543 5 4V16C5 17.1046 5.89543 18 7 18H17C18.1046 18 19 17.1046 19 16V4C19 2.89543 18.1046 2 17 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M12 14L16 10L12 6L8 10L12 14Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
(123) 456-7890
</p>
</address>
</div>
</div>
<div className="border-t border-gray-700 mt-12 pt-6 text-center text-sm">
<p>© {new Date().getFullYear()} FreshFruit. All rights reserved.</p>
</div>
</div>
</footer>
{/* Global styles */}
<style jsx global>{`
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
animation: fadeIn 0.3s ease-out forwards;
}
`}</style>
</div>
);
};
export default App;
[必嫖] “我的deepseek不繁忙” 之火山引擎3250万R1模型tokens，速度极快 ！
微软老照片修复项目，让回忆更美好！
手把手教你AI全自动编程，IDE工具免费，Claude模型随便用！
关于作者
tony
某人