cards changed

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;

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

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