[V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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))", }, teal: { 500: "#38B2AC", 700: "#2C7A7B", }, yellow: { 400: "#F6E05E", 500: "#ECC94B", }, }, 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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/progress.tsx" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" interface ProgressProps extends React.ComponentPropsWithoutRef { indicatorClassName?: string } const Progress = React.forwardRef, ProgressProps>( ({ className, value, indicatorClassName, ...props }, ref) => ( ), ) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/navbar.tsx" isFixed="true" isQuickEdit="true" export function Navbar() { return null } [V0_FILE]typescriptreact:file="components/income-calculator-dialog.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "@/components/ui/select" import { DollarSign, Info, CheckCircle, Users } from "lucide-react" // Sample country data with cost of living adjustments const countries = [ { name: "Switzerland", adjustment: 2000 }, { name: "Norway", adjustment: 1800 }, { name: "Japan", adjustment: 1500 }, { name: "United States", adjustment: 1200 }, { name: "Canada", adjustment: 1100 }, { name: "United Kingdom", adjustment: 1000 }, { name: "Germany", adjustment: 900 }, { name: "France", adjustment: 850 }, { name: "Australia", adjustment: 1100 }, { name: "Italy", adjustment: 700 }, { name: "Spain", adjustment: 600 }, { name: "South Korea", adjustment: 800 }, { name: "Brazil", adjustment: 400 }, { name: "Mexico", adjustment: 350 }, { name: "India", adjustment: 250 }, { name: "Nigeria", adjustment: 200 }, { name: "Egypt", adjustment: 250 }, { name: "Thailand", adjustment: 300 }, { name: "Vietnam", adjustment: 250 }, { name: "Congo", adjustment: 100 }, ].sort((a, b) => a.name.localeCompare(b.name)) export function IncomeCalculatorDialog() { const [selectedCountry, setSelectedCountry] = useState("") const [countryAdjustment, setCountryAdjustment] = useState(0) const [totalAmount, setTotalAmount] = useState(1000) const baseAmount = 1000 const maxDuration = 5 // months useEffect(() => { const country = countries.find((c) => c.name === selectedCountry) const adjustment = country ? country.adjustment : 0 setCountryAdjustment(adjustment) setTotalAmount(baseAmount + adjustment) }, [selectedCountry]) return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { DeveloperList } from "@/components/developer-list" import { FundStats } from "@/components/fund-stats" import { HeroSection } from "@/components/hero-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/rules-dialog.tsx" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { AlertCircle, FileCode, GitPullRequest, MessageSquare, CheckCircle, Info } from "lucide-react" import { IncomeCalculatorDialog } from "@/components/income-calculator-dialog" interface RulesDialogProps { children?: React.ReactNode } export function RulesDialog({ children }: RulesDialogProps) { return (

{!children && }

) } [V0_FILE]typescriptreact:file="data/developers.ts" // Developer data types export interface Developer { id: number name: string avatar: string status: "qualified" | "nearly-there" | "on-the-way" isCurrentlySupported: boolean majorIssues: number minorIssues: number prsReviewed: number specialization: string joinedDate: string totalCommits: number } // Thresholds for qualification export const thresholds = { majorIssues: 6, minorIssues: 6, prsReviewed: 6, } // Status label mapping export const statusLabels = { qualified: "Qualified", "nearly-there": "Nearly There", "on-the-way": "On the Way", } // Developer data export const developers: Developer[] = [ { id: 1, name: "Alex Johnson", avatar: "https://avatars.githubusercontent.com/u/12345678", status: "qualified", isCurrentlySupported: true, majorIssues: 12, minorIssues: 9, prsReviewed: 15, specialization: "Frontend", joinedDate: "Mar 15, 2022", totalCommits: 87, }, { id: 2, name: "Sam Rivera", avatar: "https://avatars.githubusercontent.com/u/23456789", status: "qualified", isCurrentlySupported: true, majorIssues: 10, minorIssues: 14, prsReviewed: 8, specialization: "Backend", joinedDate: "Jan 7, 2021", totalCommits: 123, }, { id: 3, name: "Taylor Kim", avatar: "https://avatars.githubusercontent.com/u/34567890", status: "qualified", isCurrentlySupported: false, majorIssues: 8, minorIssues: 7, prsReviewed: 9, specialization: "Full Stack", joinedDate: "Nov 22, 2022", totalCommits: 76, }, { id: 4, name: "Jordan Lee", avatar: "https://avatars.githubusercontent.com/u/45678901", status: "qualified", isCurrentlySupported: false, majorIssues: 7, minorIssues: 8, prsReviewed: 6, specialization: "DevOps", joinedDate: "Feb 3, 2023", totalCommits: 92, }, { id: 5, name: "Casey Morgan", avatar: "https://avatars.githubusercontent.com/u/56789012", status: "nearly-there", isCurrentlySupported: false, majorIssues: 5, minorIssues: 6, prsReviewed: 5, specialization: "Security", joinedDate: "Apr 19, 2023", totalCommits: 58, }, { id: 6, name: "Riley Patel", avatar: "https://avatars.githubusercontent.com/u/67890123", status: "nearly-there", isCurrentlySupported: false, majorIssues: 4, minorIssues: 7, prsReviewed: 4, specialization: "UI/UX", joinedDate: "Jun 5, 2023", totalCommits: 45, }, { id: 7, name: "Quinn Smith", avatar: "https://avatars.githubusercontent.com/u/78901234", status: "on-the-way", isCurrentlySupported: false, majorIssues: 3, minorIssues: 4, prsReviewed: 2, specialization: "Mobile", joinedDate: "Aug 11, 2023", totalCommits: 34, }, { id: 8, name: "Avery Williams", avatar: "https://avatars.githubusercontent.com/u/89012345", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 3, prsReviewed: 3, specialization: "Accessibility", joinedDate: "Oct 27, 2023", totalCommits: 39, }, { id: 9, name: "Morgan Chen", avatar: "https://avatars.githubusercontent.com/u/90123456", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 4, prsReviewed: 1, specialization: "Data Science", joinedDate: "Nov 15, 2023", totalCommits: 28, }, { id: 10, name: "Jamie Rodriguez", avatar: "https://avatars.githubusercontent.com/u/91234567", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 5, prsReviewed: 2, specialization: "Backend", joinedDate: "Dec 3, 2023", totalCommits: 31, }, { id: 11, name: "Dakota Singh", avatar: "https://avatars.githubusercontent.com/u/92345678", status: "on-the-way", isCurrentlySupported: false, majorIssues: 3, minorIssues: 2, prsReviewed: 1, specialization: "Frontend", joinedDate: "Dec 18, 2023", totalCommits: 25, }, { id: 12, name: "Skyler Patel", avatar: "https://avatars.githubusercontent.com/u/93456789", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 3, prsReviewed: 2, specialization: "DevOps", joinedDate: "Jan 7, 2024", totalCommits: 22, }, { id: 13, name: "Reese Thompson", avatar: "https://avatars.githubusercontent.com/u/94567890", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 4, prsReviewed: 2, specialization: "Security", joinedDate: "Jan 22, 2024", totalCommits: 19, }, { id: 14, name: "Finley Nguyen", avatar: "https://avatars.githubusercontent.com/u/95678901", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 2, prsReviewed: 3, specialization: "Full Stack", joinedDate: "Feb 5, 2024", totalCommits: 27, }, { id: 15, name: "Emerson Gupta", avatar: "https://avatars.githubusercontent.com/u/96789012", status: "on-the-way", isCurrentlySupported: false, majorIssues: 3, minorIssues: 1, prsReviewed: 2, specialization: "Mobile", joinedDate: "Feb 19, 2024", totalCommits: 24, }, { id: 16, name: "Hayden Kim", avatar: "https://avatars.githubusercontent.com/u/97890123", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 3, prsReviewed: 1, specialization: "UI/UX", joinedDate: "Mar 4, 2024", totalCommits: 18, }, { id: 17, name: "Parker Sharma", avatar: "https://avatars.githubusercontent.com/u/98901234", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 3, prsReviewed: 2, specialization: "Backend", joinedDate: "Mar 18, 2024", totalCommits: 21, }, { id: 18, name: "Rowan Martinez", avatar: "https://avatars.githubusercontent.com/u/99012345", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 2, prsReviewed: 2, specialization: "Frontend", joinedDate: "Apr 1, 2024", totalCommits: 16, }, { id: 19, name: "Ellis Wilson", avatar: "https://avatars.githubusercontent.com/u/10123456", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 4, prsReviewed: 1, specialization: "DevOps", joinedDate: "Apr 15, 2024", totalCommits: 14, }, { id: 20, name: "Sage Anderson", avatar: "https://avatars.githubusercontent.com/u/10234567", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 1, prsReviewed: 3, specialization: "Accessibility", joinedDate: "Apr 29, 2024", totalCommits: 19, }, { id: 21, name: "Kai Johnson", avatar: "https://avatars.githubusercontent.com/u/10345678", status: "on-the-way", isCurrentlySupported: false, majorIssues: 3, minorIssues: 2, prsReviewed: 0, specialization: "Data Science", joinedDate: "May 13, 2024", totalCommits: 17, }, { id: 22, name: "Ari Garcia", avatar: "https://avatars.githubusercontent.com/u/10456789", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 3, prsReviewed: 2, specialization: "Security", joinedDate: "May 27, 2024", totalCommits: 15, }, { id: 23, name: "Blake Taylor", avatar: "https://avatars.githubusercontent.com/u/10567890", status: "on-the-way", isCurrentlySupported: false, majorIssues: 2, minorIssues: 2, prsReviewed: 1, specialization: "Full Stack", joinedDate: "Jun 10, 2024", totalCommits: 13, }, { id: 24, name: "Drew Patel", avatar: "https://avatars.githubusercontent.com/u/10678901", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 2, prsReviewed: 2, specialization: "Mobile", joinedDate: "Jun 24, 2024", totalCommits: 11, }, { id: 25, name: "Cameron Lee", avatar: "https://avatars.githubusercontent.com/u/10789012", status: "on-the-way", isCurrentlySupported: false, majorIssues: 0, minorIssues: 4, prsReviewed: 1, specialization: "UI/UX", joinedDate: "Jul 8, 2024", totalCommits: 9, }, { id: 26, name: "Jordan Wright", avatar: "https://avatars.githubusercontent.com/u/10890123", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 1, prsReviewed: 2, specialization: "Backend", joinedDate: "Jul 22, 2024", totalCommits: 8, }, { id: 27, name: "Avery Chen", avatar: "https://avatars.githubusercontent.com/u/10901234", status: "on-the-way", isCurrentlySupported: false, majorIssues: 0, minorIssues: 3, prsReviewed: 1, specialization: "Frontend", joinedDate: "Aug 5, 2024", totalCommits: 7, }, { id: 28, name: "Riley Nguyen", avatar: "https://avatars.githubusercontent.com/u/11012345", status: "on-the-way", isCurrentlySupported: false, majorIssues: 1, minorIssues: 2, prsReviewed: 0, specialization: "DevOps", joinedDate: "Aug 19, 2024", totalCommits: 5, }, ] // Helper functions export const getTotalDevelopers = () => developers.length export const getQualifiedDevelopers = () => developers.filter((dev) => dev.status === "qualified").length [V0_FILE]typescriptreact:file="components/developer-list.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Check, Search, GitCommit, Clock, ArrowRight } from "lucide-react" import { Input } from "@/components/ui/input" import { developers, thresholds, statusLabels, type Developer } from "@/data/developers" export function DeveloperList() { const [activeTab, setActiveTab] = useState("all") const [searchQuery, setSearchQuery] = useState("") const [filteredDevelopers, setFilteredDevelopers] = useState(developers) // Filter developers based on search query and active tab useEffect(() => { let filtered = developers // Filter by status tab if (activeTab !== "all") { filtered = filtered.filter((dev) => dev.status === activeTab) } // Filter by search query if (searchQuery) { const query = searchQuery.toLowerCase() filtered = filtered.filter( (dev) => dev.name.toLowerCase().includes(query) || dev.specialization.toLowerCase().includes(query), ) } setFilteredDevelopers(filtered) }, [activeTab, searchQuery]) return (

Contributor Progress Tracker Track progress of developers against qualification criteria. Currently supported developers are called Open Source Fellows.

All Developers Qualified Nearly There On the Way

setSearchQuery(e.target.value)} />

Developer

Status

Major Issues

Min {thresholds.majorIssues}

Minor Issues

Min {thresholds.minorIssues}

PR Reviews

Min {thresholds.prsReviewed}

{filteredDevelopers.length > 0 ? ( filteredDevelopers.map((developer) => ( )) ) : (

No developers match your search criteria

)}

) } interface DeveloperListItemProps { developer: Developer statusLabel: string } function DeveloperListItem({ developer, statusLabel }: DeveloperListItemProps) { // Status icon based on developer status const getStatusIcon = () => { switch (developer.status) { case "qualified": return (

) case "nearly-there": return (

) case "on-the-way": return (

) default: return (

) } } return (

{developer.name.charAt(0)}

{developer.name}

{developer.isCurrentlySupported && ( Open Source Fellow )}

Total commits: {developer.totalCommits}

{getStatusIcon()} {statusLabel}

) } interface QualificationProgressProps { value: number threshold: number } function QualificationProgress({ value, threshold }: QualificationProgressProps) { const isComplete = value >= threshold const percentage = Math.min(Math.round((value / threshold) * 100), 100) return (

{/* Circular progress indicator */}

{/* Value in center */}

{value}

{isComplete ? `Requirement met (minimum ${threshold})` : `${threshold - value} more contributions needed`}

) } [V0_FILE]typescriptreact:file="components/fund-stats.tsx" import type React from "react" import { Card, CardContent } from "@/components/ui/card" import { Users, DollarSign, TrendingUp } from "lucide-react" import { getTotalDevelopers, getQualifiedDevelopers } from "@/data/developers" export function FundStats() { return (

} iconBg="bg-teal-500" title="Eligible Contributors" value={getQualifiedDevelopers().toString()} description="Developers who meet qualification criteria" footer={`From totally ${getTotalDevelopers()} contributors`} /> } iconBg="bg-yellow-500" title="Funds Balance" value="$40K" description="Available for distribution" footer="Finances by XY Foundation" /> } iconBg="bg-green-500" title="Growth in Contributions" value="32.8%" description="Year to date compared to last year" footer="Increasing steadily" />

) } interface StatCardProps { icon: React.ReactNode iconBg: string title: string value: string description: string footer?: React.ReactNode | string } function StatCard({ icon, iconBg, title, value, description, footer }: StatCardProps) { return (

{/* Header with icon */}

{icon}

{title}

{/* Main content with large number */}

{value}

{description}

{/* Footer */} {footer && (

{typeof footer === "string" ? footer : footer}

)}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isQuickEdit="true" import { RulesDialog } from "@/components/rules-dialog" export function HeroSection() { return (

Supporting Open Source with the Commit & Care Fund

Developers who regularly contribute to Social Income — solving key issues and reviewing others' work — can unlock a safety net. If you ever lose your day job or need a break from it, we're here — with a basic income to help you keep going.

) }

Basic Income Components

Your Support Amount

6 major issues solved

Current Open Major Issues

6 minor issues solved

Current Open Minor Issues

6 PRs reviewed

PRs Needing Review

{developer.name}

{title}

Supporting Open Source with the Commit & Care Fund