diff --git a/package-lock.json b/package-lock.json
index 03c2c912a..0e799efb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,7 +55,8 @@
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^3.3.2",
         "@docusaurus/types": "^3.3.2",
-        "dotenv": "^16.4.5"
+        "dotenv": "^16.4.5",
+        "framer-motion": "^11.2.10"
       },
       "engines": {
         "node": ">=18.0"
@@ -10001,6 +10002,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
diff --git a/package.json b/package.json
index 7946d6207..926ab32dc 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.3.2",
     "@docusaurus/types": "^3.3.2",
-    "dotenv": "^16.4.5"
+    "dotenv": "^16.4.5",
+    "framer-motion": "^11.2.10"
   },
   "browserslist": {
     "production": [
diff --git a/src/components/Aboutpage/index.tsx b/src/components/Aboutpage/index.tsx
index 7cfc08f16..cd6766bac 100644
--- a/src/components/Aboutpage/index.tsx
+++ b/src/components/Aboutpage/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import Heading from "@theme/Heading";
 import styles from "./styles.module.css";
-
+import { motion } from "framer-motion";
 const aboutImg = "/img/svg/about_me.svg";
 
 export default function AboutUsSection() {
@@ -11,21 +11,77 @@ export default function AboutUsSection() {
       <div className="container">
         <div className="row">
           <div className="col col--6">
+          <motion.div
+        initial={{ opacity: 0, x: -150 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.2,
+        }}
+      >
             <Heading as={"h1"}>About Us</Heading>
-            <p className={styles.aboutUsDescription}>
+            </motion.div>
+            <motion.p
+        initial={{ opacity: 0, y: -150 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.5,
+        }}
+        className={styles.aboutUsDescription}
+      >
               Welcome to Code Harbor Hub, your go-to destination for quality tech education. At Code Harbor Hub, we are passionate about empowering individuals with the knowledge and skills needed to thrive in the ever-evolving world of technology.
-            </p>
-            <p className={styles.aboutUsDescription}>
+            </motion.p>
+            <motion.p
+        initial={{ opacity: 0, y: -150 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.5,
+        }}
+        className={styles.aboutUsDescription}
+      >
               Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered.
-            </p>
-            <p className={styles.aboutUsDescription}>
+            </motion.p>
+            <motion.p
+        initial={{ opacity: 0, y: -150 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.5,
+        }}
+        className={styles.aboutUsDescription}
+      >
               With a team of experienced instructors and industry experts, we offer a diverse range of courses and learning paths tailored to meet your specific goals and interests. Join our community today and embark on your journey towards success in the tech industry!
-            </p>
+            </motion.p>
           </div>
-          <div className={clsx("col", "col--6", styles.aboutUsImage)}>
+          <motion.div
+        initial={{ scale: 0, y: -150 }}
+        whileInView={{ scale: 0.8, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.5,
+        }}
+        className={clsx("col", "col--6", styles.aboutUsImage)}
+      >
             {/* Placeholder for an about us image */}
             <img src={aboutImg} alt="About Us" />
-          </div>
+            </motion.div>
         </div>
       </div>
     </section>
diff --git a/src/components/HomePage/Header.tsx b/src/components/HomePage/Header.tsx
index 78312226c..9cfbcea24 100644
--- a/src/components/HomePage/Header.tsx
+++ b/src/components/HomePage/Header.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef } from "react";
 import "./header.css";
 import Link from "@docusaurus/Link";
 import VanillaTilt from "vanilla-tilt";
+import { motion } from "framer-motion";
 
 /**
  * Renders the header component of the application.
@@ -12,25 +13,58 @@ import VanillaTilt from "vanilla-tilt";
 const HeaderContent = () => {
   return (
     <div className="chh__header-content">
-      <h1 className="gradient__text">Level Up Skills with CodeHarborHub</h1>
-      <p>
+      <h1 className="gradient__text"
+      >Level Up Skills with CodeHarborHub</h1>
+      <motion.p
+        initial={{ opacity: 0, x: -150 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.2,
+        }}
+      >
         Tired of limitations? CodeHarborHub shatters them. We&apos;re the
         exclusive platform offering a comprehensive tech curriculum, taught by
         industry masters, completely free. Join our vibrant community, master
         in-demand skills, and launch your dream tech career.
-      </p>
+      </motion.p>
 
       <div className="chh__header-content__input">
-        <button type="button">
+        <motion.button
+          initial={{ opacity: 0, x: -150 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+          type="button"
+        >
           <Link to="/docs" className="chh__header-content__input--link">
             Get Started
           </Link>
-        </button>
-        <button type="button">
+        </motion.button>
+        <motion.button
+          initial={{ opacity: 0, x: 150 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+          type="button"
+        >
           <Link to="/courses" className="chh__header-content__input--link">
             Courses
           </Link>
-        </button>
+        </motion.button>
       </div>
     </div>
   );
@@ -62,7 +96,18 @@ const HeaderImage = () => {
   }, []);
 
   return (
-    <div className="chh__header-image">
+    <motion.div
+        initial={{ scale: 0, x: 150 }}
+        whileInView={{ scale: 0.8, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.5,
+        }}
+        className="chh__header-image"
+      >
       <img
         src="/img/hero-img.png"
         alt="ai"
@@ -70,7 +115,7 @@ const HeaderImage = () => {
         data-tilt
         ref={imgRef}
       />
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index f5f94f408..65ca0076e 100644
--- a/src/pages/contact/index.tsx
+++ b/src/pages/contact/index.tsx
@@ -1,6 +1,7 @@
 import Layout from "@theme/Layout";
 import styles from "./Contact.module.css";
 import React, { useState, ChangeEvent, FormEvent } from "react";
+import { motion } from "framer-motion";
 
 interface FormValues {
   fullName: string;
@@ -46,15 +47,47 @@ export default function Contact(): JSX.Element {
             <div className={styles.main__contact_contains_left}>
               <div className={styles.main__contact_ud_wrapper}>
                 <div className={styles.ud_contact_title}>
-                  <span className={styles.contact_us}>
+                  <motion.span
+                    initial={{ opacity: 0, x: -150 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      duration: 1,
+                      type: "spring",
+                      stiffness: 100,
+                      delay: 0.2,
+                    }}
+                    className={styles.contact_us}
+                  >
                     <b>CONTACT US</b>
-                  </span>
-                  <h2 className={styles.contact_heading}>
+                  </motion.span>
+                  <motion.h2
+                    initial={{ opacity: 0, x: -150 }}
+                    whileInView={{ opacity: 1, x: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      duration: 1,
+                      type: "spring",
+                      stiffness: 100,
+                      delay: 0.5,
+                    }}
+                    className={styles.contact_heading}
+                  >
                     Let's talk about your problem.
-                  </h2>
+                  </motion.h2>
                 </div>
                 <div className={styles.contact_info}>
-                  <div className={styles.contact_info_item}>
+                  <motion.div
+                    initial={{ opacity: 0, y: 150 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      duration: 1,
+                      type: "spring",
+                      stiffness: 100,
+                      delay: 0.5,
+                    }}
+                    className={styles.contact_info_item}>
                     <div className={styles.icon}>
                       <svg
                         width="29"
@@ -72,8 +105,18 @@ export default function Contact(): JSX.Element {
                         Mandsaur, Madhya Pradesh, India - 458002
                       </p>
                     </div>
-                  </div>
-                  <div className={styles.contact_info_item}>
+                  </motion.div>
+                  <motion.div
+                    initial={{ opacity: 0, y: 150 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{
+                      duration: 1,
+                      type: "spring",
+                      stiffness: 100,
+                      delay: 0.5,
+                    }}
+                    className={styles.contact_info_item}>
                     <div className={styles.icon}>
                       <svg
                         width="34"
@@ -90,11 +133,21 @@ export default function Contact(): JSX.Element {
                         ajaydhyangar49@gmail.com
                       </p>
                     </div>
-                  </div>
+                  </motion.div>
                 </div>
               </div>
             </div>
-            <div className={styles.main__contact_contains_right}>
+            <motion.div
+              initial={{ opacity: 0, x: 150 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 1,
+                type: "spring",
+                stiffness: 100,
+                delay: 0.5,
+              }}
+              className={styles.main__contact_contains_right}>
               <div className={styles.form_container}>
                 <h3 className={styles.form_heading}>Send us a Message</h3>
                 <form onSubmit={handleSubmit}>
@@ -157,7 +210,7 @@ export default function Contact(): JSX.Element {
                   </div>
                 </form>
               </div>
-            </div>
+            </motion.div>
           </div>
         </div>
       </section>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 85fda35e1..fa9a0c62c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -11,6 +11,7 @@ import { featuresData, coursesData } from "../database/home";
 import Header from "../components/HomePage/Header";
 import Tweet from "../components/Tweet";
 import Tweets, { type TweetItem } from "../data/tweets";
+import { motion } from "framer-motion";
 
 function TweetsSection(): React.JSX.Element {
   const tweetColumns: TweetItem[][] = [[], [], []];
@@ -21,21 +22,44 @@ function TweetsSection(): React.JSX.Element {
   return (
     <div className={clsx(styles.section, styles.sectionAlt)}>
       <div className="tweets-container">
-        <div className={styles.home__divider}>
+        <motion.div
+          initial={{ opacity: 0, x: -150 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+          className={styles.home__divider}
+        >
           <Heading
             as="h2"
             className={clsx("text--center")}
           >
             Loved by many Users
           </Heading>
-        </div>
+        </motion.div>
         <div className={clsx("row", styles.tweetsSection)}>
           {tweetColumns.map((tweetItems, i) => (
-            <div className="col col--4" key={i}>
+            <motion.div
+            initial={{ opacity: 0, y: -150 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 1,
+              type: "spring",
+              stiffness: 100,
+              delay: 0.5,
+            }}
+            className="col col--4"
+            key={i}
+          >
               {tweetItems.map((tweet) => (
                 <Tweet {...tweet} key={tweet.url} />
               ))}
-            </div>
+            </motion.div>
           ))}
         </div>
       </div>
@@ -57,17 +81,63 @@ export default function Home(): React.JSX.Element {
 
         <hr className={styles.home__hr} />
 
-        <div className={styles.home__divider}>
+        <motion.div
+          initial={{ opacity: 0, x: -150 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+          className={styles.home__divider}
+        >
           <Heading as="h2">Courses Available</Heading>
-        </div>
+        </motion.div>
 
+        <motion.div
+          initial={{ opacity: 0, y: -150 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+        >
         <Courses courses={coursesData} />
+        </motion.div>
 
-        <div className={styles.home__divider}>
+        <motion.div
+          initial={{ opacity: 0, x: -150 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+          className={styles.home__divider}
+        >
           <Heading as="h2">Features of {siteConfig.title}</Heading>
-        </div>
+        </motion.div>
 
+        <motion.div
+          initial={{ opacity: 0, y: -150 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{
+            duration: 1,
+            type: "spring",
+            stiffness: 100,
+            delay: 0.5,
+          }}
+        >
         <Features features={featuresData} />
+        </motion.div>
 
         <TweetsSection />
       </main>
diff --git a/src/pages/showcase/index.tsx b/src/pages/showcase/index.tsx
index 71022959c..e496d4d6d 100644
--- a/src/pages/showcase/index.tsx
+++ b/src/pages/showcase/index.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useMemo, useEffect} from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 
@@ -21,10 +21,10 @@ import {
 import ShowcaseTooltip from './_components/ShowcaseTooltip';
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import Translate, {translate} from '@docusaurus/Translate';
-import {useHistory, useLocation} from '@docusaurus/router';
-import {usePluralForm} from '@docusaurus/theme-common';
-
+import Translate, { translate } from '@docusaurus/Translate';
+import { useHistory, useLocation } from '@docusaurus/router';
+import { usePluralForm } from '@docusaurus/theme-common';
+import { motion } from "framer-motion";
 import styles from './styles.module.css';
 
 const TITLE =
@@ -40,13 +40,13 @@ type UserState = {
 };
 
 function restoreUserState(userState: UserState | null) {
-  const {scrollTopPosition, focusedElementId} = userState ?? {
+  const { scrollTopPosition, focusedElementId } = userState ?? {
     scrollTopPosition: 0,
     focusedElementId: undefined,
   };
   // @ts-expect-error: if focusedElementId is undefined it returns null
   document.getElementById(focusedElementId)?.focus();
-  window.scrollTo({top: scrollTopPosition});
+  window.scrollTo({ top: scrollTopPosition });
 }
 
 export function prepareUserState(): UserState | undefined {
@@ -116,24 +116,57 @@ function useFilteredUsers() {
 function ShowcaseHeader() {
   return (
     <section className="margin-top--lg margin-bottom--lg text--center">
-      <h1>{TITLE}</h1>
-      <p>{DESCRIPTION}</p>
-      <a
-        className="button button--primary"
-        href={EDIT_URL}
-        target="_blank"
-        rel="noreferrer"
+      <motion.h1
+        initial={{ opacity: 0, x: -150 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.2,
+        }}
+      >{TITLE}</motion.h1>
+      <motion.p
+        initial={{ opacity: 0, y: 150 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 0.8,
+        }}
+      >{DESCRIPTION}</motion.p>
+
+      <motion.div
+        initial={{ opacity: 0, y: 150 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{
+          duration: 1,
+          type: "spring",
+          stiffness: 100,
+          delay: 1.1,
+        }}
       >
-        <Translate id="showcase.header.button">
-          🌟 Join the CodeHarbarHub Community
-        </Translate>
-      </a>
+        <a
+          className="button button--primary"
+          href={EDIT_URL}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Translate id="showcase.header.button">
+            🌟 Join the CodeHarbarHub Community
+          </Translate>
+        </a>
+      </motion.div>
     </section>
   );
 }
 
 function useSiteCountPlural() {
-  const {selectMessage} = usePluralForm();
+  const { selectMessage } = usePluralForm();
   return (sitesCount: number) =>
     selectMessage(
       sitesCount,
@@ -156,14 +189,47 @@ function ShowcaseFilters() {
     <section className="container margin-top--l margin-bottom--lg">
       <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
         <div>
-          <h2>
+          <motion.h2
+            initial={{ opacity: 0, x: -150 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 1,
+              type: "spring",
+              stiffness: 100,
+              delay: 1,
+            }}
+          >
             <Translate id="showcase.filters.title">Filters</Translate>
-          </h2>
-          <span>{siteCountPlural(filteredUsers.length)}</span>
+          </motion.h2>
+          <motion.div
+            initial={{ opacity: 0, x: -150 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 1,
+              type: "spring",
+              stiffness: 100,
+              delay: 1,
+            }}
+          >
+            <span>{siteCountPlural(filteredUsers.length)}</span>
+          </motion.div>
         </div>
         <ShowcaseFilterToggle />
       </div>
-      <ul className={clsx('clean-list', styles.checkboxList)}>
+      <motion.ul
+                initial={{ opacity: 0}}
+                whileInView={{ opacity: 1}}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 4,
+                  type: "spring",
+                  stiffness: 100,
+                  delay: 1.2,
+                }}
+                className={clsx('clean-list', styles.checkboxList)}
+              >
         {TagList.map((tag, i) => {
           const {label, description, color} = Tags[tag];
           const id = `showcase_checkbox_id_${tag}`;
@@ -199,7 +265,7 @@ function ShowcaseFilters() {
             </li>
           );
         })}
-      </ul>
+      </motion.ul>
     </section>
   );
 }
@@ -276,32 +342,86 @@ function ShowcaseCards() {
                   styles.showcaseFavoriteHeader,
                 )}
               >
-                <h2>
+                <motion.h2
+                  initial={{ opacity: 0, x: -150 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{
+                    duration: 1,
+                    type: "spring",
+                    stiffness: 100,
+                    delay: 1,
+                  }}
+                >
                   <Translate id="showcase.favoritesList.title">
                     Our favorites
                   </Translate>
-                </h2>
-                <FavoriteIcon svgClass={styles.svgIconFavorite} />
+                </motion.h2>
+                <motion.h2
+                  initial={{ opacity: 0, x: -150 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{
+                    duration: 1,
+                    type: "spring",
+                    stiffness: 100,
+                    delay: 1,
+                  }}
+                >
+                  <FavoriteIcon svgClass={styles.svgIconFavorite} />
+                </motion.h2>
                 <SearchBar />
               </div>
-              <ul
+              <motion.ul
+                initial={{ opacity: 0}}
+                whileInView={{ opacity: 1}}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 4,
+                  type: "spring",
+                  stiffness: 100,
+                  delay: 1,
+                }}
                 className={clsx('container', 'clean-list', styles.showcaseList)}
               >
+
                 {favoriteUsers.map((user) => (
                   <ShowcaseCard key={user.title} user={user} />
                 ))}
-              </ul>
+              </motion.ul>
             </div>
           </div>
           <div className="container margin-top--lg">
-            <h2 className={styles.showcaseHeader}>
+            <motion.h2
+              initial={{ opacity: 0, x: -150 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 1,
+                type: "spring",
+                stiffness: 100,
+                delay: 0.5,
+              }}
+              className={styles.showcaseHeader}
+            >
               <Translate id="showcase.usersList.allUsers">All sites</Translate>
-            </h2>
-            <ul className={clsx('clean-list', styles.showcaseList)}>
+            </motion.h2>
+            <motion.ul
+              initial={{ opacity: 0}}
+              whileInView={{ opacity: 1}}
+              viewport={{ once: true }}
+              transition={{
+                duration: 4,
+                type: "spring",
+                stiffness: 100,
+                delay: 0.8,
+              }}
+              className={clsx('clean-list', styles.showcaseList)}
+            >
               {otherUsers.map((user) => (
                 <ShowcaseCard key={user.title} user={user} />
               ))}
-            </ul>
+            </motion.ul>
           </div>
         </>
       ) : (