Footer design changes

Author: zlrundefined

src/components/Home.vue

@@ -33,20 +33,22 @@
 		<!-- Banner End -->
 
 		<!-- Home Poject Section Start -->
-		<section class="pt-48">
+		<section class="pt-12 sm:pt-40">
 			<div class="text-center">
-				<p class="text-4xl font-semibold mb-3 text-gray-600">
+				<p
+					class="text-2xl sm:text-4xl font-semibold mb-3 text-gray-600"
+				>
 					Projects Portfolio
 				</p>
-				<p class="text-lg text-gray-500">
+				<p class="text-md sm:text-lg text-gray-500">
 					Some of the projects I have successfully completed
 				</p>
 			</div>
 
-			<div class="w-full sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
+			<div class="sm:grid sm:grid-cols-3 mt-10 sm:gap-10">
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img
@@ -66,7 +68,7 @@
 				</a>
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img
@@ -86,7 +88,7 @@
 				</a>
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img
@@ -104,7 +106,7 @@
 				</a>
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img
@@ -122,7 +124,7 @@
 				</a>
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img
@@ -142,7 +144,7 @@
 				</a>
 				<a
 					href="#"
-					class="rounded-3xl border hover:border-indigo-200 shadow-sm hover:shadow-lg cursor-pointer mb-6 sm:mb-0"
+					class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-6 sm:mb-0"
 				>
 					<div>
 						<img

src/components/shared/Footer.vue

@@ -1,27 +1,27 @@
 <template>
-	<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">
+	<div class="container mx-auto bg-white px-4 pt-40 pb-8">
+		<div class="flex flex-col justify-center items-center mb-28">
+			<p class="text-4xl font-semibold text-gray-500 mb-5">Follow me</p>
+			<ul class="flex gap-8">
 				<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>
+					<i data-feather="github" class="w-8 h-8"></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="twitter" class="w-10 h-10"></i>
+					<i data-feather="twitter" class="w-8 h-8"></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>
+					<i data-feather="instagram" class="w-8 h-8"></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="dribbble" class="w-10 h-10"></i>
+					<i data-feather="dribbble" class="w-8 h-8"></i>
 				</li>
 			</ul>
 		</div>