💄 Optimize header style

app/layouts/default.vue

@@ -1,8 +1,13 @@
 <template>
   <n-layout class="h-screen">
-    <n-layout-header class="border-b-1">
+    <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
+          </router-link>
+        </div>
       </div>
     </n-layout-header>
 
@@ -28,4 +33,21 @@ import { NLayout, NLayoutHeader, NLayoutContent } from "naive-ui";
 .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>

app/pages/terms/index.vue

@@ -45,6 +45,10 @@ const { data: terms } = await useAsyncData(
       .all(),
   { watch: [chosenLanguage] },
 );
+
+definePageMeta({
+  title: "Terms and Conditions",
+});
 </script>
 
 <style scoped>