Improve Navbar and homepage

package.json

@@ -21,29 +21,29 @@
     "@tailwindcss/vite": "^4.1.16",
     "@vercel/speed-insights": "^1.2.0",
     "@vueuse/motion": "^3.0.3",
-    "axios": "^1.13.1",
+    "axios": "^1.13.2",
-    "pinia": "^3.0.3",
+    "pinia": "^3.0.4",
     "tailwindcss": "^4.1.16",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^24.9.2",
+    "@types/node": "^24.10.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",
-    "daisyui": "^5.3.10",
+    "daisyui": "^5.4.5",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-vue": "~10.5.1",
     "jiti": "^2.6.1",
     "npm-run-all2": "^8.0.4",
     "prettier": "3.6.2",
     "typescript": "~5.9.3",
-    "vite": "^7.1.12",
+    "vite": "^7.2.0",
     "vite-bundle-analyzer": "^1.2.3",
     "vite-plugin-vue-devtools": "^8.0.3",
-    "vue-tsc": "^3.1.2"
+    "vue-tsc": "^3.1.3"
   }
 }

src/components/NavBar.vue

@@ -1,15 +1,15 @@
 <template>
-  <div
+  <nav
-    class="navbar sticky top-0 z-20 bg-white/70 glass border-b border-gray-200/60 shadow-sm transition"
+    class="navbar sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm"
   >
-    <!-- Left -->
+    <!-- Left: Logo + Mobile Menu -->
     <div class="navbar-start">
       <!-- Mobile dropdown -->
-      <div class="dropdown">
+      <div class="dropdown lg:hidden">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" aria-label="Menu">
+        <label tabindex="0" class="btn btn-ghost p-2" aria-label="Menu">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-gray-600"
+            class="h-6 w-6 text-gray-700"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
@@ -18,58 +18,56 @@
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
+              d="M4 6h16M4 12h16M4 18h16"
             />
           </svg>
-        </div>
+        </label>
         <ul
-          tabindex="-1"
+          tabindex="0"
-          class="menu menu-sm dropdown-content mt-3 w-52 p-2 rounded-lg shadow-md bg-white/80 backdrop-blur-md border border-gray-200/60"
+          class="menu menu-sm dropdown-content mt-3 w-52 rounded-md bg-white/90 backdrop-blur-md shadow-lg border border-gray-200/60"
         >
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
+          <li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
-          <li>
+          <li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
-            <RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink>
+          <li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
-          </li>
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
         </ul>
       </div>
 
       <!-- Logo -->
       <RouterLink
-        class="btn btn-ghost normal-case text-2xl font-bold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
         to="/"
+        class="text-2xl font-extrabold tracking-tight bg-linear-to-r from-gray-700 via-indigo-500 to-cyan-400 bg-clip-text text-transparent"
       >
-        To Vue
+        TBW
       </RouterLink>
     </div>
 
-    <!-- Center (desktop menu) -->
+    <!-- Center: Desktop Menu -->
     <div class="navbar-center hidden lg:flex">
-      <ul class="menu menu-horizontal px-1 space-x-4">
+      <ul class="menu menu-horizontal gap-6">
-        <li>
+        <li><RouterLink to="/" class="nav-link">Home</RouterLink></li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink>
+        <li><RouterLink to="/list" class="nav-link">Library</RouterLink></li>
-        </li>
+        <li><RouterLink to="/add" class="nav-link">Add</RouterLink></li>
-        <li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list"
-            >Library</RouterLink
-          >
-        </li>
-        <li>
-          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add"
-            >Add</RouterLink
-          >
-        </li>
       </ul>
     </div>
 
-    <!-- Right -->
+    <!-- Right: CTA -->
     <div class="navbar-end">
       <RouterLink
-        class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
         to="/list"
+        class="btn px-5 bg-linear-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
       >
-        Go to library
+        Go to Library
       </RouterLink>
     </div>
-  </div>
+  </nav>
 </template>
+
+<style scoped>
+@reference "tailwindcss";
+.nav-link {
+  @apply text-gray-700 font-medium transition-colors hover:text-gray-900;
+}
+.router-link-active.nav-link {
+  @apply text-indigo-600 font-semibold;
+}
+</style>

src/views/HomeView.vue

@@ -1,14 +1,48 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="container mx-auto px-4 py-16" v-motion-fade-visible-once>
+  <div class="relative isolate bg-white px-6 pt-16 lg:px-8">
-    <div class="flex flex-col items-center justify-center text-center">
+    <!-- Top blurred gradient background -->
+    <div
+      class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+      aria-hidden="true"
+    >
+      <div
+        class="relative left-[calc(50%-11rem)] aspect-1155/678 w-xl -translate-x-1/2 rotate-30 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%-30rem)] sm:w-6xl"
+        style="
+          clip-path: polygon(
+            74.1% 44.1%,
+            100% 61.6%,
+            97.5% 26.9%,
+            85.5% 0.1%,
+            80.7% 2%,
+            72.5% 32.5%,
+            60.2% 62.4%,
+            52.4% 68.1%,
+            47.5% 58.3%,
+            45.2% 34.5%,
+            27.5% 76.7%,
+            0.1% 64.9%,
+            17.9% 100%,
+            27.6% 76.8%,
+            76.1% 97.7%,
+            74.1% 44.1%
+          );
+        "
+      ></div>
+    </div>
+
+    <!-- Hero content -->
+    <div
+      class="container mx-auto px-4 py-24 sm:py-32 lg:py-40 text-center"
+      v-motion-fade-visible-once
+    >
       <h1 class="text-5xl font-bold mb-8 leading-tight">
         Welcome to <br />
         <span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
       </h1>
 
-      <p class="text-lg text-gray-600 max-w-2xl mb-12">
+      <p class="text-lg text-gray-600 max-w-2xl mx-auto mb-12">
         A simple and beautiful media list app built with Vue&nbsp;3 and Tailwind&nbsp;CSS (daisyUI).
       </p>
 
@@ -19,6 +53,36 @@
         Get Started
       </RouterLink>
     </div>
+
+    <!-- Bottom blurred gradient background -->
+    <div
+      class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+      aria-hidden="true"
+    >
+      <div
+        class="relative left-[calc(50%+3rem)] aspect-1155/678 w-xl -translate-x-1/2 bg-linear-to-tr from-gray-400 via-indigo-400 to-cyan-400 opacity-30 sm:left-[calc(50%+36rem)] sm:w-6xl"
+        style="
+          clip-path: polygon(
+            74.1% 44.1%,
+            100% 61.6%,
+            97.5% 26.9%,
+            85.5% 0.1%,
+            80.7% 2%,
+            72.5% 32.5%,
+            60.2% 62.4%,
+            52.4% 68.1%,
+            47.5% 58.3%,
+            45.2% 34.5%,
+            27.5% 76.7%,
+            0.1% 64.9%,
+            17.9% 100%,
+            27.6% 76.8%,
+            76.1% 97.7%,
+            74.1% 44.1%
+          );
+        "
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -31,6 +95,7 @@
     /* indigo-400 */ #22d3ee 100% /* cyan-400 */
   );
   -webkit-background-clip: text;
+  background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: 200% auto;
   animation: gradientShift 6s ease infinite alternate;