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() { export function ComputeOverview() {
return ( 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"> <div className="pointer-events-none absolute inset-0">
<CircleBackground <CircleBackground
color="#06b6d4" 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 <CircleBackground
color="#22d3ee" 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> </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"> <div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent" className="tracking-[0.35em] uppercase"> <Eyebrow color="accent" className="tracking-[0.35em] uppercase">
Mycelium Compute Mycelium Compute
</Eyebrow> </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. Deterministic compute fabric for autonomous workloads.
</SectionHeader> </SectionHeader>
<P color="lightSecondary" className="mt-6">
<P color="darkSecondary" className="mt-6 text-gray-600">
Mycelium Compute delivers predictable, sovereign performance—free Mycelium Compute delivers predictable, sovereign performance—free
from lock-in and drift. Deploy any workload with cryptographic from lock-in and drift. Deploy any workload with cryptographic
precision, knowing the platform verifies, scales, and heals itself precision, knowing the platform verifies, scales, and heals itself
on your behalf. on your behalf.
</P> </P>
<P color="lightSecondary" className="mt-4">
<P color="darkSecondary" className="mt-4 text-gray-600">
Deterministic. Self-managing. Stateless by design. Deterministic. Self-managing. Stateless by design.
</P> </P>
</div> </div>
{/* ✅ Light Mode Cards */}
<div className="mt-16 grid gap-6 lg:grid-cols-2"> <div className="mt-16 grid gap-6 lg:grid-cols-2">
{overviewCards.map((card) => ( {overviewCards.map((card) => (
<div <div
key={card.title} 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"> <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} {card.label}
</p> </p>
<h3 className="mt-4 text-xl font-semibold text-white"> <h3 className="mt-4 text-xl font-semibold text-gray-900">
{card.title} {card.title}
</h3> </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} {card.copy}
</p> </p>
</div> </div>
@@ -69,6 +86,9 @@ export function ComputeOverview() {
))} ))}
</div> </div>
</Container> </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> </section>
) )
} }