sasha-astiadi
b543aebce9
- Reduced gradient fade-out radius from 90% to 30% for more concentrated visual effect - Adjusted middle gradient stop from 50% to 20% to create smoother transition - Fine-tuned visual appearance of the radial background gradient in light theme
101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
|
|
import { P, SectionHeader, Eyebrow } from "@/components/Texts";
|
|
import { FadeIn } from "@/components/ui/FadeIn";
|
|
|
|
export function StackSectionLight() {
|
|
return (
|
|
<section className="relative w-full overflow-hidden py-24 lg:py-40 isolate">
|
|
{/* === Background Layer === */}
|
|
<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(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.5, 0.8, 0.5],
|
|
scale: [1, 1.05, 1],
|
|
}}
|
|
transition={{
|
|
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) 20§§%, rgba(255,255,255,0) 30%)",
|
|
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 z-10">
|
|
<FadeIn>
|
|
<Eyebrow color="accent">Technology Layers</Eyebrow>
|
|
<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">
|
|
Project Mycelium unifies compute, storage, networking, and AI into a resilient
|
|
ecosystem that preserves data sovereignty, powers seamless collaboration,
|
|
and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
|
|
</P>
|
|
</FadeIn>
|
|
</div>
|
|
|
|
{/* Right Column - Animated Stack */}
|
|
<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 }}
|
|
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>
|
|
);
|
|
}
|