fixes

src/components/layout/Footer.tsx

@@ -1,104 +1,49 @@
-import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 
-type FooterLink = {
+const footerLinksColumn1 = [
-  label: string;
+  { label: 'About', to: '/about' },
-  href: string;
+  { label: 'Solutions', to: '/solutions' },
-  target?: '_blank' | '_self';
+  { label: 'Use Cases', to: '/usecases' },
-};
+];
 
-type FooterColumn = {
+const footerLinksColumn2 = [
-  title: string;
+  { label: 'Manual', to: '/manual' },
-  links: FooterLink[];
+  { label: 'Support', to: '/support' },
-};
+  { label: 'Privacy', to: '/privacy' },
-
-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' },
-    ],
-  },
 ];
 
 export const Footer = () => {
+  const year = new Date().getFullYear();
+
   return (
-    <footer className="border-t border-slate-200 bg-white">
+    <footer className="bg-black px-6 pb-16 pt-12 sm:px-10 lg:px-20">
-      <motion.div
+      <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">
-        initial={{ opacity: 0, y: 16 }}
+        <div className="space-y-3">
-        whileInView={{ opacity: 1, y: 0 }}
+          <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
-        viewport={{ once: true, amount: 0.2 }}
+            Geomind
-        transition={{ duration: 0.6, ease: 'easeOut' }}
+          </span>
-        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"
+          <p className="max-w-sm text-sm font-semibold text-white">
-      >
+             The datacenter standard for the next era of cloud and AI.          </p>
-        <div className="flex items-center gap-3">
+        </div>
-          <img
+        <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">
-            src="/images/geomind_logo.png"
+          <div className="flex flex-col items-start gap-4">
-            alt="Geomind logo"
+            {footerLinksColumn1.map(({ label, to }) => (
-            className="h-12 w-12 rounded-full object-contain shadow-subtle"
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
-          />
+                {label}
-          <div>
+              </Link>
-            <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>
           </div>
-        </div>
+          <div className="flex flex-col items-start gap-4">
-        <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">
+            {footerLinksColumn2.map(({ label, to }) => (
-          {footerColumns.map((column) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
-            <div key={column.title}>
+                {label}
-              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
+              </Link>
-                {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>
-        </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>
   );

src/components/layout/Header.tsx

@@ -4,23 +4,15 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '../../lib/cn';
 
 const navItems = [
-  { label: 'Home', to: '/' },
   { label: 'About', to: '/about' },
-  { label: 'Technology', to: '/technology' },
+  { label: 'Solutions', to: '/technology' },
   { label: 'Use Cases', to: '/usecases' },
 ];
 
 export const Header = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const location = useLocation();
-
+  const isHome = location.pathname === '/';
-  useEffect(() => {
-    const onScroll = () => setIsScrolled(window.scrollY > 12);
-    onScroll();
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
 
   useEffect(() => {
     setIsMenuOpen(false);
@@ -33,39 +25,44 @@ 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-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
+        isHome ? 'bg-transparent' : 'bg-black',
       )}
     >
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
+      <div className="flex w-full items-center justify-between px-6 py-4 sm:px-10 lg:px-16">
-        <Link to="/" className="flex items-center">
+        <div className="flex items-center gap-8">
-          <img
+          <Link to="/" className="flex items-center">
-            src="/images/geomind_logo.png"
+            <img
-            alt="Geomind logo"
+              src="/images/geomind_logo.png"
-            className="h-12 w-auto object-contain"
+              alt="Geomind logo"
-          />
+              className="h-8 w-auto object-contain"
-        </Link>
+            />
-        <nav className="hidden items-center gap-8 md:flex">
+          </Link>
-          {navItems.map(({ label, to }) => (
+          <nav className="hidden items-center gap-8 md:flex">
-            <NavLink
+            {navItems.map(({ label, to }) => (
-              key={to}
+              <NavLink
-              to={to}
+                key={to}
-              className={({ isActive }) =>
+                to={to}
-                cn(
+                className={({ isActive }) =>
-                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
+                  cn(
-                  isActive && 'text-brand-600',
+                    'text-sm font-medium uppercase tracking-wide text-white transition-colors duration-300 hover:text-white/80',
-                )
+                    isActive && 'text-white',
-              }
+                  )
-            >
+                }
-              {label}
+              >
-            </NavLink>
+                {label}
-          ))}
+              </NavLink>
-          <a
+            ))}
-            href="mailto:support@threefold.tech"
+          </nav>
-            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"
+        </div>
-          >
+        <a
-            Contact
+          href="mailto:support@threefold.tech"
-          </a>
+          className={cn(
-        </nav>
+            '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>
         <button
           type="button"
           aria-label="Toggle navigation"
@@ -75,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',
               )}
             />
@@ -101,17 +101,20 @@ 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-white/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="mx-auto flex max-w-6xl flex-col gap-4">
+            <div className="flex flex-col gap-4">
               {navItems.map(({ label, to }) => (
                 <NavLink
                   key={to}
                   to={to}
                   className={({ isActive }) =>
                     cn(
-                      'text-base font-medium uppercase tracking-wide text-slate-600',
+                      'text-base font-medium uppercase tracking-wide text-white transition-colors duration-300',
-                      isActive && 'text-brand-700',
+                      isActive && 'text-white',
                     )
                   }
                 >
@@ -120,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>

src/components/layout/Layout.tsx

@@ -1,24 +1,41 @@
 import { type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { ScrollToTop } from './ScrollToTop';
+import { cn } from '../../lib/cn';
 
 type LayoutProps = {
   children: ReactNode;
 };
 
 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="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
+    <div
+      className={cn(
+        'relative min-h-screen',
+        isDarkPage ? 'bg-black text-slate-100' : 'bg-mist text-ink',
+        !isHome && 'overflow-hidden',
+      )}
+    >
       <ScrollToTop />
-      {/* Decorative gradient blurs */}
-      <div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
-      <div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
-      <div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
-      
       <Header />
-      <main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
+      <main
-      <Footer />
+        className={cn(
+          'relative z-10',
+          isHome
+            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
+            : 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32',
+        )}
+      >
+        {children}
+      </main>
+      {!isHome && <Footer />}
     </div>
   );
 };

src/index.css

@@ -5,8 +5,8 @@
 @tailwind utilities;
 
 :root {
-  color: #111827;
+  color: #000000;
-  background-color: #f6f8fb;
+  background-color: rgb(252 252 246);
 }
 
 html,

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 />

src/pages/about/components/AboutHero.tsx

@@ -16,7 +16,7 @@ export const AboutHero = () => {
         transition={{ duration: 0.6, ease: 'easeOut' }}
         className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
           About GeoMind
         </p>
         <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">

src/pages/about/components/MissionVision.tsx

@@ -1,58 +1,43 @@
 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="flex flex-col gap-12 rounded-[32px] bg-gradient-to-br from-white via-white to-brand-50/40 p-8 shadow-xl ring-1 ring-brand-100/40 sm:p-12 lg:grid lg:grid-cols-[minmax(0,0.9fr)_1fr] lg:items-center">
+        <div className="mx-auto max-w-3xl space-y-8">
-          <div className="order-1 lg:order-none">
+          <div className="flex items-center gap-4">
-            <figure className="relative mx-auto max-w-sm overflow-hidden rounded-[28px] bg-gradient-to-br from-emerald-100/50 via-white to-brand-100/40 p-6 shadow-lg ring-1 ring-brand-200/40">
+            <div className="h-px flex-1 bg-gradient-to-r from-brand-500/40 via-brand-300/40 to-transparent" />
-              <div className="absolute inset-0 rounded-[24px] bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.22),transparent_55%),radial-gradient(circle_at_80%_40%,rgba(59,130,246,0.18),transparent_60%)]" />
+            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
-              <img
+              Technology with Purpose
-                src="/images/ceo-kristof.png"
+            </span>
-                alt="Kristof De Spiegeleer, Founder and CEO of GeoMind"
-                className="relative z-10 mx-auto w-full max-w-xs object-cover"
-              />
-              <figcaption className="relative z-10 mt-6 text-center text-sm font-medium text-slate-500">
-                Kristof De Spiegeleer &mdash; Founder &amp; CEO
-              </figcaption>
-            </figure>
           </div>
-          <div className="relative flex flex-col gap-8 rounded-3xl bg-white/90 p-8 shadow-inner ring-1 ring-brand-100/50 backdrop-blur">
+          <div className="relative">
-            <div className="flex items-center gap-4">
+            <span
-              <div className="h-px flex-1 bg-gradient-to-r from-brand-500/50 via-brand-300/50 to-transparent" />
+              aria-hidden="true"
-              <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+              className="float-left mr-3 -mt-3 text-6xl font-serif leading-none text-brand-400/40"
-                Technology with Purpose
+            >
-              </span>
+              “
-            </div>
+            </span>
-            <div className="relative">
+            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
-              <span
+              <p className="italic text-brand-200">
-                aria-hidden="true"
+                When we first started, our goal was simple, to build the foundation for the world’s digital future.
-                className="float-left mr-3 -mt-3 text-6xl font-serif text-brand-500/25 leading-none"
+                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.
-                “
+              </p>
-              </span>
+              <p>
-              <div className="space-y-6 text-base leading-8 text-slate-600 sm:text-lg sm:leading-8">
+                Today, we’re creating the next generation of datacenters, designed not only for the AI era but for a
-                <p className="italic text-brand-700">
+                sustainable, inclusive future. Our mission is clear: to make digital decentralized infrastructure a
-                  When we first started, our goal was simple, to build the foundation for the world’s digital future.
+                universal right, accessible and responsible in equal measure.
-                  Over time, we realized that technology isn’t just about performance or scale, it’s about purpose.
+              </p>
-                  It’s about people, communities, and the planet we share.
+              <p>
-                </p>
+                We’ve spent decades pioneering technologies that power the internet. Now, we’re redefining what
-                <p>
+                datacenters stand for, combining efficiency, sovereignty, and sustainability to serve both humanity and
-                  Today, we’re creating the next generation of datacenters, designed not only for the AI era but for a
+                innovation.
-                  sustainable, inclusive future. Our mission is clear: to make digital decentralized infrastructure a
+              </p>
-                  universal right, accessible and responsible in equal measure.
-                </p>
-                <p>
-                  We’ve spent decades pioneering technologies that power the internet. Now, we’re redefining what
-                  datacenters stand for, combining efficiency, sovereignty, and sustainability to serve both humanity and
-                  innovation.
-                </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>
           </div>
+          <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>
     </section>

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>
+            <h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
           </motion.div>
         ))}
       </div>

src/pages/home/HomePage.tsx

@@ -1,17 +1,116 @@
-import { HomeHero } from './components/HomeHero';
+import { HeroSection } from './components/HeroSection';
-import { CoreTechnology } from './components/CoreTechnology';
+import { ScrollLockedSection } from './components/ScrollLockedSection';
-import { ImpactBanner } from './components/ImpactBanner';
+import { CtaSection } from './components/CtaSection';
-import { WhyGeomind } from './components/WhyGeomind';
+import { Footer } from '../../components/layout/Footer';
-import { FinalCallToAction } from './components/FinalCallToAction';
+
+const highlightTextClass = 'text-brand-500';
+
+const sections = [
+  {
+    id: 'datacenter-economy',
+    eyebrow: 'Datacenter Economy',
+    title: (
+      <>
+        The Datacenter Economy,{' '}
+        <span className={highlightTextClass}>Decentralized</span>
+      </>
+    ),
+    description:
+      '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',
+    eyebrow: 'Deployment Tiers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Deploy</span> Anywhere, Any Scale
+      </>
+    ),
+    description:
+      '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: 'Plug-and-Play',
+    title: (
+      <>
+        Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
+      </>
+    ),
+    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: 'Glocal Marketplace',
+    title: (
+      <>
+        Local Hardware, <span className={highlightTextClass}>Global</span> Liquidity
+      </>
+    ),
+    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: 'Profit',
+    title: (
+      <>
+        <span className={highlightTextClass}>Earn</span> While You Operate
+      </>
+    ),
+    description:
+      '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: 'Competitive Advantage',
+    title: (
+      <>
+        <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
+      </>
+    ),
+    description:
+      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Your competitive advantage is built in.',
+    showButton: false,
+  },
+  {
+    id: 'instant-demand',
+    eyebrow: 'Offtakers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Built-In</span> Customer Base
+      </>
+    ),
+    description:
+      'Initial enterprise offtake partners are in place. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
+    buttonText: 'See Use Cases',
+    buttonLink: '/usecases',
+  },
+];
 
 export const HomePage = () => {
   return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="flex min-h-screen flex-col bg-black text-white">
-      <HomeHero />
+      <div className="flex flex-col">
-      <CoreTechnology />
+        <HeroSection />
-      <ImpactBanner />
+        {sections.map((section) => (
-      <WhyGeomind />
+          <ScrollLockedSection key={section.id} {...section} />
-      <FinalCallToAction />
+        ))}
+        <CtaSection />
+      </div>
+      <Footer />
     </div>
   );
 };

src/pages/home/components/CoreTechnology.tsx

@@ -1,57 +0,0 @@
-import { motion } from 'framer-motion';
-
-const features = [
-  {
-    title: 'Self Healing & Prederministic Deployments',
-    description:
-      "GeoMind nodes detect and fix issues automatically with zero downtime. Every deployment is verifiable and runs exactly the same anywhere, fully autonomous, resilient, and predictable.",
-  },
-  {
-    title: 'Unbreakable Storage',
-    description:
-      'Data is encrypted and encoded using forward-error-correction codes, not replication. Even if parts of the network fail, data can always be rebuilt, making it unhackable, permanent, and loss-proof.',
-  },
-  {
-    title: 'Unbreakable Network',
-    description:
-      'Runs on top of the internet, finding the fastest path for data. With end-to-end quantum-safe encryption and self-optimizing routing, it creates a layer that cannot be hacked or shut down.',
-  },
-];
-
-export const CoreTechnology = () => {
-  return (
-    <section className="py-16 lg:py-24">
-      <div className="mx-auto max-w-4xl text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
-          Core Technology
-        </p>
-        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
-          The Foundation of a New Datacenter Standard
-        </h2>
-        <p className="mt-5 text-base text-slate-600 sm:text-lg">
-          GeoMind is built on a modular, self-healing datacenter architecture designed for unmatched
-          efficiency, reliability, and sovereignty. Every component works autonomously yet integrates
-          seamlessly into a global, planet-scale infrastructure.
-        </p>
-      </div>
-      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {features.map((feature, index) => (
-          <motion.div
-            key={feature.title}
-            initial={{ opacity: 0, y: 24 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.2 }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
-            className="flex flex-col rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur"
-          >
-            <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600">
-              {index + 1}
-            </span>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{feature.title}</h3>
-            <p className="mt-4 text-sm leading-6 text-slate-600">{feature.description}</p>
-          </motion.div>
-        ))}
-      </div>
-    </section>
-  );
-};

src/pages/home/components/CtaSection.tsx

@@ -0,0 +1,65 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+export const CtaSection = () => {
+  return (
+    <section className="snap-start bg-black">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
+        <motion.span
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="text-xs font-semibold uppercase tracking-[0.4em] text-white"
+        >
+          Ready when you are
+        </motion.span>
+        <motion.h3
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
+          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
+        >
+          Join the Infrastructure Revolution
+        </motion.h3>
+        <motion.p
+          initial={{ opacity: 0, y: 16 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
+          className="max-w-2xl text-lg text-white/70"
+        >
+          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
+        </motion.p>
+        <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>
+  );
+};

src/pages/home/components/FinalCallToAction.tsx

@@ -1,31 +0,0 @@
-import { motion } from 'framer-motion';
-import { PrimaryButton } from '../../../components/ui/PrimaryButton';
-
-export const FinalCallToAction = () => {
-  return (
-    <section className="py-20 lg:py-32">
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true, amount: 0.3 }}
-        transition={{ duration: 0.7, ease: 'easeOut' }}
-        className="mx-auto max-w-4xl text-center"
-      >
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl lg:text-5xl">
-          {' '}
-          <span className="bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700 bg-clip-text text-transparent">
-            The Datacenter Standard
-          </span>{' '}
-          <br />
-          for the next era of Cloud and AI.
-        </h2>
-        <p className="mt-6 text-lg leading-relaxed text-ink/70 sm:text-xl">
-          For years we've been pioneering infrastructure technologies that power the world's most demanding cloud workloads. Learn more about our team and expertise behind our mission.
-        </p>
-        <div className="mt-10 flex justify-center">
-          <PrimaryButton to="/about">About Us</PrimaryButton>
-        </div>
-      </motion.div>
-    </section>
-  );
-};

src/pages/home/components/HeroSection.tsx

@@ -0,0 +1,45 @@
+import { motion } from 'framer-motion';
+
+export const HeroSection = () => {
+  return (
+    <section className="relative snap-start">
+      <div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
+        <video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
+          <source src="/videos/hero.mp4" type="video/mp4" />
+        </video>
+
+        <div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut' }}
+            className="max-w-3xl space-y-6"
+          >
+           
+            <h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
+              The Planet's Sovereign Agentic Cloud
+            </h1>
+            <p className="max-w-xl text-lg text-white">
+              A new generation of decentralized cloud and AI infrastructure.
+              <br />
+              Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
+            className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
+          >
+            <span>Scroll to explore</span>
+            <div className="flex items-center gap-3">
+              <span className="h-px w-16 bg-white/60" />
+              <span>Landing overview</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};

src/pages/home/components/HomeHero.tsx

@@ -1,55 +0,0 @@
-import { motion } from 'framer-motion';
-import { PrimaryButton } from '../../../components/ui/PrimaryButton';
-
-export const HomeHero = () => {
-  return (
-    <section className="relative overflow-hidden rounded-3xl bg-ink text-white">
-      <video
-        className="absolute inset-0 h-full w-full object-cover opacity-60"
-        autoPlay
-        muted
-        loop
-        playsInline
-        poster="/images/hometech.jpg"
-      >
-        <source src="/videos/hero.mp4" type="video/mp4" />
-      </video>
-      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/70 via-[#1e1b4b]/60 to-[#312e81]/80" />
-      <div className="relative z-10 px-6 py-20 sm:px-10 lg:px-16">
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.2, duration: 0.6 }}
-          className="text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl"
-        >
-          The planet&apos;s sovereign agentic cloud
-        </motion.h1>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.3, duration: 0.6 }}
-          className="mt-6 max-w-3xl text-base text-white/70 sm:text-lg"
-        >
-          A new generation of decentralized cloud and AI infrastructure,
-          secure, scalable, efficient, and sovereign by design. Deploy your own
-          datacenter, scale globally, and turn infrastructure into profit.
-        </motion.p>
-        <motion.div
-          className="mt-10 flex flex-wrap gap-4"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.4, duration: 0.6 }}
-        >
-          <PrimaryButton to="/technology">Technologies</PrimaryButton>
-          <PrimaryButton
-            to="/usecases"
-            variant="ghost"
-            className="border border-white/40 text-white hover:bg-white hover:text-brand-600"
-          >
-            Use Cases
-          </PrimaryButton>
-        </motion.div>
-      </div>
-    </section>
-  );
-};

src/pages/home/components/ImpactBanner.tsx

@@ -1,120 +0,0 @@
-import { motion } from 'framer-motion';
-import { useEffect, useRef } from 'react';
-import { PrimaryButton } from '../../../components/ui/PrimaryButton';
-
-export const ImpactBanner = () => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Set canvas size
-    const resizeCanvas = () => {
-      canvas.width = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
-    };
-    resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
-
-    // Grid configuration
-    const gridSpacing = 40;
-    const dotRadius = 2;
-    const glowRadius = 8;
-    const dots: Array<{
-      x: number;
-      y: number;
-      baseX: number;
-      baseY: number;
-      phase: number;
-      speed: number;
-    }> = [];
-
-    // Create grid of dots
-    for (let x = 0; x < canvas.width; x += gridSpacing) {
-      for (let y = 0; y < canvas.height; y += gridSpacing) {
-        dots.push({
-          x,
-          y,
-          baseX: x,
-          baseY: y,
-          phase: Math.random() * Math.PI * 2,
-          speed: 0.5 + Math.random() * 0.5,
-        });
-      }
-    }
-
-    let animationFrameId: number;
-    let time = 0;
-
-    const animate = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      time += 0.01;
-
-      dots.forEach((dot) => {
-        // Subtle floating animation
-        const offsetX = Math.sin(time * dot.speed + dot.phase) * 3;
-        const offsetY = Math.cos(time * dot.speed * 0.8 + dot.phase) * 3;
-        dot.x = dot.baseX + offsetX;
-        dot.y = dot.baseY + offsetY;
-
-        // Pulsing opacity
-        const opacity = 0.15 + Math.sin(time * dot.speed + dot.phase) * 0.1;
-
-        // Draw glow
-        const gradient = ctx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, glowRadius);
-        gradient.addColorStop(0, `rgba(99, 102, 241, ${opacity * 0.3})`);
-        gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(dot.x - glowRadius, dot.y - glowRadius, glowRadius * 2, glowRadius * 2);
-
-        // Draw dot
-        ctx.beginPath();
-        ctx.arc(dot.x, dot.y, dotRadius, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(99, 102, 241, ${opacity + 0.2})`;
-        ctx.fill();
-      });
-
-      animationFrameId = requestAnimationFrame(animate);
-    };
-
-    animate();
-
-    return () => {
-      window.removeEventListener('resize', resizeCanvas);
-      cancelAnimationFrame(animationFrameId);
-    };
-  }, []);
-
-  return (
-    <section className="relative overflow-hidden py-16 text-center lg:py-20">
-      {/* Animated background canvas */}
-      <canvas
-        ref={canvasRef}
-        className="absolute inset-0 h-full w-full"
-        style={{ opacity: 0.6 }}
-      />
-
-      {/* Content */}
-      <motion.div
-        initial={{ opacity: 0, y: 28 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true, amount: 0.3 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 sm:px-10"
-      >
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Designed for Real-World Impact</h2>
-        <p className="mx-auto mt-5 max-w-3xl text-base text-slate-600 sm:text-lg">
-          GeoMind enables enterprises and infrastructure providers to run secure, profitable,
-          efficient, and sovereign clouds anywhere.
-        </p>
-        <div className="mt-8 flex justify-center">
-          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
-        </div>
-      </motion.div>
-    </section>
-  );
-};

src/pages/home/components/ScrollLockedSection.tsx

@@ -0,0 +1,74 @@
+import { ReactNode, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+type ScrollLockedSectionProps = {
+  id: string;
+  eyebrow: string;
+  title: ReactNode;
+  description: ReactNode;
+  showButton?: boolean;
+  buttonText?: string;
+  buttonLink?: string;
+};
+
+export const ScrollLockedSection = ({
+  id,
+  eyebrow,
+  title,
+  description,
+  showButton = true,
+  buttonText = 'Directory Info',
+  buttonLink,
+}: ScrollLockedSectionProps) => {
+  const navigate = useNavigate();
+  const sectionRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-black">
+      <div className="sticky top-0 flex h-screen flex-col">
+        <div className="flex h-full w-full flex-col px-6 sm:px-10 lg:px-16">
+          {/* Text Section - Takes ~20% of vertical space */}
+          <div className="flex-shrink-0 space-y-4 pt-16 sm:pt-20 lg:pt-24">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-white">
+              {eyebrow}
+            </span>
+            <div className="max-w-3xl space-y-3">
+              <p className="text-2xl font-semibold leading-tight text-white sm:text-3xl lg:text-[2.25rem] lg:leading-[1.2]">
+                {title}
+              </p>
+              <p className="text-base leading-relaxed text-white/70 sm:text-lg">{description}</p>
+            </div>
+          </div>
+
+          {/* Animation Section - Takes ~80% of vertical space */}
+          <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 */}
+            {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>
+    </section>
+  );
+};

src/pages/home/components/WhyGeomind.tsx

@@ -1,73 +0,0 @@
-import { motion } from 'framer-motion';
-
-const pillars = [
-  {
-    title: 'Sovereign by Design',
-    points: [
-      'Stay compliant with in-country data requirements.',
-      'Each node operates independently or as part of a global, trusted network.',
-      'Maintain total ownership of your infrastructure and data.',
-    ],
-  },
-  {
-    title: 'Efficient and Sustainable',
-    points: [
-      'Up to 10x less energy for specific workloads.',
-      'Removes layers of legacy software overhead.',
-      'Lower operational cost and carbon footprint.',
-    ],
-  },
-  {
-    title: 'Profitable Infrastructure',
-    points: [
-      'Turn existing datacenters, offices, or parking lots into productive assets.',
-      'Use capacity for your workloads and sell the excess to the network.',
-      'ROI can be 3x higher than traditional models.',
-    ],
-  },
-];
-
-export const WhyGeomind = () => {
-  return (
-    <section className="relative px-6 py-16 sm:px-10 lg:px-16 lg:py-24">
-      <div className="pointer-events-none absolute -left-32 top-0 h-56 w-56 rounded-full bg-brand-100 opacity-60 blur-3xl lg:-left-24" />
-      <div className="pointer-events-none absolute -right-24 bottom-0 h-64 w-64 rounded-full bg-brand-200 opacity-50 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 max-w-3xl"
-      >
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Why GeoMind</h2>
-        <p className="mt-5 text-base text-slate-600 sm:text-lg">
-          Traditional datacenters are increasingly limited by geopolitics, inefficiency, and energy
-          waste. GeoMind eliminates those constraints with a resilient, autonomous infrastructure that
-          delivers planetary scalability and sovereign performance anywhere in the world.
-        </p>
-      </motion.div>
-      <div className="relative z-10 mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {pillars.map((pillar, index) => (
-          <motion.div
-            key={pillar.title}
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.25 }}
-            transition={{ duration: 0.5, delay: index * 0.1 }}
-            className="rounded-3xl border border-slate-100 bg-white/90 p-6 shadow-subtle"
-          >
-            <h3 className="text-lg font-semibold text-ink">{pillar.title}</h3>
-            <ul className="mt-4 space-y-3 text-sm text-slate-600">
-              {pillar.points.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>{point}</span>
-                </li>
-              ))}
-            </ul>
-          </motion.div>
-        ))}
-      </div>
-    </section>
-  );
-};

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 />

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">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
-          Technological Benefits
+          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">
+            <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-600" />
+              <benefit.icon className="h-7 w-7 text-brand-200" />
             </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
+            <h3 className="mt-6 text-lg font-semibold text-white">{benefit.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{benefit.description}</p>
           </motion.div>
         ))}
       </div>

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>
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Autonomous Software Stack</h2>
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+        <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>
+                <h3 className="text-xl font-semibold text-brand-200">{current.title}</h3>
-                <p className="mt-2 text-base text-slate-600">{current.description}</p>
+                <p className="mt-2 text-base text-slate-300">{current.description}</p>
-                <ul className="mt-6 space-y-4 text-sm text-slate-600">
+                <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">
+                    <li key={bullet.heading} className="rounded-2xl border border-white/10 bg-black p-4">
-                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
+                      <p className="text-base font-semibold text-white">{bullet.heading}</p>
-                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</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],

src/pages/technology/components/TechnologyHero.tsx

@@ -17,7 +17,7 @@ export const TechnologyHero = () => {
         transition={{ duration: 0.6, ease: 'easeOut' }}
         className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
           Technology
         </p>
         <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">

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">
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
-            Technology Stack
+            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>
+                <h3 className="text-xl font-semibold text-white">{item.title}</h3>
-                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
+                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
               </div>
             </motion.div>
           ))}

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>

src/pages/usecases/components/UseCasesGrid.tsx

@@ -41,49 +41,44 @@ const useCases = [
 
 export const UseCasesGrid = () => {
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
-      <div className="relative p-8 sm:rounded-3xl lg:p-16">
+      <motion.div
-        <div className="pointer-events-none absolute -bottom-20 -left-32 h-72 w-72 rounded-full bg-brand-100 opacity-50 blur-3xl" />
+        initial={{ opacity: 0, y: 24 }}
-        <div className="pointer-events-none absolute -top-24 right-12 h-48 w-48 rounded-full bg-brand-200 opacity-40 blur-3xl" />
+        whileInView={{ opacity: 1, y: 0 }}
-        <motion.div
+        viewport={{ once: true, amount: 0.3 }}
-          initial={{ opacity: 0, y: 24 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
-          whileInView={{ opacity: 1, y: 0 }}
+      >
-          viewport={{ once: true, amount: 0.3 }}
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
-          transition={{ duration: 0.6, ease: 'easeOut' }}
+        <p className="mt-5 max-w-4xl text-base text-slate-300 sm:text-lg">
-          className="relative z-10"
+          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
-          <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Use Cases</h2>
+          infrastructure. Up to 60% more energy-efficient and built for resilience, privacy, and
-          <p className="mt-5 max-w-4xl text-base text-slate-600 sm:text-lg">
+          quantum-safe security, it can be deployed in weeks rather than years. These capabilities power
-            GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
+          the transformative use cases below, driving a more secure, efficient, and autonomous digital
-            connecting Tier S hyperscale facilities with Tier H local nodes to create a unified,
+          future.
-            sovereign infrastructure. Up to 60% more energy-efficient and built for resilience, privacy,
+        </p>
-            and quantum-safe security, it can be deployed in weeks rather than years. These capabilities
+        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            power the transformative use cases below, driving a more secure, efficient, and autonomous
+          {useCases.map((useCase, index) => (
-            digital future.
+            <motion.article
-          </p>
+              key={useCase.title}
-          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              initial={{ opacity: 0, y: 24 }}
-            {useCases.map((useCase, index) => (
+              whileInView={{ opacity: 1, y: 0 }}
-              <motion.article
+              viewport={{ once: true, amount: 0.25 }}
-                key={useCase.title}
+              transition={{ duration: 0.5, delay: index * 0.05 }}
-                initial={{ opacity: 0, y: 24 }}
+              className="overflow-hidden rounded-3xl border border-white/10 bg-black shadow-none backdrop-blur"
-                whileInView={{ opacity: 1, y: 0 }}
+            >
-                viewport={{ once: true, amount: 0.25 }}
+              <div className="relative h-48 overflow-hidden">
-                transition={{ duration: 0.5, delay: index * 0.05 }}
+                <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
-                className="overflow-hidden rounded-3xl border border-slate-100 bg-white/90 shadow-subtle"
+                <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">
-                <div className="relative h-48 overflow-hidden">
+                  {useCase.title}
-                  <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+                </h3>
-                  <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+              </div>
-                  <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+              <p className="p-6 text-sm leading-6 text-slate-300">{useCase.description}</p>
-                    {useCase.title}
+            </motion.article>
-                  </h3>
+          ))}
-                </div>
+        </div>
-                <p className="p-6 text-sm leading-6 text-slate-600">{useCase.description}</p>
+      </motion.div>
-              </motion.article>
-            ))}
-          </div>
-        </motion.div>
-      </div>
     </section>
   );
 };

src/pages/usecases/components/UseCasesHero.tsx

@@ -16,7 +16,7 @@ export const UseCasesHero = () => {
         transition={{ duration: 0.6, ease: 'easeOut' }}
         className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
           Real World Applications
         </p>
         <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">

tailwind.config.js

@@ -20,8 +20,8 @@ export default {
           800: '#343b8a',
           900: '#2d336c',
         },
-        ink: '#111827',
+        ink: '#000000',
-        mist: '#f6f8fb',
+        mist: '#fcfcf6',
       },
       boxShadow: {
         subtle: '0 20px 45px -25px rgba(18, 28, 132, 0.35)',