feat: update cube component color scheme from cyan to blue

- Changed cube gradient colors from cyan to blue for better visual consistency
- Updated glow effects and shadows to use blue (rgba(59, 130, 246)) instead of cyan
- Modified background aura gradients in StackSection for enhanced depth perception
- Replaced HomeFeaturesDark component with new HomeSlider in HomePage layout
- Added isolate property to StackSection to prevent gradient bleeding
- Enhanced background layer in StackSection with additional

src/pages/home/StackSection.tsx

@@ -7,35 +7,53 @@ import { FadeIn } from "@/components/ui/FadeIn";
 
 export function StackSectionLight() {
   return (
-    <section className="relative w-full overflow-hidden py-24 lg:py-40">
+    <section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
       {/* === Background Layer === */}
-      <div className="absolute inset-0 -z-10 bg-transparent">
-       
-
-        {/* === Center Radial Glow Aura === */}
+      <div className="absolute inset-0 z-0 bg-transparent">
+        {/* Central main aura */}
         <motion.div
           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(173,255,255,0.5) 0%, rgba(0,220,255,0.3) 30%, rgba(255,255,255,0) 70%)",
-            filter: "blur(120px)",
+              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 35%, rgba(255,255,255,0) 55%)",
+            filter: "blur(140px)",
           }}
           animate={{
-            opacity: [0.6, 0.8, 0.6],
+            opacity: [0.5, 0.8, 0.5],
             scale: [1, 1.05, 1],
           }}
           transition={{
-            duration: 8,
+            duration: 9,
             repeat: Infinity,
             ease: "easeInOut",
           }}
         />
+
+        {/* Faint cyan mist in the back for depth */}
+        <motion.div
+          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 50%, rgba(255,255,255,0) 90%)",
+            filter: "blur(200px)",
+          }}
+          animate={{
+            opacity: [0.2, 0.35, 0.2],
+            scale: [1, 1.1, 1],
+          }}
+          transition={{
+            duration: 12,
+            repeat: Infinity,
+            ease: "easeInOut",
+            delay: 3,
+          }}
+        />
       </div>
 
       {/* === Content === */}
       <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
         {/* Left Column - Text */}
-        <div className="text-center lg:text-left">
+        <div className="text-center lg:text-left z-10">
           <FadeIn>
             <Eyebrow color="accent">Technology Layers</Eyebrow>
             <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
@@ -53,7 +71,7 @@ export function StackSectionLight() {
         </div>
 
         {/* Right Column - Animated Stack */}
-        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
+        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
           <motion.div
             initial={{ y: 30, opacity: 0 }}
             whileInView={{ y: 0, opacity: 1 }}