made the website look dynamic

client/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@heroicons/react": "^2.1.5",
     "@mui/material": "^6.1.2",
+    "aos": "^2.3.4",
     "client": "file:",
     "mdb-react-ui-kit": "^9.0.0",
     "react": "^18.3.1",

client/src/components/About.jsx

@@ -1,16 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import AOS from 'aos'; // Import AOS
+import 'aos/dist/aos.css'; // Import AOS styles
 
 const About = () => {
+  useEffect(() => {
+    AOS.init({ duration: 1000 }); // You can adjust the duration and other settings
+  }, []);
+
   return (
     <div>
-      <h1>About Us</h1>
-      <section>
+      <h1 data-aos="fade-up">About Us</h1>
+      <section data-aos="fade-right">
         <h2>About Our Alumni</h2>
         <p>
           Our alumni network is a vibrant and diverse community of professionals who have graduated from our MCA program. They are leaders in their fields, making significant contributions to the industry and society. We are proud of their achievements and the positive impact they have on the world.
         </p>
       </section>
-      <section>
+      <section data-aos="fade-left">
         <h2>About MCA Department</h2>
         <p>
           The MCA department is dedicated to providing a comprehensive education in computer applications. Our curriculum is designed to equip students with the skills and knowledge needed to excel in the ever-evolving tech industry. We foster a collaborative and innovative learning environment, preparing our students for successful careers.
@@ -20,4 +26,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;

client/src/components/Contact.jsx

@@ -1,15 +1,18 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect } from "react";
 import emailjs from "@emailjs/browser";
 import wave from "../assets/wave.png";
 import unlock from "../assets/unlock.svg";
 import avatar from "../assets/avatar.svg";
+import AOS from "aos"; // Import AOS
+import "aos/dist/aos.css"; // Import AOS styles
 
 const Contact = () => {
   const form = useRef();
 
+  useEffect(() => {
+    AOS.init({ duration: 1000 }); // Initialize AOS
+  }, []);
 
-  // used EmailJs
-  // npm i @emailjs/browser
   const sendEmail = (e) => {
     e.preventDefault();
 
@@ -23,7 +26,7 @@ const Contact = () => {
       .then(
         (result) => {
           console.log(result.text);
-          console.log("message sent");
+          console.log("Message sent");
         },
         (error) => {
           console.log(error.text);
@@ -32,8 +35,7 @@ const Contact = () => {
   };
 
   return (
-    <div className="border-2 border-gray-50 shadow shadow-gray-50 mx-auto  w-[1000px] mb-5 relative overflow-hidden">
-      {/* Add a container for the wave image */}
+    <div className="border-2 border-gray-50 shadow shadow-gray-50 mx-auto w-[1000px] mb-5 relative overflow-hidden">
       <div className="absolute bottom-0 w-full h-[700px]">
         <img src={wave} className="w-full h-full object-cover" alt="wave" />
       </div>
@@ -42,7 +44,6 @@ const Contact = () => {
         <img
           src={unlock}
           className="hidden lg:block w-1/2 hover:scale-150 transition-all duration-500 transform mx-auto z-10"
-          // Add z-index to bring the unlock image to the front
           style={{ zIndex: 10 }}
         />
         <form
@@ -60,22 +61,24 @@ const Contact = () => {
               name="user_name"
               placeholder="Name"
               className="bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg"
+              data-aos="fade-up" // AOS effect
             />
           </div>
           <div className="relative mt-8">
             <input
               type="text"
               name="user_email"
               placeholder="Email"
-              className=" bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg"
+              className="bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg"
+              data-aos="fade-up" // AOS effect
             />
           </div>
           <div className="relative mt-8">
             <textarea
               name="message"
               placeholder="Message..."
-              id=""
               className="resize-none h-[150px] bg-white pl-8 border-2 border-gray-200 font-display focus:outline-none focus:border-primarycolor transition-all duration-500 capitalize text-lg"
+              data-aos="fade-up" // AOS effect
             ></textarea>
           </div>