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

feat: add architecture section with animated illustrations

Browse Source 
- Created HomeArchitecture component showcasing decentralized network principles with SVG animations
- Added animated illustrations for mesh networking, no extraction, no control, and no central servers
- Enhanced CallToAction with cyan radial glow effect for visual emphasis
- Fixed audience gallery image paths to use correct /images/audiences/ directory
This commit is contained in:
sasha-astiadi
2025-11-12 15:47:58 +01:00
parent 0d9f357881
commit eba1bb7047
19 changed files with 1440 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,48 +3,74 @@ import { Button } from '@/components/Button'
export function CallToAction() {
return (
<section className='relative overflow-hidden bg-[#121212]'>
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#121212] 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-800 " />
<div
id="get-started"
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">
A Living Network
<section className="relative overflow-hidden bg-[#121212]">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
</h2>
<p className="mt-6 text-lg text-gray-300">
Mycelium isn’t a platform.
It’s the soil where a new internet grows — open, resilient, and alive.
</p>
<p className="mt-4 text-lg text-gray-300">
The self-sovereign network powering the next internet.
</p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/cloud" variant="solid" color="cyan">
Join Mycelium
</Button>
<Button
to="https://threefold.info/mycelium_network/docs/"
as="a"
target="_blank"
variant="outline"
color="white"
>
Join Early Cloud Access
</Button>
{/* === Content === */}
<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-800 relative overflow-hidden"
>
{/* ✅ Cyan Radial Glow */}
<svg
viewBox="0 0 1024 1024"
aria-hidden="true"
className="absolute top-full left-1/2 w-7xl h-320 -translate-x-1/2 -translate-y-1/2 mask-image mask-[radial-gradient(circle,white,transparent)]"
>
<circle
r={512}
cx={512}
cy={512}
fill="url(#mycelium-cyan-glow)"
fillOpacity="0.2"
/>
<defs>
<radialGradient id="mycelium-cyan-glow">
<stop stopColor="#00e5ff" />
<stop offset="1" stopColor="transparent" />
</radialGradient>
</defs>
</svg>
<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">
A Living Network
</h2>
<p className="mt-6 text-lg text-gray-300">
Mycelium isn’t a platform.
It’s the soil where a new internet grows — open, resilient, and alive.
</p>
<p className="mt-4 text-lg text-gray-300">
The self-sovereign network powering the next internet.
</p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/cloud" variant="solid" color="cyan">
Join Mycelium
</Button>
<Button
to="https://threefold.info/mycelium_network/docs/"
as="a"
target="_blank"
variant="outline"
color="white"
>
Join Early Cloud Access
</Button>
</div>
</div>
</div>
</Container>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-800" />
</Container>
</div>
{/* ✅ Bottom horizontal line */}
<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>
)