From 6d37afa8f5ebee6d4edc30d2713f5cd2516bd1e9 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 17 Oct 2025 18:08:20 +0200
Subject: [PATCH] feat: add mobile solutions view and enhance about page layout

---
 src/app/(main)/about/page.tsx           |  4 ++++
 src/components/AboutCTA.tsx             |  2 +-
 src/components/AboutSolutionsMobile.tsx | 32 +++++++++++++++++++++++++
 src/components/AboutTeam.tsx            | 14 +++++++----
 src/components/Gallery.tsx              |  2 +-
 5 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 src/components/AboutSolutionsMobile.tsx

diff --git a/src/app/(main)/about/page.tsx b/src/app/(main)/about/page.tsx
index 350e4c3..d25ba40 100644
--- a/src/app/(main)/about/page.tsx
+++ b/src/app/(main)/about/page.tsx
@@ -2,11 +2,15 @@ import { AboutHero } from "@/components/AboutHero"
 import { AboutSolutions } from "@/components/AboutSolutions"
 import { AboutTeam } from "@/components/AboutTeam"
 import { AboutCTA } from "@/components/AboutCTA"
+import { AboutSolutionsMobile } from "@/components/AboutSolutionsMobile";
 
 export default function About() {
   return (
     <div>
       <AboutHero />
+      <div className="md:hidden">
+        <AboutSolutionsMobile />
+      </div>
       <AboutSolutions />
       <AboutTeam />
       <AboutCTA />
diff --git a/src/components/AboutCTA.tsx b/src/components/AboutCTA.tsx
index 215f740..2fcc096 100644
--- a/src/components/AboutCTA.tsx
+++ b/src/components/AboutCTA.tsx
@@ -1,7 +1,7 @@
 export  function AboutCTA() {
   return (
     <div className="bg-transparent">
-      <div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
+      <div className="mx-auto max-w-7xl lg:py-24 py-12 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">
diff --git a/src/components/AboutSolutionsMobile.tsx b/src/components/AboutSolutionsMobile.tsx
new file mode 100644
index 0000000..ec07f5b
--- /dev/null
+++ b/src/components/AboutSolutionsMobile.tsx
@@ -0,0 +1,32 @@
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export function AboutSolutionsMobile() {
+  return (
+    <div className="relative flex  w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-0 [background-size:40px_40px] select-none",
+          "[background-image:linear-gradient(to_right,#171717_1px,transparent_1px),linear-gradient(to_bottom,#171717_1px,transparent_1px)]",
+        )}
+      />
+
+      <div className="relative z-10 mx-auto w-full max-w-7xl p-6 pt-8 md:pt-0">
+
+        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-3xl font-medium leading-tight text-transparent lg:text-4xl animate-fade-in-delay-2">
+         A Decentralized Foundation for the Internet.
+        </h1>
+        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-200 animate-fade-in-delay-3">
+            Unlike traditional internet infrastructure, ThreeFold runs on a global mesh of independent cloud providers, individuals and organizations contributing compute, storage, and network power.
+        </p>
+        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-200 animate-fade-in-delay-3">
+          This physical decentralization removes bottlenecks, in creases
+              resilience, and protects privacy. ThreeFold is a neutral, scalable
+              foundation for the next-generation internet, where digital
+              pioneers can build and scale their solutions.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/AboutTeam.tsx b/src/components/AboutTeam.tsx
index b7c2886..8db65fb 100644
--- a/src/components/AboutTeam.tsx
+++ b/src/components/AboutTeam.tsx
@@ -1,19 +1,25 @@
 
 import { Gallery } from './Gallery'
+import { Button } from './Button'
 
 export function AboutTeam() {
   return (
-    <div className="relative my-12 lg:mt-12 lg:mb-24 mx-6">
+    <div className="relative lg:my-12 py-12 lg:mt-24 mt-12 lg:py-32 mx-6">
       <Gallery />
       <div className="mx-auto grid max-w-7xl lg:grid-cols-2">
-        <div className="pt-16 pb-24 lg:pt-24 lg:col-start-2">
+        <div className="lg:col-start-2">
           <div className="mx-auto max-w-2xl lg:max-w-lg">
-            <h1 className="mt-2 text-3xl font-medium tracking-tight text-pretty text-white lg:text-4xl">
+            <h1 className="text-3xl font-medium tracking-tight leading-tight lg:mt-0 mt-6 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">
+            <p className="mt-6 text-sm font-light text-pretty text-gray-700 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 className="mt-6 lg:mt-10">
+            <Button href="#" variant="glass" >
+              Our People
+            </Button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index 567bb7e..5563935 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -78,7 +78,7 @@ export function Gallery() {
               relative aspect-square
               w-[50px] h-[50px]
               lg:w-auto lg:h-auto
-              transition duration-20 ease-in-out
+              transition duration-50 ease-in-out
               ${activeIndex === index ? 'grayscale-0' : 'grayscale'}
             `}
           >