forked from emre/www_projectmycelium_com
sasha-astiadi
1851c2d6fb
- Reduced vertical spacing between header and content sections for tighter layout - Changed border radius from rounded-3xl to rounded-md for consistent styling - Added hover effect with gradient background to architecture cards
95 lines
4.0 KiB
TypeScript
95 lines
4.0 KiB
TypeScript
import { CircleBackground } from '../../components/CircleBackground'
|
|
import { Container } from '@/components/Container'
|
|
import { Eyebrow, SectionHeader, P } from '@/components/Texts'
|
|
|
|
const overviewCards = [
|
|
{
|
|
label: 'Overview',
|
|
title: 'Built for sovereign, verifiable operations',
|
|
copy: `Mycelium Compute provides a sovereign, deterministic compute fabric that enables developers to launch workloads with cryptographic certainty and autonomous operations. Built on decentralized infrastructure, it keeps environments transparent, verifiable, and free from manual intervention.`,
|
|
},
|
|
{
|
|
label: 'Core Concept',
|
|
title: 'Deterministic compute fabric',
|
|
copy: `Every workload deploys exactly as intended through cryptographic verification—eliminating tampering and configuration drift while maintaining complete operational autonomy.`,
|
|
},
|
|
]
|
|
|
|
export function ComputeOverview() {
|
|
return (
|
|
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
|
|
|
{/* ✅ Top horizontal line with spacing */}
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
<div className="w-full border-t border-l border-r border-gray-100" />
|
|
|
|
{/* ✅ subtle light-mode background accents */}
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<CircleBackground
|
|
color="#06b6d4"
|
|
className="absolute -top-40 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-20 blur-3xl"
|
|
/>
|
|
<CircleBackground
|
|
color="#22d3ee"
|
|
className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
|
|
/>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
|
|
</div>
|
|
|
|
<Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<Eyebrow color="accent" className="tracking-[0.35em] uppercase">
|
|
Mycelium Compute
|
|
</Eyebrow>
|
|
|
|
<SectionHeader
|
|
as="h2"
|
|
color="dark"
|
|
className="mt-6 font-medium text-gray-900"
|
|
>
|
|
Deterministic compute fabric for autonomous workloads.
|
|
</SectionHeader>
|
|
|
|
<P color="secondary" className="mt-4 text-gray-600">
|
|
Mycelium Compute delivers predictable, sovereign performance—free
|
|
from lock-in and drift. Deploy any workload with cryptographic
|
|
precision, knowing the platform verifies, scales, and heals itself
|
|
on your behalf.
|
|
</P>
|
|
|
|
<P color="secondary" className="mt-4 text-gray-600">
|
|
Deterministic. Self-managing. Stateless by design.
|
|
</P>
|
|
</div>
|
|
|
|
{/* ✅ Light Mode Cards */}
|
|
<div className="mt-12 grid gap-6 lg:grid-cols-2">
|
|
{overviewCards.map((card) => (
|
|
<div
|
|
key={card.title}
|
|
className="group relative overflow-hidden rounded-md border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
|
|
|
|
<div className="relative">
|
|
<p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">
|
|
{card.label}
|
|
</p>
|
|
<h3 className="mt-4 text-xl font-semibold text-gray-900">
|
|
{card.title}
|
|
</h3>
|
|
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
|
{card.copy}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
{/* ✅ Bottom horizontal line with spacing */}
|
|
<div className="w-full border-b border-gray-100" />
|
|
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
|
</section>
|
|
)
|
|
}
|