ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: convert ComputeOverview section to light mode theme

Browse Source 
- Updated background colors from dark (gray-950) to white with subtle accents
- Modified text colors from light/white to dark gray for improved readability
- Added horizontal border lines and adjusted card styling with light shadows and hover effects
This commit is contained in:
sasha-astiadi
2025-11-07 16:58:50 +01:00
parent cd3ce54a40
commit 852d9bfc3e
1 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/compute/ComputeOverview.tsx
View File

@@ -17,51 +17,68 @@ const overviewCards = [
export function ComputeOverview() {
return (
<section className="relative overflow-hidden bg-gray-950 py-24 sm:py-32">
<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-200"></div>
<div className="w-full border-t border-l border-r border-gray-200" />
{/* ✅ 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-30 blur-3xl sm:opacity-40"
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-25 blur-3xl sm:opacity-40"
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(15,118,110,0.1),_transparent_55%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
</div>
<Container className="relative">
<Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-200">
<div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent" className="tracking-[0.35em] uppercase">
Mycelium Compute
</Eyebrow>
<SectionHeader as="h2" color="light" className="mt-6 font-medium">
<SectionHeader
as="h2"
color="dark"
className="mt-6 font-medium text-gray-900"
>
Deterministic compute fabric for autonomous workloads.
</SectionHeader>
<P color="lightSecondary" className="mt-6">
<P color="darkSecondary" className="mt-6 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="lightSecondary" className="mt-4">
<P color="darkSecondary" className="mt-4 text-gray-600">
Deterministic. Self-managing. Stateless by design.
</P>
</div>
{/* ✅ Light Mode Cards */}
<div className="mt-16 grid gap-6 lg:grid-cols-2">
{overviewCards.map((card) => (
<div
key={card.title}
className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/40 hover:bg-white/[0.06]"
className="group relative overflow-hidden rounded-3xl border border-gray-200 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-500/0 via-white/[0.04] to-cyan-300/10 opacity-0 transition group-hover:opacity-100" />
<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-300">
<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-white">
<h3 className="mt-4 text-xl font-semibold text-gray-900">
{card.title}
</h3>
<p className="mt-4 text-sm leading-relaxed text-gray-300">
<p className="mt-4 text-sm leading-relaxed text-gray-600">
{card.copy}
</p>
</div>
@@ -69,6 +86,9 @@ export function ComputeOverview() {
))}
</div>
</Container>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-200" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
</section>
)
}