fix header padding

Author: Jampard

src/components/Header.astro

@@ -1,4 +1,4 @@
-<div class="drawer">
+<div class="drawer px-8 pt-2 md:px-12 md:pt-6 lg:px-32">
 	<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
 	<div class="drawer-content flex flex-col">
 		<!-- Navbar -->

src/components/Hero.astro

@@ -1,31 +1,33 @@
-<div
-	class="flex w-full flex-col-reverse justify-between gap-64 px-8 py-24 pt-2 md:px-12 md:pt-6 lg:flex-row-reverse lg:px-32"
->
-	<!-- <div class="relative hidden h-[60vh] w-2/3 min-w-max max-w-xl rounded-lg shadow-2xl xl:block"> -->
-	<!-- 	<div -->
-	<!-- 		class="custom-gradient absolute inset-0 -z-50 rounded-xl border-4 border-white p-4 shadow-2xl blur-xl" -->
-	<!-- 	> -->
-	<!-- 	</div> -->
-	<!-- 	<div class="absolute inset-0 rounded-xl bg-white p-4 opacity-30 backdrop-blur-lg"></div> -->
-	<!-- 	<div class="absolute inset-0 rounded-xl bg-gradient-to-b from-white/20 p-4 backdrop-blur-lg"> -->
-	<!-- 	</div> -->
-	<!-- </div> -->
-	<div>
-		<h1 class="z-30 bg-[url('/rectangle.svg')] bg-contain bg-no-repeat text-6xl font-bold">
-			Transform your content into viral shorts
-		</h1>
-		<p class="py-7 text-2xl">
-			Increase your audience reach with high quality shorts video content tailored for your brand.
-			Expand your reach through all social media platforms.
-		</p>
-		<a href="#pricing"
-			><button class="btn btn-accent btn-lg rounded-full normal-case">Short now</button></a
-		>
+<div class="min-h-[80vh] xl:min-h-[85vh]">
+	<div
+		class="flex w-full flex-col-reverse justify-between gap-64 px-8 py-24 pt-2 md:px-12 md:pt-6 lg:flex-row-reverse lg:px-32"
+	>
+		<!-- <div class="relative hidden h-[60vh] w-2/3 min-w-max max-w-xl rounded-lg shadow-2xl xl:block"> -->
+		<!-- 	<div -->
+		<!-- 		class="custom-gradient absolute inset-0 -z-50 rounded-xl border-4 border-white p-4 shadow-2xl blur-xl" -->
+		<!-- 	> -->
+		<!-- 	</div> -->
+		<!-- 	<div class="absolute inset-0 rounded-xl bg-white p-4 opacity-30 backdrop-blur-lg"></div> -->
+		<!-- 	<div class="absolute inset-0 rounded-xl bg-gradient-to-b from-white/20 p-4 backdrop-blur-lg"> -->
+		<!-- 	</div> -->
+		<!-- </div> -->
+		<div>
+			<h1 class="z-30 bg-[url('/rectangle.svg')] bg-contain bg-no-repeat text-6xl font-bold">
+				Transform your content into viral shorts
+			</h1>
+			<p class="py-7 text-2xl">
+				Increase your audience reach with high quality shorts video content tailored for your brand.
+				Expand your reach through all social media platforms.
+			</p>
+			<a href="#pricing"
+				><button class="btn btn-accent btn-lg rounded-full normal-case">Short now</button></a
+			>
+		</div>
+	</div>
+	<div
+		class="absolute bottom-0 -z-10 h-screen min-h-screen w-full translate-y-48 overflow-visible bg-[url('/hero-left-bg.svg')] bg-contain bg-bottom bg-no-repeat"
+	>
 	</div>
-</div>
-<div
-	class="absolute bottom-0 -z-10 h-screen min-h-screen w-full translate-y-48 overflow-visible bg-[url('/hero-left-bg.svg')] bg-contain bg-bottom bg-no-repeat"
->
 </div>
 <style>
 	.custom-gradient {

src/components/Offers.astro

@@ -11,7 +11,9 @@ interface Props {
 const { href, price, body } = Astro.props
 ---
 
-<div class="card w-96 rounded-2xl border border-base-content bg-black/40 p-1 shadow-xl">
+<div
+	class="card w-96 rounded-2xl border border-base-content bg-black/40 p-1 shadow-xl hover:bg-black/10"
+>
 	<figure class="space-x-2 px-10 pt-10">
 		<h2 class="text-6xl font-bold">{price}$</h2><p>/ month</p>
 	</figure>