From 1792262f49ae77a6f5149736d7f37e9a515ffad2 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 16 Oct 2025 21:09:17 +0200
Subject: [PATCH] feat: add About page components with Journey and Team
 sections

---
 src/components/AboutJourney.tsx   | 38 +++++++++++++++++++++++++++++++
 src/components/AboutSolutions.tsx |  6 ++---
 src/components/AboutTeam.tsx      | 22 ++++++++++++++++++
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AboutJourney.tsx
 create mode 100644 src/components/AboutTeam.tsx

diff --git a/src/components/AboutJourney.tsx b/src/components/AboutJourney.tsx
new file mode 100644
index 0000000..c69fce1
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/AboutSolutions.tsx b/src/components/AboutSolutions.tsx
index 470c749..ae68e25 100644
--- a/src/components/AboutSolutions.tsx
+++ b/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,8 +75,8 @@ 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">
-              This physical decentralization removes bottlenecks, increases
+            <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
               sovereignty and collaboration come first.
diff --git a/src/components/AboutTeam.tsx b/src/components/AboutTeam.tsx
new file mode 100644
index 0000000..476a5ad
--- /dev/null
+++ b/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>
+  )
+}