75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
|
|
import { H2, P, SectionHeader } from "@/components/Texts";
|
|
import { FadeIn } from "./FadeIn";
|
|
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
|
|
|
|
export function StackSectionLight() {
|
|
return (
|
|
<section className="relative w-full overflow-hidden py-24 lg:py-40">
|
|
{/* === Background Layer === */}
|
|
<div className="absolute inset-0 -z-10 bg-[#FAFAFA]">
|
|
{/* Dotted Glow Background */}
|
|
<DottedGlowBackground
|
|
gap={15}
|
|
radius={2}
|
|
color="rgba(0,0,0,0.4)"
|
|
glowColor="rgba(0,170,255,0.85)"
|
|
opacity={0.2}
|
|
/>
|
|
{/* Faint 3D grid floor */}
|
|
<div className="absolute inset-0 flex items-end justify-center overflow-hidden">
|
|
<div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
|
|
</div>
|
|
</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">
|
|
<FadeIn>
|
|
<SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
|
|
The Mycelium Stack
|
|
</SectionHeader>
|
|
</FadeIn>
|
|
|
|
<FadeIn>
|
|
<P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
|
|
Built with Mycelium technology, our AI infrastructure ensures
|
|
unbreakable networks, complete data sovereignty, ultra-secure
|
|
agent-human communication, and unhackable data storage systems.
|
|
</P>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
{/* Right Column - Animated Stack */}
|
|
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
|
|
<motion.div
|
|
initial={{ y: 30, opacity: 0 }}
|
|
whileInView={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<motion.div
|
|
animate={{
|
|
y: [0, -10, 0],
|
|
rotateZ: [0, 0.5, -0.5, 0],
|
|
}}
|
|
transition={{
|
|
duration: 6,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
className="relative"
|
|
>
|
|
<StackedCubesLight />
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|