72 lines
2.7 KiB
TypeScript
72 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
export function AboutSolutions() {
|
|
return (
|
|
<section
|
|
className="relative bg-[#121212] text-gray-200 overflow-hidden"
|
|
style={{
|
|
"--cell": "4rem",
|
|
height: "74vh",
|
|
} as React.CSSProperties}
|
|
>
|
|
{/* Square grid background */}
|
|
<div
|
|
className="absolute inset-0 z-0 grid"
|
|
style={{
|
|
gridTemplateColumns: "repeat(auto-fill, var(--cell))",
|
|
gridAutoRows: "var(--cell)",
|
|
justifyContent: "center", // ✅ centers grid horizontally
|
|
}}
|
|
aria-hidden="true"
|
|
>
|
|
{Array.from({ length: 2000 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="border border-[#1f1f1f] hover:bg-[#00FFD1] transition-colors duration-300 cursor-pointer"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Foreground content aligned to the same grid */}
|
|
<div
|
|
className="relative z-10 grid grid-cols-[repeat(auto-fill,var(--cell))] auto-rows-[var(--cell)] gap-0 pointer-events-none w-full h-full"
|
|
style={{
|
|
justifyContent: "center", // ✅ centers foreground grid too
|
|
}}
|
|
>
|
|
{/* Top-left card */}
|
|
<div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
|
|
<div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
Unlike traditional internet infrastructure, ThreeFold runs on a
|
|
global mesh of independent cloud providers, individuals and
|
|
organizations contributing compute, storage, and network power.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center card */}
|
|
<div className="col-start-9 row-start-3 col-span-6 row-span-5 pointer-events-auto">
|
|
<div className="bg-[#121212] w-full h-full flex items-center justify-center text-center shadow-lg">
|
|
<p className="text-2xl md:text-3xl font-medium text-white leading-tight">
|
|
A Decentralized Foundation for the Internet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom-right card */}
|
|
<div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
|
|
<div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
|
|
<p className="text-sm text-gray-600 leading-snug">
|
|
This physical decentralization removes bottlenecks, increases
|
|
resilience, and protects privacy. ThreeFold is a neutral, scalable
|
|
foundation for the next-generation internet, where digital
|
|
sovereignty and collaboration come first.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|