Pages spacing and alignment

Author: realstoman

src/components/AppBanner.vue

@@ -1,16 +1,16 @@
 <template>
 	<!-- Banner start -->
 	<section
-		class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-2"
+		class="flex flex-col sm:justify-between items-center sm:flex-row mt-12 sm:mt-10"
 	>
 		<div class="w-full sm:w-1/3 text-left">
 			<h1
-				class="text-3xl sm:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
+				class="text-3xl sm:text-4xl xl:text-5xl text-center sm:text-left font-semibold text-ternary-dark dark:text-primary-light uppercase"
 			>
 				Hi, Iam Stoman
 			</h1>
 			<p
-				class="mt-4 text-2xml sm:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
+				class="mt-4 text-2xml sm:text-3xl xl:text-4xl text-center sm:text-left font-semibold leading-none text-gray-400"
 			>
 				A Full-Stack Developer & Design Enthusiast
 			</p>
@@ -29,7 +29,7 @@
 				>
 			</div>
 		</div>
-		<div class="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
+		<div class="w-full sm:w-2/3 text-right float-right">
 			<img
 				v-if="theme === 'light'"
 				src="@/assets/images/developer.svg"

src/components/ProjectSingle.vue

@@ -1,7 +1,7 @@
 <template>
 	<router-link
 		to="/projects/single-project"
-		class="rounded-3xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
+		class="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
 		aria-label="Single Project"
 	>
 		<div>

src/components/ProjectsGrid.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- Projects start -->
-	<section class="pt-20 sm:pt-28">
+	<section class="pt-10 sm:pt-14">
 		<!-- Projects grid title start -->
 		<div class="text-center">
 			<p

src/views/Contact.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="container mx-auto sm:flex py-5 sm:py-10 mt-10 sm:mt-20">
+	<div class="container mx-auto sm:flex py-5 sm:py-10 mt-5 sm:mt-10">
 		<!-- Contact form start -->
 		<ContactForm />
 		<!-- Contact form end -->

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="container mx-auto">
 		<!-- Banner start -->
-		<AppBanner />
+		<AppBanner class="mb-5 sm:mb-8" />
 		<!-- Banner snd -->
 
 		<!-- Projects start -->