forked from emre/www_projectmycelium_com
sasha-astiadi
c7371ec21b
- Reorganized homepage sections by adding HomeHostingDark and HomeComparisonTable components - Changed background color of slider section from #0b0b0b to #111111 for better contrast - Updated card styling in CloudArchitecture to use semi-transparent gray background (bg-gray-50/25) - Modified paragraph text styling to use leading-tight instead of leading-relaxed for better readability - Reordered HomeBenefits section placement in the page flow
67 lines
2.4 KiB
TypeScript
67 lines
2.4 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'
|
|
|
|
const features = [
|
|
{
|
|
name: 'Kubernetes Clusters',
|
|
description: 'Deploy and scale containerized apps across your own hardware.',
|
|
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 (
|
|
<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">
|
|
Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
|
|
orchestration, and security layers, so you can deploy services the same way you would on 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>
|
|
)
|
|
}
|