feat: complete Week 1 frontend setup (#9 #10 #11 #12)

- Install and configure Tailwind CSS (#9)
- Install Nuxt UI component library (#10)
- Create app layout with header/footer components (#11)
- Implement Supabase client composable (#12)
- Add TypeScript database types
- Create placeholder pages (index, scan, settings)
- Setup responsive navigation with mobile menu
- Configure auth state management

All Week 1 frontend foundation tasks complete.

app/components/AppFooter.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="bg-white border-t border-gray-200 mt-auto">
+    <div class="container mx-auto px-4 py-6 max-w-7xl">
+      <div class="flex flex-col md:flex-row items-center justify-between gap-4">
+        <!-- Copyright -->
+        <p class="text-sm text-gray-600">
+          © {{ currentYear }} Pantry. Self-hosted inventory management.
+        </p>
+
+        <!-- Links -->
+        <div class="flex items-center space-x-6">
+          <a 
+            href="https://github.com/pantry-app/pantry" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            GitHub
+          </a>
+          <NuxtLink 
+            to="/about" 
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            About
+          </NuxtLink>
+          <NuxtLink 
+            to="/privacy" 
+            class="text-sm text-gray-600 hover:text-primary transition-colors"
+          >
+            Privacy
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>

app/components/AppHeader.vue

@@ -0,0 +1,122 @@
+<template>
+  <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
+    <div class="container mx-auto px-4 max-w-7xl">
+      <div class="flex items-center justify-between h-16">
+        <!-- Logo / Brand -->
+        <NuxtLink to="/" class="flex items-center space-x-2">
+          <UIcon name="i-heroicons-squares-2x2" class="w-8 h-8 text-primary" />
+          <span class="text-xl font-bold text-gray-900">Pantry</span>
+        </NuxtLink>
+
+        <!-- Navigation -->
+        <nav class="hidden md:flex items-center space-x-6">
+          <NuxtLink 
+            to="/" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Inventory
+          </NuxtLink>
+          <NuxtLink 
+            to="/scan" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Scan
+          </NuxtLink>
+          <NuxtLink 
+            to="/settings" 
+            class="text-gray-700 hover:text-primary transition-colors"
+            active-class="text-primary font-semibold"
+          >
+            Settings
+          </NuxtLink>
+        </nav>
+
+        <!-- User Menu -->
+        <div class="flex items-center space-x-4">
+          <UButton 
+            v-if="!user" 
+            to="/auth/login" 
+            color="primary"
+            variant="soft"
+          >
+            Sign In
+          </UButton>
+
+          <UDropdown v-else :items="userMenuItems" mode="hover">
+            <UAvatar 
+              :alt="user.email" 
+              size="sm"
+              :ui="{ background: 'bg-primary' }"
+            />
+          </UDropdown>
+        </div>
+
+        <!-- Mobile Menu Button -->
+        <UButton 
+          icon="i-heroicons-bars-3" 
+          color="gray" 
+          variant="ghost"
+          class="md:hidden"
+          @click="mobileMenuOpen = !mobileMenuOpen"
+        />
+      </div>
+
+      <!-- Mobile Navigation -->
+      <nav 
+        v-if="mobileMenuOpen" 
+        class="md:hidden py-4 space-y-2 border-t border-gray-200"
+      >
+        <NuxtLink 
+          to="/" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Inventory
+        </NuxtLink>
+        <NuxtLink 
+          to="/scan" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Scan
+        </NuxtLink>
+        <NuxtLink 
+          to="/settings" 
+          class="block px-4 py-2 text-gray-700 hover:bg-gray-50 rounded"
+          @click="mobileMenuOpen = false"
+        >
+          Settings
+        </NuxtLink>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+const { user, signOut } = useSupabaseAuth()
+const mobileMenuOpen = ref(false)
+
+const userMenuItems = [[
+  {
+    label: user.value?.email || 'User',
+    slot: 'account',
+    disabled: true
+  }
+], [
+  {
+    label: 'Settings',
+    icon: 'i-heroicons-cog-6-tooth',
+    to: '/settings'
+  },
+  {
+    label: 'Sign Out',
+    icon: 'i-heroicons-arrow-right-on-rectangle',
+    click: async () => {
+      await signOut()
+      navigateTo('/auth/login')
+    }
+  }
+]]
+</script>