feat: add About page components with Journey and Team sections

src/app/(main)/about/page.tsx

@@ -1,12 +1,15 @@
 import { AboutHero } from "@/components/AboutHero"
 import { AboutSolutions } from "@/components/AboutSolutions"
-
+import { AboutTeam } from "@/components/AboutTeam"
+import { AboutCTA } from "@/components/AboutCTA"
 
 export default function About() {
   return (
     <div>
       <AboutHero />
       <AboutSolutions />
+      <AboutTeam />
+      <AboutCTA />
     </div>
   )
 }

src/components/AboutCTA.tsx

@@ -0,0 +1,44 @@
+export  function AboutCTA() {
+  return (
+    <div className="bg-transparent">
+      <div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
+        <div className="relative isolate overflow-hidden bg-stat-gradient  py-16 text-center after:pointer-events-none after:absolute after:inset-0 sm:rounded-3xl sm:px-16">
+          <div className="mx-auto max-w-2xl lg:max-w-2xl">
+          <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            Be Part of the Change
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+            Contribute your resources, build decentralized applications, or simply learn more about how you can get involved
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <a
+              href="#"
+              className="rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15"
+            >
+              {' '}
+              Get started{' '}
+            </a>
+            <a href="#" className="text-sm/6 font-semibold text-white">
+              Learn more
+              <span aria-hidden="true">→</span>
+            </a>
+          </div>
+          <svg
+            viewBox="0 0 1024 1024"
+            aria-hidden="true"
+            className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
+          >
+            <circle r={512} cx={512} cy={512} fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fillOpacity="0.7" />
+            <defs>
+              <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+                <stop stopColor="#fff4f8" />
+                <stop offset={1} stopColor="#97979d" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  )
+}

src/components/AboutJourney.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image'
+
+const featuredPost = {
+  id: 1,
+  title: 'Our Journey',
+  href: '#',
+  description:
+    'For decades, we’ve tackled challenges in data storage, secure networking, and autonomous cloud systems. These experiences, combined with our vision for a better internet, have shaped ThreeFold and continue to guide our growth.',
+}
+
+export function AboutJourney() {
+  return (
+    <div className=" py-24 sm:py-32">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
+        <article className="mx-auto my-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
+          <h2
+            id="featured-post"
+            className="mt-4 text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl"
+          >
+            {featuredPost.title}
+          </h2>
+          <p className="mt-4 text-sm font-light text-pretty  lg:text-base text-gray-600">{featuredPost.description}</p>
+          <div className="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
+          </div>
+        </article>
+        <div className="relative lg:col-span-1">
+          <Image
+            src="/images/solution1.jpg"
+            alt="Our Solution"
+            width={1000}
+            height={1000}
+            className="w-full h-auto object-cover rounded-lg"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/AboutSolutions.tsx

@@ -55,7 +55,7 @@ export function AboutSolutions() {
         {/* Top-left card */}
         <div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
           <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
-            <p className="text-sm text-gray-600 leading-snug">
+            <p className="text-sm text-gray-600 leading-normal">
               Unlike traditional internet infrastructure, ThreeFold runs on a
               global mesh of independent cloud providers, individuals and
               organizations contributing compute, storage, and network power.
@@ -75,7 +75,7 @@ export function AboutSolutions() {
         {/* Bottom-right card */}
         <div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
           <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
-            <p className="text-sm text-gray-600 leading-snug">
+            <p className="text-sm text-gray-600 leading-normal">
               This physical decentralization removes bottlenecks, in creases
               resilience, and protects privacy. ThreeFold is a neutral, scalable
               foundation for the next-generation internet, where digital

src/components/AboutTeam.tsx

@@ -0,0 +1,22 @@
+
+import { Gallery } from './Gallery'
+
+export function AboutTeam() {
+  return (
+    <div className="relative my-16 mx-6">
+      <Gallery />
+      <div className="mx-auto grid max-w-7xl lg:grid-cols-2">
+        <div className="px-6 pt-16 pb-24 sm:pt-20 sm:pb-32 lg:col-start-2 lg:px-8 lg:pt-32">
+          <div className="mx-auto max-w-2xl lg:mr-0 lg:max-w-lg">
+            <h1 className="mt-2 text-3xl font-medium tracking-tight text-pretty text-white lg:text-4xl">
+              Founded by Internet Pioneers and Powered by the Community
+            </h1>
+            <p className="mt-6 text-sm font-light text-pretty text-gray-600 lg:text-base">
+               ThreeFold was started by pioneers from the early days of the internet, when it was a true peer-to-peer network. Today, it’s an open-source movement supported by a dedicated team and a vibrant community of contributors. Over 50 full-time developers and countless Hosters worldwide help bring our shared vision to life.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Gallery.tsx

@@ -0,0 +1,43 @@
+import Image from 'next/image'
+
+const images = [
+  '/images/people/abdulrahman_elawady.jpg',
+  '/images/people/adnan_fatayerji.jpg',
+  '/images/people/ahmed_hanafy.jpg',
+  '/images/people/ahmed_thabet.jpg',
+  '/images/people/alaa_mahmoud.jpg',
+  '/images/people/alexandre_hannelas.jpeg',
+  '/images/people/amira_abouhadid.jpg',
+  '/images/people/ashraf_fouda.jpeg',
+  '/images/people/atef_nazmy.jpg',
+  '/images/people/bernadette_amanda_caster.jpg',
+  '/images/people/cameron_ramraichan_labeyrie.jpg',
+  '/images/people/ehab_hassan.jpg',
+  '/images/people/eslam_nawara.jpg',
+  '/images/people/evon_yacoub.jpg',
+  '/images/people/florian_fournier.jpeg',
+  '/images/people/gregory_flipo.jpg',
+  '/images/people/jan_de_landtsheer.jpeg',
+  '/images/people/karoline_zizka.jpeg',
+  '/images/people/khaled.jpg',
+  '/images/people/kristof_de_spiegeleer.jpeg',
+].sort(() => Math.random() - 0.5) // Shuffle the array
+
+export function Gallery() {
+  return (
+    <div className="hidden lg:absolute lg:inset-y-0 lg:left-0 lg:block lg:w-1/2">
+      <div className="grid h-full grid-cols-5 grid-rows-4">
+        {images.map((src, index) => (
+          <Image
+            key={index}
+            src={src}
+            alt={`Team member ${index + 1}`}
+            width={129}
+            height={129}
+            className="object-cover"
+          />
+        ))}
+      </div>
+    </div>
+  )
+}