Resolve About (#89)

* omkar changes

changes in contact.jsx and about.jsx

* Changes in About.jsx and Contact.jsx

* Update Contact.jsx

* By Omkar

commit to main

client/src/components/About.jsx

@@ -9,9 +9,13 @@ import { motion } from "framer-motion";
 export default function About() {
   return (
     <>
+      {/* Including Navbar */}
       <Navbar />
+
+      {/* Main content wrapper with gradient background */}
       <div className="bg-gradient-to-b from-blue-50 via-white to-blue-50 py-10 w-full">
         <div className="container mx-auto px-4">
+          {/* Animated title section */}
           <motion.div
             initial={{ opacity: 0, y: -100 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -20,13 +24,15 @@ export default function About() {
               duration: 0.6,
               type: "spring",
               stiffness: 80,
-              delay: 0,
             }}
             className="text-5xl font-extrabold text-center text-blue-700 mb-8"
           >
             About Us
           </motion.div>
+
+          {/* Content sections */}
           <div className="flex flex-col gap-10 mt-12">
+            {/* Mission Section */}
             <motion.div
               initial={{ opacity: 0, x: -100 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -43,7 +49,7 @@ export default function About() {
                 <h1 className="text-3xl font-bold mb-4 text-blue-800">
                   Our Mission
                 </h1>
-                <p className="text-lg text-gray-700 leading-relaxed">
+                <p className="text-2xl text-gray-700 leading-relaxed">
                   At our student food insecurity project, we are dedicated to
                   addressing the issue of hunger among students. Our mission is
                   to provide a platform that connects students, colleges, and
@@ -60,6 +66,8 @@ export default function About() {
                 />
               </div>
             </motion.div>
+
+            {/* How It Works Section */}
             <motion.div
               initial={{ opacity: 0, x: 100 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -83,7 +91,7 @@ export default function About() {
                 <h2 className="text-3xl font-bold mb-4 text-green-700">
                   How It Works
                 </h2>
-                <p className="text-lg text-gray-700 leading-relaxed">
+                <p className="text-2xl text-gray-700 leading-relaxed">
                   Our platform enables students to easily find nearby
                   restaurants that offer free food. Participating colleges
                   provide students with free coupons that can be redeemed at
@@ -95,6 +103,8 @@ export default function About() {
                 </p>
               </div>
             </motion.div>
+
+            {/* Join Us Section */}
             <motion.div
               initial={{ opacity: 0, x: -100 }}
               whileInView={{ opacity: 1, x: 0 }}
@@ -111,7 +121,7 @@ export default function About() {
                 <h2 className="text-3xl font-bold mb-4 text-blue-800">
                   Join Us
                 </h2>
-                <p className="text-lg text-gray-700 leading-relaxed">
+                <p className="text-2xl text-gray-700 leading-relaxed">
                   We are always looking for passionate individuals and
                   organizations to join our cause. Whether you are a student,
                   college representative, or restaurant owner, you can make a
@@ -131,6 +141,8 @@ export default function About() {
               </div>
             </motion.div>
           </div>
+
+          {/* Call to Action */}
           <motion.div
             initial={{ opacity: 0, y: 100 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -143,7 +155,7 @@ export default function About() {
             }}
             className="mt-12"
           >
-            <p className="text-xl font-semibold bg-white border-b-4 border-blue-400 shadow-lg rounded-lg px-6 py-8 text-center text-gray-800 transform hover:scale-105 transition-transform duration-300">
+            <p className="text-xl font-bold bg-white border-b-4 border-blue-400 shadow-lg rounded-lg px-6 py-8 text-center text-gray-800 transform hover:scale-105 transition-transform duration-300">
               Join us in our mission to eliminate student food insecurity and
               make a positive impact on the lives of students across the
               country. Together, we can create a future where every student has
@@ -153,6 +165,8 @@ export default function About() {
           </motion.div>
         </div>
       </div>
+
+      {/* Including Footer */}
       <Footer />
     </>
   );

client/src/components/Contact.jsx

@@ -6,8 +6,10 @@ import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 
 export default function Contact() {
+  // State to manage form submission status
   const [isSubmitted, setSubmitted] = useState(false);
 
+  // Hook to manage form and validation
   const {
     register,
     handleSubmit,
@@ -18,17 +20,21 @@ export default function Contact() {
     mode: "onChange",
   });
 
+  // Function to handle form submission
   const onSubmit = async (data, e) => {
     setSubmitted(true);
     e.preventDefault();
     try {
-      const res = await fetch(`${import.meta.env.VITE_API_BASE_URL || `https://mealmatters-backend.onrender.com`}/contact-us`, {
-        headers: {
-          "Content-Type": "application/json",
-        },
-        method: "POST",
-        body: JSON.stringify(data),
-      });
+      const res = await fetch(
+        `${import.meta.env.VITE_API_BASE_URL || `https://mealmatters-backend.onrender.com`}/contact-us`, 
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+          method: "POST",
+          body: JSON.stringify(data),
+        }
+      );
       const formSubmitted = await res.json();
       if (formSubmitted.statusCode === 200) {
         reset();
@@ -37,7 +43,7 @@ export default function Contact() {
         console.log(formSubmitted.message);
       }
     } catch (error) {
-      console.log(error);
+      console.error("Error submitting the form:", error);
     }
     setSubmitted(false);
   };
@@ -46,15 +52,15 @@ export default function Contact() {
     <>
       <Navbar />
 
-      <div className="bg-transparent">
+      <div className="bg-transparent py-10">
         <div className="container mx-auto px-4">
-          <h1 className="text-5xl font-extrabold text-white text-center mb-12">
+          <h1 className="text-5xl font-extrabold text-blue-800 text-center mb-12">
             Contact Us
           </h1>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
             {/* Form Section */}
             <div className="bg-white rounded-lg shadow-xl p-8">
-              <h2 className="text-3xl font-semibold text-gray-800 mb-6">
+              <h2 className="text-3xl font-bold text-gray-800 mb-8">
                 Get in Touch
               </h2>
               <form method="POST" onSubmit={handleSubmit(onSubmit)}>

client/src/components/Footer.jsx

@@ -8,36 +8,36 @@ export default function Footer() {
         <div className="flex justify-around flex-col sm:flex-row">
           {/* Links Section */}
           <div className="mb-6 sm:mb-0">
-            <h5 className="text-lg font-bold uppercase mb-4">Explore</h5>
+            <h5 className="text-lg font-extrabold uppercase mb-5">Explore</h5>
             <ul className="space-y-3">
               <li>
                 <Link
                   to="/"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   Mission
                 </Link>
               </li>
               <li>
                 <Link
                   to="/"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   Partners
                 </Link>
               </li>
               <li>
                 <Link
                   to="/about"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   About Us
                 </Link>
               </li>
               <li>
                 <Link
                   to="/contact"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   Contact Us
                 </Link>
@@ -52,15 +52,15 @@ export default function Footer() {
               <li>
                 <a
                   href="mailto:contact@mealmatters.com"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   contact@mealmatters.com
                 </a>
               </li>
               <li>
                 <a
                   href="tel:+91123456789"
-                  className="hover:text-yellow-300 transition duration-300"
+                  className="hover:text-yellow-300 font-bold transition duration-300"
                 >
                   +91 123456789
                 </a>

client/src/components/Login.jsx

@@ -51,7 +51,7 @@ export default function Login() {
       <Navbar />
       <div className="flex justify-center items-center h-screen bg-gradient-to-r font-sans">
         <div className="relative w-full max-w-md bg-white p-10 rounded-lg border border-black hover:border-2 shadow-lg">
-          <h2 className="text-4xl font-semibold text-center mb-8 text-black">
+          <h2 className="text-4xl font-bold text-center mb-8 text-black">
             Welcome to MealMatters
           </h2>
           <form onSubmit={handleLogin}>
@@ -61,14 +61,14 @@ export default function Login() {
                 <input
                   type="email"
                   placeholder="Email"
-                  className="w-full h-12 bg-transparent outline-none text-black placeholder-gray-500"
+                  className="w-full h-12 bg-transparent font-bold outline-none text-black placeholder-gray-500"
                   style={{ fontSize: '16px' }}
                   onChange={(e) => setEmail(e.target.value)}
                 />
               </div>
             </div>
             <div className="mb-6">
-              <div className="flex items-center border-b border-gray-300">
+              <div className="flex items-center font-bold border-b border-gray-300">
                 <i className="fa fa-unlock-alt text-lg mr-3 text-gray-500"></i>
                 <input
                   type="password"
@@ -81,7 +81,7 @@ export default function Login() {
             </div>
             <div className="mb-6">
               <button
-                className="w-full h-12 cursor-pointer font-semibold text-lg text-center border-2 border-purple-600 rounded-[25px] bg-pink-300 hover:text-white hover:bg-purple-600"
+                className="w-full h-12 cursor-pointer font-bold text-lg text-center border-2 border-purple-600 rounded-[25px] bg-pink-300 hover:text-white hover:bg-purple-600"
               >
                 Login
               </button>
@@ -106,8 +106,8 @@ export default function Login() {
               </button>
             </div>
             <div className="flex justify-between">
-            <Link to="/forgot-password" className="text-sm text-gray-600 cursor-pointer">Forgot Password?</Link>
-              <Link to="/signup" className="text-sm text-gray-600">
+            <Link to="/forgot-password" className="text-sm text-gray-600 font-bold cursor-pointer">Forgot Password?</Link>
+              <Link to="/signup" className="text-sm font-bold text-gray-600">
                 Sign Up
               </Link>
             </div>

client/src/components/Navbar.jsx

@@ -62,7 +62,7 @@ export default function Navbar() {
             <li className="my-5 lg:my-0">
               <a
                 href="https://rzp.io/l/aK0bXinyA"
-                className="text-[#fff] lg:text-[#000000] block hover:scale-110 transition text-[1.25rem] font-[600]"
+                className="text-[#fff] lg:text-[#000000]  block hover:scale-110 transition text-[1.25rem] font-[600]"
               >
                 Donate
               </a>