Cleaner Donation Section

Author: FirePheonix

public/assets/Images/DonateToSugarLabs.png

@@ -1,77 +1,80 @@
 import React, { useState } from 'react';
-import { donationData } from '@/constants/Donation';
 import { Link } from 'react-router-dom';
-import { volunteerImages } from '@/constants/Volunteer';
 import { motion } from 'framer-motion';
+import { donationData } from '@/constants/Donation';
+import { volunteerImages } from '@/constants/Volunteer';
 import {
   fadeIn,
   slideInLeft,
   slideInRight,
   slideInBottom,
   bounce,
   staggerContainer,
-  floatingCircle,
   buttonAnimation,
 } from '@/styles/Animations';
 
 const Donation: React.FC = () => {
-  const handleClick = () => {
-    window.location.href = donationData.url;
-  };
+  const [email, setEmail] = useState('');
 
-  const [Email, setEmail] = useState('');
+  const handleDonateClick = () => {
+    window.open(donationData.url, '_blank');
+  };
 
   return (
     <section className="relative overflow-hidden bg-white text-black py-16 px-4">
-      {/* Animated background circles */}
-      <motion.div
-        className="absolute top-1/8 right-1/6 w-96 h-96 bg-[#8df090] rounded-full -mt-32 -mr-32 z-1"
-        variants={floatingCircle}
-        initial="hidden"
-        animate="visible"
-      />
-      <motion.div
-        className="absolute top-1/2 right-1/6 w-96 h-96 bg-[#ebee67] rounded-full -mt-32 -mr-64 z-0"
-        variants={floatingCircle}
-        initial="hidden"
-        animate="visible"
-        transition={{ delay: 0.3 }}
-      />
-
-      <div className="relative z-10">
+      {/* Flex container to align text and image side by side */}
+      <div className="max-w-[90%] mx-auto flex flex-col lg:flex-row items-center justify-center lg:gap-12">
+        {/* Left Side - Text Content */}
         <motion.div
-          className="container mx-auto text-left"
-          variants={staggerContainer}
+          className="lg:w-1/2 text-center lg:text-left"
+          variants={slideInLeft}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, amount: 0.2 }}
+          viewport={{ once: true, amount: 0.5 }}
         >
-          <motion.p
-            className="font-Caveat text-2xl uppercase"
-            variants={slideInLeft}
-          >
-            {donationData.subHeading}
-          </motion.p>
-          <motion.h1 className="text-4xl font-bold mt-2" variants={slideInLeft}>
-            {donationData.heading}
-          </motion.h1>
-          <motion.p className="text-lg mt-4" variants={slideInLeft}>
-            {donationData.paragraph}
-          </motion.p>
+          <p className="italic text-gray-600 text-lg md:text-xl">
+            Donate to Sugar Labs to make a{' '}
+            <span className="font-bold">Positive</span> Impact
+          </p>
+          <h1 className="text-4xl md:text-5xl font-bold mt-2 leading-tight">
+            Support and Empower <br /> Learners Everywhere
+          </h1>
+          <p className="text-gray-600 text-lg mt-4">
+            Support Sugar Labs and make a difference in children's education.
+            Sugar Labs has brought educational software and authentic problem
+            solving to millions in the US and across the globe.
+          </p>
+
+          {/* Donate Now Button */}
           <motion.button
-            onClick={handleClick}
-            className="mt-6 px-6 py-3 bg-[#fbd04d] text-black text-2xl font-bold rounded-full shadow-lg hover:bg-yellow-500 transition duration-300 outline-4 uppercase"
+            onClick={handleDonateClick}
+            className="mt-6 px-6 py-3 bg-[#fbd04d] text-black text-2xl font-bold rounded-full shadow-md hover:bg-yellow-500 transition duration-300 uppercase"
             variants={bounce}
             whileHover="hover"
             whileTap="tap"
           >
-            {donationData.buttonText}
+            Donate Now
           </motion.button>
         </motion.div>
 
+        {/* Right Side - Image with Spacing */}
+        <motion.img
+          src="assets/Images/DonateToSugarLabs.png"
+          alt="Children with laptops and Donate to Sugarlabs"
+          className="w-[400px] lg:w-[500px] transition-none hover:transform-none object-contain"
+          variants={slideInRight}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.5 }}
+          whileHover={{ scale: 1.01 }}
+        />
+      </div>
+
+      {/* Newsletter and Volunteer Section Moved Down */}
+      <div className="relative z-10 w-full mt-12 text-center">
         <Link to="/volunteer">
           <motion.div
-            className="mt-12 flex justify-center items-center"
+            className="flex justify-center items-center"
             variants={slideInBottom}
             initial="hidden"
             whileInView="visible"
@@ -82,14 +85,12 @@ const Donation: React.FC = () => {
                 className="absolute -top-8 -right-8"
                 animate={{
                   x: [0, 10, 0],
-                  transition: {
-                    repeat: Infinity,
-                    duration: 1.5,
-                  },
+                  transition: { repeat: Infinity, duration: 1.5 },
                 }}
               >
                 <i className="fas fa-arrow-right text-2xl" />
               </motion.div>
+
               <motion.div
                 className="bg-white border border-gray-300 rounded-full px-4 py-2 flex items-center shadow-lg"
                 whileHover={{ scale: 1.05 }}
@@ -127,17 +128,19 @@ const Donation: React.FC = () => {
           </motion.div>
         </Link>
 
+        {/* Newsletter Subscription Section Moved Down */}
         <motion.div
-          className="mt-16 text-center"
+          className="mt-16"
           variants={staggerContainer}
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true, amount: 0.2 }}
         >
           <motion.p className="text-lg" variants={fadeIn}>
-            Join Us to Empower Young Learners all Across the Globe. The simplest
-            way to get involved is to join our newsletter.
+            Join us to empower young learners across the globe. The simplest way
+            to get involved is to join our newsletter.
           </motion.p>
+
           <motion.div
             className="mt-4 flex justify-center items-center"
             variants={slideInRight}
@@ -146,13 +149,14 @@ const Donation: React.FC = () => {
               action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs"
               method="post"
               onSubmit={() => setTimeout(() => setEmail(''), 500)}
+              className="flex"
             >
               <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}
+                value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
               />