diff --git a/app/Components/Card.jsx b/app/Components/Card.jsx
deleted file mode 100644
index 795dcca..0000000
--- a/app/Components/Card.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-const Card = () => {
-  return (
-    <div>
-      <div class="relative w-[190px] h-[254px] bg-[#07182E] flex items-center justify-center overflow-hidden rounded-[20px]">
-        <h2 class="z-10 text-white text-2xl"></h2>
-
-        <div class="before-content absolute w-[100px] h-[130%] animate-rotBGimg"></div>
-        <div class="after-content absolute inset-[5px] bg-[#07182E] rounded-[15px]"></div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;
diff --git a/app/Components/Card/Page.jsx b/app/Components/Card/Page.jsx
new file mode 100644
index 0000000..37ce0f8
--- /dev/null
+++ b/app/Components/Card/Page.jsx
@@ -0,0 +1,88 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import { CarouselCard } from "@/components/StyleComponents/Carousel";
+import { motion, useAnimation } from "framer-motion";
+import ServiceCard from "../../Elements/ServiceCard/page"
+ 
+const Page = () => {
+  const pieChartRef = useRef(null);
+  const pieChartControls = useAnimation();
+  const [pieChartVisible, setPieChartVisible] = useState(false);
+
+  useEffect(() => {
+    const timelineObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimelineVisible(true);
+          timelineControls.start("visible");
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    const pieChartObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setPieChartVisible(true);
+          pieChartControls.start("visible");
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (pieChartRef.current) {
+      pieChartObserver.observe(pieChartRef.current);
+    }
+
+    return () => {
+      if (pieChartRef.current) {
+        pieChartObserver.unobserve(pieChartRef.current);
+      }
+    };
+  }, [pieChartControls]);
+
+  return (
+    <div>
+      <div ref={pieChartRef} className="mt-24 pb-20">
+        <motion.div
+          className="text-5xl font-bold text-center mb-10"
+          initial={{ opacity: 0, y: 50 }}
+          animate={pieChartVisible ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <span className="text-white font-bold text-5xl sm:text-5xl lg:text-5xl">
+            Services Provided by{" "}
+          </span>
+          <span className="text-blue-600 font-bold text-5xl sm:text-4xl lg:text-5xl">
+            Qubit
+          </span>
+        </motion.div>
+        <motion.div
+          className="flex justify-center"
+          initial={{ opacity: 0, y: 100 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        >
+          <motion.div
+            className="mb-20 mt-20 w-full  md:hidden"
+            initial={{ scale: 0.9 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.6, ease: "easeInOut" }}
+          >
+            <CarouselCard />
+          </motion.div>
+          <motion.div
+            className="mb-20 mt-20 w-full ml-16 hidden lg:block"
+            initial={{ scale: 0.9 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.6, ease: "easeInOut" }}
+          >
+            <ServiceCard/>
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;
diff --git a/app/Components/Intro/Page.jsx b/app/Components/Intro/Page.jsx
new file mode 100644
index 0000000..98be010
--- /dev/null
+++ b/app/Components/Intro/Page.jsx
@@ -0,0 +1,86 @@
+"use client";
+
+import React from 'react'
+import {motion} from 'framer-motion'
+import Link from 'next/link';
+import Button from '@/app/Elements/Button/page';
+import Image from 'next/image';
+import Mobilebg from '../../../public/mobile.png';
+
+const paje = () => {
+  return (
+    <div>
+      <div className="grid lg:grid-cols-2 sm:grid-cols-1">
+            <div className="text-black">
+              <div className=" ml-9 mt-20 lg:mt-64 lg:ml-32 sm:ml-12">
+                <motion.h1
+                  className="font-bold text-lg sm:text-2xl text-gray-600 h-10"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 1 }}
+                >
+                  {"Keep Your device Safe".split("").map((char, index) => (
+                    <motion.span
+                      key={index}
+                      initial={{ opacity: 0, y: 50 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: index * 0.1, duration: 0.2 }}
+                    >
+                      {char}
+                    </motion.span>
+                  ))}
+                </motion.h1>
+
+                <motion.p
+                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-white lg:h-14 sm:h-10"
+                  initial={{ opacity: 0, x: -100 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.8, duration: 0.8 }}
+                >
+                  Real Time Vulnerability
+                </motion.p>
+
+                <motion.p
+                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-blue-600 lg:h-14 sm:h-10"
+                  initial={{ opacity: 0, x: -100 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.8, duration: 0.8 }}
+                >
+                  Reporting System with
+                </motion.p>
+
+                <motion.p
+                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-white lg:h-14 sm:h-10"
+                  initial={{ opacity: 0, x: -100 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.8, duration: 0.8 }}
+                >
+                  Cutting Edge Technology
+                </motion.p>
+              </div>
+
+              <Link href="https://rvrs.teamqubit.in/SignUp">
+                <motion.div
+                  className="mt-5 ml-10 lg:ml-72"
+                  initial={{ opacity: 0, x: -100 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.8, duration: 0.8 }}
+                >
+                  <Button />
+                </motion.div>
+              </Link>
+            </div>
+            <motion.div
+              className="text-black"
+              initial={{ opacity: 0, y: 100 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.8, duration: 0.8 }}
+            >
+              <Image src={Mobilebg} alt="mobilebg" className="mt-8" />
+            </motion.div>
+          </div>
+    </div>
+  )
+}
+
+export default paje
diff --git a/app/Components/Navbar/Page.jsx b/app/Components/Navbar/Page.jsx
new file mode 100644
index 0000000..701981a
--- /dev/null
+++ b/app/Components/Navbar/Page.jsx
@@ -0,0 +1,45 @@
+"use client";
+import React from 'react'
+import {motion} from "framer-motion"
+
+const Page = () => {
+  return (
+    <div>
+       <nav className="p-4 bg-black  shadow-2xl shadow-black">
+            <motion.div
+              className=" mx-auto flex justify-between h-10 mt-2"
+              initial={{ y: -50, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ duration: 0.5 }}
+            >
+              <div className="text-3xl flex font-bold text-white">QUBIT</div>
+              <div className=" space-x-4 hidden lg:block md:block">
+                <motion.span
+                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                  whileHover={{ scale: 1.1, color: "#ffffff" }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  Scraping
+                </motion.span>
+                <motion.span
+                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                  whileHover={{ scale: 1.1, color: "#ffffff" }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  Services
+                </motion.span>
+                <motion.span
+                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
+                  whileHover={{ scale: 1.1, color: "#ffffff" }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  About Us
+                </motion.span>
+              </div>
+            </motion.div>
+          </nav>
+    </div>
+  )
+}
+
+export default Page
diff --git a/app/Components/Timeline/page.jsx b/app/Components/Timeline/page.jsx
new file mode 100644
index 0000000..0cdd8ee
--- /dev/null
+++ b/app/Components/Timeline/page.jsx
@@ -0,0 +1,218 @@
+"use client";
+import { motion , useAnimation} from "framer-motion";
+import React, { useEffect, useRef, useState } from "react";
+
+
+const page = () => {
+    const timelineRef = useRef(null);
+
+    const [timelineVisible, setTimelineVisible] = useState(false);
+    const timelineControls = useAnimation();
+
+    useEffect(() => {
+        const timelineObserver = new IntersectionObserver(
+          ([entry]) => {
+            if (entry.isIntersecting) {
+              setTimelineVisible(true);
+              timelineControls.start("visible");
+            }
+          },
+          { threshold: 0.1 }
+        );
+
+        if (timelineRef.current) {
+            timelineObserver.observe(timelineRef.current);
+          }
+
+          return () => {
+            if (timelineRef.current) {
+              timelineObserver.unobserve(timelineRef.current);
+            }
+          };
+        }, [timelineControls]);
+
+        const timelineVariants = {
+            hidden: { opacity: 0, y: 50 },
+            visible: {
+              opacity: 1,
+              y: 0,
+              transition: {
+                duration: 0.5,
+                staggerChildren: 0.2,
+              },
+            },
+          };
+
+          const itemVariants = {
+            hidden: { opacity: 0, y: 20 },
+            visible: {
+              opacity: 1,
+              y: 0,
+              transition: { duration: 0.5 },
+            },
+          };
+        
+
+  return (
+    <div>
+      <div className="lg:mt-20 sm:mt-10 mt-6">
+        <div className="flex flex-wrap justify-center space-x-2 sm:space-x-4 text-center">
+          <span className="font-bold text-5xl  lg:text-5xl text-white">
+            Why Choose
+          </span>
+          <span className="font-bold text-5xl sm:text-3xl lg:text-5xl text-blue-600">
+            QUBIT !
+          </span>
+        </div>
+      </div>
+      <div
+            ref={timelineRef}
+            className="mt-14 sm:mt-20 px-2 sm:px-4 relative"
+          >
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              variants={timelineVariants}
+              animate={{ height: ["545px"], opacity: 1 }}
+              transition={{ duration: 1, ease: "easeInOut" }}
+              className="absolute left-1/2 bottom-[70px] sm:bottom-[90px] w-[2px] sm:w-[4px] bg-gray-500 transform -translate-x-1/2"
+            />
+
+            <motion.div
+              className="space-y-12 sm:space-y-24 relative"
+              variants={timelineVariants}
+              initial="hidden"
+              animate={timelineControls}
+            >
+              <motion.div
+                variants={itemVariants}
+                className="flex flex-col sm:flex-row items-center"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              >
+                <div className="w-full sm:w-[30%] sm:pr-8 text-center sm:text-right relative sm:left-44 transition-transform transform hover:scale-105 z-10">
+                  <motion.div
+                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                  >
+                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
+                      Efficient Data Extraction
+                    </h3>
+                    <p className="text-gray-600 text-center sm:text-right">
+                      Efficient data extraction employs methods like throttling
+                      and IP rotation to gather data quickly while minimizing
+                      risks of website blocking.
+                    </p>
+                  </motion.div>
+                </div>
+
+                <motion.div
+                  className=" hidden lg:block absolute left-1/2 w-[100px] sm:w-[138px] h-[2px] sm:h-[4px] bg-gray-500 transform -translate-x-full"
+                  initial={{ width: 0 }}
+                  animate={{ width: "200px", sm: "138px" }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <motion.div
+                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <div className="hidden sm:block w-1/2 pl-8"></div>
+              </motion.div>
+
+              <motion.div
+                variants={itemVariants}
+                className="flex flex-col sm:flex-row items-center"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              >
+                <div className="hidden sm:block w-1/2 pr-8"></div>
+
+                <motion.div
+                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <motion.div
+                  className="absolute hidden lg:block left-1/2 w-[100px] sm:w-[144px] h-[2px] sm:h-[4px] bg-gray-500"
+                  initial={{ width: 0 }}
+                  animate={{ width: "200px", sm: "144px" }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <div className="w-full sm:w-[30%] sm:pl-8 text-center sm:text-left relative sm:left-28 transition-transform transform hover:scale-105">
+                  <motion.div
+                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                  >
+                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
+                      Advanced Analytics
+                    </h3>
+                    <p className="text-gray-600">
+                      Advanced analytics utilizes sophisticated techniques to
+                      analyze data, providing valuable insights from web
+                      scraping for informed business decisions and trend
+                      analysis.
+                    </p>
+                  </motion.div>
+                </div>
+              </motion.div>
+
+              <motion.div
+                variants={itemVariants}
+                className="flex flex-col sm:flex-row items-center"
+                initial={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              >
+                <div className="w-full sm:w-[30%] sm:pr-8 text-center sm:text-right relative sm:left-44 transition-transform transform hover:scale-105 z-10">
+                  <motion.div
+                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
+                    initial={{ opacity: 0, y: 50 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.8, ease: "easeOut" }}
+                  >
+                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
+                      Scalable Infrastructure
+                    </h3>
+                    <p className="text-gray-600">
+                      Scalable infrastructure allows seamless growth,
+                      efficiently managing increased workloads in web scraping
+                      to ensure optimal performance and resource allocation.
+                    </p>
+                  </motion.div>
+                </div>
+
+                <motion.div
+                  className="absolute left-1/2 w-[100px] hidden lg:block sm:w-[138px] h-[2px] sm:h-[4px] bg-gray-500 -translate-x-full"
+                  initial={{ width: 0 }}
+                  animate={{ width: "200px", sm: "138px" }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <motion.div
+                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                ></motion.div>
+
+                <div className="hidden sm:block w-1/2 pl-8"></div>
+              </motion.div>
+            </motion.div>
+          </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/Components/button.jsx b/app/Components/button.jsx
deleted file mode 100644
index 5dac85c..0000000
--- a/app/Components/button.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-const button = () => {
-  return (
-    <div>
-      <div class="group relative flex justify-center items-center text-zinc-600 text-sm font-bold">
-        <div class="absolute opacity-0 group-hover:opacity-100 group-hover:-translate-y-[150%] -translate-y-[300%] duration-500 group-hover:delay-500 skew-y-[20deg] group-hover:skew-y-0 shadow-md">
-          <div class="shadow-md bg-blue-600 absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"></div>
-          <div class="rounded-md bg-white group-hover:opacity-0 group-hover:scale-[115%] group-hover:delay-700 duration-500 w-full h-full absolute top-0 left-0">
-            <div class="border-b border-r border-white bg-white absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"></div>
-          </div>
-        </div>
-
-        <div class="shadow-md flex items-center group-hover:gap-2 bg-gradient-to-br from-blue-600 to-blue-600 p-3 rounded-full cursor-pointer duration-300">
-          <svg
-            fill="none"
-            viewBox="0 0 24 24"
-            height="20px"
-            width="20px"
-            xmlns="http://www.w3.org/2000/svg"
-            class="fill-white"
-          >
-            <path
-              stroke-linejoin="round"
-              stroke-linecap="round"
-              d="M15.4306 7.70172C7.55045 7.99826 3.43929 15.232 2.17021 19.3956C2.07701 19.7014 2.31139 20 2.63107 20C2.82491 20 3.0008 19.8828 3.08334 19.7074C6.04179 13.4211 12.7066 12.3152 15.514 12.5639C15.7583 12.5856 15.9333 12.7956 15.9333 13.0409V15.1247C15.9333 15.5667 16.4648 15.7913 16.7818 15.4833L20.6976 11.6784C20.8723 11.5087 20.8993 11.2378 20.7615 11.037L16.8456 5.32965C16.5677 4.92457 15.9333 5.12126 15.9333 5.61253V7.19231C15.9333 7.46845 15.7065 7.69133 15.4306 7.70172Z"
-            ></path>
-          </svg>
-          <span class="text-[0px] group-hover:text-sm duration-300 text-white">
-            Get Started
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default button;
diff --git a/app/Elements/AboutUs.jsx b/app/Elements/AboutUs/page.jsx
similarity index 100%
rename from app/Elements/AboutUs.jsx
rename to app/Elements/AboutUs/page.jsx
diff --git a/app/Elements/Button/page.jsx b/app/Elements/Button/page.jsx
new file mode 100644
index 0000000..d1af422
--- /dev/null
+++ b/app/Elements/Button/page.jsx
@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+import style from "./style.css"
+
+const page = () => {
+  return (
+    <div>
+      <button className="cssbuttons-io-button">
+        Get started
+        <div className="icon">
+          <svg
+            height="24"
+            width="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M0 0h24v24H0z" fill="none"></path>
+            <path
+              d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/Elements/Button/style.css b/app/Elements/Button/style.css
new file mode 100644
index 0000000..126ca06
--- /dev/null
+++ b/app/Elements/Button/style.css
@@ -0,0 +1,55 @@
+.cssbuttons-io-button {
+    background: #1D4ED8;
+    color: white;
+    font-family: inherit;
+    padding: 0.35em;
+    padding-left: 1.2em;
+    font-size: 17px;
+    font-weight: 500;
+    border-radius: 0.9em;
+    border: none;
+    letter-spacing: 0.05em;
+    display: flex;
+    align-items: center;
+    box-shadow: inset 0 0 1.6em -0.6em #1D4ED8;
+    overflow: hidden;
+    position: relative;
+    height: 2.8em;
+    padding-right: 3.3em;
+    cursor: pointer;
+  }
+  
+  .cssbuttons-io-button .icon {
+    background: white;
+    margin-left: 1em;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.2em;
+    width: 2.2em;
+    border-radius: 0.7em;
+    box-shadow: 0.1em 0.1em 0.6em 0.2em #1D4ED8;
+    right: 0.3em;
+    transition: all 0.3s;
+
+  }
+  
+  .cssbuttons-io-button:hover .icon {
+    width: calc(100% - 0.6em);
+  }
+  
+  .cssbuttons-io-button .icon svg {
+    width: 1.1em;
+    transition: transform 0.3s;
+    color: #1D4ED8;
+  }
+  
+  .cssbuttons-io-button:hover .icon svg {
+    transform: translateX(0.1em);
+  }
+  
+  .cssbuttons-io-button:active .icon {
+    transform: scale(0.95);
+  }
+  
\ No newline at end of file
diff --git a/app/Elements/Card.jsx b/app/Elements/Card.jsx
deleted file mode 100644
index 795dcca..0000000
--- a/app/Elements/Card.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-const Card = () => {
-  return (
-    <div>
-      <div class="relative w-[190px] h-[254px] bg-[#07182E] flex items-center justify-center overflow-hidden rounded-[20px]">
-        <h2 class="z-10 text-white text-2xl"></h2>
-
-        <div class="before-content absolute w-[100px] h-[130%] animate-rotBGimg"></div>
-        <div class="after-content absolute inset-[5px] bg-[#07182E] rounded-[15px]"></div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;
diff --git a/app/Elements/GmailCard.jsx b/app/Elements/GmailCard.jsx
index ba44d22..347c550 100644
--- a/app/Elements/GmailCard.jsx
+++ b/app/Elements/GmailCard.jsx
@@ -1,30 +1,3 @@
-// import React from 'react';
-// import Image from 'next/image';
-// import GmailLogo from '../../public/Gmail_Logo_512px.png';
-
-// const GmailCard = () => {
-//   return (
-//     <div className="p-6 text-center space-y-10">
-//       <div className=' flex space-x-2 justify-center'>
-//       <h1 className="text-3xl font-bold text-gray-800">
-//         Get Instant Email 
-//       </h1>
-//       <h1 className='text-3xl font-bold text-red-600'>
-//       Alerts!
-//       </h1>
-//       </div>
-//       <Image src={GmailLogo} alt="Gmail Logo" width={200} height={100} className="mx-auto" />
-//       <p className="text-blue-600 text-lg">
-//         You will get an instant notification whenever a new threat is detected in your subscribed source
-//       </p>
-//     </div>
-//   );
-// };
-
-// export default GmailCard;
-
-
-
 import React from 'react';
 import Image from 'next/image';
 import GmailLogo from '../../public/Gmail_Logo_512px.png';
@@ -33,9 +6,7 @@ const GmailCard = () => {
   return (
     <div className="p-4 sm:p-6 text-center space-y-6 sm:space-y-10">
       <div className='flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 justify-center items-center'>
-        <h1 className="text-2xl sm:text-3xl font-bold text-gray-800">
-          Get Instant Email 
-        </h1>
+        
         <h1 className='text-2xl sm:text-3xl font-bold text-red-600'>
           Alerts!
         </h1>
diff --git a/app/Elements/ServiceCard/page.jsx b/app/Elements/ServiceCard/page.jsx
new file mode 100644
index 0000000..5921aaa
--- /dev/null
+++ b/app/Elements/ServiceCard/page.jsx
@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import style from "./style.css";
+import { PieChartComponent } from "@/components/StyleComponents/Piechart";
+import { LineChartComponent } from "@/components/StyleComponents/LineChart";
+import Alert from "../GmailCard"
+
+const page = () => {
+  return (
+    <div>
+      <div class="container">
+        <div data-text="Github" style={{ "--r": "-15;" }} class=" glass">
+          <PieChartComponent />
+        </div>
+        <div data-text="Code" style={{ "--r": "5;" }} class="glass">
+          <LineChartComponent />
+        </div>
+        <div data-text="Earn" style={{ "--r": "25;" }} class="glass">
+            <Alert/>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/Elements/ServiceCard/style.css b/app/Elements/ServiceCard/style.css
new file mode 100644
index 0000000..16ed275
--- /dev/null
+++ b/app/Elements/ServiceCard/style.css
@@ -0,0 +1,34 @@
+.container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+  }
+  
+  .container .glass {
+    position: relative;
+    width: 300px;
+    height: 430px;
+    background:rgb(255, 255, 255);
+    border: 1px solid rgb(255, 255, 255);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.5s;
+    border-radius: 10px;
+    margin: 0 -45px;
+    backdrop-filter: blur(10px);
+    transform: rotate(calc(var(--r) * 1deg));
+  }
+  
+  .container:hover .glass {
+    transform: rotate(0deg);
+    margin: 0 10px;
+  }
+  
+  .container .glass svg {
+    font-size: 2.5em;
+    fill: #fff;
+  }
+  
\ No newline at end of file
diff --git a/app/Elements/TimelineCards/page.jsx b/app/Elements/TimelineCards/page.jsx
new file mode 100644
index 0000000..366e3f7
--- /dev/null
+++ b/app/Elements/TimelineCards/page.jsx
@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+
+const page = () => {
+  return (
+    <div>
+      <div class="duration-300 text-white group cursor-pointer relative overflow-hidden bg-[#DCDFE4] w-52 h-20 dark:bg-[#22272B] rounded-3xl p-3 hover:w-72 hover:h-60 hover:bg-white hover:dark:bg-white hover:dark:text-black">
+        <h3 class="text-xl text-center">Efficient Data Extraction</h3>
+        <div class="absolute duration-300 mt-5 group-hover:left-12 mr-10">
+          <p class="text-sm">
+            {" "}
+            Efficient data extraction employs methods like throttling and IP
+            rotation to gather data quickly while minimizing risks of website
+            blocking.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/app/Elements/TimelineCards/style.css b/app/Elements/TimelineCards/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/app/Elements/button.jsx b/app/Elements/button.jsx
deleted file mode 100644
index 5dac85c..0000000
--- a/app/Elements/button.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-
-const button = () => {
-  return (
-    <div>
-      <div class="group relative flex justify-center items-center text-zinc-600 text-sm font-bold">
-        <div class="absolute opacity-0 group-hover:opacity-100 group-hover:-translate-y-[150%] -translate-y-[300%] duration-500 group-hover:delay-500 skew-y-[20deg] group-hover:skew-y-0 shadow-md">
-          <div class="shadow-md bg-blue-600 absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"></div>
-          <div class="rounded-md bg-white group-hover:opacity-0 group-hover:scale-[115%] group-hover:delay-700 duration-500 w-full h-full absolute top-0 left-0">
-            <div class="border-b border-r border-white bg-white absolute bottom-0 translate-y-1/2 left-1/2 translate-x-full rotate-45 p-1"></div>
-          </div>
-        </div>
-
-        <div class="shadow-md flex items-center group-hover:gap-2 bg-gradient-to-br from-blue-600 to-blue-600 p-3 rounded-full cursor-pointer duration-300">
-          <svg
-            fill="none"
-            viewBox="0 0 24 24"
-            height="20px"
-            width="20px"
-            xmlns="http://www.w3.org/2000/svg"
-            class="fill-white"
-          >
-            <path
-              stroke-linejoin="round"
-              stroke-linecap="round"
-              d="M15.4306 7.70172C7.55045 7.99826 3.43929 15.232 2.17021 19.3956C2.07701 19.7014 2.31139 20 2.63107 20C2.82491 20 3.0008 19.8828 3.08334 19.7074C6.04179 13.4211 12.7066 12.3152 15.514 12.5639C15.7583 12.5856 15.9333 12.7956 15.9333 13.0409V15.1247C15.9333 15.5667 16.4648 15.7913 16.7818 15.4833L20.6976 11.6784C20.8723 11.5087 20.8993 11.2378 20.7615 11.037L16.8456 5.32965C16.5677 4.92457 15.9333 5.12126 15.9333 5.61253V7.19231C15.9333 7.46845 15.7065 7.69133 15.4306 7.70172Z"
-            ></path>
-          </svg>
-          <span class="text-[0px] group-hover:text-sm duration-300 text-white">
-            Get Started
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default button;
diff --git a/app/page.jsx b/app/page.jsx
index 1f12cb0..9fb35ec 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,98 +1,12 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import { motion, useAnimation } from "framer-motion";
-import Mobilebg from "../public/mobile.png";
-import Button from "./Elements/button";
-import { CarouselCard } from "@/components/StyleComponents/Carousel";
-import AboutUs from "./Elements/AboutUs";
-import Link from "next/link";
+import React from "react";
+import AboutUs from "./Elements/AboutUs/page";
+import Navbar from "./Components/Navbar/Page";
+import Timeline from "./Components/Timeline/page";
+import Card from "./Components/Card/Page";
+import Intro from "./Components/Intro/Page";
 
 const Page = () => {
-  const timelineRef = useRef(null);
-  const pieChartRef = useRef(null);
-  const [timelineVisible, setTimelineVisible] = useState(false);
-  const [pieChartVisible, setPieChartVisible] = useState(false);
-  const timelineControls = useAnimation();
-  const pieChartControls = useAnimation();
-
-  useEffect(() => {
-    const timelineObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setTimelineVisible(true);
-          timelineControls.start("visible");
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    const pieChartObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setPieChartVisible(true);
-          pieChartControls.start("visible");
-        }
-      },
-      { threshold: 0.1 }
-    );
-
-    if (timelineRef.current) {
-      timelineObserver.observe(timelineRef.current);
-    }
-
-    if (pieChartRef.current) {
-      pieChartObserver.observe(pieChartRef.current);
-    }
-
-    return () => {
-      if (timelineRef.current) {
-        timelineObserver.unobserve(timelineRef.current);
-      }
-      if (pieChartRef.current) {
-        pieChartObserver.unobserve(pieChartRef.current);
-      }
-    };
-  }, [timelineControls, pieChartControls]);
-
-  const timelineVariants = {
-    hidden: { opacity: 0, y: 50 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: 0.5,
-        staggerChildren: 0.2,
-      },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: 0.5 },
-    },
-  };
-
-  const containerVariants = {
-    hidden: {
-      opacity: 0,
-    },
-    visible: {
-      opacity: 1,
-      transition: {
-        staggerChildren: 0.2,
-      },
-    },
-  };
-
-  const slideIn = {
-    hidden: { x: -100, opacity: 0 },
-    visible: { x: 0, opacity: 1 },
-  };
-
   return (
     <>
       <div className="relative min-h-scree overflow-hidden  ">
@@ -104,298 +18,10 @@ const Page = () => {
         </div>
 
         <div className="relative z-10">
-          <nav className="p-4 bg-black  shadow-2xl shadow-black">
-            <motion.div
-              className="container mx-auto flex justify-between h-10 mt-2"
-              initial={{ y: -50, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              transition={{ duration: 0.5 }}
-            >
-              <div className="text-3xl flex font-bold text-white">QUBIT</div>
-              <div className=" space-x-4 hidden lg:block md:block">
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  Scraping
-                </motion.span>
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  Services
-                </motion.span>
-                <motion.span
-                  className="text-gray-500 hover:text-white hover:cursor-pointer text-xl transition font-semibold"
-                  whileHover={{ scale: 1.1, color: "#ffffff" }}
-                  whileTap={{ scale: 0.95 }}
-                >
-                  About Us
-                </motion.span>
-              </div>
-            </motion.div>
-          </nav>
-
-          <div className="grid lg:grid-cols-2 sm:grid-cols-1">
-            <div className="text-black">
-              <div className=" ml-9 mt-20 lg:mt-64 lg:ml-32 sm:ml-12 ml-4">
-                <motion.h1
-                  className="font-bold text-lg sm:text-2xl text-gray-600 h-10"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 1 }}
-                >
-                  {"Keep Your device Safe".split("").map((char, index) => (
-                    <motion.span
-                      key={index}
-                      initial={{ opacity: 0, y: 50 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      transition={{ delay: index * 0.1, duration: 0.2 }}
-                    >
-                      {char}
-                    </motion.span>
-                  ))}
-                </motion.h1>
-
-                <motion.p
-                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-white lg:h-14 sm:h-10"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Real Time Vulnerability
-                </motion.p>
-
-                <motion.p
-                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-blue-600 lg:h-14 sm:h-10"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Reporting System with
-                </motion.p>
-
-                <motion.p
-                  className="text-5xl sm:text-4xl md:text-5xl font-extrabold text-white lg:h-14 sm:h-10"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  Cutting Edge Technology
-                </motion.p>
-              </div>
-
-              <Link href="https://rvrs.teamqubit.in/SignUp">
-                <motion.div
-                  className="mt-5  sm:ml-10 lg:ml-2"
-                  initial={{ opacity: 0, x: -100 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.8, duration: 0.8 }}
-                >
-                  <Button />
-                </motion.div>
-              </Link>
-            </div>
-            <motion.div
-              className="text-black"
-              initial={{ opacity: 0, y: 100 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.8, duration: 0.8 }}
-            >
-              <Image src={Mobilebg} alt="mobilebg" className="mt-8" />
-            </motion.div>
-          </div>
-
-          <div className="lg:mt-20 sm:mt-10 mt-6">
-            <div className="flex flex-wrap justify-center space-x-2 sm:space-x-4 text-center">
-              <span className="font-bold text-5xl  lg:text-5xl text-white">
-                Why Choose
-              </span>
-              <span className="font-bold text-5xl sm:text-3xl lg:text-5xl text-blue-600">
-                QUBIT !
-              </span>
-            </div>
-          </div>
-
-          <div
-            ref={timelineRef}
-            className="mt-14 sm:mt-20 px-2 sm:px-4 relative"
-          >
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              variants={timelineVariants}
-              animate={{ height: ["560px"], opacity: 1 }}
-              transition={{ duration: 1, ease: "easeInOut" }}
-              className="absolute left-1/2 bottom-[70px] sm:bottom-[90px] w-[2px] sm:w-[4px] bg-gray-500 transform -translate-x-1/2"
-            />
-
-            <motion.div
-              className="space-y-12 sm:space-y-24 relative"
-              variants={timelineVariants}
-              initial="hidden"
-              animate={timelineControls}
-            >
-              <motion.div
-                variants={itemVariants}
-                className="flex flex-col sm:flex-row items-center"
-                initial={{ opacity: 0, y: 50 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, ease: "easeOut" }}
-              >
-                <div className="w-full sm:w-[30%] sm:pr-8 text-center sm:text-right relative sm:left-44 transition-transform transform hover:scale-105 z-10">
-                  <motion.div
-                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: "easeOut" }}
-                  >
-                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
-                      Efficient Data Extraction
-                    </h3>
-                    <p className="text-gray-600 text-center sm:text-right">
-                      Efficient data extraction employs methods like throttling
-                      and IP rotation to gather data quickly while minimizing
-                      risks of website blocking.
-                    </p>
-                  </motion.div>
-                </div>
-
-                <motion.div
-                  className=" hidden lg:block absolute left-1/2 w-[100px] sm:w-[138px] h-[2px] sm:h-[4px] bg-gray-500 transform -translate-x-full"
-                  initial={{ width: 0 }}
-                  animate={{ width: "200px", sm: "138px" }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <motion.div
-                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <div className="hidden sm:block w-1/2 pl-8"></div>
-              </motion.div>
-
-              <motion.div
-                variants={itemVariants}
-                className="flex flex-col sm:flex-row items-center"
-                initial={{ opacity: 0, y: 50 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, ease: "easeOut" }}
-              >
-                <div className="hidden sm:block w-1/2 pr-8"></div>
-
-                <motion.div
-                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <motion.div
-                  className="absolute hidden lg:block left-1/2 w-[100px] sm:w-[144px] h-[2px] sm:h-[4px] bg-gray-500"
-                  initial={{ width: 0 }}
-                  animate={{ width: "200px", sm: "144px" }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <div className="w-full sm:w-[30%] sm:pl-8 text-center sm:text-left relative sm:left-28 transition-transform transform hover:scale-105">
-                  <motion.div
-                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: "easeOut" }}
-                  >
-                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
-                      Advanced Analytics
-                    </h3>
-                    <p className="text-gray-600">
-                      Advanced analytics utilizes sophisticated techniques to
-                      analyze data, providing valuable insights from web
-                      scraping for informed business decisions and trend
-                      analysis.
-                    </p>
-                  </motion.div>
-                </div>
-              </motion.div>
-
-              <motion.div
-                variants={itemVariants}
-                className="flex flex-col sm:flex-row items-center"
-                initial={{ opacity: 0, y: 50 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, ease: "easeOut" }}
-              >
-                <div className="w-full sm:w-[30%] sm:pr-8 text-center sm:text-right relative sm:left-44 transition-transform transform hover:scale-105 z-10">
-                  <motion.div
-                    className="bg-white p-4 sm:p-6 rounded-lg shadow-lg inline-block transition-shadow duration-300 hover:shadow-xl"
-                    initial={{ opacity: 0, y: 50 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.8, ease: "easeOut" }}
-                  >
-                    <h3 className="text-lg sm:text-xl font-semibold mb-2 text-black">
-                      Scalable Infrastructure
-                    </h3>
-                    <p className="text-gray-600">
-                      Scalable infrastructure allows seamless growth,
-                      efficiently managing increased workloads in web scraping
-                      to ensure optimal performance and resource allocation.
-                    </p>
-                  </motion.div>
-                </div>
-
-                <motion.div
-                  className="absolute left-1/2 w-[100px] hidden lg:block sm:w-[138px] h-[2px] sm:h-[4px] bg-gray-500 -translate-x-full"
-                  initial={{ width: 0 }}
-                  animate={{ width: "200px", sm: "138px" }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <motion.div
-                  className="w-3 sm:w-4 h-3 sm:h-4 bg-gray-500 rounded-full absolute left-1/2 transform -translate-x-1/2"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.8, ease: "easeOut" }}
-                ></motion.div>
-
-                <div className="hidden sm:block w-1/2 pl-8"></div>
-              </motion.div>
-            </motion.div>
-          </div>
-
-          <div ref={pieChartRef} className="mt-24 pb-20">
-            <motion.div
-              className="text-5xl font-bold text-center mb-10"
-              initial={{ opacity: 0, y: 50 }}
-              animate={pieChartVisible ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5 }}
-            >
-              <span className="text-white font-bold text-5xl sm:text-5xl lg:text-5xl">
-                Services Provided by{" "}
-              </span>
-              <span className="text-blue-600 font-bold text-5xl sm:text-4xl lg:text-5xl">
-                Qubit{" "}
-              </span>
-            </motion.div>
-            <motion.div
-              className="flex justify-center"
-              initial={{ opacity: 0, y: 100 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8, ease: "easeOut" }}
-            >
-              <motion.div
-                className="mb-20 mt-20 w-full max-w-4xl"
-                initial={{ scale: 0.9 }}
-                animate={{ scale: 1 }}
-                transition={{ duration: 0.6, ease: "easeInOut" }}
-              >
-                <CarouselCard />
-              </motion.div>
-            </motion.div>
-          </div>
+          <Navbar />
+          <Intro />
+          <Timeline />
+          <Card />
         </div>
       </div>
       <AboutUs />
diff --git a/components/StyleComponents/LineChart.tsx b/components/StyleComponents/LineChart.tsx
index 4444d78..c27cca0 100644
--- a/components/StyleComponents/LineChart.tsx
+++ b/components/StyleComponents/LineChart.tsx
@@ -45,9 +45,6 @@ export function LineChartComponent() {
     <Card className="w-full border-none bg-transparent shadow-none">
       <CardHeader className="items-center pb-0  mb-2 justify-center align-middle space-y-2 sm:space-y-0 sm:space-x-3">
         <CardTitle className="  text-center items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2">
-          <span className="text-2xl sm:text-3xl text-gray-500 font-bold">
-          Vulnerability
-          </span>
           <span className="text-2xl sm:text-3xl text-red-600 font-bold ml-2">
           Timeline
           </span>
diff --git a/components/StyleComponents/Piechart.tsx b/components/StyleComponents/Piechart.tsx
index 202dfb2..6be7a03 100644
--- a/components/StyleComponents/Piechart.tsx
+++ b/components/StyleComponents/Piechart.tsx
@@ -39,11 +39,8 @@ export function PieChartComponent() {
     <Card className="w-full max-w-3xl mx-auto flex flex-col border-none bg-transparent shadow-none">
       
       <CardTitle className="text-center sm:mt-5 items-center justify-center space-y-1 ">
-        <span className="text-2xl sm:text-3xl lg:text-3xl text-gray-500 font-bold">
-          Severity of
-        </span>
         <span className="text-2xl sm:text-3xl lg:text-3xl text-red-600 font-bold ml-2">
-          Vulnerability
+        Severity
         </span>
       </CardTitle>
 
@@ -95,8 +92,8 @@ export function PieChartComponent() {
         </ChartContainer>
       </CardContent>
 
-      <CardFooter className="text-center text-blue-600 lg:relative lg:bottom-8 px-4">
-        <p className="text-sm sm:text-base lg:text-lg text-muted-foreground text-blue-700 relative bottom-4 ">
+      <CardFooter className="text-center lg:relative mt-4 lg:bottom-8 px-4">
+        <p className="text-sm sm:text-base lg:text-lg text-muted-foreground text-blue-800 relative bottom-4 ">
           We provide you information about the Severity of the Vulnerability
           received
         </p>