jobifygarden/resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', 'JobifyGarden - Find Your Dream Job')</title>
    <meta name="description" content="@yield('description', 'Discover thousands of job opportunities from multiple sources. Find remote jobs, full-time positions, and more.')">
    <meta name="keywords" content="@yield('keywords', 'jobs, careers, employment, job search, remote jobs')">

    <!-- Canonical URL -->
    <link rel="canonical" href="@yield('canonical', url()->current())">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="@yield('og_title', 'JobifyGarden - Find Your Dream Job')">
    <meta property="og:description" content="@yield('og_description', 'Discover thousands of job opportunities from multiple sources.')">
    <meta property="og:url" content="@yield('og_url', url()->current())">
    <meta property="og:type" content="@yield('og_type', 'website')">
    <meta property="og:image" content="@yield('og_image', asset('images/og-default.jpg'))">
    <meta property="og:site_name" content="JobifyGarden">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="@yield('twitter_card', 'summary_large_image')">
    <meta name="twitter:title" content="@yield('twitter_title', 'JobifyGarden')">
    <meta name="twitter:description" content="@yield('twitter_description', 'Find your dream job')">
    <meta name="twitter:image" content="@yield('twitter_image', asset('images/twitter-card-default.jpg'))">

    <!-- Structured Data (JSON-LD) -->
    @stack('structured_data')

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    @stack('head')
</head>
<body class="h-full antialiased bg-gray-50">
    <div class="min-h-full">
        <!-- Navigation -->
        <nav class="bg-white shadow-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false }">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <!-- Logo and main navigation -->
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <a href="{{ route('home') }}" class="text-2xl font-bold text-emerald-600 hover:text-emerald-700">
                                JobifyGarden
                            </a>
                        </div>
                        <div class="hidden sm:ml-8 sm:flex sm:space-x-8">
                            <a href="{{ route('jobs.index') }}"
                               class="inline-flex items-center px-1 pt-1 text-sm font-medium {{ request()->routeIs('jobs.*') ? 'border-b-2 border-emerald-500 text-gray-900' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                                Browse Jobs
                            </a>
                            <a href="{{ route('jobs.remote') }}"
                               class="inline-flex items-center px-1 pt-1 text-sm font-medium {{ request()->routeIs('jobs.remote') ? 'border-b-2 border-emerald-500 text-gray-900' : 'text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                                Remote Jobs
                            </a>
                        </div>
                    </div>

                    <!-- Mobile menu button -->
                    <div class="flex items-center sm:hidden">
                        <button @click="mobileMenuOpen = !mobileMenuOpen"
                                type="button"
                                class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500">
                            <span class="sr-only">Open main menu</span>
                            <svg class="h-6 w-6" :class="{ 'hidden': mobileMenuOpen, 'block': !mobileMenuOpen }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                            </svg>
                            <svg class="h-6 w-6" :class="{ 'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Mobile menu -->
            <div x-show="mobileMenuOpen"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="sm:hidden"
                 style="display: none;">
                <div class="pt-2 pb-3 space-y-1">
                    <a href="{{ route('jobs.index') }}"
                       class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ request()->routeIs('jobs.*') ? 'border-emerald-500 text-emerald-700 bg-emerald-50' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }}">
                        Browse Jobs
                    </a>
                    <a href="{{ route('jobs.remote') }}"
                       class="block pl-3 pr-4 py-2 border-l-4 text-base font-medium {{ request()->routeIs('jobs.remote') ? 'border-emerald-500 text-emerald-700 bg-emerald-50' : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700' }}">
                        Remote Jobs
                    </a>
                </div>
            </div>
        </nav>

        <!-- Page header (optional) -->
        @hasSection('header')
        <header class="bg-white shadow-sm">
            <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
                @yield('header')
            </div>
        </header>
        @endif

        <!-- Main content -->
        <main class="@yield('main-class', 'py-8')">
            @yield('content')
        </main>

        <!-- Footer -->
        <footer class="bg-white border-t border-gray-200 mt-auto">
            <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- About -->
                    <div class="col-span-1 md:col-span-2">
                        <h3 class="text-lg font-bold text-emerald-600 mb-4">JobifyGarden</h3>
                        <p class="text-gray-600 text-sm mb-4">
                            Your gateway to thousands of job opportunities. We aggregate job listings from multiple sources to help you find your dream career.
                        </p>
                        <p class="text-gray-500 text-xs">
                            &copy; {{ date('Y') }} JobifyGarden. All rights reserved.
                        </p>
                    </div>

                    <!-- Quick Links -->
                    <div>
                        <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Quick Links</h4>
                        <ul class="space-y-2">
                            <li><a href="{{ route('jobs.index') }}" class="text-gray-600 hover:text-emerald-600 text-sm">Browse Jobs</a></li>
                            <li><a href="{{ route('jobs.remote') }}" class="text-gray-600 hover:text-emerald-600 text-sm">Remote Jobs</a></li>
                        </ul>
                    </div>

                    <!-- Resources -->
                    <div>
                        <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Resources</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-600 hover:text-emerald-600 text-sm">About Us</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-emerald-600 text-sm">Contact</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-emerald-600 text-sm">Privacy Policy</a></li>
                            <li><a href="#" class="text-gray-600 hover:text-emerald-600 text-sm">Terms of Service</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    @stack('scripts')
</body>
</html>