From 92c4f8f8a7f1efd37a4fcf8fbba1fa9e8f9085ee Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sun, 8 Jan 2023 18:21:49 +0600
Subject: [PATCH] design footer

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/blog/card.vue   |  2 +-
 components/main/footer.vue | 65 +++++++++++++++++++++++++++++++-------
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/components/blog/card.vue b/components/blog/card.vue
index 46fbd98..7e90e94 100644
--- a/components/blog/card.vue
+++ b/components/blog/card.vue
@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <article class="group border p-5 m-5 rounded-2xl shadow-lg text-zinc-700">
+  <article class="group border p-5 m-2 rounded-2xl shadow-lg text-zinc-700">
     <NuxtLink to="/home" class="">
       <img
         class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-105 transition-all"
diff --git a/components/main/footer.vue b/components/main/footer.vue
index 277e969..1d9c002 100644
--- a/components/main/footer.vue
+++ b/components/main/footer.vue
@@ -1,15 +1,56 @@
 <template>
-  <nav class="py-5 border-t">
-    <div class="container flex justify-between mx-auto">
-      <NuxtLink to="/" class="text-2xl font-medium"> Elon's Blog </NuxtLink>
-      <ul class="nav flex space-x-5">
-        <li>
-          <NuxtLink to="/categories"> Categories </NuxtLink>
-        </li>
-        <li>
-          <NuxtLink to="/blogs"> Blogs </NuxtLink>
-        </li>
-      </ul>
+  <div class="py-5 border-t text-zinc-700">
+    <div class="px-6 container max-w-5xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-3">
+        <div>
+          <p class="text-black text-2xl py-1 font-semibold">Al Asad Nur Riyad</p>
+          <p class="py-2">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia soluta voluptatum
+            eligendi laboriosam non reprehenderit.
+          </p>
+          <div class="my-3 space-x-3 pb-3">
+            <NuxtLink class="p-2 bg-gray-300 rounded-md">
+              <Icon name="fa:github" size="1em" />
+            </NuxtLink>
+            <NuxtLink class="p-2 bg-gray-300 rounded-md">
+              <Icon name="fa:linkedin-square" size="1em" />
+            </NuxtLink>
+            <NuxtLink class="p-2 bg-gray-300 rounded-md">
+              <Icon name="fa:twitter-square" size="1em" />
+            </NuxtLink>
+            <NuxtLink class="p-2 bg-gray-300 rounded-md">
+              <Icon name="fa:stack-overflow" size="1em" />
+            </NuxtLink>
+          </div>
+        </div>
+        <div class="flex flex-col my-5 md:my-0 md:justify-self-center">
+          <p class="text-black text-base font-semibold">Quick Link</p>
+          <NuxtLink to="/" class="hover:underline">Home</NuxtLink>
+          <NuxtLink to="/" class="hover:underline">Categories</NuxtLink>
+          <NuxtLink to="/" class="hover:underline">Archive</NuxtLink>
+          <NuxtLink to="/" class="hover:underline">About Me</NuxtLink>
+        </div>
+        <div>
+          <p class="text-black text-base font-semibold">Connect</p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eaque inventore
+            quia nesciunt?
+          </p>
+          <input
+            id="email"
+            type="email"
+            name="EMAIL"
+            placeholder="Enter your email"
+            class="mt-3 form-control w-full border-2 rounded-lg p-2 text-sm bg-gray-100"
+          />
+          <button class="btn w-full bg-sky-600 p-2 rounded-lg text-white mt-3 text-sm">
+            Subscribe
+          </button>
+        </div>
+      </div>
+      <div class="border-t">
+        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, doloremque?</h1>
+      </div>
     </div>
-  </nav>
+  </div>
 </template>