🎨 Added new footer design

components/footer.vue

@@ -1,10 +1,32 @@
 <template>
-  <footer class="w-full mt-10 mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-    <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="https://linktr.ee/leszekkrol" class="hover:underline">Leszek W. Król™</a>. All Rights Reserved.</span>
-    <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
-      <li>
-        <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a>
-      </li>
-    </ul>
+  <footer class="isolate mx-auto max-w-7xl p-6 pb-12 pt-16 lg:px-8">
+    <div class="border-t border-white/10 pt-4 md:flex md:items-center md:justify-between">
+      <div class="flex justify-center space-x-6 md:order-2">
+        <a target="_blank" rel="noopener noreferrer" aria-label="Follow on X (formerly Twitter)" class="group flex h-6 w-6 items-center justify-center text-zinc-400 transition hover:text-zinc-300" href="https://x.com/leszekkrol">
+          <svg fill="currentColor" viewBox="0 0 24 24" aria-label="Twitter" class="hidden h-5 w-5 group-hover:block" aria-hidden="true">
+            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
+          </svg>
+          <svg fill="currentColor" viewBox="0 0 16 16" aria-label="X" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 group-hover:hidden" aria-hidden="true">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"></path>
+          </svg>
+        </a>
+        <a target="_blank" rel="noopener noreferrer" aria-label="Follow on LinkedIn" class="group flex h-6 w-6 items-center justify-center text-zinc-400 transition-colors hover:text-zinc-300" href="https://www.linkedin.com/in/leszekkrol/">
+          <svg fill="currentColor" viewBox="0 0 24 24" aria-label="LinkedIn" class="h-5 w-5" aria-hidden="true">
+            <path d="M21 1.5H3c-.83 0-1.5.68-1.5 1.51V21c0 .83.67 1.51 1.5 1.51h18c.82 0 1.5-.68 1.5-1.51V3c0-.83-.68-1.51-1.5-1.51Zm-13.15 18H4.73V9.48h3.12V19.5ZM6.29 8.1a1.8 1.8 0 1 1 0-3.6 1.8 1.8 0 0 1 0 3.6Zm13.22 11.4h-3.1v-4.88c0-1.16-.03-2.65-1.63-2.65-1.62 0-1.87 1.26-1.87 2.57v4.96h-3.1V9.48h2.98v1.37h.04a3.28 3.28 0 0 1 2.95-1.62c3.15 0 3.73 2.08 3.73 4.78v5.49Z"></path>
+          </svg>
+        </a>
+      </div>
+      <div class="mt-8 flex items-center gap-4 text-xs font-medium leading-5 text-zinc-400 max-md:flex-col md:order-1 md:mt-0">
+        <div class="order-2 md:order-1">
+          <p>© 2024 Leszek W. Król. All rights reserved.</p>
+        </div>
+        <div class="order-1 flex gap-4 md:order-2">
+          <NuxtLink to="#" class="transition-colors duration-200 hover:text-zinc-300">Terms and Conditions</NuxtLink>
+        </div>
+      </div>
+    </div>
+    <div class="mt-4 w-full text-xs leading-5 text-zinc-500 max-md:text-center md:max-w-[60%]">
+      <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
+    </div>
   </footer>
 </template>