diff --git a/src/pages/Donors.tsx b/src/pages/Donors.tsx index 806dba4..ceb2601 100644 --- a/src/pages/Donors.tsx +++ b/src/pages/Donors.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { Heart } from 'lucide-react'; +import { Heart, Trophy, PieChart } from 'lucide-react'; +import { FaRupeeSign } from 'react-icons/fa'; export function Donors() { return ( @@ -10,7 +10,7 @@ export function Donors() {

Our Amazing Donors

- Linux Mint is made possible thanks to the generous support of our + Snigdha OS is made possible thanks to the generous support of our donors. We are grateful for their contributions to keep our project running.

@@ -18,69 +18,81 @@ export function Donors() { {/* Donation Tiers */}
-

Donation Tiers

+

+ + Donation Tiers +

} color="bg-gradient-to-r from-gray-200 to-gray-100" donors={[ "TechCorp International", "Global Systems Ltd", - "Future Computing Inc" + "Future Computing Inc", ]} /> } color="bg-gradient-to-r from-yellow-100 to-yellow-50" donors={[ "Sarah Johnson", "Michael Chang", "DataFlow Solutions", "Robert Wilson", - "Emma Thompson" + "Emma Thompson", ]} /> } color="bg-gradient-to-r from-gray-100 to-white" donors={[ - "David Miller", - "Lisa Anderson", - "James Wilson", - "Maria Garcia", - "John Smith", - "And many more..." + "Rajesh Kumar", +"Priya Sharma", +"Aryan Patel", +"Meena Iyer", +"Vikram Singh", + // "And many more...", ]} />
{/* Become a Donor */} -
-

Become a Donor

+
+

+ + Become a Donor +

- Your support helps us maintain and improve Linux Mint. Every donation, + Your support helps us maintain and improve Snigdha OS. Every donation, big or small, makes a difference in keeping our project independent and sustainable.

-
- {/* Monthly Report */} + {/* Yearly Report */}
-

Monthly Donation Report

+

+ + Yearly Donation Report +

-

How Donations Are Used

@@ -89,16 +101,19 @@ export function Donors() { percentage={40} category="Development" description="Supporting core developers and infrastructure" + icon={} /> } /> } />
@@ -110,20 +125,27 @@ export function Donors() { ); } +type DonationTierProps = { + title: string; + amount: string; + color: string; + icon: React.ReactNode; + donors: string[]; +}; + function DonationTier({ title, amount, color, + icon, donors, -}: { - title: string; - amount: string; - color: string; - donors: string[]; -}) { +}: DonationTierProps) { return (
-

{title}

+

+ {icon} + {title} +

{amount}

    {donors.map((donor, index) => ( @@ -134,24 +156,26 @@ function DonationTier({ ); } -function MonthlyStats({ - month, - amount, - donors, - averageDonation, -}: { +type YearlyStatsProps = { month: string; amount: number; donors: number; averageDonation: number; -}) { +}; + +function YearlyStats({ + month, + amount, + donors, + averageDonation, +}: YearlyStatsProps) { return (

    {month}

    Total Donations

    -

    ${amount.toLocaleString()}

    +

    ₹{amount.toLocaleString()}

    Number of Donors

    @@ -159,27 +183,36 @@ function MonthlyStats({

    Average Donation

    -

    ${averageDonation}

    +

    ₹{averageDonation}

    ); } +type UsageCardProps = { + percentage: number; + category: string; + description: string; + icon: React.ReactNode; +}; + function UsageCard({ percentage, category, description, -}: { - percentage: number; - category: string; - description: string; -}) { + icon, +}: UsageCardProps) { return (
    -
    {percentage}%
    -

    {category}

    +
    + {icon} + + {percentage}% + +
    +

    {category}

    {description}

    ); -} \ No newline at end of file +}