forked from emre/www_projectmycelium_com
sasha-astiadi
d1fc11ce80
- Removed Cloud dropdown menu and flattened navigation to direct links (Network, Cloud, Pods, Agents, Node) - Reordered navigation items for better flow and renamed "Nodes" to "Node" for consistency - Updated homepage hero and CTA sections with clearer messaging focused on digital sovereignty and infrastructure control - Added new bento grid images for visual refresh
79 lines
3.6 KiB
TypeScript
79 lines
3.6 KiB
TypeScript
"use client";
|
||
import WorldMap from "@/components/ui/world-map";
|
||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||
|
||
const stats = [
|
||
{ id: 1, name: 'CORES', value: '54,958', description: 'Total Central Processing Unit cores available on the grid.' },
|
||
{ id: 2, name: 'NODES', value: '1,493', description: 'Total number of nodes on the grid.' },
|
||
{ id: 3, name: 'SSD CAPACITY', value: '5,388,956', description: 'Total GB of storage (SSD, HDD, & RAM) on the grid.' },
|
||
{ id: 4, name: 'COUNTRIES', value: '44', description: 'Total number of countries with active nodes.' },
|
||
]
|
||
|
||
export function HomeMap() {
|
||
return (
|
||
<div className="bg-[#121212] w-full">
|
||
{/* ✅ 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-800"></div>
|
||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||
|
||
<div className="max-w-7xl mx-auto text-center pt-12 border border-t-0 border-b-0 border-gray-800">
|
||
<Eyebrow>PROJECT MYCELIUM IS LIVE. </Eyebrow>
|
||
<H3 className="text-white">Host a Node, Grow the Network</H3>
|
||
<P className="text-sm md:text-lg text-gray-200 max-w-3xl mx-auto py-4">
|
||
Mycelium runs on nodes hosted by people and organizations around the world.
|
||
Each node adds compute, storage, and bandwidth, expanding the network’s capacity and resilience.
|
||
</P>
|
||
<P className="text-sm md:text-lg text-gray-200 max-w-3xl mx-auto py-4">
|
||
You can share your idle resources and earn rewards when they are used.
|
||
Configure it once. Your node takes over from there.
|
||
</P>
|
||
|
||
</div>
|
||
<div className="max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800 ">
|
||
{/* ✅ Match same side margins */}
|
||
<div className="max-w-5xl mx-auto px-6 ">
|
||
<WorldMap
|
||
dots={[
|
||
{ start: { lat: 64.2008, lng: -149.4937 }, end: { lat: 34.0522, lng: -118.2437 } }, // Alaska → LA
|
||
{ start: { lat: 64.2008, lng: -149.4937 }, end: { lat: -15.7975, lng: -47.8919 } }, // Alaska → Brasília
|
||
{ start: { lat: -15.7975, lng: -47.8919 }, end: { lat: 38.7223, lng: -9.1393 } }, // Brasília → Lisbon
|
||
{ start: { lat: 51.5074, lng: -0.1278 }, end: { lat: 28.6139, lng: 77.209 } }, // London → New Delhi
|
||
{ start: { lat: 28.6139, lng: 77.209 }, end: { lat: 43.1332, lng: 131.9113 } }, // New Delhi → Vladivostok
|
||
{ start: { lat: 28.6139, lng: 77.209 }, end: { lat: -1.2921, lng: 36.8219 } }, // New Delhi → Nairobi
|
||
]}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mx-auto max-w-7xl px-6 lg:px-8 border border-t-0 border-b-0 border-gray-800 pb-12">
|
||
|
||
<dl className="pt-6 grid grid-cols-1 gap-0.5 overflow-hidden rounded-md text-center sm:grid-cols-2 lg:grid-cols-4">
|
||
{stats.map((stat) => (
|
||
<div
|
||
key={stat.id}
|
||
className="flex flex-col bg-white/1 p-8"
|
||
>
|
||
<dt className="text-sm/6 font-semibold text-gray-300">
|
||
{stat.name}
|
||
</dt>
|
||
|
||
<dd className="order-first text-3xl font-semibold tracking-tight text-white">
|
||
{stat.value}
|
||
</dd>
|
||
|
||
<p className="mt-2 text-sm text-gray-400">
|
||
{stat.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
|
||
</div>
|
||
|
||
{/* ✅ Bottom horizontal line with spacing */}
|
||
<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>
|
||
</div>
|
||
);
|
||
}
|