improvements

src/components/layout/Footer.tsx

@@ -24,8 +24,10 @@ export const Footer = () => {
           <span className="text-xs font-bold uppercase tracking-[0.35em] text-white">
           Geomind
           </span>
-          <p className="max-w-sm text-xs font-medium uppercase tracking-[0.3em] text-white">
+          <p className="max-w-m text-xs font-medium uppercase tracking-[0.3em] text-white">
-            <span className="text-brand-400">Geomind.</span> The datacenter standard for the next era of cloud and AI.
+            The datacenter standard for 
+            <br />
+            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">

src/components/layout/Header.tsx

@@ -38,8 +38,13 @@ export const Header = () => {
           className="flex items-center"
           onClick={() => {
             if (location.pathname === '/') {
+              const mainElement = document.querySelector('main');
+              if (mainElement instanceof HTMLElement && typeof mainElement.scrollTo === 'function') {
+                mainElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+              } else {
                 window.scrollTo({ top: 0, behavior: 'smooth' });
               }
+            }
           }}
         >
           <img
@@ -63,7 +68,6 @@ export const Header = () => {
                   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',
                   );
                 }}
               >
@@ -73,7 +77,7 @@ export const Header = () => {
           </nav>
           <button
             onClick={() => setIsContactFormOpen(true)}
-            className={cn(buttonBaseClass, 'px-4 py-2')}
+            className={cn(buttonBaseClass, 'hidden px-4 py-2 md:inline-flex')}
           >
             GET IN TOUCH
           </button>
@@ -87,21 +91,21 @@ export const Header = () => {
               <span
                 className={cn(
                   'absolute left-0 top-1 h-0.5 w-full transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'translate-y-2 rotate-45',
                 )}
               />
               <span
                 className={cn(
                   'absolute left-0 top-3 h-0.5 w-full transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'opacity-0',
                 )}
               />
               <span
                 className={cn(
                   'absolute left-0 top-5 h-0.5 w-4 transition-all duration-300',
-                  isHome ? 'bg-ink' : 'bg-white',
+                  'bg-white',
                   isMenuOpen && 'left-0 top-3 w-full -rotate-45',
                 )}
               />
@@ -116,10 +120,7 @@ export const Header = () => {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -16 }}
             transition={{ duration: 0.25, ease: 'easeOut' }}
-            className={cn(
+            className={cn('px-6 py-4 shadow-lg border-t border-white/10 bg-black md:hidden')}
-              'px-6 py-4 shadow-lg md:hidden',
-              isHome ? 'border-t border-slate-100 bg-mist/95' : 'border-t border-white/10 bg-black',
-            )}
           >
             <div className="flex flex-col gap-4">
               {navItems.map(({ label, to }) => (
@@ -137,7 +138,10 @@ export const Header = () => {
                 </NavLink>
               ))}
               <button
-                onClick={() => setIsContactFormOpen(true)}
+                onClick={() => {
+                  setIsContactFormOpen(true);
+                  setIsMenuOpen(false);
+                }}
                 className={cn(buttonBaseClass, 'flex w-full justify-center px-4 py-2 text-center')}
               >
                 GET IN TOUCH

src/components/layout/ScrollToTop.tsx

@@ -7,6 +7,15 @@ export const ScrollToTop = () => {
   useEffect(() => {
     const animationFrame = window.requestAnimationFrame(() => {
       window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+      const mainElement = document.querySelector('main');
+      if (mainElement instanceof HTMLElement) {
+        if (typeof mainElement.scrollTo === 'function') {
+          mainElement.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+        } else {
+          mainElement.scrollTop = 0;
+          mainElement.scrollLeft = 0;
+        }
+      }
     });
 
     return () => window.cancelAnimationFrame(animationFrame);

src/pages/about/components/AboutCta.tsx

@@ -5,8 +5,8 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 
 export const AboutCta = () => {
   return (
-    <section className="snap-start bg-black pt-12 sm:pt-16 lg:pt-20">
+    <section className="snap-start bg-black pt-10 sm:pt-16 lg:pt-20">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 pb-32 text-center sm:px-10 sm:pb-40">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 pb-20 text-center sm:gap-10 sm:px-10 sm:pb-32 lg:pb-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -50,12 +50,13 @@ export const AboutCta = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: '-20%' }}
           transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          className="w-full sm:w-auto"
         >
           <Link
             to="/technology"
             className={cn(
               buttonBaseClass,
-              'px-10 py-4 font-bold uppercase tracking-[0.35em]',
+              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
             )}
           >
             Explore Our Tech

src/pages/about/components/AboutHero.tsx

@@ -2,35 +2,41 @@ import { motion } from 'framer-motion';
 
 const records = [
   {
-    title: 'World Records for Web Hosting (1997-2002)',
+    period: '1997–2002',
+    title: 'World Records for Web Hosting',
     description: 'Kept UEFA, NASA, and World Cup traffic online with continent-scale uptime.',
     layout: 'lg:col-span-3 lg:row-span-2',
     showStream: true,
   },
   {
-    title: 'The First Backup Data Duplication System in the World (2005)',
+    period: '2005',
+    title: 'The First Backup Data Duplication System in the World',
     description: 'Cut enterprise backup footprints by up to 100× before dedupe was mainstream.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'One of the First Cloud Systems (2008)',
+    period: '2008',
+    title: 'One of the First Cloud Systems',
     description: 'Shipped the first Virtual Private Data Center and proved elastic compute trust.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'The First Multi-Site Consistent Database (2010)',
+    period: '2010',
+    title: 'The First Multi-Site Consistent Database',
     description: 'Delivered failover that preserved every transaction across sovereign sites.',
     layout: 'lg:col-span-3 lg:row-span-2',
     showStream: true,
   },
   {
-    title: 'The First Unbreakable and Distributed Storage System (2012)',
+    period: '2012',
+    title: 'The First Unbreakable and Distributed Storage System',
     description: 'Built tamper-proof storage that used 10× less energy and never went dark.',
     layout: 'lg:col-span-3',
   },
   {
-    title: 'Probably the First Proof of Block Stake Blockchain (2017)',
+    period: '2017',
-    description: 'Merged staking and settlement in one move—years before the market caught up.',
+    title: 'Probably the First Proof of Block Stake Blockchain',
+    description: 'Merged staking and settlement in one move, years before the market caught up.',
     layout: 'lg:col-span-3',
   },
 ] as const;
@@ -41,7 +47,7 @@ export const AboutHero = () => {
       <div className="mx-auto w-full max-w-7xl">
         <div className="grid gap-8 sm:gap-10 lg:grid-cols-[minmax(360px,420px)_minmax(0,1fr)] lg:items-stretch lg:gap-12 xl:grid-cols-[minmax(400px,500px)_minmax(0,1fr)]">
           <div className="relative h-full">
-            <div className="group 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)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
+            <div className="group relative flex h-full flex-col 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)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
               <img
                 src="/images/hometech2.jpg"
                 alt=""
@@ -54,20 +60,20 @@ export const AboutHero = () => {
               initial={{ opacity: 0, y: 32 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, ease: 'easeOut' }}
-              className="relative z-10 px-6 py-20 sm:px-12 lg:px-16 lg:py-24"
+              className="relative z-10 flex flex-1 flex-col items-center px-6 py-20 text-center sm:px-12 lg:px-16 lg:py-24"
             >
-              <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
+              <div className="flex w-full items-center justify-center gap-4 text-[0.7rem] font-medium uppercase tracking-[0.32em] text-white/70">
-                <span className="h-px w-10 bg-white/40" />
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
-                About GeoMind
+                <span className="text-white/80">About GeoMind</span>
-                <span className="h-px w-10 bg-white/40" />
+                <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
-              </span>
+              </div>
-              <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
+              <h1 className="mt-9 max-w-2xl text-4xl font-semibold tracking-tight text-white sm:text-[2.75rem] lg:text-[3.25rem] lg:leading-[1.05]">
                 We Know a Thing or Two About Datacenters
               </h1>
-              <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-white/75 sm:text-lg">
-                For decades, we've built the technologies that power the internet, from record-breaking
+                Decades of building the internet&apos;s backbone, from record-breaking hosting to
-                web hosting to unbreakable cloud systems. Now, we're redefining what datacenters stand
+                unbreakable cloud systems, now shape how we define the datacenter: secure, sovereign,
-                for: secure, sovereign, and profitable infrastructure designed for people, the planet. Here’s the short list of milestones that still guide our build.
+                profitable infrastructure built for people and planet.
               </p>
             </motion.div>
           </div>
@@ -80,12 +86,17 @@ export const AboutHero = () => {
                 initial={{ opacity: 0, y: 24 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5, delay: index * 0.05 }}
-                className={`group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
+                className={`group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-5 ${
+                  record.showStream ? 'pb-16 sm:pb-5' : ''
+                } backdrop-blur transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/60 hover:bg-white/[0.08] hover:shadow-[0_32px_80px_-50px_rgba(56,189,248,0.55)] ${record.layout}`}
               >
-                <h3 className="text-lg font-semibold leading-snug text-white">{record.title}</h3>
+                <span className="block text-[0.68rem] font-semibold uppercase tracking-[0.42em] text-brand-200/80">
+                  {record.period}
+                </span>
+                <h3 className="mt-2 text-lg font-semibold leading-snug text-white">{record.title}</h3>
                 <p className="mt-3 text-sm leading-6 text-slate-200">{record.description}</p>
                 {record.showStream && (
-                  <div className="pointer-events-none absolute inset-x-5 bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
+                  <div className="pointer-events-none absolute inset-x-5 bottom-6 sm:bottom-5 h-3 overflow-hidden rounded-full border border-white/10 bg-white/[0.06]">
                     <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.45),transparent_72%)] opacity-70" />
                     <div className="absolute inset-0 bg-[linear-gradient(90deg,rgba(56,189,248,0)_0%,rgba(99,102,241,0.75)_50%,rgba(56,189,248,0)_100%)] opacity-90 [background-size:200%_100%] animate-data-stream" />
                     <div

src/pages/about/components/TrackRecord.tsx

@@ -56,10 +56,7 @@ export const TrackRecord = () => {
           />
         </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 over two decades, building systems that were faster, safer, and more scalable than anything before.
+          Our team has built some of the world’s most advanced cloud technologies which were acquired by some of the biggest names in the space. 
-        </p>
-        <p className="mt-4 text-base text-slate-300 sm:text-lg">
-          We have built some of the world’s most advanced Internet and cloud technologies which were acquired by some of the biggest names in the space.
         </p>
       </div>
 

src/pages/home/components/CtaSection.tsx

@@ -6,7 +6,7 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const CtaSection = () => {
   return (
     <section className="snap-start bg-black">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -44,32 +44,43 @@ export const CtaSection = () => {
         >
           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">
+        <div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
           <motion.div
             initial={{ opacity: 0, y: 12 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-20%' }}
             transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            className="w-full sm:w-auto"
           >
             <Link
               to="/about"
-              className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
             >
               About us
             </Link>
           </motion.div>
-          <motion.a
+          <motion.div
-            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={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+            className="w-full sm:w-auto"
+          >
+            <a
+              href="https://calendly.com/sachao/30min"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
             >
               Book a Meeting
-          </motion.a>
+            </a>
+          </motion.div>
         </div>
       </div>
     </section>

src/pages/home/components/ScrollLockedSection.tsx

@@ -1,6 +1,7 @@
-import { useRef } from 'react';
 import type { ReactNode } from 'react';
+import { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { ChevronsDown } from 'lucide-react';
 import { cn } from '../../../lib/cn';
 import { buttonBaseClass } from '../../../lib/buttonStyles';
 
@@ -74,6 +75,10 @@ export const ScrollLockedSection = ({
               </div>
             )}
           </div>
+          <div className="mt-auto flex items-center gap-3 pb-12 text-xs uppercase tracking-[0.3em] text-white sm:pb-16">
+            <span>Keep scrolling</span>
+            <ChevronsDown className="h-4 w-4 text-white animate-bounce" aria-hidden="true" />
+          </div>
         </div>
       </div>
     </section>

src/pages/technology/components/MarketplaceCta.tsx

@@ -6,7 +6,7 @@ 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">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -50,10 +50,14 @@ export const MarketplaceCta = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: '-20%' }}
           transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+          className="w-full sm:w-auto"
         >
           <Link
             to="/usecases"
-            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+            className={cn(
+              buttonBaseClass,
+              'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:w-auto',
+            )}
           >
             See Use cases
           </Link>

src/pages/technology/components/TechnologyHero.tsx

@@ -1,37 +1,22 @@
-import { motion } from 'framer-motion';
-
 export const TechnologyHero = () => {
   return (
-    <section className="group 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)] transition-all duration-500 hover:-translate-y-1.5 hover:border-teal-300/60 hover:shadow-[0_40px_120px_-45px_rgba(45,212,191,0.55)]">
+    <section
-      <img
+      aria-label="GeoMind technology showcase"
-        src="/images/hometech.jpg"
+      className="group relative min-h-[420px] overflow-hidden rounded-[32px] border border-white/10 bg-slate-950 text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.85)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/70 hover:shadow-[0_45px_120px_-45px_rgba(122,141,249,0.55)] sm:min-h-[520px] lg:min-h-[600px]"
-        alt=""
-        className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
-      />
-      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(94,234,212,0.45),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
-      <div className="absolute top-[-30%] left-[-10%] h-[360px] w-[360px] rounded-full bg-[#22d3ee]/25 blur-3xl transition-transform duration-700 group-hover:scale-110" />
-      <motion.div
-        initial={{ opacity: 0, y: 32 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
     >
-        <span className="inline-flex items-center gap-3 text-[0.68rem] uppercase tracking-[0.42em] text-white/70">
+      <video
-          <span className="h-px w-10 bg-white/40" />
+        className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
-          Technology
+        src="/videos/galaxy_vid.mp4"
-          <span className="h-px w-10 bg-white/40" />
+        autoPlay
-        </span>
+        loop
-        <h1 className="mt-8 max-w-3xl text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl lg:leading-[1.1]">
+        muted
-          The Foundation of the Next-Generation Datacenter
+        playsInline
-        </h1>
+        preload="auto"
-        <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
+      <div className="absolute bottom-[-20%] right-[-10%] h-[420px] w-[420px] rounded-full bg-[rgba(90,107,240,0.25)] blur-3xl transition-transform duration-700 group-hover:scale-110" />
-          sovereign cloud and AI infrastructure. Built for efficiency, sustainability, and
+      <div className="relative z-10 h-full w-full px-6 py-24 sm:px-12 lg:px-20 lg:py-32">
-          profitability, it empowers organizations to run workloads, scale globally, and monetize
+        <span className="sr-only">Immersive background video highlighting GeoMind technology.</span>
-          excess capacity.
+      </div>
-        </p>
-      </motion.div>
     </section>
   );
 };

src/pages/technology/components/TechnologyStack.tsx

@@ -49,14 +49,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 bg-black shadow-none backdrop-blur"
+              className="flex h-full flex-col overflow-hidden rounded-3xl bg-black text-center shadow-none backdrop-blur"
             >
               <div className="h-56 overflow-hidden">
                 <img src={item.image} alt={item.title} className="h-full w-full object-cover" />
               </div>
-              <div className="p-6">
+              <div className="flex flex-1 flex-col items-center gap-4 p-6">
                 <h3 className="text-xl font-semibold text-white">{item.title}</h3>
-                <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
+                <p className="text-sm leading-6 text-slate-300">{item.description}</p>
               </div>
             </motion.div>
           ))}

src/pages/usecases/components/UseCasesGrid.tsx

@@ -16,15 +16,17 @@ const useCases = [
     title: 'Digital Free Zone',
     highlight: 'Sovereign Innovation',
     description:
-      'An economic bridge for digital assets with dedicated governance, regulation, and dispute resolution so builders deploy compliant Web3, AI, and fintech products on GeoMind-powered infrastructure.',
+      'An economic bridge in Zanzibar for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products on GeoMind-powered future-ready infrastructure.',
     image: '/images/freezone.jpeg',
+    titleOffset: '-mt-2 sm:-mt-3',
   },
   {
     title: 'COOP Cloud',
     highlight: 'People-Powered Cloud',
     description:
-      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure, earn rewards, and launch services together on GeoMind.',
+      'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure and launch services together on GeoMind, building a self-sustaining digital infrastructure that serves their communities.',
     image: '/images/coop.jpeg',
+    titleOffset: '-mt-3 sm:-mt-4',
   },
   {
     title: 'Cloud for Nations',
@@ -37,7 +39,7 @@ const useCases = [
     title: 'Real Estate Deployments',
     highlight: 'Underutilized Spaces',
     description:
-      'Deploy GeoMind capacity inside underutilized properties with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty tools while relying on passive liquid cooling that requires little maintenance and keeps operating expenses highly competitive.',
+      'Deploy GeoMind in underutilized spaces with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty on tech that requires minimal maintenance.',
     image: '/images/hometech2.jpg',
     featured: true,
   },
@@ -53,21 +55,21 @@ export const UseCasesGrid = () => {
   };
 
   return (
-    <section className="py-16 text-slate-100 lg:py-24">
+    <section className="px-4 py-16 text-slate-100 sm:px-0 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>
+        <h2 className="text-center 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">
+        <p className="mt-5 max-w-4xl text-center text-base text-slate-300 sm:text-lg sm:mx-auto">
           From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
           compute into deployable products. Each use case blends hyperscale performance with edge
           responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
           where it is needed.
         </p>
-        <div className="mt-12 grid gap-8 sm:grid-cols-2 xl:grid-cols-4">
+        <div className="mt-12 -mx-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-8 sm:overflow-visible sm:pb-0 sm:snap-none xl:grid-cols-4">
           {useCases.map((useCase, index) => (
             <motion.article
               key={useCase.title}
@@ -76,8 +78,8 @@ export const UseCasesGrid = () => {
               viewport={{ once: true, amount: 0.25 }}
               transition={{ duration: 0.5, delay: index * 0.05 }}
               className={cn(
-                'group relative flex h-full flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)]',
+                'group relative flex h-full min-w-[80vw] snap-center flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)] sm:min-w-0',
-                useCase.featured && 'sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-center sm:gap-8'
+                useCase.featured && 'min-w-[88vw] sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-start sm:gap-8'
               )}
             >
               <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -85,7 +87,7 @@ export const UseCasesGrid = () => {
               </div>
               <div
                 className={cn(
-                  'relative h-48 overflow-hidden',
+                  'relative h-48 overflow-hidden sm:h-56 lg:h-full',
                   useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
                 )}
               >
@@ -98,16 +100,17 @@ export const UseCasesGrid = () => {
               </div>
               <div
                 className={cn(
-                  'relative flex h-full flex-col gap-4 p-8',
+                  'relative flex h-full flex-col items-center px-6 pb-6 pt-6 text-center sm:px-8 sm:pb-8 sm:pt-8',
-                  useCase.featured && 'sm:flex-1 sm:p-10 lg:p-12'
+                  useCase.featured && 'sm:flex-1 sm:px-10 sm:pb-12 sm:pt-12'
                 )}
               >
-                <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
+                <div className={cn('flex flex-col items-center gap-3', useCase.titleOffset)}>
-                  <span className="h-px w-6 bg-sky-200/60" />
+                  <span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
                     {useCase.highlight}
                   </span>
                   <h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
-                <p className="text-sm leading-6 text-slate-300">{useCase.description}</p>
+                </div>
+                <p className="mt-6 text-sm leading-6 text-slate-300 sm:mt-8">{useCase.description}</p>
               </div>
             </motion.article>
           ))}
@@ -117,7 +120,7 @@ export const UseCasesGrid = () => {
           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"
+          className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-8 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
         >
           <div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
             <div className="max-w-2xl space-y-4">

src/pages/usecases/components/UseCasesHero.tsx

@@ -2,20 +2,20 @@ import { motion } from 'framer-motion';
 
 export const UseCasesHero = () => {
   return (
-    <section className="group 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)] transition-all duration-500 hover:-translate-y-1.5 hover:border-orange-300/60 hover:shadow-[0_40px_120px_-45px_rgba(249,115,22,0.45)]">
+    <section className="group relative flex overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#050a21] via-[#11173a] to-[#221852] text-white shadow-[0_35px_90px_-45px_rgba(17,24,39,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(122,141,249,0.45)]">
       <img
-        src="/images/uscase_BG.png"
+        src="/images/mesh2.gif"
         alt=""
         className="absolute inset-0 h-full w-full object-cover opacity-40 mix-blend-screen transition-transform duration-700 group-hover:scale-105"
       />
       <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent mix-blend-overlay transition-opacity duration-500 group-hover:opacity-90" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(249,115,22,0.3),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(122,141,249,0.35),_transparent_60%)] opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
-      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-[#f97316]/25 blur-3xl transition-transform duration-700 group-hover:scale-110" />
+      <div className="absolute bottom-[-35%] right-[-5%] h-[380px] w-[380px] rounded-full bg-brand-400/30 blur-3xl transition-transform duration-700 group-hover:scale-110" />
       <motion.div
         initial={{ opacity: 0, y: 32 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.6, ease: 'easeOut' }}
-        className="relative z-10 px-6 py-24 sm:px-12 lg:px-20 lg:py-28"
+        className="relative z-10 flex w-full flex-col items-center px-6 py-24 text-center sm:px-12 lg:px-20 lg:py-28"
       >
         <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" />
@@ -26,10 +26,7 @@ export const UseCasesHero = () => {
           Designed for Real-World Impact
         </h1>
         <p className="mt-6 max-w-3xl text-base text-white/80 sm:text-lg">
-          GeoMind empowers organizations to deploy secure, efficient, and sovereign cloud and AI
+          GeoMind empowers organizations to deploy secure, efficient, and sovereign infrastructure. From enterprises to governments, our use cases demonstrate GeoMind's potential to generate value, ensure sovereignty, and support modern workloads.
-          infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
-          next-generation datacenters generate value, ensure sovereignty, and support modern AI,
-          cloud, and edge workloads.
         </p>
       </motion.div>
     </section>