[V0_FILE]typescriptreact:file="app/page.tsx" import Header from "./components/Header" import Hero from "./components/Hero" import Features from "./components/Features" import Map from "./components/Map" import Marketplace from "./components/Marketplace" import Rewards from "./components/Rewards" import Footer from "./components/Footer" export default function Home() { return (

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

) } [V0_FILE]typescriptreact:file="app/components/Hero.tsx" import { Button } from "@/components/ui/button" export default function Hero() { return (

Recycle E-Waste, Earn Rewards

Join our community and make a positive impact on the environment

) } [V0_FILE]typescriptreact:file="app/components/Features.tsx" import { MapPin, Recycle, Gift } from "lucide-react" export default function Features() { return (

How It Works

} title="Locate Collection Points" description="Find nearby e-waste collection points using our GPS service" /> } title="Track Your Waste" description="Monitor the journey of your e-waste and its environmental impact" /> } title="Earn Rewards" description="Get points for recycling and redeem them for eco-friendly products" />

) } function FeatureCard({ icon, title, description }) { return (

{icon}

{title}

{description}

) } [V0_FILE]typescriptreact:file="app/components/Map.tsx" "use client" import { useState } from "react" import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet" import "leaflet/dist/leaflet.css" export default function Map() { const [center] = useState({ lat: 51.505, lng: -0.09 }) const [zoom] = useState(13) return (

Find Collection Points

E-waste collection point
Open 9 AM - 5 PM

) } [V0_FILE]typescriptreact:file="app/components/Marketplace.tsx" import Image from "next/image" import { Button } from "@/components/ui/button" export default function Marketplace() { return (

Recycled Products Marketplace

) } function ProductCard({ image, title, price }) { return (

{title}

{price}

) } [V0_FILE]typescriptreact:file="app/components/Rewards.tsx" import { Star } from "lucide-react" export default function Rewards() { return (

Earn Rewards

} title="Recycle E-Waste" points="50 points" /> } title="Refer a Friend" points="100 points" /> } title="Complete Challenges" points="200 points" />

) } function RewardCard({ icon, title, points }) { return (

{icon}

{title}

{points}

) } [V0_FILE]typescriptreact:file="app/components/Footer.tsx" import { Leaf } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import type React from "react" // Import React const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "EcoCollect - E-Waste Recycling App", description: "Recycle e-waste, earn rewards, and shop for recycled products", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

About