<script setup lang="ts">
</script>

<template>
  <header class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- Logo -->
      <img src="https://via.placeholder.com/40" alt="Logo" class="h-8 w-8 rounded-full">
      <span class="font-bold">My App</span>
    </div>

    <!-- Menu -->
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-300">首页</a>
      <a href="#" class="hover:text-gray-300">About</a>
      <a href="#" class="hover:text-gray-300">Services</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </nav>

    <!-- User Profile -->
    <div class="flex items-center space-x-4">
      <button class="text-sm bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
        Personal Center
      </button>
      <img src="https://via.placeholder.com/40" alt="User Avatar" class="h-8 w-8 rounded-full cursor-pointer">
    </div>
  </header>
</template>

<style lang="scss" scoped>

</style>
