ok

src/components/StackSection.tsx

@@ -11,7 +11,7 @@ export function StackSectionPreview() {
   const isInView = useInView(ref);
 
   return (
-    <section ref={ref} className="w-full h-screen bg-transparent lg:px-0  pt-12 px-6 relative">
+        <section ref={ref} className="w-full bg-transparent lg:px-0 py-24 px-6 relative">
     {/* Gradient Blob Component */}
       <motion.div
         initial={{ opacity: 0 }}

src/components/WorldMap.tsx

@@ -20,33 +20,45 @@ export function WorldMap() {
       </video>
 
       {/* Dark overlay */}
-      <div className="absolute inset-0 bg-black/20" />
+      <div className="absolute inset-0 bg-black/10" />
 
       {/* Content */}
       <div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
         {/* Title + Subtitle */}
-        <div className="max-w-xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="max-w-xl"
+        >
           <H2 color="light">Mycelium Network is Live.</H2>
           <P className="mt-4 text-base leading-relaxed font-light" color="light">
             Mycelium Cloud's advancement technology enables anyone to deploy
             their own Internet infrastructure, anywhere.
           </P>
-        </div>
+        </motion.div>
 
         {/* Bottom Layout: Globe + Cards */}
         <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
           {/* Globe Left Column */}
-          <div className="flex-1 flex items-center justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex-1 flex items-center justify-center"
+          >
             <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
               <Globe className="absolute inset-0 w-full h-full -left-24" />
             </div>
-          </div>
+          </motion.div>
 
           {/* Cards Right Column */}
           <div className="relative flex-1">
             <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.4 }}
               whileHover={{ scale: 1.05 }}
-              transition={{ duration: 0.2 }}
               className="absolute top-12 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
             >
               <CT color="light" className="uppercase tracking-wide">CORES</CT>
@@ -57,8 +69,10 @@ export function WorldMap() {
             </motion.div>
 
             <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.5 }}
               whileHover={{ scale: 1.05 }}
-              transition={{ duration: 0.2 }}
               className="absolute -top-10 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
             >
               <CT color="light" className="uppercase tracking-wide">NODES</CT>
@@ -69,8 +83,10 @@ export function WorldMap() {
             </motion.div>
 
             <motion.div
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
               whileHover={{ scale: 1.05 }}
-              transition={{ duration: 0.2 }}
               className="absolute bottom-28 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
             >
               <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
@@ -81,8 +97,10 @@ export function WorldMap() {
             </motion.div>
 
             <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.5, delay: 0.7 }}
               whileHover={{ scale: 1.05 }}
-              transition={{ duration: 0.2 }}
               className="absolute top-44 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80"
             >
               <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>