forked from emre/www_projectmycelium_com
feat: update homepage layout and visual styling
- 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
This commit is contained in:
@@ -59,7 +59,7 @@ export function CloudArchitecture() {
|
||||
{architectureSections.map((section) => (
|
||||
<div
|
||||
key={section.title}
|
||||
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">
|
||||
|
||||
60
src/pages/home/HomeComparisonTable.tsx
Normal file
60
src/pages/home/HomeComparisonTable.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
65
src/pages/home/HomeHosting.tsx
Normal file
65
src/pages/home/HomeHosting.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import {
|
||||
ArrowPathIcon,
|
||||
CloudArrowUpIcon,
|
||||
ServerIcon,
|
||||
ShieldCheckIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Kubernetes Clusters',
|
||||
description: 'Deploy and scale containerized apps across your own hardware.',
|
||||
icon: ServerIcon,
|
||||
},
|
||||
{
|
||||
name: 'AI Agents & LLM Runtimes',
|
||||
description: 'Run open-source models locally, securely, and offline.',
|
||||
icon: ArrowPathIcon,
|
||||
},
|
||||
{
|
||||
name: 'S3-Compatible Storage',
|
||||
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
|
||||
icon: CloudArrowUpIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mesh VPN & Zero-Trust Networking',
|
||||
description: 'Securely connect all your devices and remote locations.',
|
||||
icon: ShieldCheckIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function HomeHosting() {
|
||||
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-7xl lg:px-8">
|
||||
<Eyebrow>DEPLOY</Eyebrow>
|
||||
<H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</H3>
|
||||
<P className="mx-auto mt-5 max-w-prose">
|
||||
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">
|
||||
<div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
|
||||
<span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
|
||||
<feature.icon aria-hidden="true" className="size-8 text-white" />
|
||||
</span>
|
||||
<CT as="h3" className="mt-4">
|
||||
{feature.name}
|
||||
</CT>
|
||||
<CP color="secondary" className="mt-4">
|
||||
{feature.description}
|
||||
</CP>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
66
src/pages/home/HomeHostingDark.tsx
Normal file
66
src/pages/home/HomeHostingDark.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -6,6 +6,8 @@ import { WorldMap } from './HomeGlobe'
|
||||
import { HomeBenefits } from './HomeBenefits'
|
||||
import { CallToAction } from './CallToAction'
|
||||
import { HomeSlider } from './HomeSlider'
|
||||
import { HomeHostingDark } from './HomeHostingDark'
|
||||
import { HomeComparisonTable } from './HomeComparisonTable'
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -28,13 +30,20 @@ export default function HomePage() {
|
||||
<StackSectionLight />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<HomeHostingDark />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<HomeBenefits />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection ref={sliderRef}>
|
||||
<HomeSlider />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<HomeBenefits />
|
||||
<HomeComparisonTable />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
|
||||
@@ -9,7 +9,7 @@ export function HomeSlider() {
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="w-full h-full py-20 bg-[#0b0b0b]">
|
||||
<div className="w-full h-full py-20 bg-[#111111]">
|
||||
<div className="max-w-7xl mx-auto pl-4">
|
||||
<Eyebrow className="text-left">
|
||||
Ecosystem
|
||||
|
||||
Reference in New Issue
Block a user