Merge pull request #19 from apsinghdev/fix/loading

Fix/loading

Author: apsinghdev

apps/web/package.json

@@ -23,7 +23,7 @@
     "@vercel/speed-insights": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.13",
+    "framer-motion": "^11.15.0",
     "lucide-react": "^0.456.0",
     "next": "15.0.2",
     "next-themes": "^0.4.3",

apps/web/src/app/(main)/(landing)/page.tsx

@@ -5,6 +5,7 @@ import { GlowingBtn } from "@/components/ui/GlowingBtn";
 import { useRouter } from "next/navigation";
 import { QueryCount } from "@/components/landing-page/QueryCount";
 import { useEffect } from "react";
+import { TypewriterEffect } from "@/components/ui/typewriter-effect";
 
 export default function Home() {
   const router = useRouter();
@@ -22,15 +23,26 @@ export default function Home() {
   };
 
   return (
-    <main className="relative w-full min-h-screen overflow-y-auto overflow-x-hidden scroll-smooth">
+    <main className="relative w-full min-h-screen overflow-y-auto overflow-x-hidden scroll-">
       <section className="min-h-screen w-full flex flex-col justify-center items-center text-center px-4 md:mb-12">
         <div className="space-y-8 max-w-2xl">
           <h1 className="text-5xl lg:text-7xl font-extrabold font-sans">
             Opensox
           </h1>
-          <p className="text-xs lg:text-base lg:font-medium font-medium text-ox-purple">
-            Find the perfect open-source project to contribute.
-          </p>
+          {/* <p className="text-xs lg:text-base lg:font-medium font-medium text-ox-purple"> */}
+          <TypewriterEffect
+            words={[
+              { text: "Find" },
+              { text: "the" },
+              { text: "perfect" },
+              { text: "open" },
+              { text: "source" },
+              { text: "projects" },
+              { text: "to" },
+              { text: "contribute." },
+            ]}
+          ></TypewriterEffect>
+          {/* </p> */}
           <GlowingBtn text="Get started" handleClick={getStartedHandler} />
         </div>
       </section>

apps/web/src/components/ui/typewriter-effect.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion, stagger, useAnimate, useInView } from "framer-motion";
+import { useEffect } from "react";
+
+export const TypewriterEffect = ({
+  words,
+  className,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        }
+      );
+    }
+  }, [isInView, animate]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn(
+                    `text-ox-purple opacity-0 hidden`,
+                    word.className
+                  )}
+                >
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div
+      className={cn(
+        "text-xs lg:text-base lg:font-medium font-medium text-ox-purple text-center",
+        className
+      )}
+    >
+      {renderWords()}
+      {/* <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
+        )}
+      ></motion.span> */}
+    </div>
+  );
+};
+
+export const TypewriterEffectSmooth = ({
+  words,
+  className,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn(`text-ox-purple`, word.className)}
+                >
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex space-x-1 my-6", className)}>
+      <motion.div
+        className="overflow-hidden pb-2"
+        whileInView={{
+          width: "fit-content",
+          opacity: 1,
+        }}
+        initial={{
+          width: "0%",
+          opacity: 0,
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}
+      >
+        <div
+          className="text-xs lg:text-base lg:font-medium font-medium text-ox-purple text-center"
+          style={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      {/* <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500"
+        )}
+      ></motion.span> */}
+    </div>
+  );
+};