all over ui enhanced

package.json

@@ -18,6 +18,7 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@pinecone-database/pinecone": "^3.0.1",
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "axios": "^1.7.5",

src/app/(routes)/(landing)/how-it-works.tsx

@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalTrigger,
+} from "@/components/ui/animated-modal";
+import { FaPlayCircle } from "react-icons/fa";
+
+export function Bttn() {
+  return (
+    <div className="py-40  flex items-center justify-center">
+      <Modal>
+        <ModalTrigger className="relative px-4 py-2 backdrop-blur-sm bg-gradient-to-r  from-blue-500/70 to-blue-400/50 text-white text-center rounded-full flex flex-row justify-center items-center gap-2 group/modal-btn">
+          <span className="flex flex-row gap-2">
+            <FaPlayCircle className="h-6 w-6 text-white/80" /> How it works{" "}
+          </span>
+        </ModalTrigger>
+        <ModalBody>
+          <ModalContent>
+            <div className="relative flex justify-center items-center">
+
+
+
+              <div className="relative p-2 bg-black rounded-xl">
+                <iframe
+                  width="560"
+                  height="315"
+                  src="https://www.youtube.com/embed/XctooiH0moI?si=prOhlPi84hF-aSbu"
+                  title="YouTube video player"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  referrerPolicy="strict-origin-when-cross-origin"
+                  allowFullScreen
+                  className="rounded-lg"
+                ></iframe>
+              </div>
+            </div>
+          </ModalContent>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+}

src/app/(routes)/(landing)/page.tsx

@@ -1,12 +1,29 @@
 
 import React from 'react'
 import { HeroSection } from '@/components/HeroSection';
+import { Navbar } from '@/components/Navbar';
+import FAQ from './faqAndtestimonials';
+import { Footer } from '@/components/Footer';
+
 
 type Props = {}
 
-export default function Home({}: Props) {
+export default function Landing({}: Props) {
   return (
-    <HeroSection/>
+
+    <>
+
+      <Navbar />
+
+      <HeroSection />
+
+      <FAQ />
+
+      <Footer />
+
+
+    </>
+
   )
 }
 

src/components/HeroSection.tsx

@@ -1,53 +1,69 @@
-"use client";
-import { useScroll, useTransform } from "framer-motion";
+'use client';
+import { useState } from "react";
 import React from "react";
-import { Vortex } from "@/components/ui/vortex";
-import {  FaPlayCircle } from "react-icons/fa";
 import Link from "next/link";
+import { BackgroundBeamsWithCollision } from "./ui/background-beam";
+import BubbleEffect from "./ui/bubble";
+import { FaPlayCircle } from "react-icons/fa";
+import { Bttn } from "@/app/(routes)/(landing)/how-it-works";
 
 export function HeroSection() {
-  const ref = React.useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: ref,
-    offset: ["start start", "end start"],
-  });
-
-  const pathLengthFirst = useTransform(scrollYProgress, [0, 0.8], [0.2, 1.2]);
-  const pathLengthSecond = useTransform(scrollYProgress, [0, 0.8], [0.15, 1.2]);
-  const pathLengthThird = useTransform(scrollYProgress, [0, 0.8], [0.1, 1.2]);
-  const pathLengthFourth = useTransform(scrollYProgress, [0, 0.8], [0.05, 1.2]);
-  const pathLengthFifth = useTransform(scrollYProgress, [0, 0.8], [0, 1.2]);
+  const [showBubbles, setShowBubbles] = useState(false);
 
   return (
-     <div className="w-[calc(100%-4rem)] mx-auto rounded-sm  h-screen overflow-hidden">
-      <Vortex
-      backgroundColor="black"
-      rangeY={800}
-      particleCount={500}
-      baseHue={120}
-      className="flex items-center flex-col justify-center px-2 md:px-10  py-4 w-full h-full"
-    >
-      <h2 className="md:text-4xl text-4xl lg:text-8xl font-bold text-center text-white relative z-20">
-        GuruNimbus
-        </h2>
-
-      <p className="text-neutral-200 max-w-lg mx-auto my-4 text-sm text-center ">
-            Building GuruNimbus, an advanced AI-powered RAG chatbot that intelligently guides you in rating and discovering the best professors.
+    <div className="w-full h-screen bg-black flex items-center justify-center">
+      <BackgroundBeamsWithCollision>
+
+        <div className="relative z-10 w-full max-w-2xl mx-auto flex flex-col justify-center items-center text-center px-4 md:px-8">
+          <div className="flex flex-col justify-center items-center">
+          <h2
+            className="text-4xl md:text-5xl lg:text-8xl font-bold text-transparent bg-gradient-to-r from-[#006dff]/10 to-[#006dff] bg-clip-text drop-shadow-lg rounded-lg"
+            style={{ WebkitTextStroke: "1px #006dff" }}
+          >
+            GuruNimbus
+          </h2>
+
+          <p className="text-gray-300 max-w-lg  text-sm md:text-base">
+            Building GuruNimbus, an advanced AI-powered RAG chatbot that
+            intelligently guides you in rating and discovering the best
+            professors.
           </p>
-      <div className="flex flex-col sm:flex-row items-center gap-4 mt-6">
-        <Link className="px-4 py-2 bg-blue-600 hover:bg-blue-700 transition duration-200 rounded-lg text-white shadow-[0px_2px_0px_0px_#FFFFFF40_inset]" href={"/home"}        >
-          Get Started
-        </Link>
-        {/* <button className="px-4 py-2  text-white ">
-            How it Works
-          </button> */}
-          <button className="px-4 py-2 text-white flex items-center text-xl" >
-            < FaPlayCircle className="mr-2" /> {/* Play icon added here */}
-            How it Works
-          </button>
-      </div>
-    </Vortex>
-  </div>
+
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-4 mt-6">
+            <Link href={"/chat"}>
+              <button
+                onMouseEnter={() => setShowBubbles(true)}
+                onMouseLeave={() => setShowBubbles(false)}
+                className="relative px-6 py-3 backdrop-blur-sm border bg-[#006dff]/10 border-[#006dff]/20 text-white text-center rounded-full flex flex-row justify-center items-center gap-2"
+              >
+                <span>Try Guru Nimbus </span>
+                <svg
+                  width="0.625rem"
+                  viewBox="0 0 10 10"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 9L9 1M9 1H2.5M9 1V7.22222"
+                    stroke="currentColor"
+                    strokeWidth="1.25"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  ></path>
+                </svg>
+                <div className="absolute inset-x-0 h-px -bottom-px bg-gradient-to-r w-3/4 mx-auto from-transparent via-[#006dff] to-transparent" />
+                <BubbleEffect
+                  show={showBubbles}
+                  style={{ top: 0, left: 0, width: "100%", height: "100%" }}
+                />
+              </button>
+            </Link>
+
+            <Bttn />
+          </div>
+        </div>
+      </BackgroundBeamsWithCollision>
+    </div>
   );
 }
-