add some animation in all over the pages

src/components/Booking/BookingComponent.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useReducer } from "react";
+import { useReducer, useEffect, useState } from "react";
 
 const initialState = {
   data: {
@@ -45,6 +45,11 @@ function reducer(state, action) {
 
 export default function BookingComponent() {
   const [state, dispatch] = useReducer(reducer, initialState);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
 
   const validateField = (name, value) => {
     switch (name) {
@@ -124,24 +129,32 @@ export default function BookingComponent() {
   };
 
   const inputClasses = `mt-1 block w-full rounded-md border-2 shadow-sm 
-    focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 
-    transition duration-200 ease-in-out py-2 px-3`;
+    focus:border-orange-500 focus:ring-2 focus:ring-orange-200 
+    active:border-orange-600 active:ring-2 active:ring-orange-300
+    transition duration-300 ease-in-out py-2 px-3 hover:border-orange-300
+    transform hover:scale-[1.02] focus:scale-[1.02]
+    focus:outline-none focus-visible:outline-none`; // Added focus-visible:outline-none
 
   return (
     <section className="max-w-2xl mx-auto p-6">
-      <article>
+      <article
+        className={`transition-all duration-700 ease-out transform 
+          ${
+            isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
+          }`}
+      >
         {state.status === "SUCCESS" ? (
-          <div className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">
+          <div className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 animate-fade-in">
             Thank you for your booking. We will be in touch shortly to confirm
             your consultation.
           </div>
         ) : (
           <form onSubmit={handleSubmit} className="space-y-6">
             <div className="text-center">
-              <h1 className="text-3xl font-bold text-gray-800 mb-2">
+              <h1 className="text-3xl font-bold text-gray-800 mb-2 animate-fade-in">
                 Design Consultation Booking
               </h1>
-              <p className="text-md text-gray-600">
+              <p className="text-md text-gray-600 animate-fade-in-delay">
                 Schedule your personalized interior design session
               </p>
             </div>
@@ -236,12 +249,15 @@ export default function BookingComponent() {
               </div>
             </fieldset>
             {state.status === "SUBMITTING" ? (
-              <div className="text-center text-blue-600">
+              <div className="text-center text-orange-600 animate-pulse">
                 Processing your request...
               </div>
             ) : (
               <button
-                className="w-full rounded-lg p-2.5 bg-orange-600 text-white font-semibold shadow-md hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 transition-colors duration-300"
+                className="w-full rounded-lg p-2.5 bg-orange-600 text-white font-semibold shadow-md 
+                hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 
+                focus:ring-opacity-50 active:bg-orange-800 active:ring-2 active:ring-orange-600 
+                transition-all duration-300 ease-in-out transform hover:scale-[1.02] focus:scale-[1.02]"
                 type="submit"
               >
                 Request Design Consultation

src/components/Founder/FounderFlash/FounderFlashComponent.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 
 export default function FounderFlashComponent({
@@ -7,23 +7,54 @@ export default function FounderFlashComponent({
   imageSrc,
   altText,
 }) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   return (
-    <section className="bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
+    <section
+      className={`bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-500 ease-out transform
+        ${isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}
+        hover:shadow-xl`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
       <article className="flex flex-col items-center justify-center p-8">
         <div className="w-full max-w-md">
           <div className="mb-8">
-            <h2 className="font-bold text-2xl text-gray-900 mb-4">{title}</h2>
-            <p className="text-gray-700 leading-relaxed mb-6">{description}</p>
+            <h2
+              className={`font-bold text-2xl text-gray-900 mb-4 transition-all duration-300 ${
+                isHovered ? "text-orange-600 scale-105" : ""
+              }`}
+            >
+              {title}
+            </h2>
+            <p
+              className={`text-gray-700 leading-relaxed mb-6 transition-all duration-300 ${
+                isHovered ? "text-gray-900" : ""
+              }`}
+            >
+              {description}
+            </p>
           </div>
-          <div className="w-full">
-            <Image
-              src={imageSrc}
-              alt={altText}
-              width={460}
-              height={400}
-              loading="lazy"
-              className="rounded-lg shadow-md hover:shadow-lg transition-all duration-300 w-full h-auto object-cover"
-            />
+          <div className="w-full overflow-hidden rounded-lg shadow-md">
+            <div
+              className={`transition-all duration-500 ease-in-out transform ${
+                isHovered ? "scale-110" : "scale-100"
+              }`}
+            >
+              <Image
+                src={imageSrc}
+                alt={altText}
+                width={460}
+                height={400}
+                loading="lazy"
+                className="w-full h-auto object-cover"
+              />
+            </div>
           </div>
         </div>
       </article>

src/components/Header/HeaderComponent.jsx

@@ -2,12 +2,14 @@
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import { FaHome, FaUser, FaCalendarAlt, FaCog } from "react-icons/fa";
 
 export default function HeaderComponent() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const pathname = usePathname();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -35,8 +37,11 @@ export default function HeaderComponent() {
   ];
 
   return (
-    <header
-      className={`fixed top-0 left-0 w-full z-10 transition-all duration-300 ${
+    <motion.header
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+      className={`fixed top-0 left-0 w-full z-10 transition-all duration-500 ease-in-out ${
         scrolled ? "bg-white shadow-md" : "bg-transparent"
       }`}
     >
@@ -53,14 +58,18 @@ export default function HeaderComponent() {
               <Link
                 key={item.href}
                 href={item.href}
-                className="text-gray-600 hover:text-orange-500 transition-colors duration-200"
+                className={`text-gray-600 hover:text-orange-500 transition-all duration-300 ease-in-out pb-1 ${
+                  pathname === item.href
+                    ? "border-b-2 border-orange-500 text-orange-500"
+                    : ""
+                }`}
               >
                 {item.label}
               </Link>
             ))}
           </nav>
           <button
-            className="md:hidden focus:outline-none"
+            className="md:hidden focus:outline-none transition-transform duration-300 ease-in-out"
             onClick={toggleMenu}
             aria-label={isMenuOpen ? "Close menu" : "Open menu"}
           >
@@ -80,28 +89,44 @@ export default function HeaderComponent() {
       <AnimatePresence>
         {isMenuOpen && (
           <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{ duration: 0.2 }}
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
             className="md:hidden"
           >
             <nav className="bg-white shadow-lg">
               {menuItems.map((item) => (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="flex items-center space-x-2 px-4 py-3 hover:bg-orange-100 transition-colors duration-200"
+                  className={`flex items-center space-x-2 px-4 py-3 hover:bg-orange-100 transition-all duration-300 ease-in-out ${
+                    pathname === item.href
+                      ? "border-l-4 border-orange-500 bg-orange-50"
+                      : ""
+                  }`}
                   onClick={toggleMenu}
                 >
-                  <item.icon className="text-orange-500" />
-                  <span>{item.label}</span>
+                  <item.icon
+                    className={`transition-colors duration-300 ease-in-out ${
+                      pathname === item.href
+                        ? "text-orange-500"
+                        : "text-gray-500"
+                    }`}
+                  />
+                  <span
+                    className={`transition-colors duration-300 ease-in-out ${
+                      pathname === item.href ? "text-orange-500" : ""
+                    }`}
+                  >
+                    {item.label}
+                  </span>
                 </Link>
               ))}
             </nav>
           </motion.div>
         )}
       </AnimatePresence>
-    </header>
+    </motion.header>
   );
 }

src/components/Main/HowItWorks/HowItWorksComponent.jsx

@@ -1,12 +1,32 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 
 export default function HowItWorksComponent({ imgData }) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   return (
     <section className="bg-white py-6 sm:py-10">
-      <article className="container mx-auto px-4 max-w-3xl">
-        <div className="flex flex-col items-center">
-          <div className="mb-4 sm:mb-6">
+      <article
+        className={`container mx-auto px-4 max-w-3xl transition-all duration-700 ease-out transform
+          ${
+            isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
+          }`}
+      >
+        <div
+          className="flex flex-col items-center bg-gray-50 rounded-lg shadow-md p-6 hover:shadow-xl transition-all duration-300"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <div
+            className={`mb-4 sm:mb-6 transition-transform duration-300 ${
+              isHovered ? "scale-110" : "scale-100"
+            }`}
+          >
             <Image
               src={imgData.src}
               alt={imgData.alt}
@@ -16,11 +36,17 @@ export default function HowItWorksComponent({ imgData }) {
               className="w-full h-auto object-contain sm:w-[150px] sm:h-[150px] md:w-[200px] md:h-[200px] lg:w-[250px] lg:h-[250px]"
             />
           </div>
-          <h2 className="text-base sm:text-lg md:text-xl font-bold text-gray-800 mb-2 sm:mb-3">
+          <h2
+            className={`text-base sm:text-lg md:text-xl font-bold mb-2 sm:mb-3 transition-all duration-300 ${
+              isHovered ? "text-orange-600" : "text-gray-900"
+            }`}
+          >
             {imgData.title}
           </h2>
           <div className="text-center">
-            <p className="text-sm sm:text-base text-gray-600 leading-relaxed max-w-2xl">
+            <p
+              className={`text-sm sm:text-base text-gray-600 leading-relaxed max-w-2xl`}
+            >
               {imgData.content}
             </p>
           </div>

src/components/Main/MainComponent.jsx

@@ -104,9 +104,7 @@ export default function MainComponent() {
               <HowItWorksComponent
                 imgData={{
                   ...imgData,
-                  title: (
-                    <span className="text-orange-600">{imgData.title}</span>
-                  ),
+                  title: <span>{imgData.title}</span>,
                 }}
               />
             </motion.div>