add Team component to home page with fade-in animation

src/app/page.tsx

@@ -11,6 +11,7 @@ import { FadeInOnView } from '@/components/UI/FadeInOnView'
 import { About } from '@/components/home/About'
 import { Ventures } from '@/components/home/Ventures'
 import { Foundation } from '@/components/home/Foundation'
+import { Team } from '@/components/home/Team'
 
 export default function Home() {
   return (
@@ -34,6 +35,10 @@ export default function Home() {
           <Foundation />
         </FadeInOnView>
 
+        <FadeInOnView delayMs={100}>
+          <Team />
+        </FadeInOnView>
+
 
         <FadeInOnView delayMs={100}>
           <HomePrinciples />

src/components/home/Team.tsx

@@ -0,0 +1,78 @@
+import Image from 'next/image'
+import { H2, PS } from '@/components/UI/Texts'
+import { Button } from '@/components/Button'
+
+const members = [
+  {
+    src: '/images/team/kristof.jpg',
+    alt: 'Kristof',
+    name: 'Kristof De Spiegeleer',
+    role: 'Co-Founder, CEO',
+    bio:
+      'Kristof is a technologist, philosopher, and builder dedicated to creating systems that serve the common good, with a deep focus on open collaboration, self-sovereignty, and planetary resilience.',
+  },
+  {
+    src: '/images/team/adnan.jpg',
+    alt: 'Adnan',
+    name: 'Adnan Fatayerji',
+    role: 'Telecom Strategic Relations',
+    bio:
+      'Adnan is a systems thinker and venture architect focused on reimagining how digital systems serve people, bridging innovation and impact through scalable, grounded execution.',
+  },
+  {
+    src: '/images/team/chris.jpg',
+    alt: 'Chris',
+    name: 'Chris Camponovo',
+    role: 'Director, Co-Founder of Zanzibar Digital Free Zone',
+    bio:
+      'Christopher is a strategic advisor and legal thinker working at the intersection of law, governance, and international development, helping design resilient and future-aligned frameworks.',
+  },
+]
+
+export function Team() {
+  return (
+    <div className="bg-transparent py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto flex max-w-4xl flex-col items-center gap-6 text-center">
+          <H2 className="text-void">
+            Great Ventures Start with Supported People.
+          </H2>
+          <PS className="text-void max-w-3xl">
+            We invest in the human behind the ventures, because transformative companies grow from grounded, supported individuals.
+          </PS>
+          <Button variant="solid" color="green" className="w-fit mt-2">
+            Meet the Team
+          </Button>
+        </div>
+        <div className="mx-auto mt-16 max-w-4xl px-4 sm:px-6 lg:px-0">
+          <dl className="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
+            {members.map((member) => (
+              <div key={member.src} className="flex flex-col">
+                <dd className="flex flex-auto flex-col">
+                  <div className="group relative mx-auto max-w-xs overflow-hidden rounded-lg">
+                    <Image
+                      src={member.src}
+                      alt={member.alt}
+                      width={480}
+                      height={320}
+                      className="h-auto w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                    <div className="pointer-events-none absolute inset-0 flex flex-col justify-between bg-black/70 opacity-0 transition-opacity duration-200 group-hover:opacity-100 p-5 text-left text-white">
+                      <div>
+                        <p className="text-lg font-semibold leading-snug">{member.name}</p>
+                        <p className="text-sm mt-1 opacity-80">{member.role}</p>
+                      </div>
+                      <p className="mt-4 text-sm leading-relaxed">
+                        {member.bio}
+                      </p>
+                    </div>
+                  </div>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}