replace HomeAbout with Ventures and Foundation components, add green button variant, create PS text component, and adjust About section padding

src/app/page.tsx

@@ -1,7 +1,6 @@
 import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
-import { HomeAbout } from '@/components/home/HomeAbout'
 import { Hero } from '@/components/home/Hero'
 import { HomePrinciples } from '@/components/home/HomePrinciples'
 import { HomeMilestones } from '@/components/home/HomeMilestones'
@@ -10,6 +9,8 @@ import { Quote } from '@/components/Quote'
 import { HomeStickyHeader } from '@/components/home/HomeStickyHeader'
 import { FadeInOnView } from '@/components/UI/FadeInOnView'
 import { About } from '@/components/home/About'
+import { Ventures } from '@/components/home/Ventures'
+import { Foundation } from '@/components/home/Foundation'
 
 export default function Home() {
   return (
@@ -20,14 +21,20 @@ export default function Home() {
           <Hero className="-mt-20" />
         </section>
 
-        <FadeInOnView>
+        <FadeInOnView delayMs={100}>
           <About />
         </FadeInOnView>
 
-        <FadeInOnView>
-          <HomeAbout />
+
+        <FadeInOnView delayMs={100}>
+          <Ventures />
         </FadeInOnView>
 
+        <FadeInOnView delayMs={100}>
+          <Foundation />
+        </FadeInOnView>
+
+
         <FadeInOnView delayMs={100}>
           <HomePrinciples />
         </FadeInOnView>

src/components/Button.tsx

@@ -14,7 +14,10 @@ const variantStyles = {
       'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
     black:
       'bg-black text-white hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-gray-100 focus-visible:outline-black',
-    blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    blue:
+      'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
+    green:
+      'bg-green text-void hover:bg-green/90 hover:text-void active:bg-green/80 active:text-void focus-visible:outline-green',
     white:
       'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
     radial:
@@ -25,6 +28,8 @@ const variantStyles = {
       'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
     white:
       'ring-white text-white hover:ring-slate-500 active:ring-slate-900 active:text-slate-400 focus-visible:outline-white',
+    green:
+      'ring-green text-void hover:ring-green/90 hover:text-void active:ring-green/80 active:text-void focus-visible:outline-green',
   },
 }
 

src/components/UI/Texts.tsx

@@ -102,6 +102,13 @@ export const P = createTextComponent(
   'text-base lg:text-xl leading-relaxed',
   { font: 'sans' }
 )
+
+export const PS = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed',
+  { font: 'sans' }
+)
+
 export const Small = createTextComponent(
   'small',
   'text-sm font-medium leading-normal tracking-normal'

src/components/home/About.tsx

@@ -23,7 +23,7 @@ const features = [
 
 export function About() {
   return (
-    <div className="bg-transparent py-24 lg:py-32">
+    <div className="bg-transparent py-24 lg:pt-32 lg:pb-12">
       <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">

src/components/home/Foundation.tsx

@@ -0,0 +1,75 @@
+import Image from 'next/image'
+import { H2, H4, CP } from '@/components/UI/Texts'
+
+const foundations = [
+  {
+    name: 'Planet First',
+    description:
+      'Each initiative supports regeneration and uses natural resources responsibly. Every venture should leave the planet better than it found it.',
+    iconSrc: '/assets/icons/foundation_icons/planet.svg',
+    iconAlt: 'Planet First icon',
+  },
+  {
+    name: 'People First',
+    description:
+      'Empowering people to own their digital lives through shared ownership, governance, and lifelong learning so everyone can participate.',
+    iconSrc: '/assets/icons/foundation_icons/people.svg',
+    iconAlt: 'People First icon',
+  },
+  {
+    name: 'Open & Authentic',
+    description:
+      'By designing tools that are open source and transparent, we help restore trust online and ensure people, information, and systems remain accountable.',
+    iconSrc: '/assets/icons/foundation_icons/open.svg',
+    iconAlt: 'Open & Authentic icon',
+  },
+  {
+    name: 'Simplicity',
+    description:
+      'Our ventures are designed to be modular and autonomous. Anyone should be able to connect, innovate, and contribute without friction.',
+    iconSrc: '/assets/icons/foundation_icons/simplicity.svg',
+    iconAlt: 'Simplicity icon',
+  },
+]
+
+export function Foundation() {
+  return (
+    <div className="bg-transparent py-16">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="col-span-2">
+            <H2>
+              The Foundation of Every Venture
+            </H2>
+          </div>
+
+          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
+            {foundations.map((foundation) => (
+              <div key={foundation.name}>
+                <dt className="text-base/7 font-semibold text-gray-900">
+                  <div className="mb-2 flex size-12 items-center justify-center rounded-lg bg-green/10">
+                    <Image
+                      src={foundation.iconSrc}
+                      alt={foundation.iconAlt}
+                      width={32}
+                      height={32}
+                      className={
+                        foundation.name === 'Planet First'
+                          ? 'h-10 w-10 object-contain'
+                          : 'h-12 w-12 object-contain'
+                      }
+                    />
+                  </div>
+                  <H4>{foundation.name}</H4>
+                </dt>
+                <dd className="mt-4 text-base/7 text-gray-600">
+                  <CP>{foundation.description}</CP>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/home/Ventures.tsx

@@ -0,0 +1,76 @@
+import Image from 'next/image'
+import { H2, PS } from '@/components/UI/Texts'
+import { Button } from '@/components/Button'
+
+const ventures = [
+  {
+    src: '/images/ventures/geomind.jpg',
+    alt: 'Geomind venture',
+    logoSrc: '/images/ventures/ventures_logo/geomind_logo.png',
+    logoAlt: 'Geomind logo',
+  },
+  {
+    src: '/images/ventures/threefold.jpg',
+    alt: 'ThreeFold venture',
+    logoSrc: '/images/ventures/ventures_logo/threefold_logo.png',
+    logoAlt: 'ThreeFold logo',
+  },
+  {
+    src: '/images/ventures/freezone.jpg',
+    alt: 'Freezone venture',
+    logoSrc: '/images/ventures/ventures_logo/freezone_logo.png',
+    logoAlt: 'Freezone logo',
+  },
+]
+
+export function Ventures() {
+  return (
+    <div className="bg-transparent py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto flex max-w-7xl flex-col gap-8 lg:mx-0 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
+          <div className="lg:pr-8">
+            <H2 className="text-void">
+              Meet the Ventures Shaping Our Future
+            </H2>
+          </div>
+          <div className="flex flex-col gap-6 lg:pl-4 lg:max-w-2xl">
+            <PS className="text-void">
+              All ventures within the OurWorld ecosystem are connected through our shared principles, values, and the aim to bring forward a new era of digital autonomy and self-empowerment.
+            </PS>
+            <Button variant="solid" color="green" className="w-fit mt-2">
+              Explore Ventures
+            </Button>
+          </div>
+        </div>
+        <div className="mx-auto mt-24 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">
+            {ventures.map((venture) => (
+              <div key={venture.src} className="flex flex-col">
+                <dd className="flex flex-auto flex-col">
+                  <div className="relative overflow-hidden rounded-lg">
+                    <Image
+                      src={venture.src}
+                      alt={venture.alt}
+                      width={600}
+                      height={400}
+                      className="h-auto w-full object-cover transition-transform duration-300 hover:scale-105"
+                    />
+                    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                      <Image
+                        src={venture.logoSrc}
+                        alt={venture.logoAlt}
+                        width={180}
+                        height={80}
+                        className="h-auto w-40 max-w-[60%] object-contain drop-shadow-md"
+                      />
+                    </div>
+                  </div>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}