Decrease spacing in hero on small screens and balance text

johnjago · Jul 23, 2024 · 2eaf5d1 · 2eaf5d1
1 parent 9a9b281
commit 2eaf5d1
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <section class="pt-40 pb-16 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
-	<h1 class="text-white text-4xl md:text-5xl font-bold mb-16">Better WooCommerce order management.</h1>
+	<h1 class="text-white text-4xl md:text-5xl font-bold mb-8 md:mb-16">Better WooCommerce order management.</h1>
 	<div class="max-w-7xl mx-auto">
 		<img
 			src="images/dashify-order-list.webp"
@@ -10,9 +10,9 @@ <h1 class="text-white text-4xl md:text-5xl font-bold mb-16">Better WooCommerce o
 			class="rounded-lg shadow-2xl"
 		>
 	</div>
-	<div class="mt-20 md:mt-28">
+	<div class="mt-16 md:mt-28">
 		<p
-			class="text-white text-3xl md:text-4xl font-semibold mb-8"
+			class="text-balance text-white text-3xl md:text-4xl font-semibold mb-8"
 		>
 			Search, navigate, and manage orders faster with Dashify.
 		</p>
@@ -23,7 +23,7 @@ <h1 class="text-white text-4xl md:text-5xl font-bold mb-16">Better WooCommerce o
 			Get Dashify for free
 		</a>
 	</div>
-	<article class="flex flex-col gap-4 md:gap-0 md:flex-row align-middle mt-20 md:mt-28 xl:mx-20 text-left">
+	<article class="flex flex-col gap-4 md:gap-0 md:flex-row align-middle mt-16 md:mt-28 xl:mx-20 text-left">
 		<article class="flex flex-col gap-4 p-8 md:mx-8 md:w-1/2 bg-gray-50 rounded-lg shadow-md">
 			<div class="flex">
 				<span class="star inline-block bg-[#e26f56] w-[30px] h-[30px]"></span>