kulakpos_web/resources/views/layouts/web/partials/header.blade.php

<style>
/* New React-like Header */
.react-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80px;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1050;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Inter', sans-serif;
}

.react-header .navbar-brand a { text-decoration: none; }

.rh-logo-icon {
    width: 40px;
    height: 40px;
    background-color: #0d9488;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.rh-logo-icon svg { color: white; width: 24px; height: 24px; }

.rh-logo-text {
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-left: 0.5rem;
}
.rh-logo-text span { color: #0d9488; }

.rh-link {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: color 0.2s;
    text-decoration: none;
    padding: 0.5rem 1rem !important;
}
.rh-link:hover { color: #0d9488 !important; }

.rh-ai-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #0d9488 !important;
    background-color: #f0fdfa;
    padding: 0.375rem 0.875rem !important;
    border-radius: 9999px;
    border: 1px solid #ccfbf1;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    transition: color 0.2s;
    text-decoration: none;
    margin: 0 0.5rem;
}
.rh-ai-link:hover { color: #0f766e !important; }
.rh-ai-link svg { width: 16px; height: 16px; margin-bottom: 2px; }

.rh-login {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: color 0.2s;
    text-decoration: none;
    margin-right: 1.25rem;
}
.rh-login:hover { color: #dc2626 !important; }

.rh-btn {
    background-color: #0d9488 !important;
    color: white !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.5rem;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
    text-decoration: none;
    border: none;
}
.rh-btn:hover { background-color: #0f766e !important; }
.rh-btn svg { width: 16px; height: 16px; margin-bottom: 2px; }

body { padding-top: 80px; }
@media (max-width: 991px) {
    .react-header .navbar-nav {
        padding: 1.5rem 0;
        gap: 0.75rem;
    }
    .react-header .d-lg-flex {
        padding-bottom: 1.5rem;
    }
    .react-header {
        background: #ffffff !important;
    }
}
</style>

<div class="react-header">
    <nav class="navbar navbar-expand-lg h-100" style="min-height:80px;">
        <div class="container" style="max-width:80rem;">
            <!-- Logo -->
            <a class="navbar-brand d-flex align-items-center m-0 p-0" href="{{ route('home') }}">
                <div class="rh-logo-icon">
                    <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"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"/></svg>
                </div>
                <!-- Hide text on mobile using d-none d-sm-block -->
                <span class="rh-logo-text d-none d-md-block">Kulak<span>pos</span></span>
            </a>

            <!-- Mobile Toggle -->
            <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#reactNavbar" aria-controls="reactNavbar" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars text-secondary" style="font-size:1.5rem;"></i>
            </button>

            <!-- Menu Content -->
            <div class="collapse navbar-collapse" id="reactNavbar">
                <ul class="navbar-nav mx-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link rh-link" href="{{ route('home') }}#fitur">Fitur POS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link rh-ai-link" href="{{ route('home') }}#ai">
                            <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"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
                            AI Assistance
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link rh-link" href="{{ route('home') }}#perangkat">Perangkat</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link rh-link" href="{{ route('home') }}#solusi">Solusi Industri</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link rh-link" href="{{ route('plan.index') }}">Harga</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center justify-content-center d-lg-flex mt-3 mt-lg-0">
                    <a href="{{ route('login') }}" class="rh-login">Masuk</a>
                    <a href="{{ route('plan.index') }}" class="rh-btn">
                        Coba Gratis 
                        <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"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </nav>
</div>