From 7ea9721e9085b48536dc829e77ae3cb4f53e1b76 Mon Sep 17 00:00:00 2001
From: Sakindu Ransindu <sakindu.ransindu@gmail.com>
Date: Fri, 15 Nov 2024 01:29:19 +0530
Subject: [PATCH] add about section

---
 src/app/page.tsx                           | 11 +++-
 src/components/ui/text-generate-effect.tsx | 62 ++++++++++++++++++++++
 2 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/text-generate-effect.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f96ec5e..d26c046 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -37,6 +37,7 @@ import { MultiStepLoader } from "@/components/ui/multi-step-loader";
 import { HeroHighlight, Highlight } from "@/components/ui/hero-highlight";
 import { Highlighter } from "@/components/blocks/hilight";
 import {  HomeIcon, ClockIcon , MegaphoneIcon , PhoneArrowUpRightIcon } from "@heroicons/react/24/solid";
+import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
 
 
 export const products = [
@@ -288,7 +289,8 @@ export default function Home() {
     { text: "Are You Ready?"},
     { text: "2025" },
   ];
-  
+
+  const content:string = "  \"Are You Ready?\" stands as a monumental initiative led by the Rotaract Club of the University of Moratuwa in partnership with the Career Guidance Unit. Our primary focus is 4th year undergraduates from our university, aiming to guide them towards a secure entry into the professional world. The scope of this endeavor knows no bounds, with over 100 companies aligning to provide opportunities for budding professionals. This project promises to be a valuable asset for those aspiring to forge strong connections with companies and their managers, even if the finish line of their degree is still on the horizon. In the initial stages, participants will gain the essential knowledge and training to confidently engage with industry experts."  
 
   return (
     <RootLayout>
@@ -297,6 +299,13 @@ export default function Home() {
           <MultiStepLoader loop={false} loading={isLoading} loadingStates={loaderSteps} duration={600} exitCallback={()=>setIsLoading(false)} />      
           
           <HeroParallax products={products}/>
+
+            <div className="w-1/2 px-5 py-5 pb-12 mx-auto">
+            <p className="text-2xl text-center font-bold dark:text-custom-color-800 text-custom-dark-color-800 p-2 py-3">
+              About Are You Ready?
+            </p>
+            <TextGenerateEffect words={content} />
+            </div>
        
        <div id="timeline">
           {
diff --git a/src/components/ui/text-generate-effect.tsx b/src/components/ui/text-generate-effect.tsx
new file mode 100644
index 0000000..c5575d8
--- /dev/null
+++ b/src/components/ui/text-generate-effect.tsx
@@ -0,0 +1,62 @@
+"use client";
+import { useEffect } from "react";
+import { motion, stagger, useAnimate } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export const TextGenerateEffect = ({
+  words,
+  className,
+  filter = true,
+  duration = 0.1,
+}: {
+  words: string;
+  className?: string;
+  filter?: boolean;
+  duration?: number;
+}) => {
+  const [scope, animate] = useAnimate();
+  let wordsArray = words.split(" ");
+  useEffect(() => {
+    animate(
+      "span",
+      {
+        opacity: 1,
+        filter: filter ? "blur(0px)" : "none",
+      },
+      {
+        duration: duration ? duration : 1,
+        delay: stagger(0.1),
+      }
+    );
+  }, [scope.current]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope}>
+        {wordsArray.map((word, idx) => {
+          return (
+            <motion.span
+              key={word + idx}
+              className="dark:text-white text-black opacity-0"
+              style={{
+                filter: filter ? "blur(10px)" : "none",
+              }}
+            >
+              {word}{" "}
+            </motion.span>
+          );
+        })}
+      </motion.div>
+    );
+  };
+
+  return (
+    <div>
+      <div className="mt-4">
+        <div className=" dark:text-custom-dark-color-400 text-custom-color-400 text-md leading-snug tracking-wide">
+          {renderWords()}
+        </div>
+      </div>
+    </div>
+  );
+};