style updates

src/components/layout/Footer.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 
 const footerLinksColumn1 = [
   { label: 'About', to: '/about' },
-  { label: 'Solutions', to: '/solutions' },
+  { label: 'Tech', to: '/technology' },
   { label: 'Use Cases', to: '/usecases' },
 ];
 
@@ -43,7 +43,9 @@ export const Footer = () => {
         </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>
+        <span>
+          © {year}. <span className="text-brand-400">Built on Geomind.</span> All rights reserved.
+        </span>
       </div>
     </footer>
   );

src/components/layout/Header.tsx

@@ -2,15 +2,17 @@ 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';
 
 const navItems = [
   { label: 'About', to: '/about' },
-  { label: 'Solutions', to: '/technology' },
+  { label: 'Tech', to: '/technology' },
   { label: 'Use Cases', to: '/usecases' },
 ];
 
 export const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [hoveredNav, setHoveredNav] = useState<string | null>(null);
   const location = useLocation();
   const isHome = location.pathname === '/';
 
@@ -29,39 +31,49 @@ export const Header = () => {
       )}
     >
       <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
-          <Link to="/" className="flex items-center">
+          to="/"
+          className="flex items-center"
+          onClick={() => {
+            if (location.pathname === '/') {
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+          }}
+        >
           <img
             src="/images/geomind_logo.png"
             alt="Geomind logo"
             className="h-8 w-auto object-contain"
           />
         </Link>
+        <div className="flex items-center gap-4 sm:gap-6">
           <nav className="hidden items-center gap-8 md:flex">
             {navItems.map(({ label, to }) => (
               <NavLink
                 key={to}
                 to={to}
-                className={({ isActive }) =>
+                onMouseEnter={() => setHoveredNav(to)}
-                  cn(
+                onMouseLeave={() => setHoveredNav(null)}
-                    'text-sm font-medium uppercase tracking-wide text-white transition-colors duration-300 hover:text-white/80',
+                onFocus={() => setHoveredNav(to)}
-                    isActive && 'text-white',
+                onBlur={() => setHoveredNav(null)}
-                  )
+                className={({ isActive }) => {
-                }
+                  const isHovered = hoveredNav === to;
+                  return cn(
+                    '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',
+                    isActive && hoveredNav && hoveredNav !== to && 'animate-blink !text-brand-500',
+                  );
+                }}
               >
                 {label}
               </NavLink>
             ))}
           </nav>
-        </div>
           <a
             href="mailto:support@threefold.tech"
-          className={cn(
+            className={cn(buttonBaseClass, 'px-4 py-2')}
-            '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
+            GET IN TOUCH
           </a>
           <button
             type="button"
@@ -94,6 +106,7 @@ export const Header = () => {
             </span>
           </button>
         </div>
+      </div>
       <AnimatePresence>
         {isMenuOpen && (
           <motion.nav
@@ -113,8 +126,8 @@ export const Header = () => {
                   to={to}
                   className={({ isActive }) =>
                     cn(
-                      'text-base font-medium uppercase tracking-wide text-white transition-colors duration-300',
+                      'text-base font-semibold uppercase tracking-wide text-white transition-colors duration-300',
-                      isActive && 'text-white',
+                      isActive && 'text-brand-500',
                     )
                   }
                 >
@@ -123,12 +136,9 @@ export const Header = () => {
               ))}
               <a
                 href="mailto:support@threefold.tech"
-                className={cn(
+                className={cn(buttonBaseClass, 'flex w-full justify-center px-4 py-2 text-center')}
-                  '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
+                GET IN TOUCH
               </a>
             </div>
           </motion.nav>

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 (

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';

src/pages/about/AboutPage.tsx

@@ -1,6 +1,7 @@
 import { AboutHero } from './components/AboutHero';
 import { MissionVision } from './components/MissionVision';
 import { TrackRecord } from './components/TrackRecord';
+import { AboutCta } from './components/AboutCta';
 
 export const AboutPage = () => {
   return (
@@ -8,6 +9,7 @@ export const AboutPage = () => {
       <AboutHero />
       <MissionVision />
       <TrackRecord />
+      <AboutCta />
     </div>
   );
 };

src/pages/about/components/AboutCta.tsx

@@ -0,0 +1,67 @@
+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">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-32 text-center sm:px-10 sm: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">
+            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 }}
+        >
+          <Link
+            to="/technology"
+            className={cn(
+              buttonBaseClass,
+              'px-10 py-4 font-bold uppercase tracking-[0.35em]',
+            )}
+          >
+            Explore Our Tech
+          </Link>
+        </motion.div>
+      </div>
+    </section>
+  );
+};

src/pages/about/components/AboutHero.tsx

@@ -2,27 +2,30 @@ import { motion } from 'framer-motion';
 
 export const AboutHero = () => {
   return (
-    <section className="relative overflow-hidden rounded-3xl text-white">
+    <section className="relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#06091d] via-[#0e1540] to-[#1c1448] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)]">
       <img
         src="/images/hometech2.jpg"
         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"
       />
-      <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" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(79,70,229,0.4),_transparent_60%)] opacity-90" />
+      <div className="absolute top-[-25%] right-[-5%] h-[420px] w-[420px] rounded-full bg-[#6366f1]/30 blur-3xl" />
       <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 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
+        <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" />
           About GeoMind
-        </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]">
           We Know a Thing or Two About Datacenters
         </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">
           For decades, we've built the technologies that power the internet, from record-breaking
           web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
           for: secure, sovereign, and profitable infrastructure designed for people, the planet,

src/pages/about/components/MissionVision.tsx

@@ -2,42 +2,69 @@ export const MissionVision = () => {
   return (
     <section className="relative py-20 text-slate-100 lg:py-28">
       <div className="relative mx-auto max-w-6xl px-6 lg:px-12">
-        <div className="mx-auto max-w-3xl space-y-8">
+        <div className="flex items-center justify-center gap-4">
-          <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">
           <span
             aria-hidden="true"
-              className="float-left mr-3 -mt-3 text-6xl font-serif leading-none text-brand-400/40"
+            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.35em] text-brand-300">
+            Mission &amp; Vision
           </span>
-            <div className="space-y-6 text-base leading-8 text-slate-300 sm:text-lg sm:leading-8">
+          <span
-              <p className="italic text-brand-200">
+            aria-hidden="true"
-                When we first started, our goal was simple, to build the foundation for the world’s digital future.
+            className="hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block"
-                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.
+        </div>
+        <div className="mt-8 grid gap-12 lg:grid-cols-[1.1fr,0.9fr] lg:items-center">
+          <div className="space-y-6">
+            <h2 className="text-3xl font-semibold text-white sm:text-4xl">
+              Prioritizing people and planet for a sovereign cloud future
+            </h2>
+            <p className="text-base text-slate-300 sm:text-lg">
+              GeoMind builds inclusive digital infrastructure because <strong>access to compute should be a
+              fundamental human right</strong>. We engineer systems that keep communities in control of their
+              data, reward local participation, and run with a lighter footprint on the planet.
             </p>
-              <p>
+            <div className="space-y-4 rounded-3xl border border-white/10 bg-black/60 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-brand-300/40 hover:bg-white/5 hover:shadow-[0_30px_60px_-45px_rgba(56,189,248,0.55)]">
-                Today, we’re creating the next generation of datacenters, designed not only for the AI era but for a
+              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-brand-200">
-                sustainable, inclusive future. Our mission is clear: to make digital decentralized infrastructure a
+                What drives us
-                universal right, accessible and responsible in equal measure.
               </p>
-              <p>
+              <ul className="space-y-3 text-sm text-slate-300 sm:text-base">
-                We’ve spent decades pioneering technologies that power the internet. Now, we’re redefining what
+                <li>
-                datacenters stand for, combining efficiency, sovereignty, and sustainability to serve both humanity and
+                  <span className="font-semibold text-white">People first:</span> compute that is
-                innovation.
+                  open, fair, and economically empowering for every operator and offtaker.
+                </li>
+                <li>
+                  <span className="font-semibold text-white">Planet aligned:</span> efficient,
+                  sovereign infrastructure that respects resources and communities.
+                </li>
+                <li>
+                  <span className="font-semibold text-white">Authentic by design:</span> transparent
+                  governance and incentives that keep trust at the center of every deployment.
+                </li>
+              </ul>
+            </div>
+            <p className="text-sm text-slate-400">
+              This is the lens through which we design every product decision, from hardware
+              tiers to marketplace economics.
             </p>
           </div>
+          <figure className="group relative overflow-hidden rounded-3xl border border-white/10 transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-300/40 hover:shadow-[0_32px_70px_-45px_rgba(79,70,229,0.65)]">
+            <img
+              src="/images/cloud_sky.png"
+              alt="Sunrise light shining through layered clouds above a resilient skyline."
+              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+            <div className="absolute inset-0 bg-gradient-to-br from-black/70 via-black/40 to-brand-500/30" />
+            <div className="absolute inset-0 flex flex-col items-center justify-end gap-2 p-8 text-center">
+              <p className="text-xs font-semibold uppercase tracking-[0.28em] text-brand-200">
+                People • Planet • Authenticity
+              </p>
+              <p className="text-xs font-semibold uppercase tracking-[0.28em] text-brand-200">
+                Open-source • Simplicity
+              </p>
             </div>
-          <div className="border-t border-white/10 pt-6 text-sm">
+          </figure>
-            <p className="font-semibold text-white">Kristof De Spiegeleer</p>
-            <p className="text-slate-400">Founder &amp; CEO, GeoMind</p>
-          </div>
         </div>
       </div>
     </section>

src/pages/about/components/TrackRecord.tsx

@@ -1,59 +1,112 @@
 import { motion } from 'framer-motion';
 
-const records = [
+const breakthroughs = [
   {
-    title: 'World Records for Web Hosting (1997-2002)',
+    title: 'World-Record Hosting (1997 – 2002)',
     description:
-      '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.',
+      'Launched Europe’s earliest internet hosting platforms, keeping UEFA, NASA, and World Cup fans online with unprecedented scale and uptime.',
   },
   {
-    title: 'The FIRST Backup Data Duplication system in the world (2005)',
+    title: 'Backup Duplication Reinvented (2005)',
     description:
-      'Our advancements in this field brought up to 100x benefit compared to the status quo running in data centers at the time.',
+      'Created data reduction tech that delivered up to 100× efficiency gains for enterprise backup long before it was industry standard.',
   },
   {
-    title: 'One of the FIRST Cloud Systems (2008)',
+    title: 'Cloud Before “Cloud” (2008)',
     description:
-      'We were one of the pioneers of cloud computing in general. Terms like Virtual Private Data Center were invented by us.',
+      'Built one of the first virtual data centers, coining “Virtual Private Data Center” and proving that elastic, on-demand compute could be trusted by Tier-1 customers.',
   },
   {
-    title: 'The FIRST multi-site consistent database (2010)',
+    title: 'Multi-site Consistency (2010)',
     description:
-      '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.',
+      'Engineered an always-on, multi-site database so workloads could fail over seamlessly without losing a single transaction.',
   },
   {
-    title: 'The FIRST unbreakable and distributed storage system (2012)',
+    title: 'Unbreakable Distributed Storage (2012)',
     description:
-      'Not only incorruptible, our system also boasts 10x energy efficiency compared to alternative solutions, marking a significant technological leap.',
+      'Delivered tamper-proof storage that used 10× less energy, setting the benchmark for resilient, sovereign data services.',
   },
   {
-    title: 'Probably the FIRST proof of block stake blockchain (2017)',
+    title: 'Sustainable Proof-of-Stake (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.',
+      'Pioneered a block-stake blockchain that paired financial and staking transactions in one move—years before the rest of the market caught up.',
+  },
+];
+
+const exits = [
+  {
+    year: '2005',
+    company: 'DataCenter Technologies',
+    description: 'Disk-based backup optimization software.',
+    acquiredBy: 'Veritas → Symantec',
+    logo: '/images/exited_company_logos/DataCenter.png',
+  },
+  {
+    year: '2005',
+    company: 'Dedigate',
+    description: 'Managed hosting for complex internet infrastructures.',
+    acquiredBy: 'Verizon & Terremark → Equinix',
+    logo: '/images/exited_company_logos/Dedigate.png',
+  },
+  {
+    year: '2008',
+    company: 'HostBasket',
+    description: 'Belgium’s largest hosting company.',
+    acquiredBy: 'Telenet',
+    logo: '/images/exited_company_logos/HOSTBASKET.png',
+  },
+  {
+    year: '2009',
+    company: 'Q-layer',
+    description: 'Automated cloud deployment and virtualization.',
+    acquiredBy: 'Sun Microsystems → Oracle',
+    logo: '/images/exited_company_logos/Q-layer.png',
+  },
+  {
+    year: '2015',
+    company: 'Amplidata',
+    description: 'Object storage for public and private clouds.',
+    acquiredBy: 'HGST (Western Digital)',
+    logo: '/images/exited_company_logos/amplidata.png',
   },
 ];
 
 export const TrackRecord = () => {
   return (
-    <section className="py-16 text-slate-100 lg:py-24">
+    <section className="pt-16 pb-12 text-slate-100 lg:pt-24 lg:pb-16">
-      <div className="mx-auto max-w-3xl text-center">
+      <div className="mx-auto max-w-4xl text-center">
+        <div 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"
+          />
           <h2 className="text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
-          Our Track Record
+            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 been at the forefront of datacenter and cloud innovation for decades,
+          Our team has been at the forefront of datacenter and cloud innovation for over two decades, building systems that were faster, safer, and more scalable than anything before.
-          building systems that were faster, safer, and more scalable than anything before.
+        </p>
+        <p className="mt-4 text-base text-slate-300 sm:text-lg">
+          From web-scale hosting to autonomous storage, our team has consistently introduced the
+          “firsts” that became benchmarks. Those wins fund our next chapter: a sovereign, agentic
+          cloud designed for the AI era.
         </p>
       </div>
+
       <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-        {records.map((record, index) => (
+        {breakthroughs.map((record, index) => (
           <motion.div
             key={record.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="flex h-full flex-col rounded-3xl border border-white/10 bg-black p-8 shadow-none backdrop-blur"
+            className="group relative flex h-full flex-col rounded-3xl border border-white/10 bg-black/80 p-8 transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/50 hover:bg-white/5 hover:shadow-[0_28px_64px_-42px_rgba(56,189,248,0.55)] backdrop-blur"
           >
             <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}
@@ -63,6 +116,55 @@ export const TrackRecord = () => {
           </motion.div>
         ))}
       </div>
+      <div className="mt-16 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"
+        />
+        <h2 className="text-center text-xs font-semibold uppercase tracking-[0.35em] text-brand-300">
+          Exits
+        </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>
+
+      <div className="mt-6 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)]">
+        <div className="mt-6 grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
+          {exits.map((exit) => (
+            <div
+              key={exit.company}
+              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)]"
+            >
+              <span className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-300">
+                {exit.year}
+              </span>
+              {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>
+            </div>
+          ))}
+        </div>
+      </div>
     </section>
   );
 };

src/pages/home/HomePage.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { HeroSection } from './components/HeroSection';
 import { ScrollLockedSection } from './components/ScrollLockedSection';
 import { CtaSection } from './components/CtaSection';
@@ -50,7 +51,7 @@ const sections = [
     eyebrow: 'Glocal Marketplace',
     title: (
       <>
-        Local Hardware, <span className={highlightTextClass}>Global</span> Liquidity
+        Local Hardware, <span className={highlightTextClass}>Global</span> Marketplace
       </>
     ),
     description: (
@@ -66,7 +67,7 @@ const sections = [
     eyebrow: 'Profit',
     title: (
       <>
-        <span className={highlightTextClass}>Earn</span> While You Operate
+        <span className={highlightTextClass}>Earn</span> from Idle Capacity
       </>
     ),
     description:
@@ -78,7 +79,7 @@ const sections = [
     eyebrow: 'Competitive Advantage',
     title: (
       <>
-        <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
+        <span className={highlightTextClass}>Lower Costs</span>, Competitive Prices
       </>
     ),
     description:
@@ -90,7 +91,7 @@ const sections = [
     eyebrow: 'Offtakers',
     title: (
       <>
-        <span className={highlightTextClass}>Built-In</span> Customer Base
+        <span className={highlightTextClass}>Built-In</span> Demand
       </>
     ),
     description:
@@ -101,6 +102,10 @@ const sections = [
 ];
 
 export const HomePage = () => {
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'auto' });
+  }, []);
+
   return (
     <div className="flex min-h-screen flex-col bg-black text-white">
       <div className="flex flex-col">

src/pages/home/components/CtaSection.tsx

@@ -1,5 +1,7 @@
 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 (
@@ -41,7 +43,7 @@ export const CtaSection = () => {
           >
             <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"
+              className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
             >
               About us
             </Link>
@@ -54,7 +56,7 @@ export const CtaSection = () => {
             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"
+            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
           >
             Book a Meeting
           </motion.a>

src/pages/home/components/HeroSection.tsx

@@ -35,7 +35,7 @@ export const HeroSection = () => {
             <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>
+              <span>The Living Cloud</span>
             </div>
           </motion.div>
         </div>

src/pages/home/components/ScrollLockedSection.tsx

@@ -1,5 +1,8 @@
-import { ReactNode, useRef } from 'react';
+import { useRef } from 'react';
+import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { cn } from '../../../lib/cn';
+import { buttonBaseClass } from '../../../lib/buttonStyles';
 
 type ScrollLockedSectionProps = {
   id: string;
@@ -51,7 +54,7 @@ export const ScrollLockedSection = ({
                     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"
+                    className={cn(buttonBaseClass, 'px-5 py-2 font-bold')}
                   >
                     {buttonText}
                   </a>
@@ -59,7 +62,7 @@ export const ScrollLockedSection = ({
                   <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"
+                    className={cn(buttonBaseClass, 'px-5 py-2 font-bold')}
                   >
                     {buttonText}
                   </button>

src/pages/technology/TechnologyPage.tsx

@@ -2,6 +2,7 @@ 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 (
@@ -10,6 +11,7 @@ export const TechnologyPage = () => {
       <TechnologyStack />
       <TechnologyArchitecture />
       <TechnologicalBenefits />
+      <MarketplaceCta />
     </div>
   );
 };

src/pages/technology/components/MarketplaceCta.tsx

@@ -0,0 +1,64 @@
+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-10 px-6 py-32 text-center sm:px-10 sm: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 }}
+        >
+          <Link
+            to="/usecases"
+            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+          >
+            See Use cases
+          </Link>
+        </motion.div>
+      </div>
+    </section>
+  );
+};

src/pages/technology/components/TechnologicalBenefits.tsx

@@ -1,31 +1,26 @@
 import { motion } from 'framer-motion';
-import { ShieldCheck, Globe, Leaf, LineChart, Layers } from 'lucide-react';
+import { Store, Coins, Cpu, Handshake } from 'lucide-react';
 
 const benefits = [
   {
-    title: 'Ultra-Secure',
+    title: 'Free to List',
-    description: 'Protect sensitive workloads with end-to-end security.',
+    description: 'Join the marketplace at no cost and showcase available cloud units instantly.',
-    icon: ShieldCheck,
+    icon: Store,
   },
   {
-    title: 'Scales Globally',
+    title: 'Earn from Idle Capacity',
-    description: 'Supports workloads anywhere, from local nodes to planetary scale.',
+    description: 'Sell unused compute cycles to AI teams and turn sunk costs into recurring revenue.',
-    icon: Globe,
+    icon: Coins,
   },
   {
-    title: 'Energy Efficient',
+    title: 'Capacity on Demand',
-    description: 'Up to 10x less energy for specific workloads.',
+    description: 'Tap trusted nodes across the network when workloads spike so you always have extra capacity when you need it.',
-    icon: Leaf,
+    icon: Cpu,
   },
   {
-    title: 'Profitable',
+    title: 'Trusted Settlements',
-    description: 'Monetize idle capacity; achieve ROI up to 3x higher.',
+    description: 'Automated contracts and clear payouts keep every transaction compliant and transparent.',
-    icon: LineChart,
+    icon: Handshake,
-  },
-  {
-    title: 'Flexible',
-    description: 'Compatible with existing infrastructure and hyperscaler requirements.',
-    icon: Layers,
   },
 ];
 
@@ -33,21 +28,29 @@ export const TechnologicalBenefits = () => {
   return (
     <section className="py-16 text-slate-100 lg:py-24">
       <div className="mx-auto max-w-3xl text-center">
+        <div 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"
+          />
           <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">
           Infrastructure that Pays for Itself
         </h2>
         <p className="mt-5 text-base text-slate-300 sm:text-lg">
-          GeoMind doesn't just deliver advanced datacenter capabilities, it turns your existing
+          GeoMind Marketplace is a free exchange for cloud units. Operators list spare capacity,
-          infrastructure into a strategic asset. Run your own workloads securely and efficiently,
+          buyers tap verified resources, and everyone earns. Let your AI infrastructure fund itself
-          while selling unused capacity to the network. With up to 10x lower energy consumption for
+          as unused workloads convert into new revenue streams.
-          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,10 +58,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-white/10 bg-black p-6 shadow-none 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-500/15">
+            <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-200" />
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/15 via-transparent to-brand-200/10" />
+            </div>
+            <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">
+              <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>

src/pages/technology/components/TechnologyArchitecture.tsx

@@ -188,7 +188,20 @@ export const TechnologyArchitecture = () => {
   return (
     <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-white sm:text-4xl">Autonomous Software Stack</h2>
+        <div 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"
+          />
+          <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
@@ -227,7 +240,10 @@ export const TechnologyArchitecture = () => {
                 <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-white/10 bg-black p-4">
+                    <li
+                      key={bullet.heading}
+                      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 && (
@@ -244,7 +260,7 @@ export const TechnologyArchitecture = () => {
                   ))}
                 </ul>
               </div>
-              <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">
+              <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 }}

src/pages/technology/components/TechnologyHero.tsx

@@ -1,37 +1,36 @@
 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 className="relative overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#040b24] via-[#0a1842] to-[#211d61] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)]">
       <img
         src="/images/hometech.jpg"
         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"
       />
-      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/75" />
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(94,234,212,0.45),_transparent_60%)] opacity-90" />
+      <div className="absolute top-[-30%] left-[-10%] h-[360px] w-[360px] rounded-full bg-[#22d3ee]/25 blur-3xl" />
       <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 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
+        <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" />
           Technology
-        </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]">
           The Foundation of the Next-Generation Datacenter
         </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 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>
   );

src/pages/technology/components/TechnologyStack.tsx

@@ -20,9 +20,19 @@ export const TechnologyStack = () => {
     <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">
+          <div 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"
+            />
             <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>

src/pages/usecases/components/UseCasesGrid.tsx

@@ -1,40 +1,34 @@
 import { motion } from 'framer-motion';
+import { cn } from '../../../lib/cn';
+import { buttonBaseClass, buttonGhostLightClass } from '../../../lib/buttonStyles';
 
 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 Core',
     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.',
+      'A self-healing compute mesh that lets organizations and communities spin up sovereign cloud capacity instantly while sharing economics across the network.',
     image: '/images/mycelium.jpeg',
   },
   {
     title: 'Zanzibar Digital Free Zone',
+    highlight: 'Sovereign Innovation',
     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 for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products.',
     image: '/images/freezone.jpeg',
   },
   {
     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.',
+      'A member-owned platform where every participant contributes nodes, earns rewards, and governs the roadmap as GeoMind scales toward a million-node collective.',
     image: '/images/coop.jpeg',
   },
   {
-    title: 'Sovereign Cloud & Internet for Countries',
+    title: 'Sovereign Cloud for Nations',
+    highlight: 'National Capacity',
     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.',
+      'Independent hyperscale-to-edge infrastructure that gives governments full control over data, AI, and digital services while retaining economic value locally.',
     image: '/images/countries.jpeg',
   },
 ];
@@ -50,14 +44,12 @@ export const UseCasesGrid = () => {
       >
         <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
+          From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
-          connecting Tier S hyperscale facilities with Tier H local nodes to create a unified, sovereign
+          compute into deployable products. Each use case blends hyperscale performance with edge
-          infrastructure. Up to 60% more energy-efficient and built for resilience, privacy, and
+          responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
-          quantum-safe security, it can be deployed in weeks rather than years. These capabilities power
+          where it is needed.
-          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">
+        <div className="mt-12 grid gap-8 sm:grid-cols-2 xl:grid-cols-4">
           {useCases.map((useCase, index) => (
             <motion.article
               key={useCase.title}
@@ -65,19 +57,69 @@ export const UseCasesGrid = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.25 }}
               transition={{ duration: 0.5, delay: index * 0.05 }}
-              className="overflow-hidden rounded-3xl border border-white/10 bg-black shadow-none backdrop-blur"
+              className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.02] shadow-[0_30px_80px_-40px_rgba(15,23,42,0.9)] transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/50 hover:bg-white/10 hover:shadow-[0_36px_96px_-48px_rgba(79,70,229,0.55)] backdrop-blur"
             >
               <div className="relative h-48 overflow-hidden">
-                <img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
+                <img
-                <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
+                  src={useCase.image}
-                <h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
+                  alt={useCase.title}
-                  {useCase.title}
+                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-                </h3>
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-transparent" />
+              </div>
+              <div className="relative flex h-full flex-col gap-4 p-8">
+                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
+                  <span className="h-px w-6 bg-sky-200/60" />
+                  {useCase.highlight}
+                </span>
+                <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
+                <p className="text-sm leading-6 text-slate-300">{useCase.description}</p>
               </div>
-              <p className="p-6 text-sm leading-6 text-slate-300">{useCase.description}</p>
             </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', delay: 0.2 }}
+          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-10 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
+        >
+          <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+            <div className="max-w-2xl space-y-4">
+              <p className="text-xs font-semibold uppercase tracking-[0.4em] text-white/60">
+                Become a Partner
+              </p>
+              <h3 className="text-2xl font-semibold sm:text-3xl">
+                Build sovereign infrastructure with GeoMind&apos;s ecosystem.
+              </h3>
+              <p className="text-base text-white/70">
+                Pick the path that delivers outcomes fast: deploy capacity, lock in offtake, or invest in
+                the platform redefining cloud infrastructure.
+              </p>
+            </div>
+            <div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-1">
+              <a
+                href="mailto:support@threefold.tech?subject=Deploy%20Capacity"
+                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
+              >
+                Deploy Capacity
+              </a>
+              <a
+                href="mailto:support@threefold.tech?subject=Offtake%20Capacity"
+                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
+              >
+                Offtake Capacity
+              </a>
+              <a
+                href="mailto:support@threefold.tech?subject=Invest%20in%20the%20Tech"
+                className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
+              >
+                Invest in the Tech
+              </a>
+            </div>
+          </div>
+        </motion.div>
       </motion.div>
     </section>
   );

src/pages/usecases/components/UseCasesHero.tsx

@@ -2,27 +2,30 @@ import { motion } from 'framer-motion';
 
 export const UseCasesHero = () => {
   return (
-    <section className="relative overflow-hidden rounded-3xl text-white">
+    <section className="relative 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)]">
       <img
         src="/images/uscase_BG.png"
         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"
       />
-      <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" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(249,115,22,0.3),_transparent_60%)] opacity-90" />
+      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-[#f97316]/25 blur-3xl" />
       <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 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
       >
-        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
+        <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
           infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
           next-generation datacenters generate value, ensure sovereignty, and support modern AI,

tailwind.config.js

@@ -26,6 +26,15 @@ export default {
       boxShadow: {
         subtle: '0 20px 45px -25px rgba(18, 28, 132, 0.35)',
       },
+      keyframes: {
+        blink: {
+          '0%, 100%': { opacity: 1 },
+          '50%': { opacity: 0.35 },
+        },
+      },
+      animation: {
+        blink: 'blink 0.9s steps(2, start) infinite',
+      },
     },
   },
   plugins: [],