Landing page

package.json

@@ -19,7 +19,9 @@
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.11.11",
     "lucide-react": "^0.453.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.4",

src/ChatApp.jsx

@@ -219,8 +219,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 +232,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">VERSEwise Ai can make mistakes. Check important info.</p>
         </div>
       )}
     </>

src/components/Home.jsx

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

src/components/LandingPage.jsx

@@ -1,8 +1,42 @@
+
+import { useScroll, useTransform } from "framer-motion";
 import LandingPageCss from "../styles/LandingPage.module.css";
+import React from "react";
+import { GoogleGeminiEffect } from "./ui/GoogleGeminiEffect";
 
 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 +49,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`}>
+          Introducing VERSEwise
           </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='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.
+          Explore Personalized Spiritual Guidance with Versewise – Your AI-Powered Companion for Wisdom, Insight, and Clarity.
           </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'>Ask Anything <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 +69,7 @@ const LandingPage = ({ turnLandingOff }) => {
         </div>
       </div>
     </div>
+    </div>
   );
 };
 

src/components/ui/GoogleGeminiEffect.jsx

@@ -0,0 +1,120 @@
+/* eslint-disable react/prop-types */
+import { motion } from "framer-motion"; // Import motion from framer-motion
+
+import { cn } from "@/lib/utils"; // Assuming you have a utility function for classNames handling
+
+const transition = {
+  duration: 0,
+  ease: "linear",
+};
+
+export const GoogleGeminiEffect = ({
+  // eslint-disable-next-line react/prop-types
+  pathLengths,
+  // eslint-disable-next-line react/prop-types
+  title,
+  // eslint-disable-next-line react/prop-types
+  description,
+  // eslint-disable-next-line react/prop-types
+  className,
+  turnLandingOff
+}) => {
+  return (
+    <div className={cn("sticky top-40", className)}>
+<>
+
+
+
+      <p className="text-lg md:text-7xl  pb-12 font-extrabold text-center bg-clip-text text-transparent bg-gradient-to-b from-red-500 to-white">
+
+             {title||'Your Spiritual Questions'}
+
+
+
+      <p className="text-xs md:text-xl font-normal text-center text-neutral-400 mt-[80px] max-w-lg mx-auto">
+
+
+         {description ||
+          `The fear of the LORD is the beginning of wisdom, and knowledge of
+            the Holy One is understanding.`}
+
+      </p>
+      <div className='font-semibold text-[14px] mt-4 leading-[19px] text-[#FFFFFF78] l:text-[24px] l:leading-[32px] l:font-normal'>Proverbs 9:10-12</div>
+      </p>
+      <div className="w-full h-[890px] -top-60 md:-top-40 flex items-center justify-center bg-red-transparent absolute">
+        <button onClick={() => turnLandingOff()} className="font-bold bg-white rounded-full md:px-4 md:py-2 px-2 py-1 md:mt-[130px] mt-8 z-30 md:text-base text-black text-xs w-fit mx-auto">
+         Start Chat 
+        </button>
+      </div>
+      <svg
+        width="1440"
+        height="890"
+        viewBox="0 0 1440 890"
+        xmlns="http://www.w3.org/2000/svg"
+        className="absolute -top-60 md:-top-40 w-full"
+      >
+
+        {pathLengths.map((pathLength, index) => (
+          <motion.path
+            key={index}
+            d={getPathD(index)} // Assuming `getPathD` is a function that returns the correct path data for each path
+            stroke={getStrokeColor(index)} // Assuming `getStrokeColor` is a function to return the stroke color
+            strokeWidth="2"
+            fill="none"
+            initial={{ pathLength: 0 }}
+            style={{ pathLength }}
+            transition={transition}
+          />
+        ))}
+
+        {/* Gaussian blur for the background paths */}
+        {getBlurPaths().map((path, index) => (
+          <path
+            key={index}
+            d={path.d}
+            stroke={path.stroke}
+            strokeWidth="2"
+            fill="none"
+            pathLength={1}
+            filter="url(#blurMe)"
+          />
+        ))}
+
+        <defs>
+          <filter id="blurMe">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
+          </filter>
+        </defs>
+      </svg>
+      </>
+    </div>
+  );
+};
+
+// Helper functions to abstract the logic of getting path data, stroke color, and blur paths.
+function getPathD(index) {
+  const pathData = [
+    "M0 663C145.5 663 191 666.265 269 647C326.5 630 339.5 621 397.5 566C439 531.5 455 529.5 490 523C509.664 519.348 521 503.736 538 504.236C553.591 504.236 562.429 514.739 584.66 522.749C592.042 525.408 600.2 526.237 607.356 523.019C624.755 515.195 641.446 496.324 657 496.735C673.408 496.735 693.545 519.572 712.903 526.769C718.727 528.934 725.184 528.395 730.902 525.965C751.726 517.115 764.085 497.106 782 496.735C794.831 496.47 804.103 508.859 822.469 518.515C835.13 525.171 850.214 526.815 862.827 520.069C875.952 513.049 889.748 502.706 903.5 503.736C922.677 505.171 935.293 510.562 945.817 515.673C954.234 519.76 963.095 522.792 972.199 524.954C996.012 530.611 1007.42 534.118 1034 549C1077.5 573.359 1082.5 594.5 1140 629C1206 670 1328.5 662.5 1440 662.5",
+    "M0 587.5C147 587.5 277 587.5 310 573.5C348 563 392.5 543.5 408 535C434 523.5 426 526.235 479 515.235C494 512.729 523 510.435 534.5 512.735C554.5 516.735 555.5 523.235 576 523.735C592 523.735 616 496.735 633 497.235C648.671 497.235 661.31 515.052 684.774 524.942C692.004 527.989 700.2 528.738 707.349 525.505C724.886 517.575 741.932 498.33 757.5 498.742C773.864 498.742 791.711 520.623 810.403 527.654C816.218 529.841 822.661 529.246 828.451 526.991C849.246 518.893 861.599 502.112 879.5 501.742C886.47 501.597 896.865 506.047 907.429 510.911C930.879 521.707 957.139 519.639 982.951 520.063C1020.91 520.686 1037.5 530.797 1056.5 537C1102.24 556.627 1116.5 570.704 1180.5 579.235C1257.5 589.5 1279 587 1440 588",
+    "M0 514C147.5 514.333 294.5 513.735 380.5 513.735C405.976 514.94 422.849 515.228 436.37 515.123C477.503 514.803 518.631 506.605 559.508 511.197C564.04 511.706 569.162 512.524 575 513.735C588 516.433 616 521.702 627.5 519.402C647.5 515.402 659 499.235 680.5 499.235C700.5 499.235 725 529.235 742 528.735C757.654 528.735 768.77 510.583 791.793 500.59C798.991 497.465 807.16 496.777 814.423 499.745C832.335 507.064 850.418 524.648 866 524.235C882.791 524.235 902.316 509.786 921.814 505.392C926.856 504.255 932.097 504.674 937.176 505.631C966.993 511.248 970.679 514.346 989.5 514.735C1006.3 515.083 1036.5 513.235 1055.5 513.235C1114.5 513.235 1090.5 513.235 1124 513.235C1177.5 513.235 1178.99 514.402 1241 514.402C1317.5 514.402 1274.5 512.568 1440 513.235",
+    "M0 438.5C150.5 438.5 261 438.318 323.5 456.5C351 464.5 387.517 484.001 423.5 494.5C447.371 501.465 472 503.735 487 507.735C503.786 512.212 504.5 516.808 523 518.735C547 521.235 564.814 501.235 584.5 501.235C604.5 501.235 626 529.069 643 528.569C658.676 528.569 672.076 511.63 695.751 501.972C703.017 499.008 711.231 498.208 718.298 501.617C735.448 509.889 751.454 529.98 767 529.569C783.364 529.569 801.211 507.687 819.903 500.657C825.718 498.469 832.141 499.104 837.992 501.194C859.178 508.764 873.089 523.365 891 523.735C907.8 524.083 923 504.235 963 506.735C1034.5 506.735 1047.5 492.68 1071 481.5C1122.5 457 1142.23 452.871 1185 446.5C1255.5 436 1294 439 1439.5 439",
+    "M0.5 364C145.288 362.349 195 361.5 265.5 378C322 391.223 399.182 457.5 411 467.5C424.176 478.649 456.916 491.677 496.259 502.699C498.746 503.396 501.16 504.304 503.511 505.374C517.104 511.558 541.149 520.911 551.5 521.236C571.5 521.236 590 498.736 611.5 498.736C631.5 498.736 652.5 529.236 669.5 528.736C685.171 528.736 697.81 510.924 721.274 501.036C728.505 497.988 736.716 497.231 743.812 500.579C761.362 508.857 778.421 529.148 794 528.736C810.375 528.736 829.35 508.68 848.364 502.179C854.243 500.169 860.624 500.802 866.535 502.718C886.961 509.338 898.141 519.866 916 520.236C932.8 520.583 934.5 510.236 967.5 501.736C1011.5 491 1007.5 493.5 1029.5 480C1069.5 453.5 1072 440.442 1128.5 403.5C1180.5 369.5 1275 360.374 1439 364",
+  ];
+  return pathData[index];
+}
+
+function getStrokeColor(index) {
+  const strokeColors = ["#FFB7C5", "#FFDDB7", "#B1C5FF", "#4FABFF", "#076EFF"];
+  return strokeColors[index];
+}
+
+function getBlurPaths() {
+  return [
+    { d: "M0 663C145.5 663...", stroke: "#FFB7C5" },
+    { d: "M0 587.5C147 587.5...", stroke: "#FFDDB7" },
+    {d: "M0 514C147.5 514.333...",stroke: "#076EFF" },
+    {d: "M0 438.5C150.5 438.5...",stroke: "#076EFF" },
+    {d: "M0.5 364C145.288...",stroke: "#076EFF" },
+    // Add more paths with blur here...
+  ];
+}

src/lib/utils.ts

@@ -4,3 +4,4 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+