diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
index 3f1169a..157a02f 100644
--- a/client/src/pages/About.jsx
+++ b/client/src/pages/About.jsx
@@ -11,7 +11,7 @@ import {
   CheckCircle,
   Sparkles,
 } from "lucide-react";
-
+import { motion } from "framer-motion";
 const About = () => {
   const [isVisible, setIsVisible] = useState(false);
   const [activeCard, setActiveCard] = useState(null);
@@ -107,18 +107,49 @@ const About = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden">
+    <motion.div
+      className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden"
+      initial={{ opacity: 0}}
+      animate={{ opacity: 1}}
+      transition={{ duration: 0.8, ease: "easeOut" }}
+    >
       {/* Animated Background Elements */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
-        <div className="absolute top-1/3 right-1/4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"></div>
-        <div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
-      </div>
+      <motion.div
+        className="absolute inset-0 overflow-hidden"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, delay: 0.2 }}
+      >
+        <motion.div
+          className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 0.2 }}
+          transition={{ duration: 1, delay: 0.3 }}
+        ></motion.div>
+        <motion.div
+          className="absolute top-1/3 right-1/4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 0.2 }}
+          transition={{ duration: 1, delay: 0.5 }}
+        ></motion.div>
+        <motion.div
+          className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 0.2 }}
+          transition={{ duration: 1, delay: 0.7 }}
+        ></motion.div>
+      </motion.div>
 
       {/* Main Content */}
       <div className="relative z-10">
         {/* Hero Section */}
-        <section className="py-20 px-4">
+        <motion.section
+          className="py-20 px-4"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.4 }}
+          transition={{ duration: 0.7, delay: 0.1 }}
+        >
           <div className="container mx-auto max-w-6xl">
             <div
               className={`text-center transition-all duration-1000 ${
@@ -149,14 +180,20 @@ const About = () => {
               </p>
             </div>
           </div>
-        </section>
+        </motion.section>
 
         {/* Stats Section */}
-        <section className="py-16 px-4">
+        <motion.section
+          className="py-16 px-4"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.4 }}
+          transition={{ duration: 0.7, delay: 0.2 }}
+        >
           <div className="container mx-auto max-w-6xl">
             <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
               {stats.map((stat, index) => (
-                <div
+                <motion.div
                   key={index}
                   className={`text-center group transition-all duration-500 ${
                     isVisible
@@ -164,6 +201,10 @@ const About = () => {
                       : "opacity-0 translate-y-10"
                   }`}
                   style={{ transitionDelay: `${index * 150}ms` }}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.5 }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
                 >
                   <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 hover:bg-white/20 transition-all duration-300 group-hover:scale-105">
                     <div className="text-purple-400 mb-2 flex justify-center group-hover:scale-110 transition-transform duration-300">
@@ -174,14 +215,20 @@ const About = () => {
                     </div>
                     <div className="text-gray-300 text-sm">{stat.label}</div>
                   </div>
-                </div>
+                </motion.div>
               ))}
             </div>
           </div>
-        </section>
+        </motion.section>
 
         {/* Services Section */}
-        <section className="py-20 px-4">
+        <motion.section
+          className="py-20 px-4"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.7, delay: 0.2 }}
+        >
           <div className="container mx-auto max-w-6xl">
             <div className="text-center mb-16">
               <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
@@ -195,7 +242,7 @@ const About = () => {
 
             <div className="grid gap-8 md:grid-cols-2">
               {services.map((service, index) => (
-                <div
+                <motion.div
                   key={service.id}
                   className={`group relative overflow-hidden rounded-2xl transition-all duration-700 hover:scale-105 ${
                     isVisible
@@ -205,6 +252,10 @@ const About = () => {
                   style={{ transitionDelay: `${index * 200}ms` }}
                   onMouseEnter={() => setActiveCard(service.id)}
                   onMouseLeave={() => setActiveCard(null)}
+                  initial={{ opacity: 0, y: 40 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.2 }}
+                  transition={{ duration: 0.6, delay: index * 0.15 }}
                 >
                   {/* Card Background */}
                   <div
@@ -233,7 +284,7 @@ const About = () => {
                     {/* Features */}
                     <div className="space-y-3">
                       {service.features.map((feature, featureIndex) => (
-                        <div
+                        <motion.div
                           key={featureIndex}
                           className={`flex items-center gap-3 transition-all duration-300 ${
                             activeCard === service.id
@@ -241,12 +292,16 @@ const About = () => {
                               : "opacity-70 translate-x-2"
                           }`}
                           style={{ transitionDelay: `${featureIndex * 100}ms` }}
+                          initial={{ opacity: 0, x: 10 }}
+                          whileInView={{ opacity: 1, x: 0 }}
+                          viewport={{ once: true, amount: 0.2 }}
+                          transition={{ duration: 0.4, delay: featureIndex * 0.07 }}
                         >
                           <CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0" />
                           <span className="text-gray-300 group-hover:text-white transition-colors duration-300">
                             {feature}
                           </span>
-                        </div>
+                        </motion.div>
                       ))}
                     </div>
 
@@ -261,14 +316,20 @@ const About = () => {
                     {/* Hover Effect */}
                     <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>
                   </div>
-                </div>
+                </motion.div>
               ))}
             </div>
           </div>
-        </section>
+        </motion.section>
 
         {/* CTA Section */}
-        <section className="py-20 px-4">
+        <motion.section
+          className="py-20 px-4"
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.3 }}
+          transition={{ duration: 0.7, delay: 0.2 }}
+        >
           <div className="container mx-auto max-w-4xl">
             <div className="text-center bg-gradient-to-r from-purple-600/20 to-pink-600/20 backdrop-blur-sm border border-purple-500/30 rounded-3xl p-12">
               <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
@@ -288,9 +349,9 @@ const About = () => {
               </div>
             </div>
           </div>
-        </section>
+        </motion.section>
       </div>
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/client/src/pages/Blog.jsx b/client/src/pages/Blog.jsx
index 158d366..e86bc62 100644
--- a/client/src/pages/Blog.jsx
+++ b/client/src/pages/Blog.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Calendar, User, Clock, ArrowRight, Sparkles, Eye, Heart, Share2, BookOpen, TrendingUp, Star } from 'lucide-react';
-
+import { motion } from 'framer-motion';
 const blogs = [
   {
     id: 1,
@@ -220,7 +220,12 @@ const Blog = () => {
   );
 
   return (
-    <section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20">
+    <motion.section
+      className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.7, ease: "easeOut" }}
+    >
       {/* Animated Background */}
       <div className="fixed inset-0 pointer-events-none">
         <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl animate-pulse"></div>
@@ -229,7 +234,13 @@ const Blog = () => {
       
       <div className="relative max-w-7xl mx-auto px-6">
         {/* Header Section */}
-        <div className="text-center mb-16">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.6 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+        >
           <div className="flex justify-center mb-6">
             <div className="relative">
               <BookOpen className="w-16 h-16 text-blue-400" />
@@ -244,10 +255,16 @@ const Blog = () => {
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
             Discover evidence-based articles, expert advice, and practical tips to support your parenting journey with confidence and knowledge.
           </p>
-        </div>
+        </motion.div>
 
         {/* Search and Filters */}
-        <div className="mb-12">
+        <motion.div
+          className="mb-12"
+          initial={{ opacity: 0, y: 40 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.6 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+        >
           <div className="flex flex-col lg:flex-row gap-6 items-center justify-between">
             {/* Search Bar */}
             <div className="relative flex-1 max-w-md">
@@ -284,41 +301,73 @@ const Blog = () => {
               ))}
             </div>
           </div>
-        </div>
+        </motion.div>
 
         {/* Featured Articles */}
         {featuredBlogs.length > 0 && (
-          <div className="mb-16">
+          <motion.div
+            className="mb-16"
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.4 }}
+            transition={{ duration: 0.6, delay: 0.15 }}
+          >
             <div className="flex items-center gap-3 mb-8">
               <TrendingUp className="w-6 h-6 text-yellow-400" />
               <h2 className="text-2xl font-bold text-white">Featured Articles</h2>
             </div>
             <div className="grid gap-8 lg:grid-cols-3 lg:grid-rows-2">
               {featuredBlogs.map(blog => (
-                <BlogCard key={blog.id} blog={blog} featured={true} />
+                <motion.div
+                  key={blog.id}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.2 }}
+                  transition={{ duration: 0.5, delay: 0.1 * blog.id }}
+                >
+                  <BlogCard blog={blog} featured={true} />
+                </motion.div>
               ))}
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* Regular Articles */}
         {regularBlogs.length > 0 && (
-          <div>
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.4 }}
+            transition={{ duration: 0.6, delay: 0.18 }}
+          >
             <div className="flex items-center gap-3 mb-8">
               <BookOpen className="w-6 h-6 text-blue-400" />
               <h2 className="text-2xl font-bold text-white">Latest Articles</h2>
             </div>
             <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
               {regularBlogs.map(blog => (
-                <BlogCard key={blog.id} blog={blog} />
+                <motion.div
+                  key={blog.id}
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, amount: 0.2 }}
+                  transition={{ duration: 0.5, delay: 0.1 * blog.id }}
+                >
+                  <BlogCard blog={blog} />
+                </motion.div>
               ))}
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* No Results */}
         {filteredBlogs.length === 0 && (
-          <div className="text-center py-20">
+          <motion.div
+            className="text-center py-20"
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
             <div className="w-32 h-32 mx-auto mb-8 bg-white/10 rounded-full flex items-center justify-center">
               <BookOpen className="w-16 h-16 text-gray-400" />
             </div>
@@ -333,22 +382,28 @@ const Blog = () => {
             >
               Show All Articles
             </button>
-          </div>
+          </motion.div>
         )}
 
         {/* Load More Button */}
         {filteredBlogs.length > 0 && (
-          <div className="text-center mt-16">
+          <motion.div
+            className="text-center mt-16"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.3 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
             <button className="group px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-semibold text-white transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30">
               <div className="flex items-center gap-2">
                 Load More Articles
                 <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
               </div>
             </button>
-          </div>
+          </motion.div>
         )}
       </div>
-    </section>
+    </motion.section>
   );
 };
 
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 6bce729..19eaf20 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -15,20 +15,17 @@ import {
 import { Swiper, SwiperSlide } from "swiper/react";
 import { EffectCoverflow, Pagination, Autoplay } from "swiper/modules";
 import { Link } from "react-router-dom";
-
+import { motion } from "framer-motion";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import "swiper/css/pagination";
 import { useNavigate } from "react-router-dom";
 
-
 const HomePage = () => {
   const navigate = useNavigate(); // ✅ Add this if missing
   const [isVisible, setIsVisible] = useState({});
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
-
-
   useEffect(() => {
     const handleMouseMove = (e) => {
       setMousePosition({ x: e.clientX, y: e.clientY });
@@ -37,7 +34,6 @@ const HomePage = () => {
     return () => window.removeEventListener("mousemove", handleMouseMove);
   }, []);
 
-
   const handleIntersection = (entries) => {
     entries.forEach((entry) => {
       setIsVisible((prev) => ({
@@ -92,7 +88,6 @@ const HomePage = () => {
       image:
         "https://res.cloudinary.com/dbnticsz8/image/upload/v1734934194/Infant%20care%20Compass/gheqjy0npqdkyhgqds43.png",
       link: "#",
-
     },
     {
       icon: <Phone className="w-12 h-12" />,
@@ -104,7 +99,6 @@ const HomePage = () => {
         "https://res.cloudinary.com/dbnticsz8/image/upload/v1734935048/Infant%20care%20Compass/crqtr4wfu69wmqnulmja.png",
 
       link: "#",
-
     },
     {
       icon: <BookOpen className="w-12 h-12" />,
@@ -115,7 +109,6 @@ const HomePage = () => {
       image:
         "https://res.cloudinary.com/dbnticsz8/image/upload/v1734935847/Infant%20care%20Compass/yf0tea4dqhjf4ww3hjcz.png",
       link: "/learning-hub",
-
     },
   ];
 
@@ -126,8 +119,8 @@ const HomePage = () => {
       content:
         "The AI-powered insights helped me understand my baby's needs like never before. It's like having a pediatrician in your pocket!",
       rating: 5,
-      avatar:"https://images.unsplash.com/photo-1509868918748-a554ad25f858?w=100&h=100&fit=crop&crop=face",
-
+      avatar:
+        "https://images.unsplash.com/photo-1509868918748-a554ad25f858?w=100&h=100&fit=crop&crop=face",
     },
     {
       name: "Michael Rodriguez",
@@ -168,8 +161,12 @@ const HomePage = () => {
   ];
 
   return (
-    
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden ">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.8, ease: "easeOut" }}
+      className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden "
+    >
       {/* Animated Background Elements */}
       <div className="fixed inset-0 pointer-events-none">
         <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl animate-pulse"></div>
@@ -183,12 +180,16 @@ const HomePage = () => {
         ></div>
       </div>
 
-
       {/* Mouse Follower Effect */}
 
-
       {/* Hero Section */}
-      <section className="relative min-h-screen flex items-center justify-center px-6">
+      <motion.section
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.4 }}
+        transition={{ duration: 0.7, delay: 0.1 }}
+        className="relative min-h-screen flex items-center justify-center px-6"
+      >
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/40"></div>
 
         <div className="relative z-10 text-center max-w-6xl mx-auto">
@@ -211,7 +212,7 @@ const HomePage = () => {
             </h1>
 
             <div className="max-w-3xl mx-auto">
-              <p className="text-xl md:text-2xl text-gray-300 font-light leading-relaxed">
+              <p className="text-xl md:text-2xl text-gray-300 font-light  leading-relaxed">
                 Revolutionary AI-powered platform transforming how parents
                 navigate their child's early years with
                 <span className="text-transparent bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text font-semibold">
@@ -233,8 +234,9 @@ const HomePage = () => {
             </div>
 
             <div className="flex flex-col sm:flex-row gap-6 justify-center items-center pt-8">
-              <button className="group relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30"
-              onClick={() => navigate('/signin')}
+              <button
+                className="group relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30"
+                onClick={() => navigate("/signin")}
               >
                 <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full blur opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
                 <div className="relative flex items-center gap-2">
@@ -243,11 +245,11 @@ const HomePage = () => {
                 </div>
               </button>
 
-              <button 
+              <button
                 className="group flex items-center gap-3 px-6 py-4 backdrop-blur-sm bg-white/10 border border-white/20 rounded-full hover:bg-white/20 transition-all duration-300"
                 onClick={() => {
-                  const demoSection = document.getElementById('demo');
-                  demoSection.scrollIntoView({ behavior: 'smooth' });
+                  const demoSection = document.getElementById("demo");
+                  demoSection.scrollIntoView({ behavior: "smooth" });
                 }}
               >
                 <Play className="w-5 h-5 group-hover:scale-110 transition-transform" />
@@ -285,13 +287,13 @@ const HomePage = () => {
             </GlassCard>
           </FloatingElement>
         </div>
-      </section>
+      </motion.section>
 
       {/* Services Section */}
       <section id="services" className="py-32 relative overflow-x-visible z-10">
         <div className="max-w-7xl mx-auto px-6">
           <div className="text-center mb-20">
-            <h2 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+            <h2 className="text-5xl md:text-6xl font-bold pb-4 mb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
               Revolutionary Care Solutions
             </h2>
             <p className="text-xl text-gray-400 max-w-3xl mx-auto">
@@ -350,30 +352,30 @@ const HomePage = () => {
                       <Link to={service.link}>Learn More</Link>
                       <ArrowRight className="w-4 h-4" />
                     </button>
-                     </div>
-                </GlassCard>
-              <SwiperSlide key={index} className="!w-80 !flex-shrink-0">
-                <GlassCard className="p-6 text-white text-center">
-                  <div
-                    className={`bg-gradient-to-br ${service.color} p-4 rounded-full inline-block`}
-                  >
-                    {service.icon}
                   </div>
-                  <h3 className="text-xl font-bold mt-4">{service.title}</h3>
-                  <p className="text-white-600 mt-2">{service.description}</p>
-                  <img
-                    src={service.image}
-                    alt={service.title}
-                    className="mt-4 rounded-xl w-full h-40 object-cover"
-                  />
-                  <p className="mt-3 text-blue-600 font-medium">Learn More →</p>
                 </GlassCard>
-              </SwiperSlide>
+                <SwiperSlide key={index} className="!w-80 !flex-shrink-0">
+                  <GlassCard className="p-6 text-white text-center">
+                    <div
+                      className={`bg-gradient-to-br ${service.color} p-4 rounded-full inline-block`}
+                    >
+                      {service.icon}
+                    </div>
+                    <h3 className="text-xl font-bold mt-4">{service.title}</h3>
+                    <p className="text-white-600 mt-2">{service.description}</p>
+                    <img
+                      src={service.image}
+                      alt={service.title}
+                      className="mt-4 rounded-xl w-full h-40 object-cover"
+                    />
+                    <p className="mt-3 text-blue-600 font-medium">
+                      Learn More →
+                    </p>
+                  </GlassCard>
+                </SwiperSlide>
               </div>
             ))}
-          
-        
-        </Swiper>
+          </Swiper>
         </div>
       </section>
 
@@ -405,11 +407,12 @@ const HomePage = () => {
                 </div>
               </div>
               <div className="flex justify-center md:justify-start">
-              <button className="bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-400 hover:to-rose-400 px-8 py-4 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl"
-              onClick={() => navigate('/signin')}
-              >
-                Join Our Community
-              </button>
+                <button
+                  className="bg-gradient-to-r from-pink-500 to-rose-500 hover:from-pink-400 hover:to-rose-400 px-8 py-4 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl"
+                  onClick={() => navigate("/signin")}
+                >
+                  Join Our Community
+                </button>
               </div>
             </div>
 
@@ -446,7 +449,8 @@ const HomePage = () => {
               See It In Action
             </h2>
             <p className="text-xl text-gray-400 max-w-3xl mx-auto">
-              Watch our quick demo to see how InfantCareCompass makes parenting easier
+              Watch our quick demo to see how InfantCareCompass makes parenting
+              easier
             </p>
           </div>
 
@@ -463,7 +467,10 @@ const HomePage = () => {
             </div>
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center group hover:bg-white/30 transition-all duration-300 cursor-pointer">
-                <Play className="w-12 h-12 text-white ml-2 group-hover:scale-110 transition-transform" fill="currentColor" />
+                <Play
+                  className="w-12 h-12 text-white ml-2 group-hover:scale-110 transition-transform"
+                  fill="currentColor"
+                />
               </div>
             </div>
           </div>
@@ -473,24 +480,32 @@ const HomePage = () => {
               {
                 icon: <Calendar className="w-8 h-8 text-blue-400" />,
                 title: "Vaccination Tracking",
-                description: "Never miss an important vaccination with our smart tracking system"
+                description:
+                  "Never miss an important vaccination with our smart tracking system",
               },
               {
                 icon: <BookOpen className="w-8 h-8 text-purple-400" />,
                 title: "Milestone Monitoring",
-                description: "Track your baby's growth and development with ease"
+                description:
+                  "Track your baby's growth and development with ease",
               },
               {
                 icon: <Users className="w-8 h-8 text-pink-400" />,
                 title: "Expert Community",
-                description: "Connect with other parents and healthcare professionals"
-              }
+                description:
+                  "Connect with other parents and healthcare professionals",
+              },
             ].map((feature, index) => (
-              <div key={index} className="bg-white/5 p-6 rounded-2xl backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-all duration-300">
+              <div
+                key={index}
+                className="bg-white/5 p-6 rounded-2xl backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-all duration-300"
+              >
                 <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center mb-4">
                   {feature.icon}
                 </div>
-                <h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
+                <h3 className="text-xl font-semibold text-white mb-2">
+                  {feature.title}
+                </h3>
                 <p className="text-gray-400">{feature.description}</p>
               </div>
             ))}
@@ -500,69 +515,68 @@ const HomePage = () => {
 
       {/* Testimonials Section */}
       <section className="py-32 relative">
-  <div className="max-w-7xl mx-auto px-6">
-    <div className="text-center mb-20">
-      <h2 className="text-5xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
-        Voices of Trust
-      </h2>
-      <p className="text-xl text-gray-400">
-        Real stories from parents who've transformed their journey with us
-      </p>
-    </div>
-
-    <Swiper
-      slidesPerView={1}
-      spaceBetween={30}
-      autoplay={{
-        delay: 4000,
-        disableOnInteraction: false,
-      }}
-      pagination={{ clickable: true }}
-      breakpoints={{
-        768: { slidesPerView: 2 },
-        1024: { slidesPerView: 3 },
-      }}
-      modules={[Autoplay, Pagination]}
-      className="w-full overflow-visible pb-10"
-    >
-      {testimonials.map((testimonial, index) => (
-        <SwiperSlide key={index}>
-          <GlassCard className="p-8 relative group" hover={true}>
-            <div className="flex items-center gap-2 mb-4">
-              {[...Array(testimonial.rating)].map((_, i) => (
-                <Star
-                  key={i}
-                  className="w-5 h-5 fill-yellow-400 text-yellow-400"
-                />
-              ))}
-            </div>
-
-            <p className="text-gray-300 mb-6 leading-relaxed italic">
-              "{testimonial.content}"
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-20">
+            <h2 className="text-5xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+              Voices of Trust
+            </h2>
+            <p className="text-xl text-gray-400">
+              Real stories from parents who've transformed their journey with us
             </p>
+          </div>
 
-            <div className="flex items-center gap-4">
-              <img
-                src={testimonial.avatar}
-                alt={testimonial.name}
-                className="w-12 h-12 rounded-full object-cover"
-              />
-              <div>
-                <div className="font-semibold text-white">
-                  {testimonial.name}
-                </div>
-                <div className="text-gray-400 text-sm">
-                  {testimonial.role}
-                </div>
-              </div>
-            </div>
-          </GlassCard>
-        </SwiperSlide>
-      ))}
-    </Swiper>
-  </div>
-</section>
+          <Swiper
+            slidesPerView={1}
+            spaceBetween={30}
+            autoplay={{
+              delay: 4000,
+              disableOnInteraction: false,
+            }}
+            pagination={{ clickable: true }}
+            breakpoints={{
+              768: { slidesPerView: 2 },
+              1024: { slidesPerView: 3 },
+            }}
+            modules={[Autoplay, Pagination]}
+            className="w-full overflow-visible pb-10"
+          >
+            {testimonials.map((testimonial, index) => (
+              <SwiperSlide key={index}>
+                <GlassCard className="p-8 relative group" hover={true}>
+                  <div className="flex items-center gap-2 mb-4">
+                    {[...Array(testimonial.rating)].map((_, i) => (
+                      <Star
+                        key={i}
+                        className="w-5 h-5 fill-yellow-400 text-yellow-400"
+                      />
+                    ))}
+                  </div>
+
+                  <p className="text-gray-300 mb-6 leading-relaxed italic">
+                    "{testimonial.content}"
+                  </p>
 
+                  <div className="flex items-center gap-4">
+                    <img
+                      src={testimonial.avatar}
+                      alt={testimonial.name}
+                      className="w-12 h-12 rounded-full object-cover"
+                    />
+                    <div>
+                      <div className="font-semibold text-white">
+                        {testimonial.name}
+                      </div>
+                      <div className="text-gray-400 text-sm">
+                        {testimonial.role}
+                      </div>
+                    </div>
+                  </div>
+                </GlassCard>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      </section>
 
       {/* CTA Section */}
       <section className="py-32 relative">
@@ -578,8 +592,9 @@ const HomePage = () => {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-6 justify-center">
-              <button className="group relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30"
-              onClick={() => navigate('/signin')}
+              <button
+                className="group relative px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full text-lg font-semibold transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30"
+                onClick={() => navigate("/signin")}
               >
                 <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full blur opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div>
                 <div className="relative flex justify-center items-center gap-2">
@@ -588,8 +603,9 @@ const HomePage = () => {
                 </div>
               </button>
 
-              <button className="px-8 py-4 border-2 border-white/30 rounded-full hover:bg-white/10 transition-all duration-300"
-              onClick={() => navigate('/signin')}
+              <button
+                className="px-8 py-4 border-2 border-white/30 rounded-full hover:bg-white/10 transition-all duration-300"
+                onClick={() => navigate("/signin")}
               >
                 Schedule Demo
               </button>
@@ -597,7 +613,7 @@ const HomePage = () => {
           </GlassCard>
         </div>
       </section>
-    </div>
+    </motion.div>
   );
 };