[V0_FILE]typescriptreact:file="app/components/Header.tsx" isQuickEdit="true" import Link from "next/link" import { ShoppingCart } from "lucide-react" export default function Header() { return (

Fresh Cart Cart (0)

) } [V0_FILE]typescriptreact:file="app/components/CategorySection.tsx" isQuickEdit="true" import Link from "next/link" const categories = ["Fruits & Vegetables", "Dairy & Eggs", "Bakery", "Meat & Seafood", "Pantry"] export default function CategorySection() { return (

Categories

{categories.map((category) => ( {category} ))}

) } [V0_FILE]typescriptreact:file="app/components/LatestProducts.tsx" isQuickEdit="true" import ProductCard from "./ProductCard" const latestProducts = [ { id: 1, name: "Fresh Apples", price: 2.99, image: "/placeholder.svg?height=200&width=200" }, { id: 2, name: "Organic Milk", price: 3.49, image: "/placeholder.svg?height=200&width=200" }, { id: 3, name: "Whole Grain Bread", price: 2.79, image: "/placeholder.svg?height=200&width=200" }, { id: 4, name: "Free-Range Eggs", price: 4.99, image: "/placeholder.svg?height=200&width=200" }, { id: 5, name: "Ripe Bananas", price: 1.99, image: "/placeholder.svg?height=200&width=200" }, ] export default function LatestProducts() { return (

Latest Products

{latestProducts.map((product) => ( ))}

) } [V0_FILE]typescriptreact:file="app/components/ProductCard.tsx" isQuickEdit="true" import Image from "next/image" import { ShoppingCart, Heart } from "lucide-react" interface Product { id: number name: string price: number image: string } export default function ProductCard({ product }: { product: Product }) { return (

{product.name}

${product.price.toFixed(2)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import Header from "./components/Header" import CategorySection from "./components/CategorySection" import LatestProducts from "./components/LatestProducts" export default function Home() { return (

) }