add About component with three-column feature grid, adjust heading and paragraph font sizes, and define color utility classes for ivory, green, and void

src/app/page.tsx

@@ -9,6 +9,7 @@ import { HomeVentures } from '@/components/home/HomeVentures'
 import { Quote } from '@/components/Quote'
 import { HomeStickyHeader } from '@/components/home/HomeStickyHeader'
 import { FadeInOnView } from '@/components/UI/FadeInOnView'
+import { About } from '@/components/home/About'
 
 export default function Home() {
   return (
@@ -19,6 +20,10 @@ export default function Home() {
           <Hero className="-mt-20" />
         </section>
 
+        <FadeInOnView>
+          <About />
+        </FadeInOnView>
+
         <FadeInOnView>
           <HomeAbout />
         </FadeInOnView>

src/components/UI/Texts.tsx

@@ -82,17 +82,17 @@ export const H1 = createTextComponent(
 )
 export const H2 = createTextComponent(
   'h2',
-  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight',
+  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
   { font: 'quicking' }
 )
 export const H3 = createTextComponent(
   'h3',
-  'text-4xl lg:text-5xl font-medium leading-tight tracking-tight',
+  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight',
   { font: 'quicking' }
 )
 export const H4 = createTextComponent(
   'h4',
-  'text-4xl lg:text-5xl font-medium leading-snug tracking-tight',
+  'text-2xl lg:text-3xl font-medium leading-snug tracking-tight',
   { font: 'quicking' }
 )
 
@@ -181,6 +181,6 @@ export const CT = createTextComponent(
 )
 export const CP = createTextComponent(
   'p',
-  'text-sm lg:text-base tracking-wide leading-normal font-light',
+  'text-base lg:text-lg tracking-normal leading-normal font-light',
   { font: 'sans' }
 )

src/components/home/About.tsx

@@ -0,0 +1,54 @@
+import { H2, H4, CP } from '@/components/UI/Texts'
+
+const features = [
+  {
+    name: 'Capital & Growth Support',
+    description:
+      'Access mission-aligned funding for ventures building decentralized, sovereign digital infrastructure, with capital models designed to help impactful projects scale.',
+    href: '#',
+  },
+  {
+    name: 'Legal & Operational Autonomy',
+    description:
+      'Operate through streamlined, innovation-friendly structures in our digital free zone, giving global teams transparent, borderless, and efficient ways to build and grow.',
+    href: '#',
+  },
+  {
+    name: 'Infrastructure Empowerment',
+    description:
+      'Build on sovereign cloud, decentralized compute, and agentic AI tools while collaborating with a network of ventures sharing infrastructure, and resources.',
+    href: '#',
+  },
+]
+
+export function About() {
+  return (
+    <div className="bg-transparent py-24 lg:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-4xl lg:mx-0">
+          <H2 className="text-void">
+            Enabling an Interconnected Ecosystem to Enhance Collective Intelligence Through Collaboration.
+          </H2>
+         
+        </div>
+        <div className="mx-auto mt-12 max-w-2xl  lg:max-w-none">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+            {features.map((feature) => (
+              <div key={feature.name} className="flex flex-col">
+                <div className="my-8 h-[2px] w-3/4 bg-gray-300 overflow-hidden">
+                  <div className="h-full w-full bg-green animate-draw-line" />
+                </div>
+                <dt className="font-semibold max-w-sm lg:max-w-xs">
+                  <H4 className="text-void">{feature.name}</H4>
+                </dt>
+                <dd className="mt-8 flex flex-auto flex-col max-w-sm lg:max-w-xs">
+                  <CP className="flex-auto text-void">{feature.description}</CP>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

src/styles/tailwind.css

@@ -94,6 +94,30 @@
     font-weight: 300;
   }
 
+  .text-ivory {
+    color: #FDF8F1;
+  }
+
+  .bg-ivory {
+    background-color: #FDF8F1;
+  }
+
+  .text-green {
+    color: #04B782;
+  }
+
+  .bg-green {
+    background-color: #04B782;
+  }
+
+  .text-void {
+    color: #1F1D1A;
+  }
+
+  .bg-void {
+    background-color: #1F1D1A;
+  }
+
   @keyframes draw-line {
     from {
       transform: scaleX(0);