forked from emre/www_projectmycelium_com
- Integrated next-themes for dark mode theming with default dark theme - Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects - Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { H1, H4, H5 } from "@/components/Texts"
|
|
import { Button } from "@/components/Button"
|
|
|
|
export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
|
|
return (
|
|
<div className="px-4">
|
|
{/* Boxed container */}
|
|
<div
|
|
className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
|
|
style={{ backgroundImage: "url('/images/hero11.webp')" }}
|
|
>
|
|
{/* Inner padding */}
|
|
<div className="px-6 py-16 lg:py-32 ">
|
|
<div className="max-w-2xl lg:pl-6">
|
|
<div className="hidden sm:flex">
|
|
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
|
Deploying at scale?{' '}
|
|
<a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
|
|
<span aria-hidden="true" className="absolute inset-0" />
|
|
Book a call <span>→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<H1 className="mt-8">
|
|
MYCELIUM
|
|
</H1>
|
|
|
|
<H4 className="mt-8">
|
|
The Living Network of the Next Internet
|
|
</H4>
|
|
|
|
<H5 className="mt-8 text-lg text-gray-600">
|
|
A new internet is emerging — private, distributed, and self-sovereign. Mycelium is the living network that makes it possible. A peer-to-peer foundation where people, data, and intelligence connect directly — without intermediaries, without compromise.
|
|
</H5>
|
|
|
|
<div className="mt-10 flex items-center gap-x-6">
|
|
<Button
|
|
variant="solid"
|
|
color="cyan"
|
|
onClick={onGetStartedClick}
|
|
>
|
|
Start Hosting
|
|
</Button>
|
|
<Button to="#" variant="outline">
|
|
Deploy in Cloud →
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|