diff --git a/app/(default)/ebpf-instrumentation/page.tsx b/app/(default)/ebpf-instrumentation/page.tsx
new file mode 100644
index 00000000..a943b18f
--- /dev/null
+++ b/app/(default)/ebpf-instrumentation/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+import Footer from "@/components/ui/footer";
+import Hero from "@/components/pillar-page/hero";
+import Features from "@/components/pillar-page/feature";
+import ProblemBlocks from "@/components/pillar-page/block";
+import Banner from "@/components/pillar-page/banner";
+import Language from "@/components/language";
+import SocialLinks from "@/components/pillar-page/community";
+import { Testimonial } from "@/components/testimonial";
+import { testimonialData } from "@/components/utils/testimonial";
+import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
+import { blocksData } from "@/components/utils/common";
+import { featuresData , faqQuestions} from "@/components/utils/ebpf-instrumentation";
+import BannerBunny from "@/public/images/banner-bunny.png";
+import FAQ from "@/components/pillar-page/faq";
+const heroData = {
+  titleTop: "Accelerate automated test ",
+  titleBottom: "development with eBPF !",
+  subtitleTop: "With Keploy, you can record-and-generate automated tests and data-mocks in 2 mins",
+  subtitleBottom:
+    "Rapidly scale your automated test coverage with a zero-code platform that works out of the box. 🚀",
+  animationSrc: testAndStubsGen,
+};
+const ProblemBlocksData = {
+  title: "Smart generation - Enhanced development",
+  subtitle: "👋 Say Hi to 👋",
+  btnText: "Try Keploy",
+  blocksData: blocksData,
+};
+const FeaturesData = {
+  title: "With Keploy's eBPF Instrumentation",
+  subtitle:
+    "Transforming interactions into realistic, diverse, and customizable stubs for precise testing",
+  highlightTitle: "eliminate",
+  featuresData: featuresData,
+};
+const BannerData = {
+  title: " 🚀 Elevate Your Testing with Keploy!",
+  subtitle: "Ready to simplify your testing process?",
+  paraText:
+    "Click to experience Keploy's magic locally or book a demo for an interactive walkthrough. Embark on a journey to stress-free testing today!",
+  btnTextLeft: "Book Cloud Demo",
+  btnTextRight: "Try Locally",
+  bannerImage: BannerBunny,
+};
+export default function Home() {
+  return (
+    <>
+      <Hero
+        titleTop={heroData.titleTop}
+        titleBottom={heroData.titleBottom}
+        subtitleTop={heroData.subtitleTop}
+        subtitleBottom={heroData.subtitleBottom}
+        animationSrc={heroData.animationSrc}
+      />
+      <ProblemBlocks
+        title={ProblemBlocksData.title}
+        subtitle={ProblemBlocksData.subtitle}
+        btnText={ProblemBlocksData.btnText}
+        blocksData={ProblemBlocksData.blocksData}
+      />
+      <Features
+        title={FeaturesData.title}
+        subtitle={FeaturesData.subtitle}
+        highlightTitle={FeaturesData.highlightTitle}
+        featuresData={FeaturesData.featuresData}
+      />
+      <Testimonial
+        content={testimonialData[1].content}
+        author={testimonialData[1].author}
+        company={testimonialData[1].company}
+        image={testimonialData[1].image}
+      />
+      <SocialLinks />
+      <Testimonial
+        content={testimonialData[0].content}
+        author={testimonialData[0].author}
+        company={testimonialData[0].company}
+        image={testimonialData[0].image}
+      />
+      <Language />
+      <FAQ questions={faqQuestions} />
+      <Banner
+        title={BannerData.title}
+        subtitle={BannerData.subtitle}
+        paraText={BannerData.paraText}
+        btnTextLeft={BannerData.btnTextLeft}
+        btnTextRight={BannerData.btnTextRight}
+        bannerImage={BannerData.bannerImage}
+      />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/(default)/native-integration/page.tsx b/app/(default)/native-integration/page.tsx
new file mode 100644
index 00000000..e2fbb66c
--- /dev/null
+++ b/app/(default)/native-integration/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+import Footer from "@/components/ui/footer";
+import Hero from "@/components/pillar-page/hero";
+import Features from "@/components/pillar-page/feature";
+import ProblemBlocks from "@/components/pillar-page/block";
+import Banner from "@/components/pillar-page/banner";
+import Language from "@/components/language";
+import SocialLinks from "@/components/pillar-page/community";
+import { Testimonial } from "@/components/testimonial";
+import { testimonialData } from "@/components/utils/testimonial";
+import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
+import { blocksData } from "@/components/utils/common";
+import { featuresData,faqQuestions } from "@/components/utils/ebpf-instrumentation";
+import BannerBunny from "@/public/images/banner-bunny.png";
+import FAQ from "@/components/pillar-page/faq";
+const heroData = {
+  titleTop: "Maximizing Efficiency and ",
+  titleBottom: "Seamlessness with Native Integration!",
+  subtitleTop: "Integrate Keploy with dev-setup to generate automated tests and data-mocks in 2 mins!",
+  subtitleBottom:
+    "Scale your automated test coverage with a zero-code platform that works out of the box🚀",
+  animationSrc: testAndStubsGen,
+};
+const ProblemBlocksData = {
+  title: "Smart generation - Enhanced development",
+  subtitle: "👋 Say Hi to 👋",
+  btnText: "Try Keploy",
+  blocksData: blocksData,
+};
+const FeaturesData = {
+  title: "With Keploy's Native Integration",
+  subtitle:
+    "Transforming interactions into realistic, diverse, and customizable stubs for precise testing",
+  highlightTitle: "eliminate",
+  featuresData: featuresData,
+};
+const BannerData = {
+  title: " 🚀 Elevate Your Testing with Keploy!",
+  subtitle: "Ready to simplify your testing process?",
+  paraText:
+    "Click to experience Keploy's magic locally or book a demo for an interactive walkthrough. Embark on a journey to stress-free testing today!",
+  btnTextLeft: "Book Cloud Demo",
+  btnTextRight: "Try Locally",
+  bannerImage: BannerBunny,
+};
+export default function Home() {
+  return (
+    <>
+      <Hero
+        titleTop={heroData.titleTop}
+        titleBottom={heroData.titleBottom}
+        subtitleTop={heroData.subtitleTop}
+        subtitleBottom={heroData.subtitleBottom}
+        animationSrc={heroData.animationSrc}
+      />
+      <ProblemBlocks
+        title={ProblemBlocksData.title}
+        subtitle={ProblemBlocksData.subtitle}
+        btnText={ProblemBlocksData.btnText}
+        blocksData={ProblemBlocksData.blocksData}
+      />
+      <Features
+        title={FeaturesData.title}
+        subtitle={FeaturesData.subtitle}
+        highlightTitle={FeaturesData.highlightTitle}
+        featuresData={FeaturesData.featuresData}
+      />
+      <Testimonial
+        content={testimonialData[1].content}
+        author={testimonialData[1].author}
+        company={testimonialData[1].company}
+        image={testimonialData[1].image}
+      />
+      <SocialLinks />
+      <Testimonial
+        content={testimonialData[0].content}
+        author={testimonialData[0].author}
+        company={testimonialData[0].company}
+        image={testimonialData[0].image}
+      />
+      <Language />
+      <FAQ questions={faqQuestions} />
+      <Banner
+        title={BannerData.title}
+        subtitle={BannerData.subtitle}
+        paraText={BannerData.paraText}
+        btnTextLeft={BannerData.btnTextLeft}
+        btnTextRight={BannerData.btnTextRight}
+        bannerImage={BannerData.bannerImage}
+      />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/(default)/stub-generation/page.tsx b/app/(default)/stub-generation/page.tsx
index 91386fa3..e345f349 100644
--- a/app/(default)/stub-generation/page.tsx
+++ b/app/(default)/stub-generation/page.tsx
@@ -1,36 +1,94 @@
-'use client'
+"use client";
 import Footer from "@/components/ui/footer";
-import Hero from '@/components/stub-generation/hero'
-import Features from '@/components/stub-generation/feature'
-import ProblemBlocks from '@/components/stub-generation/block'
-import Banner from '@/components/stub-generation/banner'
+import Hero from "@/components/pillar-page/hero";
+import Features from "@/components/pillar-page/feature";
+import ProblemBlocks from "@/components/pillar-page/block";
+import Banner from "@/components/pillar-page/banner";
 import Language from "@/components/language";
-import SocialLinks from "@/components/stub-generation/community"
+import SocialLinks from "@/components/pillar-page/community";
 import { Testimonial } from "@/components/testimonial";
 import { testimonialData } from "@/components/utils/testimonial";
-
+import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
+import { blocksData } from "@/components/utils/common";
+import { featuresData,faqQuestions } from "@/components/utils/stub-generation";
+import BannerBunny from "@/public/images/banner-bunny.png";
+import FAQ from "@/components/pillar-page/faq";
+const heroData = {
+  titleTop: "Effortless Stub Generation",
+  titleBottom: "for Comprehensive Test Coverage!",
+  subtitleTop: "Transforming User Scenarios into Reliable Test Data Instantly!",
+  subtitleBottom:
+    "Seamlessly Convert User Interactions into Precise Test Cases and Data Stubs 🚀",
+  animationSrc: testAndStubsGen,
+};
+const ProblemBlocksData = {
+  title: "Smart generation - Enhanced development",
+  subtitle: "👋 Say Hi to 👋",
+  btnText: "Try Keploy",
+  blocksData: blocksData,
+};
+const FeaturesData = {
+  title: " With Keploy's stub generation",
+  subtitle:
+    "Transforming interactions into realistic, diverse, and customizable stubs for precise testing",
+  highlightTitle: "eliminate",
+  featuresData: featuresData,
+};
+const BannerData = {
+  title: " 🚀 Elevate Your Testing with Keploy!",
+  subtitle: "Ready to simplify your testing process?",
+  paraText:
+    "Click to experience Keploy's magic locally or book a demo for an interactive walkthrough. Embark on a journey to stress-free testing today!",
+  btnTextLeft: "Book Cloud Demo",
+  btnTextRight: "Try Locally",
+  bannerImage: BannerBunny,
+};
 export default function Home() {
   return (
     <>
-        <Hero />
-        <ProblemBlocks />
-        <Features />
-        <Testimonial
-          content={testimonialData[1].content}
-          author={testimonialData[1].author}
-          company={testimonialData[1].company}
-          image={testimonialData[1].image}
-        />
-        <SocialLinks/>
-        <Testimonial
-          content={testimonialData[0].content}
-          author={testimonialData[0].author}
-          company={testimonialData[0].company}
-          image={testimonialData[0].image}
-        />
-        <Language />
-        <Banner />
-        <Footer />
+      <Hero
+        titleTop={heroData.titleTop}
+        titleBottom={heroData.titleBottom}
+        subtitleTop={heroData.subtitleTop}
+        subtitleBottom={heroData.subtitleBottom}
+        animationSrc={heroData.animationSrc}
+      />
+      <ProblemBlocks
+        title={ProblemBlocksData.title}
+        subtitle={ProblemBlocksData.subtitle}
+        btnText={ProblemBlocksData.btnText}
+        blocksData={ProblemBlocksData.blocksData}
+      />
+      <Features
+        title={FeaturesData.title}
+        subtitle={FeaturesData.subtitle}
+        highlightTitle={FeaturesData.highlightTitle}
+        featuresData={FeaturesData.featuresData}
+      />
+      <Testimonial
+        content={testimonialData[1].content}
+        author={testimonialData[1].author}
+        company={testimonialData[1].company}
+        image={testimonialData[1].image}
+      />
+      <SocialLinks />
+      <Testimonial
+        content={testimonialData[0].content}
+        author={testimonialData[0].author}
+        company={testimonialData[0].company}
+        image={testimonialData[0].image}
+      />
+      <Language />
+      <FAQ questions={faqQuestions} />
+      <Banner
+        title={BannerData.title}
+        subtitle={BannerData.subtitle}
+        paraText={BannerData.paraText}
+        btnTextLeft={BannerData.btnTextLeft}
+        btnTextRight={BannerData.btnTextRight}
+        bannerImage={BannerData.bannerImage}
+      />
+      <Footer />
     </>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/app/(default)/test-duplication/page.tsx b/app/(default)/test-duplication/page.tsx
new file mode 100644
index 00000000..40495da3
--- /dev/null
+++ b/app/(default)/test-duplication/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+import Footer from "@/components/ui/footer";
+import Hero from "@/components/pillar-page/hero";
+import Features from "@/components/pillar-page/feature";
+import ProblemBlocks from "@/components/pillar-page/block";
+import Banner from "@/components/pillar-page/banner";
+import Language from "@/components/language";
+import SocialLinks from "@/components/pillar-page/community";
+import { Testimonial } from "@/components/testimonial";
+import { testimonialData } from "@/components/utils/testimonial";
+import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
+import { blocksData } from "@/components/utils/common";
+import { featuresData,faqQuestions } from "@/components/utils/test-duplication";
+import BannerBunny from "@/public/images/banner-bunny.png";
+import FAQ from "@/components/pillar-page/faq";
+const heroData = {
+  titleTop: "Increase Test coverage with ",
+  titleBottom: "Keploy Dedup feature",
+  subtitleTop: "Avoid confusion and Duplication in Test Execution!",
+  subtitleBottom:
+    "Remove the duplicate and redundant test cases in minutes. 🚀",
+  animationSrc: testAndStubsGen,
+};
+const ProblemBlocksData = {
+  title: "Smart generation - Enhanced development",
+  subtitle: "👋 Say Hi to 👋",
+  btnText: "Try Keploy",
+  blocksData: blocksData,
+};
+const FeaturesData = {
+  title: "With Keploy's DeDuplication",
+  subtitle:
+    "Replace multiple tools in your test stack with one zero-code platform.Generic Features list/tables",
+  highlightTitle: "eliminate",
+  featuresData: featuresData,
+};
+const BannerData = {
+  title: " 🚀 Elevate Your Testing with Keploy!",
+  subtitle: "Ready to simplify your testing process?",
+  paraText:
+    "Click to experience Keploy's magic locally or book a demo for an interactive walkthrough. Embark on a journey to stress-free testing today!",
+  btnTextLeft: "Book Cloud Demo",
+  btnTextRight: "Try Locally",
+  bannerImage: BannerBunny,
+};
+export default function Home() {
+  return (
+    <>
+      <Hero
+        titleTop={heroData.titleTop}
+        titleBottom={heroData.titleBottom}
+        subtitleTop={heroData.subtitleTop}
+        subtitleBottom={heroData.subtitleBottom}
+        animationSrc={heroData.animationSrc}
+      />
+      <ProblemBlocks
+        title={ProblemBlocksData.title}
+        subtitle={ProblemBlocksData.subtitle}
+        btnText={ProblemBlocksData.btnText}
+        blocksData={ProblemBlocksData.blocksData}
+      />
+      <Features
+        title={FeaturesData.title}
+        subtitle={FeaturesData.subtitle}
+        highlightTitle={FeaturesData.highlightTitle}
+        featuresData={FeaturesData.featuresData}
+      />
+      <Testimonial
+        content={testimonialData[1].content}
+        author={testimonialData[1].author}
+        company={testimonialData[1].company}
+        image={testimonialData[1].image}
+      />
+      <SocialLinks />
+      <Testimonial
+        content={testimonialData[0].content}
+        author={testimonialData[0].author}
+        company={testimonialData[0].company}
+        image={testimonialData[0].image}
+      />
+      <Language />
+      <FAQ questions={faqQuestions} />
+      <Banner
+        title={BannerData.title}
+        subtitle={BannerData.subtitle}
+        paraText={BannerData.paraText}
+        btnTextLeft={BannerData.btnTextLeft}
+        btnTextRight={BannerData.btnTextRight}
+        bannerImage={BannerData.bannerImage}
+      />
+      <Footer />
+    </>
+  );
+}
diff --git a/components/stub-generation/community.css b/app/css/community.css
similarity index 100%
rename from components/stub-generation/community.css
rename to app/css/community.css
diff --git a/components/FeatureMoblieView.tsx b/components/FeatureMoblieView.tsx
index c9d42fff..a73ee4f0 100644
--- a/components/FeatureMoblieView.tsx
+++ b/components/FeatureMoblieView.tsx
@@ -136,6 +136,10 @@ export default function FeaturesMobileView() {
                     setTab(2);
                   }}
                 >
+                <div className="flex flex-col">
+
+                  <div className="flex items-center">
+
                   <div>
                     <div className="mb-1 font-bold leading-snug tracking-tight text-secondary-300">
                       Test Deduplication
@@ -156,7 +160,12 @@ export default function FeaturesMobileView() {
                         fillRule="nonzero"
                       />
                     </svg>
-                  </div>
+                    </div>
+                    </div>
+                    <div>
+                      <Link className="btn mt-4 text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0" href="/test-duplication">Explore More</Link>
+                    </div>
+                </div>
                 </a>
                 <a
                   className={`flex items-center text-lg p-5 rounded border ease-in-out mb-3 transition duration-300 hover:shadow-lg ${
@@ -365,4 +374,4 @@ export default function FeaturesMobileView() {
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/components/community.tsx b/components/community.tsx
index 7e366e9f..9eea6156 100644
--- a/components/community.tsx
+++ b/components/community.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./community.css";
+import "../app/css/community.css";
 import Image from "next/image";
 import CommunityBunny from "@/public/images/community-bunny.png";
 import GithubSvg from "@/public/images/social/github.svg";
diff --git a/components/features.tsx b/components/features.tsx
index 8119c0e8..8d85e2f0 100644
--- a/components/features.tsx
+++ b/components/features.tsx
@@ -109,11 +109,13 @@ const TextSection = ({
   heading,
   description,
   btnDescription,
+  btnLink,
 }: {
   svg: any;
   heading: string;
   description: string;
   btnDescription?: string;
+  btnLink?: any;
 }) => {
   return (
     <div className="flex flex-col items-center pl-4 mt-6 mb-8 text-center md:block md:mb-0 h-min md:text-left md:mt-0 text-details">
@@ -128,7 +130,7 @@ const TextSection = ({
         <div>
           <Link
             className="btn mt-8 text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0"
-            href="/stub-generation"
+            href={btnLink}
           >
             {btnDescription}
           </Link>
@@ -228,6 +230,7 @@ export default function Features() {
                 heading={" Test and Stubs Generation"}
                 description=" Record and replay complex, distributed API flows as mocks and stubs. It's like time machine for tests!"
                 btnDescription="Explore More"
+                btnLink="/stub-generation"
               />
             </div>
             <div className="flex items-center detail">
@@ -246,6 +249,8 @@ export default function Features() {
                 }
                 heading={"Test Deduplication"}
                 description="Automatically detect and remove duplicate tests, ideal for scenarios recorded in live-environments."
+                btnDescription="Explore More"
+                btnLink="/test-duplication"
               />
             </div>
             <div className="flex items-center detail">
@@ -264,6 +269,8 @@ export default function Features() {
                 }
                 heading={"Native Integration"}
                 description="Merge Keploy tests with testing libraries(JUnit, go-test, py-test, jest) for combined test coverage."
+                btnDescription="Explore More"
+                btnLink="/native-integration"
               />
             </div>
           </div>
@@ -275,4 +282,4 @@ export default function Features() {
       </section>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/components/pillar-page/banner.tsx b/components/pillar-page/banner.tsx
new file mode 100644
index 00000000..0752cd1a
--- /dev/null
+++ b/components/pillar-page/banner.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+
+export default function Banner(props: {
+  title: string;
+  subtitle: string;
+  paraText: string;
+  btnTextLeft: string;
+  btnTextRight: string;
+  bannerImage: StaticImageData;
+}) {
+  return (
+    <section>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="pb-12 md:pb-20">
+          {/* CTA box */}
+          <div
+            className="relative bg-secondary-300  rounded-lg  py-10 px-8 md:py-16 md:px-12 shadow-2xl overflow-hidden"
+            data-aos="zoom-y-out"
+          >
+            <div className="relative flex flex-col lg:flex-row justify-between items-center">
+              {/* CTA content */}
+              <div className="text-center lg:text-left lg:max-w-xl">
+                <h3 className="h3 text-primary-300 mb-3"> {props.title} </h3>
+                {props.subtitle && (
+                  <h4 className="h4 text-white mb-3 ">{props.subtitle}</h4>
+                )}
+                {props.paraText && (
+                  <p className="text-neutral-300 text-lg mb-6">
+                    {props.paraText}
+                  </p>
+                )}
+                <div
+                  className="flex flex-col lg:flex-row items-center"
+                  data-aos="zoom-y-out"
+                  data-aos-delay="300"
+                >
+                  <div>
+                    <a
+                      className="btn text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0"
+                      href="https://calendar.app.google/8Ncpff4QnAhpVnYd8"
+                    >
+                      {props.btnTextLeft}
+                    </a>
+                  </div>
+                  <div>
+                    <a
+                      className="btn text-white bg-secondary-300 hover:text-primary-300 w-full border-white sm:w-auto sm:ml-4 sm:mt-4 lg:mt-0"
+                      href="https://www.github.com/keploy/keploy"
+                    >
+                      {props.btnTextRight}
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="absolute right-0 bottom-0 hidden lg:block ">
+              <Image src={props.bannerImage} alt="Image" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/stub-generation/block.tsx b/components/pillar-page/block.tsx
similarity index 54%
rename from components/stub-generation/block.tsx
rename to components/pillar-page/block.tsx
index cd3aa567..0b7fe4ea 100644
--- a/components/stub-generation/block.tsx
+++ b/components/pillar-page/block.tsx
@@ -1,36 +1,53 @@
-import { blocksData } from "../utils/stub-generation";
-const Item = (props: { title: string, description: string, SvgComponent: Function }) => {
+const Item = (props: {
+  title: string;
+  description: string;
+  SvgComponent: Function;
+}) => {
   return (
     <div className="flex flex-col items-center p-6 bg-white rounded shadow-xl h-full text-center">
       {props.SvgComponent()}
-      <h4 className="text-xl font-bold leading-snug tracking-tight text-accent-200 mb-1">{props.title}</h4>
+      <h4 className="text-xl font-bold leading-snug tracking-tight text-accent-200 mb-1">
+        {props.title}
+      </h4>
       <p className="text-gray-600 mb-4">{props.description}</p>
     </div>
   );
 };
 
-export default function ProblemBlocks() {
+export default function ProblemBlocks(props: {
+  title: string;
+  subtitle: string;
+  btnText: string;
+  blocksData: Array<{
+    title: string;
+    description: string;
+    SvgComponent: Function;
+  }>;
+}) {
   return (
     <section className="relative">
-      <div className="absolute inset-0 top-1/2 md:mt-24 lg:mt-0 bg-gradient-to-b from-secondary-500 to-secondary-100  pointer-events-none" aria-hidden="true" />
+      <div
+        className="absolute inset-0 top-1/2 md:mt-24 lg:mt-0 bg-gradient-to-b from-secondary-500 to-secondary-100  pointer-events-none"
+        aria-hidden="true"
+      />
       <div className="absolute left-0 right-0 bottom-0 m-auto w-px p-px h-20 bg-gray-200 transform translate-y-1/2" />
 
       <div className="relative max-w-6xl mx-auto px-4 sm:px-6">
         <div className="pb-12 md:pb-20">
           <div className=" w-full text-center pb-6 md:pb-10">
-            <h1 className="h1 mb-4 text-secondary-300 whitespace-nowrap">Smart generation - Enhanced development</h1>
+            <h1 className="h1 mb-4 text-secondary-300 whitespace-nowrap">
+              {props.title}
+            </h1>
             <div className="flex justify-center w-full">
               <h3 className="h3 text-xl text-gray-600 flex justify-center items-center">
-
-                &nbsp; 👋 Say Hi to 👋 &nbsp;
-    
+                &nbsp; {props.subtitle} &nbsp;
               </h3>
             </div>
           </div>
 
           {/* Items */}
           <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start md:max-w-2xl lg:max-w-none">
-            {blocksData.map((block, index) => (
+            {props.blocksData.map((block, index) => (
               <Item
                 key={index}
                 title={block.title}
@@ -39,11 +56,18 @@ export default function ProblemBlocks() {
               />
             ))}
           </div>
-          <div className="flex justify-center md:justify-center gap-4 mt-4">
-            <a className="btn text-secondary-300 bg-primary-300 hover:text-white" href="https://www.github.com/keploy/keploy">Try Keploy</a>
-          </div>
+          {props.btnText && (
+            <div className="flex justify-center md:justify-center gap-4 mt-4">
+              <a
+                className="btn text-secondary-300 bg-primary-300 hover:text-white"
+                href="https://www.github.com/keploy/keploy"
+              >
+                {props.btnText}
+              </a>
+            </div>
+          )}
         </div>
       </div>
     </section>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/components/stub-generation/community.tsx b/components/pillar-page/community.tsx
similarity index 92%
rename from components/stub-generation/community.tsx
rename to components/pillar-page/community.tsx
index 5ba5ff48..f0f32451 100644
--- a/components/stub-generation/community.tsx
+++ b/components/pillar-page/community.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 // import twitterIcon from './assets/images/twitter-icon.png';
-import "./community.css"
-import { socialLinks } from '../utils/stub-generation';
+import "../../app/css/community.css"
+import { socialLinks } from '../utils/common';
 
 const SocialCloud: React.FC = () => {
   const [value, setValue] = useState("Where Code Meets Community!")
diff --git a/components/pillar-page/faq.tsx b/components/pillar-page/faq.tsx
new file mode 100644
index 00000000..bb78f264
--- /dev/null
+++ b/components/pillar-page/faq.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import Accordion from "../utils/accordion";
+export interface Question {
+  title: string;
+  answer: string;
+}
+
+interface FAQProps {
+  questions: Question[];
+}
+
+const FAQ: React.FC<FAQProps> = ({ questions }) => {
+  return (
+    <div className="max-w-6xl mx-auto px-8 pb-12">
+    <h3 className=" text-center h2 px-10 text-secondary-300 mb-10">
+          Frequently Asked Questions
+          </h3>{questions.map((question, index) => (
+        <div key={index} >
+          <Accordion tag="div" title={question.title}>{question.answer}</Accordion>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+
+
+export default FAQ;
\ No newline at end of file
diff --git a/components/pillar-page/feature.tsx b/components/pillar-page/feature.tsx
new file mode 100644
index 00000000..047b40eb
--- /dev/null
+++ b/components/pillar-page/feature.tsx
@@ -0,0 +1,102 @@
+import { ReactElement } from "react";
+import Link from "next/link";
+export default function Features(props: {
+  title: string;
+  subtitle: string;
+  highlightTitle: string;
+  featuresData: Array<{
+    title: string;
+    description: string;
+    icon: ReactElement;
+    additionalCta?:string;
+    additionalCtaLink?:string;
+  }>;
+}) {
+  return (
+    <section className="bg-neutral-100 text-gray-900 pt-12 px-4 mb-20 sm:px-6">
+      <div className="container mx-auto px-4">
+        {/* Section Heading */}
+        <div className="text-center mb-12">
+          {props.subtitle && (
+            <h2 className="text-xl text-center text-gray-600 pb-12 md:mt-12">
+              {props.subtitle}
+            </h2>
+          )}
+          <h2 className="h2 font-bold text-secondary-300">
+            {props.title}
+            <span
+              className="relative inline-block pl-1 border-l-2 border-primary-400 mt-3"
+              data-aos="fade-right"
+              data-aos-delay="200"
+            >
+              {" "}
+              <span
+                className="absolute inset-0 bg-gradient-to-r from-primary-300 to-primary-50 opacity-50 "
+                aria-hidden="true"
+              />
+              <span
+                className="relative text-orange-500 "
+                data-aos="fade-in"
+                data-aos-delay="500"
+              >
+                {props.highlightTitle}&nbsp;
+              </span>
+            </span>
+          </h2>
+        </div>
+        {/* Grid of features */}
+        <div className="flex flex-col flex-wrap justify-center gap-6">
+          <div className="flex flex-col sm:flex-row justify-center gap-6">
+            {props.featuresData.slice(0, 3).map((feature, index) => (
+              <TextBlock
+                key={index}
+                heading={feature.title}
+                subHeading={feature.description}
+                icon={feature.icon}
+                additionalCta={feature.additionalCta}
+                additionalCtaLink={feature.additionalCtaLink}
+              />
+            ))}
+          </div>
+          <div className="flex flex-col sm:flex-row justify-center gap-6">
+            {props.featuresData.slice(3, 5).map((feature, index) => (
+              <TextBlock
+                key={index}
+                heading={feature.title}
+                subHeading={feature.description}
+                icon={feature.icon}
+                additionalCta={feature.additionalCta}
+                additionalCtaLink={feature.additionalCtaLink}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const TextBlock = (props: {
+  heading: string;
+  subHeading: string;
+  icon: ReactElement;
+  additionalCta?:string;
+  additionalCtaLink?:string
+}) => {
+  return (
+    <div className="flex flex-col items-center justify-center bg-neutral-100 text-black p-4 border-transparent shadow-md transition-shadow duration-200 w-auto max-w-xs hover:bg-gradient-to-r from-orange-100 via-orange-100 to-orange-200">
+      <div className="mb-8">
+        <div className="flex items-center justify-center w-16 h-16 rounded-full border-1 border-white">
+          {props.icon}
+        </div>
+      </div>
+      <h4 className="text-xl text-center text-accent-200 font-bold leading-snug tracking-tight mb-1">
+        {props.heading}
+      </h4>
+      <p className="text-gray-600 text-center">{props.subHeading}</p>
+      {
+        props.additionalCta && props.additionalCtaLink && <Link className="mt-2 text-center" href={props.additionalCtaLink}><span className="text-center underline text-gray italic">{props.additionalCta}</span></Link>
+      }
+    </div>
+  );
+};
diff --git a/components/pillar-page/hero.tsx b/components/pillar-page/hero.tsx
new file mode 100644
index 00000000..dd24b3da
--- /dev/null
+++ b/components/pillar-page/hero.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { TrustedBy } from "../trustedBy";
+import dynamic from "next/dynamic";
+interface HeroProps {
+  titleTop: string;
+  titleBottom: string;
+  subtitleTop: string;
+  subtitleBottom: string;
+  animationSrc?: object | string; // Can be either a Lottie animation object or a string URL
+  showTrustedBy?: boolean; // Optional prop, defaulting to true
+}
+
+const LottiePlayer = dynamic(() => import("../LottiePlayer"), { ssr: false });
+const Hero: React.FC<HeroProps> = ({
+  titleTop,
+  titleBottom,
+  subtitleTop,
+  subtitleBottom,
+  animationSrc,
+  showTrustedBy = true,
+}) => {
+  return (
+    <section className="relative bg-neutral-100 text-gray-800 overflow-hidden">
+      <div
+        className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none "
+        aria-hidden="true"
+      >
+        <svg
+          width="1360"
+          height="578"
+          viewBox="0 0 1360 578"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <linearGradient
+              x1="50%"
+              y1="0%"
+              x2="50%"
+              y2="100%"
+              id="illustration-01"
+            >
+              <stop stopColor="#FFF" offset="0%" />
+              <stop stopColor="#f5f5f5" offset="50%" />
+              <stop stopColor="#EAEAEA" offset="100%" />
+            </linearGradient>
+          </defs>
+          <g fill="url(#illustration-01)" fillRule="evenodd">
+            <circle cx="1232" cy="128" r="128" opacity={0.85} />
+            <circle cx="155" cy="443" r="64" opacity={0.85} />
+          </g>
+        </svg>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6">
+        <div className="pt-32 pb-5 md:pt-40">
+          <div>
+            <p className="text-2xl text-center  text-accent-200 mb-4 md:mb-20">
+              {subtitleTop}
+            </p>
+          </div>
+          <div className="flex flex-wrap justify-center items-start md:gap-8 md:flex-row ">
+            <div className="md:flex-1">
+              <div className="text-center md:text-left">
+                <h1 className="text-4xl md:text-5.5xl text-secondary-300 font-extrabold leading-tighter tracking-tighter mb-4 md:mb-6 ">
+                  {titleTop}
+                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-gradient-500 to-gradient-200">
+                    {titleBottom}
+                  </span>
+                </h1>
+
+                <p className="text-xl text-accent-200 mb-8">{subtitleBottom}</p>
+              </div>
+            </div>
+            {animationSrc && (
+              <div className="md:flex-1 ">
+                <LottiePlayer VideoPath={animationSrc} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {showTrustedBy && <TrustedBy />}
+    </section>
+  );
+};
+
+export default Hero;
diff --git a/components/stub-generation/banner.tsx b/components/stub-generation/banner.tsx
deleted file mode 100644
index 6c09d5ae..00000000
--- a/components/stub-generation/banner.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import BannerBunny from "@/public/images/banner-bunny.png";
-
-export default function Banner() {
-  return (
-    <section>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6">
-        <div className="pb-12 md:pb-20">
-
-          {/* CTA box */}
-          <div className="relative bg-secondary-300  rounded-lg  py-10 px-8 md:py-16 md:px-12 shadow-2xl overflow-hidden" data-aos="zoom-y-out">
-            <div className="relative flex flex-col lg:flex-row justify-between items-center">
-              {/* CTA content */}
-              <div className="text-center lg:text-left lg:max-w-xl">
-                <h3 className="h3 text-primary-300 mb-3"> 🚀 Elevate Your Testing with Keploy!  </h3>
-                <h4 className="h4 text-white mb-3 ">Ready to simplify your testing process?</h4>
-                <p className="text-neutral-300 text-lg mb-6">
-                  Click to experience Keploy's magic locally or book a demo for an interactive walkthrough. Embark on a journey to stress-free testing today!
-                </p>
-                <div className="flex flex-col lg:flex-row items-center" data-aos="zoom-y-out" data-aos-delay="300">
-                  <div>
-                    <a className="btn text-secondary-300 bg-primary-300 hover:text-white w-full mb-4 sm:w-auto sm:mb-0" href="https://calendar.app.google/8Ncpff4QnAhpVnYd8">Book Cloud Demo
-                    </a>
-                  </div>
-                  <div>
-                    <a className="btn text-white bg-secondary-300 hover:text-primary-300 w-full border-white sm:w-auto sm:ml-4 sm:mt-4 lg:mt-0" href="https://www.github.com/keploy/keploy">Try Locally</a>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="absolute right-0 bottom-0 hidden lg:block ">
-              <Image src={BannerBunny} alt="Image" />
-            </div>
-          </div>
-
-        </div>
-      </div>
-    </section>
-  )
-}
\ No newline at end of file
diff --git a/components/stub-generation/feature.tsx b/components/stub-generation/feature.tsx
deleted file mode 100644
index 6e65510d..00000000
--- a/components/stub-generation/feature.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ReactElement } from "react";
-import { featuresData } from "../utils/stub-generation";
-
-export default function Features() {
-  return (
-    <section className="bg-neutral-100 text-gray-900 pt-12 px-4 mb-20 sm:px-6">
-      <div className="container mx-auto px-4">
-
-        {/* Section Heading */}
-        <div className="text-center mb-12">
-          <h2 className="text-xl text-center text-gray-600 pb-12 md:mt-12">Transforming interactions into realistic, diverse, and customizable stubs for precise testing</h2>
-          <h2 className="h2 font-bold text-secondary-300">
-            With Keploy's stub generation{" "}
-            <span className="relative inline-block pl-1 border-l-2 border-primary-400 mt-3" data-aos="fade-right" data-aos-delay="200">{" "}
-              <span
-                className="absolute inset-0 bg-gradient-to-r from-primary-300 to-primary-50 opacity-50 "
-                aria-hidden="true"
-              />
-              <span className="relative text-orange-500 " data-aos="fade-in" data-aos-delay="500">eliminate&nbsp;</span></span>
-          </h2>
-        </div>
-        {/* Grid of features */}
-        <div className="flex flex-col flex-wrap justify-center gap-6">
-          <div className="flex flex-col sm:flex-row justify-center gap-6">
-            {featuresData.slice(0, 3).map((feature, index) => (
-              <TextBlock key={index} heading={feature.title} subHeading={feature.description} icon={feature.icon} />
-            ))}
-          </div>
-          <div className="flex flex-col sm:flex-row justify-center gap-6">
-            {featuresData.slice(3, 5).map((feature, index) => (
-              <TextBlock key={index} heading={feature.title} subHeading={feature.description} icon={feature.icon} />
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-const TextBlock = (props: { heading: string, subHeading: string, icon: ReactElement }) => {
-  return (
-    <div className="flex flex-col items-center justify-center bg-neutral-100 text-black p-4 border-transparent shadow-md transition-shadow duration-200 w-auto max-w-xs hover:bg-gradient-to-r from-orange-100 via-orange-100 to-orange-200">
-      <div className="mb-8">
-        <div className="flex items-center justify-center w-16 h-16 rounded-full border-1 border-white">
-          {props.icon}
-        </div>
-      </div>
-      <h4 className="text-xl text-center text-accent-200 font-bold leading-snug tracking-tight mb-1">{props.heading}</h4>
-      <p className="text-gray-600 text-center">{props.subHeading}</p>
-    </div>
-  );
-};
-
-
diff --git a/components/stub-generation/hero.tsx b/components/stub-generation/hero.tsx
deleted file mode 100644
index 91e3d2d2..00000000
--- a/components/stub-generation/hero.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import VideoThumb from '@/public/images/demo-thumbnail.png';
-import ModalVideo from '@/components/modal-video';
-import Image from "next/image";
-import React from "react";
-import { Player, Controls } from "@lottiefiles/react-lottie-player";
-import testAndStubsGen from "@/public/images/TestGenHighlighted.json";
-import { TrustedBy } from '../trustedBy';
-import dynamic from 'next/dynamic';
-const LottiePlayer =  dynamic(()=> import("../LottiePlayer"),{ssr:false})
-export default function Hero() {
-  return (
-    <section className="relative bg-neutral-100 text-gray-800 overflow-hidden">
-      <div className="absolute left-1/2 transform -translate-x-1/2 bottom-0 pointer-events-none " aria-hidden="true">
-        <svg width="1360" height="578" viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
-          <defs>
-            <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
-              <stop stopColor="#FFF" offset="0%" />
-              <stop stopColor="#f5f5f5" offset="50%" />
-              <stop stopColor="#EAEAEA" offset="100%" />
-            </linearGradient>
-          </defs>
-          <g fill="url(#illustration-01)" fillRule="evenodd">
-            <circle cx="1232" cy="128" r="128" opacity={0.85} />
-            <circle cx="155" cy="443" r="64" opacity={0.85} />
-          </g>
-        </svg>
-      </div>
-
-      <div className="max-w-6xl mx-auto px-4 sm:px-6">
-        <div className="pt-32 pb-5 md:pt-40">
-          <div >
-            <p className="text-2xl text-center  text-accent-200 mb-4 md:mb-20">
-              Transforming User Scenarios into Reliable Test Data Instantly!
-            </p>
-          </div>
-          <div className="flex flex-wrap justify-center items-start md:gap-8 md:flex-row ">
-          <div className="md:flex-1">
-              <div className="text-center md:text-left">
-                <h1 className="text-4xl md:text-5.5xl text-secondary-300 font-extrabold leading-tighter tracking-tighter mb-4 md:mb-6 ">
-                  Effortless Stub Generation
-                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-gradient-500 to-gradient-200"> for Comprehensive Test Coverage!</span>
-                </h1>
-                
-                <p className="text-xl text-accent-200 mb-8">
-                  Seamlessly Convert User Interactions into Precise Test Cases and Data Stubs 🚀
-                </p>
-              </div>
-            </div>
-          <div className="md:flex-1 ">
-             <LottiePlayer VideoPath={testAndStubsGen}/>
-            </div>
-         
-
-          </div>
-        </div>
-      </div>
-      <TrustedBy />
-    </section>
-  );
-}
-
diff --git a/components/utils/accordion.tsx b/components/utils/accordion.tsx
index 85a32dd1..4e574bda 100644
--- a/components/utils/accordion.tsx
+++ b/components/utils/accordion.tsx
@@ -31,7 +31,7 @@ export default function Accordion({
         onClick={(e) => { e.preventDefault(); setAccordionOpen(!accordionOpen); }}
         aria-expanded={accordionOpen}
       >
-        <svg className="w-4 h-4 fill-current text-blue-500 shrink-0 mr-8 -ml-12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <svg className="w-4 h-4 fill-current text-primary-300 shrink-0 mr-8" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <rect y="7" width="16" height="2" rx="1" className={`transform origin-center transition duration-200 ease-out ${accordionOpen && '!rotate-180'}`} />
           <rect y="7" width="16" height="2" rx="1" className={`transform origin-center rotate-90 transition duration-200 ease-out ${accordionOpen && '!rotate-180'}`} />
         </svg>
@@ -39,7 +39,7 @@ export default function Accordion({
       </button>
       <div
         ref={accordion}
-        className="text-gray-600 overflow-hidden transition-all duration-300 ease-in-out"
+        className="text-gray-600 overflow-hidden transition-all duration-300 ease-in-out ml-12"
         style={accordionOpen ? { maxHeight: accordion.current?.scrollHeight, opacity: 1 } : { maxHeight: 0, opacity: 0 }}
       >
         <p className="pb-5">{children}</p>
diff --git a/components/utils/common.tsx b/components/utils/common.tsx
new file mode 100644
index 00000000..cd2bc9a1
--- /dev/null
+++ b/components/utils/common.tsx
@@ -0,0 +1,271 @@
+interface SocialLink {
+    href: string;
+    icon: React.ReactElement;
+    title: string;
+    description:string;
+  }
+  const TwitterIcon = () => (
+      <svg
+      width="50%"
+      height="50%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="sm:mr-2"
+    >
+      <path
+        d="M31.439 6.599c-1.11.496-2.303.832-3.557.983a6.256 6.256 0 0 0 2.723-3.458 12.3 12.3 0 0 1-3.933 1.516 6.165 6.165 0 0 0-4.52-1.972c-3.42 0-6.193 2.798-6.193 6.251 0 .488.056.963.16 1.422-5.15-.262-9.712-2.75-12.767-6.53a6.289 6.289 0 0 0-.838 3.141 6.265 6.265 0 0 0 2.755 5.203 6.138 6.138 0 0 1-2.805-.782v.08c0 3.028 2.134 5.553 4.968 6.128a6.187 6.187 0 0 1-2.797.107c.788 2.482 3.075 4.29 5.786 4.338a12.359 12.359 0 0 1-7.693 2.676c-.5 0-.993-.03-1.478-.087a17.404 17.404 0 0 0 9.493 2.808c11.394 0 17.623-9.522 17.623-17.78 0-.268-.006-.539-.018-.807a12.654 12.654 0 0 0 3.088-3.233l.003-.004Z"
+        fill="#259DF4"
+      />
+    </svg>
+    );
+    const GithubIcon = () => (
+      <svg
+      width="50%"
+      height="50%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="sm:mr-2"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.05 1.281A15.1 15.1 0 0 0 1.132 13.957a15.088 15.088 0 0 0 10.145 16.74c.76.138 1.029-.334 1.029-.732v-2.567c-4.217.917-5.107-2.029-5.107-2.029a4.04 4.04 0 0 0-1.677-2.214c-1.363-.926.11-.926.11-.926a3.178 3.178 0 0 1 2.309 1.556 3.224 3.224 0 0 0 4.392 1.26 3.206 3.206 0 0 1 .927-2.02c-3.355-.38-6.876-1.677-6.876-7.411a5.836 5.836 0 0 1 1.547-4.049 5.502 5.502 0 0 1 .149-3.993s1.27-.408 4.151 1.547c2.475-.68 5.088-.68 7.563 0 2.882-1.955 4.142-1.547 4.142-1.547a5.474 5.474 0 0 1 .186 3.965 5.836 5.836 0 0 1 1.547 4.049c0 5.8-3.53 7.069-6.895 7.411a3.566 3.566 0 0 1 1.029 2.78v4.141c0 .491.269.871 1.038.723a15.096 15.096 0 0 0 9.98-16.698A15.09 15.09 0 0 0 16.05 1.28Z"
+        fill="#262626"
+      />
+    </svg>
+    );
+    const SlackIcon = () => (
+      <svg
+      width="50%"
+      height="50%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="sm:mr-2"
+    >
+      <path
+        d="M6.583 20.522a3.28 3.28 0 1 1-3.28-3.28h3.28v3.28ZM8.227 20.522a3.28 3.28 0 0 1 6.559 0v8.197a3.28 3.28 0 1 1-6.56 0v-8.197Z"
+        fill="#E01E5A"
+      />
+      <path
+        d="M11.498 6.56a3.28 3.28 0 1 1 3.28-3.28v3.28h-3.28ZM11.5 8.223a3.28 3.28 0 0 1 0 6.56H3.28a3.28 3.28 0 1 1 0-6.56h8.22Z"
+        fill="#36C5F0"
+      />
+      <path
+        d="M25.422 11.502a3.28 3.28 0 1 1 3.28 3.28h-3.28v-3.28ZM23.778 11.5a3.28 3.28 0 1 1-6.56 0V3.28a3.28 3.28 0 1 1 6.56 0v8.22Z"
+        fill="#2EB67D"
+      />
+      <path
+        d="M20.498 25.441a3.28 3.28 0 1 1-3.28 3.28v-3.28h3.28ZM20.498 23.802a3.28 3.28 0 1 1 0-6.56h8.222a3.28 3.28 0 1 1 0 6.56H20.5Z"
+        fill="#ECB22E"
+      />
+    </svg>
+    );
+    const YoutubeIcon = () => (
+      <svg
+      width="50%"
+      height="50%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className=" sm:mr-2"
+    >
+      <path
+        d="m16.7 27.165-6.561-.117c-2.125-.041-4.255.04-6.338-.382-3.168-.632-3.393-3.73-3.628-6.328A43.327 43.327 0 0 1 .586 9.345C.93 7.312 2.288 6.1 4.386 5.967c7.084-.479 14.215-.423 21.283-.198.746.02 1.498.132 2.234.26 3.634.62 3.722 4.13 3.957 7.086a39.213 39.213 0 0 1-.313 8.95c-.36 2.456-1.05 4.514-3.957 4.713-3.644.26-7.204.468-10.858.402 0-.015-.021-.015-.031-.015Z"
+        fill="#fff"
+      />
+      <path
+        d="m16.7 27.165-6.561-.117c-2.125-.041-4.255.04-6.338-.382-3.168-.632-3.393-3.73-3.628-6.328A43.327 43.327 0 0 1 .586 9.345C.93 7.312 2.288 6.1 4.386 5.967c7.084-.479 14.215-.423 21.283-.198.746.02 1.498.132 2.234.26 3.634.62 3.722 4.13 3.957 7.086a39.213 39.213 0 0 1-.313 8.95c-.36 2.456-1.05 4.514-3.957 4.713-3.644.26-7.204.468-10.858.402 0-.015-.021-.015-.031-.015Zm-3.857-6.215c2.746-1.539 5.44-3.052 8.17-4.58-2.752-1.539-5.44-3.052-8.17-4.58v9.16Z"
+        fill="red"
+      />
+    </svg>
+    );
+    const LinkedInIcon = () => (
+      <svg
+      width="50%"
+      height="50%"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className=" sm:mr-2"
+    >
+      <g clipPath="url(#linkedin_inline_svg__a)">
+        <path
+          d="M0 2.346C0 1.086 1.06.062 2.365.062h27.27C30.941.063 32 1.085 32 2.346v27.306c0 1.26-1.059 2.282-2.365 2.282H2.365C1.059 31.934 0 30.913 0 29.652V2.345Z"
+          fill="#069"
+        />
+        <path
+          d="M9.723 26.735v-14.35H4.935v14.35h4.789ZM7.33 10.427c1.67 0 2.709-1.102 2.709-2.479-.031-1.408-1.04-2.48-2.677-2.48-1.64 0-2.71 1.072-2.71 2.48 0 1.377 1.04 2.479 2.646 2.479h.031Zm5.044 16.308h4.788v-8.013c0-.428.031-.857.158-1.163.346-.857 1.133-1.745 2.456-1.745 1.733 0 2.426 1.316 2.426 3.245v7.676h4.788v-8.228c0-4.407-2.362-6.458-5.512-6.458-2.583 0-3.718 1.438-4.348 2.418h.032v-2.08h-4.788c.062 1.345 0 14.348 0 14.348Z"
+          fill="#fff"
+        />
+      </g>
+      <defs>
+        <clipPath id="linkedin_inline_svg__a">
+          <path fill="#fff" d="M0 0h32v32H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+    );
+    
+export const socialLinks: SocialLink[] = [
+      {
+          href: 'https://twitter.com/Keployio',
+          icon: <TwitterIcon/>,
+          title: 'Twitter',
+          description:`Let's talk about regression testing!`
+        },
+        {
+          href: 'https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg',
+          icon: <YoutubeIcon/>,
+          title: 'Youtube',
+          description:'Learn with Keploy team and community videos'
+        },
+        {
+          href: 'https://github.com/keploy/keploy',
+          icon: <GithubIcon/>,
+          title: 'Github',
+          description:'Contribute code to Keploy or report a bug'
+  
+        },
+        {
+          href: 'https://join.slack.com/t/keploy/shared_invite/zt-2dno1yetd-Ec3el~tTwHYIHgGI0jPe7A',
+          icon: <SlackIcon/>,
+          title: 'Slack',
+          description:'Connect and chat with other Keploy users'
+  
+        },
+        {
+          href: 'https://www.linkedin.com/company/74471957',
+          icon: <LinkedInIcon/>,
+          title: 'LinkedIn',
+          description:'Follow us and connect with other Keploy engineers!'
+        },
+  ];
+
+ // Blocks
+
+ export const MdiLightningBolt = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(18, 18)">
+          <path
+            className="stroke-current text-primary-500"
+            d="M14 4L4 18h9l-1 8 9-12h-9l1-8z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+
+  export const FluentPuzzleCubePiece20Filled = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(14, 14)">
+          <rect className="stroke-current text-primary-500" x="4" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-secondary-300" x="19" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="4" y="19" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="19" y="19" width="8" height="8" rx="1" />
+        </g>
+      </g>
+    </svg>
+  );
+
+  export const CollaborationIcon = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M32 8C19.6 8 8 19.6 8 32s11.6 24 24 24 24-11.6 24-24S44.4 8 32 8z"
+          />
+          <path className="stroke-current text-secondary-300" d="M40 24l-8 8-8-8" />
+          <path className="stroke-current text-secondary-300" d="M32 40V24" />
+        </g>
+      </g>
+    </svg>
+  );
+  export const StreamlineBrowserCheck = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <polyline
+            className="stroke-current text-primary-500"
+            points="12 24 24 24 32 16 52 16 52 48 12 48 12 24"
+          />
+          <path className="stroke-current text-secondary-300" d="M24 40l4 4 8-8" />
+        </g>
+      </g>
+    </svg>
+  );
+  export const PsPiggyBankCoins = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M48 40V24a4 4 0 0 0-4-4H20a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4z"
+          />
+          <circle className="stroke-current text-primary-500" cx="32" cy="40" r="2" />
+          <path className="stroke-current text-primary-500" d="M24 48a4 4 0 0 0 4-4" />
+          <path className="stroke-current text-primary-500" d="M40 48a4 4 0 0 1-4-4" />
+        </g>
+      </g>
+    </svg>
+  );
+  export const MaterialSymbolsLightEarlyOnOutline = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-secondary-300"
+            d="M32 28v12l6 6m8-24v24a6 6 0 0 1-6 6H24a6 6 0 0 1-6-6V28"
+          />
+          <path
+            className="stroke-current text-primary-500"
+            d="M20 20l24-8v8H20z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+  export const blocksData = [
+    {
+      title: "Faster Development and Testing",
+      description: "Enables teams to validate components without waiting for the entire system to be implemented.",
+      SvgComponent: MdiLightningBolt,
+    },
+    {
+      title: "Isolation of Components",
+      description: "Ensure that each part of the system can be tested without relying on the complete system.",
+      SvgComponent: FluentPuzzleCubePiece20Filled,
+    },
+    {
+      title: "Improved Collaboration",
+      description: "Promotes collaboration between teams by allowing them to work independently on different components.",
+      SvgComponent: CollaborationIcon,
+    },
+    {
+      title: "Comprehensive Testing Scenarios",
+      description: "Simulate various scenarios helping testers assess different system responses and identify potential issues before deployment.",
+      SvgComponent: StreamlineBrowserCheck,
+    },
+    {
+      title: "Cost-Effectiveness",
+      description: "Less time and effort required to create and maintain compared to fully functional services.",
+      SvgComponent: PsPiggyBankCoins,
+    },
+    {
+      title: "Early Detection of Issues",
+      description: "Allows teams to identify and address problems in the early stages of development, reducing the likelihood of costly fixes later in the process.",
+      SvgComponent: MaterialSymbolsLightEarlyOnOutline,
+    },
+  ];
+  
\ No newline at end of file
diff --git a/components/utils/ebpf-instrumentation.tsx b/components/utils/ebpf-instrumentation.tsx
new file mode 100644
index 00000000..2a3ad62d
--- /dev/null
+++ b/components/utils/ebpf-instrumentation.tsx
@@ -0,0 +1,189 @@
+
+export const DependencyWaitTimeIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+
+  export const ManualStubCreationIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
+      <polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
+    </svg>
+  );
+
+  export const DataVariabilityConcernsIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
+      <path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
+      <line x1="12" y1="8" x2="12" y2="16" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+
+  export const ErrorHandlingChallengesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+
+  export const ScalabilityTestingDifficultiesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6l3 6h12l3-6" />
+      <path d="M3 18l3-6h12l3 6" />
+      <line x1="12" y1="3" x2="12" y2="21" />
+    </svg>
+  );
+
+  export const MdiLightningBolt = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(18, 18)">
+          <path
+            className="stroke-current text-primary-500"
+            d="M14 4L4 18h9l-1 8 9-12h-9l1-8z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const FluentPuzzleCubePiece20Filled = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(14, 14)">
+          <rect className="stroke-current text-primary-500" x="4" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-secondary-300" x="19" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="4" y="19" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="19" y="19" width="8" height="8" rx="1" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  
+  export const CollaborationIcon = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M32 8C19.6 8 8 19.6 8 32s11.6 24 24 24 24-11.6 24-24S44.4 8 32 8z"
+          />
+          <path className="stroke-current text-secondary-300" d="M40 24l-8 8-8-8" />
+          <path className="stroke-current text-secondary-300" d="M32 40V24" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const StreamlineBrowserCheck = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <polyline
+            className="stroke-current text-primary-500"
+            points="12 24 24 24 32 16 52 16 52 48 12 48 12 24"
+          />
+          <path className="stroke-current text-secondary-300" d="M24 40l4 4 8-8" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const PsPiggyBankCoins = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M48 40V24a4 4 0 0 0-4-4H20a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4z"
+          />
+          <circle className="stroke-current text-primary-500" cx="32" cy="40" r="2" />
+          <path className="stroke-current text-primary-500" d="M24 48a4 4 0 0 0 4-4" />
+          <path className="stroke-current text-primary-500" d="M40 48a4 4 0 0 1-4-4" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const MaterialSymbolsLightEarlyOnOutline = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-secondary-300"
+            d="M32 28v12l6 6m8-24v24a6 6 0 0 1-6 6H24a6 6 0 0 1-6-6V28"
+          />
+          <path
+            className="stroke-current text-primary-500"
+            d="M20 20l24-8v8H20z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+export const featuresData = [
+    {
+      title: 'Developer Friendly, zero learning curve',
+      icon:<DependencyWaitTimeIcon />,
+      description: 'Keploy can dynamically generate test cases by recording and replaying your interactions without integrating any code or complex setup within 2 mins.'
+    },
+    {
+      title: 'Seamless Test Generation',
+      icon:<ManualStubCreationIcon />,
+      description: 'eBPF instrumentation enables Keploy to effortlessly record and generate automated tests and data-mocks within a mere 2 minutes, streamlining the testing process.'
+    },
+    {
+      title: 'Codeless Integration',
+      icon: <DataVariabilityConcernsIcon />,
+      description: 'With eBPF, Keploy dynamically generates test cases without the need for integrating any code into the application, simplifying the testing workflow for developers.'
+    },
+    {
+      title: 'Continuous Improvement',
+      icon:<ScalabilityTestingDifficultiesIcon />,
+      description: 'Continuously enhance testing strategies and streamline the development lifecycle, ensuring the delivery of high-quality software with speed and efficiency.'
+    },
+    {
+      title: 'Language and Framework Agnostic',
+      icon:<ErrorHandlingChallengesIcon />,
+      description: 'Generate test cases for all languages and frameworks, eliminating the need for complex coding knowledge and ensuring compatibility with diverse development environments.'
+    },
+    {
+      title: 'Comprehensive Test Coverage',
+      icon:<ManualStubCreationIcon />,
+      description: 'Leveraging eBPF, Keploy ensures comprehensive test coverage by capturing and replaying interactions, facilitating thorough testing across different scenarios and use cases.'
+    }
+  ];
+
+  export const faqQuestions =[
+    {
+      title: "What does language agnostic support mean?",
+      answer:
+        "Keploy works at a kernel and network level, enabling support for various protocol versions such as HTTP, TLS, GRPC, Mongo, MySQL, Redis, and more. Once added, these protocols will be universally supported across all languages, runtimes, or drivers/packages."
+    },
+    {
+      title: "How does Keploy enable test case generation without code integration?",
+      answer:
+        "Keploy utilizes eBPF to dynamically generate test cases by recording and replaying interactions, eliminating the need for integrating any code into the application."
+    },
+    {
+      title: "How does Keploy simplify test automation across different languages and frameworks?",
+      answer:
+        "Keploy simplifies test automation by providing automated tests in simple YAML format, eliminating the need for complex coding knowledge and enabling teams to obtain test cases for all languages and frameworks effortlessly."
+    },
+    {
+      title: "How does eBPF instrumentation helps in enhancing test case generation with Keploy?",
+      answer:
+        "With eBPF, Keploy dynamically records and replays interactions, allowing for the rapid generation of test cases without any intrusive code changes, thereby accelerating the testing process."
+    }
+  ]
diff --git a/components/utils/native-integration.tsx b/components/utils/native-integration.tsx
new file mode 100644
index 00000000..9620b818
--- /dev/null
+++ b/components/utils/native-integration.tsx
@@ -0,0 +1,97 @@
+
+export const DependencyWaitTimeIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+
+  export const ManualStubCreationIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
+      <polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
+    </svg>
+  );
+
+  export const DataVariabilityConcernsIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
+      <path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
+      <line x1="12" y1="8" x2="12" y2="16" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+
+  export const ErrorHandlingChallengesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+
+  export const ScalabilityTestingDifficultiesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6l3 6h12l3-6" />
+      <path d="M3 18l3-6h12l3 6" />
+      <line x1="12" y1="3" x2="12" y2="21" />
+    </svg>
+  );
+
+
+export const featuresData = [
+    {
+      title: 'Generate test cases by codeless integration',
+      icon:<DependencyWaitTimeIcon />,
+      description: 'Seamlessly integrate Keploy with your dev-setup for automated test and data-mock generation in just 2 minutes, eliminating the need for complex setup or coding knowledge.',
+    },
+    {
+      title: 'Automated tests in simple yaml',
+      icon: <ManualStubCreationIcon />,
+      description: "With zero learning curve, Keploy's native integration allows developers to dynamically generate test cases by simply recording and replaying interactions, enhancing efficiency and productivity.",
+    },
+    {
+      title: 'CI/CD Compatibility',
+      icon: <ScalabilityTestingDifficultiesIcon />,
+      description: 'Ensure compatibility with any CI/CD pipeline by generating test cases for all languages and frameworks without the requirement for extensive coding knowledge or setup',
+    },
+    {
+      title: 'Zero-Code Change',
+      icon: <DataVariabilityConcernsIcon />,
+      description: 'Keploy empowers developers to scale automated test coverage without writing complex code, enabling teams to focus on delivering high-quality software with confidence.',
+    },
+    {
+      title: 'Enhanced Test Coverage',
+      icon: <ErrorHandlingChallengesIcon />,
+      description: "Combine Keploy's test coverage with existing unit tests to provide comprehensive testing reports, boosting teams' confidence in their testing strategies and ensuring robust software delivery.",
+    }
+  ];
+  export const faqQuestions =[
+    {
+      title: "What is Codeless integration?",
+      answer:
+        "Native integration refers to the seamless connection of one system or application with another, typically utilizing the built-in features or interfaces provided by those systems. Keploy is designed to natively support Docker/Kubernetes environments. This means to generate/record tests, you will need to install Docker and run your application on it.",
+    },
+    {
+      title: "How can I combine my Keploy tests with frameworks like pyTest or Jest ?",
+      answer:
+        "You can merge tests generated by Keploy with your existing unit-test whether they are pyTest or Jest using language based SDK in your test file. Combining Keploy's test coverage with existing unit tests can increase the coverage in testing reports, helping in ensuring robust software delivery and enhancing overall product quality.",
+    },
+    {
+      title: "How does Keploy contribute to overall software delivery?",
+      answer:
+        "By streamlining testing processes, providing developer-friendly solutions, and enhancing test coverage, Keploy accelerates software delivery, ensuring robust and high-quality products reach the market efficiently.",
+    },
+    {
+      title: "What makes Keploy's integration developer-friendly?",
+      answer:
+        "Keploy offers a zero learning curve with its native integration, allowing developers to dynamically generate test cases by recording and replaying interactions, thus enhancing efficiency and productivity.",
+    },
+    {
+      title: "",
+      answer:
+        "",
+    }
+  ]
+
+  
\ No newline at end of file
diff --git a/components/utils/stub-generation.tsx b/components/utils/stub-generation.tsx
index f2eb39a3..29fbcaf7 100644
--- a/components/utils/stub-generation.tsx
+++ b/components/utils/stub-generation.tsx
@@ -159,187 +159,21 @@ export const featuresData = [
       description: 'Simplifies scalability testing by automatically stubbing system performance under various loads.'
     }
   ];
-
-
-//community
-
-  interface SocialLink {
-    href: string;
-    icon: React.ReactElement;
-    title: string;
-    description:string;
-  }
-  const TwitterIcon = () => (
-      <svg
-      width="50%"
-      height="50%"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="sm:mr-2"
-    >
-      <path
-        d="M31.439 6.599c-1.11.496-2.303.832-3.557.983a6.256 6.256 0 0 0 2.723-3.458 12.3 12.3 0 0 1-3.933 1.516 6.165 6.165 0 0 0-4.52-1.972c-3.42 0-6.193 2.798-6.193 6.251 0 .488.056.963.16 1.422-5.15-.262-9.712-2.75-12.767-6.53a6.289 6.289 0 0 0-.838 3.141 6.265 6.265 0 0 0 2.755 5.203 6.138 6.138 0 0 1-2.805-.782v.08c0 3.028 2.134 5.553 4.968 6.128a6.187 6.187 0 0 1-2.797.107c.788 2.482 3.075 4.29 5.786 4.338a12.359 12.359 0 0 1-7.693 2.676c-.5 0-.993-.03-1.478-.087a17.404 17.404 0 0 0 9.493 2.808c11.394 0 17.623-9.522 17.623-17.78 0-.268-.006-.539-.018-.807a12.654 12.654 0 0 0 3.088-3.233l.003-.004Z"
-        fill="#259DF4"
-      />
-    </svg>
-    );
-    const GithubIcon = () => (
-      <svg
-      width="50%"
-      height="50%"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="sm:mr-2"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.05 1.281A15.1 15.1 0 0 0 1.132 13.957a15.088 15.088 0 0 0 10.145 16.74c.76.138 1.029-.334 1.029-.732v-2.567c-4.217.917-5.107-2.029-5.107-2.029a4.04 4.04 0 0 0-1.677-2.214c-1.363-.926.11-.926.11-.926a3.178 3.178 0 0 1 2.309 1.556 3.224 3.224 0 0 0 4.392 1.26 3.206 3.206 0 0 1 .927-2.02c-3.355-.38-6.876-1.677-6.876-7.411a5.836 5.836 0 0 1 1.547-4.049 5.502 5.502 0 0 1 .149-3.993s1.27-.408 4.151 1.547c2.475-.68 5.088-.68 7.563 0 2.882-1.955 4.142-1.547 4.142-1.547a5.474 5.474 0 0 1 .186 3.965 5.836 5.836 0 0 1 1.547 4.049c0 5.8-3.53 7.069-6.895 7.411a3.566 3.566 0 0 1 1.029 2.78v4.141c0 .491.269.871 1.038.723a15.096 15.096 0 0 0 9.98-16.698A15.09 15.09 0 0 0 16.05 1.28Z"
-        fill="#262626"
-      />
-    </svg>
-    );
-    const SlackIcon = () => (
-      <svg
-      width="50%"
-      height="50%"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="sm:mr-2"
-    >
-      <path
-        d="M6.583 20.522a3.28 3.28 0 1 1-3.28-3.28h3.28v3.28ZM8.227 20.522a3.28 3.28 0 0 1 6.559 0v8.197a3.28 3.28 0 1 1-6.56 0v-8.197Z"
-        fill="#E01E5A"
-      />
-      <path
-        d="M11.498 6.56a3.28 3.28 0 1 1 3.28-3.28v3.28h-3.28ZM11.5 8.223a3.28 3.28 0 0 1 0 6.56H3.28a3.28 3.28 0 1 1 0-6.56h8.22Z"
-        fill="#36C5F0"
-      />
-      <path
-        d="M25.422 11.502a3.28 3.28 0 1 1 3.28 3.28h-3.28v-3.28ZM23.778 11.5a3.28 3.28 0 1 1-6.56 0V3.28a3.28 3.28 0 1 1 6.56 0v8.22Z"
-        fill="#2EB67D"
-      />
-      <path
-        d="M20.498 25.441a3.28 3.28 0 1 1-3.28 3.28v-3.28h3.28ZM20.498 23.802a3.28 3.28 0 1 1 0-6.56h8.222a3.28 3.28 0 1 1 0 6.56H20.5Z"
-        fill="#ECB22E"
-      />
-    </svg>
-    );
-    const YoutubeIcon = () => (
-      <svg
-      width="50%"
-      height="50%"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className=" sm:mr-2"
-    >
-      <path
-        d="m16.7 27.165-6.561-.117c-2.125-.041-4.255.04-6.338-.382-3.168-.632-3.393-3.73-3.628-6.328A43.327 43.327 0 0 1 .586 9.345C.93 7.312 2.288 6.1 4.386 5.967c7.084-.479 14.215-.423 21.283-.198.746.02 1.498.132 2.234.26 3.634.62 3.722 4.13 3.957 7.086a39.213 39.213 0 0 1-.313 8.95c-.36 2.456-1.05 4.514-3.957 4.713-3.644.26-7.204.468-10.858.402 0-.015-.021-.015-.031-.015Z"
-        fill="#fff"
-      />
-      <path
-        d="m16.7 27.165-6.561-.117c-2.125-.041-4.255.04-6.338-.382-3.168-.632-3.393-3.73-3.628-6.328A43.327 43.327 0 0 1 .586 9.345C.93 7.312 2.288 6.1 4.386 5.967c7.084-.479 14.215-.423 21.283-.198.746.02 1.498.132 2.234.26 3.634.62 3.722 4.13 3.957 7.086a39.213 39.213 0 0 1-.313 8.95c-.36 2.456-1.05 4.514-3.957 4.713-3.644.26-7.204.468-10.858.402 0-.015-.021-.015-.031-.015Zm-3.857-6.215c2.746-1.539 5.44-3.052 8.17-4.58-2.752-1.539-5.44-3.052-8.17-4.58v9.16Z"
-        fill="red"
-      />
-    </svg>
-    );
-    const LinkedInIcon = () => (
-      <svg
-      width="50%"
-      height="50%"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className=" sm:mr-2"
-    >
-      <g clipPath="url(#linkedin_inline_svg__a)">
-        <path
-          d="M0 2.346C0 1.086 1.06.062 2.365.062h27.27C30.941.063 32 1.085 32 2.346v27.306c0 1.26-1.059 2.282-2.365 2.282H2.365C1.059 31.934 0 30.913 0 29.652V2.345Z"
-          fill="#069"
-        />
-        <path
-          d="M9.723 26.735v-14.35H4.935v14.35h4.789ZM7.33 10.427c1.67 0 2.709-1.102 2.709-2.479-.031-1.408-1.04-2.48-2.677-2.48-1.64 0-2.71 1.072-2.71 2.48 0 1.377 1.04 2.479 2.646 2.479h.031Zm5.044 16.308h4.788v-8.013c0-.428.031-.857.158-1.163.346-.857 1.133-1.745 2.456-1.745 1.733 0 2.426 1.316 2.426 3.245v7.676h4.788v-8.228c0-4.407-2.362-6.458-5.512-6.458-2.583 0-3.718 1.438-4.348 2.418h.032v-2.08h-4.788c.062 1.345 0 14.348 0 14.348Z"
-          fill="#fff"
-        />
-      </g>
-      <defs>
-        <clipPath id="linkedin_inline_svg__a">
-          <path fill="#fff" d="M0 0h32v32H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-    );
-    
-export const socialLinks: SocialLink[] = [
-      {
-          href: 'https://twitter.com/Keployio',
-          icon: <TwitterIcon/>,
-          title: 'Twitter',
-          description:`Let's talk about regression testing!`
-        },
-        {
-          href: 'https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg',
-          icon: <YoutubeIcon/>,
-          title: 'Youtube',
-          description:'Learn with Keploy team and community videos'
-        },
-        {
-          href: 'https://github.com/keploy/keploy',
-          icon: <GithubIcon/>,
-          title: 'Github',
-          description:'Contribute code to Keploy or report a bug'
-  
-        },
-        {
-          href: 'https://join.slack.com/t/keploy/shared_invite/zt-2dno1yetd-Ec3el~tTwHYIHgGI0jPe7A',
-          icon: <SlackIcon/>,
-          title: 'Slack',
-          description:'Connect and chat with other Keploy users'
-  
-        },
-        {
-          href: 'https://www.linkedin.com/company/74471957',
-          icon: <LinkedInIcon/>,
-          title: 'LinkedIn',
-          description:'Follow us and connect with other Keploy engineers!'
-        },
-  ];
-
-
-  export const blocksData = [
-    {
-      title: "Faster Development and Testing",
-      description: "Enables teams to validate components without waiting for the entire system to be implemented.",
-      SvgComponent: MdiLightningBolt,
-    },
-    {
-      title: "Isolation of Components",
-      description: "Ensure that each part of the system can be tested without relying on the complete system.",
-      SvgComponent: FluentPuzzleCubePiece20Filled,
-    },
+  export const faqQuestions =[
     {
-      title: "Improved Collaboration",
-      description: "Promotes collaboration between teams by allowing them to work independently on different components.",
-      SvgComponent: CollaborationIcon,
+      title: "How does Keploy aid in testing efficiency?",
+      answer:
+        "It generates realistic stubs, eliminates dependency wait time, and simplifies scalability testing.",
     },
     {
-      title: "Comprehensive Testing Scenarios",
-      description: "Simulate various scenarios helping testers assess different system responses and identify potential issues before deployment.",
-      SvgComponent: StreamlineBrowserCheck,
+      title: "What's a key advantage of isolating components for testing?",
+      answer:
+        "Isolating components allows testing without relying on the complete system, enabling more efficient validation and identification of potential issues.",
     },
     {
-      title: "Cost-Effectiveness",
-      description: "Less time and effort required to create and maintain compared to fully functional services.",
-      SvgComponent: PsPiggyBankCoins,
-    },
-    {
-      title: "Early Detection of Issues",
-      description: "Allows teams to identify and address problems in the early stages of development, reducing the likelihood of costly fixes later in the process.",
-      SvgComponent: MaterialSymbolsLightEarlyOnOutline,
-    },
-  ];
-  
\ No newline at end of file
+      title: "What issue does stub generation with Keploy address?",
+      answer:
+        "Keploy's stub generation addresses dependency wait time and data variability concerns by providing realistic stubs, eliminating the need to wait for dependent components and ensuring diverse testing scenarios.",
+    }
+  ]
+
diff --git a/components/utils/test-duplication.tsx b/components/utils/test-duplication.tsx
new file mode 100644
index 00000000..350b6cab
--- /dev/null
+++ b/components/utils/test-duplication.tsx
@@ -0,0 +1,183 @@
+
+export const DependencyWaitTimeIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+
+  export const ManualStubCreationIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34" />
+      <polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
+    </svg>
+  );
+
+  export const DataVariabilityConcernsIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M18 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" />
+      <path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
+      <line x1="12" y1="8" x2="12" y2="16" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+
+  export const ErrorHandlingChallengesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+
+  export const ScalabilityTestingDifficultiesIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FF914D" stroke="#0C1C3E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M3 6l3 6h12l3-6" />
+      <path d="M3 18l3-6h12l3 6" />
+      <line x1="12" y1="3" x2="12" y2="21" />
+    </svg>
+  );
+
+  export const MdiLightningBolt = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(18, 18)">
+          <path
+            className="stroke-current text-primary-500"
+            d="M14 4L4 18h9l-1 8 9-12h-9l1-8z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const FluentPuzzleCubePiece20Filled = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2" transform="translate(14, 14)">
+          <rect className="stroke-current text-primary-500" x="4" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-secondary-300" x="19" y="4" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="4" y="19" width="8" height="8" rx="1" />
+          <rect className="stroke-current text-primary-500" x="19" y="19" width="8" height="8" rx="1" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  
+  export const CollaborationIcon = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M32 8C19.6 8 8 19.6 8 32s11.6 24 24 24 24-11.6 24-24S44.4 8 32 8z"
+          />
+          <path className="stroke-current text-secondary-300" d="M40 24l-8 8-8-8" />
+          <path className="stroke-current text-secondary-300" d="M32 40V24" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const StreamlineBrowserCheck = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <polyline
+            className="stroke-current text-primary-500"
+            points="12 24 24 24 32 16 52 16 52 48 12 48 12 24"
+          />
+          <path className="stroke-current text-secondary-300" d="M24 40l4 4 8-8" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const PsPiggyBankCoins = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-primary-500"
+            d="M48 40V24a4 4 0 0 0-4-4H20a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4z"
+          />
+          <circle className="stroke-current text-primary-500" cx="32" cy="40" r="2" />
+          <path className="stroke-current text-primary-500" d="M24 48a4 4 0 0 0 4-4" />
+          <path className="stroke-current text-primary-500" d="M40 48a4 4 0 0 1-4-4" />
+        </g>
+      </g>
+    </svg>
+  );
+  
+  export const MaterialSymbolsLightEarlyOnOutline = () => (
+    <svg className="w-16 h-16 p-1 -mt-1 mb-2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <rect className="fill-current text-primary-300" width="64" height="64" rx="32" />
+        <g strokeWidth="2">
+          <path
+            className="stroke-current text-secondary-300"
+            d="M32 28v12l6 6m8-24v24a6 6 0 0 1-6 6H24a6 6 0 0 1-6-6V28"
+          />
+          <path
+            className="stroke-current text-primary-500"
+            d="M20 20l24-8v8H20z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+export const featuresData = [
+    {
+      title: 'Eliminate redundancy',
+      icon:<ErrorHandlingChallengesIcon />,
+      description: 'Achieve test optimization though by removing test redundancy, which causes unnecessary overhead, maintenance, and clutter in your test case suite.',
+    },
+    {
+      title: 'Unique Test Scenarios',
+      icon:<ManualStubCreationIcon />,
+      description: 'AI enables to autogenerate all the edge case scenarios testcases by reading Schema and PRD files for your application.'
+    },
+    {
+      title: 'Remove Unnecessary Testcases',
+      icon: <DataVariabilityConcernsIcon />,
+      description: 'Find and Remove duplicate testcases from your test suites, making the suite more lighter and faster to execute.'
+    },
+    {
+      title: 'Prioritize User Experience',
+      icon: <ScalabilityTestingDifficultiesIcon />,
+      description: 'Prioritize essential testing requirements to ensure efficient and effective testing procedures for optimal performance.'
+    },
+    {
+      title: 'Enhance Efficiency',
+      icon: <DependencyWaitTimeIcon />,
+      description: 'Boost productivity by optimizing testing processes and improving effectiveness through streamlined procedures and focused attention on critical aspects of the testing phase'
+    }
+  ];
+
+export const faqQuestions =[
+    {
+      title: "Why is avoiding test duplication considered beneficial in software testing?",
+      answer:"Avoiding test duplication is beneficial because it reduces redundancy, saving time and effort by focusing resources on unique test cases. It enhances maintainability by preventing inconsistencies and ensures accurate testing coverage across different scenarios." 
+    },
+    {
+      title: "Does eliminating test duplication contribute to improving testing processes ?",
+      answer:"Removing test duplication streamlines testing efforts, and allow teams to allocate resources more efficiently and prioritize critical test cases. It enhances clarity and reduces confusion by ensuring that each test serves a unique purpose, improving the overall effectiveness of the testing process" 
+    },
+    {
+      title: "What are the potential drawbacks of having duplicated tests in software testing?",
+      answer:"Having duplicated tests can lead to inefficiencies, as resources are wasted on redundant test cases that do not provide additional value. It can also result in confusion and inconsistency, as overlapping tests may produce conflicting results or redundant feedback."    
+    },
+    {
+      title: "What strategies can be employed to ensure no test duplication occurs in software testing?",
+      answer:
+        "Employing strategies such as code reviews, test case management tools, and regular team communication can help identify and eliminate duplicated tests. Additionally, establishing clear guidelines and standards for writing and maintaining tests can prevent duplication and promote a more efficient testing process.",
+    },
+  ]
+
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b6999e39..d7a6ec9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,8 +33,8 @@
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.3",
         "@types/aos": "^3.0.4",
-        "@types/node": "20.12.2",
-        "@types/react": "18.2.73",
+        "@types/node": "20.2.5",
+        "@types/react": "18.2.7",
         "@types/svgo": "^3.0.0",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.24",
@@ -2934,12 +2934,9 @@
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
     },
     "node_modules/@types/node": {
-      "version": "20.12.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
-      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
-      "dependencies": {
-        "undici-types": "~5.26.4"
-      }
+      "version": "20.2.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz",
+      "integrity": "sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
@@ -2952,11 +2949,12 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.73",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
-      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
+      "version": "18.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.7.tgz",
+      "integrity": "sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==",
       "dependencies": {
         "@types/prop-types": "*",
+        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -2984,6 +2982,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw=="
+    },
     "node_modules/@types/svgo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/svgo/-/svgo-3.0.0.tgz",
@@ -10094,11 +10097,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
diff --git a/package.json b/package.json
index 999dc985..a1bc76ca 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,8 @@
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "@types/aos": "^3.0.4",
-    "@types/node": "20.12.2",
-    "@types/react": "18.2.73",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.7",
     "@types/svgo": "^3.0.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",