67 lines
2.8 KiB
TypeScript
67 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { StackedCubes } from "@/components/ui/StackedCubes";
|
|
import { Button } from "@/components/Button";
|
|
import { motion, useInView } from 'framer-motion';
|
|
import { H2, P } from '@/components/Texts';
|
|
import { useRef } from "react";
|
|
|
|
export function StackSectionPreview() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref);
|
|
|
|
return (
|
|
<section ref={ref} className="w-full h-screen bg-transparent lg:px-0 pt-12 px-6 relative">
|
|
{/* Gradient Blob Component */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={isInView ? { opacity: 0.4 } : { opacity: 0 }}
|
|
transition={{ duration: 1, delay: 0.1 }}
|
|
className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={isInView ? { opacity: 0.5 } : { opacity: 0 }}
|
|
transition={{ duration: 1, delay: 0.15 }}
|
|
className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] 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-left lg:text-left lg:col-span-1 order-1 lg:order-1">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<H2 className="">
|
|
The Mycelium Stack
|
|
</H2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
>
|
|
<P className="mx-auto mt-8 max-w-3xl" color="light">
|
|
Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
|
|
</P>
|
|
</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>
|
|
);
|
|
}
|