Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-06 21:25:11 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🧹 chore(bump): update information

Browse Source
This commit is contained in:
Eshan Roy
2024-12-08 01:10:45 +05:30
parent 97011a2b47
commit fc1610811b
1 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/pages/Donors.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import { Heart, Trophy, PieChart } from 'lucide-react';
import { Heart } from 'lucide-react'; import { FaRupeeSign } from 'react-icons/fa';
export function Donors() { export function Donors() {
return ( return (
@@ -10,7 +10,7 @@ export function Donors() {
<Heart className="h-16 w-16 text-red-500 mx-auto mb-6" /> <Heart className="h-16 w-16 text-red-500 mx-auto mb-6" />
<h1 className="text-4xl font-bold mb-6">Our Amazing Donors</h1> <h1 className="text-4xl font-bold mb-6">Our Amazing Donors</h1>
<p className="text-xl text-gray-600 max-w-3xl mx-auto"> <p className="text-xl text-gray-600 max-w-3xl mx-auto">
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 donors. We are grateful for their contributions to keep our project
running. running.
</p> </p>
@@ -18,69 +18,81 @@ export function Donors() {
{/* Donation Tiers */} {/* Donation Tiers */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold mb-8 text-center">Donation Tiers</h2> <h2 className="text-3xl font-bold mb-8 text-center">
<Trophy className="inline-block h-6 w-6 text-yellow-500 mr-2" />
Donation Tiers
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<DonationTier <DonationTier
title="Platinum Donors" title="Platinum Donors"
amount="$500+" amount="₹500+"
icon={<Trophy className="h-6 w-6 text-gray-500" />}
color="bg-gradient-to-r from-gray-200 to-gray-100" color="bg-gradient-to-r from-gray-200 to-gray-100"
donors={[ donors={[
"TechCorp International", "TechCorp International",
"Global Systems Ltd", "Global Systems Ltd",
"Future Computing Inc" "Future Computing Inc",
]} ]}
/> />
<DonationTier <DonationTier
title="Gold Donors" title="Gold Donors"
amount="$100-$499" amount="₹100-₹499"
icon={<Trophy className="h-6 w-6 text-yellow-500" />}
color="bg-gradient-to-r from-yellow-100 to-yellow-50" color="bg-gradient-to-r from-yellow-100 to-yellow-50"
donors={[ donors={[
"Sarah Johnson", "Sarah Johnson",
"Michael Chang", "Michael Chang",
"DataFlow Solutions", "DataFlow Solutions",
"Robert Wilson", "Robert Wilson",
"Emma Thompson" "Emma Thompson",
]} ]}
/> />
<DonationTier <DonationTier
title="Silver Donors" title="Silver Donors"
amount="$10-$99" amount="$₹10-₹99"
icon={<Trophy className="h-6 w-6 text-gray-400" />}
color="bg-gradient-to-r from-gray-100 to-white" color="bg-gradient-to-r from-gray-100 to-white"
donors={[ donors={[
"David Miller", "Rajesh Kumar",
"Lisa Anderson", "Priya Sharma",
"James Wilson", "Aryan Patel",
"Maria Garcia", "Meena Iyer",
"John Smith", "Vikram Singh",
"And many more..." // "And many more...",
]} ]}
/> />
</div> </div>
</section> </section>
{/* Become a Donor */} {/* Become a Donor */}
<section className="bg-green-50 rounded-lg p-8 text-center"> <section className="bg-indigo-50 rounded-lg p-8 text-center">
<h2 className="text-3xl font-bold mb-4">Become a Donor</h2> <h2 className="text-3xl font-bold mb-4">
<FaRupeeSign className="inline-block h-6 w-6 text-green-500 mr-2" />
Become a Donor
</h2>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto"> <p className="text-gray-600 mb-8 max-w-2xl mx-auto">
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 big or small, makes a difference in keeping our project independent and
sustainable. sustainable.
</p> </p>
<button className="bg-green-600 text-white px-8 py-3 rounded-full hover:bg-green-700 transition-colors"> <button className="bg-indigo-600 text-white px-8 py-3 rounded-[5px] hover:bg-indigo-700 transition-colors">
Make a Donation Make a Donation
</button> </button>
</section> </section>
{/* Monthly Report */} {/* Yearly Report */}
<section className="mt-16"> <section className="mt-16">
<h2 className="text-3xl font-bold mb-8">Monthly Donation Report</h2> <h2 className="text-3xl font-bold mb-8">
<PieChart className="inline-block h-6 w-6 text-blue-500 mr-2" />
Yearly Donation Report
</h2>
<div className="bg-white rounded-lg shadow-lg p-8"> <div className="bg-white rounded-lg shadow-lg p-8">
<div className="space-y-6"> <div className="space-y-6">
<MonthlyStats <YearlyStats
month="March 2024" month="Year - 2024"
amount={15750} amount={15750}
donors={342} donors={14}
averageDonation={46} averageDonation={1125}
/> />
<div className="border-t pt-6"> <div className="border-t pt-6">
<h3 className="font-bold mb-4">How Donations Are Used</h3> <h3 className="font-bold mb-4">How Donations Are Used</h3>
@@ -89,16 +101,19 @@ export function Donors() {
percentage={40} percentage={40}
category="Development" category="Development"
description="Supporting core developers and infrastructure" description="Supporting core developers and infrastructure"
icon={<PieChart className="h-6 w-6 text-green-500" />}
/> />
<UsageCard <UsageCard
percentage={35} percentage={35}
category="Server Costs" category="Server Costs"
description="Maintaining mirrors and websites" description="Maintaining mirrors and websites"
icon={<PieChart className="h-6 w-6 text-blue-500" />}
/> />
<UsageCard <UsageCard
percentage={25} percentage={25}
category="Community" category="Community"
description="Supporting community projects and events" description="Supporting community projects and events"
icon={<PieChart className="h-6 w-6 text-indigo-500" />}
/> />
</div> </div>
</div> </div>
@@ -110,20 +125,27 @@ export function Donors() {
); );
} }
type DonationTierProps = {
title: string;
amount: string;
color: string;
icon: React.ReactNode;
donors: string[];
};
function DonationTier({ function DonationTier({
title, title,
amount, amount,
color, color,
icon,
donors, donors,
}: { }: DonationTierProps) {
title: string;
amount: string;
color: string;
donors: string[];
}) {
return ( return (
<div className={`rounded-lg shadow-lg p-6 ${color}`}> <div className={`rounded-lg shadow-lg p-6 ${color}`}>
<h3 className="text-xl font-bold mb-2">{title}</h3> <h3 className="text-xl font-bold mb-2 flex items-center gap-2">
{icon}
{title}
</h3>
<p className="text-gray-600 mb-4">{amount}</p> <p className="text-gray-600 mb-4">{amount}</p>
<ul className="space-y-2"> <ul className="space-y-2">
{donors.map((donor, index) => ( {donors.map((donor, index) => (
@@ -134,24 +156,26 @@ function DonationTier({
); );
} }
function MonthlyStats({ type YearlyStatsProps = {
month,
amount,
donors,
averageDonation,
}: {
month: string; month: string;
amount: number; amount: number;
donors: number; donors: number;
averageDonation: number; averageDonation: number;
}) { };
function YearlyStats({
month,
amount,
donors,
averageDonation,
}: YearlyStatsProps) {
return ( return (
<div> <div>
<h3 className="font-bold text-xl mb-4">{month}</h3> <h3 className="font-bold text-xl mb-4">{month}</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Total Donations</p> <p className="text-sm text-gray-600">Total Donations</p>
<p className="text-2xl font-bold">${amount.toLocaleString()}</p> <p className="text-2xl font-bold">₹{amount.toLocaleString()}</p>
</div> </div>
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Number of Donors</p> <p className="text-sm text-gray-600">Number of Donors</p>
@@ -159,27 +183,36 @@ function MonthlyStats({
</div> </div>
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600">Average Donation</p> <p className="text-sm text-gray-600">Average Donation</p>
<p className="text-2xl font-bold">${averageDonation}</p> <p className="text-2xl font-bold">₹{averageDonation}</p>
</div> </div>
</div> </div>
</div> </div>
); );
} }
type UsageCardProps = {
percentage: number;
category: string;
description: string;
icon: React.ReactNode;
};
function UsageCard({ function UsageCard({
percentage, percentage,
category, category,
description, description,
}: { icon,
percentage: number; }: UsageCardProps) {
category: string;
description: string;
}) {
return ( return (
<div className="bg-gray-50 p-4 rounded-lg"> <div className="bg-gray-50 p-4 rounded-lg">
<div className="text-2xl font-bold text-green-600 mb-2">{percentage}%</div> <div className="flex items-center mb-2">
<h4 className="font-bold mb-1">{category}</h4> {icon}
<span className="ml-2 text-xl font-semibold text-indigo-600">
{percentage}%
</span>
</div>
<h4 className="font-regular mb-1">{category}</h4>
<p className="text-sm text-gray-600">{description}</p> <p className="text-sm text-gray-600">{description}</p>
</div> </div>
); );
} }