ok

src/components/StackSection.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { StackedCubes } from "@/components/ui/StackedCubes";
+import { Button } from "@/components/Button";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+export function StackSectionPreview() {
+  const ref = useRef(null);
+  const isInView = useInView(ref);
+
+  return (
+    <section ref={ref} className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
+    {/* Gradient Blob Component */}
+      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
+      <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
+      <div className="mx-auto max-w-7xl">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
+          {/* Left Column - Text (1/3 width) */}
+          <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
+            <motion.h2
+              className="text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
+              Next-Gen AI Infrastructure
+            </motion.h2>
+            <motion.p
+              className="mx-auto mt-8 max-w-3xl text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            >
+              Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <Button className="mt-12" variant="outline"  href="https://threefold.io/build" >Discover How It Works →</Button>
+            </motion.div>
+          </div>
+          
+          {/* Right Column - Stacked Cubes (2/3 width) */}
+          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+            >
+              <StackedCubes />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}