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

feat: redesign CallToAction section with bordered card layout

Browse Source 
- Replaced animated circle background with bordered container design using gray-700 borders
- Updated background colors to darker theme (#121212 and #090909) for improved contrast
- Changed button styling from white to cyan for primary action
This commit is contained in:
sasha-astiadi
2025-11-07 23:37:44 +01:00
parent ee6b5458de
commit f46482e0f4
1 changed files with 47 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/network/CallToAction.tsx
View File

@@ -1,40 +1,53 @@
import { CircleBackground } from '../../components/CircleBackground' "use client";
import { Container } from '@/components/Container'
import { Button } from '@/components/Button' import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
export function CallToAction() { export function CallToAction() {
return ( return (
<section <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-700"></div>
<div className="w-full border-t border-l border-r border-gray-700" />
{/* ✅ Main boxed area */}
<div
id="get-started" id="get-started"
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28" className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
> >
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
</div>
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-3xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl"> <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
Choose How You Want to Start Choose How You Want to Start
</h2> </h2>
<p className="mt-6 text-lg text-gray-300"> <p className="mt-6 text-lg text-gray-300">
Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware. Use the network to connect workloads or host nodes to deepen mesh resilience and run your environments on your own hardware.
</p> </p>
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="white"> {/* ✅ Two cards, stacked center with spacing */}
<div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
<div className="flex flex-col items-center text-center max-w-xs">
<Button to="/download" variant="solid" color="cyan" className="mt-4">
Get Mycelium Network Get Mycelium Network
</Button> </Button>
<Button </div>
to="https://threefold.info/mycelium_network/docs/"
as="a" <div className="flex flex-col items-center text-center max-w-xs">
target="_blank" <Button to="https://threefold.info/mycelium_network/docs/" as="a" target="_blank" variant="outline" color="white" className="mt-4">
variant="outline"
color="white"
>
Host a Node Host a Node
</Button> </Button>
</div> </div>
</div> </div>
</div>
</Container> </Container>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-700" />
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
</section> </section>
) );
} }