diff --git a/src/components/astro/blog/BlogFeaturesFourCols.astro b/src/components/astro/blog/BlogFeaturesFourCols.astro
new file mode 100644
index 0000000..deffc52
--- /dev/null
+++ b/src/components/astro/blog/BlogFeaturesFourCols.astro
@@ -0,0 +1,68 @@
+---
+import Picture from "~/components/astro/utils/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">
+      <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
+      need to know to be an expert in 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">
+      <Picture src={import("~/assets/images/post-2.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>
+      <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
+        simple as a rule book?
+      </p>
+    </div>
+    <div class="mb-6">
+      <Picture src={import("~/assets/images/post-1.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>
+      <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,
+        Hercules Morse.
+      </p>
+    </div>
+    <div class="mb-6">
+      <Picture src={import("~/assets/images/post-3.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>
+      <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 rutrum.
+      </p>
+    </div>
+    <div class="mb-6">
+      <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" 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">
+        AstroWind template in depth
+      </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
+        simple as a rule book?
+      </p>
+    </div>
+  </div>
+
+</section>
\ No newline at end of file
diff --git a/src/components/astro/ctas/BasicCTA.astro b/src/components/astro/ctas/BasicCTA.astro
index a15ea89..01afe77 100644
--- a/src/components/astro/ctas/BasicCTA.astro
+++ b/src/components/astro/ctas/BasicCTA.astro
@@ -1,21 +1,22 @@
 ---
-const {} = Astro.props;
+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 pb-12">
-        <h2
-          class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
-        >
-          Astro + Tailwind CSS
+      <div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
+        <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">
-          Arcu cursus vitae congue mauris rhoncus viverra nibh cras pulvinar
-          mattis blandit libero cursus mattis.
+          Be very surprised by these huge fake numbers you are seeing on this page. <br />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"
+            href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">Get template
+          </a></div>
       </div>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/faqs/FAQsBasic.astro b/src/components/astro/faqs/FAQsBasic.astro
new file mode 100644
index 0000000..a1f021c
--- /dev/null
+++ b/src/components/astro/faqs/FAQsBasic.astro
@@ -0,0 +1,83 @@
+---
+
+---
+
+<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">
+
+        Frequently Asked Questions
+      </h2>
+    </div>
+  </div>
+  <div class="max-w-screen-xl sm:mx-auto">
+    <div class="grid grid-cols-1 gap-8 lg:gap-16 row-gap-8 md:grid-cols-2">
+      <div class="space-y-8">
+        <div>
+          <p class="mb-4 text-xl font-bold">
+            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
+            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.
+          </p>
+        </div>
+        <div>
+          <p class="mb-4 text-xl font-bold">
+            How to install the Astro + Tailwind CSS template?
+          </p>
+          <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
+            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">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
+            we were calling him Big Bear.
+          </p>
+        </div>
+      </div>
+      <div class="space-y-8">
+        <div>
+          <p class="mb-4 text-xl font-bold">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
+            in a world of criminals 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">
+            Galaxies Orion's sword globular star cluster?
+          </p>
+          <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.
+          </p>
+        </div>
+        <div>
+          <p class="mb-4 text-xl font-bold">
+            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,
+            that's certainly good to know. About four years. I got tired of hearing how young I looked.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/astro/features/BasicFeatures.astro b/src/components/astro/features/BasicFeatures.astro
index 65bc509..8bb930d 100644
--- a/src/components/astro/features/BasicFeatures.astro
+++ b/src/components/astro/features/BasicFeatures.astro
@@ -1,58 +1,33 @@
 ---
-const {} = Astro.props;
+const { } = Astro.props;
 ---
 
 <section class="relative">
-  <div
-    class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32"
-    aria-hidden="true"
-  >
+  <div class="absolute inset-0 bg-blue-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="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
       <div class="mb-8 text-center">
-        <p
-          class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
-        >
-          Features
+        <p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">
+          Components
         </p>
-        <h2
-          class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
-        >
-          Most used Sections
-        </h2><p
-          class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"
-        >
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
+        <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
+          Most used widgets
+        </h2>
+        <p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
+          Provides frequently used components for building websites using Tailwind CSS
         </p>
       </div>
-      <div
-        class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"
-      >
+      <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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -65,28 +40,14 @@ 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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -100,28 +61,14 @@ 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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -134,28 +81,14 @@ 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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -169,28 +102,14 @@ 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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -203,28 +122,14 @@ 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 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"
-            >
+            <svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
               <g fill="none" fill-rule="evenodd">
-                <rect
-                  class="fill-current text-blue-600"
-                  width="64"
-                  height="64"
-                  rx="32"></rect>
+                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
                 <g stroke-linecap="square" stroke-width="2">
-                  <path
-                    class="stroke-current text-white"
-                    d="M20.571 20.571h13.714v17.143H20.571z"></path>
-                  <path
-                    class="stroke-current text-blue-300"
-                    d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
-                  >
+                  <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
+                  <path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
                   </path>
                 </g>
               </g>
@@ -239,4 +144,4 @@ const {} = Astro.props;
       </div>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/features/StepsFeatures.astro b/src/components/astro/features/StepsFeatures.astro
index d7eb12d..a6f5e12 100644
--- a/src/components/astro/features/StepsFeatures.astro
+++ b/src/components/astro/features/StepsFeatures.astro
@@ -1,83 +1,78 @@
 ---
-const {} = Astro.props;
+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="py-4 sm:py-6 lg:py-8">
-        <div class="w-full flex flex-wrap -mx-8">
-          <div class="w-full lg:w-1/2 px-8">
+      <div class="py-4 sm:py-6 lg:py-8 overflow-hidden">
+        <div class="flex flex-wrap md:-mx-8">
+          <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.
               </h2>
-              <p class="mb-8 text-xl text-gray-600 dark:text-gray-400">
+              <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 risus tempus nulla,
                 sed porttitor est nibh at nulla. Praesent placerat enim ut ex
                 tincidunt vehicula. Fusce sit amet dui tellus.
               </p>
-              <div class="w-full md:w-1/3">
-                <button
-                  type="button"
-                  class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
-                >
-                  Get started
-                </button>
+              <div class="w-full">
+                <a class="btn bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  href="https://github.com/onwidget/astrowind" target="_blank" rel="noopener">
+                  Get template
+                </a>
               </div>
             </div>
           </div>
-          <div class="w-full lg:w-1/2 px-8">
+          <div class="w-full lg:w-1/2 px-0 sm:px-8">
             <ul class="space-y-12">
-              <li class="flex -mx-4">
-                <div class="px-4">
+              <li class="flex md:-mx-4">
+                <div class="pr-4 sm:pl-4">
                   <span
-                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
-                  >
+                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
                     1
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="my-4 text-xl font-semibold">
+                  <h3 class="mb-4 text-xl font-semibold">
                     Responsive Elements
                   </h3>
                   <p class="text-gray-500 dark:text-gray-400">
-                    All elements are responsive and provide the best display in
-                    all screen size. It's magic !
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                    lobortis, mi risus tempus nulla.
                   </p>
                 </div>
               </li>
-              <li class="flex -mx-4">
-                <div class="px-4">
+              <li class="flex md:-mx-4">
+                <div class="pr-4 sm:pl-4">
                   <span
-                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
-                  >
+                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
                     2
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="my-4 text-xl font-semibold">Flexible Team</h3>
+                  <h3 class="mb-4 text-xl font-semibold">Flexible Team</h3>
                   <p class="text-gray-500 dark:text-gray-400">
-                    Flexibility is the key. All team is available 24/24 and
-                    joinable every day on our hotline.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                    lobortis, mi risus tempus nulla.
                   </p>
                 </div>
               </li>
-              <li class="flex -mx-4">
-                <div class="px-4">
+              <li class="flex md:-mx-4">
+                <div class="pr-4 sm:pl-4">
                   <span
-                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600"
-                  >
+                    class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold font-heading rounded-full bg-blue-50 text-blue-600">
                     3
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="my-4 text-xl font-semibold">Ecologic Software</h3>
+                  <h3 class="mb-4 text-xl font-semibold">Ecologic Software</h3>
                   <p class="text-gray-500 dark:text-gray-400">
-                    Our Software are ecologic and responsable. Green is not just
-                    a color, it's a way of life.
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                    lobortis, mi risus tempus nulla.
                   </p>
                 </div>
               </li>
@@ -87,4 +82,4 @@ const {} = Astro.props;
       </div>
     </div>
   </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/features/StepsLeft.astro b/src/components/astro/features/StepsLeft.astro
new file mode 100644
index 0000000..5c6183c
--- /dev/null
+++ b/src/components/astro/features/StepsLeft.astro
@@ -0,0 +1,119 @@
+---
+import Picture from "~/components/astro/utils/Picture.astro"
+const { } = Astro.props;
+---
+
+<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:py-6 md:pr-16 text-gray-700 dark:text-gray-400">
+            <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">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200"
+                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                                fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
+                                </path>
+                            </svg>
+                        </div>
+                    </div>
+                    <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>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla, sed 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">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200"
+                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                                fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
+                                </path>
+                            </svg>
+                        </div>
+                    </div>
+                    <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>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 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">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-600 dark:text-slate-200"
+                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                                fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z">
+                                </path>
+                            </svg>
+                        </div>
+                    </div>
+                    <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>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 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">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 text-gray-600 dark:text-slate-200"
+                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+                                fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M5 12l5 5l10 -10"></path>
+                            </svg>
+                        </div>
+                    </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="text-gray-700"></p>
+                </div>
+            </div>
+        </div>
+        <div class="relative">
+            <Picture
+                class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
+                src={import("~/assets/images/astronaut.jpg")} widths={[400, 768]}
+                sizes="(max-width: 768px) 100vw, 432px" alt="Astronaut" aspectRatio="432:768" />
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/features/TwoColsFeatures.astro b/src/components/astro/features/TwoColsFeatures.astro
new file mode 100644
index 0000000..d05e73e
--- /dev/null
+++ b/src/components/astro/features/TwoColsFeatures.astro
@@ -0,0 +1,176 @@
+---
+const { } = Astro.props;
+---
+
+<section class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20 bg-blue-50 dark:bg-slate-800">
+    <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+        <p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">
+            Features
+        </p>
+        <h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">
+            What's interesting about <span
+                class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500 whitespace-nowrap">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 quae.
+        </p>
+    </div>
+    <div class="grid mx-auto space-y-6 md:grid-cols-2 md:space-y-0">
+        <div class="space-y-8 sm:px-8">
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Integration with Tailwind CSS</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Ready-to-use Components</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Best Practices</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="space-y-8 sm:px-8">
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Excelent Page Speed</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Frequently updated</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+            <div class="flex flex-row max-w-md">
+                <div class="mb-4 mr-4">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500">
+                        <svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
+                                <g stroke-linecap="square" stroke-width="2">
+                                    <path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z">
+                                    </path>
+                                    <path class="stroke-current text-blue-300"
+                                        d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
+                                    </path>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="mb-3 text-xl font-bold">Open to new ideas and contributions
+                    </h3>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis
+                        lobortis, mi risus tempus nulla.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/footers/BasicFooter.astro b/src/components/astro/footers/BasicFooter.astro
index 9388a57..1065833 100644
--- a/src/components/astro/footers/BasicFooter.astro
+++ b/src/components/astro/footers/BasicFooter.astro
@@ -5,28 +5,22 @@ import {
   IconFacebook,
   IconArrowRight,
 } from "~/components/astro/icons";
-const {} = Astro.props;
+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 class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-gray-200 dark:border-slate-800">
       <div class="sm:col-span-12 lg:col-span-3">
         <div class="mb-2">
           <a class="inline-block font-bold" href="#">AstroWind</a>
         </div>
         <div class="text-sm text-gray-600">
-          <a
-            class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
-            href="#"
-            >Terms
+          <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
+            href="#">Terms
           </a> ·
-          <a
-            class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
-            href="#"
-            >Privacy Policy
+          <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
+            href="#">Privacy Policy
           </a>
         </div>
       </div>
@@ -36,38 +30,28 @@ const {} = Astro.props;
         </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="#"
-              >Web Studio
+            <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="#"
-              >DynamicBox Flex
+            <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="#"
-              >Programming Forms
+            <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="#"
-              >Integrations
+            <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="#"
-              >Command-line
+            <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>
@@ -78,38 +62,28 @@ const {} = Astro.props;
         </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="#"
-              >Documentation
+            <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="#"
-              >Tutorials &amp; Guides
+            <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="#"
-              >Blog
+            <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="#"
-              >Support Center
+            <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="#"
-              >Partners
+            <a class="text-gray-600 hover:text-gray-700 dark:text-gray-400 transition duration-150 ease-in-out"
+              href="#">Partners
             </a>
           </li>
         </ul>
@@ -120,38 +94,28 @@ const {} = Astro.props;
         </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="#"
-              >Home
+            <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="#"
-              >About us
+            <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="#"
-              >Company values
+            <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="#"
-              >Pricing
+            <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="#"
-              >Privacy Policy
+            <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>
@@ -166,28 +130,17 @@ const {} = Astro.props;
         <form>
           <div class="flex flex-wrap mb-4">
             <div class="w-full">
-              <label class="block text-sm sr-only" for="newsletter"
-                >Email
+              <label class="block text-sm sr-only" for="newsletter">Email
               </label>
               <div class="relative flex items-center max-w-xs">
-                <input
-                  id="newsletter"
-                  type="email"
-                  class="form-input w-full text-gray-800 px-3 py-2 pr-12 text-sm border rounded-sm dark:bg-slate-900 dark:border-slate-600 dark:text-gray-400"
-                  placeholder="Your email"
-                />
-                <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"
+                <input id="newsletter" type="email"
+                  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">
+                  <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
-                    className="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>
@@ -198,40 +151,28 @@ const {} = Astro.props;
     <div class="md:flex md:items-center md:justify-between py-4 md:py-8">
       <ul class="flex mb-4 md:order-1 md:ml-4 md:mb-0">
         <li>
-          <a
-            class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
-            aria-label="Twitter"
-            href="#"
-          >
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
+            aria-label="Twitter" href="#">
             <IconTwitter />
           </a>
         </li>
         <li class="ml-4">
-          <a
-            class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
-            aria-label="Instagram"
-            href="#"
-          >
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
+            aria-label="Instagram" href="#">
             <IconInstagram />
           </a>
         </li>
         <li class="ml-4">
-          <a
-            class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
-            aria-label="Facebook"
-            href="#"
-          >
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 dark:text-gray-400 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-gray-400 p-1.5"
+            aria-label="Facebook" href="#">
             <IconFacebook />
           </a>
         </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>. All rights reserved.
+        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>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/src/components/astro/headers/BasicHeader.astro b/src/components/astro/headers/BasicHeader.astro
index 82a880d..de0fad4 100644
--- a/src/components/astro/headers/BasicHeader.astro
+++ b/src/components/astro/headers/BasicHeader.astro
@@ -1,86 +1,58 @@
 ---
 import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
-const {} = Astro.props;
+const { } = Astro.props;
 ---
 
 <header
-  class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900 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"
-  >
+  class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-transparent 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="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"
-          >AstroWind
+        <span class="self-center ml-2 text-2xl font-extrabold text-gray-900 whitespace-nowrap dark:text-white">AstroWind
         </span>
       </a>
       <div class="flex items-center md:hidden">
-        <button
-          type="button"
+        <button type="button"
           class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-          aria-label="Toggle between Dark and Light mode"
-          onclick="window.toggleDarkMode()"
-        >
-          <IconSun />
+          aria-label="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()">
+          <IconSun class="w-6 h-6" />
         </button>
         <button
-          class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-          aria-label="Toggle Menu"
-          onclick="toggleMenu()"
-        >
-          <IconMenu />
+          class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+          aria-label="Toggle Menu" onclick="toggleMenu()">
+          <IconMenu class="w-6 h-6" />
         </button>
       </div>
     </div>
-    <nav
-      class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200"
-      aria-label="Main navigation"
-      id="menu"
-    >
-      <ul
-        class="flex flex-col py-2 md:py-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed"
-      >
+    <nav class="items-center w-full md:w-auto hidden md:flex text-gray-600 dark:text-slate-200"
+      aria-label="Main navigation" id="menu">
+      <ul class="flex flex-col py-2 md:py-0 md:flex-row md:self-center collapse w-full md:w-auto collapsed">
         <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="#"
-            >Pages
+          <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="#">Pages
           </a>
         </li>
         <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="#"
-            >Resources
+          <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="#">Resources
           </a>
         </li>
         <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="#"
-            >Blog
+          <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="#">Blog
           </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"
+          <button type="button"
             class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
-            aria-label="Toggle between Dark and Light mode"
-            onclick="window.toggleDarkMode()"
-          >
+            aria-label="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()">
             <IconSun />
           </button>
-          <a
-            href="https://github.com/onwidget/astrowind"
+          <a href="https://github.com/onwidget/astrowind"
             class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
-            aria-label="Astrowind Github"
-          >
+            aria-label="Astrowind Github">
             <IconGithub />
           </a>
 
@@ -90,4 +62,4 @@ const {} = Astro.props;
       </div>
     </nav>
   </div>
-</header>
+</header>
\ No newline at end of file
diff --git a/src/components/astro/hero/HeroWithImage.astro b/src/components/astro/hero/HeroWithImage.astro
index 10ad99e..1e6f5f3 100644
--- a/src/components/astro/hero/HeroWithImage.astro
+++ b/src/components/astro/hero/HeroWithImage.astro
@@ -1,45 +1,36 @@
 ---
-import { Picture } from "@astrojs/image/components";
-const {} = Astro.props;
+import Picture from "~/components/astro/utils/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-6xl 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 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"
-            >Tailwind
+            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">
-            A template to make your website using Astro + Tailwind CSS. Ready to
-            start a new project and designed taking into account best practices
-            for SEO, great page speed, accessibility, dark mode, image
-            optimization and automatic sitemap generation.
+            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-xs max-w-none flex justify-center">
             <div>
-              <a
-                class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0"
-                href="#"
-                >Get started
+              <a class="btn text-white bg-blue-600 hover:bg-blue-800 mb-4 sm:mb-0"
+                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-800 dark:hover:bg-gray-700 ml-4"
-                href="#"
-                >Learn more
+              <a class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-800 ml-4"
+                href="#">Learn more
               </a>
             </div>
           </div>
@@ -48,17 +39,11 @@ const {} = Astro.props;
       <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"
-              widths={[400, 768]}
-              sizes="(max-width: 768px) 100vw, 768px"
-              alt="Hero Image"
-              aspectRatio="16:9"
-            />
+            <Picture src={import("~/assets/images/hero.jpg")} class="mx-auto rounded-md 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>
+</section>
\ No newline at end of file
diff --git a/src/components/astro/icons/IconArrowRight.astro b/src/components/astro/icons/IconArrowRight.astro
index c70277d..8c689ee 100644
--- a/src/components/astro/icons/IconArrowRight.astro
+++ b/src/components/astro/icons/IconArrowRight.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconFacebook.astro b/src/components/astro/icons/IconFacebook.astro
index bff506a..0731097 100644
--- a/src/components/astro/icons/IconFacebook.astro
+++ b/src/components/astro/icons/IconFacebook.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconGithub.astro b/src/components/astro/icons/IconGithub.astro
index 4b65785..01b51a0 100644
--- a/src/components/astro/icons/IconGithub.astro
+++ b/src/components/astro/icons/IconGithub.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconInstagram.astro b/src/components/astro/icons/IconInstagram.astro
index f90842d..78f324c 100644
--- a/src/components/astro/icons/IconInstagram.astro
+++ b/src/components/astro/icons/IconInstagram.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconMenu.astro b/src/components/astro/icons/IconMenu.astro
index 11efe4b..c5b040c 100644
--- a/src/components/astro/icons/IconMenu.astro
+++ b/src/components/astro/icons/IconMenu.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconSun.astro b/src/components/astro/icons/IconSun.astro
index 8ca7afb..2488688 100644
--- a/src/components/astro/icons/IconSun.astro
+++ b/src/components/astro/icons/IconSun.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/icons/IconTwitter.astro b/src/components/astro/icons/IconTwitter.astro
index b6310c9..413ce73 100644
--- a/src/components/astro/icons/IconTwitter.astro
+++ b/src/components/astro/icons/IconTwitter.astro
@@ -1,5 +1,5 @@
 ---
-const { className = "w-5 h-5" } = Astro.props;
+const { class: className = "w-5 h-5" } = Astro.props;
 ---
 
 <svg
diff --git a/src/components/astro/stats/BasicStats.astro b/src/components/astro/stats/BasicStats.astro
new file mode 100644
index 0000000..7c0697d
--- /dev/null
+++ b/src/components/astro/stats/BasicStats.astro
@@ -0,0 +1,32 @@
+---
+const { } = Astro.props;
+---
+
+<div class="px-4 py-8 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
+    <div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
+        <div class="text-center md:border-r mb-10 md:mb-0">
+            <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">132K</div>
+            <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
+                Downloads
+            </p>
+        </div>
+        <div class="text-center md:border-r mb-10 md:mb-0">
+            <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">24.8K</div>
+            <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
+                Stars
+            </p>
+        </div>
+        <div class="text-center md:border-r">
+            <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">10.3K</div>
+            <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
+                Forks
+            </p>
+        </div>
+        <div class="text-center">
+            <div class="text-4xl font-bold lg:text-5xl xl:text-6xl">48.4K</div>
+            <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
+                Users
+            </p>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 380b306..fbc8fb7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,16 +5,24 @@ import BasicCTA from "~/components/astro/ctas/BasicCTA.astro";
 import BasicFeatures from "~/components/astro/features/BasicFeatures.astro";
 import StepsFeatures from "~/components/astro/features/StepsFeatures.astro";
 import HeroWithImage from "~/components/astro/hero/HeroWithImage.astro";
+import FAQsBasic from "~/components/astro/faqs/FAQsBasic.astro";
+import TwoColsFeatures from "~/components/astro/features/TwoColsFeatures.astro";
+import StepsLeft from "~/components/astro/features/StepsLeft.astro";
+import BasicStats from "~/components/astro/stats/BasicStats.astro";
+import BlogFeaturesFourCols from "~/components/astro/blog/BlogFeaturesFourCols.astro";
 ---
 
-<Layout
-  title="AstroWind — Your website with Astro + Tailwind CSS"
-  description="Performance and accessible template to make your website using Astro + Tailwind CSS."
->
+<Layout title="AstroWind — Your website with Astro + Tailwind CSS"
+  description="Performance and accessible template to make your website using Astro + Tailwind CSS.">
   <main class="mt-20">
     <HeroWithImage />
     <BasicFeatures />
+    <StepsLeft />
+    <TwoColsFeatures />
     <StepsFeatures />
+    <BlogFeaturesFourCols />
+    <FAQsBasic />
+    <BasicStats />
     <BasicCTA />
   </main>
-</Layout>
+</Layout>
\ No newline at end of file