Minimal design updates

src/assets/styles/base.css

@@ -4,11 +4,15 @@
 
 @layer components {
 	.btn {
-		@apply inline-flex items-center justify-center rounded border-gray-400 border font-semibold text-center text-base text-gray-700 leading-snug transition py-3 px-6 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+		@apply inline-flex items-center justify-center rounded-md shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+	}
+
+	.btn-ghost {
+		@apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
 	}
 
 	.btn-primary {
-		@apply bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+		@apply font-semibold bg-primary-600 text-white border-primary-600 hover:bg-primary-800 hover:border-primary-800 hover:text-white dark:text-white dark:bg-primary-700 dark:border-primary-700 dark:hover:border-primary-900 dark:hover:bg-primary-900;
 	}
 }
 

src/components/atoms/Logo.astro

@@ -1,6 +1,6 @@
 ---
 ---
 
-<span class="self-center ml-2 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
+<span class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white">
 	🚀 AstroWind</span
 >

src/components/atoms/Pagination.astro

@@ -10,7 +10,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 			<div class="flex flex-row mx-auto container justify-between">
 				<a
 					href={getRelativeLink(prevUrl)}
-					class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none mr-2
+					class={`btn btn-ghost px-3 mr-2
       ${!prevUrl ? 'invisible' : ''}`}
 				>
 					<div class="flex flex-row align-middle">
@@ -20,7 +20,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
 				</a>
 				<a
 					href={getRelativeLink(nextUrl)}
-					class={`btn px-3 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white border-none ${
+					class={`btn btn-ghost px-3 ${
 						!nextUrl ? 'invisible' : ''
 					}`}
 				>

src/components/widgets/Announcement.astro

@@ -3,12 +3,12 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-	class="hidden md:block bg-primary-50 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
+	class="hidden md:block bg-primary-100 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
 >
 	<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-600 font-semibold">NEW</span>
 	<a
 		href={getPermalink('get-started-website-with-astro-tailwind-css', 'post')}
-		class="underline underline-offset-2 decoration-1 decoration-dotted"
+		class="hover:underline text-gray-700 dark:text-slate-400"
 		>Get started with AstroWind to create a website using Astro and Tailwind CSS »</a
 	>
 	<a

src/components/widgets/Features.astro

@@ -47,10 +47,10 @@ const items = [
 
 <section class="scroll-mt-16 border-t border-gray-200 dark:border-slate-800" id="features">
 	<div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
-		<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+		<div class="mb-10 md:mx-auto sm:text-center md:mb-12">
 			<p class="text-base text-primary-600 dark:text-primary-200 font-semibold tracking-wide uppercase">Features</p>
 			<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
-				What's interesting about <span class="whitespace-nowrap">AstroWind</span>
+				What you get with <span class="whitespace-nowrap underline decoration-wavy decoration-2 decoration-primary-600 underline-offset-[3px]">AstroWind</span>
 			</h2>
 			<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
 				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa

src/components/widgets/Header.astro

@@ -22,7 +22,7 @@ import { getHomePermalink, getBlogPermalink, getPermalink, getRelativeLink } fro
 			</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"
+			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"
 			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/Hero.astro

@@ -17,13 +17,13 @@ import Picture from '~/components/core/Picture.astro';
 				</h1>
 				<div class="max-w-3xl mx-auto">
 					<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
-						<span class="font-semibold">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
+						<span class="font-semibold underline decoration-wavy decoration-1 decoration-primary-600 underline-offset-2">AstroWind</span> is a production ready template to start your new website using <em>Astro</em> + <em>Tailwind CSS</em>. It has been
 						designed following Best Practices, SEO, Accessibility, <span class="inline sm:hidden">...</span><span
 							class="hidden sm:inline"
 							>Dark Mode, Great Page Speed, image optimization, sitemap generation and more.</span
 						>
 					</p>
-					<div class="max-w-sm m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
+					<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
 						<div class="flex w-full sm:w-auto">
 							<a
 								class="btn btn-primary sm:mb-0 w-full"
@@ -47,7 +47,7 @@ import Picture from '~/components/core/Picture.astro';
 				<div class="relative m-auto max-w-4xl">
 					<Picture
 						src={import('~/assets/images/hero.jpg')}
-						class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700 w-full"
+						class="mx-auto rounded-md w-full"
 						widths={[400, 768, 1480]}
 						sizes="(max-width: 767px) 400px, (max-width: 1479px) 768px, 1480px"
 						alt="Hero Image"

src/components/widgets/Pricing.astro

@@ -0,0 +1,274 @@
+---
+---
+
+<!-- Pricing -->
+<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+	<!-- Title -->
+	<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
+		<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
+		<p class="mt-1 text-gray-600 dark:text-gray-400">
+			Whatever your status, our offers evolve according to your needs.
+		</p>
+	</div>
+	<!-- End Title -->
+
+	<!-- Grid -->
+	<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
+		<!-- Card -->
+		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
+			<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
+			<p class="mt-2 text-sm text-gray-500">Forever free</p>
+
+			<ul class="mt-7 space-y-2.5 text-sm">
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
+				</li>
+			</ul>
+
+			<button class="mt-5 btn">Sign up</button>
+		</div>
+		<!-- End Card -->
+
+		<!-- Card -->
+		<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
+			<p class="mb-3">
+				<span
+					class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
+					>Most popular</span
+				>
+			</p>
+			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
+			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
+				<span class="font-bold text-2xl -mr-2">$</span>
+				39
+			</span>
+			<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
+
+			<ul class="mt-7 space-y-2.5 text-sm">
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
+				</li>
+			</ul>
+
+			<button class="mt-5 btn">Sign up</button>
+		</div>
+		<!-- End Card -->
+
+		<!-- Card -->
+		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
+			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
+				<span class="font-bold text-2xl -mr-2">$</span>
+				89
+			</span>
+			<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
+
+			<ul class="mt-7 space-y-2.5 text-sm">
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
+				</li>
+			</ul>
+
+			<button class="mt-5 btn">Sign up</button>
+		</div>
+		<!-- End Card -->
+
+		<!-- Card -->
+		<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
+			<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
+			<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
+				<span class="font-bold text-2xl -mr-2">$</span>
+				149
+			</span>
+			<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
+
+			<ul class="mt-7 space-y-2.5 text-sm">
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
+				</li>
+
+				<li class="flex space-x-2">
+					<svg
+						class="flex-shrink-0 h-5 w-5 text-blue-600"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
+							fill="currentColor"></path>
+					</svg>
+					<span class="text-gray-800 dark:text-gray-400"> Product support</span>
+				</li>
+			</ul>
+
+			<button class="mt-5 btn">Sign up</button>
+		</div>
+		<!-- End Card -->
+	</div>
+	<!-- End Grid -->
+</div>
+<!-- End Pricing -->

src/layouts/PageLayout.astro

@@ -2,13 +2,13 @@
 import Layout from '~/layouts/BaseLayout.astro';
 import Header from '~/components/widgets/Header.astro';
 import Footer from '~/components/widgets/Footer.astro';
-import Banner from '~/components/widgets/Banner.astro';
+import Announcement from '~/components/widgets/Announcement.astro';
 
 const { meta } = Astro.props;
 ---
 
 <Layout {meta}>
-	<Banner />
+	<Announcement />
 	<Header />
 	<main>
 		<slot />