ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

feat: redesign cloud hero section with new layout and capabilities component

Browse Source 
- Updated CloudHeroNew with boxed container layout and improved visual hierarchy
- Added new CloudHostingNew component featuring accordion-style capabilities section with dark theme
- Included new cloud hosting images in webp and png formats
This commit is contained in:
sasha-astiadi
2025-11-06 21:26:48 +01:00
parent d8ce04252a
commit 75dd7dfbc5
10 changed files with 136 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/cloud/CloudHeroNew.tsx
View File

@@ -1,47 +1,51 @@
import { H3, H5, Eyebrow } from "@/components/Texts"
import { H3, H5, Eyebrow, P } from "@/components/Texts"
import { Button } from "@/components/Button"
export function CloudHeroNew() {
export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedClick?: () => void }) {
return (
<div
className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/cloudhero4.webp')" }}
>
<div className="mx-auto max-w-7xl lg:px-8">
<div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
<div className="mx-auto max-w-2xl lg:mx-0">
<div className="px-4">
{/* Boxed container */}
<div
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/cloudhero4.webp')", backgroundSize: "contain" }}
>
{/* Inner padding */}
<div className="px-6 py-16 lg:py-16">
<div className="max-w-2xl lg:pl-6">
<Eyebrow>
Mycelium Cloud
Mycelium Cloud
</Eyebrow>
<H3 className="mt-4">
Run Kubernetes on the Sovereign Agentic Cloud
</H3>
<H5 className="mt-4 text-lg text-gray-600">
<p className="mt-6 text-lg">
Deploy K3s clusters on a global, self-healing mesh network.
Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
</H5>
<H5 className="mt-4 text-sm text-gray-600">
</p>
<p className="mt-4 lg:text-base italic text-gray-600 text-sm">
Works Alone. Works Together.
Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
for sovereign connectivity.
</H5>
</p>
<div className="mt-10 flex items-center gap-x-6">
<Button
to="#"
onClick={onGetStartedClick}
variant="solid"
className=""
color="cyan"
>
Get started
</Button>
<Button to="#" variant="outline">
Documentation <span aria-hidden="true"> →</span>
Documentation <span aria-hidden="true">→</span>
</Button>
</div>
</div>
</div>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-200" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
</div>
)
}