forked from emre/www_projectmycelium_com
sasha-astiadi
5c2fcecbd9
- Created HeaderDark component with responsive navigation including Cloud dropdown menu with breadcrumb-style display - Implemented mobile menu with slide-out panel using Headless UI Dialog - Integrated HeaderDark into HomeHostingDark page for consistent dark theme experience
69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import {
|
||
CpuChipIcon,
|
||
CubeIcon,
|
||
CircleStackIcon,
|
||
LockClosedIcon,
|
||
} from '@heroicons/react/24/outline'
|
||
import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
|
||
import { DarkCard } from '@/components/ui/cards'
|
||
import { HeaderDark } from '@/components/HeaderDark'
|
||
|
||
const features = [
|
||
{
|
||
name: 'Kubernetes Clusters',
|
||
description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
|
||
icon: CubeIcon,
|
||
},
|
||
{
|
||
name: 'AI Agents & LLM Runtimes',
|
||
description: 'Run open-source models locally, securely, and offline.',
|
||
icon: CpuChipIcon,
|
||
},
|
||
{
|
||
name: 'S3-Compatible Storage',
|
||
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
|
||
icon: CircleStackIcon,
|
||
},
|
||
{
|
||
name: 'Mesh VPN & Zero-Trust Networking',
|
||
description: 'Securely connect all your devices and remote locations.',
|
||
icon: LockClosedIcon,
|
||
},
|
||
]
|
||
|
||
export function HomeHostingDark() {
|
||
return (
|
||
<>
|
||
<HeaderDark />
|
||
<div className="relative py-24 bg-[#111111] lg:py-32">
|
||
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
|
||
<Eyebrow>DEPLOY</Eyebrow>
|
||
<H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
|
||
<P className="mx-auto mt-5 max-w-prose text-gray-400">
|
||
Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
|
||
</P>
|
||
<div className="mt-16">
|
||
<div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
|
||
{features.map((feature) => (
|
||
<div key={feature.name} className="relative">
|
||
<DarkCard className="flex h-full flex-col pt-16">
|
||
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-600 hover:bg-cyan-500 p-3 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-4 text-gray-400">
|
||
{feature.description}
|
||
</CP>
|
||
</DarkCard>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|