feat: implement Stripe checkout integration and add related API endpoints

app/components/AppNavbar.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 const { user, signOut, initAuth, isLoading } = useAuth()
-const showLoginModal = ref(false)
+const loginModal = useLoginModal()
+
+const openLoginModal = () => {
+  loginModal.value = true
+}
 
 // Initialize auth on component mount
 onMounted(() => {
@@ -38,7 +42,7 @@ const handleSignOut = async () => {
           <div v-else-if="!isLoading" class="flex items-center gap-3">
             <button
               type="button"
-              @click="showLoginModal = true"
+              @click="openLoginModal"
               class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-slate-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
             >
               Login
@@ -53,6 +57,6 @@ const handleSignOut = async () => {
       </div>
     </div>
     
-    <LoginModal v-model="showLoginModal" />
+    <LoginModal />
   </nav>
 </template>