updates from sacha

package-lock.json

@@ -1,13 +1,14 @@
 {
-  "name": "geomind2",
+  "name": "geomind",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "geomind2",
+      "name": "geomind",
       "version": "0.0.0",
       "dependencies": {
+        "@emailjs/browser": "^4.4.1",
         "framer-motion": "^12.23.23",
         "lucide-react": "^0.545.0",
         "react": "^19.1.1",
@@ -327,6 +328,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.4.1.tgz",
+      "integrity": "sha512-DGSlP9sPvyFba3to2A50kDtZ+pXVp/0rhmqs2LmbMS3I5J8FSOgLwzY2Xb4qfKlOVHh29EAutLYwe5yuEZmEFg==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.10",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "framer-motion": "^12.23.23",
     "lucide-react": "^0.545.0",
     "react": "^19.1.1",

src/components/layout/Layout.tsx

@@ -31,7 +31,7 @@ export const Layout = ({ children }: LayoutProps) => {
         className={cn(
           'relative z-10',
           isHome
-            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-mandatory'
+            ? 'h-screen overflow-x-hidden overflow-y-scroll scroll-smooth snap-y snap-proximity'
             : cn(
                 'pb-24 pt-28 lg:pt-32',
                 isAbout ? 'w-full px-0' : 'mx-auto max-w-6xl px-6 lg:px-8',

src/components/ui/ContactForm.tsx

@@ -1,6 +1,7 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
 import { X, Send, CheckCircle } from 'lucide-react';
+import emailjs from '@emailjs/browser';
 
 interface ContactFormProps {
   isOpen: boolean;
@@ -31,18 +32,35 @@ export default function ContactForm({ isOpen, onClose, title = "Get in Touch", f
     e.preventDefault();
     setIsSubmitting(true);
 
-    // TODO: Add emailjs integration later
-    // Simulate API call
-    setTimeout(() => {
-      console.log('Form submitted:', { ...formData, formType });
+    try {
+      const templateParams = {
+        from_name: formData.name,
+        from_email: formData.email,
+        company: formData.company,
+        message: formData.message,
+        to_email: 'emre@incubaid.com', // Recipient email
+        form_type: formType || 'General Inquiry',
+      };
+
+      await emailjs.send(
+        'service_03d0vf8', // EmailJS Service ID
+        'template_6o6e8oe', // EmailJS Template ID
+        templateParams,
+        'bhkly3gzrO-SA9w7v' // EmailJS Public Key
+      );
+
       setIsSubmitted(true);
       setTimeout(() => {
         setIsSubmitted(false);
         setFormData({ name: '', email: '', company: '', message: '' });
         onClose();
       }, 3000);
+    } catch (error) {
+      console.error('Email sending failed:', error);
+      alert('Failed to send message. Please try again.');
+    } finally {
       setIsSubmitting(false);
-    }, 1000);
+    }
   };
 
   const getPlaceholderMessage = () => {

src/pages/about/AboutPage.tsx

@@ -6,8 +6,8 @@ import { AboutCta } from './components/AboutCta';
 export const AboutPage = () => {
   return (
     <div className="space-y-12 text-slate-100 lg:space-y-16">
-      <AboutHero />
       <MissionVision />
+      <AboutHero />
       <TrackRecord />
       <AboutCta />
     </div>

src/pages/about/components/AboutHero.tsx

@@ -47,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 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)]">
+            <div className="group relative flex h-full flex-col overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#2d336c] via-[#4350d7] to-[#7a8df9] text-white shadow-[0_35px_90px_-45px_rgba(15,23,42,0.95)] transition-all duration-500 hover:-translate-y-1.5 hover:border-brand-400/60 hover:shadow-[0_40px_120px_-45px_rgba(99,102,241,0.55)]">
               <img
                 src="/images/hometech2.jpg"
                 alt=""
@@ -64,7 +64,7 @@ export const AboutHero = () => {
             >
               <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-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
-                <span className="text-white/80">About GeoMind</span>
+                <span className="text-white/80">About Us</span>
                 <span className="h-px w-12 bg-white/25 transition-colors duration-500 group-hover:bg-white/50 sm:w-14 lg:w-16" />
               </div>
               <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]">

src/pages/about/components/MissionVision.tsx

@@ -1,72 +1,32 @@
 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="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.35em] text-brand-300">
+    <section className="relative -mt-28 flex min-h-screen flex-col overflow-hidden text-white lg:-mt-32">
+      <img
+        src="/images/cloud_sky.png"
+        alt="Sunrise light shining through layered clouds above a resilient skyline."
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="absolute inset-0 bg-gradient-to-br from-black/85 via-black/60 to-brand-900/40" />
+
+      <div className="relative z-10 flex flex-1 items-start justify-center px-6 pb-24 pt-[45vh] text-center sm:px-10 sm:pt-[40vh]">
+        <div className="max-w-4xl space-y-8">
+          <span className="inline-block text-xs font-semibold uppercase tracking-[0.35em] text-brand-200">
             Mission &amp; Vision
           </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"
-          />
-        </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>
-            <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)]">
-              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-brand-200">
-                What drives us
-              </p>
-              <ul className="space-y-3 text-sm text-slate-300 sm:text-base">
-                <li>
-                  <span className="font-semibold text-white">People first:</span> compute that is
-                  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>
-          </figure>
+          <h2 className="text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">
+            Prioritizing people and planet for a sovereign cloud future
+          </h2>
+          <p className="mx-auto max-w-3xl text-base text-white/80 sm:text-lg">
+            GeoMind builds inclusive digital infrastructure because access to compute should be a fundamental human
+            right. We engineer systems that keep communities in control of their data, reward local participation, and
+            run with a lighter footprint on the planet.
+          </p>
         </div>
       </div>
+
+      <div className="relative z-10 px-6 pb-10 text-center text-xs font-semibold uppercase tracking-[0.35em] text-white/80 sm:px-10 sm:text-sm">
+        People • Planet • Authenticity • Open-source • Simplicity
+      </div>
     </section>
   );
 };

src/pages/about/components/TrackRecord.tsx

@@ -60,7 +60,7 @@ export const TrackRecord = () => {
         </p>
       </div>
 
-      <div className="mt-12 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-12 mx-auto max-w-6xl rounded-3xl border border-white/10 bg-black/60 p-8 shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] transition-all duration-300 hover:border-brand-300/40 hover:shadow-[0_36px_90px_-50px_rgba(56,189,248,0.35)]">
         <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
           {exits.map((exit, index) => (
             <motion.div

src/pages/home/HomePage.tsx

@@ -1,105 +1,8 @@
 import { useEffect } from 'react';
 import { HeroSection } from './components/HeroSection';
-import { ScrollLockedSection } from './components/ScrollLockedSection';
 import { CtaSection } from './components/CtaSection';
 import { Footer } from '../../components/layout/Footer';
-
-const highlightTextClass = 'text-brand-500';
-
-const sections = [
-  {
-    id: 'datacenter-economy',
-    eyebrow: 'Datacenter Economy',
-    title: (
-      <>
-        The Datacenter Economy,{' '}
-        <span className={highlightTextClass}>Decentralized</span>
-      </>
-    ),
-    description:
-      'GeoMind enables everyone to profit from Cloud and AI infrastructure at any scale. Deploy hardware, sell your capacity to the marketplace, earn from day one.',
-    showButton: false,
-  },
-  {
-    id: 'deploy-anywhere',
-    eyebrow: 'Deployment Tiers',
-    title: (
-      <>
-        <span className={highlightTextClass}>Deploy</span> Anywhere, Any Scale
-      </>
-    ),
-    description:
-      'Tier-H for homes and communities. Tier-S for enterprises and underutilized commercial space. Same economics, different scale.',
-    buttonText: 'Explore Hardware Tiers',
-    buttonLink: '/technology#hardware-tiers',
-  },
-  {
-    id: 'autonomous-stack',
-    eyebrow: 'Plug-and-Play',
-    title: (
-      <>
-        Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
-      </>
-    ),
-    description:
-      'Hardware ships with OS, Compute, Storage, Network, and GPU built-in. Fully autonomous operation eliminates vendor lock-in completely.',
-    buttonText: 'Explore Software Stack',
-    buttonLink: '/technology#software-stack',
-  },
-  {
-    id: 'capacity-marketplace',
-    eyebrow: 'Glocal Marketplace',
-    title: (
-      <>
-        Local Hardware, <span className={highlightTextClass}>Global</span> Marketplace
-      </>
-    ),
-    description: (
-      <>
-        Zero-OS partitions capacity into tradeable slices called <strong>Cloud Units (CU)</strong>. Use what you need. Sell idle capacity automatically on the marketplace.
-      </>
-    ),
-    buttonText: 'Explore Marketplace',
-    buttonLink: '/technology#marketplace',
-  },
-  {
-    id: 'dual-revenue',
-    eyebrow: 'Profit',
-    title: (
-      <>
-        <span className={highlightTextClass}>Earn</span> from Idle Capacity
-      </>
-    ),
-    description:
-      'Run your workloads during business hours. Rent excess capacity 24/7. Cloud capacity and infrastructure becomes an income-generating asset, not a cost center.',
-    showButton: false,
-  },
-  {
-    id: 'economic-advantage',
-    eyebrow: 'Competitive Advantage',
-    title: (
-      <>
-        <span className={highlightTextClass}>Lower Costs</span>, Competitive Prices
-      </>
-    ),
-    description:
-      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Lower OPEX and CAPEX. Your competitive advantage is built in.',
-    showButton: false,
-  },
-  {
-    id: 'instant-demand',
-    eyebrow: 'Offtakers',
-    title: (
-      <>
-        <span className={highlightTextClass}>Built-In</span> Demand
-      </>
-    ),
-    description:
-      'Initial enterprise offtake partners are in place. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
-    buttonText: 'See Use Cases',
-    buttonLink: '/usecases',
-  },
-];
+import { ScrollLockedSection } from './components/ScrollLockedSection';
 
 export const HomePage = () => {
   useEffect(() => {
@@ -108,14 +11,14 @@ export const HomePage = () => {
 
   return (
     <div className="flex min-h-screen flex-col bg-black text-white">
-      <div className="flex flex-col">
-        <HeroSection />
-        {sections.map((section) => (
-          <ScrollLockedSection key={section.id} {...section} />
-        ))}
+      <HeroSection />
+      <ScrollLockedSection />
+      <div className="snap-start">
         <CtaSection />
       </div>
-      <Footer />
+      <div className="snap-start">
+        <Footer />
+      </div>
     </div>
   );
 };

src/pages/home/components/HeroSection.tsx

@@ -22,7 +22,7 @@ export const HeroSection = () => {
             <p className="max-w-xl text-lg text-white">
               A new generation of decentralized cloud and AI infrastructure.
               <br />
-              Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
+              Faster, greener, smarter. Deploy your own datacenter, scale globally, and own your cloud, turning IT from a cost center to a profit center.
             </p>
           </motion.div>
 
@@ -30,9 +30,8 @@ export const HeroSection = () => {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
-            className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
+            className="flex items-center justify-end text-xs uppercase tracking-[0.3em] text-white"
           >
-            <span>Scroll to explore</span>
             <div className="flex items-center gap-3">
               <span className="h-px w-16 bg-white/60" />
               <span>The Living Cloud</span>

src/pages/home/components/ScrollLockedSection.tsx

@@ -1,86 +1,464 @@
-import type { ReactNode } from 'react';
-import { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ChevronsDown } from 'lucide-react';
+import { useState, type CSSProperties } from 'react';
+import { motion } from 'framer-motion';
+import type { LucideIcon } from 'lucide-react';
+import {
+  CloudCog,
+  Bot,
+  BatteryCharging,
+  Coins,
+  ShieldCheck,
+  Network,
+} from 'lucide-react';
 import { cn } from '../../../lib/cn';
-import { buttonBaseClass } from '../../../lib/buttonStyles';
 
-type ScrollLockedSectionProps = {
-  id: string;
-  eyebrow: string;
-  title: ReactNode;
-  description: ReactNode;
-  showButton?: boolean;
-  buttonText?: string;
-  buttonLink?: string;
+const baseSectionClass =
+  'relative flex min-h-screen snap-start items-center justify-center overflow-hidden bg-black pt-20 text-white sm:pt-24';
+const baseContainerClass =
+  'relative z-10 mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 pt-28 pb-20 sm:px-10 sm:pt-32 sm:pb-24 lg:px-16 lg:pt-36 lg:pb-28';
+const paragraphClass = 'text-base leading-relaxed text-white/70 sm:text-lg';
+
+const slideMotion = {
+  initial: { opacity: 0, y: 40 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.35 },
+  transition: { duration: 0.9, ease: 'easeOut' },
 };
 
-export const ScrollLockedSection = ({
-  id,
-  eyebrow,
-  title,
-  description,
-  showButton = true,
-  buttonText = 'Directory Info',
-  buttonLink,
-}: ScrollLockedSectionProps) => {
-  const navigate = useNavigate();
-  const sectionRef = useRef<HTMLElement | null>(null);
+type TierCardProps = {
+  image: { primary: string; fallback?: string; alt: string };
+  lines: [string, string];
+};
+
+const TierCard = ({ image, lines }: TierCardProps) => {
+  const [src, setSrc] = useState(image.primary);
 
   return (
-    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-black">
-      <div className="sticky top-0 flex h-screen flex-col">
-        <div className="flex h-full w-full flex-col px-6 sm:px-10 lg:px-16">
-          {/* Text Section - Takes ~20% of vertical space */}
-          <div className="flex-shrink-0 space-y-4 pt-16 sm:pt-20 lg:pt-24">
-            <span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-white">
-              {eyebrow}
-            </span>
-            <div className="max-w-3xl space-y-3">
-              <p className="text-2xl font-semibold leading-tight text-white sm:text-3xl lg:text-[2.25rem] lg:leading-[1.2]">
-                {title}
-              </p>
-              <p className="text-base leading-relaxed text-white/70 sm:text-lg">{description}</p>
-            </div>
-          </div>
+    <div className="group relative flex h-full flex-col gap-4 overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-6 sm:p-8">
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+      <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border border-white/10 bg-black/40">
+        <img
+          src={src}
+          alt={image.alt}
+          className="h-full w-full object-cover opacity-90"
+          onError={() => {
+            if (image.fallback && src !== image.fallback) {
+              setSrc(image.fallback);
+            }
+          }}
+        />
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/40" />
+      </div>
+      <div className="relative space-y-3">
+        <p className="text-lg font-semibold leading-tight text-white">{lines[0]}</p>
+        <p className="text-base leading-relaxed text-white/70">{lines[1]}</p>
+      </div>
+    </div>
+  );
+};
 
-          {/* Animation Section - Takes ~80% of vertical space */}
-          <div className="flex flex-col items-center gap-6 py-10 sm:gap-8 sm:py-12 lg:gap-10">
-            <div className="mx-auto flex aspect-[28/8] w-full items-center justify-center border border-white/30 bg-black/75 text-center shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)]">
-              <p className="px-8 text-xs font-semibold uppercase tracking-[0.35em] text-white/70 sm:text-sm">
-                Scroll triggered animation · Work in progress...
-              </p>
-            </div>
-            {/* Button below animation card */}
-            {showButton && buttonLink && (
-              <div className="flex justify-center">
-                {buttonLink.startsWith('http') ? (
-                  <a
-                    href={buttonLink}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={cn(buttonBaseClass, 'px-5 py-2 font-bold')}
-                  >
-                    {buttonText}
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={() => navigate(buttonLink)}
-                    className={cn(buttonBaseClass, 'px-5 py-2 font-bold')}
-                  >
-                    {buttonText}
-                  </button>
-                )}
-              </div>
+type SectionTagProps = {
+  label: string;
+  align?: 'start' | 'center';
+  className?: string;
+};
+
+const SectionTag = ({ label, align = 'start', className }: SectionTagProps) => (
+  <div
+    className={cn(
+      'flex items-center gap-4 text-xs font-semibold uppercase tracking-[0.4em] text-white',
+      align === 'center' ? 'justify-center' : 'justify-start',
+      className
+    )}
+  >
+    <span
+      aria-hidden="true"
+      className={cn(
+        'hidden h-px w-16 bg-gradient-to-r from-transparent via-brand-500/40 to-brand-300/70 sm:block',
+        align === 'start' && 'opacity-70'
+      )}
+    />
+    <span className="text-center sm:text-left">{label}</span>
+    <span
+      aria-hidden="true"
+      className={cn(
+        'hidden h-px w-16 bg-gradient-to-l from-transparent via-brand-500/40 to-brand-300/70 sm:block',
+        align === 'start' && 'opacity-40'
+      )}
+    />
+  </div>
+);
+
+type Feature = {
+  heading: [string, string];
+  detail: string;
+  icon: LucideIcon;
+  accent: string;
+  accentSoft: string;
+  accentGlow: string;
+  emphasis?: 'hero';
+};
+
+type FeatureCardProps = {
+  feature: Feature;
+};
+
+const FeatureCard = ({ feature }: FeatureCardProps) => {
+  const Icon = feature.icon;
+  const variant = feature.emphasis === 'hero' ? 'hero' : 'standard';
+
+  const featureStyles = {
+    '--feature-accent': feature.accent,
+    '--feature-accent-soft': feature.accentSoft,
+    '--feature-accent-glow': feature.accentGlow,
+  } as CSSProperties;
+
+  return (
+    <article
+      className={cn(
+        'group relative flex h-full flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-6 sm:p-7 [box-shadow:0_26px_55px_rgba(8,9,21,0.35)] backdrop-blur-[30px] transition-all duration-500 hover:-translate-y-1.5 hover:bg-white/[0.05]',
+        'group-hover:border-[color:var(--feature-accent-soft)] group-hover:[box-shadow:0_32px_80px_var(--feature-accent-glow)]',
+        variant === 'hero' && 'sm:p-9 lg:p-10 hover:-translate-y-2'
+      )}
+      style={featureStyles}
+    >
+      <div
+        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+        style={{
+          background: 'linear-gradient(140deg, var(--feature-accent-soft) 0%, rgba(5,7,18,0) 65%)',
+        }}
+      />
+      <div className="relative flex flex-1 flex-col gap-6">
+        <div className="flex items-start gap-4">
+          <span
+            className={cn(
+              'relative flex h-12 w-12 items-center justify-center rounded-2xl border border-white/15 bg-[#0d1126] text-white transition-transform duration-500 group-hover:scale-[1.05]',
+              variant === 'hero' && 'h-14 w-14 rounded-3xl'
             )}
-          </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" />
+            style={{
+              borderColor: 'var(--feature-accent-soft)',
+              background:
+                'linear-gradient(135deg, rgba(14,18,38,0.85) 0%, rgba(8,10,26,0.6) 60%)',
+              boxShadow: '0 18px 45px var(--feature-accent-glow)',
+            }}
+          >
+            <span
+              className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-40 mix-blend-screen transition-opacity duration-500 group-hover:opacity-100"
+              style={{
+                background:
+                  'radial-gradient(circle at 30% 30%, var(--feature-accent) 0%, rgba(12,14,30,0) 65%)',
+              }}
+            />
+            <Icon
+              className={cn('relative h-5 w-5', variant === 'hero' && 'h-6 w-6')}
+              style={{ color: 'var(--feature-accent)' }}
+            />
+          </span>
+          <h3
+            className={cn(
+              'font-semibold text-white leading-tight',
+              variant === 'hero' ? 'text-xl sm:text-2xl' : 'text-lg sm:text-xl'
+            )}
+          >
+            {feature.heading.map((line) => (
+              <span key={line} className="block">
+                {line}
+              </span>
+            ))}
+          </h3>
+        </div>
+        <span
+          className={cn(
+            'block h-px w-full rounded-full transition-opacity duration-500',
+            variant === 'hero' ? 'opacity-70' : 'opacity-50',
+            'group-hover:opacity-100'
+          )}
+          style={{
+            background:
+              'linear-gradient(90deg, rgba(12,14,34,0), var(--feature-accent), rgba(12,14,34,0))',
+          }}
+        />
+        <p
+          className={cn(
+            'text-sm leading-relaxed text-white/70 sm:text-base',
+            variant === 'hero' && 'text-base sm:text-lg text-white/80'
+          )}
+        >
+          {feature.detail}
+        </p>
+      </div>
+    </article>
+  );
+};
+
+const DatacenterSlide = () => (
+  <section
+    id="datacenter-economy"
+    className={cn(
+      baseSectionClass,
+      'bg-gradient-to-br from-[#050611] via-[#03030c] to-black'
+    )}
+  >
+    <div className="pointer-events-none absolute inset-0">
+      <div className="absolute left-[-8rem] top-[18%] h-80 w-80 rounded-full bg-[#5a6cf0]/15 blur-3xl" />
+      <div className="absolute right-[-6rem] bottom-[-8rem] h-[22rem] w-[22rem] rounded-full bg-[#2f3c96]/18 blur-3xl" />
+    </div>
+    <motion.div
+      {...slideMotion}
+      className={cn(
+        baseContainerClass,
+        'lg:grid lg:grid-cols-[minmax(0,6fr)_minmax(0,5fr)] lg:items-center lg:gap-16'
+      )}
+    >
+      <div className="space-y-6">
+        <SectionTag label="THE DATACENTER ECONOMY" />
+        <h2 className="text-4xl font-semibold leading-tight text-white sm:text-5xl">
+          The Cloud, Decentralized.
+        </h2>
+        <div className="space-y-5">
+          <p className={paragraphClass}>
+            GeoMind brings together next-generation hardware and an autonomous AI cloud stack to make
+            deploying and operating your own datacenter effortless. Open, local, and profitable by
+            design.
+          </p>
+          <p className={paragraphClass}>
+            Built for energy providers, telcos, and governments ready to own their infrastructure and
+            reclaim data sovereignty — creating the foundation for a new, self-sustaining digital
+            economy.
+          </p>
+        </div>
+      </div>
+      <div className="relative hidden h-full items-center justify-center lg:flex">
+        <div className="relative w-full max-w-md rounded-[2.5rem] border border-white/10 bg-white/[0.04] p-10 backdrop-blur-sm">
+          <div className="absolute inset-0 rounded-[2.5rem] bg-gradient-to-br from-white/10 to-white/0 opacity-60" />
+          <div className="relative flex h-full w-full flex-col items-center justify-center gap-6 text-center">
+            <span className="text-xs uppercase tracking-[0.35em] text-white/50">
+              Visualization Placeholder
+            </span>
+            <div className="flex h-28 w-full items-center justify-center rounded-2xl border border-white/10 bg-black/40">
+              <span className="text-[10px] uppercase tracking-[0.4em] text-white/40">
+                Immersive canvas coming soon
+              </span>
+            </div>
           </div>
         </div>
       </div>
-    </section>
-  );
-};
+    </motion.div>
+  </section>
+);
+
+const DeploymentSlide = () => (
+  <section
+    id="deployment-tiers"
+    className={cn(
+      baseSectionClass,
+      'bg-gradient-to-br from-[#03050d] via-[#050312] to-[#0a0618]'
+    )}
+  >
+    <div className="pointer-events-none absolute inset-0">
+      <div className="absolute right-1/4 top-[-6rem] h-64 w-64 rounded-full bg-[#8b6bff]/15 blur-3xl" />
+      <div className="absolute left-[-4rem] bottom-[-6rem] h-72 w-72 rounded-full bg-[#2b356f]/25 blur-3xl" />
+    </div>
+    <motion.div
+      {...slideMotion}
+      className={cn(
+        baseContainerClass,
+        'lg:grid lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)] lg:items-start lg:gap-16'
+      )}
+    >
+      <div className="space-y-6">
+        <SectionTag label="DEPLOYMENT TIERS" />
+        <h2 className="text-3xl font-semibold leading-tight text-white sm:text-4xl lg:text-[2.5rem]">
+          Two Forms of Autonomy. One Sovereign Cloud.
+        </h2>
+        <p className={paragraphClass}>
+          Whatever your footprint, GeoMind lets you build and control digital infrastructure on your
+          own terms.
+        </p>
+      </div>
+      <div className="grid gap-6 sm:grid-cols-2">
+        <TierCard
+          image={{
+            primary: '/images/tier-s.png',
+            fallback: '/images/tier-s.jpeg',
+            alt: 'Tier-S autonomous datacenter',
+          }}
+          lines={[
+            'Tier-S — Power redefined.',
+            'A liquid-cooled, high-density autonomous datacenter built for unmatched performance and endurance.',
+          ]}
+        />
+        <TierCard
+          image={{
+            primary: '/images/node.png',
+            alt: 'Tier-H distributed edge node',
+          }}
+          lines={[
+            'Tier-H — Intelligence everywhere.',
+            'A distributed, autonomous edge system that brings cloud power closer to people, cities, and life itself.',
+          ]}
+        />
+      </div>
+    </motion.div>
+  </section>
+);
+
+const MarketplaceSlide = () => (
+  <section
+    id="the-marketplace"
+    className={cn(
+      baseSectionClass,
+      'bg-gradient-to-br from-[#04040c] via-[#050819] to-[#060a1f]'
+    )}
+  >
+    <div className="pointer-events-none absolute inset-0">
+      <div className="absolute left-[-6rem] top-[-6rem] h-64 w-64 rounded-full bg-[#4d81ff]/20 blur-3xl" />
+      <div className="absolute right-[-4rem] bottom-[-6rem] h-72 w-72 rounded-full bg-[#2e395f]/26 blur-3xl" />
+    </div>
+    <motion.div
+      {...slideMotion}
+      className={cn(
+        baseContainerClass,
+        'lg:grid lg:grid-cols-[minmax(0,6fr)_minmax(0,5fr)] lg:items-center lg:gap-16'
+      )}
+    >
+      <div className="space-y-6">
+        <SectionTag label="THE MARKETPLACE" />
+        <h2 className="text-4xl font-semibold leading-tight text-white sm:text-5xl">
+          Autonomy that pays back.
+        </h2>
+        <div className="space-y-5">
+          <p className={paragraphClass}>
+            GeoMind doesn’t just let you deploy your own sovereign cloud, it gives you a way to earn
+            from it.
+          </p>
+          <p className={paragraphClass}>
+            Access a global marketplace where excess compute, storage, and bandwidth become revenue,
+            all while you stay fully in control of your infrastructure and data.
+          </p>
+        </div>
+      </div>
+      <div className="relative mt-6 space-y-6 overflow-hidden rounded-[2.5rem] border border-white/10 bg-white/[0.03] p-8 lg:mt-0">
+        <div className="absolute inset-x-0 top-0 h-1/2 rounded-[2.5rem] bg-gradient-to-b from-white/10 via-white/0 to-transparent" />
+        <div className="relative flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <span className="text-xs uppercase tracking-[0.35em] text-white/50">
+              Marketplace Flow Placeholder
+            </span>
+            <span className="text-xs text-white/40">Pending visual</span>
+          </div>
+          <div className="grid gap-3 text-sm text-white/70">
+            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
+              <span>Compute</span>
+              <span className="text-white/80">•</span>
+            </div>
+            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
+              <span>Storage</span>
+              <span className="text-white/80">•</span>
+            </div>
+            <div className="flex items-center justify-between rounded-2xl border border-white/5 bg-black/40 px-4 py-3">
+              <span>Bandwidth</span>
+              <span className="text-white/80">•</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  </section>
+);
+
+const features: Feature[] = [
+  {
+    heading: ['True Sovereign', 'Cloud'],
+    detail:
+      'All GPU/compute/storage/network capabilities delivered locally under your control. No vendor lock-in. No intermediaries.',
+    icon: CloudCog,
+    accent: '#60a5fa',
+    accentSoft: 'rgba(96, 165, 250, 0.22)',
+    accentGlow: 'rgba(96, 165, 250, 0.45)',
+    emphasis: 'hero',
+  },
+  {
+    heading: ['Autonomous', 'Operation'],
+    detail:
+      'Self-driving, self-healing infrastructure that deploys, optimizes, and maintains itself—autonomy as a service.',
+    icon: Bot,
+    accent: '#a855f7',
+    accentSoft: 'rgba(168, 85, 247, 0.24)',
+    accentGlow: 'rgba(168, 85, 247, 0.45)',
+    emphasis: 'hero',
+  },
+  {
+    heading: ['Energy', 'Sustainability'],
+    detail:
+      'Up to 3× more energy-efficient for AI/compute and up to 10× for storage, driven by intelligent power orchestration, heat reuse, and localized workloads.',
+    icon: BatteryCharging,
+    accent: '#34d399',
+    accentSoft: 'rgba(52, 211, 153, 0.24)',
+    accentGlow: 'rgba(52, 211, 153, 0.42)',
+    emphasis: 'hero',
+  },
+  {
+    heading: ['Radical Cost', 'Advantage'],
+    detail:
+      'Up to 7× more affordable by eliminating hyperscaler overhead and monetizing idle capacity.',
+    icon: Coins,
+    accent: '#fbbf24',
+    accentSoft: 'rgba(251, 191, 36, 0.26)',
+    accentGlow: 'rgba(251, 191, 36, 0.42)',
+  },
+  {
+    heading: ['Uncompromising', 'Security'],
+    detail:
+      'Encrypted, isolated, and pre-deterministic—from silicon to software—for enterprise and nation-grade assurance.',
+    icon: ShieldCheck,
+    accent: '#818cf8',
+    accentSoft: 'rgba(129, 140, 248, 0.24)',
+    accentGlow: 'rgba(129, 140, 248, 0.45)',
+  },
+  {
+    heading: ['Scalable by', 'Nature'],
+    detail:
+      'From edge nodes to sovereign cloud networks—modular, rapidly deployable, and orchestrated as one fabric.',
+    icon: Network,
+    accent: '#f472b6',
+    accentSoft: 'rgba(244, 114, 182, 0.24)',
+    accentGlow: 'rgba(244, 114, 182, 0.42)',
+  },
+];
+
+const FeaturesSlide = () => (
+  <section
+    id="the-features"
+    className={cn(
+      baseSectionClass,
+      'bg-gradient-to-br from-[#05060f] via-[#03040b] to-black'
+    )}
+  >
+    <div className="pointer-events-none absolute inset-0">
+      <div className="absolute left-1/2 top-[-10rem] h-[26rem] w-[26rem] -translate-x-1/2 rounded-full bg-[#4a5dd9]/14 blur-3xl" />
+      <div className="absolute right-[-8rem] bottom-[-4rem] h-72 w-72 rounded-full bg-[#1e233d]/35 blur-3xl" />
+    </div>
+    <motion.div
+      {...slideMotion}
+      className={cn(baseContainerClass, 'items-stretch gap-12')}
+    >
+      <div className="flex justify-center">
+        <SectionTag label="THE FEATURES" align="center" />
+      </div>
+      <div className="grid grid-cols-1 gap-5 sm:gap-6 md:[grid-template-columns:repeat(auto-fit,minmax(320px,1fr))] md:auto-rows-[minmax(280px,auto)]">
+        {features.map((feature) => (
+          <FeatureCard key={feature.heading.join('-')} feature={feature} />
+        ))}
+      </div>
+    </motion.div>
+  </section>
+);
+
+export const ScrollLockedSection = () => (
+  <>
+    <DatacenterSlide />
+    <DeploymentSlide />
+    <MarketplaceSlide />
+    <FeaturesSlide />
+  </>
+);

src/pages/technology/components/TechnologicalBenefits.tsx

@@ -1,26 +1,26 @@
 import { motion } from 'framer-motion';
-import { Store, Coins, Cpu, Handshake } from 'lucide-react';
+import { Globe, Coins, Zap, ShieldCheck } from 'lucide-react';
 
 const benefits = [
   {
-    title: 'Free to List',
-    description: 'Join the marketplace at no cost and showcase available cloud units instantly.',
-    icon: Store,
+    title: 'Open access',
+    description: 'List available capacity instantly and reach verified global buyers.',
+    icon: Globe,
   },
   {
-    title: 'Earn from Idle Capacity',
-    description: 'Sell unused compute cycles to AI teams and turn sunk costs into recurring revenue.',
+    title: 'Earn from excess',
+    description: 'Monetize idle compute, storage, and bandwidth.',
     icon: Coins,
   },
   {
-    title: 'Capacity on Demand',
-    description: 'Tap trusted nodes across the network when workloads spike so you always have extra capacity when you need it.',
-    icon: Cpu,
+    title: 'On-demand scaling',
+    description: 'Access additional nodes when workloads surge.',
+    icon: Zap,
   },
   {
-    title: 'Trusted Settlements',
-    description: 'Automated contracts and clear payouts keep every transaction compliant and transparent.',
-    icon: Handshake,
+    title: 'Trusted ecosystem',
+    description: 'Verified participants, transparent contracts, and secure settlements.',
+    icon: ShieldCheck,
   },
 ];
 
@@ -42,12 +42,11 @@ export const TechnologicalBenefits = () => {
           />
         </div>
         <h2 className="mt-4 text-3xl font-semibold text-white sm:text-4xl">
-          Infrastructure that Pays for Itself
+          Turn Infrastructure Into Income.
         </h2>
         <p className="mt-5 text-base text-slate-300 sm:text-lg">
-          GeoMind Marketplace is a free exchange for cloud units. Operators list spare capacity,
-          buyers tap verified resources, and everyone earns. Let your AI infrastructure fund itself
-          as unused workloads convert into new revenue streams.
+          The GeoMind Marketplace connects operators with global demand for compute, storage, and GPU capacity.
+          Sell your unused resources, tap additional capacity on demand, and transform infrastructure from a cost center into a profit center.
         </p>
       </div>
       <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">

src/pages/technology/components/TechnologyArchitecture.tsx

@@ -19,27 +19,31 @@ type Tab = {
 const tabs: Tab[] = [
   {
     id: 'zero-os',
-    label: 'Zero-OS',
-    title: 'Zero-OS',
+    label: 'Mycelium OS',
+    title: 'Mycelium OS',
     description:
-      'Minimal, self-healing bare-metal OS that powers autonomous nodes across the ThreeFold Grid.',
-    cardText: 'Stateless architecture ensures every boot is secure and unmodified, eliminating configuration drift and security vulnerabilities.',
+      'Autonomous. Secure. Efficient. A bare-metal operating system that runs infrastructure directly on hardware — no hypervisors, no drift, no manual management. It boots from a verified state, locks the system, and connects to the Mycelium network as a permanent, self-managing node.',
+    cardText: 'A bare-metal operating system that runs infrastructure directly on hardware with hardware-level security and self-driving operation.',
     bullets: [
       {
-        heading: 'Immutable by Design',
-        body: 'Boots statelessly from a signed image each time, removing drift and shrinking the attack surface.',
+        heading: 'Hardware-level security',
+        body: 'The system is sealed after boot, isolating it from external access.',
       },
       {
-        heading: 'Autonomous Operations',
-        body: 'Digital twin controllers redeploy workloads to healthy nodes and roll out updates with zero downtime.',
+        heading: 'Self-driving operation',
+        body: 'Provisions, repairs, and optimizes itself automatically.',
       },
       {
-        heading: 'Zero-Trust Networking',
-        body: 'Integrated WireGuard overlay and cryptographic identities secure every peer-to-peer connection.',
+        heading: 'Bare-metal performance',
+        body: 'Maximum efficiency, zero virtualization overhead.',
       },
       {
-        heading: 'Unified Resource Fabric',
-        body: 'Exposes compute, storage, and network primitives through a single API for edge, datacenter, or hybrid deployments.',
+        heading: 'Energy-smart design',
+        body: 'Powers down when idle, extending hardware life and cutting waste.',
+      },
+      {
+        heading: 'Network-native',
+        body: 'Integrates seamlessly into the encrypted Mycelium mesh for instant connectivity.',
       },
     ],
   },
@@ -47,50 +51,53 @@ const tabs: Tab[] = [
     id: 'compute',
     label: 'Compute',
     title: 'Compute',
-    description: 'A self-healing compute fabric designed for resilience, decentralization, and scale.',
-    cardText: 'Autonomous workload orchestration across distributed nodes ensures maximum uptime and performance.',
+    description: 'Predictable. Compatible. Free from lock-in. Deploy any workload exactly where you want it—with full control over hardware, policy, and cost. Fully compatible with Kubernetes, Docker, and micro-VMs; if it runs on Linux, it runs on Mycelium.',
+    cardText: 'Deploy any workload exactly where you want it—with full control over hardware, policy, and cost.',
     bullets: [
       {
-        heading: 'Autonomous Workload Management',
-        body: 'Workloads automatically migrate to healthy nodes to ensure fault tolerance and high availability.',
+        heading: 'Pre-deterministic control',
+        body: 'Know precisely where workloads run and under what conditions.',
       },
       {
-        heading: 'AI & Web3 Ready',
-        body: 'Run LLMs, autonomous agents, blockchain nodes, and immersive metaverse apps at the edge.',
+        heading: 'Full compatibility',
+        body: 'Supports major cloud-native frameworks out of the box.',
       },
       {
-        heading: 'Zero-OS (ZOS)',
-        body: 'Our custom-built, stateless, immutable OS that powers:',
-        subpoints: [
-          'MicroVMs & containerized environments (Kubernetes, Docker, Firecracker).',
-          'AI inference and training workloads.',
-          'Web3 infrastructure and federated learning models.',
-        ],
+        heading: 'Universal workloads',
+        body: 'From AI to enterprise apps, deploy seamlessly anywhere.',
       },
       {
-        heading: 'No Hyperscalers',
-        body: 'Fully independent infrastructure managed by intelligent agents on bare metal.',
+        heading: 'Transparent economics',
+        body: 'Pay-as-you-go, no lock-in, always efficient.',
       },
     ],
   },
   {
     id: 'data',
-    label: 'Data',
-    title: 'Data',
-    description: 'Private, distributed, and AI-native storage with user sovereignty at its core.',
-    cardText: 'Quantum-safe encryption and distributed redundancy protect your data while maintaining lightning-fast access.',
+    label: 'Storage',
+    title: 'Storage',
+    description: 'Private. Efficient. Interoperable. Mycelium Storage keeps data where it belongs—under your control. Encrypted, distributed, and locality-aware, it delivers fast, compliant, and sustainable data management across regions and clouds.',
+    cardText: 'Mycelium Storage keeps data where it belongs—under your control with quantum-safe encryption.',
     bullets: [
       {
-        heading: 'Privacy-First',
-        body: 'End-to-end encryption and redundancy, with no central control.',
+        heading: 'Quantum-safe design',
+        body: 'Secured in use, in transit, and at rest against next-generation threats.',
       },
       {
-        heading: '10x Efficient',
-        body: 'Optimized for performance and sustainability, far surpassing traditional cloud.',
+        heading: 'Geo-aware',
+        body: 'Data stays within chosen jurisdictions to meet sovereignty and compliance needs.',
       },
       {
-        heading: 'Geo-Aware & Compliant',
-        body: "Data stays where it's supposed to, satisfying regional policies and privacy standards.",
+        heading: 'Energy-efficient',
+        body: 'Erasure coding and smart replication cut storage bloat and power use.',
+      },
+      {
+        heading: 'Open protocols',
+        body: 'Compatible with S3, IPFS, NFS, and other industry standards.',
+      },
+      {
+        heading: 'Unified control',
+        body: 'Manage storage from edge to core through a single interface.',
       },
     ],
   },
@@ -99,51 +106,59 @@ const tabs: Tab[] = [
     label: 'Network',
     title: 'Network',
     description:
-      'A secure, peer-to-peer internet backbone, self-sustaining, censorship-resistant, and optimized for performance.',
-    cardText: 'Mesh topology with intelligent routing creates a resilient network that adapts to changing conditions.',
+      'Sovereign. Secure. Resilient. Mycelium Network forms a cryptographically verified mesh that connects every node, datacenter, and user into one sovereign backbone. It ensures private, reliable, and compliant connectivity across borders — built for a world where resilience and control matter more than ever.',
+    cardText: 'Mycelium Network forms a cryptographically verified mesh that connects every node into one sovereign backbone.',
     bullets: [
       {
-        heading: 'End-to-End Encryption',
-        body: 'All communications are secured by design.',
+        heading: 'End-to-end encrypted mesh',
+        body: 'Private IPv6 overlay with identity-bound nodes and no intermediaries.',
       },
       {
-        heading: 'Shortest-Path Routing',
-        body: 'Dynamically finds the most efficient path across the network, reducing latency and cost.',
+        heading: 'Shortest-path routing',
+        body: 'Dynamically connects peers through the most direct verified route.',
       },
       {
-        heading: 'No Middlemen',
-        body: 'Fully peer-to-peer, removing reliance on centralized ISPs or DNS providers.',
+        heading: 'Self-healing connectivity',
+        body: 'Automatically restores links when paths degrade or fail.',
       },
       {
-        heading: 'Censorship Resistance',
-        body: 'Built to thrive under pressure, even in restricted or controlled regions.',
+        heading: 'Integrated name service',
+        body: 'Gateways handle DNS and content delivery within the mesh.',
+      },
+      {
+        heading: 'Policy-aware by design',
+        body: 'Data stays within chosen jurisdictions for full sovereignty.',
       },
     ],
   },
   {
     id: 'gpu',
     label: 'GPU Fabric',
-    title: 'Distributed GPU Fabric',
+    title: 'GPU Fabric',
     description:
-      'A sovereign mesh of GPU capacity that turns idle silicon into revenue while powering global AI workloads and collective intelligence.',
+      'Intelligent. Scalable. Sovereign. A distributed GPU network that runs AI and rendering workloads closer to data—improving latency, utilization, and control.',
     cardText:
-      'Autonomous allocation keeps GPUs saturated with high-value workloads, creating a lucrative marketplace for operators and builders alike.',
+      'A distributed GPU network that runs AI and rendering workloads closer to data—improving latency, utilization, and control.',
     bullets: [
       {
-        heading: 'Global GPU Federation',
-        body: 'Aggregates GPUs across homes, enterprises, and datacenters into a single pool so large-scale training and inference run close to data without hyperscaler dependence.',
+        heading: 'Federated architecture',
+        body: 'Securely aggregates and manages GPU capacity across datacenters and edge nodes.',
       },
       {
-        heading: 'Revenue Engine',
-        body: 'Dynamic marketplace routes AI and rendering jobs to available GPUs, maximizing utilization and delivering steady cash flow to operators.',
+        heading: 'AI-driven orchestration',
+        body: 'Agents route workloads dynamically for peak performance and zero idle time.',
       },
       {
-        heading: 'Sovereign Collective Intelligence',
-        body: 'Supports collaborative model training where communities contribute data and capacity, unlocking responsible AI networks governed by their stakeholders.',
+        heading: 'Open ecosystem',
+        body: 'Pre-integrated open-source LLMs, databases, and developer tools for instant AI deployment.',
       },
       {
-        heading: 'Zero-OS Integration',
-        body: 'Zero-OS provisions GPU-optimized microVMs with secure drivers, ensuring deterministic performance and remote attestation of every workload.',
+        heading: 'Local and sovereign',
+        body: 'Inference and training stay within borders, under your governance.',
+      },
+      {
+        heading: 'Transparent economics',
+        body: 'Pay-per-use, no vendor lock-in, full ownership of data and outcomes.',
       },
     ],
   },

src/pages/technology/components/TechnologyStack.tsx

@@ -5,13 +5,13 @@ const stackItems = [
     title: 'Tier S Datacenters',
     image: '/images/tiers.png',
     description:
-      'Strategically deployed, containerized datacenters built for autonomy and resilience. Self-healing infrastructure that runs AI & cloud workloads at the edge while delivering up to 3x lower energy use, improved security, and significantly higher ROI.',
+      'High-density, liquid-cooled autonomous datacenters engineered for sustained performance and efficiency. The optimal backbone for national platforms and enterprise workloads, delivering higher ROI with up to 3× lower energy use and a dramatically smaller carbon footprint than hyperscalers.',
   },
   {
     title: 'Tier H Datacenters',
     image: '/images/tierh.png',
     description:
-      'Lightweight edge nodes for homes, offices, and campuses that turn properties into secure, reward-earning contributors to global infrastructure. Easy to deploy and manage, designed for planetary-scale rollout without requiring specialist technical skills.',
+      'Distributed, self-managing edge nodes that bring compute and storage closer to users. No cooling required, minimal power draw, and seamless scalability — cutting capex and opex while supporting ESG goals through localized, energy-efficient infrastructure.',
   },
 ];
 
@@ -37,8 +37,10 @@ export const TechnologyStack = () => {
             An Infrastructure Built for the AI Era
           </h2>
           <p className="mt-5 text-base text-slate-300 sm:text-lg">
-            Our unique technology stack delivers unmatched security, scalability, and flexibility,
-            preparing you for the AI workforce of the future.
+          GeoMind’s hardware ecosystem empowers businesses and countries to build, operate, and scale sovereign AI infrastructure within their own borders.
+          Secure, local, and energy-efficient by design, it delivers the performance and autonomy needed to power the AI workforce of the future.
+
+
           </p>
         </div>
         <div className="mt-12 grid gap-6 lg:grid-cols-2">

src/pages/usecases/components/UseCasesGrid.tsx

@@ -7,14 +7,14 @@ import ContactForm from '../../../components/ui/ContactForm';
 const useCases = [
   {
     title: 'Project Mycelium',
-    highlight: 'Decentralized Core',
+    highlight: 'Decentralized Tools',
     description:
       'Project Mycelium turns GeoMind primitives into community services, giving underserved regions, nomads, and privacy seekers decentralized storage, secure networking, and personal agents while sustaining host demand.',
     image: '/images/mycelium.jpeg',
   },
   {
     title: 'Digital Free Zone',
-    highlight: 'Sovereign Innovation',
+    highlight: 'Sovereign Innovation Zone',
     description:
       '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',

vite.config.ts

@@ -5,6 +5,6 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   server: {
-    allowedHosts: ['coucha-royal-nontannic.ngrok-free.dev', 'reasonedly-avifaunal-wanda.ngrok-free.dev'],
+    allowedHosts: ['coucha-royal-nontannic.ngrok-free.dev', 'reasonedly-avifaunal-wanda.ngrok-free.dev', 'unattributive-evia-inanimately.ngrok-free.dev'],
   },
 })