ok

src/app/(main)/page.tsx

@@ -25,26 +25,18 @@ export default function Home() {
       <section id="steps">
         <Steps />
       </section>
+      <section id="world-map">
+        <WorldMap />
+      </section>
       <section id="grid-stats">
         <GridStats />
       </section>
-      <section id="stack-section">
-        <StackSectionPreview />
-      </section>
-
-      <section id="clickable-gallery">
-        <ClickableGallery />
-      </section>
       <section id="use-cases">
         <UseCases />
       </section>
       <section id="call-to-action">
         <CallTo />
       </section>
-      <section id="faqs">
-        <Faqs />
-      </section>
-
       <ScrollDown />
       <ScrollUp />
     </>

src/components/Archives/GridStats copy.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import CountUp from "react-countup";
+import React from "react";
+import { Button } from "./Button";
+
+export function GridStats() {
+  return (
+    <div id="grid-stats" className="py-24 bg-transparent relative">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+          {/* Column 1: Title & NODES */}
+          <div className="flex flex-col space-y-10">
+            {/* Title + Description */}
+            <div>
+              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
+                Powered by a Global Community
+              </h2>
+              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
+                ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
+              </p>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
+            </div>
+
+          </div>
+
+          {/* Column 2: CORES (staggered) + SSD */}
+          <div className="flex flex-col space-y-10">
+            <StatCard
+              label="CORES"
+              description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
+              value={<CountUp end={54_958} duration={2.5} separator="," />}
+              note="Total Central Processing Unit Cores available on the grid."
+            />
+
+            <StatCard
+              label="SSD CAPACITY"
+              description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
+              value={<CountUp end={7_364_506} duration={2.5} separator="," />}
+              unit="GB"
+              note="The total amount of storage (SSD, HDD, & RAM) on the grid."
+            />
+          </div>
+
+          
+
+          {/* Column 3: nodes countries */}
+          <div className="flex flex-col space-y-10 justify-start">
+            <StatCard
+              label="NODES"
+              description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
+              value={<CountUp end={1778} duration={2.5} separator="," />}
+              note="The total number of nodes on the grid."
+
+            />
+
+            <StatCard
+              label="COUNTRIES"
+              description="The number of countries where at least one node is connected and operational on the grid."
+              value={<CountUp end={51} duration={2.5} separator="," />}
+              note="The total number of countries with active nodes."
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 🧱 Stat Card Component
+function StatCard({
+  label,
+  description,
+  value,
+  unit,
+  note,
+  className = "",
+}: {
+  label: string;
+  description: string;
+  value: React.ReactNode;
+  unit?: string;
+  note: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`relative flex flex-col overflow-hidden rounded-3xl bg-white shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      style={{
+        filter: 'brightness(1)',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.filter = 'brightness(0.8)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.filter = 'brightness(1)';
+      }}
+    >
+      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
+      <p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
+        {description}
+      </p>
+      <div className="mt-8 flex items-center space-x-3">
+        <span className="text-gradient-neutral-vertical text-3xl">•</span>
+        <div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
+          {value}
+          {unit && (
+            <span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
+          )}
+        </div>
+      </div>
+      <p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
+        {note}
+      </p>
+    </div>
+  );
+}

src/components/GridStats.tsx

@@ -6,59 +6,51 @@ import { Button } from "./Button";
 
 export function GridStats() {
   return (
-    <div id="grid-stats" className="py-24 bg-transparent relative">
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-          {/* Column 1: Title & NODES */}
+        <div
+      id="grid-stats"
+      className="py-24 relative -top-20 "
+      style={{
+        backgroundImage: "url(/images/benefits.webp)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
+        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
+          {/* Column 1: Title & Description */}
           <div className="flex flex-col space-y-10">
-            {/* Title + Description */}
             <div>
-              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
-                Powered by a Global Community
+              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+                Robust Infrastructure for your Intellegence Needs
               </h2>
-              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
-                ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
+              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+                Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
               </p>
               <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
             </div>
-
           </div>
 
-          {/* Column 2: CORES (staggered) + SSD */}
+          {/* Column 2: StatCards */}
           <div className="flex flex-col space-y-10">
             <StatCard
-              label="CORES"
-              description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
-              value={<CountUp end={54_958} duration={2.5} separator="," />}
-              note="Total Central Processing Unit Cores available on the grid."
+              label="Dedicated Hosting"
+              description="Run LLMs, VLMs, and diffusion models on single-tenant GPUs with private endpoints. Bring your own weights or deploy from a curated library of open models. Enjoy full control with flexible hourly pricing. Perfect for always-on inference or workloads exceeding 100K tokens per minute."
             />
-
             <StatCard
-              label="SSD CAPACITY"
-              description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
-              value={<CountUp end={7_364_506} duration={2.5} separator="," />}
-              unit="GB"
-              note="The total amount of storage (SSD, HDD, & RAM) on the grid."
+              label="Data Sovereignty"
+              description="Keep your sensitive data fully under your control. Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data. This makes Mycelium ideal for enterprises in regulated industries that demand compliance and privacy."
             />
           </div>
 
-          
-
-          {/* Column 3: nodes countries */}
+          {/* Column 3: StatCards */}
           <div className="flex flex-col space-y-10 justify-start">
             <StatCard
-              label="NODES"
-              description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
-              value={<CountUp end={1778} duration={2.5} separator="," />}
-              note="The total number of nodes on the grid."
-
+              label="Seamless Scalability"
+              description="Scale from a single agent to hundreds without re-architecting. Mycelium’s decentralized infrastructure dynamically allocates compute, storage, and bandwidth across the network, so your AI workloads remain fast and resilient even under heavy demand."
             />
-
             <StatCard
-              label="COUNTRIES"
-              description="The number of countries where at least one node is connected and operational on the grid."
-              value={<CountUp end={51} duration={2.5} separator="," />}
-              note="The total number of countries with active nodes."
+              label="Composable Agent Ecosystem"
+              description="Mix and match agents for every part of your workflow: data ingestion, cleaning, orchestration, analysis, and reporting. Build an intelligent automation stack that evolves with your business needs, integrating easily with existing tools and APIs."
             />
           </div>
         </div>
@@ -85,7 +77,7 @@ function StatCard({
 }) {
   return (
     <div
-      className={`relative flex flex-col overflow-hidden rounded-3xl bg-white shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      className={`relative flex flex-col overflow-hidden rounded-3xl bg-gray-900/75 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
       style={{
         filter: 'brightness(1)',
       }}
@@ -96,22 +88,10 @@ function StatCard({
         e.currentTarget.style.filter = 'brightness(1)';
       }}
     >
-      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
-      <p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
+      <h3 className="text-lg font-semibold text-white" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
+      <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
         {description}
       </p>
-      <div className="mt-8 flex items-center space-x-3">
-        <span className="text-gradient-neutral-vertical text-3xl">•</span>
-        <div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
-          {value}
-          {unit && (
-            <span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
-          )}
-        </div>
-      </div>
-      <p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
-        {note}
-      </p>
     </div>
   );
 }

src/components/Steps.tsx

@@ -32,7 +32,7 @@ export function Steps() {
   return (
     <section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}>
       <div className="absolute inset-0 bg-black/70" />
-      <div className="relative px-6 lg:px-4">
+      <div className="relative px-6 lg:px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}

src/components/Texts.tsx

@@ -52,10 +52,10 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports
 export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
 export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
-export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl')
-export const P  = createTextComponent('p', 'text-xl font-normal text-pretty lg:text-2xl')
-export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium')
-export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight')
-export const CT = createTextComponent('span', 'text-base lg:text-xl font-semibold text-center')
+export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
+export const P  = createTextComponent('p', 'text-lg font-normal text-pretty lg:text-xl')
+export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
+export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-tight')
+export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
 export const CP = createTextComponent('p', 'text-sm lg:text-base leading-relaxed font-light')
 export const NL = createTextComponent('span', 'text-lg font-semibold leading-6')

src/components/WorldMap.tsx

@@ -1,7 +1,23 @@
 import { Globe } from "@/components/ui/globe"
+import { motion } from "framer-motion"
+import { H2, H3, H4, P } from "./Texts"
 
 export function WorldMap() {
-    return (
-        <Globe />
-    )
+
+  return (
+    <div className="relative h-screen max-w-full overflow-hidden bg-black -top-20">
+      <div className="absolute top-0 left-0 px-6 py-24 z-10 max-w-lg">
+        <H4 className="" color="light">
+          Mycelium Network is Live.
+        </H4>
+        <P className="mt-6 text-base text-pretty leading-relaxed font-light" color="light">
+          Mycelium Cloud's advancement technology enables anyone to deploy their own Internet infrastructure, anywhere.
+        </P>
+      </div>
+      <div className="absolute inset-0 flex items-center justify-center">
+        <Globe className="top-28" />
+      </div>
+      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
+    </div>
+  );
 }

src/components/ui/globe.tsx

@@ -20,7 +20,7 @@ const GLOBE_CONFIG: COBEOptions = {
   mapSamples: 16000,
   mapBrightness: 1.2,
   baseColor: [1, 1, 1],
-  markerColor: [251 / 255, 100 / 255, 21 / 255],
+  markerColor: [1 / 255, 94 / 255, 255 / 255],
   glowColor: [1, 1, 1],
   markers: [
     { location: [14.5995, 120.9842], size: 0.03 },