<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
    <nav class="bg-white shadow-sm border-b border-gray-200">
      <div class="max-w-7xl mx-auto px-3 sm:px-4">
        <div class="flex justify-center h-16 sm:h-20">
          <div class="flex items-center">
            <Link href="/" class="flex items-center space-x-2 sm:space-x-3">
              <img src="/assets/logpng.png" alt="ARP Logo" class="w-10 h-10 sm:w-14 sm:h-14"/>
              <div class="block">
                <h1 class="text-lg sm:text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent text-center">
                  ARPTECHNOLOGY 
                </h1>
                <p class="text-xs text-gray-500 -mt-1 text-center hidden sm:block">University of Ibadan Consults</p>
              </div>
            </Link>
          </div>
        </div>
      </div>
    </nav>
    
    <main>
      <slot />
    </main>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
</script>