Components folder refactoring

src/components/core/MetaTags.astro

@@ -4,16 +4,16 @@ import { getImage } from "@astrojs/image";
 const { src: defaultImage } = await getImage({
   src: import("~/assets/images/default.png"),
   width: 1200,
-  height: 628
+  height: 628,
 });
 
 const {
   title = "AstroWind",
   description = "",
   image = defaultImage,
+  canonical,
 } = Astro.props;
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const absoluteImageUrl = new URL(image, Astro.site);
 ---
 
@@ -23,7 +23,7 @@ const absoluteImageUrl = new URL(image, Astro.site);
 
 <title>{title}</title>
 <meta name="description" content={description} />
-<link rel="canonical" href={canonicalURL} />
+{canonical && <link rel="canonical" href={canonical} />}
 
 <!-- Google / Search Engine Tags -->
 <meta itemprop="name" content={title} />
@@ -31,23 +31,27 @@ const absoluteImageUrl = new URL(image, Astro.site);
 <meta itemprop="image" content={absoluteImageUrl} />
 
 <!-- Facebook Meta Tags -->
-<meta property="og:url" content={canonicalURL} />
+{canonical && <meta property="og:url" content={canonical} />}
 <meta property="og:type" content="website" />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={absoluteImageUrl} />
 
 <!-- Twitter Meta Tags -->
+{canonical && <meta name="twitter:url" content={canonical} />}
 <meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:url" content={canonicalURL} />
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 <meta name="twitter:image" content={absoluteImageUrl} />
 
 <!-- Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
+  rel="stylesheet"
+/>
 
 <!-- Google Site Verification -->
-<meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
+<meta
+  name="google-site-verification"
+  content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
+/>

src/components/core/Picture.astro

@@ -14,21 +14,28 @@ const {
   ...attrs
 } = Astro.props;
 
-const { image, sources } = await getPicture({
+const { image, sources = [] } =
-  src,
+  !src ? { image: {}}
-  widths,
+    : (typeof src === "string"
-  formats,
+      ? { image: { src } }
-  aspectRatio,
+      :
-});
+      await getPicture({
+        src,
+        widths,
+        formats,
+        aspectRatio,
+      }))
 ---
 
+{ (src || !image) &&
 <picture {...attrs}>
   {sources.map((attrs) => <source {...attrs} {sizes} />)}
   <img {...image} {loading} {decoding} {alt} class={className} />
 </picture>
+}
 
 <style>
   img {
     content-visibility: auto;
   }
-</style>
+</style>

src/components/widgets/BasicCTA.astro

@@ -5,17 +5,24 @@ const {} = Astro.props;
 <section class="relative">
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="py-12 md:py-20">
-      <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
+      <div
-        <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
+        class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none"
-          <span>Astro</span> + <span class="whitespace-nowrap">Tailwind CSS</span>
+      >
+        <h2
+          class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
+        >
+          <span>Astro</span> + <span class="whitespace-nowrap"
+            >Tailwind CSS
+          </span>
         </h2>
         <p class="text-xl text-gray-600 dark:text-slate-400">
-          Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't waste more time! :P
+          Be very surprised by these huge fake numbers you are seeing on this
+          page. <br class="hidden md:inline" />Don't waste more time! :P
         </p>
 
         <div class="mt-6">
           <a
-            class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0"
+            class="btn text-white bg-blue-600 hover:bg-blue-800 sm:mb-0 font-bold"
             href="https://github.com/onwidget/astrowind"
             target="_blank"
             rel="noopener"

src/components/widgets/BasicFAQs.astro

@@ -1,11 +1,14 @@
 ---
-import { IconArrowDownRight } from "~/components/astro/icons";
+import { IconArrowDownRight } from "~/components/icons";
+const {} = Astro.props;
 ---
 
 <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 sm:text-center lg:max-w-2xl md:mb-12">
-      <h2 class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto">
+      <h2
+        class="max-w-lg mb-4 font-sans text-3xl font-bold leading-none tracking-tight sm:text-4xl md:mx-auto"
+      >
         Frequently Asked Questions
       </h2>
     </div>
@@ -19,33 +22,40 @@ import { IconArrowDownRight } from "~/components/astro/icons";
             What do I need to start?
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to
+            Space, the final frontier. These are the voyages of the Starship
-            explore strange new worlds.
+            Enterprise. Its five-year mission: to explore strange new worlds.
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            Many say exploration is part of our destiny, but it’s actually our duty to future generations.
+            Many say exploration is part of our destiny, but it’s actually our
+            duty to future generations.
           </p>
         </div>
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            How to install the Astro + Tailwind CSS template?</p>
+            How to install the Astro + Tailwind CSS template?
-          <p class="text-gray-700 dark:text-gray-400 mb-2">
-            Well, the way they make shows is, they make one show. That show's called a pilot.
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            Then they show that show to the people who make shows, and on the strength of that one show they decide if
+            Well, the way they make shows is, they make one show. That show's
-            they're going to make more shows. Some pilots get picked and become television programs.Some don't, become
+            called a pilot.
-            nothing. She starred in one of the ones that became nothing.
+          </p>
+          <p class="text-gray-700 dark:text-gray-400 mb-2">
+            Then they show that show to the people who make shows, and on the
+            strength of that one show they decide if they're going to make more
+            shows. Some pilots get picked and become television programs.Some
+            don't, become nothing. She starred in one of the ones that became
+            nothing.
           </p>
         </div>
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            Is the Space Pope reptilian!?</p>
+            Is the Space Pope reptilian!?
+          </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know
+            A flower in my garden, a mystery in my panties. Heart attack never
-            we were calling him Big Bear.
+            stopped old Big Bear. I didn't even know we were calling him Big
+            Bear.
           </p>
         </div>
       </div>
@@ -53,31 +63,38 @@ import { IconArrowDownRight } from "~/components/astro/icons";
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            How much money you got on you?</p>
+            How much money you got on you?
+          </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            Michael Knight a young loner on a crusade to champion the cause of the innocent. The helpless. The powerless
+            Michael Knight a young loner on a crusade to champion the cause of
-            in a world of criminals who operate above the law. Here he comes Here comes Speed Racer. He's a demon on
+            the innocent. The helpless. The powerless in a world of criminals
-            wheels.
+            who operate above the law. Here he comes Here comes Speed Racer.
+            He's a demon on wheels.
           </p>
         </div>
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            Galaxies Orion's sword globular star cluster?</p>
+            Galaxies Orion's sword globular star cluster?
-          <p class="text-gray-700 dark:text-gray-400 mb-2">
-            A business big enough that it could be listed on the NASDAQ goes belly up. Disappears!
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            It ceases to exist without me. No, you clearly don't know who you're talking to, so let me clue you in.
+            A business big enough that it could be listed on the NASDAQ goes
+            belly up. Disappears!
+          </p>
+          <p class="text-gray-700 dark:text-gray-400 mb-2">
+            It ceases to exist without me. No, you clearly don't know who you're
+            talking to, so let me clue you in.
           </p>
         </div>
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            When has justice ever been as simple as a rule book?</p>
+            When has justice ever been as simple as a rule book?
+          </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
-            This is not about revenge. This is about justice. A lot of things can change in twelve years, Admiral. Well,
+            This is not about revenge. This is about justice. A lot of things
-            that's certainly good to know. About four years. I got tired of hearing how young I looked.
+            can change in twelve years, Admiral. Well, that's certainly good to
+            know. About four years. I got tired of hearing how young I looked.
           </p>
         </div>
       </div>

src/components/widgets/BasicFeatures.astro

@@ -15,7 +15,7 @@ const {} = Astro.props;
       </div>
       <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -36,7 +36,7 @@ const {} = Astro.props;
           </p>
         </div>
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -58,7 +58,7 @@ const {} = Astro.props;
           </p>
         </div>
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -79,7 +79,7 @@ const {} = Astro.props;
           </p>
         </div>
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -101,7 +101,7 @@ const {} = Astro.props;
           </p>
         </div>
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -122,7 +122,7 @@ const {} = Astro.props;
           </p>
         </div>
         <div
-          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl dark:border dark:border-slate-800"
+          class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
         >
           <div class="flex items-center mb-4">
             <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">

src/components/widgets/BlogFeaturesPosts.astro

@@ -1,66 +1,93 @@
 ---
-import Picture from "~/components/astro/utils/Picture.astro";
+import Picture from "~/components/core/Picture.astro";
 const {} = Astro.props;
 ---
 
 <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">
-    <h2 class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group">
+    <h2
-      <span class="inline-block mb-1 sm:mb-4">Find out more content<br class="hidden md:block" /> in our Blog</span>
+      class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group"
+    >
+      <span class="inline-block mb-1 sm:mb-4"
+        >Find out more content<br class="hidden md:block" /> in our Blog
+      </span>
     </h2>
     <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
-      The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
+      The blog will be used to display AstroWind documentation. Each new article
-      need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
+      will be an important step that you will need to know to be an expert in
-      very soon. Astro is a very interesting technology. Thanks.
+      creating a website using Astro + Tailwind CSS The blog does not exist yet,
+      but very soon. Astro is a very interesting technology. Thanks.
     </p>
   </div>
+
   <div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
-    <div class="mb-6">
+    <div class="mb-6 transition">
       <Picture
-        src={import("~/assets/images/post-2.jpg")}
+        src={import("~/assets/images/steps.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
         widths={[400, 768]}
         sizes="(max-width: 767px) 400px, 768px"
         alt="Post 2 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">Get started with AstroWind</h3>
+      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+        <a
+          href="/blog/get-started-with-astrowind"
+          class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          >Get started with AstroWind
+        </a>
+      </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as
+        I'll be sure to note that in my log. Smooth as an android's bottom, eh,
-        simple as a rule book?
+        Data? When has justice ever been as simple as a rule book?
       </p>
     </div>
-    <div class="mb-6">
+
+    <div class="mb-6 transition">
       <Picture
-        src={import("~/assets/images/post-1.jpg")}
+        src={import("~/assets/images/colors.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
         widths={[400, 768]}
         sizes="(max-width: 767px) 400px, 768px"
         alt="Post 1 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">How to customize the template</h3>
+      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+        <a
+          href="/blog/how-to-customize-the-template"
+          class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          >How to customize the template
+        </a>
+      </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        O for awesome, this chocka full cuzzie is as rip-off as a cracker. Meanwhile, in behind the bicycle shed,
+        O for awesome, this chocka full cuzzie is as rip-off as a cracker.
-        Hercules Morse.
+        Meanwhile, in behind the bicycle shed, Hercules Morse.
       </p>
     </div>
-    <div class="mb-6">
+
+    <div class="mb-6 transition">
       <Picture
-        src={import("~/assets/images/post-3.jpg")}
+        src={import("~/assets/images/tools.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
         widths={[400, 768]}
         sizes="(max-width: 767px) 400px, 768px"
         alt="Post 3 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">Helpful tools and resources to design</h3>
+      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+        <a
+          href="/blog/helpful-tools-and-resources-to-design"
+          class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          >Helpful tools and resources to design
+        </a>
+      </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit leo. Carpe diem vulputate est nec commodo
+        Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit
-        rutrum.
+        leo. Carpe diem vulputate est nec commodo rutrum.
       </p>
     </div>
-    <div class="mb-6">
+
+    <div class="mb-6 transition">
       <Picture
         src={import("~/assets/images/hero.jpg")}
         class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
@@ -69,10 +96,16 @@ const {} = Astro.props;
         alt="Post 2 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">AstroWind template in depth</h3>
+      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+        <a
+          href="/blog/astrowind-template-in-depth"
+          class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          >AstroWind template in depth
+        </a>
+      </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        I'll be sure to note that in my log. Smooth as an android's bottom, eh, Data? When has justice ever been as
+        I'll be sure to note that in my log. Smooth as an android's bottom, eh,
-        simple as a rule book?
+        Data? When has justice ever been as simple as a rule book?
       </p>
     </div>
   </div>

src/components/widgets/BlogPostCard.astro

@@ -0,0 +1,62 @@
+---
+import Picture from "~/components/core/Picture.astro";
+
+const { post } = Astro.props;
+
+const images = import.meta.glob("../../assets/images/*");
+const imageSrc =
+  typeof images[post.image] === "function"
+    ? (await images[post.image]())["default"]
+    : typeof post.image === "string"
+    ? post.image
+    : null;
+---
+
+<article
+  class="max-w-md mx-auto md:max-w-none grid md:grid-cols-2 gap-6 md:gap-8"
+>
+  <a class="relative block group" href="#0">
+    <div
+      class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
+    >
+      <Picture
+        src={imageSrc}
+        class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
+        widths={[400, 768]}
+        sizes="(max-width: 767px) 400px, 768px"
+        alt={post.description}
+        aspectRatio="1"
+      />
+    </div>
+  </a>
+  <div>
+    <header>
+      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2">
+        <a
+          class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+          href={`/blog/${post.slug}`}
+        >
+          {post.title}
+        </a>
+      </h2>
+    </header>
+    <p class="text-md sm:text-lg flex-grow">
+      {post.excerpt || post.description}
+    </p>
+    <footer class="flex items-center mt-4">
+      <div>
+        <span class="text-gray-500 dark:text-slate-400">
+          <time datetime={""}>
+            {
+              new Date(post.pubDate).toLocaleDateString("en-us", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })
+            }
+          </time>
+        </span>
+      </div>
+    </footer>
+  </div>
+</article>

src/components/widgets/Error404.astro

@@ -0,0 +1,28 @@
+---
+---
+
+<section class="flex items-center h-full p-16">
+  <div
+    class="container flex flex-col items-center justify-center px-5 mx-auto my-8"
+  >
+    <div class="max-w-md text-center">
+      <h2
+        class="mb-8 font-extrabold text-9xl bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
+      >
+        <span class="sr-only">Error</span>404
+      </h2>
+      <p class="text-3xl font-semibold md:text-3xl">
+        Sorry, we couldn't find this page.
+      </p>
+      <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
+        But dont worry, you can find plenty of other things on our homepage.
+      </p>
+      <a
+        rel="noopener noreferrer"
+        href="/"
+        class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
+        >Back to homepage
+      </a>
+    </div>
+  </div>
+</section>

src/components/widgets/Footer.astro

@@ -1,14 +1,21 @@
 ---
-import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
+import {
+  IconTwitter,
+  IconInstagram,
+  IconFacebook,
+  IconArrowRight,
+} from "~/components/icons";
 const {} = Astro.props;
 ---
 
 <footer>
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
-    <div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
+    <div
-      <div class="sm:col-span-12 lg:col-span-3">
+      class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800"
+    >
+      <div class="col-span-12 lg:col-span-3">
         <div class="mb-2">
-          <a class="inline-block font-bold" href="/">AstroWind</a>
+          <a class="inline-block font-bold text-xl" href="/">AstroWind</a>
         </div>
         <div class="text-sm text-gray-600">
           <a
@@ -23,105 +30,145 @@ const {} = Astro.props;
           </a>
         </div>
       </div>
-      <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
+      <div class="col-span-6 md:col-span-3 lg:col-span-2">
-        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Products</div>
+        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
+          Products
+        </div>
         <ul class="text-sm">
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Web Studio
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >DynamicBox Flex
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Programming Forms
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Integrations
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Command-line
             </a>
           </li>
         </ul>
       </div>
-      <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
+      <div class="col-span-6 md:col-span-3 lg:col-span-2">
-        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Resources</div>
+        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
+          Resources
+        </div>
         <ul class="text-sm">
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Documentation
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Tutorials &amp; Guides
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Blog
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Support Center
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Partners
             </a>
           </li>
         </ul>
       </div>
-      <div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
+      <div class="col-span-6 md:col-span-3 lg:col-span-2">
-        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Company</div>
+        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
+          Company
+        </div>
         <ul class="text-sm">
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Home
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >About us
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Company values
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Pricing
             </a>
           </li>
           <li class="mb-2">
-            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out" href="#"
+            <a
+              class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#"
               >Privacy Policy
             </a>
           </li>
         </ul>
       </div>
-      <div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
+      <div class="col-span-12 md:col-span-3 lg:col-span-3">
-        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">Subscribe</div>
+        <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">
+          Subscribe
+        </div>
         <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           Get the latest news and articles to your inbox every month.
         </p>
         <form>
           <div class="flex flex-wrap mb-4">
             <div class="w-full">
-              <label class="block text-sm sr-only" for="newsletter">Email</label>
+              <label class="block text-sm sr-only" for="newsletter"
+                >Email
+              </label>
               <div class="relative flex items-center max-w-xs">
                 <input
                   id="newsletter"
@@ -129,12 +176,18 @@ const {} = Astro.props;
                   class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-transparent dark:border-slate-600 dark:text-gray-400"
                   placeholder="Your email"
                 />
-                <button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
+                <button
+                  type="submit"
+                  class="absolute inset-0 left-auto"
+                  aria-label="Subscribe"
+                >
                   <span
                     class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
                     aria-hidden="true"></span>
 
-                  <IconArrowRight class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" />
+                  <IconArrowRight
+                    class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
+                  />
                 </button>
               </div>
             </div>
@@ -173,8 +226,16 @@ const {} = Astro.props;
         </li>
       </ul>
       <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
-        Made by <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://onwidget.com/"> onWidget</a>.
+        <span
-        All rights reserved.
+          class="w-5 h-5 md:w-6 md:h-6 md:-mt-0.5 bg-cover mr-1.5 float-left rounded-sm bg-[url(https://onwidget.com/favicon/favicon-32x32.png)]"
+        >
+        </span>
+        Made by <a
+          class="text-blue-600 hover:underline dark:text-gray-200"
+          href="https://onwidget.com/"
+        >
+          onWidget
+        </a>. All rights reserved.
       </div>
     </div>
   </div>

src/components/widgets/Header.astro

@@ -1,15 +1,18 @@
 ---
-import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
+import { IconSun, IconGithub, IconMenu } from "~/components/icons";
 const {} = Astro.props;
 ---
 
 <header
   class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
 >
-  <div class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4">
+  <div
+    class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4"
+  >
     <div class="flex justify-between">
       <a class="flex items-center" href="/">
-        <span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
+        <span
+          class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white"
           >AstroWind
         </span>
       </a>
@@ -36,7 +39,9 @@ const {} = Astro.props;
       aria-label="Main navigation"
       id="menu"
     >
-      <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base">
+      <ul
+        class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed text-xl md:text-base"
+      >
         <li>
           <a
             class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -54,7 +59,7 @@ const {} = Astro.props;
         <li>
           <a
             class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
-            href="#"
+            href="/blog"
             >Blog
           </a>
         </li>
@@ -62,12 +67,14 @@ const {} = Astro.props;
           <a
             class="font-bold hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
             href="https://github.com/onwidget/astrowind"
-            >
+          >
-           Github
+            Github
           </a>
         </li>
       </ul>
-      <div class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed">
+      <div
+        class="md:self-center flex items-center mb-4 md:mb-0 collapse collapsed"
+      >
         <div class="hidden items-center mr-3 md:flex">
           <button
             type="button"

src/components/widgets/Hero.astro

@@ -1,5 +1,5 @@
 ---
-import Picture from "~/components/astro/utils/Picture.astro";
+import Picture from "~/components/core/Picture.astro";
 const {} = Astro.props;
 ---
 
@@ -7,23 +7,30 @@ const {} = Astro.props;
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="py-12 md:py-20">
       <div class="text-center pb-12 md:pb-16">
-        <h1 class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4">
+        <h1
+          class="text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-4"
+        >
           Your website with
-          <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500">Astro</span> +
+          <span
-          <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
+            class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
+            >Astro
+          </span> +
+          <span
+            class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap"
             >Tailwind CSS
           </span>
         </h1>
         <div class="max-w-3xl mx-auto">
           <p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
-            AstroWind is a production ready template to start your new website using Astro + Tailwind CSS. It has been
+            AstroWind is a production ready template to start your new website
-            designed following Best Practices, SEO, Accessibility, Dark Mode, great Page Speed, image optimization,
+            using Astro + Tailwind CSS. It has been designed following Best
-            sitemap generation and more.
+            Practices, SEO, Accessibility, Dark Mode, great Page Speed, image
+            optimization, sitemap generation and more.
           </p>
-          <div class="max-w-xs max-w-none flex justify-center">
+          <div class="max-w-none flex justify-center">
             <div>
               <a
-                class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0"
+                class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0 font-bold"
                 href="https://github.com/onwidget/astrowind"
                 target="_blank"
                 rel="noopener"
@@ -33,7 +40,7 @@ const {} = Astro.props;
             <div>
               <a
                 class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
-                href="#"
+                href="/blog/"
                 >Learn more
               </a>
             </div>
@@ -45,7 +52,7 @@ const {} = Astro.props;
           <div class="flex flex-col justify-center">
             <Picture
               src={import("~/assets/images/hero.jpg")}
-              class="mx-auto rounded-md bg-gray-400 dark:bg-slate-700"
+              class="mx-auto rounded-md shadow-lg bg-gray-400 dark:bg-slate-700"
               widths={[400, 768]}
               sizes=" (max-width: 767px) 400px, 768px"
               alt="Hero Image"

src/components/widgets/Pagination.astro

@@ -0,0 +1,50 @@
+---
+const { prevUrl, nextUrl } = Astro.props;
+---
+
+<div class="container flex">
+  <div class="flex flex-row mx-auto container justify-between">
+    <a
+      href={prevUrl}
+      class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none mr-2 ${
+        !prevUrl ? "invisible" : ""
+      }`}
+    >
+      <div class="flex flex-row align-middle">
+        <svg
+          class="w-5 mr-2"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
+            clip-rule="evenodd"></path>
+        </svg>
+        <p class="ml-2">Newer posts</p>
+      </div>
+    </a>
+    <a
+      href={nextUrl}
+      class={`btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none ${
+        !nextUrl ? "invisible" : ""
+      }`}
+    >
+      <div class="flex flex-row align-middle">
+        <span class="mr-2">Older posts</span>
+        <svg
+          class="w-5 ml-2"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+            clip-rule="evenodd"></path>
+        </svg>
+      </div>
+    </a>
+  </div>
+</div>

src/components/widgets/StepsFeatures.astro

@@ -10,16 +10,18 @@ const {} = Astro.props;
           <div class="w-full lg:w-1/2 px-0 sm:px-8">
             <div class="mb-12 lg:mb-0 pb-12 lg:pb-0 border-b lg:border-b-0">
               <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.
+                Sed ac magna sit amet risus tristique interdum, at vel velit in
+                hac habitasse platea dictumst.
               </h2>
               <p class="mb-8 text-xl text-gray-600 dark:text-slate-400">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-                risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula.
+                sagittis, quam nec venenatis lobortis, mi risus tempus nulla,
-                Fusce sit amet dui tellus.
+                sed porttitor est nibh at nulla. Praesent placerat enim ut ex
+                tincidunt vehicula. Fusce sit amet dui tellus.
               </p>
               <div class="w-full">
                 <a
-                  class="btn bg-blue-600 hover:bg-blue-700 text-white"
+                  class="btn bg-blue-600 hover:bg-blue-700 text-white font-bold"
                   href="https://github.com/onwidget/astrowind"
                   target="_blank"
                   rel="noopener"
@@ -40,10 +42,13 @@ const {} = Astro.props;
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="mb-4 text-xl font-semibold">Responsive Elements</h3>
+                  <h3 class="mb-4 text-xl font-semibold">
+                    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
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    lobortis, mi risus tempus nulla.
+                    Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
+                    nulla.
                   </p>
                 </div>
               </li>
@@ -58,8 +63,9 @@ const {} = Astro.props;
                 <div class="px-4">
                   <h3 class="mb-4 text-xl font-semibold">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
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    lobortis, mi risus tempus nulla.
+                    Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
+                    nulla.
                   </p>
                 </div>
               </li>
@@ -74,8 +80,9 @@ const {} = Astro.props;
                 <div class="px-4">
                   <h3 class="mb-4 text-xl font-semibold">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
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    lobortis, mi risus tempus nulla.
+                    Morbi sagittis, quam nec venenatis lobortis, mi risus tempus
+                    nulla.
                   </p>
                 </div>
               </li>

src/components/widgets/StepsLeft.astro

@@ -1,5 +1,5 @@
 ---
-import Picture from "~/components/astro/utils/Picture.astro";
+import Picture from "~/components/core/Picture.astro";
 const {} = Astro.props;
 ---
 
@@ -9,7 +9,9 @@ const {} = Astro.props;
       <div class="flex">
         <div class="flex flex-col items-center mr-4">
           <div>
-            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
+            <div
+              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 text-gray-600 dark:text-slate-200"
@@ -33,18 +35,23 @@ const {} = Astro.props;
           <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
         </div>
         <div class="pt-1 pb-8">
-          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
+          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
+            Step 1
+          </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
+            sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
-            sit amet dui tellus.
+            porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt
+            vehicula. Fusce sit amet dui tellus.
           </p>
         </div>
       </div>
       <div class="flex">
         <div class="flex flex-col items-center mr-4">
           <div>
-            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
+            <div
+              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 text-gray-600 dark:text-slate-200"
@@ -68,17 +75,22 @@ const {} = Astro.props;
           <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
         </div>
         <div class="pt-1 pb-8">
-          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
+          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
+            Step 2
+          </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            risus tempus nulla, sed porttitor est nibh at nulla.
+            sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
+            porttitor est nibh at nulla.
           </p>
         </div>
       </div>
       <div class="flex">
         <div class="flex flex-col items-center mr-4">
           <div>
-            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
+            <div
+              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-5 h-5 text-gray-600 dark:text-slate-200"
@@ -102,17 +114,22 @@ const {} = Astro.props;
           <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
         </div>
         <div class="pt-1 pb-8">
-          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
+          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
+            Step 3
+          </p>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            risus tempus nulla, sed porttitor est nibh at nulla.
+            sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed
+            porttitor est nibh at nulla.
           </p>
         </div>
       </div>
       <div class="flex">
         <div class="flex flex-col items-center mr-4">
           <div>
-            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2">
+            <div
+              class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2"
+            >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-6 text-gray-600 dark:text-slate-200"
@@ -132,7 +149,9 @@ const {} = Astro.props;
           </div>
         </div>
         <div class="pt-1">
-          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
+          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">
+            Ready!
+          </p>
           <p class="text-gray-700"></p>
         </div>
       </div>