forked from emre/www_projectmycelium_com
sasha-astiadi
0d9f357881
- Integrated next-themes for dark mode theming with default dark theme - Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects - Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery
73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import {
|
|
GlobeAltIcon,
|
|
KeyIcon,
|
|
ServerStackIcon,
|
|
ShieldCheckIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
|
|
import { DarkCard } from '@/components/ui/cards'
|
|
|
|
const features = [
|
|
{
|
|
name: 'No central servers.',
|
|
description: 'Your devices form a distributed network, eliminating reliance on centralized data centers.',
|
|
icon: GlobeAltIcon,
|
|
},
|
|
{
|
|
name: 'No data extraction.',
|
|
description: 'You own your data. Run services and AI models on your own devices, ensuring privacy and control.',
|
|
icon: KeyIcon,
|
|
},
|
|
{
|
|
name: 'No single point of control.',
|
|
description: 'A decentralized architecture means no single entity can dictate or censor your online experience.',
|
|
icon: ServerStackIcon,
|
|
},
|
|
{
|
|
name: 'Mesh VPN & Zero-Trust Networking',
|
|
description: 'Create a secure, private network between your devices, accessible from anywhere.',
|
|
icon: ShieldCheckIcon,
|
|
},
|
|
]
|
|
|
|
export function HomeWhy() {
|
|
return (
|
|
<div className="relative bg-[#121212]">
|
|
{/* ✅ 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=" py-12 mx-auto bg-[#111111] max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8 border border-t-0 border-b-0 border-gray-800">
|
|
<Eyebrow>Why It Matters</Eyebrow>
|
|
<H3 className="mt-2 text-gray-200">Why Mycelium?</H3>
|
|
<P className="mx-auto mt-5 max-w-prose text-gray-400">
|
|
The current internet is a rent-seeking one. Mycelium builds one that belongs to everyone — where infrastructure, data, and intelligence stay with the people and organizations who create them.
|
|
|
|
</P>
|
|
<div className="mt-16">
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
|
|
{features.map((feature) => (
|
|
<div key={feature.name} className="relative">
|
|
<DarkCard className="flex h-full flex-col pt-8">
|
|
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-md bg-cyan-600 hover:bg-cyan-500 p-2 shadow-lg">
|
|
<feature.icon aria-hidden="true" className="size-8 text-white" />
|
|
</span>
|
|
<CT as="h3" className="mt-4 text-gray-200">
|
|
{feature.name}
|
|
</CT>
|
|
<CP color="secondary" className="mt-2 text-gray-400">
|
|
{feature.description}
|
|
</CP>
|
|
</DarkCard>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</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>
|
|
)
|
|
}
|