forked from emre/www_projectmycelium_com
sasha-astiadi
a61267944d
- Replaced simple icon-based architecture cards with interactive animated grid layout - Added three new SVG animations (MeshNetworking, Deterministic, SovereignCompute) to visualize system concepts - Updated border colors from gray-600 to gray-800 for consistent dark theme across cloud hosting page
106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Disclosure,
|
|
DisclosureButton,
|
|
DisclosurePanel,
|
|
} from '@headlessui/react'
|
|
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
|
|
|
|
import { Eyebrow, H3, H4 } from "@/components/Texts"
|
|
|
|
|
|
const product = {
|
|
subtitle: 'capabilities',
|
|
name: 'What You Can Run on Mycelium Cloud',
|
|
description: '<p>Host nodes, deploy workloads, or build private AI systems, all on infrastructure you own and control.</p>',
|
|
details: [
|
|
{
|
|
name: 'Kubernetes Clusters',
|
|
description: 'Deterministic K3s workloads across sovereign hardware.',
|
|
},
|
|
{
|
|
name: 'Encrypted Mesh Networking',
|
|
description: 'No public ingress, no exposed attack surface, zero-trust routing.',
|
|
},
|
|
{
|
|
name: 'S3-Compatible Storage',
|
|
description: 'Distributed storage with erasure coding and residency control.',
|
|
},
|
|
{
|
|
name: 'GPU-Ready',
|
|
description: 'Scale inference & training on demand.',
|
|
},
|
|
],
|
|
}
|
|
|
|
|
|
|
|
// ✅ keep your product + relatedProducts data above here …
|
|
|
|
export function CloudHostingNew() {
|
|
return (
|
|
<div className="bg-[#121212] text-white">
|
|
{/* ✅ Top horizontal line with spacing */}
|
|
<div className="max-w-7xl bg-[#111111] 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" />
|
|
{/* ✅ MAIN CONTENT */}
|
|
<main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-800">
|
|
<div className="mx-auto max-w-2xl lg:max-w-none">
|
|
|
|
{/* ✅ Product Section */}
|
|
<div className="lg:grid lg:grid-cols-5 lg:items-start lg:gap-x-8">
|
|
|
|
{/* ✅ Image */}
|
|
<div className="lg:col-span-2 lg:mt-8 mt-2">
|
|
<img alt="Mycelium Cloud" src="/images/cloudhosting.webp" className="aspect-square w-full object-cover" />
|
|
</div>
|
|
|
|
{/* ✅ Product info */}
|
|
<div className="mt-8 px-4 sm:px-0 lg:mt-0 lg:col-span-3">
|
|
<Eyebrow>{product.subtitle}</Eyebrow>
|
|
<H4 className=" text-white">{product.name}</H4>
|
|
|
|
|
|
|
|
|
|
<div className="mt-4 text-gray-300 text-xl"
|
|
dangerouslySetInnerHTML={{ __html: product.description }}
|
|
/>
|
|
|
|
|
|
{/* ✅ Details accordion */}
|
|
<section className="mt-6">
|
|
<div className="divide-y divide-gray-800 border-t border-cyan-500">
|
|
{product.details.map((detail) => (
|
|
<Disclosure key={detail.name} as="div">
|
|
<H3>
|
|
<DisclosureButton className="group flex w-full items-center justify-between py-6 text-left">
|
|
<span className="text-lg tracking-normal font-medium text-white">
|
|
{detail.name}
|
|
</span>
|
|
<span className="ml-6 flex items-center">
|
|
<PlusIcon className="block h-6 w-6 text-gray-500 group-open:hidden" />
|
|
<MinusIcon className="hidden h-6 w-6 text-indigo-400 group-open:block" />
|
|
</span>
|
|
</DisclosureButton>
|
|
</H3>
|
|
<DisclosurePanel className="pb-6">
|
|
<p className="text-gray-400 text-base tracking-normal">{detail.description}</p>
|
|
</DisclosurePanel>
|
|
</Disclosure>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* ✅ 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>
|
|
)
|
|
}
|