forked from emre/www_projectmycelium_com
sasha-astiadi
7b80ab84c9
- Created new sections including benefits grid, federation design, upcoming features, and call-to-action - Added pricing tiers component with three Pod subscription levels - Updated existing sections with refined messaging and improved visual hierarchy
122 lines
4.0 KiB
TypeScript
122 lines
4.0 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: "Federation",
|
||
name: "Runs on Your Own Infrastructure",
|
||
description: `
|
||
<p>
|
||
Each Pod lives on your own hardware or on trusted local nodes in the Mycelium Network.
|
||
There is no central cloud and no company in the middle. You are not uploading your life to the cloud. You are running it yourself.
|
||
</p>
|
||
`,
|
||
|
||
details: [
|
||
{
|
||
name: "Your Data Lives on Your Pods",
|
||
description:
|
||
"Full control of where your data is stored and how it’s shared.",
|
||
},
|
||
{
|
||
name: "Direct Pod-to-Pod Networking",
|
||
description:
|
||
"Direct connections between Pods for faster, private communication.",
|
||
},
|
||
{
|
||
name: "No One Can Spy or Shut You Down",
|
||
description:
|
||
"Independence from corporate servers or cloud outages.",
|
||
},
|
||
{
|
||
name: "Resilient Even if Nodes Disconnect",
|
||
description:
|
||
"Continuous availability even if one node disconnects.",
|
||
},
|
||
],
|
||
}
|
||
|
||
|
||
export function PodsDesign() {
|
||
return (
|
||
<div className="bg-white text-gray-900">
|
||
{/* TOP LINE */}
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
|
||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||
|
||
<main className="mx-auto max-w-7xl px-6 lg:px-12 py-12 border border-t-0 border-b-0 border-gray-200">
|
||
<div className="mx-auto max-w-2xl lg:max-w-none">
|
||
|
||
<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 Federation"
|
||
src="/images/cloudhosting.webp"
|
||
className="aspect-square w-full object-cover rounded-md"
|
||
/>
|
||
</div>
|
||
|
||
{/* PRODUCT INFO */}
|
||
<div className="mt-8 px-4 sm:px-0 lg:mt-0 lg:col-span-3">
|
||
|
||
<Eyebrow className="text-cyan-600">
|
||
{product.subtitle}
|
||
</Eyebrow>
|
||
|
||
<H4 className="text-gray-900">
|
||
{product.name}
|
||
</H4>
|
||
|
||
<div
|
||
className="mt-4 text-gray-700 text-xl"
|
||
dangerouslySetInnerHTML={{ __html: product.description }}
|
||
/>
|
||
|
||
{/* DETAILS ACCORDION */}
|
||
<section className="mt-6">
|
||
<div className="divide-y divide-gray-200 border-t border-cyan-600/60">
|
||
{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 font-medium text-gray-900">
|
||
{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-cyan-600 group-open:block" />
|
||
</span>
|
||
</DisclosureButton>
|
||
</H3>
|
||
|
||
<DisclosurePanel className="pb-6">
|
||
<p className="text-gray-600 text-base">
|
||
{detail.description}
|
||
</p>
|
||
</DisclosurePanel>
|
||
</Disclosure>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{/* BOTTOM LINE */}
|
||
<div className="w-full border-b border-gray-200" />
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
|
||
</div>
|
||
)
|
||
}
|