diff --git a/package-lock.json b/package-lock.json
index 9c4cac5..4ae91ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "aos": "^2.3.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.4.7",
         "lucide-react": "^0.476.0",
         "next": "15.1.7",
         "react": "^19.0.0",
@@ -3228,6 +3229,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.5",
+        "motion-utils": "^12.0.0",
+        "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",
@@ -4345,6 +4373,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 32a43d3..3fc9d6a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "aos": "^2.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.4.7",
     "lucide-react": "^0.476.0",
     "next": "15.1.7",
     "react": "^19.0.0",
diff --git a/src/components/FaqSection.tsx b/src/components/FaqSection.tsx
index 5942ae2..cd581fa 100644
--- a/src/components/FaqSection.tsx
+++ b/src/components/FaqSection.tsx
@@ -1,6 +1,8 @@
 "use client";
-import { X, Plus } from "lucide-react";
-import { useState } from "react";
+
+import { Plus } from "lucide-react";
+import * as React from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface FAQItem {
   id: string;
@@ -36,7 +38,7 @@ const faqs: FAQItem[] = [
 ];
 
 export default function FAQSection() {
-  const [openItems, setOpenItems] = useState<Set<string>>(new Set());
+  const [openItems, setOpenItems] = React.useState<Set<string>>(new Set());
 
   const handleItemClick = (itemId: string) => {
     const newOpenItems = new Set(openItems);
@@ -57,27 +59,86 @@ export default function FAQSection() {
 
         <div className="space-y-4">
           {faqs.map((faq) => (
-            <div key={faq.id} className="bg-white rounded-lg overflow-hidden">
-              <button
+            <motion.div
+              key={faq.id}
+              initial={false}
+              animate={openItems.has(faq.id) ? "open" : "closed"}
+              className="bg-white rounded-lg overflow-hidden"
+            >
+              <motion.button
                 onClick={() => handleItemClick(faq.id)}
                 className="w-full text-left p-6 flex items-center justify-between hover:bg-gray-50"
+                whileHover={{ backgroundColor: "rgba(0, 0, 0, 0.02)" }}
+                transition={{ duration: 0.2 }}
               >
                 <span className="text-lg text-[#7c3aed] font-medium">
                   {faq.question}
                 </span>
-                {openItems.has(faq.id) ? (
-                  <X className="h-5 w-5 text-[#7c3aed]" />
-                ) : (
-                  <Plus className="h-5 w-5 text-[#7c3aed]" />
-                )}
-              </button>
+                <motion.div
+                  variants={{
+                    open: { rotate: 45 },
+                    closed: { rotate: 0 },
+                  }}
+                  transition={{ duration: 0.2 }}
+                  className="relative w-6 h-6 flex items-center justify-center"
+                >
+                  <Plus className="h-5 w-5 text-[#7c3aed] absolute" />
+                </motion.div>
+              </motion.button>
 
-              {openItems.has(faq.id) && (
-                <div className="px-6 pb-6">
-                  <p className="text-gray-600">{faq.answer}</p>
-                </div>
-              )}
-            </div>
+              <AnimatePresence initial={false}>
+                {openItems.has(faq.id) && (
+                  <motion.div
+                    initial="collapsed"
+                    animate="open"
+                    exit="collapsed"
+                    variants={{
+                      open: {
+                        opacity: 1,
+                        height: "auto",
+                        transition: {
+                          duration: 0.3,
+                          ease: [0.4, 0, 0.2, 1],
+                        },
+                      },
+                      collapsed: {
+                        opacity: 0,
+                        height: 0,
+                        transition: {
+                          duration: 0.3,
+                          ease: [0.4, 0, 0.2, 1],
+                        },
+                      },
+                    }}
+                  >
+                    <motion.div
+                      variants={{
+                        open: {
+                          y: 0,
+                          opacity: 1,
+                          transition: {
+                            duration: 0.3,
+                            ease: [0.4, 0, 0.2, 1],
+                            delay: 0.1,
+                          },
+                        },
+                        collapsed: {
+                          y: 20,
+                          opacity: 0,
+                          transition: {
+                            duration: 0.3,
+                            ease: [0.4, 0, 0.2, 1],
+                          },
+                        },
+                      }}
+                      className="px-6 pb-6"
+                    >
+                      <p className="text-gray-600">{faq.answer}</p>
+                    </motion.div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
           ))}
         </div>
       </div>
diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx
index 8882c01..9931c8a 100644
--- a/src/components/HeroSection.tsx
+++ b/src/components/HeroSection.tsx
@@ -1,7 +1,11 @@
+"use client";
+
 import React from "react";
 import styles from "./HeroSection.module.css";
 import Link from "next/link";
 import Image from "next/image";
+import { motion } from "framer-motion";
+
 const HeroSection: React.FC = () => {
   return (
     <section className="header">
@@ -9,34 +13,53 @@ const HeroSection: React.FC = () => {
         <div className="absolute w-full flex flex-col md:flex-row">
           {/* Left Background */}
           <div
-            className={`${styles.bgLeft} w-full md:w-1/2 h-[500px] md:h-[1075px]`}
+            className={`${styles.bgLeft} w-full md:w-1/2 h-[410px] md:h-[1075px]`}
           ></div>
 
           {/* Right Background */}
           <div className="relative w-full md:w-1/2 bg-[#F9F1FF] h-[400px] md:h-[1075px]">
-            <div
+            <motion.div
+              initial={{ x: 100, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition={{
+                duration: 0.8,
+                ease: "easeOut",
+                delay: 0.2,
+              }}
               className="absolute top-0 -left-[150px] mt-0 md:mt-40 ml-16 h-[542px] flex flex-col justify-start items-start gap-2.5 z-50"
-              data-aos="fade-left"
-              data-aos-duration="2000"
             >
-              <Image
-                src="/assets/images/hero-temp-slider.png"
-                alt="Hero Slider"
-                width={750}
-                height={542}
-                priority
-              />
-            </div>
+              <motion.div
+                whileHover={{
+                  scale: 1.02,
+                  transition: { duration: 0.3 },
+                }}
+              >
+                <Image
+                  src="/assets/images/hero-temp-slider.png"
+                  alt="Hero Slider"
+                  width={750}
+                  height={542}
+                  priority
+                  className="drop-shadow-2xl"
+                />
+              </motion.div>
+            </motion.div>
           </div>
 
           {/* Main Content */}
-          <div
+          <motion.div
+            initial={{ y: 50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{
+              duration: 0.6,
+              ease: "easeOut",
+            }}
             className={`${styles.glass} absolute my-20 md:my-40 w-full md:w-7/12 z-10`}
           >
             <div className="p-8 md:p-16">
-              <div className="text-2xl md:text-4xl lg:text-6xl leading-5xl font-normal font-['Gendy'] ">
-                <span className="text-[#ff256d] md:text-white ">R</span>
-                <span className="text-[#252525] ">
+              <div className="text-2xl md:text-4xl lg:text-6xl leading-5xl font-normal font-['Gendy']">
+                <span className="text-[#ff256d] md:text-white">R</span>
+                <span className="text-[#252525]">
                   evolutionize Your Social Media Strategy with a Personalized
                 </span>
                 <br />
@@ -49,7 +72,12 @@ const HeroSection: React.FC = () => {
               </p>
 
               <div className="flex">
-                <div className="flex mt-5 items-center">
+                <motion.div
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.4, duration: 0.6 }}
+                  className="flex mt-5 items-center"
+                >
                   <div>
                     <p className="text-[#252525] text-[10px] md:text-xs font-normal">
                       Customers Rating
@@ -61,37 +89,63 @@ const HeroSection: React.FC = () => {
                       (8,279 reviews)
                     </p>
                   </div>
-                </div>
+                </motion.div>
 
                 {/* CTA Button */}
-                <Link
-                  href="https://dashboard.planpostai.com/"
-                  className="ml-5 mt-5  px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
+                <motion.div
+                  initial={{ opacity: 0, x: 20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.6, duration: 0.6 }}
                 >
-                  Generate
-                  <Image
-                    src="/assets/svg/generate-icon.svg"
-                    alt="Generate Icon"
-                    className="w-6 h-6"
-                    height={24}
-                    width={24}
-                  />
-                </Link>
+                  <Link
+                    href="https://dashboard.planpostai.com/"
+                    className="ml-5 mt-5 px-7 py-3.5 bg-[#ff2b85] rounded-xl shadow-md border border-white flex items-center gap-2.5 text-white text-xl font-bold"
+                  >
+                    Generate
+                    <Image
+                      src="/assets/svg/generate-icon.svg"
+                      alt="Generate Icon"
+                      className="w-6 h-6"
+                      height={24}
+                      width={24}
+                    />
+                  </Link>
+                </motion.div>
               </div>
-              {/* Customer Reviews */}
             </div>
-          </div>
+          </motion.div>
         </div>
 
         {/* Social Icons */}
-        <div className="absolute top-[142px] left-[77px] social-icons-pp z-20">
-          <Image
-            src="/assets/images/social-icons.png"
-            alt="Social Icons"
-            height={500}
-            width={500}
-          />
-        </div>
+        <motion.div
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{
+            duration: 0.8,
+            ease: [0.4, 0, 0.2, 1],
+            delay: 0.4,
+          }}
+          className="absolute top-[142px] left-[77px] social-icons-pp z-20"
+        >
+          <motion.div
+            animate={{
+              y: [0, -10, 0],
+            }}
+            transition={{
+              duration: 4,
+              repeat: Infinity,
+              repeatType: "reverse",
+              ease: "easeInOut",
+            }}
+          >
+            <Image
+              src="/assets/images/social-icons.png"
+              alt="Social Icons"
+              height={500}
+              width={500}
+            />
+          </motion.div>
+        </motion.div>
       </div>
     </section>
   );
diff --git a/src/components/SocialSection.tsx b/src/components/SocialSection.tsx
index ed30bca..82df988 100644
--- a/src/components/SocialSection.tsx
+++ b/src/components/SocialSection.tsx
@@ -1,24 +1,50 @@
+"use client";
+import React, { useRef } from "react";
 import Image from "next/image";
-import React from "react";
+import { motion, useInView } from "framer-motion";
 
 const SocialSection: React.FC = () => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const isInView = useInView(sectionRef, {
+    once: false,
+    amount: 0.3,
+  });
+
+  const fadeInUp = {
+    hidden: {
+      opacity: 0,
+      y: 60,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.8,
+        ease: "easeOut",
+      },
+    },
+  };
+
   return (
-    <section
-      id="feature"
-      className="social"
-      data-aos="fade-up"
-      data-aos-duration="1500"
-    >
+    <section ref={sectionRef} id="feature" className="social">
       <div className="h-0 md:h-[180px] lg:h-[250px] flex justify-center relative">
-        <div className="absolute -top-[200px]">
-          <Image
-            src="/assets/images/temp-example.png"
-            alt="Example Image"
-            width={1200}
-            height={300}
-            priority
-          />
-        </div>
+        <motion.div
+          className="absolute -top-[200px]"
+          variants={fadeInUp}
+          initial="hidden"
+          animate={isInView ? "visible" : "hidden"}
+        >
+          <div className="relative rounded-lg overflow-hidden">
+            <Image
+              src="/assets/images/temp-example.png"
+              alt="Example Image"
+              width={1200}
+              height={300}
+              priority
+              className="transform transition duration-700 hover:scale-105"
+            />
+          </div>
+        </motion.div>
       </div>
     </section>
   );