feat: update UI styling and add new page images

- Added new WebP images for different pages (agent, cloud, compute, gpu, network, storage)
- Updated benefits section images with optimized WebP versions
- Enhanced text styling:
  - Increased paragraph font size to text-xl on large screens
  - Adjusted H5 line height for better readability
  - Updated card paragraph text size to text-base
- Refined visual design elements:
  - Changed cube stroke color to gray-600 for subtler appearance
  - Adjusted glow effects and gradients to

src/components/Texts.tsx

@@ -88,7 +88,7 @@ export const H4 = createTextComponent(
 )
 export const P = createTextComponent(
   'p',
-  'text-base lg:text-lg leading-relaxed'
+  'text-base lg:text-xl leading-relaxed'
 )
 export const Small = createTextComponent(
   'small',
@@ -100,7 +100,7 @@ export const Subtle = createTextComponent(
 )
 export const H5 = createTextComponent(
   'h5',
-  'text-xl lg:text-2xl font-light leading-snug tracking-normal'
+  'text-xl lg:text-2xl font-light lg:leading-snug leading-[0.85] tracking-normal'
 )
 export const Eyebrow = createTextComponent(
   'h2',
@@ -160,4 +160,4 @@ export const DownloadCardDescription = createTextComponent(
 )
 
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-sm tracking-wide leading-[1.525] font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-[1.525] font-light')

src/components/ui/CubeLight.tsx

@@ -26,7 +26,7 @@ const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({
     <path
       fill={`url(#cube-gradient-${index})`}
       d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
-      stroke="rgba(59, 130, 246, 0.25)"
+      stroke="rgba(107, 114, 128, 0.3)"
       strokeWidth="0.5"
     />
     <defs>
@@ -79,8 +79,8 @@ export function CubeLight({
         <div
           className={`absolute inset-0 blur-3xl rounded-2xl transition-all duration-500 ${
             isActive
-              ? "bg-blue-400/40 opacity-70"
+              ? "bg-cyan-400/20 opacity-30"
-              : "bg-blue-200/20 opacity-40"
+              : "bg-cyan-200/20 opacity-40"
           }`}
         />
 
@@ -90,8 +90,8 @@ export function CubeLight({
           className="w-48 sm:w-64 lg:w-80 h-auto relative"
           style={{
             filter: isActive
-              ? "drop-shadow(0 0 25px rgba(59, 130, 246, 0.4)) brightness(1.1)"
+              ? "drop-shadow(0 0 15px rgba(34, 211, 238, 0.25)) brightness(1.05)"
-              : "drop-shadow(0 0 10px rgba(59, 130, 246, 0.15)) brightness(1)",
+              : "drop-shadow(0 0 10px rgba(34, 211, 238, 0.15)) brightness(1)",
             transition: "all 0.4s ease",
           }}
         />
@@ -99,10 +99,10 @@ export function CubeLight({
         {/* Title overlay */}
         <div className="absolute inset-0 flex items-center justify-center">
           <h3
-            className="text-blue-900 text-sm lg:text-base font-medium text-center px-4"
+            className="text-cyan-900 text-sm lg:text-base font-medium text-center px-4"
             style={{
               textShadow:
-                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(59, 130, 246, 0.5)",
+                "0 0 15px rgba(255,255,255,0.8), 0 0 25px rgba(34, 211, 238, 0.5)",
             }}
           >
             {title}
@@ -131,7 +131,7 @@ export function CubeLight({
                 y1="1"
                 x2="120"
                 y2="1"
-                stroke="rgba(59, 130, 246, 0.6)"
+                stroke="rgba(34, 211, 238, 0.6)"
                 strokeWidth="1"
                 opacity="0.8"
               />

src/components/ui/StackedCubesLight.tsx

@@ -35,8 +35,8 @@ const stackData = [
 ];
 
 export function StackedCubesLight() {
-  const [active, setActive] = useState<string | null>("agent");
+  const [active, setActive] = useState<string | null>("network");
-  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
+  const [selectedForMobile, setSelectedForMobile] = useState<string | null>("network");
 
   const handleCubeClick = (id: string) => {
     setSelectedForMobile((prev) => (prev === id ? null : id));
@@ -49,10 +49,10 @@ export function StackedCubesLight() {
   return (
     <div className="flex flex-col items-center relative">
       {/* ✨ Ambient cyan-white gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/40 to-white blur-3xl opacity-70 pointer-events-none" />
+      <div className="absolute inset-0 bg-gradient-to-b from-white via-cyan-50/30 to-white blur-3xl opacity-70 pointer-events-none" />
       <div
         className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
-        onMouseLeave={() => setActive("agent")}
+        onMouseLeave={() => setActive("network")}
       >
         <motion.div
           className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96"
@@ -77,8 +77,8 @@ export function StackedCubesLight() {
               <div
                 className={`absolute inset-0 blur-2xl rounded-3xl transition-all duration-500 ${
                   active === layer.id
-                    ? "bg-cyan-300/40 opacity-70"
+                    ? "bg-cyan-300/20 opacity-20"
-                    : "bg-cyan-200/20 opacity-40"
+                    : "bg-cyan-200/20 opacity-20"
                 }`}
               />
               <CubeLight

src/pages/home/CallToAction.tsx

@@ -6,26 +6,23 @@ export function CallToAction() {
   return (
     <section
       id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-32"
+      className="relative overflow-hidden bg-gray-900 lg:py-32 py-24"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container className="relative">
-        <div className="mx-auto max-w-2xl text-center">
+        <div className="mx-auto max-w-xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Activate Your Sovereign <br />Mycelium Stack
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
+            Mesh cloud workloads through the encrypted Mycelium Network and unlock AI experiences without ever surrendering control of your infrastructure, performance, or data.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/cloud" variant="solid" color="white">
+            <Button to="/cloud" variant="solid" color="cyan">
               Start Deployment
             </Button>
-            <Button to="/download" variant="solid" color="cyan">
-              Get Mycelium Connector
-            </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"
               as="a"
@@ -33,7 +30,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Docs
+              Explore Docs
             </Button>
           </div>
         </div>

src/pages/home/HomeBenefits.tsx

@@ -2,7 +2,7 @@ import createGlobe from "cobe";
 import { useEffect, useRef } from "react";
 import { motion } from "motion/react";
 import { IconBrandYoutubeFilled } from "@tabler/icons-react";
-import { H2, P } from '@/components/Texts'
+import { H2, P, Eyebrow } from '@/components/Texts'
 
 
 export function HomeBenefits() {
@@ -33,8 +33,11 @@ export function HomeBenefits() {
     },
   ];
   return (
-    <div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
+    <div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
       <div className="px-12">
+        <Eyebrow className="text-center text-cyan-500">
+         Benefits
+        </Eyebrow>
         <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
           Why It Changes Everything
         </H2>

src/pages/home/HomeGlobe.tsx

@@ -35,7 +35,7 @@ export function WorldMap() {
         >
           <Eyebrow color="accent">Decentralized Network</Eyebrow>
           <SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
-          <P className=" mt-4 text-base leading-relaxed" color="light">
+          <P className=" mt-4" color="light">
             Project Mycelium enables anyone to deploy
             their own Internet infrastructure, anywhere.
           </P>
@@ -67,7 +67,7 @@ export function WorldMap() {
             >
               <MagicCard
                 gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
               >
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
                 <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -86,7 +86,7 @@ export function WorldMap() {
             >
               <MagicCard
                 gradientColor="#334155"
-                className="shadow-xl  shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
               >
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
                 <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -105,7 +105,7 @@ export function WorldMap() {
             >
               <MagicCard
                 gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
               >
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
                 <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
@@ -124,7 +124,7 @@ export function WorldMap() {
             >
               <MagicCard
                 gradientColor="#334155"
-                className="shadow-xl shadow-cyan-500/15 border border-gray-500/50 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
+                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
               >
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
                 <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>

src/pages/home/HomeSlider.tsx

@@ -26,12 +26,12 @@ export function HomeSlider() {
 }
 
 
-import networkImage from "@/images/slider/network1.jpg";
+import networkImage from "/images/pages/network.webp";
-import agentImage from "@/images/slider/agent1.jpg";
+import agentImage from "/images/pages/agent.webp";
-import cloudImage from "@/images/slider/cloud1.jpg";
+import cloudImage from "/images/pages/cloud.webp";
-import gpuImage from "@/images/slider/gpu1.jpg";
+import gpuImage from "/images/pages/gpu.webp";
-import computeImage from "@/images/slider/compute1.jpg";
+import computeImage from "/images/pages/compute.webp";
-import storageImage from "@/images/slider/storage1.jpg";
+import storageImage from "/images/pages/storage.webp";
 
 const data = [
   {

src/pages/home/StackSection.tsx

@@ -7,7 +7,7 @@ import { FadeIn } from "@/components/ui/FadeIn";
 
 export function StackSectionLight() {
   return (
-    <section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
+    <section className="relative w-full overflow-hidden py-24 isolate">
       {/* === Background Layer === */}
       <div className="absolute inset-0 z-0 bg-transparent">
         {/* Central main aura */}
@@ -15,7 +15,7 @@ export function StackSectionLight() {
           className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
           style={{
             background:
-              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
             filter: "blur(140px)",
           }}
           animate={{