feat: add animated hero section with TypeAnimation component on About page

package.json

@@ -29,6 +29,7 @@
     "react": "^18.3.1",
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
+    "react-type-animation": "^3.2.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.1.7",
     "three": "^0.179.1",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-type-animation:
+        specifier: ^3.2.0
+        version: 3.2.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.6.0
         version: 2.6.0
@@ -2270,6 +2273,13 @@ packages:
     peerDependencies:
       react: ^18.0.0
 
+  react-type-animation@3.2.0:
+    resolution: {integrity: sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==}
+    peerDependencies:
+      prop-types: ^15.5.4
+      react: '>= 15.0.0'
+      react-dom: '>= 15.0.0'
+
   react-use-measure@2.1.7:
     resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==}
     peerDependencies:
@@ -4945,6 +4955,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.21.0
 
+  react-type-animation@3.2.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-use-measure@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1

src/app/(main)/about/page.tsx

@@ -1,7 +1,10 @@
+import { AboutHero } from "@/components/AboutHero"
+
+
 export default function About() {
   return (
     <div>
-      {/* About page content will go here */}
+      <AboutHero />
     </div>
   )
 }

src/components/AboutHero.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { TypeAnimation } from 'react-type-animation';
+
+const rotatingWords = [
+  "everyone",
+  1500,
+  "creators",
+  1500,
+  "dreamers",
+  1500,
+  "developers",
+  1500,
+  "communities",
+  1500,
+  "humanity",
+  1500,
+  "builders",
+  1500,
+  "thinkers",
+  1500,
+  "doers",
+  1500,
+  "pioneers",
+  1500,
+  "the next billion",
+  1500,
+  "All",
+  1500,
+];
+
+export function AboutHero() {
+  return (
+    <section className="flex flex-col items-start justify-center min-h-[70vh] px-6 md:px-16  text-white">
+      <h1 className="text-5xl lg:text-8xl font-medium leading-tight">
+        Building a Decentralized Internet for{" "}
+        <TypeAnimation
+          sequence={rotatingWords}
+          wrapper="span"
+          speed={50}
+          className="relative inline-block text-[#00FFD1]"
+          repeat={Infinity}
+        />        .
+      </h1>
+      <p className="max-w-3xl mt-6 text-lg md:text-2xl text-gray-800">
+        At <span className="text-[#00FFD1] font-medium">ThreeFold</span>, we are empowering
+        individuals and organizations to shape an open, resilient, and sustainable internet.
+      </p>
+    </section>
+  );
+}

src/components/HeroHome.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image'
 import { Button } from './Button'
 import Engage from '@/images/engage.svg'
 import { gradientText, gradientDark } from '@/components/Gradients'
+import { h1 as H1 } from '@/components/ui/Text'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -18,9 +19,9 @@ export default function HeroHome() {
         <div className="">
           <div className="mx-auto max-w-7xl px-8 lg:px-8">
             <div className="mx-auto max-w-3xl text-center">
-              <h1 className="text-3xl font-medium tracking-tight text-white lg:text-5xl">
+              <H1 className="text-white">
                 Empowering Purpose-Driven Organizations.
-              </h1>
+              </H1>
               <p className="mt-8 lg:lg:text-lg text-base text-gray-300">
                 Welcome to <span className={`font-semibold ${gradientText}`}>ThreeFold</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.
               </p>

src/components/ui/Text.tsx

@@ -0,0 +1,9 @@
+import { cn } from '@/lib/utils'
+import React from 'react'
+
+const h1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+  <h1 ref={ref} className={cn('text-4xl font-medium tracking-tight lg:text-5xl', className)} {...props} />
+))
+h1.displayName = 'H1'
+
+export { h1 }