diff --git a/client/package-lock.json b/client/package-lock.json
index 165d073..2a135fa 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^1.10.0",
         "chart.js": "^4.5.0",
         "firebase": "^11.9.1",
+        "framer-motion": "^12.23.12",
         "jspdf": "^3.0.1",
         "jspdf-autotable": "^5.0.2",
         "lucide-react": "^0.522.0",
@@ -3371,6 +3372,33 @@
         "node": ">= 6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4098,6 +4126,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/client/package.json b/client/package.json
index 9ef6783..3487298 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
     "axios": "^1.10.0",
     "chart.js": "^4.5.0",
     "firebase": "^11.9.1",
+    "framer-motion": "^12.23.12",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
     "lucide-react": "^0.522.0",
diff --git a/client/src/components/Card.jsx b/client/src/components/Card.jsx
index 992c799..fc47166 100644
--- a/client/src/components/Card.jsx
+++ b/client/src/components/Card.jsx
@@ -1,15 +1,36 @@
+import {motion} from 'framer-motion'
 export default function Card({ icon, title, description, className = "" }) {
   return (
-    <div
+    <motion.div
+      initial={{y:-10, opacity:0}}
+      whileInView={{y:0, opacity:1}}
+      transition={{delay:1, type:'spring', stiffness:100, damping:10}}
+      viewport={{once:true, amount:0.3}}
       className={`bg-gray-50 border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow duration-200 ${className}`}
     >
       <div className="flex flex-col items-start space-y-4">
-        <div className="text-gray-600 text-2xl">{icon}</div>
+        <motion.div 
+          whileInView={{rotate:[0, -90, 90, 0]}}
+          transition={{duration:0.5, delay:0.5}}
+          
+          className="text-gray-600 text-2xl">{icon}
+        </motion.div>
 
-        <h3 className="text-lg font-semibold text-gray-900 leading-tight">{title}</h3>
+        <motion.h3
+        initial={{x:-50, opacity:0}}
+        whileInView={{x:0, opacity:1}}
+        transition={{duration:0.5, delay:0.5, ease:'easeInOut'}}
+        className="text-lg font-semibold text-gray-900 leading-tight">
+          {title}
+        </motion.h3>
 
-        <p className="text-gray-600 text-sm leading-relaxed">{description}</p>
+        <motion.p 
+        initial={{x:50, opacity:0}}
+        whileInView={{x:0, opacity:1}}
+        transition={{duration:0.5, delay:0.5, ease:'easeOut'}}
+        className="text-gray-600 text-sm leading-relaxed">{description}
+        </motion.p>
       </div>
-    </div>
+    </motion.div>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/ContactForm.jsx b/client/src/components/ContactForm.jsx
index be022ad..4b6ce43 100644
--- a/client/src/components/ContactForm.jsx
+++ b/client/src/components/ContactForm.jsx
@@ -1,8 +1,39 @@
 import { useState } from "react";
 import axios from "axios";
 import { FaPaperPlane } from "react-icons/fa";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 
 export default function ContactForm() {
+	const sharedData = useContext(variantsContext);
+  const { textvariant} =
+    sharedData;
+
+		const [showSelect, setShowSelect]=useState(true)
+
+
+
+	const containerVariant={
+		 hidden:{heigh:0, opacity:0},
+    	visible:{heigh:'auto', opacity:1 ,
+            transition:{when:'beforeChildren', delay: 1, duration: 1, ease: "easeOut",
+							delayChildren:0.4, staggerChildren:0.3, staggerDirection:1
+						},
+           },
+			exit:{heigh:0, opacity:0, 
+				transition:{when:'afterChildren', staggerDirection:-1}
+			} 
+	}
+
+	const childVariant={
+			hidden:{x:-20, opacity:0},
+			visible:{x:0, opacity:1,
+				transition:{ease:'easeOut', duration:0.6}
+			}
+	}
+
+
 	const [formData, setFormData] = useState({
 		name: "",
 		email: "",
@@ -81,20 +112,33 @@ export default function ContactForm() {
 
 	return (
 		<div className="bg-white rounded-lg border border-gray-200 p-8 max-w-4xl">
-			<h2 className="text-2xl font-bold text-gray-900 mb-6">
+			<motion.h2 
+			initial="hidden"
+      whileInView="visible"
+      variants={textvariant}
+      viewport={{ amount: 0.5, once: true }}
+			className="text-2xl font-bold text-gray-900 mb-6">
 				Send us a Message
-			</h2>
+			</motion.h2>
 
 			<form onSubmit={handleSubmit} className="space-y-6">
 				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 					<div>
-						<label
+						<motion.label
+							initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							htmlFor="name"
 							className="block text-sm font-medium text-gray-700 mb-2"
 						>
 							Full Name <span className="text-red-600">*</span>
-						</label>
-						<input
+						</motion.label>
+						<motion.input
+						  initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							type="text"
 							id="name"
 							name="name"
@@ -106,14 +150,18 @@ export default function ContactForm() {
 						/>
 					</div>
 					<div>
-						<label
+						<motion.label
+						initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							htmlFor="email"
 							className="block text-sm font-medium text-gray-700 mb-2"
 						>
 							Email Address{" "}
 							<span className="text-red-600">*</span>
-						</label>
-						<input
+						</motion.label>
+						<motion.input
 							type="email"
 							id="email"
 							name="email"
@@ -128,13 +176,21 @@ export default function ContactForm() {
 
 				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 					<div>
-						<label
+						<motion.label
+						initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							htmlFor="category"
 							className="block text-sm font-medium text-gray-700 mb-2"
 						>
 							Category
-						</label>
-						<select
+						</motion.label>
+							<motion.select
+							initial="hidden"
+              animate="visible"
+							exit='exit'
+              variants={containerVariant}
 							id="category"
 							name="category"
 							value={formData.category}
@@ -149,16 +205,25 @@ export default function ContactForm() {
 									{category.label}
 								</option>
 							))}
-						</select>
+						</motion.select>
+						
 					</div>
 					<div>
-						<label
+						<motion.label
+						initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							htmlFor="subject"
 							className="block text-sm font-medium text-gray-700 mb-2"
 						>
 							Subject <span className="text-red-600">*</span>
-						</label>
-						<input
+						</motion.label>
+						<motion.input
+						initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 							type="text"
 							id="subject"
 							name="subject"
@@ -171,13 +236,21 @@ export default function ContactForm() {
 					</div>
 				</div>
 				<div>
-					<label
+					<motion.label
+					initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 						htmlFor="message"
 						className="block text-sm font-medium text-gray-700 mb-2"
 					>
 						Message <span className="text-red-600">*</span>
-					</label>
-					<textarea
+					</motion.label>
+					<motion.textarea
+					initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 						id="message"
 						name="message"
 						value={formData.message}
@@ -188,7 +261,11 @@ export default function ContactForm() {
 						placeholder="Please provide details about your inquiry..."
 					/>
 				</div>
-				<button
+				<motion.button
+							initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
 					type="submit"
 					disabled={isSubmitting}
 					className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2"
@@ -204,7 +281,7 @@ export default function ContactForm() {
 							<span>Send Message</span>
 						</>
 					)}
-				</button>
+				</motion.button>
 			</form>
 		</div>
 	);
diff --git a/client/src/components/FAQ.jsx b/client/src/components/FAQ.jsx
index 25f79dc..0318184 100644
--- a/client/src/components/FAQ.jsx
+++ b/client/src/components/FAQ.jsx
@@ -1,6 +1,9 @@
-import { useState } from "react"
-import { FaChevronDown, FaChevronUp } from "react-icons/fa"
+import { useState } from "react";
+import { FaChevronDown, FaChevronUp } from "react-icons/fa";
 import { Link } from "react-router-dom";
+import { motion, useInView } from "framer-motion";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
 
 export default function FAQ({
   title = "Frequently Asked Questions",
@@ -9,72 +12,112 @@ export default function FAQ({
   className = "",
   allowMultipleOpen = false,
 }) {
+  const sharedData = useContext(variantsContext);
+  const { textvariant, paraVariant, cardVariant, cardContainer } = sharedData;
   const [openItems, setOpenItems] = useState(
-    faqs.map((faq, index) => (faq.defaultOpen ? index : -1)).filter((index) => index !== -1)
-  )
+    faqs
+      .map((faq, index) => (faq.defaultOpen ? index : -1))
+      .filter((index) => index !== -1)
+  );
+
+  const inView = useInView({ once: true, amount: 0.3 });
 
   const toggleItem = (index) => {
     if (allowMultipleOpen) {
       setOpenItems((prev) =>
-        prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
-      )
+        prev.includes(index)
+          ? prev.filter((i) => i !== index)
+          : [...prev, index]
+      );
     } else {
-      setOpenItems((prev) => (prev.includes(index) ? [] : [index]))
+      setOpenItems((prev) => (prev.includes(index) ? [] : [index]));
     }
-  }
+  };
 
   return (
     <div className={`max-w-4xl mx-auto ${className}`}>
       {(title || subtitle) && (
         <div className="text-center mb-8">
-          {title && <h2 className="text-3xl font-bold text-gray-900">{title}</h2>}
-          {subtitle && <p className="text-gray-600 text-lg max-w-2xl mx-auto">{subtitle}</p>}
+          {title && (
+            <motion.h2
+              initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ once: true }}
+              className="text-3xl font-bold text-gray-900"
+            >
+              {title}
+            </motion.h2>
+          )}
+          {subtitle && (
+            <motion.p
+              initial="hidden"
+              whileInView="visible"
+              variants={paraVariant}
+              viewport={{ once: true }}
+              className="text-gray-600 text-lg max-w-2xl mx-auto"
+            >
+              {subtitle}
+            </motion.p>
+          )}
         </div>
       )}
-
-      <div className="space-y-4">
+      <motion.div
+        initial="hidden"
+        whileInView="visible"
+        variants={cardContainer}
+        viewport={{ once: true, amount: 0.5 }}
+        className="space-y-4"
+      >
         {faqs.map((faq, index) => {
-          const isOpen = openItems.includes(index)
-
+          const isOpen = openItems.includes(index);
           return (
-            <div key={index} className="border border-gray-200 rounded-lg bg-white">
-              <button
+            <motion.div
+              variants={cardVariant}
+              key={index}
+              className="border border-gray-200 rounded-lg bg-white"
+            >
+              <motion.button
                 onClick={() => toggleItem(index)}
-                className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg cursor-pointer"
+                className={`w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset rounded-lg cursor-pointer`}
                 aria-expanded={isOpen}
               >
                 <span className="text-gray-900 font-medium text-sm md:text-base pr-4">
                   {faq.question}
                 </span>
                 <div className="flex-shrink-0 text-gray-500 transition-transform duration-200">
-                  {isOpen ? <FaChevronUp className="w-4 h-4" /> : <FaChevronDown className="w-4 h-4" />}
+                  {isOpen ? (
+                    <FaChevronUp className="w-4 h-4" />
+                  ) : (
+                    <FaChevronDown className="w-4 h-4" />
+                  )}
                 </div>
-              </button>
-
+              </motion.button>
               <div
                 className={`overflow-hidden transition-all duration-300 ease-in-out ${
                   isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
                 }`}
               >
                 <div className="px-6 pb-4">
-                  <p className="text-gray-600 text-sm md:text-base leading-relaxed">{faq.answer}</p>
+                  <p className="text-gray-600 text-sm md:text-base leading-relaxed">
+                    {faq.answer}
+                  </p>
                 </div>
               </div>
-            </div>
-          )
+            </motion.div>
+          );
         })}
-      </div>
-
+      </motion.div>
       <div className="mt-12 flex">
         <p className="text-gray-600 mb-4">Still have questions?</p>
-        
+
         <Link
-						to="/contact#contact-form"
-						className="inline-flex items-center justify-center ml-3 mb-4 text-blue-500 font-semibold rounded-lg transition-colors"
-					>
-						Contact Us
-					</Link>
+          to="/contact#contact-form"
+          className="inline-flex items-center justify-center ml-3 mb-4 text-blue-500 font-semibold rounded-lg transition-colors"
+        >
+          Contact Us
+        </Link>
       </div>
     </div>
-  )
+  );
 }
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 89ce0e9..ad3c175 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -1,111 +1,202 @@
 import { Link } from "react-router-dom";
 import { SiX } from "react-icons/si";
-import { FaGithub, FaTwitter, FaLinkedin, FaEnvelope } from "react-icons/fa";
+import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { motion } from "framer-motion";
+
+const quickLinks=[
+  {
+    id:1,
+    path:"/",
+    title:"Home"
+  },
+  {
+    id:2,
+    path:"/about",
+    title:"About"
+  },
+  {
+    id:3,
+    path:"/interview/setup",
+    title:"Practice"
+  },
+  {
+    id:4,
+    path:"/resources",
+    title:"Resources"
+  },
+]
+
+const supportLinks=[
+  {
+    id:1,
+    path:"/contact",
+    title:"Contact Us"
+  },
+  {
+    id:2,
+    path:"#",
+    title:"Help Center"
+  },
+  {
+    id:3,
+    path:"#",
+    title:"Privacy Policy"
+  },
+  {
+    id:4,
+    path:"#",
+    title:"Terms Of Service"
+  },
+]
+
+const socialMediaLinks=[
+  {
+    id:1,
+    icon:<FaGithub className="h-7 w-7" />,
+    href:'https://github.com/coderuzumaki/prepedge-ai',
+    ariaLabel:'GitHub'
+
+  },
+  {
+    id:2,
+    icon:<SiX className="h-6 w-6 mt-0.5" />,
+    href:'https://x.com/coderUzumaki',
+    ariaLabel:'Twitter'
+
+  },
+  {
+    id:3,
+    icon:<FaLinkedin className="h-7 w-7" />,
+    href:'https://www.linkedin.com/in/abhinavvv08',
+    ariaLabel:'LinkedIn'
+
+  },
+  {
+    id:4,
+    icon:<FaEnvelope className="h-7 w-7" />,
+    href:'mailto:astar1013vt@gmail.com',
+    ariaLabel:'Email'
+
+  },
+]
+
 
 export default function Footer() {
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant, cardVariant, cardContainer, paraVariant } =
+    sharedData;
   return (
-    <footer className="bg-[#fafaf9] text-gray-900 border-t border-gray-100">
+    <motion.footer 
+    initial='hidden'
+    whileInView='visible'
+    variants={sectionVariant}
+    viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+    className="bg-[#fafaf9] text-gray-900 border-t border-gray-100">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* upper section */}
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
           {/* Brand Section */}
           <div className="col-span-1 md:col-span-2">
-            <div className="flex items-center space-x-2 mb-3">
-              <span className="text-2xl font-bold text-gray-900">PrepEdge AI</span>
-            </div>
-            <p className="text-lg text-gray-600 mb-4 max-w-md">
+            <motion.div 
+            initial='hidden'
+               whileInView='visible'
+               variants={textvariant}
+               viewport={{ amount: 0.3, once: true }}
+            className="flex items-center space-x-2 mb-3">
+              <span 
+               
+              
+              className="text-2xl font-bold text-gray-900">
+                PrepEdge AI
+              </span>
+            </motion.div>
+            <motion.p
+             initial='hidden'
+             whileInView='visible'
+             variants={paraVariant}
+             viewport={{ amount: 0.5, once: true }}
+            className="text-lg text-gray-600 mb-4 max-w-md">
               Master your interview skills with AI-powered practice sessions, real-time feedback, 
               and personalized insights to help you land your dream job.
-            </p>
-            <div className="flex space-x-4">
-              <a
-                href="https://github.com/coderuzumaki/prepedge-ai"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
-                aria-label="GitHub"
-              >
-                <FaGithub className="h-7 w-7" />
-              </a>
-              <a
-                href="https://x.com/coderUzumaki"
+            </motion.p>
+            <motion.div 
+             initial='hidden'
+             whileInView='visible'
+             variants={cardContainer}
+             viewport={{once:true}}
+             className="flex space-x-4">
+              {socialMediaLinks.map(({id, href, ariaLabel, icon})=>(
+                <motion.a
+                 variants={cardVariant}
+                 key={id}
+                href={href}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
-                aria-label="Twitter"
+                aria-label={ariaLabel}
               >
-                <SiX className="h-6 w-6 mt-0.5" />
-              </a>
-              <a
-                href="https://www.linkedin.com/in/abhinavvv08"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
-                aria-label="LinkedIn"
-              >
-                <FaLinkedin className="h-7 w-7" />
-              </a>
-              <a
-                href="mailto:astar1013vt@gmail.com"
-                className="text-gray-900 hover:text-cyan-500 transition-colors duration-200"
-                aria-label="Email"
-              >
-                <FaEnvelope className="h-7 w-7" />
-              </a>
-            </div>
+                {icon}
+              </motion.a>
+              ))}
+            </motion.div>
           </div>
 		  
 		  {/* Quick Links */}
           <div>
-            <h3 className="text-xl font-semibold mb-4"><u>Quick Links</u></h3>
-            <ul className="space-y-2">
-              <li>
-                <Link to="/" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Home
-                </Link>
-              </li>
-              <li>
-                <Link to="/about" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  About
-                </Link>
-              </li>
-              <li>
-                <Link to="/interview/setup" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Practice
-                </Link>
-              </li>
-              <li>
-                <Link to="/resources" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Resources
+            <motion.h3 
+             initial='hidden'
+             whileInView='visible'
+             variants={textvariant}
+             viewport={{once:true, amount:0.3}}
+            className="text-xl font-semibold mb-4">
+              <u>Quick Links</u>
+            </motion.h3>
+            <motion.ul 
+             initial='hidden'
+             whileInView='visible'
+             variants={cardContainer}
+             viewport={{once:true}}
+
+            className="space-y-2">
+              {quickLinks.map(({path, title, id})=>(
+                <motion.li 
+                 variants={cardVariant}
+                key={id}>
+                <Link to={path} className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
+                  {title}
                 </Link>
-              </li>
-            </ul>
+              </motion.li>
+              ))}
+            </motion.ul>
           </div>
 
           {/* Support */}
           <div>
-            <h3 className="text-xl font-semibold mb-4"><u>Support</u></h3>
-            <ul className="space-y-2">
-              <li>
-                <Link to="/contact" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Contact Us
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Help Center
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Privacy Policy
-                </Link>
-              </li>
-              <li>
-                <Link to="#" className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
-                  Terms of Service
+            <motion.h3 
+            initial='hidden'
+             whileInView='visible'
+             variants={textvariant}
+             viewport={{once:true, amount:0.3}}
+            className="text-xl font-semibold mb-4"><u>Support</u>
+          </motion.h3>
+            <motion.ul 
+             initial='hidden'
+             whileInView='visible'
+             variants={cardContainer}
+             viewport={{once:true}}
+             className="space-y-2">
+              {supportLinks.map(({path, title, id})=>(
+                <motion.li
+                 variants={cardVariant} 
+                key={id}>
+                <Link to={path} className="text-gray-600 hover:text-cyan-500 hover:scale-112 transition-all duration-200 inline-block">
+                  {title}
                 </Link>
-              </li>
-            </ul>
+              </motion.li>
+              ))}
+            </motion.ul>
           </div>
         </div>
 
@@ -127,6 +218,6 @@ export default function Footer() {
           </div>
         </div>
       </div>
-    </footer>
+    </motion.footer>
   );
 }
diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
index 0b00027..b627d2d 100644
--- a/client/src/components/Header.jsx
+++ b/client/src/components/Header.jsx
@@ -1,84 +1,196 @@
-import { useState, useRef, useEffect } from "react"
-import { Link } from "react-router-dom"
-import { FaUser, FaSignOutAlt, FaChevronDown, FaBars, FaTimes } from "react-icons/fa"
-import { useAuth } from "../context/AuthContext"
-import React from "react"
+import { useState, useRef, useEffect } from "react";
+import { Link, Navigate } from "react-router-dom";
+import {
+  FaUser,
+  FaSignOutAlt,
+  FaChevronDown,
+  FaBars,
+  FaTimes,
+} from "react-icons/fa";
+import { useAuth } from "../context/AuthContext";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { AnimatePresence, delay, motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
 
 export default function Header() {
-  const { user, isLoggedIn, logout } = useAuth()
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false)
-  const dropdownRef = useRef(null)
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant } = sharedData;
+
+  const { user, isLoggedIn, logout } = useAuth();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const navigate = useNavigate();
+
+  const NavItems = [
+    { id: 1, title: "Home", link: "/" },
+    { id: 2, title: "About", link: "/about" },
+    { id: 5, title: "Resources", link: "/resources" },
+    ...(isLoggedIn
+      ? [
+          { id: 3, title: "Practice", link: "/interview/setup" },
+          { id: 4, title: "Dashboard", link: "/dashboard" },
+          { id: 8, title: "Profile", link: "/profile" },
+        ]
+      : [
+          { id: 6, title: "Login", link: "/login" },
+          { id: 7, title: "Sign Up", link: "/signup" },
+        ]),
+  ];
+
+  // motions variants
+  const cardContainer = {
+    hidden: { width: 0, opacity: 0 },
+    visible: {
+      width: "auto",
+      opacity: 1,
+      transition: {
+        when: "beforeChildren",
+        duration: 0.3,
+        delayChildren: 0.2,
+        staggerChildren: 0.1,
+        staggerDirection: 1,
+        ease: "easeInOut",
+      },
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      transition: {
+        when: "afterChildren",
+        duration: 0.3,
+        staggerChildren: 0.1,
+        staggerDirection: -1,
+        ease: "easeInOut",
+      },
+    },
+  };
+  const cardVariant = {
+    hidden: { x: -80, y: -80, opacity: 0 },
+    visible: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: { ease: "easeOut" },
+    },
+    exit: { x: -80, y: -80, opacity: 0, transition: { ease: "easeOut" } },
+  };
 
   useEffect(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsDropdownOpen(false)
+        setIsDropdownOpen(false);
       }
     }
 
-    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside)
-    }
-  }, [])
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   const handleLogout = () => {
-    setShowLogoutConfirm(true)
-    setIsDropdownOpen(false)
-  }
+    setShowLogoutConfirm(true);
+    setIsDropdownOpen(false);
+  };
 
   const confirmLogout = () => {
-    logout()
-    setShowLogoutConfirm(false)
-  }
+    logout();
+    setShowLogoutConfirm(false);
+  };
 
   const cancelLogout = () => {
-    setShowLogoutConfirm(false)
-  }
+    setShowLogoutConfirm(false);
+  };
 
   const toggleDropdown = () => {
-    setIsDropdownOpen(!isDropdownOpen)
-  }
+    setIsDropdownOpen(!isDropdownOpen);
+  };
 
   const toggleMobileMenu = () => {
-    setIsMobileMenuOpen(!isMobileMenuOpen)
-  }
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
 
   const getInitials = (name) => {
-    if (!name) return "U"
+    if (!name) return "U";
     return name
       .split(" ")
       .map((n) => n[0])
       .join("")
       .toUpperCase()
-      .slice(0, 2)
-  }
+      .slice(0, 2);
+  };
 
   const NavLinks = () => (
-    <div className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8">
-      <Link to="/" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Home</Link>
-      <Link to="/about" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">About</Link>
+    <motion.div
+      variants={cardVariant}
+      className="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8"
+    >
+      <Link
+        to="/"
+        className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+      >
+        Home
+      </Link>
+      <Link
+        to="/about"
+        className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+      >
+        About
+      </Link>
       {isLoggedIn && (
-        <Link to="/interview/setup" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Practice</Link>
+        <Link
+          to="/interview/setup"
+          className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+        >
+          Practice
+        </Link>
       )}
       {isLoggedIn && (
-        <Link to="/dashboard" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Dashboard</Link>
+        <Link
+          to="/dashboard"
+          className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+        >
+          Dashboard
+        </Link>
       )}
-      <Link to="/resources" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Resources</Link>
-    </div>
-  )
+      <Link
+        to="/resources"
+        className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+      >
+        Resources
+      </Link>
+    </motion.div>
+  );
 
   return (
     <>
-  <header className="sticky top-0 z-50 backdrop-blur-md bg-white/60 border-b border-white/30 shadow-sm transition-colors duration-300">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <motion.header
+        initial="hidden"
+        animate="visible"
+        variants={sectionVariant}
+        className="sticky top-0 z-50 backdrop-blur-md bg-white/60 border-b border-white/30 shadow-sm transition-colors duration-300"
+      >
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <div className="flex items-center">
               <Link to="/" className="flex items-center space-x-2">
-                <img src="/logo.png" alt="PrepEdge AI Logo" className="w-9 h-9" />
-                <span className="text-xl font-semibold text-gray-900">PrepEdge AI</span>
+                <img
+                  src="/logo.png"
+                  alt="PrepEdge AI Logo"
+                  className="w-9 h-9"
+                />
+                <motion.span
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  className="text-xl font-semibold text-gray-900"
+                >
+                  PrepEdge AI
+                </motion.span>
               </Link>
             </div>
 
@@ -91,15 +203,29 @@ export default function Header() {
                 onClick={toggleMobileMenu}
                 className="text-gray-700 hover:text-gray-900 focus:outline-none"
               >
-                {isMobileMenuOpen ? <FaTimes size={20} /> : <FaBars size={20} />}
+                {isMobileMenuOpen ? (
+                  <FaTimes size={20} />
+                ) : (
+                  <FaBars size={20} />
+                )}
               </button>
             </div>
 
             <div className="hidden md:flex items-center space-x-4">
               {!isLoggedIn ? (
                 <>
-                  <Link to="/login" className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Log in</Link>
-                  <Link to="/signup" className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium transition-colors">Sign up</Link>
+                  <Link
+                    to="/login"
+                    className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+                  >
+                    Log in
+                  </Link>
+                  <Link
+                    to="/signup"
+                    className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md font-medium transition-colors"
+                  >
+                    Sign up
+                  </Link>
                 </>
               ) : (
                 <div className="relative" ref={dropdownRef}>
@@ -109,27 +235,46 @@ export default function Header() {
                   >
                     <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center overflow-hidden">
                       {user?.avatar ? (
-                        <img src={user.avatar || "/placeholder.svg"} alt={user.name} className="w-full h-full object-cover" />
+                        <img
+                          src={user.avatar || "/placeholder.svg"}
+                          alt={user.name}
+                          className="w-full h-full object-cover"
+                        />
                       ) : (
-                        <span className="text-white text-xl font-bold">{getInitials(user.email)}</span>
+                        <span className="text-white text-xl font-bold">
+                          {getInitials(user.email)}
+                        </span>
                       )}
                     </div>
-                    <FaChevronDown className={`w-3 h-3 text-gray-500 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`} />
+                    <FaChevronDown
+                      className={`w-3 h-3 text-gray-500 transition-transform ${
+                        isDropdownOpen ? "rotate-180" : ""
+                      }`}
+                    />
                   </button>
 
                   {isDropdownOpen && (
                     <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
                       <div className="px-4 py-2 border-b border-gray-100">
-                        <p className="text-sm font-medium text-gray-900">{user?.name}</p>
+                        <p className="text-sm font-medium text-gray-900">
+                          {user?.name}
+                        </p>
                         <p className="text-xs text-gray-500">{user?.email}</p>
                       </div>
 
                       <div className="py-1">
-                        <Link to="/profile" className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300" onClick={() => setIsDropdownOpen(false)}>
+                        <Link
+                          to="/profile"
+                          className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300"
+                          onClick={() => setIsDropdownOpen(false)}
+                        >
                           <FaUser className="w-4 h-4 mr-3 text-gray-400" />
                           Profile
                         </Link>
-                        <button onClick={handleLogout} className="w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300 text-left">
+                        <button
+                          onClick={handleLogout}
+                          className="w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-white/40 transition-colors duration-300 text-left"
+                        >
                           <FaSignOutAlt className="w-4 h-4 mr-3 text-gray-400" />
                           Logout
                         </button>
@@ -140,31 +285,61 @@ export default function Header() {
               )}
             </div>
           </div>
-
-          {isMobileMenuOpen && (
-            <div className="md:hidden mt-2 space-y-2 pb-4">
-              <NavLinks />
+          <AnimatePresence mode="wait">
+            {isMobileMenuOpen && (
+              <motion.div
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+                variants={cardContainer}
+                className="absolute left-2 right-2 top-14 bg-white z-30 md:hidden mt-2 space-y-3 py-4 px-4 flex flex-col mx-auto border-b border-blue-600 shadow-pink-500 rounded-b-4xl"
+              >
+                {NavItems?.map(({ id, title, link }) => (
+                  <motion.div
+                    variants={cardVariant}
+                    key={id}
+                    onClick={() => {
+                      navigate(link);
+                      setIsMobileMenuOpen(false);
+                    }}
+                    className="px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105"
+                  >
+                    {title}
+                  </motion.div>
+                ))}
+                {/* <NavLinks />
               {!isLoggedIn ? (
-                <div className="space-y-2 pt-2">
+                <motion.div 
+                 initial='hidden'
+                 animate='visible'
+                 exit='exit'
+                 variants={cardContainer}
+                className="space-y-2 pt-2">
                   <Link to="/login" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Log in</Link>
                   <Link to="/signup" className="block px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Sign up</Link>
-                </div>
+                </motion.div>
               ) : (
                 <div className="space-y-2 pt-2">
                   <Link to="/profile" className="block px-4 py-2 rounded transition-all duration-200 text-gray-700 hover:text-cyan-500 hover:bg-white/40 hover:scale-105">Profile</Link>
                   <button onClick={handleLogout} className="w-full text-left px-4 py-2 rounded transition-colors duration-300 text-gray-700 hover:text-cyan-500 hover:bg-white/40">Logout</button>
-                </div>
-              )}
-            </div>
-          )}
+                </div> 
+              )
+              } */}
+              </motion.div>
+            )}
+          </AnimatePresence>
         </div>
-      </header>
+      </motion.header>
 
       {showLogoutConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40">
           <div className="bg-white rounded-lg shadow-lg p-6 w-80">
-            <h2 className="text-lg font-semibold mb-2 text-gray-900">Confirm Logout</h2>
-            <p className="text-gray-700 mb-4">Are you sure you want to log out?</p>
+            <h2 className="text-lg font-semibold mb-2 text-gray-900">
+              Confirm Logout
+            </h2>
+            <p className="text-gray-700 mb-4">
+              Are you sure you want to log out?
+            </p>
             <div className="flex justify-end space-x-3">
               <button
                 onClick={cancelLogout}
@@ -183,5 +358,5 @@ export default function Header() {
         </div>
       )}
     </>
-  )
+  );
 }
diff --git a/client/src/components/ResourceCard.jsx b/client/src/components/ResourceCard.jsx
index 0a3ebd8..ab2e8b1 100644
--- a/client/src/components/ResourceCard.jsx
+++ b/client/src/components/ResourceCard.jsx
@@ -28,12 +28,14 @@ export default function ResourceCard({
   link,
   featured = false,
 }) {
+
+
+ 
   const cardContent = (
     <div
       className={`bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group ${
         featured ? "h-full" : ""
-      }`}
-    >
+      }`}>
       <div className="aspect-video bg-gray-100 relative overflow-hidden">
         <img
           src={image || "/placeholder.svg"}
@@ -77,7 +79,8 @@ export default function ResourceCard({
   if (link) {
     return (
 
-      <a href={link} target="_blank" rel="noopener noreferrer" className="block">
+      <a 
+      href={link} target="_blank" rel="noopener noreferrer" className="block">
          {cardContent}
       </a>
 
diff --git a/client/src/context/motionContext.jsx b/client/src/context/motionContext.jsx
new file mode 100644
index 0000000..a8463aa
--- /dev/null
+++ b/client/src/context/motionContext.jsx
@@ -0,0 +1,71 @@
+import React, { Children, createContext } from "react";
+
+export const variantsContext = createContext({});
+
+export function VariantsProvider({ children }) {
+  const textvariant = {
+    hidden: { rotateY: 90, opacity: 0 },
+    visible: {
+      rotateY: 0,
+      opacity: 1,
+      transition: { delay: 0.5, duration: 1, ease: "easeOut" },
+    },
+  };
+  const paraVariant = {
+    hidden: { rotateY: 90, opacity: 0 },
+    visible: {
+      rotateY: 0,
+      opacity: 1,
+      transition: { delay: 0.7, duration: 1, ease: "easeOut" },
+    },
+  };
+  const sectionVariant = {
+    hidden: { opacity: 0, y: -100 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        delay: 0.3,
+        type: "spring",
+        stiffness: 120,
+        damping: 10,
+      },
+    },
+  };
+
+  const cardContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        delayChildren: 0.4,
+        staggerChildren: 0.25,
+        ease: "easeInOut",
+        when: "beforeChildren",
+      },
+    },
+  };
+  const cardVariant = {
+    hidden: { x: -80, y: -80, opacity: 0 },
+    visible: {
+      x: 0,
+      y: 0,
+      opacity: 1,
+      transition: { ease: "easeOut", duration: 0.6 },
+    },
+  };
+
+  const sharedData = {
+    sectionVariant,
+    textvariant,
+    cardVariant,
+    cardContainer,
+    paraVariant,
+  };
+  return (
+    <variantsContext.Provider value={sharedData}>
+      {children}
+    </variantsContext.Provider>
+  );
+}
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 7b0acbb..b7cffab 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,11 +1,18 @@
+import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import router from "./routes";
 import "./styles/index.css";
 import { AuthProvider } from "./context/AuthContext";
+import {VariantsProvider} from './context/motionContext'
+
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-	<AuthProvider>
-		<RouterProvider router={router} />
-	</AuthProvider>
+  <React.StrictMode>
+    <VariantsProvider>
+      <AuthProvider>
+        <RouterProvider router={router} />
+      </AuthProvider>
+      </VariantsProvider>
+</React.StrictMode>
 );
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 5d5c699..6bf7c86 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -1,13 +1,18 @@
-import { useState, useEffect } from "react"
-import { Link } from "react-router-dom"
-import { ArrowLeft } from "lucide-react"
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { motion } from "framer-motion";
 
 export default function Animated404() {
-  const [isVisible, setIsVisible] = useState(false)
+  const sharedData = useContext(variantsContext);
+  const { textvariant, paraVariant } = sharedData;
+  const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
-    setIsVisible(true)
-  }, [])
+    setIsVisible(true);
+  }, []);
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex items-center justify-center p-4 overflow-hidden">
@@ -27,9 +32,30 @@ export default function Animated404() {
         </div>
 
         <div className="mb-8 text-white">
-          <h2 className="text-3xl md:text-4xl font-bold mb-4">We have a problem!</h2>
-          <p className="text-xl opacity-90 mb-2">The page you're looking for isn't available.</p>
-          <p className="text-lg opacity-75">Let's get you back to Home.</p>
+          <motion.h2
+            initial="hidden"
+            animate="visible"
+            variants={textvariant}
+            className="text-3xl md:text-4xl font-bold mb-4"
+          >
+            We have a problem!
+          </motion.h2>
+          <motion.p
+            initial="hidden"
+            animate="visible"
+            variants={paraVariant}
+            className="text-xl opacity-90 mb-2"
+          >
+            The page you're looking for isn't available.
+          </motion.p>
+          <motion.p
+            initial="hidden"
+            animate="visible"
+            variants={paraVariant}
+            className="text-lg opacity-75"
+          >
+            Let's get you back to Home.
+          </motion.p>
         </div>
 
         <div className="absolute inset-0 pointer-events-none">
@@ -39,26 +65,30 @@ export default function Animated404() {
         </div>
 
         <div className="flex flex-col sm:flex-row gap-4 justify-center items-center relative z-10">
-          <Link
-            href="/"
-            className="px-6 py-3 bg-white text-gray-800 hover:bg-gray-100 shadow-lg rounded-md flex items-center gap-2 text-sm font-medium transition-all duration-200 transform hover:scale-105"
-          >
-            Return to Home
-          </Link>
+          <motion.div initial="hidden" animate="visible" variants={textvariant}>
+            <Link
+              href="/"
+              className="px-6 py-3 bg-white text-gray-800 hover:bg-gray-100 shadow-lg rounded-md flex items-center gap-2 text-sm font-medium transition-all duration-200 transform hover:scale-105"
+            >
+              Return to Home
+            </Link>
+          </motion.div>
 
-          <Link
-            href="#"
-            onClick={(e) => {
-              e.preventDefault()
-              history.back()
-            }}
-            className="px-6 py-3 border border-white text-white hover:bg-white hover:text-gray-800 shadow-lg rounded-md flex items-center gap-2 text-sm font-medium transition-all duration-200 transform hover:scale-105"
-          >
-            <ArrowLeft className="w-5 h-5" />
-            Go Back
-          </Link>
+          <motion.div initial="hidden" animate="visible" variants={textvariant}>
+            <Link
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                history.back();
+              }}
+              className="px-6 py-3 border border-white text-white hover:bg-white hover:text-gray-800 shadow-lg rounded-md flex items-center gap-2 text-sm font-medium transition-all duration-200 transform hover:scale-105"
+            >
+              <ArrowLeft className="w-5 h-5" />
+              Go Back
+            </Link>
+          </motion.div>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
index 21023d0..758e9a6 100644
--- a/client/src/pages/About.jsx
+++ b/client/src/pages/About.jsx
@@ -1,286 +1,377 @@
 import { Link } from "react-router-dom";
 import {
-	FaArrowRight,
-	FaRobot,
-	FaMicrophone,
-	FaChartLine,
-	FaUsers,
-	FaUserPlus,
-	FaCog,
-	FaPlay,
-	FaChartBar,
-	FaTrophy,
-	FaGithub,
-	FaStar,
-	FaCodeBranch,
-	FaHeart,
+  FaArrowRight,
+  FaRobot,
+  FaMicrophone,
+  FaChartLine,
+  FaUsers,
+  FaUserPlus,
+  FaCog,
+  FaPlay,
+  FaChartBar,
+  FaTrophy,
+  FaGithub,
+  FaStar,
 } from "react-icons/fa";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { motion } from "framer-motion";
 
 export default function About() {
-	const features = [
-		{
-			icon: <FaRobot className="w-6 h-6" />,
-			title: "AI-Powered Questions",
-			description:
-				"Get personalized interview questions tailored to your role and experience level.",
-		},
-		{
-			icon: <FaMicrophone className="w-6 h-6" />,
-			title: "Voice Analysis",
-			description:
-				"Practice speaking and receive feedback on your communication skills.",
-		},
-		{
-			icon: <FaChartLine className="w-6 h-6" />,
-			title: "Performance Analytics",
-			description:
-				"Track your progress with detailed insights and improvement suggestions.",
-		},
-		{
-			icon: <FaUsers className="w-6 h-6" />,
-			title: "Mock Interviews",
-			description:
-				"Experience realistic interview simulations in a safe environment.",
-		},
-	];
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant, cardVariant, cardContainer, paraVariant } = sharedData;
 
-	const steps = [
-		{
-			icon: <FaUserPlus className="w-6 h-6" />,
-			title: "Sign Up",
-			description:
-				"Create your free account and set up your profile with your career goals and experience level.",
-			color: "bg-green-500",
-		},
-		{
-			icon: <FaCog className="w-6 h-6" />,
-			title: "Customize Your Prep",
-			description:
-				"Choose your target role, company, and interview type. Upload your resume for personalized questions.",
-			color: "bg-purple-500",
-		},
-		{
-			icon: <FaPlay className="w-6 h-6" />,
-			title: "Start Practicing",
-			description:
-				"Begin your mock interviews with AI-generated questions. Practice speaking and get real-time feedback.",
-			color: "bg-blue-500",
-		},
-		{
-			icon: <FaChartBar className="w-6 h-6" />,
-			title: "Review & Improve",
-			description:
-				"Analyze your performance with detailed reports. Identify strengths and areas for improvement.",
-			color: "bg-orange-500",
-		},
-		{
-			icon: <FaTrophy className="w-6 h-6" />,
-			title: "Ace Your Interview",
-			description:
-				"Apply your learnings in real interviews with confidence and land your dream job!",
-			color: "bg-red-500",
-		},
-	];
-	return (
-		<div className="min-h-screen bg-white">
-			<section className="py-16 lg:py-20 bg-gradient-to-br from-white via-blue-50 to-green-50">
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
+  const features = [
+    {
+      icon: <FaRobot className="w-6 h-6" />,
+      title: "AI-Powered Questions",
+      description:
+        "Get personalized interview questions tailored to your role and experience level.",
+    },
+    {
+      icon: <FaMicrophone className="w-6 h-6" />,
+      title: "Voice Analysis",
+      description:
+        "Practice speaking and receive feedback on your communication skills.",
+    },
+    {
+      icon: <FaChartLine className="w-6 h-6" />,
+      title: "Performance Analytics",
+      description:
+        "Track your progress with detailed insights and improvement suggestions.",
+    },
+    {
+      icon: <FaUsers className="w-6 h-6" />,
+      title: "Mock Interviews",
+      description:
+        "Experience realistic interview simulations in a safe environment.",
+    },
+  ];
+
+  const steps = [
+    {
+      icon: <FaUserPlus className="w-6 h-6" />,
+      title: "Sign Up",
+      description:
+        "Create your free account and set up your profile with your career goals and experience level.",
+      color: "bg-green-500",
+    },
+    {
+      icon: <FaCog className="w-6 h-6" />,
+      title: "Customize Your Prep",
+      description:
+        "Choose your target role, company, and interview type. Upload your resume for personalized questions.",
+      color: "bg-purple-500",
+    },
+    {
+      icon: <FaPlay className="w-6 h-6" />,
+      title: "Start Practicing",
+      description:
+        "Begin your mock interviews with AI-generated questions. Practice speaking and get real-time feedback.",
+      color: "bg-blue-500",
+    },
+    {
+      icon: <FaChartBar className="w-6 h-6" />,
+      title: "Review & Improve",
+      description:
+        "Analyze your performance with detailed reports. Identify strengths and areas for improvement.",
+      color: "bg-orange-500",
+    },
+    {
+      icon: <FaTrophy className="w-6 h-6" />,
+      title: "Ace Your Interview",
+      description:
+        "Apply your learnings in real interviews with confidence and land your dream job!",
+      color: "bg-red-500",
+    },
+  ];
+  return (
+    <motion.div className="min-h-screen bg-white">
+      <motion.section
+        initial="hidden"
+        animate="visible"
+        variants={sectionVariant}
+        className="py-16 lg:py-20 bg-gradient-to-br from-white via-blue-50 to-green-50"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
             <div className="order-1 md:order-1">
-                <div className="text-sm font-medium text-blue-600 mb-4 uppercase tracking-wide">
-                    About Us
-                </div>
+              <div className="text-sm font-medium text-blue-600 mb-4 uppercase tracking-wide">
+                About Us
+              </div>
 
-                <h1 className="text-4xl lg:text-5xl mb-6 font-bold text-gray-900 leading-tight">
-                    Empowering Your Interview Success
-                </h1>
+              <motion.h1
+                initial="hidden"
+                animate="visible"
+                variants={textvariant}
+                className="text-4xl lg:text-5xl mb-6 font-bold text-gray-900 leading-tight"
+              >
+                Empowering Your Interview Success
+              </motion.h1>
 
-                <p className="text-xl text-gray-600 font-medium leading-relaxed mb-8">
-                    PrepEdge AI is a cutting-edge platform designed
-                    to revolutionize interview preparation. Our
-                    mission is to empower job seekers with the tools
-                    and resources they need to succeed in today's
-                    competitive job market. We leverage advanced AI
-                    technology to provide personalized feedback,
-                    realistic simulations, and comprehensive
-                    learning materials.
-                </p>
+              <motion.p
+                initial="hidden"
+                animate="visible"
+                variants={paraVariant}
+                className="text-xl text-gray-600 font-medium leading-relaxed mb-8"
+              >
+                PrepEdge AI is a cutting-edge platform designed to revolutionize
+                interview preparation. Our mission is to empower job seekers
+                with the tools and resources they need to succeed in today's
+                competitive job market. We leverage advanced AI technology to
+                provide personalized feedback, realistic simulations, and
+                comprehensive learning materials.
+              </motion.p>
 
-                <div className="flex flex-col sm:flex-row gap-6">
-                    <Link
-                        to="/signup"
-                        className="inline-flex items-center justify-center px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors"
-                    >
-                        Get Started
-                        <FaArrowRight className="ml-2" />
-                    </Link>
+              <div className="flex flex-col sm:flex-row gap-6">
+                <Link
+                  to="/signup"
+                  className="inline-flex items-center justify-center px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors">
+                  Get Started
+                  <FaArrowRight className="ml-2" />
+                </Link>
 
-                    <a
-                        href="#what-is"
-                        className="inline-flex items-center justify-center px-8 py-4 bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 font-semibold rounded-lg transition-colors"
-                    >
-                        Learn More
-                    </a>
-                </div>
+                <motion.a
+                  initial="hidden"
+                animate="visible"
+                variants={paraVariant}
+                  href="#what-is"
+                  className="inline-flex items-center justify-center px-8 py-4 bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-50 font-semibold rounded-lg transition-colors"
+                >
+                  Learn More
+                </motion.a>
+              </div>
             </div>
 
             <div className="order-2 md:order-2 h-64 md:h-80 lg:h-[400px] flex items-center justify-center">
-                <img
-                    src="/about.png"
-                    alt="PrepEdge AI platform illustration"
-                    className="w-full h-full object-contain max-w-sm md:max-w-md lg:max-w-lg"
-                />
+              <motion.img
+                initial="hidden"
+                animate="visible"
+                variants={paraVariant}
+                viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+                src="/about.png"
+                alt="PrepEdge AI platform illustration"
+                className="w-full h-full object-contain max-w-sm md:max-w-md lg:max-w-lg"
+              />
             </div>
+          </div>
         </div>
-    </div>
-</section>
+      </motion.section>
 
-			<section id="what-is" className="py-16 lg:py-20 bg-white">
-				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="text-center mb-16">
-						<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
-							What is PrepEdge AI?
-						</h2>
-						<p className="text-xl text-gray-600 max-w-3xl mx-auto">
-							PrepEdge AI is your personal interview coach,
-							powered by artificial intelligence. We combine
-							cutting-edge technology with proven interview
-							techniques to help you land your dream job.
-						</p>
-					</div>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-						{features.map((feature, index) => (
-							<div key={index} className="text-center group">
-								<div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
-									<div className="text-blue-600">
-										{feature.icon}
-									</div>
-								</div>
-								<h3 className="text-lg font-semibold text-gray-900 mb-2">
-									{feature.title}
-								</h3>
-								<p className="text-gray-600">
-									{feature.description}
-								</p>
-							</div>
-						))}
-					</div>
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+        id="what-is"
+        className="py-16 lg:py-20 bg-white"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <motion.h2
+              initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4"
+            >
+              What is PrepEdge AI?
+            </motion.h2>
+            <motion.p
+              initial="hidden"
+              whileInView="visible"
+              variants={paraVariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-xl text-gray-600 max-w-3xl mx-auto"
+            >
+              PrepEdge AI is your personal interview coach, powered by
+              artificial intelligence. We combine cutting-edge technology with
+              proven interview techniques to help you land your dream job.
+            </motion.p>
+          </div>
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            variants={cardContainer}
+            viewport={{ once: true, amount: 0.5 }}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"
+          >
+            {features.map((feature, index) => (
+              <motion.div
+                variants={cardVariant}
+                key={index}
+                className="text-center group"
+              >
+                <div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
+                  <div className="text-blue-600">{feature.icon}</div>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600">{feature.description}</p>
+              </motion.div>
+            ))}
+          </motion.div>
 
-					<div className="mt-16 bg-gray-50 rounded-2xl p-8 lg:p-12">
-						<div className="text-center">
-							<h3 className="text-2xl font-bold text-gray-900 mb-4">
-								Built for Modern Job Seekers
-							</h3>
-							<p className="text-lg text-gray-600 max-w-3xl mx-auto">
-								Whether you're a fresh graduate, career changer,
-								or experienced professional, PrepEdge AI adapts
-								to your needs. Our platform covers technical
-								interviews, behavioral questions, system design,
-								and more across various industries.
-							</p>
-						</div>
-					</div>
-				</div>
-			</section>
+          <div className="mt-16 bg-gray-50 rounded-2xl p-8 lg:p-12">
+            <div className="text-center">
+              <motion.h3
+                initial="hidden"
+                whileInView="visible"
+                variants={textvariant}
+                viewport={{ amount: 0.5, once: true }}
+                className="text-2xl font-bold text-gray-900 mb-4"
+              >
+                Built for Modern Job Seekers
+              </motion.h3>
+              <motion.p
+                initial="hidden"
+                whileInView="visible"
+                variants={paraVariant}
+                viewport={{ amount: 0.5, once: true }}
+                className="text-lg text-gray-600 max-w-3xl mx-auto"
+              >
+                Whether you're a fresh graduate, career changer, or experienced
+                professional, PrepEdge AI adapts to your needs. Our platform
+                covers technical interviews, behavioral questions, system
+                design, and more across various industries.
+              </motion.p>
+            </div>
+          </div>
+        </div>
+      </motion.section>
 
-			<section className="py-16 lg:py-20 bg-gray-50">
-				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="text-center mb-16">
-						<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
-							How to Use PrepEdge AI
-						</h2>
-						<p className="text-xl text-gray-600 max-w-3xl mx-auto">
-							Getting started is simple! Follow these steps to
-							begin your interview preparation journey.
-						</p>
-					</div>
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+        className="py-16 lg:py-20 bg-gray-50"
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <motion.h2
+              initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4"
+            >
+              How to Use PrepEdge AI
+            </motion.h2>
+            <motion.p
+              initial="hidden"
+              whileInView="visible"
+              variants={paraVariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-xl text-gray-600 max-w-3xl mx-auto"
+            >
+              Getting started is simple! Follow these steps to begin your
+              interview preparation journey.
+            </motion.p>
+          </div>
 
-					<div className="relative">
-						<div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-300 hidden lg:block"></div>
+          <div className="relative">
+            <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-300 hidden lg:block"></div>
 
-						<div className="space-y-12">
-							{steps.map((step, index) => (
-								<div
-									key={index}
-									className="relative flex items-start"
-								>
-									<div className="flex-shrink-0 relative">
-										<div
-											className={`w-16 h-16 ${step.color} rounded-full flex items-center justify-center text-white shadow-lg`}
-										>
-											{step.icon}
-										</div>
-										<div className="absolute -top-2 -right-2 w-6 h-6 bg-white border-2 border-gray-300 rounded-full flex items-center justify-center text-xs font-bold text-gray-600">
-											{index + 1}
-										</div>
-									</div>
-									<div className="ml-8 flex-1">
-										<div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
-											<h3 className="text-xl font-semibold text-gray-900 mb-2">
-												{step.title}
-											</h3>
-											<p className="text-gray-600 leading-relaxed">
-												{step.description}
-											</p>
-										</div>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              variants={cardContainer}
+              viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+              className="space-y-12"
+            >
+              {steps.map((step, index) => (
+                <motion.div
+                  variants={cardVariant}
+                  viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+                  key={index}
+                  className="relative flex items-start"
+                >
+                  <div className="flex-shrink-0 relative">
+                    <div
+                      className={`w-16 h-16 ${step.color} rounded-full flex items-center justify-center text-white shadow-lg`}
+                    >
+                      {step.icon}
+                    </div>
+                    <div className="absolute -top-2 -right-2 w-6 h-6 bg-white border-2 border-gray-300 rounded-full flex items-center justify-center text-xs font-bold text-gray-600">
+                      {index + 1}
+                    </div>
+                  </div>
+                  <div className="ml-8 flex-1">
+                    <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
+                      <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                        {step.title}
+                      </h3>
+                      <p className="text-gray-600 leading-relaxed">
+                        {step.description}
+                      </p>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
 
-					<div className="text-center mt-16">
-						<Link
-							to="/signup"
-							className="inline-flex items-center justify-center px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors text-lg"
-						>
-							Start Your Journey Today
-						</Link>
-					</div>
-				</div>
-			</section>
+          <div className="text-center mt-16">
+            <Link
+              to="/signup"
+              className="inline-flex items-center justify-center px-8 py-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors text-lg"
+            >
+              Start Your Journey Today
+            </Link>
+          </div>
+        </div>
+      </motion.section>
 
-			<section className="py-16 lg:py-20 bg-gradient-to-br from-gray-900 to-black text-white">
-				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-					<div className="bg-white bg-opacity-5 rounded-2xl p-8 lg:p-12 backdrop-blur-sm border border-white border-opacity-10 text-center">
-						<h3 className="text-2xl font-bold mb-4 text-gray-900">
-							Worth a Star?
-						</h3>
-						<p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
-							If this saved you time, sparked an idea, or just felt well-built - drop a star on the repo.
-                            It’s a great way to show support - and it helps others discover something they might find useful too.
-						</p>
-						<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-							<a
-								href="https://github.com/coderuzumaki/prepedge-ai"
-								target="_blank"
-								rel="noopener noreferrer"
-								className="inline-flex items-center justify-center px-8 py-4 bg-transparent border-gray-600 border-2 text-gray-900 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
-							>
-								<FaGithub className="w-5 h-5 mr-2" />
-								View on GitHub
-							</a>
-							<a
-								href="https://github.com/coderuzumaki/prepedge-ai"
-								target="_blank"
-								rel="noopener noreferrer"
-								className="inline-flex items-center justify-center px-8 py-4 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg transition-colors"
-							>
-								<FaStar className="w-5 h-5 mr-2" />
-								Star the Repository
-							</a>
-						</div>
-					</div>
+      <section className="py-16 lg:py-20 bg-gradient-to-br from-gray-900 to-black text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            variants={textvariant}
+            viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+            className="bg-white bg-opacity-5 rounded-2xl p-8 lg:p-12 backdrop-blur-sm border border-white border-opacity-10 text-center"
+          >
+            <h3 className="text-2xl font-bold mb-4 text-gray-900">
+              Worth a Star?
+            </h3>
+            <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
+              If this saved you time, sparked an idea, or just felt well-built -
+              drop a star on the repo. It’s a great way to show support - and it
+              helps others discover something they might find useful too.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+              <a
+                href="https://github.com/coderuzumaki/prepedge-ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center px-8 py-4 bg-transparent border-gray-600 border-2 text-gray-900 font-semibold rounded-lg hover:bg-gray-100 transition-colors"
+              >
+                <FaGithub className="w-5 h-5 mr-2" />
+                View on GitHub
+              </a>
+              <a
+                href="https://github.com/coderuzumaki/prepedge-ai"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center justify-center px-8 py-4 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg transition-colors"
+              >
+                <FaStar className="w-5 h-5 mr-2" />
+                Star the Repository
+              </a>
+            </div>
+          </motion.div>
 
-					<div className="mt-12 text-center">
-						<p className="text-gray-400 italic">
-							"Built for people chasing offers. Starred by those who get it."
-							<br />
-							<span className="text-blue-400">- CoderUzumaki</span>
-						</p>
-					</div>
-				</div>
-			</section>
-		</div>
-	);
+          <div className="mt-12 text-center">
+            <p className="text-gray-400 italic">
+              "Built for people chasing offers. Starred by those who get it."
+              <br />
+              <span className="text-blue-400">- CoderUzumaki</span>
+            </p>
+          </div>
+        </div>
+      </section>
+    </motion.div>
+  );
 }
diff --git a/client/src/pages/Contact.jsx b/client/src/pages/Contact.jsx
index 6c71388..27a7ea0 100644
--- a/client/src/pages/Contact.jsx
+++ b/client/src/pages/Contact.jsx
@@ -1,30 +1,55 @@
 import FAQ from "../components/FAQ";
 import ContactForm from "../components/ContactForm";
 import faqData from "../data/faqData";
+import { variantsContext } from "../context/motionContext";
+import { useContext } from "react";
+import { motion } from "framer-motion";
+
+
 
 export default function Contact() {
+	const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant, cardVariant, cardContainer, paraVariant } = sharedData;
+
 	return (
 		<div className="min-h-screen bg-white">
-			<section className="py-16 lg:py-20 bg-gray-50">
+			<motion.section 
+				initial="hidden"
+        animate="visible"
+        variants={sectionVariant}
+				className="py-16 lg:py-20 bg-gray-50">
 				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-					<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
+					<motion.h1 
+					initial="hidden"
+          animate="visible"
+          variants={textvariant}
+					className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
 						Get in Touch
-					</h1>
-					<p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
+					</motion.h1>
+					<motion.p 
+					initial="hidden"
+          animate="visible"
+          variants={paraVariant}
+					className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
 						Have questions about our platform? Need help with your
 						interview preparation? We're here to support you every
 						step of the way.
-					</p>
+					</motion.p>
 				</div>
-			</section>
+			</motion.section>
 
-			<section className="py-16" id="contact-form">
+			<motion.section 
+				initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+				className="py-16" id="contact-form">
 				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="w-4xl mx-auto">
 <ContactForm />
                     </div>
 				</div>
-			</section>
+			</motion.section>
 
 			<section className="py-16 bg-gray-50">
 				<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 72e2426..27b4ccb 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -3,29 +3,67 @@ import FAQ from "../components/FAQ";
 import faqData from "../data/faqData";
 import { useNavigate } from "react-router-dom";
 import { FaRobot, FaMicrophone, FaDesktop, FaChartLine } from "react-icons/fa";
+import { variantsContext } from "../context/motionContext";
+import { useContext, useState } from "react";
+import { motion } from "framer-motion";
 
 export default function Home() {
   const navigate = useNavigate();
 
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant, paraVariant } = sharedData;
+
+  const movingBalls = {
+    initial: { rotate: 0, opacity: 1, y: 50 },
+    animate: {
+      rotate: 360,
+      opacity: 1,
+      y: [0, -20, 0], // up and down path
+      transition: {
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 2,
+        ease: "easeInOut",
+      },
+    },
+  };
+
   return (
-    <main className="min-h-screen bg-white">
-      <section className="relative overflow-hidden">
+    <motion.main className="min-h-screen bg-white">
+      <motion.section
+        initial="hidden"
+        animate="visible"
+        variants={sectionVariant}
+        className="relative overflow-hidden"
+      >
         <div className="bg-gradient-to-br from-amber-200 via-orange-100 to-amber-300 rounded-3xl mx-4 mt-8 mb-16 lg:mx-8">
           <div className="max-w-7xl mx-auto px-6 py-16 lg:px-8 lg:py-24">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
               <div className="text-center lg:text-left">
-                <h1
+                <motion.h1
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
                   className="text-3xl sm:text-4xl lg:text-6xl font-bold text-gray-900 mb-6 break-words text-center px-2 sm:px-0"
                   style={{ wordBreak: "break-word", lineHeight: 1.15 }}
                 >
                   Ace Your Interviews with AI
-                </h1>
-                <p className="text-lg text-gray-700 mb-8 max-w-2xl">
-                  PrepEdge AI is an open-source, AI-powered interview
-                  preparation platform built with React.js and Tailwind CSS.
-                </p>
+                </motion.h1>
+                <div className="text-lg text-gray-700 mb-8 max-w-2xl">
+                  <motion.p
+                    initial="hidden"
+                    animate="visible"
+                    variants={paraVariant}
+                  >
+                    PrepEdge AI is an open-source, AI-powered interview
+                    preparation platform built with React.js and Tailwind CSS.
+                  </motion.p>
+                </div>
                 <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-                  <button
+                  <motion.button
+                    initial="hidden"
+                    animate="visible"
+                    variants={textvariant}
                     onClick={() => {
                       navigate("/interview/setup");
                     }}
@@ -33,8 +71,11 @@ export default function Home() {
                     aria-label="Get Started with PrepEdge AI"
                   >
                     Get Started
-                  </button>
-                  <button
+                  </motion.button>
+                  <motion.button
+                    initial="hidden"
+                    animate="visible"
+                    variants={textvariant}
                     onClick={() => {
                       navigate("/about");
                     }}
@@ -42,23 +83,44 @@ export default function Home() {
                     aria-label="Learn More About PrepEdge AI"
                   >
                     Learn More
-                  </button>
+                  </motion.button>
                 </div>
               </div>
 
               <div className="relative">
                 <div className="relative z-10">
                   <div className="w-80 h-96 mx-auto relative">
-                    <div className="absolute top-0 right-8 w-32 h-24 bg-white rounded-lg shadow-lg border-4 border-gray-800">
+                    <motion.div
+                      initial={{ scale: 0, opacity: 0 }}
+                      animate={{
+                        scale: 1,
+                        opacity: 1,
+                        transition: {
+                          delay: 0.5,
+                          type: "spring",
+                          stiffness: 120,
+                          damping: 40,
+                        },
+                      }}
+                      className="absolute top-0 right-8 w-32 h-24 bg-white rounded-lg shadow-lg border-4 border-gray-800"
+                    >
                       <div className="p-2">
                         <div className="w-full h-2 bg-gray-300 rounded mb-1"></div>
                         <div className="w-3/4 h-2 bg-gray-300 rounded mb-1"></div>
                         <div className="w-1/2 h-2 bg-gray-300 rounded mb-2"></div>
                         <div className="w-6 h-6 bg-orange-400 rounded-full ml-auto"></div>
                       </div>
-                    </div>
+                    </motion.div>
 
-                    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2">
+                    <motion.div
+                      initial={{ rotate: 0 }}
+                      animate={{ rotate: 360 }}
+                      transition={{
+                        duration: 2,
+                        ease: "easeInOut",
+                      }}
+                      className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
+                    >
                       <div className="w-16 h-16 bg-amber-700 rounded-full mb-2 mx-auto relative">
                         <div className="w-12 h-8 bg-gray-800 rounded-full absolute -bottom-2 left-1/2 transform -translate-x-1/2"></div>
                       </div>
@@ -66,47 +128,94 @@ export default function Home() {
                         <div className="w-16 h-20 bg-white rounded-t-2xl absolute top-2 left-1/2 transform -translate-x-1/2"></div>
                       </div>
                       <div className="w-20 h-16 bg-gray-800 rounded-b-2xl mx-auto"></div>
-                    </div>
+                    </motion.div>
                   </div>
                 </div>
 
-                <div className="absolute top-8 left-8 w-16 h-20 bg-green-600 rounded-full opacity-80"></div>
-                <div className="absolute bottom-8 right-4 w-12 h-16 bg-green-700 rounded-full opacity-60"></div>
+                <motion.div
+                  initial="initial"
+                  animate="animate"
+                  variants={movingBalls}
+                  className="absolute top-8 left-8 w-16 h-20 bg-green-600 rounded-full opacity-80"
+                ></motion.div>
+                <motion.div
+                  initial="initial"
+                  animate="animate"
+                  variants={movingBalls}
+                  className="absolute bottom-8 right-4 w-12 h-16 bg-green-700 rounded-full opacity-60"
+                ></motion.div>
                 <div className="absolute top-1/2 left-4 w-8 h-10 bg-green-500 rounded-full opacity-70"></div>
               </div>
             </div>
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.3 }}
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"
+      >
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">
+          <motion.h2
+            initial="hidden"
+            whileInView="visible"
+            variants={textvariant}
+            viewport={{ once: true }}
+            className="text-3xl font-bold text-gray-900 mb-4"
+          >
             Our Features
-          </h2>
-          <p className="text-gray-600 max-w-2xl mx-auto">
+          </motion.h2>
+
+          <motion.p
+            initial="hidden"
+            whileInView="visible"
+            variants={paraVariant}
+            viewport={{ once: true }}
+            className="text-gray-600 max-w-2xl mx-auto"
+          >
             Discover how our platform can help you ace your next interview with
             these powerful features.
-          </p>
+          </motion.p>
         </div>
 
         <div className="space-y-16">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             <div>
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              <motion.h3
+                initial="hidden"
+                whileInView="visible"
+                variants={textvariant}
+                viewport={{ once: true }}
+                className="text-2xl font-bold text-gray-900 mb-4"
+              >
                 AI-Powered Questions
-              </h3>
-              <p className="text-gray-600 text-lg">
+              </motion.h3>
+              <motion.p
+                initial="hidden"
+                whileInView="visible"
+                variants={paraVariant}
+                viewport={{ once: true }}
+                className="text-gray-600 text-lg"
+              >
                 Practice with AI-generated interview questions tailored to your
                 role and experience level.
-              </p>
+              </motion.p>
             </div>
             <div className="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-8 flex justify-center">
-              <div className="w-32 h-32 bg-teal-600 rounded-2xl flex items-center justify-center relative">
+              <motion.div
+                initial="hidden"
+                whileInView="visible"
+                variants={paraVariant}
+                viewport={{ once: true }}
+                className="w-32 h-32 bg-teal-600 rounded-2xl flex items-center justify-center relative"
+              >
                 <FaRobot className="text-4xl text-white" />
                 <div className="absolute -top-2 -right-2 w-8 h-8 bg-teal-400 rounded-full"></div>
                 <div className="absolute -bottom-2 -left-2 w-6 h-6 bg-teal-400 rounded-full"></div>
-              </div>
+              </motion.div>
             </div>
           </div>
 
@@ -114,38 +223,74 @@ export default function Home() {
             <div className="order-2 lg:order-1">
               <div className="bg-gradient-to-br from-orange-50 to-amber-100 rounded-2xl p-8 flex justify-center">
                 <div className="relative">
-                  <div className="w-32 h-32 bg-amber-600 rounded-full flex items-center justify-center relative">
+                  <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    variants={paraVariant}
+                    viewport={{ once: true }}
+                    className="w-32 h-32 bg-amber-600 rounded-full flex items-center justify-center relative"
+                  >
                     <div className="w-20 h-20 bg-amber-700 rounded-full"></div>
                     <div className="absolute -right-4 bottom-4 w-8 h-12 bg-gray-800 rounded-full flex items-center justify-center">
                       <FaMicrophone className="text-white text-sm" />
                     </div>
-                  </div>
+                  </motion.div>
                 </div>
               </div>
             </div>
             <div className="order-1 lg:order-2">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              <motion.h3
+                initial="hidden"
+                whileInView="visible"
+                variants={textvariant}
+                viewport={{ once: true }}
+                className="text-2xl font-bold text-gray-900 mb-4"
+              >
                 Voice Support
-              </h3>
-              <p className="text-gray-600 text-lg">
+              </motion.h3>
+              <motion.p
+                initial="hidden"
+                whileInView="visible"
+                variants={paraVariant}
+                viewport={{ once: true }}
+                className="text-gray-600 text-lg"
+              >
                 Get real-time feedback on your answers with voice recognition
                 and analysis.
-              </p>
+              </motion.p>
             </div>
           </div>
 
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             <div>
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              <motion.h3
+                initial="hidden"
+                whileInView="visible"
+                variants={textvariant}
+                viewport={{ once: true }}
+                className="text-2xl font-bold text-gray-900 mb-4"
+              >
                 Analytics and Insights
-              </h3>
-              <p className="text-gray-600 text-lg">
+              </motion.h3>
+              <motion.p
+                initial="hidden"
+                whileInView="visible"
+                variants={paraVariant}
+                viewport={{ once: true }}
+                className="text-gray-600 text-lg"
+              >
                 Track your progress and identify areas for improvement with
                 detailed analytics.
-              </p>
+              </motion.p>
             </div>
             <div className="bg-gradient-to-br from-green-50 to-emerald-100 rounded-2xl p-8 flex justify-center">
-              <div className="w-48 h-32 bg-teal-700 rounded-lg p-4 relative">
+              <motion.div
+                initial="hidden"
+                whileInView="visible"
+                variants={textvariant}
+                viewport={{ once: true }}
+                className="w-48 h-32 bg-teal-700 rounded-lg p-4 relative"
+              >
                 <div className="bg-white rounded p-2 h-full">
                   <div className="flex justify-between mb-2">
                     <div className="w-3 h-3 bg-blue-400 rounded-full"></div>
@@ -187,21 +332,39 @@ export default function Home() {
                     ></div>
                   </div>
                 </div>
-              </div>
+              </motion.div>
             </div>
           </div>
         </div>
-      </section>
+      </motion.section>
 
-      <section className="max-w-7xl mx-auto px-4 py-16 mb-16">
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.4 }}
+        className="max-w-7xl mx-auto px-4 py-16 mb-16"
+      >
         <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold text-gray-900 mb-4">
+          <motion.h2
+            initial="hidden"
+            whileInView="visible"
+            variants={textvariant}
+            viewport={{ once: true }}
+            className="text-3xl font-bold text-gray-900 mb-4"
+          >
             What You’ll Get
-          </h2>
-          <p className="text-gray-600 max-w-2xl mx-auto">
+          </motion.h2>
+          <motion.p
+            initial="hidden"
+            whileInView="visible"
+            variants={paraVariant}
+            viewport={{ once: true }}
+            className="text-gray-600 max-w-2xl mx-auto"
+          >
             Everything you need to confidently prepare, practice, and perform
             your best.
-          </p>
+          </motion.p>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -221,16 +384,22 @@ export default function Home() {
             description="Track your performance and identify areas for improvement with detailed analytics."
           />
         </div>
-      </section>
+      </motion.section>
 
-      <section className="mb-16">
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.4 }}
+        className="mb-16"
+      >
         <FAQ
           title="Need Help? Start Here."
           subtitle="Explore answers to common questions — and if you need more, we’re just a message away."
           faqs={faqData}
           allowMultipleOpen={false}
         />
-      </section>
-    </main>
+      </motion.section>
+    </motion.main>
   );
 }
diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
index ffa06b6..7ab42cb 100644
--- a/client/src/pages/Login.jsx
+++ b/client/src/pages/Login.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { FaGithub, FaGoogle, FaEyeSlash, FaEye } from "react-icons/fa";
 import Toast from "../components/Toast";
@@ -11,8 +11,13 @@ import {
 } from "../firebase";
 import { GithubAuthProvider } from "firebase/auth";
 import axios from "axios";
+import {variantsContext} from '../context/motionContext'
+import {motion} from 'framer-motion'
 
 export default function Login() {
+	const sharedData = useContext(variantsContext);
+	const { sectionVariant, textvariant} = sharedData;
+
 	const githubProvider = new GithubAuthProvider();
 	const {	user, setUser } = useAuth();
 
@@ -184,7 +189,11 @@ export default function Login() {
 	};
 
 	return (
-		<div className="min-h-screen bg-gray-50 min-w-screen">
+		<motion.div
+		 initial='hidden'
+		 animate='visible'
+		 variants={sectionVariant}
+		className="min-h-screen bg-gray-50 min-w-screen">
 			{toast.show && (
 				<Toast
 					message={toast.message}
@@ -197,23 +206,35 @@ export default function Login() {
 				<div className="w-full max-w-md">
 					<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
 						<div className="text-center mb-8">
-							<h1 className="text-2xl font-bold text-gray-900">
+							<motion.h1 
+							 initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
+
+							className="text-2xl font-bold text-gray-900">
 								Login to your account
-							</h1>
+							</motion.h1>
 						</div>
 
 						<form
 							className="space-y-6"
 							onSubmit={(e) => e.preventDefault()}
 						>
-							<div>
-								<label
+							<motion.div
+							>
+								<motion.label
+								  initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 									htmlFor="email"
 									className="block text-sm font-medium text-gray-700 mb-1"
 								>
 									Email address
-								</label>
-								<input
+								</motion.label>
+								<motion.input
+								  initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 									id="email"
 									type="email"
 									value={email}
@@ -235,17 +256,23 @@ export default function Login() {
 										Email is required
 									</p>
 								)}
-							</div>
+							</motion.div>
 
 							<div>
-								<label
+								<motion.label
+								 initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 									htmlFor="password"
 									className="block text-sm font-medium text-gray-700 mb-1"
 								>
 									Password
-								</label>
+								</motion.label>
 								<div className="relative">
-									<input
+									<motion.input
+									 initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 										id="password"
 										type={
 											showPassword ? "text" : "password"
@@ -260,6 +287,7 @@ export default function Login() {
 										)}`}
 									/>
 									<button
+									 
 										type="button"
 										onClick={() =>
 											setShowPassword(!showPassword)
@@ -294,13 +322,16 @@ export default function Login() {
 								</div>
 							</div>
 
-							<button
+							<motion.button
+							initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 								type="submit"
 								onClick={handleEmailLogin}
 								className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
 							>
 								Login
-							</button>
+							</motion.button>
 						</form>
 
 						<div className="mt-6">
@@ -316,24 +347,34 @@ export default function Login() {
 							</div>
 
 							<div className="mt-6 grid grid-cols-2 gap-3">
-								<button
+								<motion.button
+								initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 									onClick={handleGithubLogin}
 									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
 									<FaGithub className="w-4 h-4 mr-2" />
 									Github
-								</button>
-								<button
+								</motion.button>
+								<motion.button
+								initial='hidden'
+							 animate='visible'
+							 variants={textvariant}
 									onClick={handleGoogleLogin}
 									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
 								>
 									<FaGoogle className="w-4 h-4 mr-2" />
 									Google
-								</button>
+								</motion.button>
 							</div>
 						</div>
 
 						<div className="mt-6 text-center">
-							<p className="text-sm text-gray-600">
+							<motion.p 
+							initial='hidden'
+							animate='visible'
+							variants={textvariant}
+							className="text-sm text-gray-600">
 								{"Don't have an account? "}
 								<Link
 									to="/signup"
@@ -341,11 +382,11 @@ export default function Login() {
 								>
 									Sign Up
 								</Link>
-							</p>
+							</motion.p>
 						</div>
 					</div>
 				</div>
 			</main>
-		</div>
+		</motion.div>
 	);
 }
diff --git a/client/src/pages/Resources.jsx b/client/src/pages/Resources.jsx
index e015dd3..7caeec3 100644
--- a/client/src/pages/Resources.jsx
+++ b/client/src/pages/Resources.jsx
@@ -2,181 +2,285 @@ import { Link } from "react-router-dom";
 import ResourceCard from "../components/ResourceCard";
 import resources from "../data/resourcesData";
 import featuredResources from "../data/featuredResourcesData";
+import { motion } from "framer-motion";
+import { useContext } from "react";
+import { variantsContext } from "../context/motionContext";
 
 export default function HeroSection() {
-	return (
-		<div>
-			<section className="relative bg-gradient-to-br from-blue-500 via-green-500 to-emerald-600 overflow-hidden min-h-[600px]">
-				<div className="absolute inset-0">
-					<div className="absolute inset-0 bg-neutral-950 bg-opacity-10"></div>
-					<div className="absolute inset-0 opacity-5">
-						<svg
-							className="w-full h-full"
-							viewBox="0 0 100 100"
-							preserveAspectRatio="none"
-						>
-							<defs>
-								<pattern
-									id="grid"
-									width="10"
-									height="10"
-									patternUnits="userSpaceOnUse"
-								>
-									<path
-										d="M 10 0 L 0 0 0 10"
-										fill="none"
-										stroke="white"
-										strokeWidth="0.5"
-									/>
-								</pattern>
-							</defs>
-							<rect width="100" height="100" fill="url(#grid)" />
-						</svg>
-					</div>
-				</div>
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant, cardVariant, cardContainer, paraVariant } =
+    sharedData;
 
-				<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
-					<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-						<div className="text-stone-50 order-2 lg:order-1">
-							<div className="max-w-lg">
-								<h1 className="text-4xl lg:text-5xl font-bold mb-6 leading-tight text-stone-50">
-									Ace Your Interviews with
-									<span className="block text-white">
-										Expert Resources
-									</span>
-								</h1>
-								<p className="text-xl text-stone-50 opacity-90 mb-8 leading-relaxed">
-									Unlock a wealth of curated resources to help
-									you prepare for your next interview. From
-									coding challenges to behavioral questions,
-									we've got you covered.
-								</p>
+  const containerVariant = {
+    hidden: { y: 50, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        damping: 15,
+      },
+    },
+  };
 
-								{/* Stats */}
-								<div className="flex items-center space-x-6 mb-8">
-									<div className="text-center">
-										<div className="text-2xl font-bold text-stone-50">
-											50+
-										</div>
-										<div className="text-sm text-stone-50 opacity-80">
-											Resources
-										</div>
-									</div>
-									<div className="text-center">
-										<div className="text-2xl font-bold text-stone-50">
-											10k+
-										</div>
-										<div className="text-sm text-stone-50 opacity-80">
-											Students
-										</div>
-									</div>
-									<div className="text-center">
-										<div className="text-2xl font-bold text-stone-50">
-											95%
-										</div>
-										<div className="text-sm text-stone-50 opacity-80">
-											Success Rate
-										</div>
-									</div>
-								</div>
+  return (
+    <div>
+      <motion.section
+        initial="hidden"
+        animate="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.2, margin: "-30px" }}
+        className="relative bg-gradient-to-br from-blue-500 via-green-500 to-emerald-600 overflow-hidden min-h-[600px]"
+      >
+        <div className="absolute inset-0">
+          <div className="absolute inset-0 bg-neutral-950 bg-opacity-10"></div>
+          <div className="absolute inset-0 opacity-5">
+            <svg
+              className="w-full h-full"
+              viewBox="0 0 100 100"
+              preserveAspectRatio="none"
+            >
+              <defs>
+                <pattern
+                  id="grid"
+                  width="10"
+                  height="10"
+                  patternUnits="userSpaceOnUse"
+                >
+                  <path
+                    d="M 10 0 L 0 0 0 10"
+                    fill="none"
+                    stroke="white"
+                    strokeWidth="0.5"
+                  />
+                </pattern>
+              </defs>
+              <rect width="100" height="100" fill="url(#grid)" />
+            </svg>
+          </div>
+        </div>
 
-								<div className="flex flex-col sm:flex-row gap-4">
-									<a
-										href="#all-resources"
-										className="inline-flex items-center justify-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
-									>
-										Explore All Resources
-										<svg
-											className="w-5 h-5 ml-2"
-											fill="currentColor"
-											viewBox="0 0 20 20"
-										>
-											<path
-												fillRule="evenodd"
-												d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-												clipRule="evenodd"
-											/>
-										</svg>
-									</a>
-									<Link
-										to="/interview/setup"
-										className="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white text-stone-50 font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition-all duration-200"
-									>
-										Start Practicing
-									</Link>
-								</div>
-							</div>
-						</div>
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div className="text-stone-50 order-2 lg:order-1">
+              <div className="max-w-lg">
+                <motion.h1
+                  initial="hidden"
+                  whileInView="visible"
+                  variants={textvariant}
+                  viewport={{ once: true, amount: 0.5 }}
+                  className="text-4xl lg:text-5xl font-bold mb-6 leading-tight text-stone-50"
+                >
+                  Ace Your Interviews with
+                  <span className="block text-white">Expert Resources</span>
+                </motion.h1>
+                <motion.p
+                  initial="hidden"
+                  whileInView="visible"
+                  variants={paraVariant}
+                  viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+                  className="text-xl text-stone-50 opacity-90 mb-8 leading-relaxed"
+                >
+                  Unlock a wealth of curated resources to help you prepare for
+                  your next interview. From coding challenges to behavioral
+                  questions, we've got you covered.
+                </motion.p>
 
-						<div className="relative order-1 lg:order-2">
-							<div className="relative z-10">
-								<div className="relative bg-white bg-opacity-10 rounded-3xl p-8 backdrop-blur-sm border border-white border-opacity-20">
-									<img
-										src="/hero-image.jpg"
-										alt="Student studying with laptop, books, and headphones in a modern workspace"
-										className="w-full h-auto max-w-md mx-auto drop-shadow-2xl"
-										crossOrigin="anonymous"
-									/>
-								</div>
+                {/* Stats */}
+                <div className="flex items-center space-x-6 mb-8">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-stone-50">50+</div>
+                    <div className="text-sm text-stone-50 opacity-80">
+                      Resources
+                    </div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-stone-50">10k+</div>
+                    <div className="text-sm text-stone-50 opacity-80">
+                      Students
+                    </div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-stone-50">95%</div>
+                    <div className="text-sm text-stone-50 opacity-80">
+                      Success Rate
+                    </div>
+                  </div>
+                </div>
 
-								<div className="absolute -top-4 -right-4 w-20 h-20 bg-white bg-opacity-10 rounded-full backdrop-blur-sm animate-pulse"></div>
-								<div className="absolute -bottom-6 -left-6 w-16 h-16 bg-blue-300 bg-opacity-20 rounded-full backdrop-blur-sm animate-bounce"></div>
+                <div className="flex flex-col sm:flex-row gap-4">
+                  <a
+                    href="#all-resources"
+                    className="inline-flex items-center justify-center px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+                  >
+                    Explore All Resources
+                    <svg
+                      className="w-5 h-5 ml-2"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </a>
+                  <Link
+                    to="/interview/setup"
+                    className="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white text-stone-50 font-semibold rounded-lg hover:bg-white hover:text-blue-600 transition-all duration-200"
+                  >
+                    Start Practicing
+                  </Link>
+                </div>
+              </div>
+            </div>
 
-								<div className="absolute -left-4 top-1/4 bg-white bg-opacity-90 rounded-lg p-3 shadow-lg transform -rotate-3 hover:rotate-0 transition-transform">
-									<div className="flex items-center space-x-2">
-										<div className="w-3 h-3 bg-green-500 rounded-full"></div>
-										<span className="text-sm font-medium text-gray-800">
-											Interactive Learning
-										</span>
-									</div>
-								</div>
+            <div className="relative order-1 lg:order-2">
+              <div className="relative z-10">
+                <motion.div
+                  initial="hidden"
+                  animate="visible"
+                  variants={containerVariant}
+                  className="relative bg-white bg-opacity-10 rounded-3xl p-8 backdrop-blur-sm border border-white border-opacity-20"
+                >
+                  <motion.img
+                    initial="hidden"
+                    animate="visible"
+                    variants={textvariant}
+                    src="/hero-image.jpg"
+                    alt="Student studying with laptop, books, and headphones in a modern workspace"
+                    className="w-full h-auto max-w-md mx-auto drop-shadow-2xl"
+                    crossOrigin="anonymous"
+                  />
+                </motion.div>
 
-								<div className="absolute -right-6 top-2/3 bg-white bg-opacity-90 rounded-lg p-3 shadow-lg transform rotate-3 hover:rotate-0 transition-transform">
-									<div className="flex items-center space-x-2">
-										<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
-										<span className="text-sm font-medium text-gray-800">
-											Expert Guidance
-										</span>
-									</div>
-								</div>
-							</div>
+                <div className="absolute -top-4 -right-4 w-20 h-20 bg-white bg-opacity-10 rounded-full backdrop-blur-sm animate-pulse"></div>
+                <div className="absolute -bottom-6 -left-6 w-16 h-16 bg-blue-300 bg-opacity-20 rounded-full backdrop-blur-sm animate-bounce"></div>
 
-							<div className="absolute top-8 right-8 w-32 h-32 bg-gradient-to-br from-teal-300 to-green-300 rounded-full opacity-20 blur-xl"></div>
-							<div className="absolute bottom-8 left-8 w-24 h-24 bg-gradient-to-br from-green-300 to-teal-300 rounded-full opacity-20 blur-xl"></div>
-						</div>
-					</div>
-				</div>
-			</section>
+                <div className="absolute -left-4 top-1/4 bg-white bg-opacity-90 rounded-lg p-3 shadow-lg transform -rotate-3 hover:rotate-0 transition-transform">
+                  <div className="flex items-center space-x-2">
+                    <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+                    <span className="text-sm font-medium text-gray-800">
+                      Interactive Learning
+                    </span>
+                  </div>
+                </div>
 
-            <section id="featured-resources" className="relative py-16 bg-gradient-to-br from-gray-200 via-stone-50 to-white">
-                <div className="absolute inset-0">
-					<div className="absolute inset-0 bg-gray-100 bg-opacity-10"></div>
-				</div>
-				<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
-                    <div className="mb-12">
-                        <h2 className="text-3xl font-bold text-gray-900 mb-2">Featured Resources</h2>
-                        <p className="text-lg text-gray-500 mb-4">Handpicked Resources to get yourself started on your Interview prep journey!</p>
-                    </div>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-6">
-						{featuredResources.map((resource) => (
-							<ResourceCard key={resource.id} {...resource} />
-						))}
-					</div>
-				</div>
-			</section>
+                <div className="absolute -right-6 top-2/3 bg-white bg-opacity-90 rounded-lg p-3 shadow-lg transform rotate-3 hover:rotate-0 transition-transform">
+                  <div className="flex items-center space-x-2">
+                    <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+                    <span className="text-sm font-medium text-gray-800">
+                      Expert Guidance
+                    </span>
+                  </div>
+                </div>
+              </div>
 
-			<section id="all-resources" className="py-16 bg-stone-50 -mb-20">
-				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <div className="mb-12">
-                        <h2 className="text-3xl font-bold text-gray-900 mb-8">All Resources</h2>
-                    </div>
-					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-						{resources.map((resource) => (
-							<ResourceCard key={resource.id} {...resource} />
-						))}
-					</div>
-				</div>
-			</section>
-		</div>
-	);
+              <div className="absolute top-8 right-8 w-32 h-32 bg-gradient-to-br from-teal-300 to-green-300 rounded-full opacity-20 blur-xl"></div>
+              <div className="absolute bottom-8 left-8 w-24 h-24 bg-gradient-to-br from-green-300 to-teal-300 rounded-full opacity-20 blur-xl"></div>
+            </div>
+          </div>
+        </div>
+      </motion.section>
+
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0.2, margin: "-30px" }}
+        id="featured-resources"
+        className="relative py-16 bg-gradient-to-br from-gray-200 via-stone-50 to-white"
+      >
+        <div className="absolute inset-0">
+          <div className="absolute inset-0 bg-gray-100 bg-opacity-10"></div>
+        </div>
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
+          <div className="mb-12">
+            <motion.h2
+              initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-3xl font-bold text-gray-900 mb-2"
+            >
+              Featured Resources
+            </motion.h2>
+            <motion.p
+              initial="hidden"
+              whileInView="visible"
+              variants={paraVariant}
+              viewport={{ amount: 0.5, once: true }}
+              className="text-lg text-gray-500 mb-4"
+            >
+              Handpicked Resources to get yourself started on your Interview
+              prep journey!
+            </motion.p>
+          </div>
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            variants={cardContainer}
+            viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-6"
+          >
+            {featuredResources.map((resource) => (
+              <motion.div
+                key={resource.id}
+                variants={cardVariant}
+                viewport={{ once: true, amount: 0.2, margin: "-50px" }}
+              >
+                <ResourceCard
+                  key={resource.id}
+                  {...resource}
+                  cardVariant={cardVariant}
+                />
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </motion.section>
+
+      <motion.section
+        initial="hidden"
+        whileInView="visible"
+        variants={sectionVariant}
+        viewport={{ once: true, amount: 0 }}
+        id="all-resources"
+        className="py-16 bg-stone-50 "
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mb-20">
+          <div className="mb-12">
+            <motion.h2
+              initial="hidden"
+              whileInView="visible"
+              variants={textvariant}
+              viewport={{ once: true }}
+              className="text-3xl font-bold text-gray-900 mb-8"
+            >
+              All Resources
+            </motion.h2>
+          </div>
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            variants={cardContainer}
+            viewport={{ once: true }}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+          >
+            {resources.map((resource) => (
+              <motion.div
+                key={resource.id}
+                variants={cardVariant}
+                viewport={{ once: true, amount: 0.5, margin: "-50px" }}
+              >
+                <ResourceCard {...resource} cardVariant={cardVariant} />
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </motion.section>
+    </div>
+  );
 }
diff --git a/client/src/pages/SignUp.jsx b/client/src/pages/SignUp.jsx
index 90fca59..433c200 100644
--- a/client/src/pages/SignUp.jsx
+++ b/client/src/pages/SignUp.jsx
@@ -1,432 +1,461 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { FaGithub, FaGoogle, FaEye, FaEyeSlash } from "react-icons/fa";
 import Toast from "../components/Toast";
 import { useAuth } from "../context/AuthContext";
 import {
-	auth,
-	googleProvider,
-	signInWithPopup,
-	createUserWithEmailAndPassword,
-	updateProfile,
+  auth,
+  googleProvider,
+  signInWithPopup,
+  createUserWithEmailAndPassword,
+  updateProfile,
 } from "../firebase";
 import { GithubAuthProvider } from "firebase/auth";
 import axios from "axios";
+import { variantsContext } from "../context/motionContext";
+import { motion } from "framer-motion";
 
 export default function SignUp() {
-	const githubProvider = new GithubAuthProvider();
-	const { user, setUser } = useAuth();
-
-	const [name, setName] = useState("");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [showPassword, setShowPassword] = useState(false);
-	const [validation, setValidation] = useState({
-		name: "untouched",
-		email: "untouched",
-		password: "untouched",
-	});
-	const [toast, setToast] = useState({
-		show: false,
-		message: "",
-		type: "success",
-	});
-	const [passwordStrength, setPasswordStrength] = useState("");
-
-	const navigate = useNavigate();
-
-	const validateName = (value) => {
-		if (value.trim() === "") return "empty";
-		if (value.trim().length < 2) return "invalid";
-		return "valid";
-	};
-
-	const validateEmail = (value) => {
-		if (value.trim() === "") return "empty";
-		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-		return emailRegex.test(value) ? "valid" : "invalid";
-	};
-
-	const validatePassword = (value) => {
-		if (value === "") return "empty";
-		if (value.length < 6) return "invalid";
-		return "valid";
-	};
-
-	const calculatePasswordStrength = (value) => {
-		let strength = "Weak";
-		let strengthScore = 0;
-
-		if (value.length >= 6) strengthScore++;
-		if (/[A-Z]/.test(value)) strengthScore++;
-		if (/[0-9]/.test(value)) strengthScore++;
-		if (/[^A-Za-z0-9]/.test(value)) strengthScore++;
-
-		if (strengthScore >= 4) strength = "Strong";
-		else if (strengthScore >= 2) strength = "Medium";
-
-		return strength;
-	};
-
-	const handleNameChange = (value) => {
-		setName(value);
-		setValidation((prev) => ({
-			...prev,
-			name: validateName(value),
-		}));
-	};
-
-	const handleEmailChange = (value) => {
-		setEmail(value);
-		setValidation((prev) => ({
-			...prev,
-			email: validateEmail(value),
-		}));
-	};
-
-	const handlePasswordChange = (value) => {
-		setPassword(value);
-		setValidation((prev) => ({
-			...prev,
-			password: validatePassword(value),
-		}));
-		setPasswordStrength(calculatePasswordStrength(value));
-	};
-
-	const getRingColor = (fieldValidation) => {
-		switch (fieldValidation) {
-			case "empty":
-				return "focus:ring-orange-500 focus:border-orange-500";
-			case "invalid":
-				return "focus:ring-red-500 focus:border-red-500 ring-2 ring-red-500 border-red-500";
-			case "valid":
-				return "focus:ring-blue-500 focus:border-blue-500";
-			default:
-				return "focus:ring-blue-500 focus:border-blue-500";
-		}
-	};
-
-	const showToast = (message, type) => {
-		setToast({ show: true, message, type });
-	};
-
-	const hideToast = () => {
-		setToast((prev) => ({ ...prev, show: false }));
-	};
-
-	const handleEmailSignUp = async () => {
-		const nameValidation = validateName(name);
-		const emailValidation = validateEmail(email);
-		const passwordValidation = validatePassword(password);
-
-		setValidation({
-			name: nameValidation,
-			email: emailValidation,
-			password: passwordValidation,
-		});
-
-		if (
-			nameValidation !== "valid" ||
-			emailValidation !== "valid" ||
-			passwordValidation !== "valid"
-		) {
-			showToast("Please fill in all fields correctly", "error");
-			return;
-		}
-
-		try {
-			const userCredential = await createUserWithEmailAndPassword(
-				auth,
-				email,
-				password
-			);
-			await updateProfile(userCredential.user, { displayName: name });
-
-			const idToken = await userCredential.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			showToast("Account created successfully!", "success");
-			setTimeout(() => {
-				navigate("/login");
-			}, 500);
-		} catch (err) {
-			showToast(
-				err.message || "An error occurred during sign up",
-				"error"
-			);
-		}
-	};
-
-	//for google
-	const handleGoogleLogin = async () => {
-		try {
-			const result = await signInWithPopup(auth, googleProvider);
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			setUser(result.user);
-			console.log("User signed in:", user);
-
-			showToast("Successfully signed in with Google!", "success");
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (err) {
-			showToast(
-				err.message || "An error occurred during Google sign in",
-				"error"
-			);
-		}
-	};
-
-	//for Github
-	const handleGithub = async () => {
-		try {
-			const result = await signInWithPopup(auth, githubProvider);
-			const credential = GithubAuthProvider.credentialFromResult(result);
-			const token = credential.accessToken;
-
-			const idToken = await result.user.getIdToken();
-			await axios.post(
-				`${import.meta.env.VITE_API_URL}/api/auth/register`,
-				{},
-				{
-					headers: {
-						Authorization: `Bearer ${idToken}`,
-					},
-				}
-			);
-
-			setUser(result.user); // Set the authenticated user
-			showToast("Successfully signed in with GitHub!", "success");
-
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		} catch (error) {
-			console.error("GitHub login failed:", error);
-			// showToast(error.message || "GitHub login failed", "error");
-			setTimeout(() => {
-				navigate("/");
-			}, 2000);
-		}
-	};
-
-	return (
-		<div className="min-h-screen bg-gray-50 min-w-screen">
-			{toast.show && (
-				<Toast
-					message={toast.message}
-					type={toast.type}
-					onClose={hideToast}
-				/>
-			)}
-
-			<main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
-				<div className="w-full max-w-md">
-					<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-						<div className="text-center mb-8">
-							<h1 className="text-2xl font-bold text-gray-900">
-								Create a new account
-							</h1>
-						</div>
-
-						<form
-							className="space-y-6"
-							onSubmit={handleEmailSignUp}
-						>
-							<div>
-								<label
-									htmlFor="name"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Name
-								</label>
-								<input
-									id="name"
-									type="text"
-									value={name}
-									onChange={(e) =>
-										handleNameChange(e.target.value)
-									}
-									placeholder="Enter your name"
-									className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-										validation.name
-									)}`}
-								/>
-								{validation.name === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Name must be at least 2 characters long
-									</p>
-								)}
-								{validation.name === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Name is required
-									</p>
-								)}
-							</div>
-
-							<div>
-								<label
-									htmlFor="email"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Email address
-								</label>
-								<input
-									id="email"
-									type="email"
-									value={email}
-									onChange={(e) =>
-										handleEmailChange(e.target.value)
-									}
-									placeholder="Enter your email"
-									className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-										validation.email
-									)}`}
-								/>
-								{validation.email === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Please enter a valid email address
-									</p>
-								)}
-								{validation.email === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Email is required
-									</p>
-								)}
-							</div>
-
-							<div>
-								<label
-									htmlFor="password"
-									className="block text-sm font-medium text-gray-700 mb-1"
-								>
-									Password
-								</label>
-								<div className="relative">
-									<input
-										id="password"
-										type={
-											showPassword ? "text" : "password"
-										}
-										value={password}
-										onChange={(e) =>
-											handlePasswordChange(e.target.value)
-										}
-										placeholder="Enter your password"
-										className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
-											validation.password
-										)}`}
-									/>
-									<button
-										type="button"
-										onClick={() =>
-											setShowPassword(!showPassword)
-										}
-										className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-									>
-										{showPassword ? (
-											<FaEyeSlash className="w-4 h-4" />
-										) : (
-											<FaEye className="w-4 h-4" />
-										)}
-									</button>
-								</div>
-								{validation.password === "invalid" && (
-									<p className="mt-1 text-sm text-red-600">
-										Password must be at least 6 characters
-										long
-									</p>
-								)}
-								{validation.password === "empty" && (
-									<p className="mt-1 text-sm text-orange-600">
-										Password is required
-									</p>
-								)}
-								{password && validation.password !== "empty" && (
-									<p
-										className={`mt-1 text-sm ${
-											passwordStrength === "Weak"
-												? "text-red-600"
-												: passwordStrength === "Medium"
-												? "text-yellow-600"
-												: "text-green-600"
-										}`}
-									>
-										Password strength: {passwordStrength}
-									</p>
-								)}
-							</div>
-
-							<button
-								type="submit"
-								onClick={handleEmailSignUp}
-								className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-							>
-								Sign up
-							</button>
-						</form>
-
-						<div className="mt-6">
-							<div className="relative">
-								<div className="absolute inset-0 flex items-center">
-									<div className="w-full border-t border-gray-300"></div>
-								</div>
-								<div className="relative flex justify-center text-sm">
-									<span className="px-2 bg-white text-gray-500">
-										Or continue with
-									</span>
-								</div>
-							</div>
-
-							<div className="mt-6 grid grid-cols-2 gap-3">
-								<button
-									onClick={handleGithub}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-									<FaGithub className="w-4 h-4 mr-2" />
-									Github
-								</button>
-								<button
-									onClick={handleGoogleLogin}
-									className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-								>
-									<FaGoogle className="w-4 h-4 mr-2" />
-									Google
-								</button>
-							</div>
-						</div>
-
-						<div className="mt-6 text-center">
-							<p className="text-sm text-gray-600">
-								{"Already have an account? "}
-								<Link
-									to="/login"
-									className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
-								>
-									Login
-								</Link>
-							</p>
-						</div>
-					</div>
-				</div>
-			</main>
-		</div>
-	);
+  const sharedData = useContext(variantsContext);
+  const { sectionVariant, textvariant } = sharedData;
+
+  const githubProvider = new GithubAuthProvider();
+  const { user, setUser } = useAuth();
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [validation, setValidation] = useState({
+    name: "untouched",
+    email: "untouched",
+    password: "untouched",
+  });
+  const [toast, setToast] = useState({
+    show: false,
+    message: "",
+    type: "success",
+  });
+  const [passwordStrength, setPasswordStrength] = useState("");
+
+  const navigate = useNavigate();
+
+  const validateName = (value) => {
+    if (value.trim() === "") return "empty";
+    if (value.trim().length < 2) return "invalid";
+    return "valid";
+  };
+
+  const validateEmail = (value) => {
+    if (value.trim() === "") return "empty";
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(value) ? "valid" : "invalid";
+  };
+
+  const validatePassword = (value) => {
+    if (value === "") return "empty";
+    if (value.length < 6) return "invalid";
+    return "valid";
+  };
+
+  const calculatePasswordStrength = (value) => {
+    let strength = "Weak";
+    let strengthScore = 0;
+
+    if (value.length >= 6) strengthScore++;
+    if (/[A-Z]/.test(value)) strengthScore++;
+    if (/[0-9]/.test(value)) strengthScore++;
+    if (/[^A-Za-z0-9]/.test(value)) strengthScore++;
+
+    if (strengthScore >= 4) strength = "Strong";
+    else if (strengthScore >= 2) strength = "Medium";
+
+    return strength;
+  };
+
+  const handleNameChange = (value) => {
+    setName(value);
+    setValidation((prev) => ({
+      ...prev,
+      name: validateName(value),
+    }));
+  };
+
+  const handleEmailChange = (value) => {
+    setEmail(value);
+    setValidation((prev) => ({
+      ...prev,
+      email: validateEmail(value),
+    }));
+  };
+
+  const handlePasswordChange = (value) => {
+    setPassword(value);
+    setValidation((prev) => ({
+      ...prev,
+      password: validatePassword(value),
+    }));
+    setPasswordStrength(calculatePasswordStrength(value));
+  };
+
+  const getRingColor = (fieldValidation) => {
+    switch (fieldValidation) {
+      case "empty":
+        return "focus:ring-orange-500 focus:border-orange-500";
+      case "invalid":
+        return "focus:ring-red-500 focus:border-red-500 ring-2 ring-red-500 border-red-500";
+      case "valid":
+        return "focus:ring-blue-500 focus:border-blue-500";
+      default:
+        return "focus:ring-blue-500 focus:border-blue-500";
+    }
+  };
+
+  const showToast = (message, type) => {
+    setToast({ show: true, message, type });
+  };
+
+  const hideToast = () => {
+    setToast((prev) => ({ ...prev, show: false }));
+  };
+
+  const handleEmailSignUp = async () => {
+    const nameValidation = validateName(name);
+    const emailValidation = validateEmail(email);
+    const passwordValidation = validatePassword(password);
+
+    setValidation({
+      name: nameValidation,
+      email: emailValidation,
+      password: passwordValidation,
+    });
+
+    if (
+      nameValidation !== "valid" ||
+      emailValidation !== "valid" ||
+      passwordValidation !== "valid"
+    ) {
+      showToast("Please fill in all fields correctly", "error");
+      return;
+    }
+
+    try {
+      const userCredential = await createUserWithEmailAndPassword(
+        auth,
+        email,
+        password
+      );
+      await updateProfile(userCredential.user, { displayName: name });
+
+      const idToken = await userCredential.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      showToast("Account created successfully!", "success");
+      setTimeout(() => {
+        navigate("/login");
+      }, 500);
+    } catch (err) {
+      showToast(err.message || "An error occurred during sign up", "error");
+    }
+  };
+
+  //for google
+  const handleGoogleLogin = async () => {
+    try {
+      const result = await signInWithPopup(auth, googleProvider);
+      const idToken = await result.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      setUser(result.user);
+      console.log("User signed in:", user);
+
+      showToast("Successfully signed in with Google!", "success");
+      setTimeout(() => {
+        navigate("/");
+      }, 2000);
+    } catch (err) {
+      showToast(
+        err.message || "An error occurred during Google sign in",
+        "error"
+      );
+    }
+  };
+
+  //for Github
+  const handleGithub = async () => {
+    try {
+      const result = await signInWithPopup(auth, githubProvider);
+      const credential = GithubAuthProvider.credentialFromResult(result);
+      const token = credential.accessToken;
+
+      const idToken = await result.user.getIdToken();
+      await axios.post(
+        `${import.meta.env.VITE_API_URL}/api/auth/register`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${idToken}`,
+          },
+        }
+      );
+
+      setUser(result.user); // Set the authenticated user
+      showToast("Successfully signed in with GitHub!", "success");
+
+      setTimeout(() => {
+        navigate("/");
+      }, 2000);
+    } catch (error) {
+      console.error("GitHub login failed:", error);
+      // showToast(error.message || "GitHub login failed", "error");
+      setTimeout(() => {
+        navigate("/");
+      }, 2000);
+    }
+  };
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={sectionVariant}
+      className="min-h-screen bg-gray-50 min-w-screen"
+    >
+      {toast.show && (
+        <Toast message={toast.message} type={toast.type} onClose={hideToast} />
+      )}
+
+      <main className="flex items-center justify-center min-h-[calc(100vh-4rem)] py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md">
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
+            <div className="text-center mb-8">
+              <motion.h1
+                initial="hidden"
+                animate="visible"
+                variants={textvariant}
+                className="text-2xl font-bold text-gray-900"
+              >
+                Create a new account
+              </motion.h1>
+            </div>
+
+            <form className="space-y-6" onSubmit={handleEmailSignUp}>
+              <div>
+                <motion.label
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  htmlFor="name"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Name
+                </motion.label>
+                <motion.input
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => handleNameChange(e.target.value)}
+                  placeholder="Enter your name"
+                  className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                    validation.name
+                  )}`}
+                />
+                {validation.name === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Name must be at least 2 characters long
+                  </p>
+                )}
+                {validation.name === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Name is required
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <motion.label
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Email address
+                </motion.label>
+                <motion.input
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => handleEmailChange(e.target.value)}
+                  placeholder="Enter your email"
+                  className={`w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                    validation.email
+                  )}`}
+                />
+                {validation.email === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Please enter a valid email address
+                  </p>
+                )}
+                {validation.email === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Email is required
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <motion.label
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700 mb-1"
+                >
+                  Password
+                </motion.label>
+                <motion.div
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  className="relative"
+                >
+                  <input
+                    id="password"
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => handlePasswordChange(e.target.value)}
+                    placeholder="Enter your password"
+                    className={`w-full px-3 py-2 pr-10 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none transition-all ${getRingColor(
+                      validation.password
+                    )}`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
+                  >
+                    {showPassword ? (
+                      <FaEyeSlash className="w-4 h-4" />
+                    ) : (
+                      <FaEye className="w-4 h-4" />
+                    )}
+                  </button>
+                </motion.div>
+                {validation.password === "invalid" && (
+                  <p className="mt-1 text-sm text-red-600">
+                    Password must be at least 6 characters long
+                  </p>
+                )}
+                {validation.password === "empty" && (
+                  <p className="mt-1 text-sm text-orange-600">
+                    Password is required
+                  </p>
+                )}
+                {password && validation.password !== "empty" && (
+                  <p
+                    className={`mt-1 text-sm ${
+                      passwordStrength === "Weak"
+                        ? "text-red-600"
+                        : passwordStrength === "Medium"
+                        ? "text-yellow-600"
+                        : "text-green-600"
+                    }`}
+                  >
+                    Password strength: {passwordStrength}
+                  </p>
+                )}
+              </div>
+
+              <motion.button
+                initial="hidden"
+                animate="visible"
+                variants={textvariant}
+                type="submit"
+                onClick={handleEmailSignUp}
+                className="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              >
+                Sign up
+              </motion.button>
+            </form>
+
+            <div className="mt-6">
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <motion.span
+                    initial="hidden"
+                    animate="visible"
+                    variants={textvariant}
+                    className="px-2 bg-white text-gray-500"
+                  >
+                    Or continue with
+                  </motion.span>
+                </div>
+              </div>
+
+              <div className="mt-6 grid grid-cols-2 gap-3">
+                <motion.button
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  onClick={handleGithub}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  <FaGithub className="w-4 h-4 mr-2" />
+                  Github
+                </motion.button>
+                <motion.button
+                  initial="hidden"
+                  animate="visible"
+                  variants={textvariant}
+                  onClick={handleGoogleLogin}
+                  className="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                  <FaGoogle className="w-4 h-4 mr-2" />
+                  Google
+                </motion.button>
+              </div>
+            </div>
+
+            <div className="mt-6 text-center">
+              <p className="text-sm text-gray-600">
+                {"Already have an account? "}
+                <Link
+                  to="/login"
+                  className="text-blue-600 hover:text-blue-500 font-medium transition-colors"
+                >
+                  Login
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </motion.div>
+  );
 }