[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type { Metadata } from "next" import { Geist, Azeret_Mono as Geist_Mono } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Navigation } from "@/components/navigation" const geistSans = Geist({ subsets: ["latin"], variable: "--font-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: "Crowdfunding Central", description: "Support our community projects", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ProjectCard } from "@/components/project-card" import { CategoryFilter } from "@/components/category-filter" import { Button } from "@/components/ui/button" import projectsData from "@/data/projects.json" import { StartProjectOverlay } from "@/components/start-project-overlay" const categories = Array.from(new Set(projectsData.map((project) => project.category))) export default function Home() { const [selectedCategory, setSelectedCategory] = useState("All") const [isStartProjectOpen, setIsStartProjectOpen] = useState(false) const filteredProjects = selectedCategory === "All" ? projectsData : projectsData.filter((project) => project.category === selectedCategory) return (

Support Our Community

Discover and fund amazing projects that make a difference in our global community.

{filteredProjects.map((project) => ( ))}

setIsStartProjectOpen(false)} />

) } [V0_FILE]typescriptreact:file="components/project-card.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { BookOpen, Leaf, Cpu, Palette, Heart, Users, LayoutGrid } from "lucide-react" const categoryIcons = { All: LayoutGrid, Education: BookOpen, Environment: Leaf, Technology: Cpu, "Arts & Culture": Palette, Wellness: Heart, Community: Users, } const categoryColors = { All: "text-blue-400", Education: "text-purple-400", Environment: "text-green-400", Technology: "text-cyan-400", "Arts & Culture": "text-pink-400", Wellness: "text-red-400", Community: "text-yellow-400", } interface Project { id: number title: string description: string goal: number raised: number daysLeft: number category: string } export function ProjectCard({ project }: { project: Project }) { const progress = (project.raised / project.goal) * 100 const Icon = categoryIcons[project.category as keyof typeof categoryIcons] return (

{project.title}

{project.category}

{project.description}

${project.raised.toLocaleString()} raised ${project.goal.toLocaleString()} goal

{project.daysLeft} days left ) } [V0_FILE]typescriptreact:file="app/projects/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { notFound } from "next/navigation" import Image from "next/image" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BookOpen, Leaf, Cpu, Palette, Heart, Users, LayoutGrid } from "lucide-react" import { DonationOverlay } from "@/components/donation-overlay" import projectsData from "@/data/projects.json" const categoryIcons = { All: LayoutGrid, Education: BookOpen, Environment: Leaf, Technology: Cpu, "Arts & Culture": Palette, Wellness: Heart, Community: Users, } const categoryColors = { All: "text-blue-400", Education: "text-purple-400", Environment: "text-green-400", Technology: "text-cyan-400", "Arts & Culture": "text-pink-400", Wellness: "text-red-400", Community: "text-yellow-400", } export default function ProjectPage({ params }: { params: { id: string } }) { const [isDonationOverlayOpen, setIsDonationOverlayOpen] = useState(false) const project = projectsData.find((p) => p.id === Number.parseInt(params.id)) if (!project) { notFound() } const progress = (project.raised / project.goal) * 100 const Icon = categoryIcons[project.category as keyof typeof categoryIcons] return (

{project.title}

{project.category}

{project.description}

${project.raised.toLocaleString()} raised ${project.goal.toLocaleString()} goal

{project.daysLeft} days left to fund this project

About This Project

{project.description}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

setIsDonationOverlayOpen(false)} projectTitle={project.title} />

) } [V0_FILE]javascript:file="tailwind.config.js" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], } [V0_FILE]typescriptreact:file="components/logo.tsx" isMerged="true" export function Logo() { return ( ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X, Users } from "lucide-react" import { StartProjectOverlay } from "@/components/start-project-overlay" export function Navigation() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isStartProjectOpen, setIsStartProjectOpen] = useState(false) const toggleMenu = () => setIsMenuOpen(!isMenuOpen) return (

Crowdfunding Central

{isMenuOpen && (

)}

setIsStartProjectOpen(false)} />

) } [V0_FILE]typescriptreact:file="components/ui/sheet.tsx" isMerged="true" "use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Sheet = SheetPrimitive.Root const SheetTrigger = SheetPrimitive.Trigger const SheetClose = SheetPrimitive.Close const SheetPortal = SheetPrimitive.Portal const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, }, ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef, SheetContentProps>( ({ side = "right", className, children, ...props }, ref) => ( {children} Close ), ) SheetContent.displayName = SheetPrimitive.Content.displayName const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } [V0_FILE]typescriptreact:file="components/category-filter.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { BookOpen, Leaf, Cpu, Palette, Heart, Users, LayoutGrid } from "lucide-react" const categoryIcons = { All: LayoutGrid, Education: BookOpen, Environment: Leaf, Technology: Cpu, "Arts & Culture": Palette, Wellness: Heart, Community: Users, } const categoryColors = { All: "text-blue-400", Education: "text-purple-400", Environment: "text-green-400", Technology: "text-cyan-400", "Arts & Culture": "text-pink-400", Wellness: "text-red-400", Community: "text-yellow-400", } interface CategoryFilterProps { categories: string[] selectedCategory: string onCategoryChange: (category: string) => void } export function CategoryFilter({ categories, selectedCategory, onCategoryChange }: CategoryFilterProps) { return (

{["All", ...categories].map((category, index) => { const Icon = categoryIcons[category as keyof typeof categoryIcons] return ( ) })}

) } [V0_FILE]json:file="data/projects.json" isEdit="true" isMerged="true" [ { "id": 1, "title": "Community Learning Platform", "description": "An online platform for sharing knowledge and skills within our community.", "goal": 10000, "raised": 7500, "daysLeft": 15, "category": "Education", "imageUrl": "https://picsum.photos/seed/project1/800/400" }, { "id": 2, "title": "Local Mentorship Program", "description": "Connecting experienced professionals with aspiring individuals in our community.", "goal": 5000, "raised": 3200, "daysLeft": 20, "category": "Community", "imageUrl": "https://picsum.photos/seed/project2/800/400" }, { "id": 3, "title": "Tech Workshop Series", "description": "A series of hands-on workshops to teach practical tech skills to community members.", "goal": 8000, "raised": 6000, "daysLeft": 10, "category": "Technology", "imageUrl": "https://picsum.photos/seed/project3/800/400" }, { "id": 4, "title": "Urban Garden Initiative", "description": "Creating green spaces and promoting sustainable living in urban areas.", "goal": 15000, "raised": 9000, "daysLeft": 25, "category": "Environment", "imageUrl": "https://picsum.photos/seed/project4/800/400" }, { "id": 5, "title": "Community Art Project", "description": "Bringing together local artists to create public art installations.", "goal": 12000, "raised": 4500, "daysLeft": 30, "category": "Arts & Culture", "imageUrl": "https://picsum.photos/seed/project5/800/400" }, { "id": 6, "title": "Mental Health Awareness", "description": "Raising awareness and providing resources for mental health support in our community.", "goal": 7000, "raised": 3500, "daysLeft": 18, "category": "Wellness", "imageUrl": "https://picsum.photos/seed/project6/800/400" } ] [V0_FILE]typescriptreact:file="components/donation-overlay.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import confetti from "canvas-confetti" interface DonationOverlayProps { isOpen: boolean onClose: () => void projectTitle: string } export function DonationOverlay({ isOpen, onClose, projectTitle }: DonationOverlayProps) { const [step, setStep] = useState(1) const [amount, setAmount] = useState("") const [isAnonymous, setIsAnonymous] = useState(true) const [name, setName] = useState("") const [paymentMethod, setPaymentMethod] = useState<"check" | "credit" | null>(null) const handleNextStep = () => { if (step < 3) setStep(step + 1) } const handlePreviousStep = () => { if (step > 1) setStep(step - 1) } const handleSubmit = () => { // Here you would handle the actual donation submission console.log("Donation submitted:", { amount, isAnonymous, name, paymentMethod }) confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/start-project-overlay.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import confetti from "canvas-confetti" interface StartProjectOverlayProps { isOpen: boolean onClose: () => void } const categories = ["Education", "Community", "Technology", "Environment", "Arts & Culture", "Wellness"] export function StartProjectOverlay({ isOpen, onClose }: StartProjectOverlayProps) { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [amount, setAmount] = useState("") const [category, setCategory] = useState("") const handleSubmit = () => { // Here you would handle the actual project submission console.log("Project submitted:", { title, description, amount, category }) // Trigger confetti effect confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) // Reset form and close overlay setTitle("") setDescription("") setAmount("") setCategory("") onClose() } return (