Added libs

lockbox/vue/views/HomeView.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { TabGroup, TabList, Tab, TabPanels, TabPanel} from '@headlessui/vue'
+import { KeyIcon, BoltIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, ClipboardDocumentListIcon} from '@heroicons/vue/24/solid'
+
+import TabCreateUser from '../components/tabs/TabCreateUser.vue'
+import TabProofOfWork from '../components/tabs/TabProofOfWork.vue'
+import TabAddUser from '../components/tabs/TabUsers.vue'
+import TabSigningRequests from '../components/tabs/TabSigningRequests.vue'
+
+const tabItems = [
+    {label:"Create User", icon:KeyIcon, tabComponent:TabCreateUser},
+    {label:"Proof of Work", icon:BoltIcon, tabComponent:TabProofOfWork},
+    {label:"Users", icon:UserPlusIcon, tabComponent:TabAddUser},
+    {label:"Signing Requests", icon:ClipboardDocumentListIcon, tabComponent:TabSigningRequests},
+]
+
+</script>
+
+<template>
+<div class="min-h-screen bg-black w-screen text-yellow-400">
+    <header className="border-b border-yellow-400/20 py-6">
+        <div className="container mx-auto px-6">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <div className="text-3xl font-black">
+                <span className="text-yellow-400">LOCK</span>
+                <span className="text-white">BOX</span>
+              </div>
+              <div className="w-1 h-8 bg-yellow-400"></div>
+              <span className="text-gray-400">Secure ECDSA Keypair Management</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+    <div className="container mx-auto px-6">
+    <TabGroup>
+        <TabList class="flex flex-wrap gap-2 mb-8 border-b border-yellow-400/20">
+            <Tab v-for="tab in tabItems" as="template" :key="tab" v-slot="{ selected }">
+                <button class="flex items-center space-x-2 px-6 py-3 font-semibold transition-all duration-300 border-b-2"
+                :class="{ 'text-yellow-400 border-yellow-400': selected, 'text-gray-400 border-transparent hover:text-yellow-400 hover:border-yellow-400/50': !selected }">
+                <component :is="tab.icon" class="h-4 w-4"></component>
+                <span>{{ tab.label }}</span>
+                </button>
+            </Tab>
+        </TabList>
+        <TabPanels class="mt-6 space-y-6 px-40" v-for="tab in tabItems" :key="tab.label">
+            <component :is="tab.tabComponent"></component>
+        </TabPanels>
+    </TabGroup>
+    </div>
+</div>
+</template>
+
+<style scoped>
+/* button {
+  transition: background 0.2s, color 0.2s;
+} */
+</style>