Fix some minimal styles

src/assets/styles/base.css

@@ -17,7 +17,7 @@
 }
 
 #header.scroll {
-	@apply drop-shadow-md bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
+	@apply shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
 }
 
 .dropdown:hover .dropdown-menu {

src/components/blog/HighlightedPosts.astro

@@ -24,12 +24,12 @@ const posts = await findPostsByIds(postIds);
 ---
 
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
-	<div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
+	<div class="flex flex-col lg:justify-between lg:flex-row mb-8">
-		<div class="md:max-w-sm mb-2 lg:mb-5">
+		<div class="md:max-w-sm">
 			{
 				title && (
 					<h2
-						class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-1 sm:mb-2"
+						class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
 						set:html={title}
 					/>
 				)
@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
 			{
 				allPostsText && allPostsLink && (
 					<a
-						class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+						class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200 block mb-6 md:mb-0"
 						href={allPostsLink}
 					>
 						{allPostsText} »

src/components/widgets/CallToAction.astro

@@ -40,8 +40,8 @@ const {
 						callToAction &&
 						callToAction.text &&
 						callToAction.href && (
-							<div class="mt-6">
+							<div class="mt-6 max-w-xs mx-auto">
-								<a class="btn btn-primary mb-4 sm:mb-0" href={callToAction.href} target="_blank" rel="noopener">
+								<a class="btn btn-primary mb-4 sm:mb-0 w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
 									{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
 									{callToAction.text}
 								</a>

src/components/widgets/FAQs.astro

@@ -21,18 +21,18 @@ const {
 
 <div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
 	<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
-		<div class="max-w-xl mb-10 md:mx-auto text-center lg:max-w-2xl md:mb-12">
+		<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
 			{
 				title && (
 					<h2
-						class="max-w-lg mb-4 text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto font-heading"
+						class="max-w-lg mb-4 text-3xl font-bold leading-none md:tracking-tight sm:text-4xl md:mx-auto font-heading"
 						set:html={title}
 					/>
 				)
 			}
 			{
 				subtitle && (
-					<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+					<p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
 				)
 			}
 		</div>

src/components/widgets/Features2.astro

@@ -25,7 +25,7 @@ const {
 
 <section class="relative">
 	<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
-	<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
+	<div class="relative max-w-6xl mx-auto px-4 sm:px-6 -mb-12">
 		<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
 			{
 				(title || subtitle || highlight) && (

src/components/widgets/Header.astro

@@ -11,7 +11,11 @@ const links = [
 		text: 'Pages',
 		links: [
 			{
-				text: 'Services',
+				text: 'Features',
+				href: "#",
+			},
+			{
+				text: 'Pricing',
 				href: "#",
 			},
 			{
@@ -55,7 +59,7 @@ const links = [
 			</div>
 		</div>
 		<nav
-			class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-100px)] md:h-auto overflow-y-auto md:overflow-visible"
+			class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
 			aria-label="Main navigation"
 		>
 			<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">

src/components/widgets/Steps.astro

@@ -23,7 +23,7 @@ const {
 
 <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
 	<div class="grid gap-6 row-gap-10 md:grid-cols-2">
-		<div class="md:pb-6 md:pr-16">
+		<div class="md:pb-6 md:pr-16 mb-4 md:mb-0">
 			{title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
 			{
 				items &&

src/components/widgets/Steps2.astro

@@ -7,8 +7,8 @@ import { Icon } from 'astro-icon';
 		<div class="py-12 md:py-20">
 			<div class="py-4 sm:py-6 lg:py-8">
 				<div class="flex flex-wrap md:-mx-8">
-					<div class="w-full lg:w-1/2 px-0 sm:px-8">
+					<div class="w-full lg:w-1/2 px-0 sm:px-8 mb-12">
-						<div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
+						<div>
 							<h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading">
 								Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.
 							</h2>
@@ -41,7 +41,7 @@ import { Icon } from 'astro-icon';
 										1</span
 									>
 								</div>
-								<div class="px-4">
+								<div class="pl-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Responsive Elements</h3>
 									<p class="text-gray-500 dark:text-gray-400">
 										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
@@ -57,7 +57,7 @@ import { Icon } from 'astro-icon';
 										2</span
 									>
 								</div>
-								<div class="px-4">
+								<div class="pl-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Flexible Team</h3>
 									<p class="text-gray-500 dark:text-gray-400">
 										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
@@ -73,7 +73,7 @@ import { Icon } from 'astro-icon';
 										3</span
 									>
 								</div>
-								<div class="px-4">
+								<div class="pl-4">
 									<h3 class="mb-4 text-xl font-semibold font-heading">Ecologic Software</h3>
 									<p class="text-gray-500 dark:text-gray-400">
 										Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis