✨ New landing page

app/layouts/default.vue

@@ -4,23 +4,35 @@
       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>
+        <nuxt-link to="/">
+          <nuxt-img src="/favicon.png" alt="Solsynth" class="w-8 h-8" />
+        </nuxt-link>
 
+        <n-menu
+          v-if="breakpoints.isGreaterOrEqual('md')"
+          v-model:value="activeKey"
+          mode="horizontal"
+          :options="menuOptions"
+          style="width: auto"
+        />
+        <n-popover v-else trigger="hover">
+          <template #trigger>
+            <n-button text>
+              <template #icon>
+                <n-icon :component="MenuOutlined" />
+              </template>
+            </n-button>
+          </template>
           <n-menu
             v-model:value="activeKey"
-            mode="horizontal"
+            mode="vertical"
             :options="menuOptions"
+            class="w-64"
+            style="height: auto"
           />
-        </div>
+        </n-popover>
 
-        <n-dropdown :options="dropdownOptions" @select="handleDropdownSelect">
-          <n-avatar :size="32">
-            <n-icon :component="PersonIcon" :size="20" />
-          </n-avatar>
-        </n-dropdown>
+        <naive-color-mode-switch />
       </div>
     </header>
 
@@ -33,43 +45,40 @@
     >
       <aside>
         <nuxt-img src="/favicon.png" alt="Solsynth" class="w-12 h-12" />
-        <p>
-          Solsynth
-          <br />
+        <div>
+          <h3 class="text-lg font-bold">Solsynth</h3>
           Making software, hardware and experiences since 2024
-        </p>
+        </div>
       </aside>
       <nav>
         <h6 class="footer-title">Products</h6>
-        <router-link to="/products" class="link link-hover"
-          >Our Products</router-link
+        <a href="https://solian.app" target="_blank" class="link link-hover"
+          >Solar Network</a
         >
-        <router-link to="/#about" class="link link-hover">About Us</router-link>
+        <nuxt-link to="/products" class="link link-hover">Catalog</nuxt-link>
       </nav>
       <nav>
         <h6 class="footer-title">Company</h6>
+        <nuxt-link to="/about" class="link link-hover">About us</nuxt-link>
         <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
+        <nuxt-link to="/terms/user-agreement" class="link link-hover"
+          >Terms of Service</nuxt-link
         >
-        <router-link to="/terms/privacy-policy" class="link link-hover"
-          >Privacy Policy</router-link
+        <nuxt-link to="/terms/privacy-policy" class="link link-hover"
+          >Privacy Policy</nuxt-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
+        <nuxt-link to="/terms/refund-policy" class="link link-hover"
+          >Refund Policy</nuxt-link
         >
+        <nuxt-link to="/terms" class="link link-hover">All Documents</nuxt-link>
       </nav>
     </footer>
   </div>
@@ -77,25 +86,27 @@
 
 <script lang="ts" setup>
 import type { MenuOption } from "naive-ui";
-import { NIcon, NAvatar, NMenu, NDropdown } from "naive-ui";
+import { NIcon, NAvatar, NMenu } from "naive-ui";
 import { computed, h } from "vue";
-import { useRouter, useRoute, RouterLink } from "vue-router";
+import { useRoute, RouterLink } from "vue-router";
 import {
   ExploreOutlined,
-  DashboardOutlined,
-  LogInOutlined,
-  PersonAddOutlined,
-  PersonOutlined,
+  CategoryOutlined,
+  MenuOutlined,
 } from "@vicons/material";
+import { breakpointsTailwind } from "@vueuse/core";
 
-const router = useRouter();
 const route = useRoute();
+const breakpoints = useBreakpoints(breakpointsTailwind);
 
-const PersonIcon = PersonOutlined;
+const { data: recentProducts } = await useAsyncData("recent-products", () =>
+  queryCollection("products").order("updatedDate", "DESC").limit(5).all()
+);
 
 const activeKey = computed(() => {
   // Map route paths to menu keys
   if (route.path === "/") return "explore";
+  if (route.path.startsWith("/products")) return "products";
   return null;
 });
 
@@ -107,32 +118,46 @@ function renderLabel(label: string, route: string) {
   return () => h(RouterLink, { to: route }, { default: () => label });
 }
 
-const menuOptions: MenuOption[] = [
-  {
-    label: renderLabel("Explore", "/"),
-    key: "explore",
-    icon: renderIcon(ExploreOutlined),
-  },
-];
+function renderExternalLabel(label: string, url: string) {
+  return () =>
+    h("a", { href: url, target: "_blank" }, { default: () => label });
+}
+
+const menuOptions = computed<MenuOption[]>(() => {
+  const productChildren =
+    recentProducts.value?.map((product: any) => {
+      const id = product.stem.split("/").pop();
+      const hasPage = product.hasPage;
+      const url = hasPage ? `/products/${id}` : product.url;
+
+      return {
+        label: hasPage
+          ? renderLabel(product.name, url)
+          : renderExternalLabel(product.name, url),
+        key: `product-${id}`,
+        icon: product.icon
+          ? () =>
+              h(NAvatar, {
+                src: product.icon,
+                size: 24,
+                style: { backgroundColor: "transparent" },
+              })
+          : renderIcon(CategoryOutlined), // Fallback icon, ideally use product.icon if possible but requires NAvatar
+      };
+    }) || [];
 
-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: renderLabel("Explore", "/"),
+      key: "explore",
+      icon: renderIcon(ExploreOutlined),
     },
     {
-      label: "Create Account",
-      key: "/auth/create-account",
-      icon: renderIcon(PersonAddOutlined),
+      label: renderLabel("Products", "/products"),
+      key: "products",
+      icon: renderIcon(CategoryOutlined),
+      children: productChildren,
     },
   ];
 });
-
-function handleDropdownSelect(key: string) {
-  router.push(key);
-}
 </script>