updates from sacha

Update UseCasesGrid component
improvements
2025-10-12 16:12:20 +03:00 · 2025-10-11 18:06:37 +03:00 · 2025-10-11 17:22:24 +03:00 · 2025-10-11 13:38:27 +03:00 · 2025-10-11 13:09:23 +03:00 · 2025-10-11 11:17:38 +03:00
48 changed files with 1797 additions and 886 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/iconG.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>geomind2</title>
+    <title>GeoMind</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
-  "name": "geomind2",
+  "name": "geomind",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "geomind2",
+      "name": "geomind",
      "version": "0.0.0",
      "dependencies": {
        "@emailjs/browser": "^4.4.1",
        "framer-motion": "^12.23.23",
        "lucide-react": "^0.545.0",
        "react": "^19.1.1",
@@ -327,6 +328,15 @@
        "node": ">=6.9.0"
      }
    },
    "node_modules/@emailjs/browser": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=14.0.0"
      }
    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.25.10",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "geomind2",
+  "name": "geomind",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
    "@emailjs/browser": "^4.4.1",
    "framer-motion": "^12.23.23",
    "lucide-react": "^0.545.0",
    "react": "^19.1.1",
--- a/public/iconG.png
+++ b/public/iconG.png
--- a/public/images/ceo-kristof.png
+++ b/public/images/ceo-kristof.png
--- a/public/images/cloud_sky.png
+++ b/public/images/cloud_sky.png
--- a/public/images/exited_company_logos/DataCenter.png
+++ b/public/images/exited_company_logos/DataCenter.png
--- a/public/images/exited_company_logos/Dedigate.png
+++ b/public/images/exited_company_logos/Dedigate.png
--- a/public/images/exited_company_logos/HOSTBASKET.png
+++ b/public/images/exited_company_logos/HOSTBASKET.png
--- a/public/images/exited_company_logos/Q-layer.png
+++ b/public/images/exited_company_logos/Q-layer.png
--- a/public/images/exited_company_logos/amplidata.png
+++ b/public/images/exited_company_logos/amplidata.png
--- a/public/images/motherboard.png
+++ b/public/images/motherboard.png
--- a/public/images/node.png
+++ b/public/images/node.png
--- a/public/videos/galaxy_vid.mp4
+++ b/public/videos/galaxy_vid.mp4
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -1 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,105 +1,81 @@
-import { motion } from 'framer-motion';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ContactForm from '../ui/ContactForm';
-type FooterLink = {
+const footerLinksColumn1 = [
-  label: string;
+  { label: 'About', to: '/about' },
-  href: string;
+  { label: 'Tech', to: '/technology' },
-  target?: '_blank' | '_self';
+  { label: 'Use Cases', to: '/usecases' },
-};
+];
-type FooterColumn = {
+const footerLinksColumn2 = [
-  title: string;
+  { label: 'Manual', href: 'https://manual.grid.tf' },
-  links: FooterLink[];
+  { 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 [isContactFormOpen, setIsContactFormOpen] = useState(false);
  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-m text-xs font-medium uppercase tracking-[0.3em] text-white">
-      >
+            The datacenter standard for 
-        <div className="flex items-center gap-3">
+            <br />
-          <img
+            the next era of cloud and AI.
-            src="/images/geomind_logo.png"
+          </p>
-            alt="Geomind logo"
+        </div>
-            className="h-12 w-12 rounded-full object-contain shadow-subtle"
+        <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">
-          <div>
+            {footerLinksColumn1.map(({ label, to }) => (
-            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
-              GEOMIND
+                {label}
-            </p>
+              </Link>
-            <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, href }) =>
-          {footerColumns.map((column) => (
+              href ? (
-            <div key={column.title}>
+                <a
-              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
+                  key={label}
-                {column.title}
+                  href={href}
-              </p>
+                  target="_blank"
-              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
+                  rel="noreferrer"
-                {column.links.map((link) => (
+                  className="text-white transition-colors duration-300"
-                  <li key={link.label}>
+                >
-                    <a
+                  {label}
-                      href={link.href}
+                </a>
-                      target={link.target}
+              ) : (
-                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
+                <Link key={label} to={to} className="text-white transition-colors duration-300">
-                      className="transition-colors duration-300 hover:text-brand-600"
+                  {label}
-                    >
+                </Link>
-                      {link.label}
+              ),
-                    </a>
+            )}
-                  </li>
+            <button
-                ))}
+              onClick={() => setIsContactFormOpen(true)}
-              </ul>
+              className="text-white transition-colors duration-300 hover:text-brand-400 uppercase"
            </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
+              Support
-            </a>
+            </button>
            <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}. <span className="text-brand-400">Built on Geomind.</span> All rights reserved.
        </span>
      </div>
      <ContactForm
        isOpen={isContactFormOpen}
        onClose={() => setIsContactFormOpen(false)}
        title="Get Support"
        formType="contact"
      />
    </footer>
  );
 };
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -2,25 +2,21 @@ import { useEffect, useState } from 'react';
 import { Link, NavLink, useLocation } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '../../lib/cn';
 import { buttonBaseClass } from '../../lib/buttonStyles';
 import ContactForm from '../ui/ContactForm';
 const navItems = [
  { label: 'Home', to: '/' },
  { label: 'About', to: '/about' },
-  { label: 'Technology', to: '/technology' },
+  { label: 'Tech', to: '/technology' },
  { label: 'Use Cases', to: '/usecases' },
 ];
 export const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [hoveredNav, setHoveredNav] = useState<string | null>(null);
  const [isContactFormOpen, setIsContactFormOpen] = useState(false);
  const location = useLocation();
-
+  const isHome = location.pathname === '/';
  useEffect(() => {
    const onScroll = () => setIsScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    setIsMenuOpen(false);
@@ -33,66 +29,89 @@ export const Header = () => {
      transition={{ duration: 0.6, ease: 'easeOut' }}
      className={cn(
        'fixed inset-x-0 top-0 z-50 transition-all duration-500',
-        isScrolled ? 'bg-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
+        isHome ? 'bg-transparent' : 'bg-black',
      )}
    >
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
+      <div className="flex w-full items-center justify-between px-6 py-4 sm:px-10 lg:px-16">
-        <Link to="/" className="flex items-center">
+        <Link
          to="/"
          className="flex items-center"
          onClick={() => {
            if (location.pathname === '/') {
              const mainElement = document.querySelector('main');
              if (mainElement instanceof HTMLElement && typeof mainElement.scrollTo === 'function') {
                mainElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
              } else {
                window.scrollTo({ top: 0, behavior: 'smooth' });
              }
            }
          }}
        >
          <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">
+        <div className="flex items-center gap-4 sm:gap-6">
-          {navItems.map(({ label, to }) => (
+          <nav className="hidden items-center gap-8 md:flex">
-            <NavLink
+            {navItems.map(({ label, to }) => (
-              key={to}
+              <NavLink
-              to={to}
+                key={to}
-              className={({ isActive }) =>
+                to={to}
-                cn(
+                onMouseEnter={() => setHoveredNav(to)}
-                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
+                onMouseLeave={() => setHoveredNav(null)}
-                  isActive && 'text-brand-600',
+                onFocus={() => setHoveredNav(to)}
-                )
+                onBlur={() => setHoveredNav(null)}
-              }
+                className={({ isActive }) => {
-            >
+                  const isHovered = hoveredNav === to;
-              {label}
+                  return cn(
-            </NavLink>
+                    'text-sm font-semibold uppercase tracking-wide transition-colors duration-300 text-white hover:!text-brand-500 focus-visible:!text-brand-500',
-          ))}
+                    (isActive || isHovered) && '!text-brand-500',
-          <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"
+              >
                {label}
              </NavLink>
            ))}
          </nav>
          <button
            onClick={() => setIsContactFormOpen(true)}
            className={cn(buttonBaseClass, 'hidden px-4 py-2 md:inline-flex')}
          >
-            Contact
+            GET IN TOUCH
-          </a>
+          </button>
-        </nav>
+          <button
-        <button
+            type="button"
-          type="button"
+            aria-label="Toggle navigation"
-          aria-label="Toggle navigation"
+            className="md:hidden"
-          className="md:hidden"
+            onClick={() => setIsMenuOpen((prev) => !prev)}
-          onClick={() => setIsMenuOpen((prev) => !prev)}
+          >
-        >
+            <span className="relative block h-5 w-6">
-          <span className="relative block h-5 w-6">
+              <span
-            <span
+                className={cn(
-              className={cn(
+                  'absolute left-0 top-1 h-0.5 w-full transition-all duration-300',
-                'absolute left-0 top-1 h-0.5 w-full bg-ink transition-all duration-300',
+                  'bg-white',
-                isMenuOpen && 'translate-y-2 rotate-45',
+                  isMenuOpen && 'translate-y-2 rotate-45',
-              )}
+                )}
-            />
+              />
-            <span
+              <span
-              className={cn(
+                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',
-                isMenuOpen && 'opacity-0',
+                  'bg-white',
-              )}
+                  isMenuOpen && 'opacity-0',
-            />
+                )}
-            <span
+              />
-              className={cn(
+              <span
-                'absolute left-0 top-5 h-0.5 w-4 bg-ink transition-all duration-300',
+                className={cn(
-                isMenuOpen && 'left-0 top-3 w-full -rotate-45',
+                  'absolute left-0 top-5 h-0.5 w-4 transition-all duration-300',
-              )}
+                  'bg-white',
-            />
+                  isMenuOpen && 'left-0 top-3 w-full -rotate-45',
-          </span>
+                )}
-        </button>
+              />
            </span>
          </button>
        </div>
      </div>
      <AnimatePresence>
        {isMenuOpen && (
@@ -101,33 +120,42 @@ export const Header = () => {
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -16 }}
            transition={{ duration: 0.25, ease: 'easeOut' }}
-            className="border-t border-slate-100 bg-white/95 px-6 py-4 shadow-lg md:hidden"
+            className={cn('px-6 py-4 shadow-lg border-t border-white/10 bg-black md:hidden')}
          >
-            <div className="mx-auto flex max-w-6xl flex-col gap-4">
+            <div className="flex flex-col gap-4">
              {navItems.map(({ label, to }) => (
                <NavLink
                  key={to}
                  to={to}
                  className={({ isActive }) =>
                    cn(
-                      'text-base font-medium uppercase tracking-wide text-slate-600',
+                      'text-base font-semibold uppercase tracking-wide text-white transition-colors duration-300',
-                      isActive && 'text-brand-700',
+                      isActive && 'text-brand-500',
                    )
                  }
                >
                  {label}
                </NavLink>
              ))}
-              <a
+              <button
-                href="mailto:support@threefold.tech"
+                onClick={() => {
-                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"
+                  setIsContactFormOpen(true);
                  setIsMenuOpen(false);
                }}
                className={cn(buttonBaseClass, 'flex w-full justify-center px-4 py-2 text-center')}
              >
-                Contact
+                GET IN TOUCH
-              </a>
+              </button>
            </div>
          </motion.nav>
        )}
      </AnimatePresence>
      <ContactForm
        isOpen={isContactFormOpen}
        onClose={() => setIsContactFormOpen(false)}
        title="Get in Touch"
        formType="contact"
      />
    </motion.header>
  );
 };
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,24 +1,46 @@
 import { type ReactNode } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { ScrollToTop } from './ScrollToTop';
 import { cn } from '../../lib/cn';
 type LayoutProps = {
  children: ReactNode;
 };
 export const Layout = ({ children }: LayoutProps) => {
-  return (
+  const { pathname } = useLocation();
-    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
+  const isHome = pathname === '/';
-      <ScrollToTop />
+  const darkRoutes = ['/about', '/technology', '/usecases'];
-      {/* Decorative gradient blurs */}
+  const isDarkPage = darkRoutes.some((route) => pathname.startsWith(route));
      <div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
      <div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
      <div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
  const isAbout = pathname.startsWith('/about');
  return (
    <div
      className={cn(
        'relative min-h-screen',
        isDarkPage ? 'bg-black text-slate-100' : 'bg-mist text-ink',
        !isHome && 'overflow-hidden',
      )}
    >
      <ScrollToTop />
      <Header />
-      <main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
+      <main
-      <Footer />
+        className={cn(
          'relative z-10',
          isHome
            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-proximity'
            : cn(
                'pb-24 pt-28 lg:pt-32',
                isAbout ? 'w-full px-0' : 'mx-auto max-w-6xl px-6 lg:px-8',
              ),
        )}
      >
        {children}
      </main>
      {!isHome && <Footer />}
    </div>
  );
 };
--- a/src/components/layout/ScrollToTop.tsx
+++ b/src/components/layout/ScrollToTop.tsx
@@ -7,6 +7,15 @@ export const ScrollToTop = () => {
  useEffect(() => {
    const animationFrame = window.requestAnimationFrame(() => {
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
      const mainElement = document.querySelector('main');
      if (mainElement instanceof HTMLElement) {
        if (typeof mainElement.scrollTo === 'function') {
          mainElement.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        } else {
          mainElement.scrollTop = 0;
          mainElement.scrollLeft = 0;
        }
      }
    });
    return () => window.cancelAnimationFrame(animationFrame);
--- a/src/components/ui/ContactForm.tsx
+++ b/src/components/ui/ContactForm.tsx
@@ -0,0 +1,217 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
 import { X, Send, CheckCircle } from 'lucide-react';
 import emailjs from '@emailjs/browser';
 interface ContactFormProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  formType?: 'investor' | 'partner' | 'contact' | 'deploy' | 'offtake';
 }
 export default function ContactForm({ isOpen, onClose, title = "Get in Touch", formType }: ContactFormProps) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    company: '',
    message: '',
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value,
    }));
  };
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      const templateParams = {
        from_name: formData.name,
        from_email: formData.email,
        company: formData.company,
        message: formData.message,
        to_email: 'emre@incubaid.com', // Recipient email
        form_type: formType || 'General Inquiry',
      };
      await emailjs.send(
        'service_03d0vf8', // EmailJS Service ID
        'template_6o6e8oe', // EmailJS Template ID
        templateParams,
        'bhkly3gzrO-SA9w7v' // EmailJS Public Key
      );
      setIsSubmitted(true);
      setTimeout(() => {
        setIsSubmitted(false);
        setFormData({ name: '', email: '', company: '', message: '' });
        onClose();
      }, 3000);
    } catch (error) {
      console.error('Email sending failed:', error);
      alert('Failed to send message. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };
  const getPlaceholderMessage = () => {
    switch (formType) {
      case 'investor':
        return "Tell us about your investment interests and how we can collaborate.";
      case 'partner':
        return "Tell us about your partnership interests and how we can work together.";
      case 'deploy':
        return "Tell us about your deployment capacity plans and requirements.";
      case 'offtake':
        return "Tell us about your capacity offtake requirements.";
      default:
        return "Let us know how we can help.";
    }
  };
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <motion.div
            className="bg-slate-950 rounded-2xl shadow-2xl w-full max-w-md relative overflow-hidden border border-white/10"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b border-white/10">
              <h3 className="text-xl font-bold text-white">
                {title}
              </h3>
              <button
                onClick={onClose}
                className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>
            {/* Form */}
            <div className="p-6">
              {isSubmitted ? (
                <motion.div
                  className="text-center py-8"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                >
                  <CheckCircle className="w-16 h-16 text-brand-400 mx-auto mb-4" />
                  <h4 className="text-lg font-semibold text-white mb-2">
                    Thank you!
                  </h4>
                  <p className="text-slate-300">
                    We&apos;ll get back to you soon.
                  </p>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-slate-300 mb-1">
                      Full Name *
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-3 border border-white/10 rounded-lg focus:ring-2 focus:ring-brand-400 focus:border-transparent bg-slate-900 text-white placeholder-slate-500"
                      placeholder="Your full name"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-1">
                      Email Address *
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      required
                      className="w-full px-4 py-3 border border-white/10 rounded-lg focus:ring-2 focus:ring-brand-400 focus:border-transparent bg-slate-900 text-white placeholder-slate-500"
                      placeholder="your.email@company.com"
                    />
                  </div>
                  <div>
                    <label htmlFor="company" className="block text-sm font-medium text-slate-300 mb-1">
                      Company
                    </label>
                    <input
                      type="text"
                      id="company"
                      name="company"
                      value={formData.company}
                      onChange={handleInputChange}
                      className="w-full px-4 py-3 border border-white/10 rounded-lg focus:ring-2 focus:ring-brand-400 focus:border-transparent bg-slate-900 text-white placeholder-slate-500"
                      placeholder="Your company name"
                    />
                  </div>
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium text-slate-300 mb-1">
                      Message
                    </label>
                    <textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleInputChange}
                      rows={4}
                      className="w-full px-4 py-3 border border-white/10 rounded-lg focus:ring-2 focus:ring-brand-400 focus:border-transparent bg-slate-900 text-white placeholder-slate-500 resize-none"
                      placeholder={getPlaceholderMessage()}
                    />
                  </div>
                  <button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full inline-flex items-center justify-center gap-2 rounded-full border border-brand-200/60 bg-white px-6 py-3 text-sm font-semibold text-black shadow-[0_18px_40px_-26px_rgba(15,23,42,0.55)] transition-all duration-300 hover:-translate-y-0.5 hover:border-black hover:bg-brand-600 hover:text-white hover:shadow-[0_26px_52px_-32px_rgba(90,107,241,0.55)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:bg-white disabled:hover:text-black"
                  >
                    {isSubmitting ? (
                      <>
                        <div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
                        <span>Sending...</span>
                      </>
                    ) : (
                      <>
                        <Send className="w-5 h-5" />
                        <span>Send Message</span>
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
 }
--- a/src/components/ui/PrimaryButton.tsx
+++ b/src/components/ui/PrimaryButton.tsx
@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { cn } from '../../lib/cn';
 import { buttonBaseClass } from '../../lib/buttonStyles';
 type PrimaryButtonProps = {
  to?: string;
@@ -11,16 +12,10 @@ type PrimaryButtonProps = {
  target?: string;
 };
-const styles: Record<
+const styles: Record<NonNullable<PrimaryButtonProps['variant']>, string> = {
-  NonNullable<PrimaryButtonProps['variant']>,
+  solid: buttonBaseClass,
-  string
+  outline: buttonBaseClass,
-> = {
+  ghost: buttonBaseClass,
  solid:
    'bg-brand-600 text-white shadow-subtle hover:bg-brand-500 hover:text-white hover:shadow-lg',
  outline:
    'border border-brand-200 bg-white text-brand-700 hover:border-brand-400 hover:bg-white/95 hover:text-brand-700 hover:shadow-md',
  ghost:
    'bg-transparent text-brand-600 hover:bg-brand-50/80 hover:text-brand-700',
 };
 export const PrimaryButton = ({
@@ -31,8 +26,7 @@ export const PrimaryButton = ({
  className,
  target,
 }: PrimaryButtonProps) => {
-  const baseClasses =
+  const baseClasses = buttonBaseClass;
    'inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2';
  if (to) {
    return (
--- a/src/index.css
+++ b/src/index.css
@@ -5,8 +5,8 @@
@tailwind utilities;
 :root {
-  color: #111827;
+  color: #000000;
-  background-color: #f6f8fb;
+  background-color: rgb(252 252 246);
 }
 html,
--- a/src/lib/buttonStyles.ts
+++ b/src/lib/buttonStyles.ts
@@ -0,0 +1,5 @@
 export const buttonBaseClass =
  'inline-flex items-center justify-center rounded-full border border-brand-200/60 bg-white px-6 py-3 text-sm font-semibold text-black shadow-[0_18px_40px_-26px_rgba(15,23,42,0.55)] transition-all duration-300 hover:-translate-y-0.5 hover:border-black hover:bg-brand-600 hover:text-white hover:shadow-[0_26px_52px_-32px_rgba(90,107,241,0.55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black';
 export const buttonGhostLightClass =
  'inline-flex items-center justify-center rounded-full border border-white/30 bg-transparent px-6 py-3 text-sm font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 hover:border-white hover:bg-white hover:text-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent';
--- a/src/pages/about/AboutPage.tsx
+++ b/src/pages/about/AboutPage.tsx
@@ -1,13 +1,15 @@
 import { AboutHero } from './components/AboutHero';
 import { MissionVision } from './components/MissionVision';
 import { TrackRecord } from './components/TrackRecord';
 import { AboutCta } from './components/AboutCta';
 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 />
      <AboutHero />
      <TrackRecord />
      <AboutCta />
    </div>
  );
 };
--- a/src/pages/about/components/AboutCta.tsx
+++ b/src/pages/about/components/AboutCta.tsx
@@ -0,0 +1,68 @@
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
 import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const AboutCta = () => {
  return (
    <section className="snap-start bg-black pt-10 sm:pt-16 lg:pt-20">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 pb-20 text-center sm:gap-10 sm:px-10 sm:pb-32 lg:pb-40">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="flex items-center justify-center gap-4"
        >
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
          <span className="text-xs font-semibold uppercase tracking-[0.4em] text-white">
            Sovereign Agentic Cloud
          </span>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </motion.div>
        <motion.h3
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
        >
          See What We&apos;re Building Next
        </motion.h3>
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
          className="max-w-2xl text-lg text-white/70"
        >
          We&apos;re enabling sovereign agentic cloud for everyone, unlocking infrastructure that is
          locally owned, globally connected, and ready for the next wave of intelligent workloads.
        </motion.p>
        <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="w-full sm:w-auto"
        >
          <Link
            to="/technology"
            className={cn(
              buttonBaseClass,
              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
            )}
          >
            Explore Our Tech
          </Link>
        </motion.div>
      </div>
    </section>
  );
 };
--- a/src/pages/about/components/AboutHero.tsx
+++ b/src/pages/about/components/AboutHero.tsx
@@ -1,34 +1,116 @@
 import { motion } from 'framer-motion';
 const records = [
  {
    period: '1997–2002',
    title: 'World Records for Web Hosting',
    description: 'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
    layout: 'lg:col-span-3 lg:row-span-2',
    showStream: true,
  },
  {
    period: '2005',
    title: 'The First Backup Data Duplication System in the World',
    description: 'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
    layout: 'lg:col-span-3',
  },
  {
    period: '2008',
    title: 'One of the First Cloud Systems',
    description: 'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
    layout: 'lg:col-span-3',
  },
  {
    period: '2010',
    title: 'The First Multi-Site Consistent Database',
    description: 'Delivered failover that preserved every transaction across sovereign sites.',
    layout: 'lg:col-span-3 lg:row-span-2',
    showStream: true,
  },
  {
    period: '2012',
    title: 'The First Unbreakable and Distributed Storage System',
    description: 'Built tamper-proof storage that used 10× less energy and never went dark.',
    layout: 'lg:col-span-3',
  },
  {
    period: '2017',
    title: 'Probably the First Proof of Block Stake Blockchain',
    description: 'Merged staking and settlement in one move, years before the market caught up.',
    layout: 'lg:col-span-3',
  },
 ] as const;
 export const AboutHero = () => {
  return (
-    <section className="relative overflow-hidden rounded-3xl text-white">
+    <section className="relative isolate bg-black px-6 pb-16 pt-0 sm:px-10 sm:pb-20 sm:pt-2 lg:px-16 lg:pb-24 lg:pt-4">
-      <img
+      <div className="mx-auto w-full max-w-7xl">
-        src="/images/hometech2.jpg"
+        <div className="grid gap-8 sm:gap-10 lg:grid-cols-[minmax(360px,420px)_minmax(0,1fr)] lg:items-stretch lg:gap-12 xl:grid-cols-[minmax(400px,500px)_minmax(0,1fr)]">
-        alt=""
+          <div className="relative h-full">
-        className="absolute inset-0 h-full w-full object-cover"
+            <div className="group relative flex h-full flex-col overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#2d336c] via-[#4350d7] to-[#7a8df9] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
-      />
+              <img
-      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
+                src="/images/hometech2.jpg"
-      <motion.div
+                alt=""
-        initial={{ opacity: 0, y: 32 }}
+              className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
-        whileInView={{ opacity: 1, y: 0 }}
+            />
-        viewport={{ once: true, amount: 0.3 }}
+            <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
-        transition={{ duration: 0.6, ease: 'easeOut' }}
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(79,70,229,0.4),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
-        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+            <div className="absolute top-[-25%] right-[-5%] h-[420px] w-[420px] rounded-full bg-[#6366f1]/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
-      >
+            <motion.div
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+              initial={{ opacity: 0, y: 32 }}
-          About GeoMind
+              animate={{ opacity: 1, y: 0 }}
-        </p>
+              transition={{ duration: 0.6, ease: 'easeOut' }}
-        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+              className="relative z-10 flex flex-1 flex-col items-center px-6 py-20 text-center sm:px-12 lg:px-16 lg:py-24"
-          We Know a Thing or Two About Datacenters
+            >
-        </h1>
+              <div className="flex w-full items-center justify-center gap-4 text-[0.7rem] font-medium uppercase tracking-[0.32em] text-white/70">
-        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
-          For decades, we've built the technologies that power the internet, from record-breaking
+                <span className="text-white/80">About Us</span>
-          web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
-          for: secure, sovereign, and profitable infrastructure designed for people, the planet,
+              </div>
-          and the AI-powered future.
+              <h1 className="mt-9 max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-[2.75rem] lg:text-[3.25rem] lg:leading-[1.05]">
-        </p>
+                We Know a Thing or Two About Datacenters
-      </motion.div>
+              </h1>
              <p className="mt-5 max-w-2xl text-base leading-relaxed text-white/75 sm:text-lg">
                Decades of building the internet&apos;s backbone, from record-breaking hosting to
                unbreakable cloud systems, now shape how we define the datacenter: secure, sovereign,
                profitable infrastructure built for people and planet.
              </p>
            </motion.div>
          </div>
          </div>
          <div className="grid h-full grid-cols-1 gap-3 sm:grid-cols-2 lg:auto-rows-[minmax(120px,_1fr)] lg:grid-cols-6">
            {records.map((record, index) => (
              <motion.article
                key={record.title}
                initial={{ opacity: 0, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.05 }}
                className={`group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 ${
                  record.showStream ? 'pb-16 sm:pb-5' : ''
                } backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
              >
                <span className="block text-[0.68rem] font-semibold uppercase tracking-[0.42em] text-brand-200/80">
                  {record.period}
                </span>
                <h3 className="mt-2 text-lg font-semibold leading-snug text-white">{record.title}</h3>
                <p className="mt-3 text-sm leading-6 text-slate-200">{record.description}</p>
                {record.showStream && (
                  <div className="pointer-events-none absolute inset-x-5 bottom-6 sm:bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.45),transparent_72%)] opacity-70" />
                    <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(56,189,248,0)_0%,rgba(99,102,241,0.75)_50%,rgba(56,189,248,0)_100%)] opacity-90 [background-size:200%_100%] animate-data-stream" />
                    <div
                      className="absolute inset-0 bg-[linear-gradient(90deg,rgba(255,255,255,0)_0%,rgba(255,255,255,0.55)_12%,rgba(255,255,255,0)_40%)] mix-blend-screen opacity-70 [background-size:220%_100%] animate-data-stream"
                      style={{ animationDelay: '1.4s' }}
                    />
                  </div>
                )}
                <div className="absolute -right-12 -top-12 h-24 w-24 rounded-full bg-brand-500/10 blur-3xl transition-transform duration-500 group-hover:scale-110" />
              </motion.article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
 };
--- a/src/pages/about/components/MissionVision.tsx
+++ b/src/pages/about/components/MissionVision.tsx
@@ -1,60 +1,32 @@
 export const MissionVision = () => {
  return (
-    <section className="relative py-20 lg:py-28">
+    <section className="relative -mt-28 flex min-h-screen flex-col overflow-hidden text-white lg:-mt-32">
-      <div className="relative mx-auto max-w-6xl px-6 lg:px-12">
+      <img
-        <div className="flex flex-col gap-12 rounded-[32px] bg-gradient-to-br from-white via-white to-brand-50/40 p-8 shadow-xl ring-1 ring-brand-100/40 sm:p-12 lg:grid lg:grid-cols-[minmax(0,0.9fr)_1fr] lg:items-center">
+        src="/images/cloud_sky.png"
-          <div className="order-1 lg:order-none">
+        alt="Sunrise light shining through layered clouds above a resilient skyline."
-            <figure className="relative mx-auto max-w-sm overflow-hidden rounded-[28px] bg-gradient-to-br from-emerald-100/50 via-white to-brand-100/40 p-6 shadow-lg ring-1 ring-brand-200/40">
+        className="absolute inset-0 h-full w-full object-cover"
-              <div className="absolute inset-0 rounded-[24px] bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.22),transparent_55%),radial-gradient(circle_at_80%_40%,rgba(59,130,246,0.18),transparent_60%)]" />
+      />
-              <img
+      <div className="absolute inset-0 bg-gradient-to-br from-black/85 via-black/60 to-brand-900/40" />
-                src="/images/ceo-kristof.png"
+
-                alt="Kristof De Spiegeleer, Founder and CEO of GeoMind"
+      <div className="relative z-10 flex flex-1 items-start justify-center px-6 pb-24 pt-[45vh] text-center sm:px-10 sm:pt-[40vh]">
-                className="relative z-10 mx-auto w-full max-w-xs object-cover"
+        <div className="max-w-4xl space-y-8">
-              />
+          <span className="inline-block text-xs font-semibold uppercase tracking-[0.35em] text-brand-200">
-              <figcaption className="relative z-10 mt-6 text-center text-sm font-medium text-slate-500">
+            Mission &amp; Vision
-                Kristof De Spiegeleer &mdash; Founder &amp; CEO
+          </span>
-              </figcaption>
+          <h2 className="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
-            </figure>
+            Prioritizing people and planet for a sovereign cloud future
-          </div>
+          </h2>
-          <div className="relative flex flex-col gap-8 rounded-3xl bg-white/90 p-8 shadow-inner ring-1 ring-brand-100/50 backdrop-blur">
+          <p className="mx-auto max-w-3xl text-base text-white/80 sm:text-lg">
-            <div className="flex items-center gap-4">
+            GeoMind builds inclusive digital infrastructure because access to compute should be a fundamental human
-              <div className="h-px flex-1 bg-gradient-to-r from-brand-500/50 via-brand-300/50 to-transparent" />
+            right. We engineer systems that keep communities in control of their data, reward local participation, and
-              <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+            run with a lighter footprint on the planet.
-                Technology with Purpose
+          </p>
              </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"
              >
                “
              </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">
                  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.
                </p>
                <p>
                  Today, we’re creating the next generation of datacenters, designed not only for the AI era but for a
                  sustainable, inclusive future. Our mission is clear: to make digital decentralized infrastructure a
                  universal right, accessible and responsible in equal measure.
                </p>
                <p>
                  We’ve spent decades pioneering technologies that power the internet. Now, we’re redefining what
                  datacenters stand for, combining efficiency, sovereignty, and sustainability to serve both humanity and
                  innovation.
                </p>
              </div>
            </div>
            <div className="border-t border-slate-200 pt-6 text-sm">
              <p className="font-semibold text-brand-700">Kristof De Spiegeleer</p>
              <p className="text-slate-500">Founder &amp; CEO, GeoMind</p>
            </div>
          </div>
        </div>
      </div>
      <div className="relative z-10 px-6 pb-10 text-center text-xs font-semibold uppercase tracking-[0.35em] text-white/80 sm:px-10 sm:text-sm">
        People • Planet • Authenticity • Open-source • Simplicity
      </div>
    </section>
  );
 };
--- a/src/pages/about/components/TrackRecord.tsx
+++ b/src/pages/about/components/TrackRecord.tsx
@@ -1,67 +1,103 @@
 import { motion } from 'framer-motion';
-const records = [
+const exits = [
  {
-    title: 'World Records for Web Hosting (1997-2002)',
+    year: '2005',
-    description:
+    company: 'DataCenter Technologies',
-      'Our team started the Internet hosting and data center business in Europe. We hosted some of the largest websites in the world including UEFA, NASA, World Cup.',
+    description: 'Disk-based backup optimization software.',
    acquiredBy: 'Veritas → Symantec',
    logo: '/images/exited_company_logos/DataCenter.png',
  },
  {
-    title: 'The FIRST Backup Data Duplication system in the world (2005)',
+    year: '2005',
-    description:
+    company: 'Dedigate',
-      'Our advancements in this field brought up to 100x benefit compared to the status quo running in data centers at the time.',
+    description: 'Managed hosting for complex internet infrastructures.',
    acquiredBy: 'Verizon & Terremark → Equinix',
    logo: '/images/exited_company_logos/Dedigate.png',
  },
  {
-    title: 'One of the FIRST Cloud Systems (2008)',
+    year: '2008',
-    description:
+    company: 'HostBasket',
-      'We were one of the pioneers of cloud computing in general. Terms like Virtual Private Data Center were invented by us.',
+    description: 'Belgium’s largest hosting company.',
    acquiredBy: 'Telenet',
    logo: '/images/exited_company_logos/HOSTBASKET.png',
  },
  {
-    title: 'The FIRST multi-site consistent database (2010)',
+    year: '2009',
-    description:
+    company: 'Q-layer',
-      'We invented a method to store data in a database over multiple sites in such a way data could never be lost, corrupted, or order of updates changed.',
+    description: 'Automated cloud deployment and virtualization.',
    acquiredBy: 'Sun Microsystems → Oracle',
    logo: '/images/exited_company_logos/Q-layer.png',
  },
  {
-    title: 'The FIRST unbreakable and distributed storage system (2012)',
+    year: '2015',
-    description:
+    company: 'Amplidata',
-      'Not only incorruptible, our system also boasts 10x energy efficiency compared to alternative solutions, marking a significant technological leap.',
+    description: 'Object storage for public and private clouds.',
-  },
+    acquiredBy: 'HGST (Western Digital)',
-  {
+    logo: '/images/exited_company_logos/amplidata.png',
    title: 'Probably the FIRST proof of block stake blockchain (2017)',
    description:
      'This blockchain was sustainable and scalable and allowed people to transact their stake as well as their digital currency in the same transaction, which still to date is novel.',
  },
 ];
 export const TrackRecord = () => {
  return (
-    <section className="py-16 lg:py-24">
+    <section className="px-6 pt-16 pb-12 text-slate-100 sm:px-10 lg:px-16 lg:pt-24 lg:pb-16">
-      <div className="mx-auto max-w-3xl text-center">
+      <div className="mx-auto max-w-4xl text-center">
-        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+        <div className="flex items-center justify-center gap-4">
-          Our Track Record
+          <span
-        </h2>
+            aria-hidden="true"
-        <p className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
-          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.
+          <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
            Proven Track Record
          </h2>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </div>
        <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
          Our team has built some of the world’s most advanced cloud technologies which were acquired by some of the biggest names in the space. 
        </p>
      </div>
-      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+
-        {records.map((record, index) => (
+      <div className="mt-12 mx-auto max-w-6xl rounded-3xl border border-white/10 bg-black/60 p-8 shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] transition-all duration-300 hover:border-brand-300/40 hover:shadow-[0_36px_90px_-50px_rgba(56,189,248,0.35)]">
-          <motion.div
+        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
-            key={record.title}
+          {exits.map((exit, index) => (
-            initial={{ opacity: 0, y: 24 }}
+            <motion.div
-            whileInView={{ opacity: 1, y: 0 }}
+              key={exit.company}
-            viewport={{ once: true, amount: 0.25 }}
+              initial={{ opacity: 0, y: 24 }}
-            transition={{ duration: 0.5, delay: index * 0.05 }}
+              whileInView={{ opacity: 1, y: 0 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+              viewport={{ once: true, amount: 0.2 }}
-          >
+              transition={{ duration: 0.5, delay: index * 0.05 }}
-            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+              className="group relative flex flex-col items-center rounded-2xl bg-black/40 p-6 text-center transition-all duration-300 hover:-translate-y-1.5 hover:bg-white/5 hover:shadow-[0_22px_50px_-38px_rgba(56,189,248,0.45)]"
-              {index + 1}
+            >
-            </div>
+              <span className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-300">
-            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
+                {exit.year}
-            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+              </span>
-          </motion.div>
+              {exit.logo && (
-        ))}
+                <div className="mt-4">
                  <div className="mx-auto h-16 w-16 rounded-full bg-gradient-to-br from-brand-500/50 via-brand-400/30 to-transparent p-[2px] transition-transform duration-300 group-hover:scale-105">
                    <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-white">
                      <img
                        src={exit.logo}
                        alt={`${exit.company} logo`}
                        className="h-14 w-14 object-contain"
                      />
                    </div>
                  </div>
                </div>
              )}
              <h4 className="mt-4 text-lg font-semibold text-white">{exit.company}</h4>
              <p className="mt-2 text-sm text-slate-300">{exit.description}</p>
              <div className="mt-4 flex flex-1 flex-col justify-end">
                <p className="text-xs font-medium uppercase tracking-[0.2em] text-slate-400">
                  Acquired by
                </p>
                <p className="mt-1 text-sm text-white/80">{exit.acquiredBy}</p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,17 +1,24 @@
-import { HomeHero } from './components/HomeHero';
+import { useEffect } from 'react';
-import { CoreTechnology } from './components/CoreTechnology';
+import { HeroSection } from './components/HeroSection';
-import { ImpactBanner } from './components/ImpactBanner';
+import { CtaSection } from './components/CtaSection';
-import { WhyGeomind } from './components/WhyGeomind';
+import { Footer } from '../../components/layout/Footer';
-import { FinalCallToAction } from './components/FinalCallToAction';
+import { ScrollLockedSection } from './components/ScrollLockedSection';
 export const HomePage = () => {
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, []);
  return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="flex min-h-screen flex-col bg-black text-white">
-      <HomeHero />
+      <HeroSection />
-      <CoreTechnology />
+      <ScrollLockedSection />
-      <ImpactBanner />
+      <div className="snap-start">
-      <WhyGeomind />
+        <CtaSection />
-      <FinalCallToAction />
+      </div>
      <div className="snap-start">
        <Footer />
      </div>
    </div>
  );
 };
--- a/src/pages/home/components/CoreTechnology.tsx
+++ b/src/pages/home/components/CoreTechnology.tsx
@@ -1,57 +0,0 @@
 import { motion } from 'framer-motion';
 const features = [
  {
    title: 'Self Healing & Prederministic Deployments',
    description:
      "GeoMind nodes detect and fix issues automatically with zero downtime. Every deployment is verifiable and runs exactly the same anywhere, fully autonomous, resilient, and predictable.",
  },
  {
    title: 'Unbreakable Storage',
    description:
      'Data is encrypted and encoded using forward-error-correction codes, not replication. Even if parts of the network fail, data can always be rebuilt, making it unhackable, permanent, and loss-proof.',
  },
  {
    title: 'Unbreakable Network',
    description:
      'Runs on top of the internet, finding the fastest path for data. With end-to-end quantum-safe encryption and self-optimizing routing, it creates a layer that cannot be hacked or shut down.',
  },
 ];
 export const CoreTechnology = () => {
  return (
    <section className="py-16 lg:py-24">
      <div className="mx-auto max-w-4xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
          Core Technology
        </p>
        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
          The Foundation of a New Datacenter Standard
        </h2>
        <p className="mt-5 text-base text-slate-600 sm:text-lg">
          GeoMind is built on a modular, self-healing datacenter architecture designed for unmatched
          efficiency, reliability, and sovereignty. Every component works autonomously yet integrates
          seamlessly into a global, planet-scale infrastructure.
        </p>
      </div>
      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature, index) => (
          <motion.div
            key={feature.title}
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.2 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            className="flex flex-col rounded-3xl border border-slate-100 bg-white/80 p-8 shadow-subtle backdrop-blur"
          >
            <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-600">
              {index + 1}
            </span>
            <h3 className="mt-6 text-lg font-semibold text-ink">{feature.title}</h3>
            <p className="mt-4 text-sm leading-6 text-slate-600">{feature.description}</p>
          </motion.div>
        ))}
      </div>
    </section>
  );
 };
--- a/src/pages/home/components/CtaSection.tsx
+++ b/src/pages/home/components/CtaSection.tsx
@@ -0,0 +1,88 @@
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
 import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const CtaSection = () => {
  return (
    <section className="snap-start bg-black">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="flex items-center justify-center gap-4"
        >
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
          <span className="text-xs font-semibold uppercase tracking-[0.4em] text-white">
            Ready when you are
          </span>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </motion.div>
        <motion.h3
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
        >
          Join the Infrastructure Revolution
        </motion.h3>
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
          className="max-w-2xl text-lg text-white/70"
        >
          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
        </motion.p>
        <div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
          <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="w-full sm:w-auto"
          >
            <Link
              to="/about"
              className={cn(
                buttonBaseClass,
                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
              )}
            >
              About us
            </Link>
          </motion.div>
          <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="w-full sm:w-auto"
          >
            <a
              href="https://calendly.com/sachao/30min"
              target="_blank"
              rel="noopener noreferrer"
              className={cn(
                buttonBaseClass,
                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
              )}
            >
              Book a Meeting
            </a>
          </motion.div>
        </div>
      </div>
    </section>
  );
 };
--- a/src/pages/home/components/FinalCallToAction.tsx
+++ b/src/pages/home/components/FinalCallToAction.tsx
@@ -1,31 +0,0 @@
 import { motion } from 'framer-motion';
 import { PrimaryButton } from '../../../components/ui/PrimaryButton';
 export const FinalCallToAction = () => {
  return (
    <section className="py-20 lg:py-32">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.7, ease: 'easeOut' }}
        className="mx-auto max-w-4xl text-center"
      >
        <h2 className="text-3xl font-semibold text-ink sm:text-4xl lg:text-5xl">
          {' '}
          <span className="bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700 bg-clip-text text-transparent">
            The Datacenter Standard
          </span>{' '}
          <br />
          for the next era of Cloud and AI.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-ink/70 sm:text-xl">
          For years we've been pioneering infrastructure technologies that power the world's most demanding cloud workloads. Learn more about our team and expertise behind our mission.
        </p>
        <div className="mt-10 flex justify-center">
          <PrimaryButton to="/about">About Us</PrimaryButton>
        </div>
      </motion.div>
    </section>
  );
 };
--- a/src/pages/home/components/HeroSection.tsx
+++ b/src/pages/home/components/HeroSection.tsx
@@ -0,0 +1,44 @@
 import { motion } from 'framer-motion';
 export const HeroSection = () => {
  return (
    <section className="relative snap-start">
      <div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
        <video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
          <source src="/videos/hero.mp4" type="video/mp4" />
        </video>
        <div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
            className="max-w-3xl space-y-6"
          >
            <h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
              The Planet's Sovereign Agentic Cloud
            </h1>
            <p className="max-w-xl text-lg text-white">
              A new generation of decentralized cloud and AI infrastructure.
              <br />
              Faster, greener, smarter. Deploy your own datacenter, scale globally, and own your cloud, turning IT from a cost center to a profit center.
            </p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
            className="flex items-center justify-end text-xs uppercase tracking-[0.3em] text-white"
          >
            <div className="flex items-center gap-3">
              <span className="h-px w-16 bg-white/60" />
              <span>The Living Cloud</span>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
 };
--- a/src/pages/home/components/HomeHero.tsx
+++ b/src/pages/home/components/HomeHero.tsx
@@ -1,55 +0,0 @@
 import { motion } from 'framer-motion';
 import { PrimaryButton } from '../../../components/ui/PrimaryButton';
 export const HomeHero = () => {
  return (
    <section className="relative overflow-hidden rounded-3xl bg-ink text-white">
      <video
        className="absolute inset-0 h-full w-full object-cover opacity-60"
        autoPlay
        muted
        loop
        playsInline
        poster="/images/hometech.jpg"
      >
        <source src="/videos/hero.mp4" type="video/mp4" />
      </video>
      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/70 via-[#1e1b4b]/60 to-[#312e81]/80" />
      <div className="relative z-10 px-6 py-20 sm:px-10 lg:px-16">
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2, duration: 0.6 }}
          className="text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl"
        >
          The planet&apos;s sovereign agentic cloud
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3, duration: 0.6 }}
          className="mt-6 max-w-3xl text-base text-white/70 sm:text-lg"
        >
          A new generation of decentralized cloud and AI infrastructure,
          secure, scalable, efficient, and sovereign by design. Deploy your own
          datacenter, scale globally, and turn infrastructure into profit.
        </motion.p>
        <motion.div
          className="mt-10 flex flex-wrap gap-4"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
        >
          <PrimaryButton to="/technology">Technologies</PrimaryButton>
          <PrimaryButton
            to="/usecases"
            variant="ghost"
            className="border border-white/40 text-white hover:bg-white hover:text-brand-600"
          >
            Use Cases
          </PrimaryButton>
        </motion.div>
      </div>
    </section>
  );
 };
--- a/src/pages/home/components/ImpactBanner.tsx
+++ b/src/pages/home/components/ImpactBanner.tsx
@@ -1,120 +0,0 @@
 import { motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 import { PrimaryButton } from '../../../components/ui/PrimaryButton';
 export const ImpactBanner = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // Set canvas size
    const resizeCanvas = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    // Grid configuration
    const gridSpacing = 40;
    const dotRadius = 2;
    const glowRadius = 8;
    const dots: Array<{
      x: number;
      y: number;
      baseX: number;
      baseY: number;
      phase: number;
      speed: number;
    }> = [];
    // Create grid of dots
    for (let x = 0; x < canvas.width; x += gridSpacing) {
      for (let y = 0; y < canvas.height; y += gridSpacing) {
        dots.push({
          x,
          y,
          baseX: x,
          baseY: y,
          phase: Math.random() * Math.PI * 2,
          speed: 0.5 + Math.random() * 0.5,
        });
      }
    }
    let animationFrameId: number;
    let time = 0;
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      time += 0.01;
      dots.forEach((dot) => {
        // Subtle floating animation
        const offsetX = Math.sin(time * dot.speed + dot.phase) * 3;
        const offsetY = Math.cos(time * dot.speed * 0.8 + dot.phase) * 3;
        dot.x = dot.baseX + offsetX;
        dot.y = dot.baseY + offsetY;
        // Pulsing opacity
        const opacity = 0.15 + Math.sin(time * dot.speed + dot.phase) * 0.1;
        // Draw glow
        const gradient = ctx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, glowRadius);
        gradient.addColorStop(0, `rgba(99, 102, 241, ${opacity * 0.3})`);
        gradient.addColorStop(1, 'rgba(99, 102, 241, 0)');
        ctx.fillStyle = gradient;
        ctx.fillRect(dot.x - glowRadius, dot.y - glowRadius, glowRadius * 2, glowRadius * 2);
        // Draw dot
        ctx.beginPath();
        ctx.arc(dot.x, dot.y, dotRadius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(99, 102, 241, ${opacity + 0.2})`;
        ctx.fill();
      });
      animationFrameId = requestAnimationFrame(animate);
    };
    animate();
    return () => {
      window.removeEventListener('resize', resizeCanvas);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);
  return (
    <section className="relative overflow-hidden py-16 text-center lg:py-20">
      {/* Animated background canvas */}
      <canvas
        ref={canvasRef}
        className="absolute inset-0 h-full w-full"
        style={{ opacity: 0.6 }}
      />
      {/* Content */}
      <motion.div
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative z-10 px-6 sm:px-10"
      >
        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Designed for Real-World Impact</h2>
        <p className="mx-auto mt-5 max-w-3xl text-base text-slate-600 sm:text-lg">
          GeoMind enables enterprises and infrastructure providers to run secure, profitable,
          efficient, and sovereign clouds anywhere.
        </p>
        <div className="mt-8 flex justify-center">
          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
        </div>
      </motion.div>
    </section>
  );
 };
--- a/src/pages/home/components/ScrollLockedSection.tsx
+++ b/src/pages/home/components/ScrollLockedSection.tsx
@@ -0,0 +1,464 @@
 import { useState, type CSSProperties } from 'react';
 import { motion } from 'framer-motion';
 import type { LucideIcon } from 'lucide-react';
 import {
  CloudCog,
  Bot,
  BatteryCharging,
  Coins,
  ShieldCheck,
  Network,
 } from 'lucide-react';
 import { cn } from '../../../lib/cn';
 const baseSectionClass =
  'relative flex min-h-screen snap-start items-center justify-center overflow-hidden bg-black pt-20 text-white sm:pt-24';
 const baseContainerClass =
  'relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 pt-28 pb-20 sm:px-10 sm:pt-32 sm:pb-24 lg:px-16 lg:pt-36 lg:pb-28';
 const paragraphClass = 'text-base leading-relaxed text-white/70 sm:text-lg';
 const slideMotion = {
  initial: { opacity: 0, y: 40 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.35 },
  transition: { duration: 0.9, ease: 'easeOut' },
 };
 type TierCardProps = {
  image: { primary: string; fallback?: string; alt: string };
  lines: [string, string];
 };
 const TierCard = ({ image, lines }: TierCardProps) => {
  const [src, setSrc] = useState(image.primary);
  return (
    <div className="group relative flex h-full flex-col gap-4 overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-6 sm:p-8">
      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
      <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border border-white/10 bg-black/40">
        <img
          src={src}
          alt={image.alt}
          className="h-full w-full object-cover opacity-90"
          onError={() => {
            if (image.fallback && src !== image.fallback) {
              setSrc(image.fallback);
            }
          }}
        />
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/40" />
      </div>
      <div className="relative space-y-3">
        <p className="text-lg font-semibold leading-tight text-white">{lines[0]}</p>
        <p className="text-base leading-relaxed text-white/70">{lines[1]}</p>
      </div>
    </div>
  );
 };
 type SectionTagProps = {
  label: string;
  align?: 'start' | 'center';
  className?: string;
 };
 const SectionTag = ({ label, align = 'start', className }: SectionTagProps) => (
  <div
    className={cn(
      'flex items-center gap-4 text-xs font-semibold uppercase tracking-[0.4em] text-white',
      align === 'center' ? 'justify-center' : 'justify-start',
      className
    )}
  >
    <span
      aria-hidden="true"
      className={cn(
        'hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block',
        align === 'start' && 'opacity-70'
      )}
    />
    <span className="text-center sm:text-left">{label}</span>
    <span
      aria-hidden="true"
      className={cn(
        'hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block',
        align === 'start' && 'opacity-40'
      )}
    />
  </div>
 );
 type Feature = {
  heading: [string, string];
  detail: string;
  icon: LucideIcon;
  accent: string;
  accentSoft: string;
  accentGlow: string;
  emphasis?: 'hero';
 };
 type FeatureCardProps = {
  feature: Feature;
 };
 const FeatureCard = ({ feature }: FeatureCardProps) => {
  const Icon = feature.icon;
  const variant = feature.emphasis === 'hero' ? 'hero' : 'standard';
  const featureStyles = {
    '--feature-accent': feature.accent,
    '--feature-accent-soft': feature.accentSoft,
    '--feature-accent-glow': feature.accentGlow,
  } as CSSProperties;
  return (
    <article
      className={cn(
        'group relative flex h-full flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-6 sm:p-7 [box-shadow:0_26px_55px_rgba(8,9,21,0.35)] backdrop-blur-[30px] transition-all duration-500 hover:-translate-y-1.5 hover:bg-white/[0.05]',
        'group-hover:border-[color:var(--feature-accent-soft)] group-hover:[box-shadow:0_32px_80px_var(--feature-accent-glow)]',
        variant === 'hero' && 'sm:p-9 lg:p-10 hover:-translate-y-2'
      )}
      style={featureStyles}
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        style={{
          background: 'linear-gradient(140deg, var(--feature-accent-soft) 0%, rgba(5,7,18,0) 65%)',
        }}
      />
      <div className="relative flex flex-1 flex-col gap-6">
        <div className="flex items-start gap-4">
          <span
            className={cn(
              'relative flex h-12 w-12 items-center justify-center rounded-2xl border border-white/15 bg-[#0d1126] text-white transition-transform duration-500 group-hover:scale-[1.05]',
              variant === 'hero' && 'h-14 w-14 rounded-3xl'
            )}
            style={{
              borderColor: 'var(--feature-accent-soft)',
              background:
                'linear-gradient(135deg, rgba(14,18,38,0.85) 0%, rgba(8,10,26,0.6) 60%)',
              boxShadow: '0 18px 45px var(--feature-accent-glow)',
            }}
          >
            <span
              className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-40 mix-blend-screen transition-opacity duration-500 group-hover:opacity-100"
              style={{
                background:
                  'radial-gradient(circle at 30% 30%, var(--feature-accent) 0%, rgba(12,14,30,0) 65%)',
              }}
            />
            <Icon
              className={cn('relative h-5 w-5', variant === 'hero' && 'h-6 w-6')}
              style={{ color: 'var(--feature-accent)' }}
            />
          </span>
          <h3
            className={cn(
              'font-semibold text-white leading-tight',
              variant === 'hero' ? 'text-xl sm:text-2xl' : 'text-lg sm:text-xl'
            )}
          >
            {feature.heading.map((line) => (
              <span key={line} className="block">
                {line}
              </span>
            ))}
          </h3>
        </div>
        <span
          className={cn(
            'block h-px w-full rounded-full transition-opacity duration-500',
            variant === 'hero' ? 'opacity-70' : 'opacity-50',
            'group-hover:opacity-100'
          )}
          style={{
            background:
              'linear-gradient(90deg, rgba(12,14,34,0), var(--feature-accent), rgba(12,14,34,0))',
          }}
        />
        <p
          className={cn(
            'text-sm leading-relaxed text-white/70 sm:text-base',
            variant === 'hero' && 'text-base sm:text-lg text-white/80'
          )}
        >
          {feature.detail}
        </p>
      </div>
    </article>
  );
 };
 const DatacenterSlide = () => (
  <section
    id="datacenter-economy"
    className={cn(
      baseSectionClass,
      'bg-gradient-to-br from-[#050611] via-[#03030c] to-black'
    )}
  >
    <div className="pointer-events-none absolute inset-0">
      <div className="absolute left-[-8rem] top-[18%] h-80 w-80 rounded-full bg-[#5a6cf0]/15 blur-3xl" />
      <div className="absolute right-[-6rem] bottom-[-8rem] h-[22rem] w-[22rem] rounded-full bg-[#2f3c96]/18 blur-3xl" />
    </div>
    <motion.div
      {...slideMotion}
      className={cn(
        baseContainerClass,
        'lg:grid lg:grid-cols-[minmax(0,6fr)_minmax(0,5fr)] lg:items-center lg:gap-16'
      )}
    >
      <div className="space-y-6">
        <SectionTag label="THE DATACENTER ECONOMY" />
        <h2 className="text-4xl font-semibold leading-tight text-white sm:text-5xl">
          The Cloud, Decentralized.
        </h2>
        <div className="space-y-5">
          <p className={paragraphClass}>
            GeoMind brings together next-generation hardware and an autonomous AI cloud stack to make
            deploying and operating your own datacenter effortless. Open, local, and profitable by
            design.
          </p>
          <p className={paragraphClass}>
            Built for energy providers, telcos, and governments ready to own their infrastructure and
            reclaim data sovereignty — creating the foundation for a new, self-sustaining digital
            economy.
          </p>
        </div>
      </div>
      <div className="relative hidden h-full items-center justify-center lg:flex">
        <div className="relative w-full max-w-md rounded-[2.5rem] border border-white/10 bg-white/[0.04] p-10 backdrop-blur-sm">
          <div className="absolute inset-0 rounded-[2.5rem] bg-gradient-to-br from-white/10 to-white/0 opacity-60" />
          <div className="relative flex h-full w-full flex-col items-center justify-center gap-6 text-center">
            <span className="text-xs uppercase tracking-[0.35em] text-white/50">
              Visualization Placeholder
            </span>
            <div className="flex h-28 w-full items-center justify-center rounded-2xl border border-white/10 bg-black/40">
              <span className="text-[10px] uppercase tracking-[0.4em] text-white/40">
                Immersive canvas coming soon
              </span>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  </section>
 );
 const DeploymentSlide = () => (
  <section
    id="deployment-tiers"
    className={cn(
      baseSectionClass,
      'bg-gradient-to-br from-[#03050d] via-[#050312] to-[#0a0618]'
    )}
  >
    <div className="pointer-events-none absolute inset-0">
      <div className="absolute right-1/4 top-[-6rem] h-64 w-64 rounded-full bg-[#8b6bff]/15 blur-3xl" />
      <div className="absolute left-[-4rem] bottom-[-6rem] h-72 w-72 rounded-full bg-[#2b356f]/25 blur-3xl" />
    </div>
    <motion.div
      {...slideMotion}
      className={cn(
        baseContainerClass,
        'lg:grid lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] lg:items-start lg:gap-16'
      )}
    >
      <div className="space-y-6">
        <SectionTag label="DEPLOYMENT TIERS" />
        <h2 className="text-3xl font-semibold leading-tight text-white sm:text-4xl lg:text-[2.5rem]">
          Two Forms of Autonomy. One Sovereign Cloud.
        </h2>
        <p className={paragraphClass}>
          Whatever your footprint, GeoMind lets you build and control digital infrastructure on your
          own terms.
        </p>
      </div>
      <div className="grid gap-6 sm:grid-cols-2">
        <TierCard
          image={{
            primary: '/images/tier-s.png',
            fallback: '/images/tier-s.jpeg',
            alt: 'Tier-S autonomous datacenter',
          }}
          lines={[
            'Tier-S — Power redefined.',
            'A liquid-cooled, high-density autonomous datacenter built for unmatched performance and endurance.',
          ]}
        />
        <TierCard
          image={{
            primary: '/images/node.png',
            alt: 'Tier-H distributed edge node',
          }}
          lines={[
            'Tier-H — Intelligence everywhere.',
            'A distributed, autonomous edge system that brings cloud power closer to people, cities, and life itself.',
          ]}
        />
      </div>
    </motion.div>
  </section>
 );
 const MarketplaceSlide = () => (
  <section
    id="the-marketplace"
    className={cn(
      baseSectionClass,
      'bg-gradient-to-br from-[#04040c] via-[#050819] to-[#060a1f]'
    )}
  >
    <div className="pointer-events-none absolute inset-0">
      <div className="absolute left-[-6rem] top-[-6rem] h-64 w-64 rounded-full bg-[#4d81ff]/20 blur-3xl" />
      <div className="absolute right-[-4rem] bottom-[-6rem] h-72 w-72 rounded-full bg-[#2e395f]/26 blur-3xl" />
    </div>
    <motion.div
      {...slideMotion}
      className={cn(
        baseContainerClass,
        'lg:grid lg:grid-cols-[minmax(0,6fr)_minmax(0,5fr)] lg:items-center lg:gap-16'
      )}
    >
      <div className="space-y-6">
        <SectionTag label="THE MARKETPLACE" />
        <h2 className="text-4xl font-semibold leading-tight text-white sm:text-5xl">
          Autonomy that pays back.
        </h2>
        <div className="space-y-5">
          <p className={paragraphClass}>
            GeoMind doesn’t just let you deploy your own sovereign cloud, it gives you a way to earn
            from it.
          </p>
          <p className={paragraphClass}>
            Access a global marketplace where excess compute, storage, and bandwidth become revenue,
            all while you stay fully in control of your infrastructure and data.
          </p>
        </div>
      </div>
      <div className="relative mt-6 space-y-6 overflow-hidden rounded-[2.5rem] border border-white/10 bg-white/[0.03] p-8 lg:mt-0">
        <div className="absolute inset-x-0 top-0 h-1/2 rounded-[2.5rem] bg-gradient-to-b from-white/10 via-white/0 to-transparent" />
        <div className="relative flex flex-col gap-4">
          <div className="flex items-center justify-between">
            <span className="text-xs uppercase tracking-[0.35em] text-white/50">
              Marketplace Flow Placeholder
            </span>
            <span className="text-xs text-white/40">Pending visual</span>
          </div>
          <div className="grid gap-3 text-sm text-white/70">
            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
              <span>Compute</span>
              <span className="text-white/80">•</span>
            </div>
            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
              <span>Storage</span>
              <span className="text-white/80">•</span>
            </div>
            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
              <span>Bandwidth</span>
              <span className="text-white/80">•</span>
            </div>
          </div>
        </div>
      </div>
    </motion.div>
  </section>
 );
 const features: Feature[] = [
  {
    heading: ['True Sovereign', 'Cloud'],
    detail:
      'All GPU/compute/storage/network capabilities delivered locally under your control. No vendor lock-in. No intermediaries.',
    icon: CloudCog,
    accent: '#60a5fa',
    accentSoft: 'rgba(96, 165, 250, 0.22)',
    accentGlow: 'rgba(96, 165, 250, 0.45)',
    emphasis: 'hero',
  },
  {
    heading: ['Autonomous', 'Operation'],
    detail:
      'Self-driving, self-healing infrastructure that deploys, optimizes, and maintains itself—autonomy as a service.',
    icon: Bot,
    accent: '#a855f7',
    accentSoft: 'rgba(168, 85, 247, 0.24)',
    accentGlow: 'rgba(168, 85, 247, 0.45)',
    emphasis: 'hero',
  },
  {
    heading: ['Energy', 'Sustainability'],
    detail:
      'Up to 3× more energy-efficient for AI/compute and up to 10× for storage, driven by intelligent power orchestration, heat reuse, and localized workloads.',
    icon: BatteryCharging,
    accent: '#34d399',
    accentSoft: 'rgba(52, 211, 153, 0.24)',
    accentGlow: 'rgba(52, 211, 153, 0.42)',
    emphasis: 'hero',
  },
  {
    heading: ['Radical Cost', 'Advantage'],
    detail:
      'Up to 7× more affordable by eliminating hyperscaler overhead and monetizing idle capacity.',
    icon: Coins,
    accent: '#fbbf24',
    accentSoft: 'rgba(251, 191, 36, 0.26)',
    accentGlow: 'rgba(251, 191, 36, 0.42)',
  },
  {
    heading: ['Uncompromising', 'Security'],
    detail:
      'Encrypted, isolated, and pre-deterministic—from silicon to software—for enterprise and nation-grade assurance.',
    icon: ShieldCheck,
    accent: '#818cf8',
    accentSoft: 'rgba(129, 140, 248, 0.24)',
    accentGlow: 'rgba(129, 140, 248, 0.45)',
  },
  {
    heading: ['Scalable by', 'Nature'],
    detail:
      'From edge nodes to sovereign cloud networks—modular, rapidly deployable, and orchestrated as one fabric.',
    icon: Network,
    accent: '#f472b6',
    accentSoft: 'rgba(244, 114, 182, 0.24)',
    accentGlow: 'rgba(244, 114, 182, 0.42)',
  },
 ];
 const FeaturesSlide = () => (
  <section
    id="the-features"
    className={cn(
      baseSectionClass,
      'bg-gradient-to-br from-[#05060f] via-[#03040b] to-black'
    )}
  >
    <div className="pointer-events-none absolute inset-0">
      <div className="absolute left-1/2 top-[-10rem] h-[26rem] w-[26rem] -translate-x-1/2 rounded-full bg-[#4a5dd9]/14 blur-3xl" />
      <div className="absolute right-[-8rem] bottom-[-4rem] h-72 w-72 rounded-full bg-[#1e233d]/35 blur-3xl" />
    </div>
    <motion.div
      {...slideMotion}
      className={cn(baseContainerClass, 'items-stretch gap-12')}
    >
      <div className="flex justify-center">
        <SectionTag label="THE FEATURES" align="center" />
      </div>
      <div className="grid grid-cols-1 gap-5 sm:gap-6 md:[grid-template-columns:repeat(auto-fit,minmax(320px,1fr))] md:auto-rows-[minmax(280px,auto)]">
        {features.map((feature) => (
          <FeatureCard key={feature.heading.join('-')} feature={feature} />
        ))}
      </div>
    </motion.div>
  </section>
 );
 export const ScrollLockedSection = () => (
  <>
    <DatacenterSlide />
    <DeploymentSlide />
    <MarketplaceSlide />
    <FeaturesSlide />
  </>
 );
--- a/src/pages/home/components/WhyGeomind.tsx
+++ b/src/pages/home/components/WhyGeomind.tsx
@@ -1,73 +0,0 @@
 import { motion } from 'framer-motion';
 const pillars = [
  {
    title: 'Sovereign by Design',
    points: [
      'Stay compliant with in-country data requirements.',
      'Each node operates independently or as part of a global, trusted network.',
      'Maintain total ownership of your infrastructure and data.',
    ],
  },
  {
    title: 'Efficient and Sustainable',
    points: [
      'Up to 10x less energy for specific workloads.',
      'Removes layers of legacy software overhead.',
      'Lower operational cost and carbon footprint.',
    ],
  },
  {
    title: 'Profitable Infrastructure',
    points: [
      'Turn existing datacenters, offices, or parking lots into productive assets.',
      'Use capacity for your workloads and sell the excess to the network.',
      'ROI can be 3x higher than traditional models.',
    ],
  },
 ];
 export const WhyGeomind = () => {
  return (
    <section className="relative px-6 py-16 sm:px-10 lg:px-16 lg:py-24">
      <div className="pointer-events-none absolute -left-32 top-0 h-56 w-56 rounded-full bg-brand-100 opacity-60 blur-3xl lg:-left-24" />
      <div className="pointer-events-none absolute -right-24 bottom-0 h-64 w-64 rounded-full bg-brand-200 opacity-50 blur-3xl" />
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative z-10 max-w-3xl"
      >
        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Why GeoMind</h2>
        <p className="mt-5 text-base text-slate-600 sm:text-lg">
          Traditional datacenters are increasingly limited by geopolitics, inefficiency, and energy
          waste. GeoMind eliminates those constraints with a resilient, autonomous infrastructure that
          delivers planetary scalability and sovereign performance anywhere in the world.
        </p>
      </motion.div>
      <div className="relative z-10 mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {pillars.map((pillar, index) => (
          <motion.div
            key={pillar.title}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.25 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
            className="rounded-3xl border border-slate-100 bg-white/90 p-6 shadow-subtle"
          >
            <h3 className="text-lg font-semibold text-ink">{pillar.title}</h3>
            <ul className="mt-4 space-y-3 text-sm text-slate-600">
              {pillar.points.map((point) => (
                <li key={point} className="flex gap-3">
                  <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
                  <span>{point}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        ))}
      </div>
    </section>
  );
 };
--- a/src/pages/technology/TechnologyPage.tsx
+++ b/src/pages/technology/TechnologyPage.tsx
@@ -2,14 +2,16 @@ import { TechnologyHero } from './components/TechnologyHero';
 import { TechnologyArchitecture } from './components/TechnologyArchitecture';
 import { TechnologyStack } from './components/TechnologyStack';
 import { TechnologicalBenefits } from './components/TechnologicalBenefits';
 import { MarketplaceCta } from './components/MarketplaceCta';
 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 />
      <TechnologicalBenefits />
      <MarketplaceCta />
    </div>
  );
 };
--- a/src/pages/technology/components/MarketplaceCta.tsx
+++ b/src/pages/technology/components/MarketplaceCta.tsx
@@ -0,0 +1,68 @@
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { cn } from '../../../lib/cn';
 import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const MarketplaceCta = () => {
  return (
    <section className="snap-start bg-black">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.6, ease: 'easeOut' }}
          className="flex items-center justify-center gap-4"
        >
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
          <span className="text-xs font-semibold uppercase tracking-[0.4em] text-white">
            Explore The Network
          </span>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </motion.div>
        <motion.h3
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
        >
          See What&apos;s Being Built Right Now
        </motion.h3>
        <motion.p
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-20%' }}
          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
          className="max-w-2xl text-lg text-white/70"
        >
          Discover real use cases partner integrations, and revenue models running on GeoMind
          infrastructure. 
        </motion.p>
        <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="w-full sm:w-auto"
        >
          <Link
            to="/usecases"
            className={cn(
              buttonBaseClass,
              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
            )}
          >
            See Use cases
          </Link>
        </motion.div>
      </div>
    </section>
  );
 };
--- a/src/pages/technology/components/TechnologicalBenefits.tsx
+++ b/src/pages/technology/components/TechnologicalBenefits.tsx
@@ -1,53 +1,55 @@
 import { motion } from 'framer-motion';
-import { ShieldCheck, Globe, Leaf, LineChart, Layers } from 'lucide-react';
+import { Globe, Coins, Zap, ShieldCheck } from 'lucide-react';
 const benefits = [
  {
-    title: 'Ultra-Secure',
+    title: 'Open access',
-    description: 'Protect sensitive workloads with end-to-end security.',
+    description: 'List available capacity instantly and reach verified global buyers.',
    icon: ShieldCheck,
  },
  {
    title: 'Scales Globally',
    description: 'Supports workloads anywhere, from local nodes to planetary scale.',
    icon: Globe,
  },
  {
-    title: 'Energy Efficient',
+    title: 'Earn from excess',
-    description: 'Up to 10x less energy for specific workloads.',
+    description: 'Monetize idle compute, storage, and bandwidth.',
-    icon: Leaf,
+    icon: Coins,
  },
  {
-    title: 'Profitable',
+    title: 'On-demand scaling',
-    description: 'Monetize idle capacity; achieve ROI up to 3x higher.',
+    description: 'Access additional nodes when workloads surge.',
-    icon: LineChart,
+    icon: Zap,
  },
  {
-    title: 'Flexible',
+    title: 'Trusted ecosystem',
-    description: 'Compatible with existing infrastructure and hyperscaler requirements.',
+    description: 'Verified participants, transparent contracts, and secure settlements.',
-    icon: Layers,
+    icon: ShieldCheck,
  },
 ];
 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">
+        <div className="flex items-center justify-center gap-4">
-          Technological Benefits
+          <span
-        </p>
+            aria-hidden="true"
-        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
-          Infrastructure that Pays for Itself
+          />
          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
            Marketplace
          </p>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </div>
        <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
          Turn Infrastructure Into Income.
        </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
+          The GeoMind Marketplace connects operators with global demand for compute, storage, and GPU capacity.
-          infrastructure into a strategic asset. Run your own workloads securely and efficiently,
+          Sell your unused resources, tap additional capacity on demand, and transform infrastructure from a cost center into a profit center.
          while selling unused capacity to the network. With up to 10x lower energy consumption for
          specific workloads and ROI up to 3x higher than traditional models, our platform works for
          businesses, hyperscalers, and AI applications alike.
        </p>
      </div>
-      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {benefits.map((benefit, index) => (
          <motion.div
            key={benefit.title}
@@ -55,13 +57,16 @@ 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="group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)]"
          >
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-50">
+            <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-              <benefit.icon className="h-7 w-7 text-brand-600" />
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/15 via-transparent to-brand-200/10" />
            </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-brand-500/30 via-brand-500/15 to-brand-200/10 text-brand-100">
-            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+              <benefit.icon className="h-7 w-7" />
            </div>
            <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>
--- a/src/pages/technology/components/TechnologyArchitecture.tsx
+++ b/src/pages/technology/components/TechnologyArchitecture.tsx
@@ -8,7 +8,7 @@ type Bullet = {
 };
 type Tab = {
-  id: 'zero-os' | 'compute' | 'data' | 'network';
+  id: 'zero-os' | 'compute' | 'gpu' | 'data' | 'network';
  label: string;
  title: string;
  description: string;
@@ -19,27 +19,31 @@ type Tab = {
 const tabs: Tab[] = [
  {
    id: 'zero-os',
-    label: 'Zero-OS',
+    label: 'Mycelium OS',
-    title: 'Zero-OS',
+    title: 'Mycelium OS',
    description:
-      'Minimal, self-healing bare-metal OS that powers autonomous nodes across the ThreeFold Grid.',
+      'Autonomous. Secure. Efficient. A bare-metal operating system that runs infrastructure directly on hardware — no hypervisors, no drift, no manual management. It boots from a verified state, locks the system, and connects to the Mycelium network as a permanent, self-managing node.',
-    cardText: 'Stateless architecture ensures every boot is secure and unmodified, eliminating configuration drift and security vulnerabilities.',
+    cardText: 'A bare-metal operating system that runs infrastructure directly on hardware with hardware-level security and self-driving operation.',
    bullets: [
      {
-        heading: 'Immutable by Design',
+        heading: 'Hardware-level security',
-        body: 'Boots statelessly from a signed image each time, removing drift and shrinking the attack surface.',
+        body: 'The system is sealed after boot, isolating it from external access.',
      },
      {
-        heading: 'Autonomous Operations',
+        heading: 'Self-driving operation',
-        body: 'Digital twin controllers redeploy workloads to healthy nodes and roll out updates with zero downtime.',
+        body: 'Provisions, repairs, and optimizes itself automatically.',
      },
      {
-        heading: 'Zero-Trust Networking',
+        heading: 'Bare-metal performance',
-        body: 'Integrated WireGuard overlay and cryptographic identities secure every peer-to-peer connection.',
+        body: 'Maximum efficiency, zero virtualization overhead.',
      },
      {
-        heading: 'Unified Resource Fabric',
+        heading: 'Energy-smart design',
-        body: 'Exposes compute, storage, and network primitives through a single API for edge, datacenter, or hybrid deployments.',
+        body: 'Powers down when idle, extending hardware life and cutting waste.',
      },
      {
        heading: 'Network-native',
        body: 'Integrates seamlessly into the encrypted Mycelium mesh for instant connectivity.',
      },
    ],
  },
@@ -47,50 +51,53 @@ const tabs: Tab[] = [
    id: 'compute',
    label: 'Compute',
    title: 'Compute',
-    description: 'A self-healing compute fabric designed for resilience, decentralization, and scale.',
+    description: 'Predictable. Compatible. Free from lock-in. Deploy any workload exactly where you want it—with full control over hardware, policy, and cost. Fully compatible with Kubernetes, Docker, and micro-VMs; if it runs on Linux, it runs on Mycelium.',
-    cardText: 'Autonomous workload orchestration across distributed nodes ensures maximum uptime and performance.',
+    cardText: 'Deploy any workload exactly where you want it—with full control over hardware, policy, and cost.',
    bullets: [
      {
-        heading: 'Autonomous Workload Management',
+        heading: 'Pre-deterministic control',
-        body: 'Workloads automatically migrate to healthy nodes to ensure fault tolerance and high availability.',
+        body: 'Know precisely where workloads run and under what conditions.',
      },
      {
-        heading: 'AI & Web3 Ready',
+        heading: 'Full compatibility',
-        body: 'Run LLMs, autonomous agents, blockchain nodes, and immersive metaverse apps at the edge.',
+        body: 'Supports major cloud-native frameworks out of the box.',
      },
      {
-        heading: 'Zero-OS (ZOS)',
+        heading: 'Universal workloads',
-        body: 'Our custom-built, stateless, immutable OS that powers:',
+        body: 'From AI to enterprise apps, deploy seamlessly anywhere.',
        subpoints: [
          'MicroVMs & containerized environments (Kubernetes, Docker, Firecracker).',
          'AI inference and training workloads.',
          'Web3 infrastructure and federated learning models.',
        ],
      },
      {
-        heading: 'No Hyperscalers',
+        heading: 'Transparent economics',
-        body: 'Fully independent infrastructure managed by intelligent agents on bare metal.',
+        body: 'Pay-as-you-go, no lock-in, always efficient.',
      },
    ],
  },
  {
    id: 'data',
-    label: 'Data',
+    label: 'Storage',
-    title: 'Data',
+    title: 'Storage',
-    description: 'Private, distributed, and AI-native storage with user sovereignty at its core.',
+    description: 'Private. Efficient. Interoperable. Mycelium Storage keeps data where it belongs—under your control. Encrypted, distributed, and locality-aware, it delivers fast, compliant, and sustainable data management across regions and clouds.',
-    cardText: 'Quantum-safe encryption and distributed redundancy protect your data while maintaining lightning-fast access.',
+    cardText: 'Mycelium Storage keeps data where it belongs—under your control with quantum-safe encryption.',
    bullets: [
      {
-        heading: 'Privacy-First',
+        heading: 'Quantum-safe design',
-        body: 'End-to-end encryption and redundancy, with no central control.',
+        body: 'Secured in use, in transit, and at rest against next-generation threats.',
      },
      {
-        heading: '10x Efficient',
+        heading: 'Geo-aware',
-        body: 'Optimized for performance and sustainability, far surpassing traditional cloud.',
+        body: 'Data stays within chosen jurisdictions to meet sovereignty and compliance needs.',
      },
      {
-        heading: 'Geo-Aware & Compliant',
+        heading: 'Energy-efficient',
-        body: "Data stays where it's supposed to, satisfying regional policies and privacy standards.",
+        body: 'Erasure coding and smart replication cut storage bloat and power use.',
      },
      {
        heading: 'Open protocols',
        body: 'Compatible with S3, IPFS, NFS, and other industry standards.',
      },
      {
        heading: 'Unified control',
        body: 'Manage storage from edge to core through a single interface.',
      },
    ],
  },
@@ -99,24 +106,59 @@ const tabs: Tab[] = [
    label: 'Network',
    title: 'Network',
    description:
-      'A secure, peer-to-peer internet backbone, self-sustaining, censorship-resistant, and optimized for performance.',
+      'Sovereign. Secure. Resilient. Mycelium Network forms a cryptographically verified mesh that connects every node, datacenter, and user into one sovereign backbone. It ensures private, reliable, and compliant connectivity across borders — built for a world where resilience and control matter more than ever.',
-    cardText: 'Mesh topology with intelligent routing creates a resilient network that adapts to changing conditions.',
+    cardText: 'Mycelium Network forms a cryptographically verified mesh that connects every node into one sovereign backbone.',
    bullets: [
      {
-        heading: 'End-to-End Encryption',
+        heading: 'End-to-end encrypted mesh',
-        body: 'All communications are secured by design.',
+        body: 'Private IPv6 overlay with identity-bound nodes and no intermediaries.',
      },
      {
-        heading: 'Shortest-Path Routing',
+        heading: 'Shortest-path routing',
-        body: 'Dynamically finds the most efficient path across the network, reducing latency and cost.',
+        body: 'Dynamically connects peers through the most direct verified route.',
      },
      {
-        heading: 'No Middlemen',
+        heading: 'Self-healing connectivity',
-        body: 'Fully peer-to-peer, removing reliance on centralized ISPs or DNS providers.',
+        body: 'Automatically restores links when paths degrade or fail.',
      },
      {
-        heading: 'Censorship Resistance',
+        heading: 'Integrated name service',
-        body: 'Built to thrive under pressure, even in restricted or controlled regions.',
+        body: 'Gateways handle DNS and content delivery within the mesh.',
      },
      {
        heading: 'Policy-aware by design',
        body: 'Data stays within chosen jurisdictions for full sovereignty.',
      },
    ],
  },
  {
    id: 'gpu',
    label: 'GPU Fabric',
    title: 'GPU Fabric',
    description:
      'Intelligent. Scalable. Sovereign. A distributed GPU network that runs AI and rendering workloads closer to data—improving latency, utilization, and control.',
    cardText:
      'A distributed GPU network that runs AI and rendering workloads closer to data—improving latency, utilization, and control.',
    bullets: [
      {
        heading: 'Federated architecture',
        body: 'Securely aggregates and manages GPU capacity across datacenters and edge nodes.',
      },
      {
        heading: 'AI-driven orchestration',
        body: 'Agents route workloads dynamically for peak performance and zero idle time.',
      },
      {
        heading: 'Open ecosystem',
        body: 'Pre-integrated open-source LLMs, databases, and developer tools for instant AI deployment.',
      },
      {
        heading: 'Local and sovereign',
        body: 'Inference and training stay within borders, under your governance.',
      },
      {
        heading: 'Transparent economics',
        body: 'Pay-per-use, no vendor lock-in, full ownership of data and outcomes.',
      },
    ],
  },
@@ -159,10 +201,23 @@ 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>
+        <div className="flex items-center justify-center gap-4">
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
            Software Primitives
          </p>
          <span
            aria-hidden="true"
            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
          />
        </div>
        <h2 className="mt-4 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 +230,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 +251,21 @@ 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
-                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
+                      key={bullet.heading}
-                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
+                      className="group rounded-2xl border border-white/10 bg-black p-4 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:bg-white/5 hover:shadow-[0_24px_48px_-36px_rgba(56,189,248,0.45)]"
                    >
                      <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 +275,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 transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/50 hover:bg-white/5 hover:shadow-[0_30px_72px_-48px_rgba(56,189,248,0.45)] 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 +290,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],
--- a/src/pages/technology/components/TechnologyHero.tsx
+++ b/src/pages/technology/components/TechnologyHero.tsx
@@ -1,38 +1,22 @@
 import { motion } from 'framer-motion';
 import { PrimaryButton } from '../../../components/ui/PrimaryButton';
 export const TechnologyHero = () => {
  return (
-    <section className="relative overflow-hidden rounded-3xl text-white">
+    <section
-      <img
+      aria-label="GeoMind technology showcase"
-        src="/images/hometech.jpg"
+      className="group relative min-h-[420px] overflow-hidden rounded-[32px] border border-white/10 bg-slate-950 text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.85)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/70 hover:shadow-[0_45px_120px_-45px_rgba(122,141,249,0.55)] sm:min-h-[520px] lg:min-h-[600px]"
-        alt=""
+    >
-        className="absolute inset-0 h-full w-full object-cover"
+      <video
        className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
        src="/videos/galaxy_vid.mp4"
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
      />
-      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/75" />
+      <div className="absolute bottom-[-20%] right-[-10%] h-[420px] w-[420px] rounded-full bg-[rgba(90,107,240,0.25)] blur-3xl transition-transform duration-700 group-hover:scale-110" />
-      <motion.div
+      <div className="relative z-10 h-full w-full px-6 py-24 sm:px-12 lg:px-20 lg:py-32">
-        initial={{ opacity: 0, y: 32 }}
+        <span className="sr-only">Immersive background video highlighting GeoMind technology.</span>
-        whileInView={{ opacity: 1, y: 0 }}
+      </div>
        viewport={{ once: true, amount: 0.3 }}
        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">
          Technology
        </p>
        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
          The Foundation of the Next-Generation Datacenter
        </h1>
        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
          GeoMind combines hardware and revolutionary software to deliver secure, scalable, and
          sovereign cloud and AI infrastructure. Built for efficiency, sustainability, and
          profitability, it empowers organizations to run workloads, scale globally, and monetize
          excess capacity.
        </p>
        <div className="mt-10">
          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
        </div>
      </motion.div>
    </section>
  );
 };
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -5,30 +5,42 @@ const stackItems = [
    title: 'Tier S Datacenters',
    image: '/images/tiers.png',
    description:
-      'Strategically deployed, containerized datacenters built for autonomy and resilience. Self-healing infrastructure that runs AI & cloud workloads at the edge while delivering up to 3x lower energy use, improved security, and significantly higher ROI.',
+      'High-density, liquid-cooled autonomous datacenters engineered for sustained performance and efficiency. The optimal backbone for national platforms and enterprise workloads, delivering higher ROI with up to 3× lower energy use and a dramatically smaller carbon footprint than hyperscalers.',
  },
  {
    title: 'Tier H Datacenters',
    image: '/images/tierh.png',
    description:
-      'Lightweight edge nodes for homes, offices, and campuses that turn properties into secure, reward-earning contributors to global infrastructure. Easy to deploy and manage, designed for planetary-scale rollout without requiring specialist technical skills.',
+      'Distributed, self-managing edge nodes that bring compute and storage closer to users. No cooling required, minimal power draw, and seamless scalability — cutting capex and opex while supporting ESG goals through localized, energy-efficient infrastructure.',
  },
 ];
 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">
+          <div className="flex items-center justify-center gap-4">
-            Technology Stack
+            <span
-          </p>
+              aria-hidden="true"
-          <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+              className="hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block"
            />
            <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
              Hardware Tiers
            </p>
            <span
              aria-hidden="true"
              className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
            />
          </div>
          <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,
+          GeoMind’s hardware ecosystem empowers businesses and countries to build, operate, and scale sovereign AI infrastructure within their own borders.
-            preparing you for the AI workforce of the future.
+          Secure, local, and energy-efficient by design, it delivers the performance and autonomy needed to power the AI workforce of the future.
          </p>
        </div>
        <div className="mt-12 grid gap-6 lg:grid-cols-2">
@@ -39,14 +51,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="flex h-full flex-col overflow-hidden rounded-3xl bg-black text-center 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">
+              <div className="flex flex-1 flex-col items-center gap-4 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="text-sm leading-6 text-slate-300">{item.description}</p>
              </div>
            </motion.div>
          ))}
--- a/src/pages/usecases/UseCasesPage.tsx
+++ b/src/pages/usecases/UseCasesPage.tsx
@@ -3,7 +3,7 @@ import { UseCasesGrid } from './components/UseCasesGrid';
 export const UseCasesPage = () => {
  return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
      <UseCasesHero />
      <UseCasesGrid />
    </div>
--- a/src/pages/usecases/components/UseCasesGrid.tsx
+++ b/src/pages/usecases/components/UseCasesGrid.tsx
@@ -1,89 +1,169 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '../../../lib/cn';
 import { buttonGhostLightClass } from '../../../lib/buttonStyles';
 import ContactForm from '../../../components/ui/ContactForm';
 const useCases = [
  {
    title: 'Tier-S Datacenters',
    description:
      "GeoMind's datacenters are 60% more efficient, disaster-resistant, highly secure, fully private, and can be deployed in weeks rather than years, offering a faster, safer, and smarter solution for modern data needs.",
    image: '/images/tier-s.jpeg',
  },
  {
    title: 'Tier-H Datacenters',
    description:
      "GeoMind's distributed datacenter architecture extends from core to edge, seamlessly scaling into homes, offices, and communities. Its ultra-efficient AI, compute, and storage nodes deliver unmatched cost efficiency, performance, and scalability.",
    image: '/images/tier-h.jpeg',
  },
  {
    title: 'Project Mycelium',
    highlight: 'Decentralized Tools',
    description:
-      'Project Mycelium is a core use case of our ecosystem, providing a decentralized, scalable, and secure infrastructure. Built on a global network of independent nodes, it allows individuals and businesses to participate in a more open, distributed, and participatory cloud and Internet model.',
+      'Project Mycelium turns GeoMind primitives into community services, giving underserved regions, nomads, and privacy seekers decentralized storage, secure networking, and personal agents while sustaining host demand.',
    image: '/images/mycelium.jpeg',
  },
  {
-    title: 'Zanzibar Digital Free Zone',
+    title: 'Digital Free Zone',
    highlight: 'Sovereign Innovation Zone',
    description:
-      'Zanzibar Digital Free Zone offers a sovereign jurisdiction for digital innovation, allowing businesses to operate with regulatory clarity and independent dispute resolution. It supports the emerging Real World Assets (RWA) economy, enabling compliant management of digital and physical assets.',
+      'An economic bridge in Zanzibar for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products on GeoMind-powered future-ready infrastructure.',
    image: '/images/freezone.jpeg',
    titleOffset: '-mt-2 sm:-mt-3',
  },
  {
    title: 'COOP Cloud',
    highlight: 'People-Powered Cloud',
    description:
-      'COOP Cloud is a global cooperative where every user is a member with one vote. Offering a decentralized alternative to centralized cloud providers, it empowers users to deploy nodes worldwide, aiming to create Augmented Collective Intelligence with over one million nodes globally.',
+      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure and launch services together on GeoMind, building a self-sustaining digital infrastructure that serves their communities.',
    image: '/images/coop.jpeg',
    titleOffset: '-mt-3 sm:-mt-4',
  },
  {
-    title: 'Sovereign Cloud & Internet for Countries',
+    title: 'Cloud for Nations',
    highlight: 'Digital Sovereignty',
    description:
-      'Most countries lack independent Internet infrastructure and rely on foreign operators. GeoMind enables countries to deploy their own sovereign Cloud & Internet, ensuring economic benefits, data sovereignty, and local control. Several governments are already exploring this.',
+      'Most governments and citizens rely on foreign clouds, exposing finances and national security. GeoMind equips physical and digital states with sovereign infrastructure so they control data, AI, and services on their own terms.',
    image: '/images/countries.jpeg',
  },
  {
    title: 'Real Estate Deployments',
    highlight: 'Underutilized Spaces',
    description:
      'Deploy GeoMind in underutilized spaces with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty on tech that requires minimal maintenance.',
    image: '/images/hometech2.jpg',
    featured: true,
  },
 ];
 export const UseCasesGrid = () => {
  const [isContactFormOpen, setIsContactFormOpen] = useState(false);
  const [formType, setFormType] = useState<'deploy' | 'offtake' | 'investor'>('deploy');
  const handleOpenForm = (type: 'deploy' | 'offtake' | 'investor') => {
    setFormType(type);
    setIsContactFormOpen(true);
  };
  return (
-    <section className="py-16 lg:py-24">
+    <section className="px-4 py-16 text-slate-100 sm:px-0 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 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
      >
        <h2 className="text-center text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
        <p className="mt-5 max-w-4xl text-center text-base text-slate-300 sm:text-lg sm:mx-auto">
          From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
          compute into deployable products. Each use case blends hyperscale performance with edge
          responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
          where it is needed.
        </p>
        <div className="mt-12 -mx-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-8 sm:overflow-visible sm:pb-0 sm:snap-none xl:grid-cols-4">
          {useCases.map((useCase, index) => (
            <motion.article
              key={useCase.title}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.25 }}
              transition={{ duration: 0.5, delay: index * 0.05 }}
              className={cn(
                'group relative flex h-full min-w-[80vw] snap-center flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)] sm:min-w-0',
                useCase.featured && 'min-w-[88vw] sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-start sm:gap-8'
              )}
            >
              <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                <div className="absolute inset-0 bg-gradient-to-br from-brand-500/15 via-transparent to-brand-200/10" />
              </div>
              <div
                className={cn(
                  'relative h-48 overflow-hidden sm:h-56 lg:h-full',
                  useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
                )}
              >
                <img
                  src={useCase.image}
                  alt={useCase.title}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-transparent" />
              </div>
              <div
                className={cn(
                  'relative flex h-full flex-col items-center px-6 pb-6 pt-6 text-center sm:px-8 sm:pb-8 sm:pt-8',
                  useCase.featured && 'sm:flex-1 sm:px-10 sm:pb-12 sm:pt-12'
                )}
              >
                <div className={cn('flex flex-col items-center gap-3', useCase.titleOffset)}>
                  <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
                    {useCase.highlight}
                  </span>
                  <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
                </div>
                <p className="mt-6 text-sm leading-6 text-slate-300 sm:mt-8">{useCase.description}</p>
              </div>
            </motion.article>
          ))}
        </div>
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
-          transition={{ duration: 0.6, ease: 'easeOut' }}
+          transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
-          className="relative z-10"
+          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-8 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
        >
-          <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Use Cases</h2>
+          <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
-          <p className="mt-5 max-w-4xl text-base text-slate-600 sm:text-lg">
+            <div className="max-w-2xl space-y-4">
-            GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
+              <p className="text-xs font-semibold uppercase tracking-[0.4em] text-white/60">
-            connecting Tier S hyperscale facilities with Tier H local nodes to create a unified,
+                Become a Partner
-            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
+              <h3 className="text-2xl font-semibold sm:text-3xl">
-            power the transformative use cases below, driving a more secure, efficient, and autonomous
+                Build sovereign infrastructure with GeoMind&apos;s ecosystem.
-            digital future.
+              </h3>
-          </p>
+              <p className="text-base text-white/70">
-          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                Pick the path that delivers outcomes fast: deploy capacity, lock in offtake, or invest in
-            {useCases.map((useCase, index) => (
+                the platform redefining cloud infrastructure.
-              <motion.article
+              </p>
-                key={useCase.title}
+            </div>
-                initial={{ opacity: 0, y: 24 }}
+            <div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-1">
-                whileInView={{ opacity: 1, y: 0 }}
+              <button
-                viewport={{ once: true, amount: 0.25 }}
+                onClick={() => handleOpenForm('deploy')}
-                transition={{ duration: 0.5, delay: index * 0.05 }}
+                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
                className="overflow-hidden rounded-3xl border border-slate-100 bg-white/90 shadow-subtle"
              >
-                <div className="relative h-48 overflow-hidden">
+                Deploy Capacity
-                  <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+              </button>
-                  <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+              <button
-                  <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+                onClick={() => handleOpenForm('offtake')}
-                    {useCase.title}
+                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
-                  </h3>
+              >
-                </div>
+                Offtake Capacity
-                <p className="p-6 text-sm leading-6 text-slate-600">{useCase.description}</p>
+              </button>
-              </motion.article>
+              <button
-            ))}
+                onClick={() => handleOpenForm('investor')}
                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
              >
                Invest in the Tech
              </button>
            </div>
          </div>
        </motion.div>
-      </div>
+      </motion.div>
      <ContactForm
        isOpen={isContactFormOpen}
        onClose={() => setIsContactFormOpen(false)}
        title={formType === 'deploy' ? 'Deploy Capacity' : formType === 'offtake' ? 'Offtake Capacity' : 'Invest in the Tech'}
        formType={formType}
      />
    </section>
  );
 };
--- a/src/pages/usecases/components/UseCasesHero.tsx
+++ b/src/pages/usecases/components/UseCasesHero.tsx
@@ -2,31 +2,31 @@ import { motion } from 'framer-motion';
 export const UseCasesHero = () => {
  return (
-    <section className="relative overflow-hidden rounded-3xl text-white">
+    <section className="group relative flex overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#050a21] via-[#11173a] to-[#221852] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(122,141,249,0.45)]">
      <img
-        src="/images/uscase_BG.png"
+        src="/images/mesh2.gif"
        alt=""
-        className="absolute inset-0 h-full w-full object-cover"
+        className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
      />
-      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(122,141,249,0.35),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-brand-400/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
      <motion.div
        initial={{ opacity: 0, y: 32 }}
-        whileInView={{ opacity: 1, y: 0 }}
+        animate={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
+        className="relative z-10 flex w-full flex-col items-center px-6 py-24 text-center sm:px-12 lg:px-20 lg:py-28"
      >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
          <span className="h-px w-10 bg-white/40" />
          Real World Applications
-        </p>
+          <span className="h-px w-10 bg-white/40" />
-        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
+        </span>
        <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
          Designed for Real-World Impact
        </h1>
-        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
+        <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
-          GeoMind empowers organizations to deploy secure, efficient, and sovereign cloud and AI
+          GeoMind empowers organizations to deploy secure, efficient, and sovereign infrastructure. From enterprises to governments, our use cases demonstrate GeoMind's potential to generate value, ensure sovereignty, and support modern workloads.
          infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
          next-generation datacenters generate value, ensure sovereignty, and support modern AI,
          cloud, and edge workloads.
        </p>
      </motion.div>
    </section>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,12 +20,26 @@ export default {
          800: '#343b8a',
          900: '#2d336c',
        },
-        ink: '#111827',
+        ink: '#000000',
-        mist: '#f6f8fb',
+        mist: '#fcfcf6',
      },
      boxShadow: {
        subtle: '0 20px 45px -25px rgba(18, 28, 132, 0.35)',
      },
      keyframes: {
        blink: {
          '0%, 100%': { opacity: 1 },
          '50%': { opacity: 0.35 },
        },
        'data-stream': {
          '0%': { backgroundPosition: '0% 50%' },
          '100%': { backgroundPosition: '200% 50%' },
        },
      },
      animation: {
        blink: 'blink 0.9s steps(2, start) infinite',
        'data-stream': 'data-stream 2.75s linear infinite',
      },
    },
  },
  plugins: [],
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,6 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
  plugins: [react()],
  server: {
-    allowedHosts: ['coucha-royal-nontannic.ngrok-free.dev'],
+    allowedHosts: ['coucha-royal-nontannic.ngrok-free.dev', 'reasonedly-avifaunal-wanda.ngrok-free.dev', 'unattributive-evia-inanimately.ngrok-free.dev'],
  },
 })
Author	SHA1	Message	Date
Emre	221edb106a	updates from sacha	2025-10-12 16:12:20 +03:00
Emre	e0f097c548	Update UseCasesGrid component	2025-10-11 18:06:37 +03:00
Emre	68526abff3	improvements	2025-10-11 17:22:24 +03:00
Emre	5df98adbaf	fixes	2025-10-11 13:38:27 +03:00
Emre	d3fd2db514	updates	2025-10-11 13:09:23 +03:00
Emre	9451d22494	style updates	2025-10-11 11:17:38 +03:00
Emre	c0f08ad3fa	fixes	2025-10-11 07:05:44 +03:00
Emre	31fe89eabb	black theme complete	2025-10-11 06:18:46 +03:00
Emre	16c1a09bc4	ready to add animations	2025-10-11 02:55:49 +03:00
Emre	60fa49c0ef	updates	2025-10-11 00:33:25 +03:00
Emre	f450d61ccf	initial dev	2025-10-10 23:03:48 +03:00
Emre	43682f9fbe	mission try	2025-10-10 22:20:13 +03:00
		`@@ -1 +0,0 @@`
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>