fixes

black theme complete
ready to add animations
2025-10-11 07:05:44 +03:00 · 2025-10-11 06:18:46 +03:00 · 2025-10-11 02:55:49 +03:00 · 2025-10-11 00:33:25 +03:00 · 2025-10-10 23:03:48 +03:00 · 2025-10-10 22:20:13 +03:00
27 changed files with 565 additions and 643 deletions
--- a/public/images/ceo-kristof.png
+++ b/public/images/ceo-kristof.png
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,104 +1,49 @@
-import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';

-type FooterLink = {
-  label: string;
-  href: string;
-  target?: '_blank' | '_self';
-};
+const footerLinksColumn1 = [
+  { label: 'About', to: '/about' },
+  { label: 'Solutions', to: '/solutions' },
+  { label: 'Use Cases', to: '/usecases' },
+];

-type FooterColumn = {
-  title: string;
-  links: FooterLink[];
-};
-
-const footerColumns: FooterColumn[] = [
-  {
-    title: 'GeoMind',
-    links: [
-      { label: 'Technology', href: '/technology' },
-      { label: 'Use Cases', href: '/usecases' },
-    ],
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'Manual', href: 'https://manual.grid.tf/', target: '_blank' },
-      { label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
-    ],
-  },
+const footerLinksColumn2 = [
+  { label: 'Manual', to: '/manual' },
+  { label: 'Support', to: '/support' },
+  { label: 'Privacy', to: '/privacy' },
 ];

 export const Footer = () => {
+  const year = new Date().getFullYear();
+
  return (
-    <footer className="border-t border-slate-200 bg-white">
-      <motion.div
-        initial={{ opacity: 0, y: 16 }}
-        whileInView={{ opacity: 1, y: 0 }}
-        viewport={{ once: true, amount: 0.2 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="mx-auto flex max-w-6xl flex-col gap-8 px-6 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8"
-      >
-        <div className="flex items-center gap-3">
-          <img
-            src="/images/geomind_logo.png"
-            alt="Geomind logo"
-            className="h-12 w-12 rounded-full object-contain shadow-subtle"
-          />
-          <div>
-            <p className="text-sm font-semibold tracking-[0.35em] text-slate-500">
-              GEOMIND
-            </p>
-            <p className="mt-2 max-w-xs text-sm text-slate-500">
-              The datacenter standard for the next era of cloud and AI.
-            </p>
+    <footer className="bg-black px-6 pb-16 pt-12 sm:px-10 lg:px-20">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-white/10 pt-12 md:flex-row md:justify-between">
+        <div className="space-y-3">
+          <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
+            Geomind
+          </span>
+          <p className="max-w-sm text-sm font-semibold text-white">
+             The datacenter standard for the next era of cloud and AI.          </p>
+        </div>
+        <nav className="grid grid-cols-2 gap-x-24 gap-y-4 text-xs font-medium uppercase tracking-[0.3em] text-white md:ml-auto self-start">
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn1.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
+            ))}
          </div>
-        </div>
-        <div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-2 lg:ml-auto lg:max-w-md">
-          {footerColumns.map((column) => (
-            <div key={column.title}>
-              <p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">
-                {column.title}
-              </p>
-              <ul className="mt-3 space-y-3 text-sm font-medium text-slate-600">
-                {column.links.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      target={link.target}
-                      rel={link.target === '_blank' ? 'noopener noreferrer' : undefined}
-                      className="transition-colors duration-300 hover:text-brand-600"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </motion.div>
-      <div className="bg-mist py-4">
-        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 text-xs text-slate-500 sm:flex-row lg:px-8">
-          <span>Copyright {new Date().getFullYear()} GeoMind. All rights reserved.</span>
-          <div className="flex gap-4">
-            <a
-              href="https://www.linkedin.com/company/tf9/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              LinkedIn
-            </a>
-            <a
-              href="https://github.com/threefoldtech"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-brand-600"
-            >
-              GitHub
-            </a>
+          <div className="flex flex-col items-start gap-4">
+            {footerLinksColumn2.map(({ label, to }) => (
+              <Link key={to} to={to} className="text-white transition-colors duration-300">
+                {label}
+              </Link>
+            ))}
          </div>
-        </div>
+        </nav>
+      </div>
+      <div className="mx-auto mt-12 flex w-full max-w-7xl items-center justify-between text-xs uppercase tracking-[0.3em] text-white">
+        <span>© {year} Geomind. All rights reserved.</span>
      </div>
    </footer>
  );
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,23 +4,15 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '../../lib/cn';

 const navItems = [
-  { label: 'Home', to: '/' },
  { label: 'About', to: '/about' },
-  { label: 'Technology', to: '/technology' },
+  { label: 'Solutions', to: '/technology' },
  { label: 'Use Cases', to: '/usecases' },
 ];

 export const Header = () => {
-  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation();
-
-  useEffect(() => {
-    const onScroll = () => setIsScrolled(window.scrollY > 12);
-    onScroll();
-    window.addEventListener('scroll', onScroll);
-    return () => window.removeEventListener('scroll', onScroll);
-  }, []);
+  const isHome = location.pathname === '/';

  useEffect(() => {
    setIsMenuOpen(false);
@@ -33,39 +25,44 @@ export const Header = () => {
      transition={{ duration: 0.6, ease: 'easeOut' }}
      className={cn(
        'fixed inset-x-0 top-0 z-50 transition-all duration-500',
-        isScrolled ? 'bg-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
+        isHome ? 'bg-transparent' : 'bg-black',
      )}
    >
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
-        <Link to="/" className="flex items-center">
-          <img
-            src="/images/geomind_logo.png"
-            alt="Geomind logo"
-            className="h-12 w-auto object-contain"
-          />
-        </Link>
-        <nav className="hidden items-center gap-8 md:flex">
-          {navItems.map(({ label, to }) => (
-            <NavLink
-              key={to}
-              to={to}
-              className={({ isActive }) =>
-                cn(
-                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
-                  isActive && 'text-brand-600',
-                )
-              }
-            >
-              {label}
-            </NavLink>
-          ))}
-          <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"
-          >
-            Contact
-          </a>
-        </nav>
+      <div className="flex w-full items-center justify-between px-6 py-4 sm:px-10 lg:px-16">
+        <div className="flex items-center gap-8">
+          <Link to="/" className="flex items-center">
+            <img
+              src="/images/geomind_logo.png"
+              alt="Geomind logo"
+              className="h-8 w-auto object-contain"
+            />
+          </Link>
+          <nav className="hidden items-center gap-8 md:flex">
+            {navItems.map(({ label, to }) => (
+              <NavLink
+                key={to}
+                to={to}
+                className={({ isActive }) =>
+                  cn(
+                    'text-sm font-medium uppercase tracking-wide text-white transition-colors duration-300 hover:text-white/80',
+                    isActive && 'text-white',
+                  )
+                }
+              >
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+        </div>
+        <a
+          href="mailto:support@threefold.tech"
+          className={cn(
+            'rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',
+            'border border-brand-200 bg-white text-brand-700 shadow-subtle hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:ring-offset-white',
+          )}
+        >
+          Contact
+        </a>
        <button
          type="button"
          aria-label="Toggle navigation"
@@ -75,19 +72,22 @@ export const Header = () => {
          <span className="relative block h-5 w-6">
            <span
              className={cn(
-                'absolute left-0 top-1 h-0.5 w-full bg-ink transition-all duration-300',
+                'absolute left-0 top-1 h-0.5 w-full transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                isMenuOpen && 'translate-y-2 rotate-45',
              )}
            />
            <span
              className={cn(
-                'absolute left-0 top-3 h-0.5 w-full bg-ink transition-all duration-300',
+                'absolute left-0 top-3 h-0.5 w-full transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                isMenuOpen && 'opacity-0',
              )}
            />
            <span
              className={cn(
-                'absolute left-0 top-5 h-0.5 w-4 bg-ink transition-all duration-300',
+                'absolute left-0 top-5 h-0.5 w-4 transition-all duration-300',
+                isHome ? 'bg-ink' : 'bg-white',
                isMenuOpen && 'left-0 top-3 w-full -rotate-45',
              )}
            />
@@ -101,17 +101,20 @@ export const Header = () => {
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -16 }}
            transition={{ duration: 0.25, ease: 'easeOut' }}
-            className="border-t border-slate-100 bg-white/95 px-6 py-4 shadow-lg md:hidden"
+            className={cn(
+              'px-6 py-4 shadow-lg md:hidden',
+              isHome ? 'border-t border-slate-100 bg-mist/95' : 'border-t border-white/10 bg-black',
+            )}
          >
-            <div className="mx-auto flex max-w-6xl flex-col gap-4">
+            <div className="flex flex-col gap-4">
              {navItems.map(({ label, to }) => (
                <NavLink
                  key={to}
                  to={to}
                  className={({ isActive }) =>
                    cn(
-                      'text-base font-medium uppercase tracking-wide text-slate-600',
-                      isActive && 'text-brand-700',
+                      'text-base font-medium uppercase tracking-wide text-white transition-colors duration-300',
+                      isActive && 'text-white',
                    )
                  }
                >
@@ -120,7 +123,10 @@ export const Header = () => {
              ))}
              <a
                href="mailto:support@threefold.tech"
-                className="rounded-full border border-brand-200 bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle transition-colors duration-300 hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+                className={cn(
+                  'rounded-full px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2',
+                  'border border-brand-200 bg-brand-600 hover:bg-brand-700 focus-visible:ring-offset-white',
+                )}
              >
                Contact
              </a>
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,24 +1,41 @@
 import { type ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Header } from './Header';
 import { Footer } from './Footer';
 import { ScrollToTop } from './ScrollToTop';
+import { cn } from '../../lib/cn';

 type LayoutProps = {
  children: ReactNode;
 };

 export const Layout = ({ children }: LayoutProps) => {
+  const { pathname } = useLocation();
+  const isHome = pathname === '/';
+  const darkRoutes = ['/about', '/technology', '/usecases'];
+  const isDarkPage = darkRoutes.some((route) => pathname.startsWith(route));
+
  return (
-    <div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
+    <div
+      className={cn(
+        'relative min-h-screen',
+        isDarkPage ? 'bg-black text-slate-100' : 'bg-mist text-ink',
+        !isHome && 'overflow-hidden',
+      )}
+    >
      <ScrollToTop />
-      {/* Decorative gradient blurs */}
-      <div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
-      <div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
-      <div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
-      
      <Header />
-      <main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
-      <Footer />
+      <main
+        className={cn(
+          'relative z-10',
+          isHome
+            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
+            : 'mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32',
+        )}
+      >
+        {children}
+      </main>
+      {!isHome && <Footer />}
    </div>
  );
 };
--- a/src/index.css
+++ b/src/index.css
@@ -5,8 +5,8 @@
@tailwind utilities;

 :root {
-  color: #111827;
-  background-color: #f6f8fb;
+  color: #000000;
+  background-color: rgb(252 252 246);
 }

 html,
--- a/src/pages/about/AboutPage.tsx
+++ b/src/pages/about/AboutPage.tsx
@@ -4,7 +4,7 @@ import { TrackRecord } from './components/TrackRecord';

 export const AboutPage = () => {
  return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
      <AboutHero />
      <MissionVision />
      <TrackRecord />
--- a/src/pages/about/components/AboutHero.tsx
+++ b/src/pages/about/components/AboutHero.tsx
@@ -16,7 +16,7 @@ export const AboutHero = () => {
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
      >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
          About GeoMind
        </p>
        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
--- a/src/pages/about/components/MissionVision.tsx
+++ b/src/pages/about/components/MissionVision.tsx
@@ -1,58 +1,43 @@
 export const MissionVision = () => {
  return (
-    <section className="relative py-20 lg:py-28">
+    <section className="relative py-20 text-slate-100 lg:py-28">
      <div className="relative mx-auto max-w-6xl px-6 lg:px-12">
-        <div className="flex flex-col gap-12 rounded-[32px] bg-gradient-to-br from-white via-white to-brand-50/40 p-8 shadow-xl ring-1 ring-brand-100/40 sm:p-12 lg:grid lg:grid-cols-[minmax(0,0.9fr)_1fr] lg:items-center">
-          <div className="order-1 lg:order-none">
-            <figure className="relative mx-auto max-w-sm overflow-hidden rounded-[28px] bg-gradient-to-br from-emerald-100/50 via-white to-brand-100/40 p-6 shadow-lg ring-1 ring-brand-200/40">
-              <div className="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
-                src="/images/ceo-kristof.png"
-                alt="Kristof De Spiegeleer, Founder and CEO of GeoMind"
-                className="relative z-10 mx-auto w-full max-w-xs object-cover"
-              />
-              <figcaption className="relative z-10 mt-6 text-center text-sm font-medium text-slate-500">
-                Kristof De Spiegeleer &mdash; Founder &amp; CEO
-              </figcaption>
-            </figure>
+        <div className="mx-auto max-w-3xl space-y-8">
+          <div className="flex items-center gap-4">
+            <div className="h-px flex-1 bg-gradient-to-r from-brand-500/40 via-brand-300/40 to-transparent" />
+            <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+              Technology with Purpose
+            </span>
          </div>
-          <div className="relative flex flex-col gap-8 rounded-3xl bg-white/90 p-8 shadow-inner ring-1 ring-brand-100/50 backdrop-blur">
-            <div className="flex items-center gap-4">
-              <div className="h-px flex-1 bg-gradient-to-r from-brand-500/50 via-brand-300/50 to-transparent" />
-              <span className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
-                Technology with Purpose
-              </span>
-            </div>
-            <div className="relative">
-              <span
-                aria-hidden="true"
-                className="float-left mr-3 -mt-3 text-6xl font-serif text-brand-500/25 leading-none"
-              >
-                “
-              </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 className="relative">
+            <span
+              aria-hidden="true"
+              className="float-left mr-3 -mt-3 text-6xl font-serif leading-none text-brand-400/40"
+            >
+              “
+            </span>
+            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
+              <p className="italic text-brand-200">
+                When we first started, our goal was simple, to build the foundation for the world’s digital future.
+                Over time, we realized that technology isn’t just about performance or scale, it’s about purpose.
+                It’s about people, communities, and the planet we share.
+              </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-white/10 pt-6 text-sm">
+            <p className="font-semibold text-white">Kristof De Spiegeleer</p>
+            <p className="text-slate-400">Founder &amp; CEO, GeoMind</p>
+          </div>
        </div>
      </div>
    </section>
--- a/src/pages/about/components/TrackRecord.tsx
+++ b/src/pages/about/components/TrackRecord.tsx
@@ -35,12 +35,12 @@ const records = [

 export const TrackRecord = () => {
  return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
-        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
+        <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
          Our Track Record
        </h2>
-        <p className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <p className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
          Our team has been at the forefront of datacenter and cloud innovation for decades,
          building systems that were faster, safer, and more scalable than anything before.
        </p>
@@ -53,13 +53,13 @@ export const TrackRecord = () => {
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.25 }}
            transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/90 p-8 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
          >
-            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-50 font-semibold text-brand-600">
+            <div className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-brand-500/15 font-semibold text-brand-200">
              {index + 1}
            </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{record.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{record.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{record.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{record.description}</p>
          </motion.div>
        ))}
      </div>
--- a/src/pages/home/HomePage.tsx
+++ b/src/pages/home/HomePage.tsx
@@ -1,17 +1,116 @@
-import { HomeHero } from './components/HomeHero';
-import { CoreTechnology } from './components/CoreTechnology';
-import { ImpactBanner } from './components/ImpactBanner';
-import { WhyGeomind } from './components/WhyGeomind';
-import { FinalCallToAction } from './components/FinalCallToAction';
+import { HeroSection } from './components/HeroSection';
+import { ScrollLockedSection } from './components/ScrollLockedSection';
+import { CtaSection } from './components/CtaSection';
+import { Footer } from '../../components/layout/Footer';
+
+const highlightTextClass = 'text-brand-500';
+
+const sections = [
+  {
+    id: 'datacenter-economy',
+    eyebrow: 'Datacenter Economy',
+    title: (
+      <>
+        The Datacenter Economy,{' '}
+        <span className={highlightTextClass}>Decentralized</span>
+      </>
+    ),
+    description:
+      'GeoMind enables everyone to profit from Cloud and AI infrastructure at any scale. Deploy hardware, sell your capacity to the marketplace, earn from day one.',
+    showButton: false,
+  },
+  {
+    id: 'deploy-anywhere',
+    eyebrow: 'Deployment Tiers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Deploy</span> Anywhere, Any Scale
+      </>
+    ),
+    description:
+      'Tier-H for homes and communities. Tier-S for enterprises and underutilized commercial space. Same economics, different scale.',
+    buttonText: 'Explore Hardware Tiers',
+    buttonLink: '/technology#hardware-tiers',
+  },
+  {
+    id: 'autonomous-stack',
+    eyebrow: 'Plug-and-Play',
+    title: (
+      <>
+        Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
+      </>
+    ),
+    description:
+      'Hardware ships with OS, Compute, Storage, Network, and GPU built-in. Fully autonomous operation eliminates vendor lock-in completely.',
+    buttonText: 'Explore Software Stack',
+    buttonLink: '/technology#software-stack',
+  },
+  {
+    id: 'capacity-marketplace',
+    eyebrow: 'Glocal Marketplace',
+    title: (
+      <>
+        Local Hardware, <span className={highlightTextClass}>Global</span> Liquidity
+      </>
+    ),
+    description: (
+      <>
+        Zero-OS partitions capacity into tradeable slices called <strong>Cloud Units (CU)</strong>. Use what you need. Sell idle capacity automatically on the marketplace.
+      </>
+    ),
+    buttonText: 'Explore Marketplace',
+    buttonLink: '/technology#marketplace',
+  },
+  {
+    id: 'dual-revenue',
+    eyebrow: 'Profit',
+    title: (
+      <>
+        <span className={highlightTextClass}>Earn</span> While You Operate
+      </>
+    ),
+    description:
+      'Run your workloads during business hours. Rent excess capacity 24/7. Cloud capacity and infrastructure becomes an income-generating asset, not a cost center.',
+    showButton: false,
+  },
+  {
+    id: 'economic-advantage',
+    eyebrow: 'Competitive Advantage',
+    title: (
+      <>
+        <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
+      </>
+    ),
+    description:
+      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Your competitive advantage is built in.',
+    showButton: false,
+  },
+  {
+    id: 'instant-demand',
+    eyebrow: 'Offtakers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Built-In</span> Customer Base
+      </>
+    ),
+    description:
+      'Initial enterprise offtake partners are in place. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
+    buttonText: 'See Use Cases',
+    buttonLink: '/usecases',
+  },
+];

 export const HomePage = () => {
  return (
-    <div className="space-y-12 lg:space-y-16">
-      <HomeHero />
-      <CoreTechnology />
-      <ImpactBanner />
-      <WhyGeomind />
-      <FinalCallToAction />
+    <div className="flex min-h-screen flex-col bg-black text-white">
+      <div className="flex flex-col">
+        <HeroSection />
+        {sections.map((section) => (
+          <ScrollLockedSection key={section.id} {...section} />
+        ))}
+        <CtaSection />
+      </div>
+      <Footer />
    </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,65 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+export const CtaSection = () => {
+  return (
+    <section className="snap-start bg-black">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
+        <motion.span
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+          className="text-xs font-semibold uppercase tracking-[0.4em] text-white"
+        >
+          Ready when you are
+        </motion.span>
+        <motion.h3
+          initial={{ opacity: 0, y: 24 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.15 }}
+          className="text-4xl font-medium leading-tight text-white sm:text-5xl"
+        >
+          Join the Infrastructure Revolution
+        </motion.h3>
+        <motion.p
+          initial={{ opacity: 0, y: 16 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-20%' }}
+          transition={{ duration: 0.7, ease: 'easeOut', delay: 0.25 }}
+          className="max-w-2xl text-lg text-white/70"
+        >
+          From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
+        </motion.p>
+        <div className="flex items-center justify-center gap-4">
+          <motion.div
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-20%' }}
+            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          >
+            <Link
+              to="/about"
+              className="rounded-full border border-white/20 bg-white/80 px-10 py-4 text-sm font-bold uppercase tracking-[0.35em] text-black transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white hover:shadow-[0_16px_36px_-24px_rgba(0,0,0,0.65)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+            >
+              About us
+            </Link>
+          </motion.div>
+          <motion.a
+            href="https://calendly.com/sachao/30min"
+            target="_blank"
+            rel="noopener noreferrer"
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-20%' }}
+            transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            className="rounded-full border border-white/20 bg-transparent px-10 py-4 text-sm font-bold uppercase tracking-[0.35em] text-white transition-transform duration-300 hover:-translate-y-0.5 hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+          >
+            Book a Meeting
+          </motion.a>
+        </div>
+      </div>
+    </section>
+  );
+};
--- 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,45 @@
+import { motion } from 'framer-motion';
+
+export const HeroSection = () => {
+  return (
+    <section className="relative snap-start">
+      <div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
+        <video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
+          <source src="/videos/hero.mp4" type="video/mp4" />
+        </video>
+
+        <div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
+          <motion.div
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut' }}
+            className="max-w-3xl space-y-6"
+          >
+           
+            <h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
+              The Planet's Sovereign Agentic Cloud
+            </h1>
+            <p className="max-w-xl text-lg text-white">
+              A new generation of decentralized cloud and AI infrastructure.
+              <br />
+              Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
+            </p>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
+            className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
+          >
+            <span>Scroll to explore</span>
+            <div className="flex items-center gap-3">
+              <span className="h-px w-16 bg-white/60" />
+              <span>Landing overview</span>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
--- 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,74 @@
+import { ReactNode, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+type ScrollLockedSectionProps = {
+  id: string;
+  eyebrow: string;
+  title: ReactNode;
+  description: ReactNode;
+  showButton?: boolean;
+  buttonText?: string;
+  buttonLink?: string;
+};
+
+export const ScrollLockedSection = ({
+  id,
+  eyebrow,
+  title,
+  description,
+  showButton = true,
+  buttonText = 'Directory Info',
+  buttonLink,
+}: ScrollLockedSectionProps) => {
+  const navigate = useNavigate();
+  const sectionRef = useRef<HTMLElement | null>(null);
+
+  return (
+    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-black">
+      <div className="sticky top-0 flex h-screen flex-col">
+        <div className="flex h-full w-full flex-col px-6 sm:px-10 lg:px-16">
+          {/* Text Section - Takes ~20% of vertical space */}
+          <div className="flex-shrink-0 space-y-4 pt-16 sm:pt-20 lg:pt-24">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-white">
+              {eyebrow}
+            </span>
+            <div className="max-w-3xl space-y-3">
+              <p className="text-2xl font-semibold leading-tight text-white sm:text-3xl lg:text-[2.25rem] lg:leading-[1.2]">
+                {title}
+              </p>
+              <p className="text-base leading-relaxed text-white/70 sm:text-lg">{description}</p>
+            </div>
+          </div>
+
+          {/* Animation Section - Takes ~80% of vertical space */}
+          <div className="flex flex-col items-center gap-6 py-10 sm:gap-8 sm:py-12 lg:gap-10">
+            <div className="mx-auto w-full border border-white/10 bg-black shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] aspect-[28/8]" />
+            {/* Button below animation card */}
+            {showButton && buttonLink && (
+              <div className="flex justify-center">
+                {buttonLink.startsWith('http') ? (
+                  <a
+                    href={buttonLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+                  >
+                    {buttonText}
+                  </a>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => navigate(buttonLink)}
+                    className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+                  >
+                    {buttonText}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
--- 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
@@ -5,7 +5,7 @@ import { TechnologicalBenefits } from './components/TechnologicalBenefits';

 export const TechnologyPage = () => {
  return (
-    <div className="space-y-12 lg:space-y-16">
+    <div className="space-y-12 text-slate-100 lg:space-y-16">
      <TechnologyHero />
      <TechnologyStack />
      <TechnologyArchitecture />
--- a/src/pages/technology/components/TechnologicalBenefits.tsx
+++ b/src/pages/technology/components/TechnologicalBenefits.tsx
@@ -31,15 +31,15 @@ const benefits = [

 export const TechnologicalBenefits = () => {
  return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
      <div className="mx-auto max-w-3xl text-center">
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-600">
-          Technological Benefits
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+          Marketplace
        </p>
-        <h2 className="mt-4 text-3xl font-semibold text-ink sm:text-4xl">
+        <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
          Infrastructure that Pays for Itself
        </h2>
-        <p className="mt-5 text-base text-slate-600 sm:text-lg">
+        <p className="mt-5 text-base text-slate-300 sm:text-lg">
          GeoMind doesn't just deliver advanced datacenter capabilities, it turns your existing
          infrastructure into a strategic asset. Run your own workloads securely and efficiently,
          while selling unused capacity to the network. With up to 10x lower energy consumption for
@@ -55,13 +55,13 @@ export const TechnologicalBenefits = () => {
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.25 }}
            transition={{ duration: 0.5, delay: index * 0.05 }}
-            className="flex h-full flex-col rounded-3xl border border-slate-100 bg-white/80 p-6 shadow-subtle backdrop-blur"
+            className="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-6 shadow-none backdrop-blur"
          >
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-50">
-              <benefit.icon className="h-7 w-7 text-brand-600" />
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-500/15">
+              <benefit.icon className="h-7 w-7 text-brand-200" />
            </div>
-            <h3 className="mt-6 text-lg font-semibold text-ink">{benefit.title}</h3>
-            <p className="mt-3 text-sm leading-6 text-slate-600">{benefit.description}</p>
+            <h3 className="mt-6 text-lg font-semibold text-white">{benefit.title}</h3>
+            <p className="mt-3 text-sm leading-6 text-slate-300">{benefit.description}</p>
          </motion.div>
        ))}
      </div>
--- a/src/pages/technology/components/TechnologyArchitecture.tsx
+++ b/src/pages/technology/components/TechnologyArchitecture.tsx
@@ -8,7 +8,7 @@ type Bullet = {
 };

 type Tab = {
-  id: 'zero-os' | 'compute' | 'data' | 'network';
+  id: 'zero-os' | 'compute' | 'gpu' | 'data' | 'network';
  label: string;
  title: string;
  description: string;
@@ -120,6 +120,33 @@ const tabs: Tab[] = [
      },
    ],
  },
+  {
+    id: 'gpu',
+    label: 'GPU Fabric',
+    title: 'Distributed GPU Fabric',
+    description:
+      'A sovereign mesh of GPU capacity that turns idle silicon into revenue while powering global AI workloads and collective intelligence.',
+    cardText:
+      'Autonomous allocation keeps GPUs saturated with high-value workloads, creating a lucrative marketplace for operators and builders alike.',
+    bullets: [
+      {
+        heading: 'Global GPU Federation',
+        body: 'Aggregates GPUs across homes, enterprises, and datacenters into a single pool so large-scale training and inference run close to data without hyperscaler dependence.',
+      },
+      {
+        heading: 'Revenue Engine',
+        body: 'Dynamic marketplace routes AI and rendering jobs to available GPUs, maximizing utilization and delivering steady cash flow to operators.',
+      },
+      {
+        heading: 'Sovereign Collective Intelligence',
+        body: 'Supports collaborative model training where communities contribute data and capacity, unlocking responsible AI networks governed by their stakeholders.',
+      },
+      {
+        heading: 'Zero-OS Integration',
+        body: 'Zero-OS provisions GPU-optimized microVMs with secure drivers, ensuring deterministic performance and remote attestation of every workload.',
+      },
+    ],
+  },
 ];

 // Floating particle component
@@ -159,10 +186,10 @@ export const TechnologyArchitecture = () => {
  }, [activeTab]);

  return (
-    <section className="py-16 lg:py-24">
+    <section className="py-16 text-slate-100 lg:py-24">
      <div className="mx-auto max-w-4xl text-center">
-        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Technology Architecture</h2>
-        <p className="mt-4 text-base text-slate-600 sm:text-lg">
+        <h2 className="text-3xl font-semibold text-white sm:text-4xl">Autonomous Software Stack</h2>
+        <p className="mt-4 text-base text-slate-300 sm:text-lg">
          Seamlessly integrating compute, storage, and networking, GeoMind's architecture delivers secure,
          scalable, and efficient infrastructure for AI, cloud, and next-generation workloads from edge to
          planetary scale.
@@ -175,10 +202,10 @@ export const TechnologyArchitecture = () => {
              key={tab.id}
              type="button"
              onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 ${
+              className={`rounded-full px-4 py-2 text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950 ${
                activeTab === tab.id
                  ? 'bg-brand-600 text-white shadow-subtle hover:bg-brand-700'
-                  : 'border border-slate-200 bg-white text-slate-500 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700 hover:shadow-md'
+                  : 'border border-white/10 bg-transparent text-slate-300 hover:border-brand-400/50 hover:bg-brand-500/10 hover:text-white hover:shadow-md'
              }`}
            >
              {tab.label}
@@ -196,18 +223,18 @@ export const TechnologyArchitecture = () => {
              className="grid gap-8 lg:grid-cols-[2fr,1fr]"
            >
              <div>
-                <h3 className="text-xl font-semibold text-brand-600">{current.title}</h3>
-                <p className="mt-2 text-base text-slate-600">{current.description}</p>
-                <ul className="mt-6 space-y-4 text-sm text-slate-600">
+                <h3 className="text-xl font-semibold text-brand-200">{current.title}</h3>
+                <p className="mt-2 text-base text-slate-300">{current.description}</p>
+                <ul className="mt-6 space-y-4 text-sm text-slate-300">
                  {current.bullets.map((bullet) => (
-                    <li key={bullet.heading} className="rounded-2xl border border-slate-100 bg-white/70 p-4">
-                      <p className="text-base font-semibold text-ink">{bullet.heading}</p>
-                      <p className="mt-2 text-sm text-slate-600">{bullet.body}</p>
+                    <li key={bullet.heading} className="rounded-2xl border border-white/10 bg-black p-4">
+                      <p className="text-base font-semibold text-white">{bullet.heading}</p>
+                      <p className="mt-2 text-sm text-slate-300">{bullet.body}</p>
                      {bullet.subpoints && (
-                        <ul className="mt-3 space-y-2 text-sm text-slate-500">
+                        <ul className="mt-3 space-y-2 text-sm text-slate-400">
                          {bullet.subpoints.map((point) => (
                            <li key={point} className="flex gap-3">
-                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-300" />
+                              <span className="mt-1 inline-block h-1.5 w-1.5 flex-shrink-0 rounded-full bg-brand-400" />
                              <span>{point}</span>
                            </li>
                          ))}
@@ -217,13 +244,13 @@ export const TechnologyArchitecture = () => {
                  ))}
                </ul>
              </div>
-              <div className="hidden h-full rounded-3xl bg-brand-50/50 p-6 lg:flex lg:flex-col lg:items-start lg:justify-between">
+              <div className="hidden h-full rounded-3xl border border-white/10 bg-black p-6 backdrop-blur lg:flex lg:flex-col lg:items-start lg:justify-between">
                <motion.p
                  key={`label-${current.id}`}
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3 }}
-                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-500"
+                  className="text-sm font-semibold uppercase tracking-[0.35em] text-brand-200"
                >
                  {current.label}
                </motion.p>
@@ -232,14 +259,14 @@ export const TechnologyArchitecture = () => {
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.5, delay: 0.2 }}
-                  className="mt-6 text-sm text-brand-700"
+                  className="mt-6 text-sm text-slate-200"
                >
                  {current.cardText}
                </motion.p>
-                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
+                <div className="relative mt-6 h-40 w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-950/60 via-indigo-950/50 to-purple-900/40">
                  {/* Animated gradient overlay */}
                  <motion.div
-                    className="absolute inset-0 bg-gradient-to-br from-blue-200/40 via-indigo-200/40 to-purple-200/40"
+                    className="absolute inset-0 bg-gradient-to-br from-blue-500/20 via-indigo-500/20 to-purple-500/20"
                    animate={{
                      opacity: [0.3, 0.6, 0.3],
                      scale: [1, 1.05, 1],
--- a/src/pages/technology/components/TechnologyHero.tsx
+++ b/src/pages/technology/components/TechnologyHero.tsx
@@ -17,7 +17,7 @@ export const TechnologyHero = () => {
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
      >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white/70">
+        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
          Technology
        </p>
        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
--- a/src/pages/technology/components/TechnologyStack.tsx
+++ b/src/pages/technology/components/TechnologyStack.tsx
@@ -17,16 +17,16 @@ const stackItems = [

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

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