Added the functionality for the subscribe form

src/components/Donation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { donationData } from '@/constants/Donation';
 import { Link } from 'react-router-dom';
 import { volunteerImages } from '@/constants/Volunteer';
@@ -11,13 +11,16 @@ import {
   bounce,
   staggerContainer,
   floatingCircle,
+  buttonAnimation,
 } from '@/styles/Animations';
 
 const Donation: React.FC = () => {
   const handleClick = () => {
     window.location.href = donationData.url;
   };
 
+  const [Email, setEmail] = useState('');
+
   return (
     <section className="relative overflow-hidden bg-white text-black py-16 px-4">
       {/* Animated background circles */}
@@ -139,19 +142,31 @@ const Donation: React.FC = () => {
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
           >
-            <input
-              className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
-              placeholder="Enter your email"
-              type="email"
-            />
-            <motion.button
-              className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              transition={{ type: 'spring', stiffness: 400, damping: 10 }}
+            <motion.form
+              action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
+              method="post"
+              onSubmit={() => setTimeout(() => setEmail(''), 500)}
             >
-              SUBSCRIBE
-            </motion.button>
+              <input
+                className="px-4 py-2 border border-gray-300 rounded-l-full focus:outline-none"
+                placeholder="Enter your email"
+                type="email"
+                name="email"
+                value={Email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+              <input value="1" type="hidden" name="embed" />
+              <motion.button
+                className="px-6 py-2 bg-red-500 text-white font-bold rounded-r-full shadow-lg hover:bg-red-600 transition duration-300"
+                variants={buttonAnimation}
+                whileHover="whileHover"
+                whileTap="whileTap"
+                type="submit"
+              >
+                SUBSCRIBE
+              </motion.button>
+            </motion.form>
           </motion.div>
         </motion.div>
       </div>

src/styles/Animations.ts

@@ -1012,3 +1012,14 @@ export const featureSectionAnimations = {
     visible: { opacity: 1, transition: { delay: 0.3, duration: 0.5 } },
   },
 };
+
+export const buttonAnimation: Variants = {
+  whileHover: {
+    scale: 1.05,
+    transition: { type: 'spring', stiffness: 400, damping: 10 },
+  },
+  whileTap: {
+    scale: 0.95,
+    transition: { type: 'spring', stiffness: 400, damping: 10 },
+  },
+};