black theme complete

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

@@ -10,16 +10,9 @@ const navItems = [
 ];
 
 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);
@@ -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>

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

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/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">
+            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
-              <p className="italic text-brand-700">
+              <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">
+          <div className="border-t border-white/10 pt-6 text-sm">
-            <p className="font-semibold text-brand-700">Kristof De Spiegeleer</p>
+            <p className="font-semibold text-white">Kristof De Spiegeleer</p>
-            <p className="text-slate-500">Founder &amp; CEO, GeoMind</p>
+            <p className="text-slate-400">Founder &amp; CEO, GeoMind</p>
           </div>
         </div>
       </div>

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,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:
+    description: (
-      'The OS divides capacity into tradeable slices. Use what you need. Sell idle capacity automatically. Access scales instantly.',
+      <>
+        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>
   );
 };

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.
+          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
-          Consider pairing it with a lead capture form or direct contact pathway later.
         </motion.p>
-        <motion.button
+        <div className="flex items-center justify-center gap-4">
-          type="button"
+          <motion.div
-          initial={{ opacity: 0, y: 12 }}
+            initial={{ opacity: 0, y: 12 }}
-          whileInView={{ opacity: 1, y: 0 }}
+            whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: '-20%' }}
+            viewport={{ once: true, margin: '-20%' }}
-          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            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"
+          >
-        >
+            <Link
-          Placeholder CTA
+              to="/about"
-        </motion.button>
+              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/FooterSection.tsx

@@ -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>
-  );
-};

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">
+            {showButton && buttonLink && (
-              <button
+              <div className="flex justify-center">
-                type="button"
+                {buttonLink.startsWith('http') ? (
-                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"
+                  <a
-              >
+                    href={buttonLink}
-                Directory Info
+                    target="_blank"
-              </button>
+                    rel="noopener noreferrer"
-            </div>
+                    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>

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/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>
   );
 };