♻️ Migrated to new UI

app/layouts/default.vue

@@ -1,53 +1,138 @@
 <template>
-  <n-layout class="h-screen">
-    <n-layout-header class="app-bar-blur">
-      <div class="flex justify-between items-center container mx-auto">
-        <router-link to="/" class="text-lg font-bold"> Solsynth </router-link>
-        <div class="flex gap-3">
-          <router-link to="/terms" class="text-md font-bold">
-            Legal
+  <div class="flex flex-col min-h-screen">
+    <header
+      class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
+    >
+      <div class="container mx-auto flex items-center justify-between px-5">
+        <div class="flex gap-2 items-center">
+          <router-link to="/">
+            <nuxt-img src="/favicon.png" alt="Solsynth" class="w-10 h-8" />
           </router-link>
-        </div>
-      </div>
-    </n-layout-header>
 
-    <n-layout-content>
+          <n-menu
+            v-model:value="activeKey"
+            mode="horizontal"
+            :options="menuOptions"
+          />
+        </div>
+
+        <n-dropdown :options="dropdownOptions" @select="handleDropdownSelect">
+          <n-avatar :size="32">
+            <n-icon :component="PersonIcon" :size="20" />
+          </n-avatar>
+        </n-dropdown>
+      </div>
+    </header>
+
+    <main class="grow mt-[64px]">
       <slot />
-    </n-layout-content>
-  </n-layout>
+    </main>
+
+    <footer
+      class="footer sm:footer-horizontal bg-base-200 text-base-content p-10"
+    >
+      <aside>
+        <nuxt-img src="/favicon.png" alt="Solsynth" class="w-12 h-12" />
+        <p>
+          Solsynth
+          <br />
+          Making software, hardware and experiences since 2024
+        </p>
+      </aside>
+      <nav>
+        <h6 class="footer-title">Products</h6>
+        <router-link to="/products" class="link link-hover"
+          >Our Products</router-link
+        >
+        <router-link to="/#about" class="link link-hover">About Us</router-link>
+      </nav>
+      <nav>
+        <h6 class="footer-title">Company</h6>
+        <a
+          href="https://github.com/Solsynth"
+          target="_blank"
+          class="link link-hover"
+          >GitHub</a
+        >
+        <router-link to="/#about" class="link link-hover">Team</router-link>
+      </nav>
+      <nav>
+        <h6 class="footer-title">Legal</h6>
+        <router-link to="/terms/user-agreement" class="link link-hover"
+          >Terms of Service</router-link
+        >
+        <router-link to="/terms/privacy-policy" class="link link-hover"
+          >Privacy Policy</router-link
+        >
+        <router-link to="/terms/refund-policy" class="link link-hover"
+          >Refund Policy</router-link
+        >
+        <router-link to="/terms" class="link link-hover"
+          >All Documents</router-link
+        >
+      </nav>
+    </footer>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { NLayout, NLayoutHeader, NLayoutContent } from "naive-ui";
+<script lang="ts" setup>
+import type { MenuOption } from "naive-ui";
+import { NIcon, NAvatar, NMenu, NDropdown } from "naive-ui";
+import { computed, h } from "vue";
+import { useRouter, useRoute, RouterLink } from "vue-router";
+import {
+  ExploreOutlined,
+  DashboardOutlined,
+  LogInOutlined,
+  PersonAddOutlined,
+  PersonOutlined,
+} from "@vicons/material";
+
+const router = useRouter();
+const route = useRoute();
+
+const PersonIcon = PersonOutlined;
+
+const activeKey = computed(() => {
+  // Map route paths to menu keys
+  if (route.path === "/") return "explore";
+  return null;
+});
+
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon) });
+}
+
+function renderLabel(label: string, route: string) {
+  return () => h(RouterLink, { to: route }, { default: () => label });
+}
+
+const menuOptions: MenuOption[] = [
+  {
+    label: renderLabel("Explore", "/"),
+    key: "explore",
+    icon: renderIcon(ExploreOutlined),
+  },
+];
+
+const dropdownOptions = computed(() => {
+  // For now, show login/signup options
+  // TODO: Add user authentication state check
+  return [
+    {
+      label: "Login",
+      key: "/auth/login",
+      icon: renderIcon(LogInOutlined),
+    },
+    {
+      label: "Create Account",
+      key: "/auth/create-account",
+      icon: renderIcon(PersonAddOutlined),
+    },
+  ];
+});
+
+function handleDropdownSelect(key: string) {
+  router.push(key);
+}
 </script>
-
-<style scoped>
-.n-layout-header {
-  padding: 8px 24px;
-  border-color: var(--n-border-color);
-  height: 57px; /* Fixed height */
-  display: flex;
-  align-items: center;
-}
-
-.n-layout-content {
-  height: calc(100vh - 57px); /* Adjust based on header height */
-}
-
-.app-bar-blur {
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 1) 40%,
-    rgba(0, 0, 0, 0.5) 65%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 1) 40%,
-    rgba(0, 0, 0, 0.5) 65%,
-    rgba(0, 0, 0, 0) 100%
-  );
-  mask-repeat: no-repeat;
-  mask-size: 100%;
-}
-</style>