<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e(config('app.name', 'Rozzy Beauty')); ?></title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="<?php echo e(asset('assets/bootstrap/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/bootstrap-icons/font/bootstrap-icons.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/style/css/app.css')); ?>" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>

       <div class="page-wrap">
         <header class="site-header">
    <div class="top-nav-desktop d-none d-lg-block">
        <div class="container-fluid px-0">
            <div class="desktop-header-inner position-relative">

                <div class="desktop-logo-wrap position-absolute top-0 start-50 translate-middle-x">
                    <a href="<?php echo e(route('home')); ?>" class="d-inline-block">
                        <img src="<?php echo e(asset('assets/images/logo.png')); ?>" alt="Rozzy Beauty" class="desktop-logo img-fluid">
                    </a>
                </div>

                <div class="desktop-icons position-absolute d-flex align-items-center">
                    <a href="#" aria-label="Account"><i class="bi bi-person"></i></a>
                    <a href="#" aria-label="Search"><i class="bi bi-search"></i></a>
                    <a href="<?php echo e(route('cart')); ?>" aria-label="Bag"><i class="bi bi-bag"></i></a>
                </div>

                <nav class="desktop-menu position-absolute start-0 end-0 bottom-0">
                    <ul class="desktop-menu-list list-unstyled d-flex align-items-end justify-content-between mb-0">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">WIG ON SALE</a></li>
                        <li><a href="#">NAIJA ROYAL LACE</a></li>
                        <li><a href="#">NEW ARRIVALS</a></li>
                        <li><a href="#">HAIR TOOLS</a></li>
                        <li><a href="#">HOW TO ORDER</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

<div class="top-nav-mobile d-lg-none">
    <nav class="navbar navbar-light p-0">
        <div class="container-fluid mobile-header-inner">

            <div class="mobile-left d-flex align-items-center">
                <button class="border-0 shadow-none p-0 mobile-action bg-transparent"
                        type="button"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#mobileOffcanvasMenu"
                        aria-controls="mobileOffcanvasMenu"
                        aria-label="Open menu">
                    <i class="bi bi-list"></i>
                </button>

                <a href="#" class="mobile-action" aria-label="Account">
                    <i class="bi bi-person"></i>
                </a>
            </div>

            <a href="<?php echo e(route('home')); ?>" class="mobile-logo-wrap navbar-brand m-0">
                <img src="<?php echo e(asset('assets/images/logo.png')); ?>" alt="Rozzy Beauty" class="mobile-logo img-fluid">
            </a>

            <div class="mobile-right d-flex align-items-center justify-content-end">
                <a href="#" class="mobile-action" aria-label="Search">
                    <i class="bi bi-search"></i>
                </a>
                <a href="<?php echo e(route('cart')); ?>" class="mobile-action" aria-label="Bag">
                    <i class="bi bi-bag"></i>
                </a>
            </div>
        </div>
    </nav>

    <div class="offcanvas offcanvas-start mobile-offcanvas" tabindex="-1" id="mobileOffcanvasMenu" aria-labelledby="mobileOffcanvasMenuLabel">
       <div class="offcanvas-header mobile-offcanvas-header">
    <img src="<?php echo e(asset('assets/images/logo.png')); ?>" 
         alt="Rozzy Beauty" 
         class="mobile-offcanvas-logo">
    <button type="button" 
            class="btn-close shadow-none" 
            data-bs-dismiss="offcanvas" 
            aria-label="Close">
    </button>
</div>
        <div class="offcanvas-body mobile-offcanvas-body">
            <div class="mobile-menu-panel">
                <a href="<?php echo e(route('home')); ?>">HOME</a>
                <a href="#">WIG ON SALE</a>
                <a href="#">ALL WIGS</a>
                <a href="#">NAIJA ROYAL LACE</a>
                <a href="#">NEW ARRIVALS</a>
                <a href="#">HAIR TOOLS</a>
                <a href="#">HOW TO ORDER</a>
            </div>
        </div>
    </div>
</div>
</header>

<?php echo $__env->yieldContent('content'); ?>

        <footer class="footer">
    <div class="footer-top">
        <h2 class="footer-heading">
            Elevate Your Beauty With Rozzy Beauty<br>
            - Where Glamour Meets Elegance
        </h2>

        <a href="#" class="footer-mail" aria-label="Contact">
            <i class="bi bi-chat-dots"></i>
        </a>
    </div>

    <div class="footer-divider"></div>

    <div class="footer-bottom">
       <a href="<?php echo e(route('home')); ?>" class="footer-brand">
    <img src="<?php echo e(asset('assets/images/logo.png')); ?>" alt="Rozzy Beauty" class="footer-logo">
</a>

        <nav class="footer-nav">
            <a href="#">About</a>
            <a href="#">Hair Services</a>
            <a href="#">Shop Wigs</a>
            <a href="#">Bags</a>
            <a href="#">Book Appointment</a>
        </nav>

        <div class="footer-socials">
            <a href="#" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
            <a href="#" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
            <a href="#" aria-label="WhatsApp"><i class="bi bi-whatsapp"></i></a>
        </div>
    </div>
</footer>

    </div>

    <script src="<?php echo e(asset('assets/bootstrap/js/bootstrap.bundle.min.js')); ?>"></script>

    <script>
document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('.site-header');
    const scrollTrigger = 120;

    function handleHeaderScroll() {
        if (window.scrollY > scrollTrigger) {
            header.classList.add('is-fixed');
            document.body.classList.add('header-fixed-padding');
        } else {
            header.classList.remove('is-fixed');
            document.body.classList.remove('header-fixed-padding');
        }
    }

    handleHeaderScroll();
    window.addEventListener('scroll', handleHeaderScroll);
});
</script>

</body>
</html>
<?php /**PATH /opt/lampp/htdocs/rozzy-beauty/resources/views/layouts/welcome.blade.php ENDPATH**/ ?>