From 093546d0177fa4c07b63c0a7492e637ec7dc3cd1 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 16 Oct 2025 17:39:56 +0200
Subject: [PATCH] refactor: move BackgroundIllustration to separate component
 and add new gradient styles

---
 src/app/(main)/about/page.tsx             |  2 +
 src/components/AboutSolutions.tsx         | 71 +++++++++++++++++++++++
 src/components/BackgroundIllustration.tsx | 70 ++++++++++++++++++++++
 src/components/Hero.tsx                   | 70 +---------------------
 src/styles/tailwind.css                   |  3 +
 5 files changed, 147 insertions(+), 69 deletions(-)
 create mode 100644 src/components/AboutSolutions.tsx
 create mode 100644 src/components/BackgroundIllustration.tsx

diff --git a/src/app/(main)/about/page.tsx b/src/app/(main)/about/page.tsx
index 03ead54..5cf9c5e 100644
--- a/src/app/(main)/about/page.tsx
+++ b/src/app/(main)/about/page.tsx
@@ -1,10 +1,12 @@
 import { AboutHero } from "@/components/AboutHero"
+import { AboutSolutions } from "@/components/AboutSolutions"
 
 
 export default function About() {
   return (
     <div>
       <AboutHero />
+      <AboutSolutions />
     </div>
   )
 }
diff --git a/src/components/AboutSolutions.tsx b/src/components/AboutSolutions.tsx
new file mode 100644
index 0000000..f2a83f8
--- /dev/null
+++ b/src/components/AboutSolutions.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+export function AboutSolutions() {
+  return (
+    <section
+      className="relative bg-[#121212] text-gray-200 overflow-hidden"
+      style={{
+        "--cell": "4rem",
+        height: "74vh",
+      } as React.CSSProperties}
+    >
+      {/* Square grid background */}
+      <div
+        className="absolute inset-0 z-0 grid"
+        style={{
+          gridTemplateColumns: "repeat(auto-fill, var(--cell))",
+          gridAutoRows: "var(--cell)",
+          justifyContent: "center", // ✅ centers grid horizontally
+        }}
+        aria-hidden="true"
+      >
+        {Array.from({ length: 2000 }).map((_, i) => (
+          <div
+            key={i}
+            className="border border-[#1f1f1f] hover:bg-[#00FFD1] transition-colors duration-300 cursor-pointer"
+          />
+        ))}
+      </div>
+
+      {/* Foreground content aligned to the same grid */}
+      <div
+        className="relative z-10 grid grid-cols-[repeat(auto-fill,var(--cell))] auto-rows-[var(--cell)] gap-0 pointer-events-none w-full h-full"
+        style={{
+          justifyContent: "center", // ✅ centers foreground grid too
+        }}
+      >
+        {/* 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">
+              Unlike traditional internet infrastructure, ThreeFold runs on a
+              global mesh of independent cloud providers, individuals and
+              organizations contributing compute, storage, and network power.
+            </p>
+          </div>
+        </div>
+
+        {/* Center card */}
+        <div className="col-start-9 row-start-3 col-span-6 row-span-5 pointer-events-auto">
+          <div className="bg-[#121212] w-full h-full flex items-center justify-center text-center shadow-lg">
+            <p className="text-2xl md:text-3xl font-medium text-white leading-tight">
+              A Decentralized Foundation for the Internet.
+            </p>
+          </div>
+        </div>
+
+        {/* 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
+              resilience, and protects privacy. ThreeFold is a neutral, scalable
+              foundation for the next-generation internet, where digital
+              sovereignty and collaboration come first.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/BackgroundIllustration.tsx b/src/components/BackgroundIllustration.tsx
new file mode 100644
index 0000000..54ebc44
--- /dev/null
+++ b/src/components/BackgroundIllustration.tsx
@@ -0,0 +1,70 @@
+import { useId } from 'react'
+
+export function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  let id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 7a5f5b6..972b830 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,6 +6,7 @@ import { AppDemo } from '@/components/AppDemo'
 import { AppStoreLink } from '@/components/AppStoreLink'
 import HeroHome from './HeroHome'
 import { Button } from '@/components/Button'
+import { BackgroundIllustration } from '@/components/BackgroundIllustration'
 import { Container } from '@/components/Container'
 import { PhoneFrame } from '@/components/PhoneFrame'
 import logoBbc from '@/images/logos/bbc.svg'
@@ -17,75 +18,6 @@ import logoHuffpost from '@/images/logos/huffpost.svg'
 import logoTechcrunch from '@/images/logos/techcrunch.svg'
 import logoWired from '@/images/logos/wired.svg'
 
-function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  let id = useId()
-
-  return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </div>
-  )
-}
-
 function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
     <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index fcbfcbc..df4cc0b 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -228,6 +228,9 @@
   .bg-stat-gradient {
     background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5));
   }
+    .bg-stat-gradient-full {
+    background: linear-gradient(to bottom, rgba(17, 17, 17, 1), rgba(50, 48, 49, 1));
+  }
 
   .btn-new-gradient {
     background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);