Cleaning Services Hero Header

<header class="overflow-hidden bg-[#1e2a4a] relative">
    <!-- Subtle Pattern Background -->
    <div class="absolute inset-0 opacity-10"
        style="background-image: radial-gradient(#67c4e8 1px, transparent 1px); background-size: 32px 32px;"></div>
    <div class="bg-gradient-to-br from-[#1e2a4a] via-[#1e2a4a] to-[#2a3c63] absolute top-0 right-0 bottom-0 left-0">
    </div>

    <div class="relative max-w-7xl mx-auto px-6 pt-24 pb-28">
        <div class="max-w-3xl">
            <div
                class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 backdrop-blur-sm mb-6">
                <span class="flex h-2 w-2 rounded-full bg-[#67c4e8]"></span>
                <span class="text-xs font-medium text-slate-200">Sydney's Trusted Partner</span>
            </div>
            <h1 class="text-4xl lg:text-5xl font-semibold text-white tracking-tight mb-6 leading-tight">
                Professional Cleaning &amp;<br>
                <span class="text-[#67c4e8]">Facility Management</span>
            </h1>
            <p class="text-lg text-slate-300 font-light max-w-2xl leading-relaxed mb-8">
                Delivering consistent, high-quality cleaning and maintenance solutions for strata, commercial, and
                retail properties across Sydney.
            </p>
            <div class="flex items-center gap-2 text-sm text-slate-400 font-medium">
                <a href="#" class="hover:text-white transition-colors">Home</a>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    data-lucide="chevron-right" class="lucide lucide-chevron-right w-4 h-4 text-[#67c4e8]">
                    <path d="m9 18 6-6-6-6" class=""></path>
                </svg>
                <span class="text-white">Services</span>
            </div>
        </div>
    </div>

    <!-- Bottom Curve/Shape Divider -->
    <div class="absolute bottom-0 left-0 right-0 h-16 bg-[#f0f6fa]"
        style="clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%); opacity: 0.1"></div>
</header>