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>
+  );
+}