Footer layout and changes

Author: zlrundefined

src/components/Home.vue

@@ -37,7 +37,7 @@
 			</div>
 			<div class="w-full flex mt-12 gap-10">
 				<div
-					class="w-1/3 border border-indigo-500 rounded-xl shadow cursor-pointer"
+					class="w-full md:w-1/3 border border-indigo-500 rounded-xl shadow cursor-pointer"
 				>
 					<div class="bg-indigo-100 py-48">
 						Prject Image
@@ -46,15 +46,15 @@
 						Project Title
 					</div>
 				</div>
-				<div class="w-1/3 rounded-xl shadow cursor-pointer">
+				<div class="w-full md:w-1/3 rounded-xl shadow cursor-pointer">
 					<div class="bg-indigo-100 py-48">
 						Prject Image
 					</div>
 					<div class="text-center px-4 py-4">
 						Project Title
 					</div>
 				</div>
-				<div class="w-1/3 rounded-xl shadow cursor-pointer">
+				<div class="w-full md:w-1/3 rounded-xl shadow cursor-pointer">
 					<div class="bg-indigo-100 py-48">
 						Prject Image
 					</div>

src/components/shared/Footer.vue

@@ -1,34 +1,49 @@
 <template>
-    <div class="container mx-auto bg-white px-4">
-        <div class="md:flex items-center justify-between py-5">
-            <div class="flex justify-between items-center">
-                <div class="text-lg text-gray-500">
-                &copy; Copyright 2021. <a href="https://stoman.me" target="__blank" class="text-gray-600 font-medium">Stoman</a>
-                </div>
-            </div>
-            <div>
-            <ul class="flex gap-4">
-                <li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="twitter"></i></li>
-                <li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="instagram"></i></li>
-                <li class="text-gray-400 hover:text-green-500 cursor-pointer"><i data-feather="github"></i></li>
-            </ul>
-            </div>
-        </div>
-    </div>
+	<div class="container mx-auto bg-white px-4 pt-64 pb-12">
+		<div class="flex flex-col justify-center items-center mb-32">
+			<p class="text-5xl font-semibold text-gray-500 mb-5">Follow me</p>
+			<ul class="flex gap-10">
+				<li
+					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
+				>
+					<i data-feather="twitter" class="w-10 h-10"></i>
+				</li>
+				<li
+					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
+				>
+					<i data-feather="instagram" class="w-10 h-10"></i>
+				</li>
+				<li
+					class="text-gray-400 hover:text-indigo-500 cursor-pointer rounded-lg bg-gray-50 hover:bg-gray-100 shadow-sm p-4"
+				>
+					<i data-feather="github" class="w-10 h-10"></i>
+				</li>
+			</ul>
+		</div>
+		<div class="flex justify-center items-center text-center">
+			<div class="text-lg text-gray-500">
+				&copy; Copyright 2021.
+				<a
+					href="https://stoman.me"
+					target="__blank"
+					class="text-gray-600 font-medium"
+					>Stoman</a
+				>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-    import feather from 'feather-icons'
-    export default {
-        mounted() {
-            feather.replace();
-        },
-        updated() {
-            feather.replace();
-        }
-    }
+import feather from 'feather-icons';
+export default {
+	mounted() {
+		feather.replace();
+	},
+	updated() {
+		feather.replace();
+	},
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>