From 31fe89eabbda04077a587b3c4e7c6c3f6ac83c4a Mon Sep 17 00:00:00 2001
From: Emre <emre@Emres-MacBook-Air.local>
Date: Sat, 11 Oct 2025 06:18:46 +0300
Subject: [PATCH] black theme complete

---
 src/components/layout/Footer.tsx              | 131 +++++-------------
 src/components/layout/Header.tsx              |  35 +++--
 src/components/layout/Layout.tsx              |  10 +-
 src/pages/about/AboutPage.tsx                 |   2 +-
 src/pages/about/components/MissionVision.tsx  |  16 +--
 src/pages/about/components/TrackRecord.tsx    |  14 +-
 src/pages/home/HomePage.tsx                   |  42 ++++--
 src/pages/home/components/CtaSection.tsx      |  43 ++++--
 src/pages/home/components/FooterSection.tsx   |  50 -------
 .../home/components/ScrollLockedSection.tsx   |  40 ++++--
 src/pages/technology/TechnologyPage.tsx       |   2 +-
 .../components/TechnologicalBenefits.tsx      |  20 +--
 .../components/TechnologyArchitecture.tsx     |  65 ++++++---
 .../technology/components/TechnologyStack.tsx |  16 +--
 src/pages/usecases/UseCasesPage.tsx           |   2 +-
 .../usecases/components/UseCasesGrid.tsx      |  81 +++++------
 16 files changed, 276 insertions(+), 293 deletions(-)
 delete mode 100644 src/pages/home/components/FooterSection.tsx

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index c603b8b..4739084 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,104 +1,49 @@
-import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 
-type FooterLink = {
-  label: string;
-  href: string;
-  target?: '_blank' | '_self';
-};
+const footerLinksColumn1 = [
+  { label: 'About', to: '/about' },
+  { label: 'Solutions', to: '/solutions' },
+  { label: 'Use Cases', to: '/usecases' },
+];
 
-type FooterColumn = {
-  title: string;
-  links: FooterLink[];
-};
-
-const footerColumns: FooterColumn[] = [
-  {
-    title: 'GeoMind',
-    links: [
-      { label: 'Technology', href: '/technology' },
-      { label: 'Use Cases', href: '/usecases' },
-    ],
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
-      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
-    ],
-  },
+const footerLinksColumn2 = [
+  { label: 'Manual', to: '/manual' },
+  { label: 'Support', to: '/support' },
+  { label: 'Privacy', to: '/privacy' },
 ];
 
 export const Footer = () => {
+  const year = new Date().getFullYear();
+
   return (
-    <footer className="border-t border-slate-200 bg-white">
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true, amount: 0.2 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
-      >
-        <div className="flex items-center gap-3">
-          <img
-            src="/images/geomind_logo.png"
-            alt="Geomind logo"
-            className="h-12 w-12 rounded-full object-contain shadow-subtle"
-          />
-          <div>
-            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
-              GEOMIND
-            </p>
-            <p className="mt-2 max-w-xs text-sm text-slate-500">
-              The datacenter standard for the next era of cloud and AI.
-            </p>
+    <footer className="bg-black px-6 pb-16 pt-12 sm:px-10 lg:px-20">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-white/10 pt-12 md:flex-row md:justify-between">
+        <div className="space-y-3">
+          <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
+            Geomind
+          </span>
+          <p className="max-w-sm text-sm font-semibold text-white">
+             The datacenter standard for the next era of cloud and AI.          </p>
+        </div>
+        <nav className="grid grid-cols-2 gap-x-24 gap-y-4 text-xs font-medium uppercase tracking-[0.3em] text-white md:ml-auto self-start">
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn1.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
+            ))}
           </div>
-        </div>
-        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-2 lg:ml-auto lg:max-w-md">
-          {footerColumns.map((column) => (
-            <div key={column.title}>
-              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
-                {column.title}
-              </p>
-              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
-                {column.links.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      target={link.target}
-                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
-                      className="transition-colors duration-300 hover:text-brand-600"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </motion.div>
-      <div className="bg-mist py-4">
-        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
-          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
-          <div className="flex gap-4">
-            <a
-              href="https://www.linkedin.com/company/tf9/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              LinkedIn
-            </a>
-            <a
-              href="https://github.com/threefoldtech"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              GitHub
-            </a>
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn2.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
+            ))}
           </div>
-        </div>
+        </nav>
+      </div>
+      <div className="mx-auto mt-12 flex w-full max-w-7xl items-center justify-between text-xs uppercase tracking-[0.3em] text-white">
+        <span>© {year} Geomind. All rights reserved.</span>
       </div>
     </footer>
   );
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 82bb612..4e1c9f4 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -10,16 +10,9 @@ const navItems = [
 ];
 
 export const Header = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
-
-  useEffect(() => {
-    const onScroll = () => setIsScrolled(window.scrollY > 12);
-    onScroll();
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
+  const isHome = location.pathname === '/';
 
   useEffect(() => {
     setIsMenuOpen(false);
@@ -32,7 +25,7 @@ export const Header = () => {
       transition={{ duration: 0.6, ease: 'easeOut' }}
       className={cn(
         'fixed inset-x-0 top-0 z-50 transition-all duration-500',
-        isScrolled ? 'bg-mist/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
+        isHome ? 'bg-transparent' : 'bg-black',
       )}
     >
       <div className="flex w-full items-center justify-between px-6 py-4 sm:px-10 lg:px-16">
@@ -63,7 +56,10 @@ export const Header = () => {
         </div>
         <a
           href="mailto:support@threefold.tech"
-          className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+          className={cn(
+            'rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',
+            'border border-brand-200 bg-white text-brand-700 shadow-subtle hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:ring-offset-white',
+          )}
         >
           Contact
         </a>
@@ -76,19 +72,22 @@ export const Header = () => {
           <span className="relative block h-5 w-6">
             <span
               className={cn(
-                'absolute left-0 top-1 h-0.5 w-full bg-ink transition-all duration-300',
+                'absolute left-0 top-1 h-0.5 w-full transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                 isMenuOpen && 'translate-y-2 rotate-45',
               )}
             />
             <span
               className={cn(
-                'absolute left-0 top-3 h-0.5 w-full bg-ink transition-all duration-300',
+                'absolute left-0 top-3 h-0.5 w-full transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                 isMenuOpen && 'opacity-0',
               )}
             />
             <span
               className={cn(
-                'absolute left-0 top-5 h-0.5 w-4 bg-ink transition-all duration-300',
+                'absolute left-0 top-5 h-0.5 w-4 transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                 isMenuOpen && 'left-0 top-3 w-full -rotate-45',
               )}
             />
@@ -102,7 +101,10 @@ export const Header = () => {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -16 }}
             transition={{ duration: 0.25, ease: 'easeOut' }}
-            className="border-t border-slate-100 bg-mist/95 px-6 py-4 shadow-lg md:hidden"
+            className={cn(
+              'px-6 py-4 shadow-lg md:hidden',
+              isHome ? 'border-t border-slate-100 bg-mist/95' : 'border-t border-white/10 bg-black',
+            )}
           >
             <div className="flex flex-col gap-4">
               {navItems.map(({ label, to }) => (
@@ -121,7 +123,10 @@ export const Header = () => {
               ))}
               <a
                 href="mailto:support@threefold.tech"
-                className="rounded-full border border-brand-200 bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle transition-colors duration-300 hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+                className={cn(
+                  'rounded-full px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',
+                  'border border-brand-200 bg-brand-600 hover:bg-brand-700 focus-visible:ring-offset-white',
+                )}
               >
                 Contact
               </a>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 887273b..3dc90d9 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -12,9 +12,17 @@ type LayoutProps = {
 export const Layout = ({ children }: LayoutProps) => {
   const { pathname } = useLocation();
   const isHome = pathname === '/';
+  const darkRoutes = ['/about', '/technology', '/usecases'];
+  const isDarkPage = darkRoutes.some((route) => pathname.startsWith(route));
 
   return (
-    <div className={cn('relative min-h-screen bg-mist text-ink', !isHome && 'overflow-hidden')}>
+    <div
+      className={cn(
+        'relative min-h-screen',
+        isDarkPage ? 'bg-black text-slate-100' : 'bg-mist text-ink',
+        !isHome && 'overflow-hidden',
+      )}
+    >
       <ScrollToTop />
       <Header />
       <main
diff --git a/src/pages/about/AboutPage.tsx b/src/pages/about/AboutPage.tsx
index 0363b07..6a02da2 100644
--- a/src/pages/about/AboutPage.tsx
+++ b/src/pages/about/AboutPage.tsx
@@ -4,7 +4,7 @@ import { TrackRecord } from './components/TrackRecord';
 
 export const AboutPage = () => {
   return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
       <AboutHero />
       <MissionVision />
       <TrackRecord />
diff --git a/src/pages/about/components/MissionVision.tsx b/src/pages/about/components/MissionVision.tsx
index 929d541..9a7ac34 100644
--- a/src/pages/about/components/MissionVision.tsx
+++ b/src/pages/about/components/MissionVision.tsx
@@ -1,23 +1,23 @@
 export const MissionVision = () => {
   return (
-    <section className="relative py-20 lg:py-28">
+    <section className="relative py-20 text-slate-100 lg:py-28">
       <div className="relative mx-auto max-w-6xl px-6 lg:px-12">
         <div className="mx-auto max-w-3xl space-y-8">
           <div className="flex items-center gap-4">
             <div className="h-px flex-1 bg-gradient-to-r from-brand-500/40 via-brand-300/40 to-transparent" />
-            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
               Technology with Purpose
             </span>
           </div>
           <div className="relative">
             <span
               aria-hidden="true"
-              className="float-left mr-3 -mt-3 text-6xl font-serif text-brand-500/25 leading-none"
+              className="float-left mr-3 -mt-3 text-6xl font-serif leading-none text-brand-400/40"
             >
               “
             </span>
-            <div className="space-y-6 text-base leading-8 text-slate-600 sm:text-lg sm:leading-8">
-              <p className="italic text-brand-700">
+            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
+              <p className="italic text-brand-200">
                 When we first started, our goal was simple, to build the foundation for the world’s digital future.
                 Over time, we realized that technology isn’t just about performance or scale, it’s about purpose.
                 It’s about people, communities, and the planet we share.
@@ -34,9 +34,9 @@ export const MissionVision = () => {
               </p>
             </div>
           </div>
-          <div className="border-t border-slate-200 pt-6 text-sm">
-            <p className="font-semibold text-brand-700">Kristof De Spiegeleer</p>
-            <p className="text-slate-500">Founder &amp; CEO, GeoMind</p>
+          <div className="border-t border-white/10 pt-6 text-sm">
+            <p className="font-semibold text-white">Kristof De Spiegeleer</p>
+            <p className="text-slate-400">Founder &amp; CEO, GeoMind</p>
           </div>
         </div>
       </div>
diff --git a/src/pages/about/components/TrackRecord.tsx b/src/pages/about/components/TrackRecord.tsx
index 11783ba..9947205 100644
--- a/src/pages/about/components/TrackRecord.tsx
+++ b/src/pages/about/components/TrackRecord.tsx
@@ -35,12 +35,12 @@ const records = [
 
 export const TrackRecord = () => {
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-3xl text-center">
-        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
           Our Track Record
         </h2>
-        <p className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
           Our team has been at the forefront of datacenter and cloud innovation for decades,
           building systems that were faster, safer, and more scalable than anything before.
         </p>
@@ -53,13 +53,13 @@ export const TrackRecord = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, amount: 0.25 }}
             transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
           >
-            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/15 font-semibold text-brand-200">
               {index + 1}
             </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
           </motion.div>
         ))}
       </div>
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
index 0899d2d..17aa18b 100644
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,7 +1,7 @@
 import { HeroSection } from './components/HeroSection';
 import { ScrollLockedSection } from './components/ScrollLockedSection';
 import { CtaSection } from './components/CtaSection';
-import { FooterSection } from './components/FooterSection';
+import { Footer } from '../../components/layout/Footer';
 
 const highlightTextClass = 'text-brand-500';
 
@@ -16,7 +16,8 @@ const sections = [
       </>
     ),
     description:
-      'Physical infrastructure meets profitable capacity. Deploy hardware, join the grid, earn from day one.',
+      'GeoMind enables everyone to profit from Cloud and AI infrastructure at any scale. Deploy hardware, sell your capacity to the marketplace, earn from day one.',
+    showButton: false,
   },
   {
     id: 'deploy-anywhere',
@@ -27,11 +28,13 @@ const sections = [
       </>
     ),
     description:
-      'Tier-H for homes and communities. Tier-S for enterprises and unused commercial space. Same economics, different scale.',
+      'Tier-H for homes and communities. Tier-S for enterprises and underutilized commercial space. Same economics, different scale.',
+    buttonText: 'Explore Hardware Tiers',
+    buttonLink: '/technology#hardware-tiers',
   },
   {
     id: 'autonomous-stack',
-    eyebrow: 'Autonomous Stack',
+    eyebrow: 'Plug-and-Play',
     title: (
       <>
         Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
@@ -39,50 +42,61 @@ const sections = [
     ),
     description:
       'Hardware ships with OS, Compute, Storage, Network, and GPU built-in. Fully autonomous operation eliminates vendor lock-in completely.',
+    buttonText: 'Explore Software Stack',
+    buttonLink: '/technology#software-stack',
   },
   {
     id: 'capacity-marketplace',
-    eyebrow: 'Marketplace',
+    eyebrow: 'Glocal Marketplace',
     title: (
       <>
         Local Hardware, <span className={highlightTextClass}>Global</span> Liquidity
       </>
     ),
-    description:
-      'The OS divides capacity into tradeable slices. Use what you need. Sell idle capacity automatically. Access scales instantly.',
+    description: (
+      <>
+        Zero-OS partitions capacity into tradeable slices called <strong>Cloud Units (CU)</strong>. Use what you need. Sell idle capacity automatically on the marketplace.
+      </>
+    ),
+    buttonText: 'Explore Marketplace',
+    buttonLink: '/technology#marketplace',
   },
   {
     id: 'dual-revenue',
-    eyebrow: 'Revenue Streams',
+    eyebrow: 'Profit',
     title: (
       <>
         <span className={highlightTextClass}>Earn</span> While You Operate
       </>
     ),
     description:
-      'Run your workloads during business hours. Rent excess capacity 24/7. Infrastructure becomes an income-generating asset, not a cost center.',
+      'Run your workloads during business hours. Rent excess capacity 24/7. Cloud capacity and infrastructure becomes an income-generating asset, not a cost center.',
+    showButton: false,
   },
   {
     id: 'economic-advantage',
-    eyebrow: 'Economics',
+    eyebrow: 'Competitive Advantage',
     title: (
       <>
         <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
       </>
     ),
     description:
-      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Math works from day one.',
+      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Your competitive advantage is built in.',
+    showButton: false,
   },
   {
     id: 'instant-demand',
-    eyebrow: 'Demand',
+    eyebrow: 'Offtakers',
     title: (
       <>
         <span className={highlightTextClass}>Built-In</span> Customer Base
       </>
     ),
     description:
-      'Applications already consume capacity from the grid. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
+      'Initial enterprise offtake partners are in place. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
+    buttonText: 'See Use Cases',
+    buttonLink: '/usecases',
   },
 ];
 
@@ -96,7 +110,7 @@ export const HomePage = () => {
         ))}
         <CtaSection />
       </div>
-      <FooterSection />
+      <Footer />
     </div>
   );
 };
diff --git a/src/pages/home/components/CtaSection.tsx b/src/pages/home/components/CtaSection.tsx
index e9b6963..4bfe9c5 100644
--- a/src/pages/home/components/CtaSection.tsx
+++ b/src/pages/home/components/CtaSection.tsx
@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 
 export const CtaSection = () => {
   return (
@@ -20,7 +21,7 @@ export const CtaSection = () => {
           transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
           className="text-4xl font-medium leading-tight text-white sm:text-5xl"
         >
-          Drop in your call to action headline and invite people forward.
+          Join the Infrastructure Revolution
         </motion.h3>
         <motion.p
           initial={{ opacity: 0, y: 16 }}
@@ -29,19 +30,35 @@ export const CtaSection = () => {
           transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
           className="max-w-2xl text-lg text-white/70"
         >
-          Use this block to reinforce the value proposition and give your visitor a clear next step.
-          Consider pairing it with a lead capture form or direct contact pathway later.
+          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
         </motion.p>
-        <motion.button
-          type="button"
-          initial={{ opacity: 0, y: 12 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: '-20%' }}
-          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
-          className="rounded-full border border-white/20 bg-white px-10 py-4 text-sm font-semibold uppercase tracking-[0.35em] text-black transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white/90 hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
-        >
-          Placeholder CTA
-        </motion.button>
+        <div className="flex items-center justify-center gap-4">
+          <motion.div
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-20%' }}
+            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          >
+            <Link
+              to="/about"
+              className="rounded-full border border-white/20 bg-white/80 px-10 py-4 text-sm font-bold uppercase tracking-[0.35em] text-black transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+            >
+              About us
+            </Link>
+          </motion.div>
+          <motion.a
+            href="https://calendly.com/sachao/30min"
+            target="_blank"
+            rel="noopener noreferrer"
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-20%' }}
+            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            className="rounded-full border border-white/20 bg-transparent px-10 py-4 text-sm font-bold uppercase tracking-[0.35em] text-white transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+          >
+            Book a Meeting
+          </motion.a>
+        </div>
       </div>
     </section>
   );
diff --git a/src/pages/home/components/FooterSection.tsx b/src/pages/home/components/FooterSection.tsx
deleted file mode 100644
index 69149aa..0000000
--- a/src/pages/home/components/FooterSection.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Link } from 'react-router-dom';
-
-const footerLinks = [
-  { label: 'About', to: '/about' },
-  { label: 'Technology', to: '/technology' },
-  { label: 'Use Cases', to: '/usecases' },
-];
-
-export const FooterSection = () => {
-  const year = new Date().getFullYear();
-
-  return (
-    <footer className="bg-black px-6 pb-16 pt-12 sm:px-10 lg:px-20">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-white/10 pt-12 md:flex-row md:items-center md:justify-between">
-        <div className="space-y-3">
-          <span className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
-            Geomind
-          </span>
-          <p className="max-w-sm text-sm text-white">
-            Anchor your footer copy here. Add a short positioning line or compliance text once ready.
-          </p>
-        </div>
-        <nav className="flex flex-col items-start gap-4 text-sm font-medium uppercase tracking-[0.3em] text-white md:flex-row md:items-center md:gap-8">
-          {footerLinks.map(({ label, to }) => (
-            <Link key={to} to={to} className="transition-colors duration-300 hover:text-white/80">
-              {label}
-            </Link>
-          ))}
-          <a
-            href="mailto:support@threefold.tech"
-            className="rounded-full border border-white/20 px-5 py-2 text-xs font-semibold tracking-[0.3em] text-white transition-colors duration-300 hover:border-white/50"
-          >
-            Contact
-          </a>
-        </nav>
-      </div>
-      <div className="mx-auto mt-12 flex w-full max-w-7xl items-center justify-between text-xs uppercase tracking-[0.3em] text-white">
-        <span>© {year} Geomind</span>
-        <div className="flex gap-4">
-          <a href="#" className="transition-colors duration-300 hover:text-white/80">
-            Privacy
-          </a>
-          <a href="#" className="transition-colors duration-300 hover:text-white/80">
-            Terms
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-};
diff --git a/src/pages/home/components/ScrollLockedSection.tsx b/src/pages/home/components/ScrollLockedSection.tsx
index d2594d8..7791c5f 100644
--- a/src/pages/home/components/ScrollLockedSection.tsx
+++ b/src/pages/home/components/ScrollLockedSection.tsx
@@ -1,10 +1,14 @@
 import { ReactNode, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 type ScrollLockedSectionProps = {
   id: string;
   eyebrow: string;
   title: ReactNode;
-  description: string;
+  description: ReactNode;
+  showButton?: boolean;
+  buttonText?: string;
+  buttonLink?: string;
 };
 
 export const ScrollLockedSection = ({
@@ -12,7 +16,11 @@ export const ScrollLockedSection = ({
   eyebrow,
   title,
   description,
+  showButton = true,
+  buttonText = 'Directory Info',
+  buttonLink,
 }: ScrollLockedSectionProps) => {
+  const navigate = useNavigate();
   const sectionRef = useRef<HTMLElement | null>(null);
 
   return (
@@ -36,14 +44,28 @@ export const ScrollLockedSection = ({
           <div className="flex flex-col items-center gap-6 py-10 sm:gap-8 sm:py-12 lg:gap-10">
             <div className="mx-auto w-full border border-white/10 bg-black shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] aspect-[28/8]" />
             {/* Button below animation card */}
-            <div className="flex justify-center">
-              <button
-                type="button"
-                className="rounded-full border border-brand-200 bg-white px-5 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
-              >
-                Directory Info
-              </button>
-            </div>
+            {showButton && buttonLink && (
+              <div className="flex justify-center">
+                {buttonLink.startsWith('http') ? (
+                  <a
+                    href={buttonLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+                  >
+                    {buttonText}
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => navigate(buttonLink)}
+                    className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+                  >
+                    {buttonText}
+                  </button>
+                )}
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/pages/technology/TechnologyPage.tsx b/src/pages/technology/TechnologyPage.tsx
index 70d16a4..5477c7a 100644
--- a/src/pages/technology/TechnologyPage.tsx
+++ b/src/pages/technology/TechnologyPage.tsx
@@ -5,7 +5,7 @@ import { TechnologicalBenefits } from './components/TechnologicalBenefits';
 
 export const TechnologyPage = () => {
   return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
       <TechnologyHero />
       <TechnologyStack />
       <TechnologyArchitecture />
diff --git a/src/pages/technology/components/TechnologicalBenefits.tsx b/src/pages/technology/components/TechnologicalBenefits.tsx
index 99bec4b..45564c6 100644
--- a/src/pages/technology/components/TechnologicalBenefits.tsx
+++ b/src/pages/technology/components/TechnologicalBenefits.tsx
@@ -31,15 +31,15 @@ const benefits = [
 
 export const TechnologicalBenefits = () => {
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-3xl text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
-          Technological Benefits
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+          Marketplace
         </p>
-        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
           Infrastructure that Pays for Itself
         </h2>
-        <p className="mt-5 text-base text-slate-600 sm:text-lg">
+        <p className="mt-5 text-base text-slate-300 sm:text-lg">
           GeoMind doesn't just deliver advanced datacenter capabilities, it turns your existing
           infrastructure into a strategic asset. Run your own workloads securely and efficiently,
           while selling unused capacity to the network. With up to 10x lower energy consumption for
@@ -55,13 +55,13 @@ export const TechnologicalBenefits = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, amount: 0.25 }}
             transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/80 p-6 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-6 shadow-none backdrop-blur"
           >
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-50">
-              <benefit.icon className="h-7 w-7 text-brand-600" />
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-500/15">
+              <benefit.icon className="h-7 w-7 text-brand-200" />
             </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{benefit.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{benefit.description}</p>
           </motion.div>
         ))}
       </div>
diff --git a/src/pages/technology/components/TechnologyArchitecture.tsx b/src/pages/technology/components/TechnologyArchitecture.tsx
index 50f1b56..056ddfa 100644
--- a/src/pages/technology/components/TechnologyArchitecture.tsx
+++ b/src/pages/technology/components/TechnologyArchitecture.tsx
@@ -8,7 +8,7 @@ type Bullet = {
 };
 
 type Tab = {
-  id: 'zero-os' | 'compute' | 'data' | 'network';
+  id: 'zero-os' | 'compute' | 'gpu' | 'data' | 'network';
   label: string;
   title: string;
   description: string;
@@ -120,6 +120,33 @@ const tabs: Tab[] = [
       },
     ],
   },
+  {
+    id: 'gpu',
+    label: 'GPU Fabric',
+    title: 'Distributed GPU Fabric',
+    description:
+      'A sovereign mesh of GPU capacity that turns idle silicon into revenue while powering global AI workloads and collective intelligence.',
+    cardText:
+      'Autonomous allocation keeps GPUs saturated with high-value workloads, creating a lucrative marketplace for operators and builders alike.',
+    bullets: [
+      {
+        heading: 'Global GPU Federation',
+        body: 'Aggregates GPUs across homes, enterprises, and datacenters into a single pool so large-scale training and inference run close to data without hyperscaler dependence.',
+      },
+      {
+        heading: 'Revenue Engine',
+        body: 'Dynamic marketplace routes AI and rendering jobs to available GPUs, maximizing utilization and delivering steady cash flow to operators.',
+      },
+      {
+        heading: 'Sovereign Collective Intelligence',
+        body: 'Supports collaborative model training where communities contribute data and capacity, unlocking responsible AI networks governed by their stakeholders.',
+      },
+      {
+        heading: 'Zero-OS Integration',
+        body: 'Zero-OS provisions GPU-optimized microVMs with secure drivers, ensuring deterministic performance and remote attestation of every workload.',
+      },
+    ],
+  },
 ];
 
 // Floating particle component
@@ -159,10 +186,10 @@ export const TechnologyArchitecture = () => {
   }, [activeTab]);
 
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-4xl text-center">
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Technology Architecture</h2>
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Autonomous Software Stack</h2>
+        <p className="mt-4 text-base text-slate-300 sm:text-lg">
           Seamlessly integrating compute, storage, and networking, GeoMind's architecture delivers secure,
           scalable, and efficient infrastructure for AI, cloud, and next-generation workloads from edge to
           planetary scale.
@@ -175,10 +202,10 @@ export const TechnologyArchitecture = () => {
               key={tab.id}
               type="button"
               onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 ${
+              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950 ${
                 activeTab === tab.id
                   ? 'bg-brand-600 text-white shadow-subtle hover:bg-brand-700'
-                  : 'border border-slate-200 bg-white text-slate-500 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 hover:shadow-md'
+                  : 'border border-white/10 bg-transparent text-slate-300 hover:border-brand-400/50 hover:bg-brand-500/10 hover:text-white hover:shadow-md'
               }`}
             >
               {tab.label}
@@ -196,18 +223,18 @@ export const TechnologyArchitecture = () => {
               className="grid gap-8 lg:grid-cols-[2fr,1fr]"
             >
               <div>
-                <h3 className="text-xl font-semibold text-brand-600">{current.title}</h3>
-                <p className="mt-2 text-base text-slate-600">{current.description}</p>
-                <ul className="mt-6 space-y-4 text-sm text-slate-600">
+                <h3 className="text-xl font-semibold text-brand-200">{current.title}</h3>
+                <p className="mt-2 text-base text-slate-300">{current.description}</p>
+                <ul className="mt-6 space-y-4 text-sm text-slate-300">
                   {current.bullets.map((bullet) => (
-                    <li key={bullet.heading} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
-                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
-                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
+                    <li key={bullet.heading} className="rounded-2xl border border-white/10 bg-black p-4">
+                      <p className="text-base font-semibold text-white">{bullet.heading}</p>
+                      <p className="mt-2 text-sm text-slate-300">{bullet.body}</p>
                       {bullet.subpoints && (
-                        <ul className="mt-3 space-y-2 text-sm text-slate-500">
+                        <ul className="mt-3 space-y-2 text-sm text-slate-400">
                           {bullet.subpoints.map((point) => (
                             <li key={point} className="flex gap-3">
-                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
+                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-400" />
                               <span>{point}</span>
                             </li>
                           ))}
@@ -217,13 +244,13 @@ export const TechnologyArchitecture = () => {
                   ))}
                 </ul>
               </div>
-              <div className="hidden h-full rounded-3xl bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
+              <div className="hidden h-full rounded-3xl border border-white/10 bg-black p-6 backdrop-blur lg:flex lg:flex-col lg:items-start lg:justify-between">
                 <motion.p
                   key={`label-${current.id}`}
                   initial={{ opacity: 0, y: -10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.3 }}
-                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500"
+                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-200"
                 >
                   {current.label}
                 </motion.p>
@@ -232,14 +259,14 @@ export const TechnologyArchitecture = () => {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   transition={{ duration: 0.5, delay: 0.2 }}
-                  className="mt-6 text-sm text-brand-700"
+                  className="mt-6 text-sm text-slate-200"
                 >
                   {current.cardText}
                 </motion.p>
-                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
+                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-950/60 via-indigo-950/50 to-purple-900/40">
                   {/* Animated gradient overlay */}
                   <motion.div
-                    className="absolute inset-0 bg-gradient-to-br from-blue-200/40 via-indigo-200/40 to-purple-200/40"
+                    className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-indigo-500/20 to-purple-500/20"
                     animate={{
                       opacity: [0.3, 0.6, 0.3],
                       scale: [1, 1.05, 1],
diff --git a/src/pages/technology/components/TechnologyStack.tsx b/src/pages/technology/components/TechnologyStack.tsx
index bc26da1..17a2f88 100644
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -17,16 +17,16 @@ const stackItems = [
 
 export const TechnologyStack = () => {
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-6xl px-6 sm:px-10 lg:px-16">
         <div className="mx-auto max-w-3xl text-center">
-          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
-            Technology Stack
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+            Hardware Tiers
           </p>
-          <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
             An Infrastructure Built for the AI Era
           </h2>
-          <p className="mt-5 text-base text-slate-600 sm:text-lg">
+          <p className="mt-5 text-base text-slate-300 sm:text-lg">
             Our unique technology stack delivers unmatched security, scalability, and flexibility,
             preparing you for the AI workforce of the future.
           </p>
@@ -39,14 +39,14 @@ export const TechnologyStack = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="overflow-hidden rounded-3xl"
+              className="overflow-hidden rounded-3xl bg-black shadow-none backdrop-blur"
             >
               <div className="h-56 overflow-hidden">
                 <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
               </div>
               <div className="p-6">
-                <h3 className="text-xl font-semibold text-ink">{item.title}</h3>
-                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
+                <h3 className="text-xl font-semibold text-white">{item.title}</h3>
+                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
               </div>
             </motion.div>
           ))}
diff --git a/src/pages/usecases/UseCasesPage.tsx b/src/pages/usecases/UseCasesPage.tsx
index 293aa4a..2ec5c37 100644
--- a/src/pages/usecases/UseCasesPage.tsx
+++ b/src/pages/usecases/UseCasesPage.tsx
@@ -3,7 +3,7 @@ import { UseCasesGrid } from './components/UseCasesGrid';
 
 export const UseCasesPage = () => {
   return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
       <UseCasesHero />
       <UseCasesGrid />
     </div>
diff --git a/src/pages/usecases/components/UseCasesGrid.tsx b/src/pages/usecases/components/UseCasesGrid.tsx
index 23095cf..38d8d24 100644
--- a/src/pages/usecases/components/UseCasesGrid.tsx
+++ b/src/pages/usecases/components/UseCasesGrid.tsx
@@ -41,49 +41,44 @@ const useCases = [
 
 export const UseCasesGrid = () => {
   return (
-    <section className="py-16 lg:py-24">
-      <div className="relative p-8 sm:rounded-3xl lg:p-16">
-        <div className="pointer-events-none absolute -bottom-20 -left-32 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
-        <div className="pointer-events-none absolute -top-24 right-12 h-48 w-48 rounded-full bg-brand-200 opacity-40 blur-3xl" />
-        <motion.div
-          initial={{ opacity: 0, y: 24 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.6, ease: 'easeOut' }}
-          className="relative z-10"
-        >
-          <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Use Cases</h2>
-          <p className="mt-5 max-w-4xl text-base text-slate-600 sm:text-lg">
-            GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
-            connecting Tier S hyperscale facilities with Tier H local nodes to create a unified,
-            sovereign infrastructure. Up to 60% more energy-efficient and built for resilience, privacy,
-            and quantum-safe security, it can be deployed in weeks rather than years. These capabilities
-            power the transformative use cases below, driving a more secure, efficient, and autonomous
-            digital future.
-          </p>
-          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {useCases.map((useCase, index) => (
-              <motion.article
-                key={useCase.title}
-                initial={{ opacity: 0, y: 24 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                viewport={{ once: true, amount: 0.25 }}
-                transition={{ duration: 0.5, delay: index * 0.05 }}
-                className="overflow-hidden rounded-3xl border border-slate-100 bg-white/90 shadow-subtle"
-              >
-                <div className="relative h-48 overflow-hidden">
-                  <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
-                  <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
-                  <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
-                    {useCase.title}
-                  </h3>
-                </div>
-                <p className="p-6 text-sm leading-6 text-slate-600">{useCase.description}</p>
-              </motion.article>
-            ))}
-          </div>
-        </motion.div>
-      </div>
+    <section className="py-16 text-slate-100 lg:py-24">
+      <motion.div
+        initial={{ opacity: 0, y: 24 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.3 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
+      >
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
+        <p className="mt-5 max-w-4xl text-base text-slate-300 sm:text-lg">
+          GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
+          connecting Tier S hyperscale facilities with Tier H local nodes to create a unified, sovereign
+          infrastructure. Up to 60% more energy-efficient and built for resilience, privacy, and
+          quantum-safe security, it can be deployed in weeks rather than years. These capabilities power
+          the transformative use cases below, driving a more secure, efficient, and autonomous digital
+          future.
+        </p>
+        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {useCases.map((useCase, index) => (
+            <motion.article
+              key={useCase.title}
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.25 }}
+              transition={{ duration: 0.5, delay: index * 0.05 }}
+              className="overflow-hidden rounded-3xl border border-white/10 bg-black shadow-none backdrop-blur"
+            >
+              <div className="relative h-48 overflow-hidden">
+                <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+                <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+                <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+                  {useCase.title}
+                </h3>
+              </div>
+              <p className="p-6 text-sm leading-6 text-slate-300">{useCase.description}</p>
+            </motion.article>
+          ))}
+        </div>
+      </motion.div>
     </section>
   );
 };