fixes

src/components/layout/Footer.tsx

@@ -1,104 +1,49 @@
-import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 
-type FooterLink = {
-  label: string;
-  href: string;
-  target?: '_blank' | '_self';
-};
+const footerLinksColumn1 = [
+  { label: 'About', to: '/about' },
+  { label: 'Solutions', to: '/solutions' },
+  { label: 'Use Cases', to: '/usecases' },
+];
 
-type FooterColumn = {
-  title: string;
-  links: FooterLink[];
-};
-
-const footerColumns: FooterColumn[] = [
-  {
-    title: 'GeoMind',
-    links: [
-      { label: 'Technology', href: '/technology' },
-      { label: 'Use Cases', href: '/usecases' },
-    ],
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
-      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
-    ],
-  },
+const footerLinksColumn2 = [
+  { label: 'Manual', to: '/manual' },
+  { label: 'Support', to: '/support' },
+  { label: 'Privacy', to: '/privacy' },
 ];
 
 export const Footer = () => {
+  const year = new Date().getFullYear();
+
   return (
-    <footer className="border-t border-slate-200 bg-white">
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true, amount: 0.2 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
-      >
-        <div className="flex items-center gap-3">
-          <img
-            src="/images/geomind_logo.png"
-            alt="Geomind logo"
-            className="h-12 w-12 rounded-full object-contain shadow-subtle"
-          />
-          <div>
-            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
-              GEOMIND
-            </p>
-            <p className="mt-2 max-w-xs text-sm text-slate-500">
-              The datacenter standard for the next era of cloud and AI.
-            </p>
-          </div>
-        </div>
-        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-2 lg:ml-auto lg:max-w-md">
-          {footerColumns.map((column) => (
-            <div key={column.title}>
-              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
-                {column.title}
-              </p>
-              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
-                {column.links.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      target={link.target}
-                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
-                      className="transition-colors duration-300 hover:text-brand-600"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
+    <footer className="bg-black px-6 pb-16 pt-12 sm:px-10 lg:px-20">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-white/10 pt-12 md:flex-row md:justify-between">
+        <div className="space-y-3">
+          <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
+            Geomind
+          </span>
+          <p className="max-w-sm text-sm font-semibold text-white">
+             The datacenter standard for the next era of cloud and AI.          </p>
         </div>
+        <nav className="grid grid-cols-2 gap-x-24 gap-y-4 text-xs font-medium uppercase tracking-[0.3em] text-white md:ml-auto self-start">
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn1.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
             ))}
           </div>
-      </motion.div>
-      <div className="bg-mist py-4">
-        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
-          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
-          <div className="flex gap-4">
-            <a
-              href="https://www.linkedin.com/company/tf9/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              LinkedIn
-            </a>
-            <a
-              href="https://github.com/threefoldtech"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              GitHub
-            </a>
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn2.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
+            ))}
           </div>
+        </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();
-
-  useEffect(() => {
-    const onScroll = () => setIsScrolled(window.scrollY > 12);
-    onScroll();
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
+  const isHome = location.pathname === '/';
 
   useEffect(() => {
     setIsMenuOpen(false);
@@ -33,15 +25,16 @@ 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="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">
+        <div className="flex items-center gap-8">
           <Link to="/" className="flex items-center">
             <img
               src="/images/geomind_logo.png"
               alt="Geomind logo"
-            className="h-12 w-auto object-contain"
+              className="h-8 w-auto object-contain"
             />
           </Link>
           <nav className="hidden items-center gap-8 md:flex">
@@ -51,21 +44,25 @@ export const Header = () => {
                 to={to}
                 className={({ isActive }) =>
                   cn(
-                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
-                  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>
             ))}
+          </nav>
+        </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>
-        </nav>
         <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-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="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',
-                      isActive && 'text-brand-700',
+                      'text-base font-medium uppercase tracking-wide text-white transition-colors duration-300',
+                      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

@@ -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/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,23 +1,23 @@
 export const MissionVision = () => {
   return (
-    <section className="relative py-20 lg:py-28">
+    <section className="relative py-20 text-slate-100 lg:py-28">
       <div className="relative mx-auto max-w-6xl px-6 lg:px-12">
         <div className="mx-auto max-w-3xl space-y-8">
           <div className="flex items-center gap-4">
             <div className="h-px flex-1 bg-gradient-to-r from-brand-500/40 via-brand-300/40 to-transparent" />
-            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
               Technology with Purpose
             </span>
           </div>
           <div className="relative">
             <span
               aria-hidden="true"
-              className="float-left mr-3 -mt-3 text-6xl font-serif text-brand-500/25 leading-none"
+              className="float-left mr-3 -mt-3 text-6xl font-serif leading-none text-brand-400/40"
             >
               “
             </span>
-            <div className="space-y-6 text-base leading-8 text-slate-600 sm:text-lg sm:leading-8">
-              <p className="italic text-brand-700">
+            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
+              <p className="italic text-brand-200">
                 When we first started, our goal was simple, to build the foundation for the world’s digital future.
                 Over time, we realized that technology isn’t just about performance or scale, it’s about purpose.
                 It’s about people, communities, and the planet we share.
@@ -34,9 +34,9 @@ export const MissionVision = () => {
               </p>
             </div>
           </div>
-          <div className="border-t border-slate-200 pt-6 text-sm">
-            <p className="font-semibold text-brand-700">Kristof De Spiegeleer</p>
-            <p className="text-slate-500">Founder &amp; CEO, GeoMind</p>
+          <div className="border-t border-white/10 pt-6 text-sm">
+            <p className="font-semibold text-white">Kristof De Spiegeleer</p>
+            <p className="text-slate-400">Founder &amp; CEO, GeoMind</p>
           </div>
         </div>
       </div>

src/pages/about/components/TrackRecord.tsx

@@ -35,12 +35,12 @@ const records = [
 
 export const TrackRecord = () => {
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-3xl text-center">
-        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
           Our Track Record
         </h2>
-        <p className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
           Our team has been at the forefront of datacenter and cloud innovation for decades,
           building systems that were faster, safer, and more scalable than anything before.
         </p>
@@ -53,13 +53,13 @@ export const TrackRecord = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, amount: 0.25 }}
             transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
           >
-            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/15 font-semibold text-brand-200">
               {index + 1}
             </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
           </motion.div>
         ))}
       </div>

src/pages/home/HomePage.tsx

@@ -1,56 +1,108 @@
 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';
 
 const sections = [
   {
-    id: 'deploy',
-    eyebrow: 'Deploy',
-    title: 'Launch seamlessly across your environments.',
+    id: 'datacenter-economy',
+    eyebrow: 'Datacenter Economy',
+    title: (
+      <>
+        The Datacenter Economy,{' '}
+        <span className={highlightTextClass}>Decentralized</span>
+      </>
+    ),
     description:
-      'Use this space to outline the deployment story. Highlight speed, reliability, or any differentiators that matter for your product rollout.',
+      '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: 'plug_play',
-    eyebrow: 'Plug & Play',
-    title: 'Connect data sources without orchestration headaches.',
+    id: 'deploy-anywhere',
+    eyebrow: 'Deployment Tiers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Deploy</span> Anywhere, Any Scale
+      </>
+    ),
     description:
-      'Describe how integrations work and communicate the ease of getting started. Keep the copy short and scannable.',
+      '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: 'slice',
-    eyebrow: 'Slice',
-    title: 'Break complex geospatial datasets into digestible layers.',
+    id: 'autonomous-stack',
+    eyebrow: 'Plug-and-Play',
+    title: (
+      <>
+        Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
+      </>
+    ),
     description:
-      'Talk through the slicing concept in a sentence or two. This is placeholder text while the final story is drafted.',
+      '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: 'global',
-    eyebrow: 'Global',
-    title: 'Stay synchronized across every region you operate in.',
-    description:
-      'Explain the global coverage or synchronization narrative you want to share. Replace this block with final messaging later.',
+    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: 'profit',
+    id: 'dual-revenue',
     eyebrow: 'Profit',
-    title: 'Make the commercial case with defensible metrics.',
+    title: (
+      <>
+        <span className={highlightTextClass}>Earn</span> While You Operate
+      </>
+    ),
     description:
-      'Use these lines to tease the ROI conversation. Mention efficiency, cost savings, or other proof points once they are ready.',
+      '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: 'usecases',
-    eyebrow: 'Use Cases',
-    title: 'Show how teams activate the platform day-to-day.',
+    id: 'economic-advantage',
+    eyebrow: 'Competitive Advantage',
+    title: (
+      <>
+        <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
+      </>
+    ),
     description:
-      'Imagine this section as a carousel or story. For now, it is a placeholder where future customer narratives will land.',
+      '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="flex min-h-screen flex-col bg-mist text-ink">
+    <div className="flex min-h-screen flex-col bg-black text-white">
       <div className="flex flex-col">
         <HeroSection />
         {sections.map((section) => (
@@ -58,7 +110,7 @@ export const HomePage = () => {
         ))}
         <CtaSection />
       </div>
-      <FooterSection />
+      <Footer />
     </div>
   );
 };

src/pages/home/components/CtaSection.tsx

@@ -1,15 +1,16 @@
 import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
 
 export const CtaSection = () => {
   return (
-    <section className="snap-start bg-mist">
+    <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-ink/60"
+          className="text-xs font-semibold uppercase tracking-[0.4em] text-white"
         >
           Ready when you are
         </motion.span>
@@ -18,30 +19,46 @@ export const CtaSection = () => {
           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-ink sm:text-5xl"
+          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 }}
           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-ink/70"
+          className="max-w-2xl text-lg text-white/70"
         >
-          Use this block to reinforce the value proposition and give your visitor a clear next step.
-          Consider pairing it with a lead capture form or direct contact pathway later.
+          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
         </motion.p>
-        <motion.button
-          type="button"
+        <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 }}
-          className="rounded-full border border-ink/10 bg-ink px-10 py-4 text-sm font-semibold uppercase tracking-[0.35em] text-mist transition-transform duration-300 hover:-translate-y-0.5 hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink/40 focus-visible:ring-offset-2 focus-visible:ring-offset-mist"
           >
-          Placeholder CTA
-        </motion.button>
+            <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/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-mist 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-ink/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-ink/60">
-            Geomind
-          </span>
-          <p className="max-w-sm text-sm text-ink/60">
-            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-ink/50 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-ink/80">
-              {label}
-            </Link>
-          ))}
-          <a
-            href="mailto:support@threefold.tech"
-            className="rounded-full border border-ink/10 px-5 py-2 text-xs font-semibold tracking-[0.3em] text-ink transition-colors duration-300 hover:border-ink/40"
-          >
-            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-ink/40">
-        <span>© {year} Geomind</span>
-        <div className="flex gap-4">
-          <a href="#" className="transition-colors duration-300 hover:text-ink/70">
-            Privacy
-          </a>
-          <a href="#" className="transition-colors duration-300 hover:text-ink/70">
-            Terms
-          </a>
-        </div>
-      </div>
-    </footer>
-  );
-};

src/pages/home/components/HeroSection.tsx

@@ -3,29 +3,26 @@ 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-mist">
+      <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="absolute inset-0 bg-mist/70 backdrop-blur-[2px]" />
-
-        <div className="relative z-10 mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-20">
+        <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"
           >
-            <span className="text-xs font-semibold uppercase tracking-[0.4em] text-ink/70">
-              Geomind
-            </span>
-            <h1 className="text-4xl font-medium leading-tight text-ink sm:text-5xl md:text-6xl">
-              Geospatial intelligence for real-world momentum.
+           
+            <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-ink/80">
-              Introduce a compelling statement here that speaks to the transformation you deliver.
-              Keep it short, grounded, and ready for future storytelling.
+            <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>
 
@@ -33,11 +30,11 @@ export const HeroSection = () => {
             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-ink/60"
+            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-ink/40" />
+              <span className="h-px w-16 bg-white/60" />
               <span>Landing overview</span>
             </div>
           </motion.div>

src/pages/home/components/ScrollLockedSection.tsx

@@ -1,11 +1,14 @@
-import { motion, useScroll, useSpring, useTransform, useMotionValueEvent } from 'framer-motion';
-import { useRef, useState } from 'react';
+import { ReactNode, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 type ScrollLockedSectionProps = {
   id: string;
   eyebrow: string;
-  title: string;
-  description: string;
+  title: ReactNode;
+  description: ReactNode;
+  showButton?: boolean;
+  buttonText?: string;
+  buttonLink?: string;
 };
 
 export const ScrollLockedSection = ({
@@ -13,85 +16,56 @@ export const ScrollLockedSection = ({
   eyebrow,
   title,
   description,
+  showButton = true,
+  buttonText = 'Directory Info',
+  buttonLink,
 }: ScrollLockedSectionProps) => {
+  const navigate = useNavigate();
   const sectionRef = useRef<HTMLElement | null>(null);
-  const { scrollYProgress } = useScroll({
-    target: sectionRef,
-    offset: ['start start', 'end end'],
-  });
-  const smoothProgress = useSpring(scrollYProgress, { stiffness: 120, damping: 30, mass: 0.4 });
-  const cardFillWidth = useTransform(smoothProgress, [0, 1], ['12%', '100%']);
-  const cardFillOpacity = useTransform(smoothProgress, [0, 1], [0.25, 0.85]);
-  const barScale = useTransform(smoothProgress, [0, 1], [0.3, 1]);
-  const [percent, setPercent] = useState(0);
-
-  useMotionValueEvent(smoothProgress, 'change', (value) => {
-    setPercent(Math.round(value * 100));
-  });
 
   return (
-    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start">
+    <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="mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 py-24 sm:px-10 lg:px-20">
-          <div className="space-y-4">
-            <span className="text-xs font-semibold uppercase tracking-[0.45em] text-ink/50">
+        <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-4">
-              <h2 className="text-3xl font-medium leading-tight text-ink sm:text-4xl md:text-5xl">
+            <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}
-              </h2>
-              <p className="text-lg text-ink/75">{description}</p>
-            </div>
-          </div>
-
-          <div className="mt-16 flex flex-1 flex-col justify-end">
-            <div className="space-y-8 rounded-3xl border border-ink/10 bg-white/60 p-8 shadow-[0_22px_48px_-32px_rgba(0,0,0,0.28)] backdrop-blur">
-              <div className="space-y-4">
-                <div className="flex items-center justify-between">
-                  <p className="text-sm font-semibold uppercase tracking-[0.35em] text-ink/60">
-                    Animation Placeholder
               </p>
-                  <motion.span
-                    className="text-xs font-medium uppercase tracking-[0.35em] text-ink/50"
-                    style={{ opacity: smoothProgress }}
-                  >
-                    {percent}%
-                  </motion.span>
-                </div>
-                <div className="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
-                  <motion.div
-                    className="h-full origin-left rounded-full bg-ink"
-                    style={{ scaleX: smoothProgress }}
-                  />
+              <p className="text-base leading-relaxed text-white/70 sm:text-lg">{description}</p>
             </div>
           </div>
 
-              <div className="relative h-56 w-full overflow-hidden rounded-2xl border border-ink/10 bg-mist/70">
-                <div className="absolute inset-0 grid grid-cols-12 gap-2 px-8 py-10">
-                  {Array.from({ length: 12 }).map((_, index) => (
-                    <motion.span
-                      key={index}
-                      className="flex h-full w-full origin-bottom items-end justify-center rounded-full bg-ink/15"
-                      style={{ opacity: cardFillOpacity, scaleY: barScale }}
+          {/* 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"
                   >
-                      <span className="sr-only">Placeholder animation bar</span>
-                    </motion.span>
-                  ))}
-                </div>
-                <div className="absolute bottom-8 left-1/2 flex w-11/12 -translate-x-1/2 items-center gap-3">
-                  <div className="h-1 w-full rounded-full bg-ink/10">
-                    <motion.div
-                      className="h-full rounded-full bg-ink"
-                      style={{ width: cardFillWidth, opacity: cardFillOpacity }}
-                    />
-                  </div>
-                  <motion.span className="text-[10px] font-semibold uppercase tracking-[0.3em] text-ink/50">
-                    {percent}%
-                  </motion.span>
-                </div>
-              </div>
+                    {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">
-          Technological Benefits
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+          Marketplace
         </p>
-        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
           Infrastructure that Pays for Itself
         </h2>
-        <p className="mt-5 text-base text-slate-600 sm:text-lg">
+        <p className="mt-5 text-base text-slate-300 sm:text-lg">
           GeoMind doesn't just deliver advanced datacenter capabilities, it turns your existing
           infrastructure into a strategic asset. Run your own workloads securely and efficiently,
           while selling unused capacity to the network. With up to 10x lower energy consumption for
@@ -55,13 +55,13 @@ export const TechnologicalBenefits = () => {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, amount: 0.25 }}
             transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/80 p-6 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-6 shadow-none backdrop-blur"
           >
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-50">
-              <benefit.icon className="h-7 w-7 text-brand-600" />
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-500/15">
+              <benefit.icon className="h-7 w-7 text-brand-200" />
             </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{benefit.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{benefit.description}</p>
           </motion.div>
         ))}
       </div>

src/pages/technology/components/TechnologyArchitecture.tsx

@@ -8,7 +8,7 @@ type Bullet = {
 };
 
 type Tab = {
-  id: 'zero-os' | 'compute' | 'data' | 'network';
+  id: 'zero-os' | 'compute' | 'gpu' | 'data' | 'network';
   label: string;
   title: string;
   description: string;
@@ -120,6 +120,33 @@ const tabs: Tab[] = [
       },
     ],
   },
+  {
+    id: 'gpu',
+    label: 'GPU Fabric',
+    title: 'Distributed GPU Fabric',
+    description:
+      'A sovereign mesh of GPU capacity that turns idle silicon into revenue while powering global AI workloads and collective intelligence.',
+    cardText:
+      'Autonomous allocation keeps GPUs saturated with high-value workloads, creating a lucrative marketplace for operators and builders alike.',
+    bullets: [
+      {
+        heading: 'Global GPU Federation',
+        body: 'Aggregates GPUs across homes, enterprises, and datacenters into a single pool so large-scale training and inference run close to data without hyperscaler dependence.',
+      },
+      {
+        heading: 'Revenue Engine',
+        body: 'Dynamic marketplace routes AI and rendering jobs to available GPUs, maximizing utilization and delivering steady cash flow to operators.',
+      },
+      {
+        heading: 'Sovereign Collective Intelligence',
+        body: 'Supports collaborative model training where communities contribute data and capacity, unlocking responsible AI networks governed by their stakeholders.',
+      },
+      {
+        heading: 'Zero-OS Integration',
+        body: 'Zero-OS provisions GPU-optimized microVMs with secure drivers, ensuring deterministic performance and remote attestation of every workload.',
+      },
+    ],
+  },
 ];
 
 // Floating particle component
@@ -159,10 +186,10 @@ export const TechnologyArchitecture = () => {
   }, [activeTab]);
 
   return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-4xl text-center">
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Technology Architecture</h2>
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Autonomous Software Stack</h2>
+        <p className="mt-4 text-base text-slate-300 sm:text-lg">
           Seamlessly integrating compute, storage, and networking, GeoMind's architecture delivers secure,
           scalable, and efficient infrastructure for AI, cloud, and next-generation workloads from edge to
           planetary scale.
@@ -175,10 +202,10 @@ export const TechnologyArchitecture = () => {
               key={tab.id}
               type="button"
               onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 ${
+              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950 ${
                 activeTab === tab.id
                   ? 'bg-brand-600 text-white shadow-subtle hover:bg-brand-700'
-                  : 'border border-slate-200 bg-white text-slate-500 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 hover:shadow-md'
+                  : 'border border-white/10 bg-transparent text-slate-300 hover:border-brand-400/50 hover:bg-brand-500/10 hover:text-white hover:shadow-md'
               }`}
             >
               {tab.label}
@@ -196,18 +223,18 @@ export const TechnologyArchitecture = () => {
               className="grid gap-8 lg:grid-cols-[2fr,1fr]"
             >
               <div>
-                <h3 className="text-xl font-semibold text-brand-600">{current.title}</h3>
-                <p className="mt-2 text-base text-slate-600">{current.description}</p>
-                <ul className="mt-6 space-y-4 text-sm text-slate-600">
+                <h3 className="text-xl font-semibold text-brand-200">{current.title}</h3>
+                <p className="mt-2 text-base text-slate-300">{current.description}</p>
+                <ul className="mt-6 space-y-4 text-sm text-slate-300">
                   {current.bullets.map((bullet) => (
-                    <li key={bullet.heading} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
-                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
-                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
+                    <li key={bullet.heading} className="rounded-2xl border border-white/10 bg-black p-4">
+                      <p className="text-base font-semibold text-white">{bullet.heading}</p>
+                      <p className="mt-2 text-sm text-slate-300">{bullet.body}</p>
                       {bullet.subpoints && (
-                        <ul className="mt-3 space-y-2 text-sm text-slate-500">
+                        <ul className="mt-3 space-y-2 text-sm text-slate-400">
                           {bullet.subpoints.map((point) => (
                             <li key={point} className="flex gap-3">
-                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
+                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-400" />
                               <span>{point}</span>
                             </li>
                           ))}
@@ -217,13 +244,13 @@ export const TechnologyArchitecture = () => {
                   ))}
                 </ul>
               </div>
-              <div className="hidden h-full rounded-3xl bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
+              <div className="hidden h-full rounded-3xl border border-white/10 bg-black p-6 backdrop-blur lg:flex lg:flex-col lg:items-start lg:justify-between">
                 <motion.p
                   key={`label-${current.id}`}
                   initial={{ opacity: 0, y: -10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.3 }}
-                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500"
+                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-200"
                 >
                   {current.label}
                 </motion.p>
@@ -232,14 +259,14 @@ export const TechnologyArchitecture = () => {
                   initial={{ opacity: 0 }}
                   animate={{ opacity: 1 }}
                   transition={{ duration: 0.5, delay: 0.2 }}
-                  className="mt-6 text-sm text-brand-700"
+                  className="mt-6 text-sm text-slate-200"
                 >
                   {current.cardText}
                 </motion.p>
-                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
+                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-950/60 via-indigo-950/50 to-purple-900/40">
                   {/* Animated gradient overlay */}
                   <motion.div
-                    className="absolute inset-0 bg-gradient-to-br from-blue-200/40 via-indigo-200/40 to-purple-200/40"
+                    className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-indigo-500/20 to-purple-500/20"
                     animate={{
                       opacity: [0.3, 0.6, 0.3],
                       scale: [1, 1.05, 1],

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">
-            Technology Stack
+          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+            Hardware Tiers
           </p>
-          <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+          <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
             An Infrastructure Built for the AI Era
           </h2>
-          <p className="mt-5 text-base text-slate-600 sm:text-lg">
+          <p className="mt-5 text-base text-slate-300 sm:text-lg">
             Our unique technology stack delivers unmatched security, scalability, and flexibility,
             preparing you for the AI workforce of the future.
           </p>
@@ -39,14 +39,14 @@ export const TechnologyStack = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.3 }}
               transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="overflow-hidden rounded-3xl"
+              className="overflow-hidden rounded-3xl bg-black shadow-none backdrop-blur"
             >
               <div className="h-56 overflow-hidden">
                 <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
               </div>
               <div className="p-6">
-                <h3 className="text-xl font-semibold text-ink">{item.title}</h3>
-                <p className="mt-3 text-sm leading-6 text-slate-600">{item.description}</p>
+                <h3 className="text-xl font-semibold text-white">{item.title}</h3>
+                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
               </div>
             </motion.div>
           ))}

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