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
61 lines
3.2 KiB
TypeScript
61 lines
3.2 KiB
TypeScript
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
import { Eyebrow, H3, P, CT } from '../../components/Texts'
|
|
|
|
const features = [
|
|
{ name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
{ name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
|
|
{ name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
|
]
|
|
|
|
export function HomeComparisonTable() {
|
|
return (
|
|
<div className="relative bg-white py-24 lg:py-32">
|
|
<div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-6xl lg:px-8">
|
|
<Eyebrow>COMPARISON</Eyebrow>
|
|
<H3 className="mt-2">Why People Choose Mycelium</H3>
|
|
<P className="mx-auto mt-5 max-w-prose">
|
|
Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
|
|
or uptime to centralized platforms.
|
|
</P>
|
|
|
|
<div className="mt-16 overflow-x-auto">
|
|
<table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
|
|
<thead className="bg-cyan-50/60">
|
|
<tr className="text-base font-semibold text-slate-700">
|
|
<th className="py-4 pl-3 text-left">Capability</th>
|
|
<th className="py-4 pl-3 text-left">Traditional Cloud</th>
|
|
<th className="py-4 pl-3 text-left">Mycelium</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody className="divide-y divide-slate-200">
|
|
{features.map((feature) => (
|
|
<tr key={feature.name}>
|
|
<td className="py-3 pl-3">
|
|
<CT>{feature.name}</CT>
|
|
</td>
|
|
|
|
<td className="py-3 pl-3">
|
|
{feature.cloud}
|
|
</td>
|
|
|
|
<td className="py-3 pl-3">
|
|
{feature.mycelium}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|