Components folder refactoring

src/components/widgets/Hero.astro

@@ -0,0 +1,66 @@
+---
+import Picture from "~/components/core/Picture.astro";
+const {} = Astro.props;
+---
+
+<section>
+  <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"
+        >
+          Your website with
+          <span
+            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 designed following Best
+            Practices, SEO, Accessibility, Dark Mode, great Page Speed, image
+            optimization, sitemap generation and more.
+          </p>
+          <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 font-bold"
+                href="https://github.com/onwidget/astrowind"
+                target="_blank"
+                rel="noopener"
+                >Get template
+              </a>
+            </div>
+            <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="/blog/"
+                >Learn more
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="relative flex justify-center mb-8">
+          <div class="flex flex-col justify-center">
+            <Picture
+              src={import("~/assets/images/hero.jpg")}
+              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"
+              aspectRatio="16:9"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>