Added libs

rendezvous/vue/views/HomeView.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { Tab, TabGroup, TabList, TabPanels } from "@headlessui/vue";
+import ServerTab from "../components/ServerTab.vue";
+import ClientTab from "../components/ClientTab.vue";
+import { LinkIcon, ServerIcon } from "@heroicons/vue/24/solid";
+
+const tabItems = [
+    {label:"Client", icon:LinkIcon, tabComponent:ClientTab},
+    {label:"Server", icon:ServerIcon, tabComponent:ServerTab},
+]
+
+</script>
+
+<template>
+<div class="min-h-screen bg-black text-yellow-400">
+    <header class="border-b border-yellow-400/20 py-6">
+    <div class="container mx-auto px-6">
+        <div class="flex items-center space-x-4">
+        <div class="text-3xl font-black">
+            <span class="text-yellow-400">RENDEZ</span>
+            <span class="text-white">VOUS</span>
+        </div>
+        <div class="w-1 h-8 bg-yellow-400"></div>
+        <span class="text-gray-400">Helps Peer-to-Peer Connections</span>
+        </div>
+    </div>
+    </header>
+
+    <div className="container mx-auto px-6">
+        <TabGroup>
+            <TabList class="flex flex-wrap gap-2 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" v-for="tab in tabItems" :key="tab.label">
+                <component :is="tab.tabComponent"></component>
+            </TabPanels>
+        </TabGroup>
+    </div>
+</div>
+</template>