feat: add dark theme header component with navigation

- Created HeaderDark component with responsive navigation including Cloud dropdown menu with breadcrumb-style display
- Implemented mobile menu with slide-out panel using Headless UI Dialog
- Integrated HeaderDark into HomeHostingDark page for consistent dark theme experience
This commit is contained in:
2025-11-12 16:53:04 +01:00
parent e5cf6ee362
commit 5c2fcecbd9
2 changed files with 186 additions and 1 deletions

View File

@@ -6,6 +6,7 @@ import {
} from '@heroicons/react/24/outline'
import { CP, CT, Eyebrow, H3, P } from '@/components/Texts'
import { DarkCard } from '@/components/ui/cards'
import { HeaderDark } from '@/components/HeaderDark'
const features = [
{
@@ -32,7 +33,9 @@ const features = [
export function HomeHostingDark() {
return (
<div className="relative py-24 bg-[#111111] lg:py-32">
<>
<HeaderDark />
<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>
@@ -60,5 +63,6 @@ export function HomeHostingDark() {
</div>
</div>
</div>
</>
)
}