Landing page

package.json

@@ -16,10 +16,19 @@
     "@mui/material": "^6.1.5",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@tabler/icons-react": "^3.21.0",
+    "@tsparticles/engine": "^3.5.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dompurify": "^3.1.7",
+    "framer-motion": "^11.11.17",
     "lucide-react": "^0.453.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.4",
@@ -28,6 +37,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

src/ChatApp.jsx

@@ -1,15 +1,18 @@
 import { useState, useEffect, useRef } from "react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+// import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+// import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Send, User } from "lucide-react";
+// import { Send, User } from "lucide-react";
 import { v4 as uuidv4 } from "uuid";
 import ChatAppCss from "./styles/ChatApp.module.css";
-import LandingPage from "./components/LandingPage";
-import TypingEffect from "./components/TypingEffect";
+// import LandingPage from "./components/LandingPage";
+// import TypingEffect from "./components/TypingEffect";
 import FormattedText from "./components/FormattedText";
 import "./index.css";
+import { footer } from "./resource/content";
+import Home from "./components/Home";
+// import { GoogleGeminiEffectDemo, Home } from "./components/Home";
 
 export default function ChatbotUI() {
   const [landingPage, setLandingPage] = useState(true);
@@ -122,8 +125,12 @@ export default function ChatbotUI() {
   return (
     <>
       {landingPage && (
-        <LandingPage turnLandingOff={() => setLandingPage(false)} />
-      )}
+        // <LandingPage turnLandingOff={() => setLandingPage(false)} />
+    <>
+  <Home/>
+
+    </>
+     )}
       {!landingPage && (
         <div
           className={`relative font-sans flex flex-col h-screen bg-[url('/images/Pattern.jpg')] bg-cover bg-center text-white`}
@@ -219,8 +226,11 @@ export default function ChatbotUI() {
             ))}
             <div ref={bottomOfPanelRef}></div>
           </ScrollArea>
+          <div className="w-[100vw] flex  justify-center  justify-items-center  rounded-full">
+            <div className="flex  bg-gray-800  rounded-md  shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] px-5">
+
           <div
-            className={`relative w-[90vw] s:w-[85vw] m:w-[80vw] xl:w-[70vw] xxl:w-[60vw] mx-auto py-4  border-gray-800 flex items-center`}
+            className={`relative w-[70vw] s:w-[85vw] m:w-[40vw] xl:w-[70vw] xxl:w-[60vw] h-auto    flex justify-center justify-items-center`}
           >
             <textarea
               onChange={(e) => {
@@ -229,28 +239,37 @@ export default function ChatbotUI() {
               }}
               id='textarea'
               placeholder="Type your message..."
-              className={` break-words outline-none w-full border-2 border-[#ffe7e1] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] h-[60px] m:h-[80px] rounded-[10px] bg-gray-800 text-white pl-[20px] py-[16px] m:py-[24px] pr-[50px] m:pr-[80px] font-light text-xl m:text-2xl resize-none overflow-y-auto `}
-              onInput={() => handleTextAreaResize(false)}
+              className={`${prompt==""?'':'cursor-pointer'} break-words outline-none px-4 w-full  h-[60px] m:h-[80px]  bg-gray-800 text-white pl-[20px] py-[16px] m:py-[24px] pr-[50px] m:pr-[80px] font-light text-md m:text-2xl resize-none overflow-y-auto `}
+              onInput={() => handleTextAreaResize(true)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") {
                   e.preventDefault(); // Prevents newline on enter in the textarea
                   sendPrompt();
                   reset();
                 }
               }}
+              cols={1}
             />
+          </div>
+
             <Button
               onClick={() => {
                 sendPrompt();
                 reset();
                 handleTextAreaResize(true)
               }}
               size="icon"
-              className={` absolute w-[30px] m:w-[40px] right-[20px] m:right-[20px] bottom-[26px] m:bottom-[35px] bg-transparent cursor-pointer hover:bg-gray-800`}
+              className={` self-end mb-4  bg-transparent cursor-pointer `}
             >
               <img src="/images/send.svg" alt="send" />
             </Button>
+
+
+
+            </div>
+
           </div>
+          <p className="mb-5 text-center text-gray-400 mt-2 text-sm">{footer.chatinfo}</p>
         </div>
       )}
     </>

src/components/Home.jsx

@@ -0,0 +1,38 @@
+
+// import { useScroll, useTransform } from "framer-motion";
+import React from "react";
+// import { GoogleGeminiEffect } from "./ui/GoogleGeminiEffect";
+import NavHome from "./NavHome"
+
+export default function Home() {
+  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]);
+
+  return (
+    <div
+      className=" bg-black w-full dark:border dark:border-white/[0.1] rounded-md relative  overflow-clip"
+      ref={ref}
+    >
+
+     <NavHome/>
+      {/* <GoogleGeminiEffect
+        pathLengths={[
+          pathLengthFirst,
+          pathLengthSecond,
+          pathLengthThird,
+          pathLengthFourth,
+          pathLengthFifth,
+        ]}
+      /> */}
+    </div>
+  );
+}

src/components/LandingPage.jsx

@@ -1,8 +1,47 @@
+
+import { useScroll, useTransform } from "framer-motion";
 import LandingPageCss from "../styles/LandingPage.module.css";
+import React from "react";
+import { GoogleGeminiEffect } from "./ui/GoogleGeminiEffect";
+import { landingContent } from "../resource/content";
+import { Compare } from "./ui/Compare";
 
 const LandingPage = ({ turnLandingOff }) => {
+  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]);
+
   return (
-    <div className={`font-sans w-full h-full min-h-screen l:h-screen bg-[url('/images/Pattern.jpg')] bg-center bg-cover flex flex-col items-end l:flex-row`}>
+    <div className="relative  ">
+  <div
+      className="h-[400vh] bg-black w-full dark:border dark:border-white/[0.1] rounded-md relative pt-40 overflow-cli"
+      ref={ref}
+    >
+
+      <GoogleGeminiEffect
+        pathLengths={[
+          pathLengthFirst,
+          pathLengthSecond,
+          pathLengthThird,
+          pathLengthFourth,
+          pathLengthFifth,
+        ]}
+
+        turnLandingOff={turnLandingOff}
+      />
+
+
+
+    </div>  
+    <div className={` absolute top-0 font-sans w-full h-full min-h-screen l:h-screen bg-[url('/images/Pattern.jpg')] bg-center bg-cover flex flex-col items-end l:flex-row`}>
       <img
         className='absolute w-[170px] top-[35px] left-[35px] l:top-[40px] l:left-[40px]'
         src="/images/VERSEWISE.svg"
@@ -15,19 +54,18 @@ const LandingPage = ({ turnLandingOff }) => {
           alt="man wearing vr holding a bible"
           className='w-[500px] h-auto mx-auto mt-[60px] l:w-[700px]'
         />
-        <div className={` flex flex-col text-center l:text-start max-w-[70%] mx-auto mt-[20px] l:w-[700px] l:mr-10 gap-[20px] justify-start`}>
-          <div className={`mx-auto text-[32px] leading-[44px] font-semibold w-[90%] l:w-full l:font-normal l:text-[64px] l:leading-[87px] `}>
-            Welcome to our Chat Bot!
+        <div className={` flex flex-col text-center l:text-start max-w-[70%] mx-auto mt-[20px] lg:w-[700px] lg:mr-10 gap-[20px] justify-start`}>
+          <div className={`mx-auto text-[32px] leading-[44px] font-semibold w-[90%] l:w-full l:font-normal l:text-[64px] l:leading-[87px] mt-26 lg:mt-80`}>
+         {landingContent.title}
           </div>
-          <div className={`text-[22px] leading-[30px] font-bold text-[#EF4E25] l:leading-[51px] l:text-[37px] l:font-normal`}>Wisdom at your command.</div>
+          <div className={`text-[22px] leading-[30px] font-bold text-[#EF4E25] l:leading-[51px] l:text-[37px] l:font-normal`}>{landingContent.subtitle}</div>
 
           <div className='font-semibold text-[14px] leading-[19px] text-[#FFFFFF78] l:text-[24px] l:leading-[32px] l:font-normal'>
-            The fear of the LORD is the beginning of wisdom, and knowledge of
-            the Holy One is understanding.
+{landingContent.description}
           </div>
-          <div className='font-semibold text-[14px] leading-[19px] text-[#FFFFFF78] l:text-[24px] l:leading-[32px] l:font-normal'>Proverbs 9:10-12</div>
+          <div className='font-semibold text-[14px] leading-[19px] text-[#FFFFFF78] l:text-[24px] l:leading-[32px] l:font-normal'>{landingContent.Action}<span className="text-red-500 font-bold">?</span></div>
           <div
-            className={`mb-[25px] l:mb-0 ${LandingPageCss.start} bg-[#EF4E25] flex justify-between items-center cursor-pointer rounded-[13px] mx-auto text-[20px] leading-[27px] font-bold w-[150px] h-[50px] l:w-[240px] l:h-[71px] p-[5px_11px] l:p-[9px_20px] l:ml-[27%] l:text-[31px] l:leading-[43px] l:font-normal shadow-[0px_4px_4px_0px_#00000040] mt-[15px]`}
+            className={`block md:hidden mb-[25px] l:mb-0 ${LandingPageCss.start} bg-[#EF4E25] flex justify-between items-center cursor-pointer rounded-[13px] mx-auto text-[20px] leading-[27px] font-bold w-[150px] h-[50px] l:w-[240px] l:h-[71px] p-[5px_11px] l:p-[9px_20px] l:ml-[27%] l:text-[31px] l:leading-[43px] l:font-normal shadow-[0px_4px_4px_0px_#00000040] mt-[15px]`}
             onClick={() => turnLandingOff()}
           >
             <div className={LandingPageCss.buttonText}>Start Chat</div>
@@ -36,6 +74,7 @@ const LandingPage = ({ turnLandingOff }) => {
         </div>
       </div>
     </div>
+    </div>
   );
 };