refactor!: major housekeeping 🚀

app.vue

@@ -1,21 +1,23 @@
 <template>
-  <section
-    class="h-screen min-w-screen w-screen flex flex-col select-none overflow-hidden bg-stone-100 text-stone-800 transition-colors duration-200 ease-linear dark:bg-stone-900 dark:text-stone-100"
-  >
-    <!-- Header -->
-    <header>
-      <v-header />
-    </header>
-    <main class="flex-1 overflow-y-auto">
-      <div class="h-full flex items-center justify-center">
-        <nuxt-page />
-      </div>
-    </main>
-    <!-- Footer -->
-    <footer>
-      <v-footer />
-    </footer>
-  </section>
+  <nuxt-layout>
+    <section
+      class="h-screen min-w-screen w-screen flex flex-col select-none overflow-hidden bg-stone-100 text-stone-800 transition-colors duration-200 ease-linear dark:bg-stone-900 dark:text-stone-100"
+    >
+      <!-- Header -->
+      <header>
+        <v-header />
+      </header>
+      <main class="flex-1 overflow-y-auto">
+        <div class="h-full flex items-center justify-center">
+          <nuxt-page />
+        </div>
+      </main>
+      <!-- Footer -->
+      <footer>
+        <v-footer />
+      </footer>
+    </section>
+  </nuxt-layout>
 </template>
 
 <script setup lang="ts">

certs/.gitignore

@@ -0,0 +1,2 @@
+*.*
+!.gitignore

components/common/ui/VFooter.vue

@@ -4,7 +4,7 @@
   >
     <div class="flex items-center">
       <p class="text-sm">
-        Made with <span class="animate-pulse text-red-5">❤️</span> by
+        Made with <span class="text-red-5 animate-pulse">❤️</span> by
         <a href="https://vinayakkulkarni.dev">Vinayak</a> &copy;
         {{ state.date }}
       </p>
@@ -29,7 +29,7 @@
       <!-- GitHub -->
       <a
         rel="noopener"
-        href="https://github.com/vinayakkulkarni"
+        href="https://github.com/geoql/restaurants"
         target="_blank"
         aria-label="Github"
         class="transition-colors duration-100 ease-linear hover:text-dark-300"

components/common/ui/VHeader.vue

@@ -7,7 +7,7 @@
         xmlns="http://www.w3.org/2000/svg"
         class="h-5 w-5 cursor-pointer fill-current transition-colors duration-300"
         viewBox="-6 -6 512 512"
-        @click="$router.push({ name: 'index' })"
+        @click="router.push('/')"
       >
         <defs />
         <defs>
@@ -75,4 +75,5 @@
   const isDark = useDark();
   const mapStore = useMap();
   const toggleDark = useToggle(isDark);
+  const router = useRouter();
 </script>

components/common/ui/VLoader.vue

@@ -4,7 +4,7 @@
     class="z-10 h-full flex items-center justify-center opacity-75"
   >
     <svg
-      class="h-5 w-5 animate-spin text-white"
+      class="h-5 w-5 text-white animate-spin"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"