big milestone!

src/pages/Support.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useNostrStore } from '@/stores/nostr'
+import SupportChat from '@/components/SupportChat.vue'
+import Login from '@/components/Login.vue'
+
+const nostrStore = useNostrStore()
+</script>
+
+<template>
+  <div class="container max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+    <div class="space-y-6">
+      <div class="flex flex-col space-y-1.5">
+        <h2 class="text-2xl font-semibold tracking-tight">Customer Support</h2>
+        <p class="text-sm text-muted-foreground">
+          Chat with our support team. We're here to help!
+        </p>
+      </div>
+
+      <div class="animate-in fade-in-50 slide-in-from-bottom-3">
+        <Login v-if="!nostrStore.isLoggedIn" />
+        <SupportChat v-else />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-in {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+}
+
+.fade-in-50 {
+  animation-name: fade-in-50;
+}
+
+.slide-in-from-bottom-3 {
+  animation-name: slide-in-from-bottom-3;
+}
+
+@keyframes fade-in-50 {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slide-in-from-bottom-3 {
+  from { transform: translateY(3px); }
+  to { transform: translateY(0); }
+}
+</style>