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

refactor: redesign compute architecture section with animated mesh topology

Browse Source 
- Replaced simple icon-based architecture cards with interactive animated grid layout
- Added three new SVG animations (MeshNetworking, Deterministic, SovereignCompute) to visualize system concepts
- Updated border colors from gray-600 to gray-800 for consistent dark theme across cloud hosting page
This commit is contained in:
sasha-astiadi
2025-11-07 15:58:11 +01:00
parent 46d02fca47
commit a61267944d
7 changed files with 701 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/home/CallToAction.tsx
View File

@@ -5,12 +5,12 @@ export function CallToAction() {
return (
<section className='relative overflow-hidden bg-gray-900'>
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
{/* === Content === */}
<div className="w-full border-t border-l border-r border-gray-600 " />
<div className="w-full border-t border-l border-r border-gray-800 " />
<div
id="get-started"
className="py-18 max-w-7xl mx-auto border-t-0 border-b-0 border bg-[#111111] border-gray-600">
className="py-18 max-w-7xl mx-auto border-t-0 border-b-0 border bg-[#111111] border-gray-800">
<Container className="relative">
<div className="mx-auto max-w-2xl text-center ">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
@@ -41,8 +41,8 @@ export function CallToAction() {
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-600" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
<div className="w-full border-b border-gray-800" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
</section>
)
}

12
src/pages/home/StackSectionDark.tsx
View File

@@ -9,10 +9,10 @@ export function StackSectionDark() {
return (
<section className="relative w-full bg-[#171717] overflow-hidden">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
<div className="w-full border-t border-l border-r border-gray-600" />
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
<div className="w-full border-t border-l border-r border-gray-800" />
{/* === Background Layer === */}
<div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-600">
<div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-800">
{/* 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"
@@ -54,7 +54,7 @@ export function StackSectionDark() {
</div>
{/* === Content === */}
<div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-600 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
<div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-800 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
{/* Left Column - Text */}
<div className="text-center lg:text-left z-10">
<FadeIn>
@@ -97,8 +97,8 @@ export function StackSectionDark() {
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-600" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
<div className="w-full border-b border-gray-800" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
</section>
);
}