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

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>