🐛 fix: donation monthly to one time

src/components/donate/KeySponsors.tsx

@@ -13,8 +13,30 @@ const keySponsors = [
     description: 'Strategic Development Partner',
     amount: '₹54,399.36', // Example of amount, could be fetched or hardcoded
   },
+  {
+    username: 'SkullSync', // GitHub username
+    description: 'Strategic Development Partner',
+    amount: '₹12,181.36', // Example of amount, could be fetched or hardcoded
+  },
 ];
 
+// Dummy list of individual donors with GitHub usernames
+const individualDonors = [
+  {
+    username: 'd3v1l0n', // GitHub username
+    amount: '₹4,183.00', // Example of donation amount
+  },
+  {
+    username: 'myself-meghna', // GitHub username
+    amount: '₹8,554', // Example of donation amount
+  },
+  {
+    username: 'lawrencecracker', // GitHub username
+    amount: '₹3,220', // Example of donation amount
+  },
+];
+
+// Fetch GitHub user data
 async function fetchGitHubUser(username: string) {
   const response = await fetch(`https://api.github.com/users/${username}`);
   const data = await response.json();
@@ -23,58 +45,113 @@ async function fetchGitHubUser(username: string) {
 
 export function KeySponsors() {
   const [sponsorsData, setSponsorsData] = useState<any[]>([]);
+  const [donorsData, setDonorsData] = useState<any[]>([]);
 
+  // Fetch sponsor and donor data from GitHub
   useEffect(() => {
-    const fetchSponsorsData = async () => {
+    const fetchSponsorsAndDonorsData = async () => {
+      // Fetching data for sponsors
       const sponsorsWithData = await Promise.all(
         keySponsors.map(async (sponsor) => {
           const user = await fetchGitHubUser(sponsor.username);
           return {
             ...sponsor,
-            name: user.name || sponsor.username, // Use GitHub name or fallback to username
+            name: user.name || sponsor.username,
-            avatar_url: user.avatar_url, // Fetch the GitHub profile picture
+            avatar_url: user.avatar_url, // Fetch GitHub profile picture
           };
         })
       );
       setSponsorsData(sponsorsWithData);
+
+      // Fetching data for donors
+      const donorsWithData = await Promise.all(
+        individualDonors.map(async (donor) => {
+          const user = await fetchGitHubUser(donor.username);
+          return {
+            ...donor,
+            name: user.name || donor.username,
+            avatar_url: user.avatar_url, // Fetch GitHub profile picture
+          };
+        })
+      );
+      setDonorsData(donorsWithData);
     };
 
-    fetchSponsorsData();
+    fetchSponsorsAndDonorsData();
   }, []);
 
   return (
-    <div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8">
+    <div className="space-y-16">
-      <h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
+      {/* Key Sponsors Section */}
-        Key Sponsors
+      <div className="bg-gradient-to-r from-cornflower-blue/5 to-blue-50/50 rounded-2xl p-8">
-      </h2>
+        <h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          Key Sponsors
-        {sponsorsData.map((sponsor, index) => (
+        </h2>
-          <motion.div
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            key={sponsor.username}
+          {sponsorsData.map((sponsor, index) => (
-            initial={{ opacity: 0, y: 20 }}
+            <motion.div
-            whileInView={{ opacity: 1, y: 0 }}
+              key={sponsor.username}
-            transition={{ delay: index * 0.1 }}
+              initial={{ opacity: 0, y: 20 }}
-            className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-cornflower-blue/20 shadow-xl hover:shadow-2xl transition-shadow"
+              whileInView={{ opacity: 1, y: 0 }}
-          >
+              transition={{ delay: index * 0.1 }}
-            <div className="flex items-center gap-6">
+              className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-cornflower-blue/20 shadow-xl hover:shadow-2xl transition-shadow"
-              <div className="p-4 bg-cornflower-blue/10 rounded-lg shadow-sm">
+            >
-                {/* Displaying the profile picture */}
+              <div className="flex items-center gap-6">
-                <img 
+                <div className="p-4 bg-cornflower-blue/10 rounded-lg shadow-sm">
-                  src={sponsor.avatar_url} 
+                  {/* Displaying the profile picture */}
-                  alt={sponsor.name} 
+                  <img 
-                  className="h-10 w-10 rounded-full object-cover" 
+                    src={sponsor.avatar_url} 
-                />
+                    alt={sponsor.name} 
+                    className="h-10 w-10 rounded-full object-cover" 
+                  />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-gray-900">{sponsor.name}</h3>
+                  <p className="text-sm text-gray-600">{sponsor.description}</p>
+                  <p className="text-lg text-gray-800 mt-3 font-semibold">
+                    Amount: <span className="text-green-600">{sponsor.amount}</span>
+                  </p>
+                </div>
               </div>
-              <div>
+            </motion.div>
-                <h3 className="text-xl font-semibold text-gray-900">{sponsor.name}</h3>
+          ))}
-                <p className="text-sm text-gray-600">{sponsor.description}</p>
+        </div>
-                <p className="text-lg text-gray-800 mt-3 font-semibold">
+      </div>
-                  Amount: <span className="text-green-600">{sponsor.amount}</span>
+
-                </p>
+      {/* Individual Donors Section */}
+      <div className="bg-gradient-to-r from-indigo-100/10 to-blue-50/50 rounded-2xl p-8">
+        <h2 className="text-3xl font-semibold text-gray-900 text-center mb-8">
+          Individual Donors
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {donorsData.map((donor, index) => (
+            <motion.div
+              key={donor.username}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className="bg-white/90 backdrop-blur-sm rounded-xl p-6 border border-indigo-200/50 shadow-md hover:shadow-lg transition-shadow"
+            >
+              <div className="flex items-center gap-6">
+                <div className="p-4 bg-indigo-200/10 rounded-lg shadow-sm">
+                  {/* Displaying the profile picture */}
+                  <img 
+                    src={donor.avatar_url} 
+                    alt={donor.name} 
+                    className="h-10 w-10 rounded-full object-cover" 
+                  />
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-gray-900">{donor.name}</h3>
+                  <p className="text-sm text-gray-600">Generous Individual Donor</p>
+                  <p className="text-lg text-gray-800 mt-3 font-semibold">
+                    Amount: <span className="text-green-600">{donor.amount}</span>
+                  </p>
+                </div>
               </div>
-            </div>
+            </motion.div>
-          </motion.div>
+          ))}
-        ))}
+        </div>
       </div>
     </div>
   );

src/components/donate/SponsorshipStats.tsx

@@ -1,23 +1,23 @@
 import { motion } from 'framer-motion';
 import { Users, Star, Heart } from 'lucide-react';
-import { formatINR } from '@/lib/currency';
+import { formatINR } from '../../lib/currency';
 
 const stats = [
   {
-    label: 'Current Sponsors',
+    label: 'Total Sponsors',
-    value: '50+',
+    value: '6+',
     icon: Users,
     color: 'text-blue-500'
   },
   {
-    label: 'Monthly Support',
+    label: 'Total Support',
-    value: formatINR(200000),
+    value: formatINR(164563.08),
     icon: Heart,
     color: 'text-red-500'
   },
   {
     label: 'GitHub Stars',
-    value: '1.2K+',
+    value: '200+',
     icon: Star,
     color: 'text-yellow-500'
   }

src/components/donate/SponsorshipTiers.tsx

@@ -1,11 +1,14 @@
 import { motion } from 'framer-motion';
 import { Check } from 'lucide-react';
-import { formatINR } from '@/lib/currency';
+import { formatINR } from '../../lib/currency';
+
+// Hardcoded conversion rate (you can replace this with dynamic data)
+const INR_TO_USD_CONVERSION_RATE = 0.012;
 
 const tiers = [
   {
     name: 'Community Hero',
-    amount: 399,
+    amount: 999,
     description: 'Support the ongoing development of Snigdha OS',
     benefits: [
       'Special recognition on our GitHub repository',
@@ -15,7 +18,7 @@ const tiers = [
   },
   {
     name: 'Security Champion',
-    amount: 799,
+    amount: 2999,
     description: 'Help shape the future of security testing',
     benefits: [
       'All Community Hero benefits',
@@ -27,7 +30,7 @@ const tiers = [
   },
   {
     name: 'Enterprise Partner',
-    amount: 1999,
+    amount: 5999,
     description: 'Perfect for organizations using Snigdha OS',
     benefits: [
       'All Security Champion benefits',
@@ -39,6 +42,11 @@ const tiers = [
   }
 ];
 
+// Function to convert INR to USD
+const convertINRToUSD = (inrAmount: number) => {
+  return (inrAmount * INR_TO_USD_CONVERSION_RATE).toFixed(2); // Convert INR to USD with 2 decimal places
+};
+
 export function SponsorshipTiers() {
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -65,7 +73,9 @@ export function SponsorshipTiers() {
             <h3 className="text-xl font-semibold text-gray-900">{tier.name}</h3>
             <div className="mt-2">
               <span className="text-3xl font-bold text-gray-900">{formatINR(tier.amount)}</span>
-              <span className="text-gray-600">/month</span>
+              <span className="text-gray-600"> / ₹</span>
+              <span className="text-3xl font-bold text-gray-900 ml-2">${convertINRToUSD(tier.amount)}</span>
+              <span className="text-gray-600"> / USD</span>
             </div>
             <p className="mt-2 text-gray-600">{tier.description}</p>
           </div>
@@ -80,7 +90,7 @@ export function SponsorshipTiers() {
           </ul>
 
           <a
-            href={`https://github.com/sponsors/eshanized?frequency=monthly&sponsor=${encodeURIComponent(tier.name)}`}
+            href={`https://github.com/sponsors/eshanized?frequency=one-time&amount=${convertINRToUSD(tier.amount)}`}
             target="_blank"
             rel="noopener noreferrer"
             className={`block w-full text-center py-2 px-4 rounded-lg transition-colors ${
@@ -89,7 +99,7 @@ export function SponsorshipTiers() {
                 : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
             }`}
           >
-            Become a {tier.name}
+            Make a One-Time Donation
           </a>
         </motion.div>
       ))}