forked from emre/www_projectmycelium_com
feat: redesign hero section with cloud background and decorative blobs
- Replaced hero background image with cloud.png and added cyan gradient blobs for visual depth - Centered hero content with larger typography and improved spacing - Removed onGetStartedClick callback in favor of direct href navigation
This commit is contained in:
@@ -1,65 +1,158 @@
|
||||
import {
|
||||
ArrowPathIcon,
|
||||
CloudArrowUpIcon,
|
||||
ServerIcon,
|
||||
ShieldCheckIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
import { useId } from 'react'
|
||||
import { Container } from '../../components/Container'
|
||||
import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
|
||||
|
||||
/* ✅ Custom Icons */
|
||||
|
||||
function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
d="M16 7
|
||||
L23 11
|
||||
L25 19
|
||||
L19 25
|
||||
L13 25
|
||||
L7 19
|
||||
L9 11
|
||||
Z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<circle cx={16} cy={16} r={2} fill="#171717" />
|
||||
<line x1="16" y1="9" x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<line x1="9" y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
|
||||
<line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
<circle cx={16} cy={8} r={2} fill="#171717" />
|
||||
<circle cx={13} cy={17} r={1.5} fill="#171717" />
|
||||
<circle cx={19} cy={17} r={1.5} fill="#171717" />
|
||||
<line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
|
||||
<rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
|
||||
<path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
d="
|
||||
M16 8
|
||||
l8 4
|
||||
v6
|
||||
c0 4 -3 7 -8 9
|
||||
c-5 -2 -8 -5 -8 -9
|
||||
v-6
|
||||
l8 -4
|
||||
"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
d="M13 18l2 2l4 -4"
|
||||
stroke="#171717"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
/* ✅ Updated Feature List */
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Kubernetes Clusters',
|
||||
description: 'Deploy and scale containerized apps across your own hardware.',
|
||||
icon: ServerIcon,
|
||||
icon: KubernetesIcon,
|
||||
},
|
||||
{
|
||||
name: 'AI Agents & LLM Runtimes',
|
||||
description: 'Run open-source models locally, securely, and offline.',
|
||||
icon: ArrowPathIcon,
|
||||
icon: AIAgentsIcon,
|
||||
},
|
||||
{
|
||||
name: 'S3-Compatible Storage',
|
||||
description: 'Your own personal over-the-network drive, encrypted end-to-end.',
|
||||
icon: CloudArrowUpIcon,
|
||||
icon: S3StorageIcon,
|
||||
},
|
||||
{
|
||||
name: 'Mesh VPN & Zero-Trust Networking',
|
||||
description: 'Securely connect all your devices and remote locations.',
|
||||
icon: ShieldCheckIcon,
|
||||
icon: VPNIcon,
|
||||
},
|
||||
]
|
||||
|
||||
/* ✅ Component */
|
||||
|
||||
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>
|
||||
<section
|
||||
id="comingsoon"
|
||||
aria-label="Features"
|
||||
className="py-20 sm:py-32 relative isolate overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: "url('/images/bg2.jpg')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
>
|
||||
{/* ✅ Soft overlay for readable text */}
|
||||
<div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="mx-auto max-w-4xl sm:text-center">
|
||||
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
|
||||
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Expanding the Network Layer
|
||||
</H3>
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
|
||||
These enhancements deepen autonomy and improve real-world usability.
|
||||
</P>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
|
||||
>
|
||||
<feature.icon className="h-12 w-12" />
|
||||
<p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
|
||||
<p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user