Fresh Basket India - Sell Project

import { ShoppingCart, Heart, User, MapPin, Search } from 'lucide-react'; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { useState } from "react"; const fruitsCatalog = [ { name: "Apple", category: "Imported", price: 180 }, { name: "Banana", category: "Indian", price: 60 }, { name: "Mango", category: "Seasonal", price: 200 }, { name: "Orange", category: "Indian", price: 90 }, { name: "Grapes", category: "Indian", price: 120 }, { name: "Pomegranate", category: "Indian", price: 160 }, { name: "Kiwi", category: "Imported", price: 220 }, { name: "Dragon Fruit", category: "Imported", price: 260 }, { name: "Papaya", category: "Indian", price: 70 }, { name: "Pineapple", category: "Indian", price: 85 } ]; export default function FreshBasketIndia() { const [cart, setCart] = useState([]); const [loggedIn, setLoggedIn] = useState(false); const addToCart = (fruit) => setCart([...cart, fruit]); return ( <div className="min-h-screen bg-gray-50"> {/ Header /} <header className="bg-green-600 text-white shadow-md"> <div className="max-w-7xl mx-auto flex items-center gap-4 px-4 py-3"> <div className="flex items-center gap-2 font-bold text-xl">🍎 FreshBasket India</div> <div className="hidden md:flex items-center gap-1 text-sm bg-green-700 px-2 py-1 rounded"> <MapPin size={16} /> Deliver to: <b>380001</b> – Change </div> <div className="flex-1 mx-4"> <div className="flex items-center bg-white rounded overflow-hidden"> <input className="w-full px-3 py-2 text-black outline-none" placeholder="Search for fruits (apple, mango, banana…)" /> <Button className="rounded-none bg-yellow-400 hover:bg-yellow-500"><Search className="text-black" /></Button> </div> </div> <div className="flex items-center gap-4 text-sm"> <div className="flex items-center gap-1 cursor-pointer" onClick={() => setLoggedIn(true)}> <User size={18}/> {loggedIn ? "My Account" : "Login / Sign Up"} </div> <div className="hidden md:block cursor-pointer">My Orders</div> <div className="flex items-center gap-1 cursor-pointer"><Heart size={18}/> Wishlist</div> <div className="flex items-center gap-1 cursor-pointer"><ShoppingCart size={18}/> Cart ({cart.length})</div> </div> </div> </header> {/ Navigation /} <nav className="bg-white border-b"> <div className="max-w-7xl mx-auto flex gap-6 px-4 py-2 text-sm font-medium"> <span>Home</span> <span>All Fruits</span> <span>Seasonal Fruits</span> <span>Imported Fruits</span> <span>Organic Fruits</span> <span>Combos & Gift Packs</span> <span>About Us</span> <span>Contact Us</span> <span>Help & FAQ</span> </div> </nav> {/ Catalog /} <main className="max-w-7xl mx-auto px-4 py-6"> <h1 className="text-2xl font-bold mb-4">All Fruits</h1> <div className="grid grid-cols-2 md:grid-cols-4 gap-4"> {fruitsCatalog.map((fruit) => ( <Card key={fruit.name} className="hover:shadow-lg"> <CardContent className="p-4 text-center"> <div className="text-lg font-semibold">{fruit.name}</div> <p className="text-sm text-gray-600">{fruit.category}</p> <p className="font-bold mt-1">₹{fruit.price} / kg</p> <Button className="mt-3 w-full bg-green-600 hover:bg-green-700" onClick={() => addToCart(fruit)}>Add to Cart</Button> </CardContent> </Card> ))} </div> {/ Cart & Checkout /} <div className="mt-10 bg-white p-4 rounded shadow"> <h2 className="text-xl font-bold mb-2">Cart & Checkout</h2> {cart.length === 0 ? ( <p className="text-gray-600">Your cart is empty</p> ) : ( <div> {cart.map((item, i) => ( <div key={i} className="flex justify-between text-sm border-b py-1"> <span>{item.name}</span> <span>₹{item.price}</span> </div> ))} <Button className="mt-3 bg-yellow-400 hover:bg-yellow-500 text-black">Proceed to Checkout</Button> </div> )} </div> {/ Login Section /} {!loggedIn && ( <div className="mt-10 bg-white p-4 rounded shadow"> <h2 className="text-xl font-bold mb-2">Login / Sign Up</h2> <input className="border p-2 w-full mb-2" placeholder="Enter mobile number" /> <Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => setLoggedIn(true)}>Login with OTP</Button> </div> )} </main> {/ Footer /} <footer className="bg-gray-800 text-gray-300 mt-10"> <div className="max-w-7xl mx-auto px-4 py-6 grid md:grid-cols-3 gap-6 text-sm"> <div> <h3 className="font-semibold text-white mb-2">FreshBasket India</h3> <p>Farm-fresh fruits delivered to your doorstep across India.</p> </div> <div> <h3 className="font-semibold text-white mb-2">My Account</h3> <p>Orders</p> <p>Wishlist</p> <p>Addresses</p> </div> <div> <h3 className="font-semibold text-white mb-2">Support</h3> <p>Help & FAQ</p> <p>Contact Us</p> </div> </div> <div className="text-center text-xs border-t border-gray-700 py-3">© 2026 FreshBasket India. All rights reserved.</div> </footer> </div> ); }