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

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 }