diff --git a/README.md b/README.md
index 28bf30a..8176b20 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,6 @@ A template to make your website using Astro + Tailwind CSS.
   - 100 SEO
 - Production ready Google PageSpeed Insights
 
-
 <br>
 
 ## 🚀 Project Structure
@@ -64,7 +63,7 @@ Any static assets, like images, can be placed in the `public/` directory.
 All commands are run from the root of the project, from a terminal:
 
 | Command           | Action                                       |
-|:----------------  |:-------------------------------------------- |
+| :---------------- | :------------------------------------------- |
 | `npm install`     | Installs dependencies                        |
 | `npm run dev`     | Starts local dev server at `localhost:3000`  |
 | `npm run build`   | Build your production site to `./dist/`      |
diff --git a/astro.config.mjs b/astro.config.mjs
index b998cc2..c2bd8b0 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,9 +8,13 @@ import image from "@astrojs/image";
 export default defineConfig({
   // Astro uses this full URL to generate your sitemap and canonical URLs in your final build
   site: "https://astrowind.vercel.app/",
-  integrations: [tailwind({
-    config: {
-      applyBaseStyles: false
-    }
-  }), sitemap({}), image()]
-});
\ No newline at end of file
+  integrations: [
+    tailwind({
+      config: {
+        applyBaseStyles: false,
+      },
+    }),
+    sitemap({}),
+    image(),
+  ],
+});
diff --git a/package-lock.json b/package-lock.json
index 3be65fd..cc73b2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,19 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@onwidget/astrowind",
-      "version": "0.0.9",
+      "version": "0.0.10",
       "devDependencies": {
         "@astrojs/image": "^0.3.3",
         "@astrojs/sitemap": "^1.0.0",
         "@astrojs/tailwind": "^1.0.0",
         "astro": "^1.0.0",
+        "prettier": "^2.7.1",
+        "prettier-plugin-astro": "^0.5.0",
         "subfont": "^6.9.0"
       }
     },
@@ -744,6 +746,26 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgr/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "is-glob": "^4.0.3",
+        "open": "^8.4.0",
+        "picocolors": "^1.0.0",
+        "tiny-glob": "^0.2.9",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -2525,6 +2547,15 @@
         "clone": "^1.0.2"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -6641,6 +6672,38 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -7577,6 +7640,43 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-astro": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.5.0.tgz",
+      "integrity": "sha512-wBDZs0hlPWQDc7P7VmGe8pImci6F434Wd/otfLJwvCSXRb9J7AhmAigXhm5WPgCJuBA509Ovo/Ed+LAgZy4KWg==",
+      "dev": true,
+      "dependencies": {
+        "@astrojs/compiler": "^0.19.0",
+        "prettier": "^2.7.1",
+        "sass-formatter": "^0.7.2",
+        "synckit": "^0.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.0.0",
+        "npm": ">=6.14.0"
+      }
+    },
+    "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.19.0.tgz",
+      "integrity": "sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==",
+      "dev": true
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -8376,6 +8476,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -8414,6 +8520,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass-formatter": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
+      "integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
+      "dev": true,
+      "dependencies": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9056,6 +9171,15 @@
         "p-limit": "^3.1.0"
       }
     },
+    "node_modules/suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
+      "dependencies": {
+        "s.color": "0.0.15"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -9125,6 +9249,22 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/synckit": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.7.3.tgz",
+      "integrity": "sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/utils": "^2.3.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
@@ -11342,6 +11482,20 @@
         "fastq": "^1.6.0"
       }
     },
+    "@pkgr/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-7dIJ9CRVzBnqyEl7diUHPUFJf/oty2SeoVzcMocc5PeOUDK9KGzvgIBjGRRzzlRDaOjh3ADwH0WeibQvi3ls2Q==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.3",
+        "is-glob": "^4.0.3",
+        "open": "^8.4.0",
+        "picocolors": "^1.0.0",
+        "tiny-glob": "^0.2.9",
+        "tslib": "^2.4.0"
+      }
+    },
     "@polka/url": {
       "version": "1.0.0-next.21",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -12746,6 +12900,12 @@
         "clone": "^1.0.2"
       }
     },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
     "define-properties": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -15605,6 +15765,25 @@
         "mimic-fn": "^4.0.0"
       }
     },
+    "open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dev": true,
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "dependencies": {
+        "is-docker": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+          "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+          "dev": true
+        }
+      }
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -16220,6 +16399,32 @@
       "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "dev": true
+    },
+    "prettier-plugin-astro": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.5.0.tgz",
+      "integrity": "sha512-wBDZs0hlPWQDc7P7VmGe8pImci6F434Wd/otfLJwvCSXRb9J7AhmAigXhm5WPgCJuBA509Ovo/Ed+LAgZy4KWg==",
+      "dev": true,
+      "requires": {
+        "@astrojs/compiler": "^0.19.0",
+        "prettier": "^2.7.1",
+        "sass-formatter": "^0.7.2",
+        "synckit": "^0.7.0"
+      },
+      "dependencies": {
+        "@astrojs/compiler": {
+          "version": "0.19.0",
+          "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.19.0.tgz",
+          "integrity": "sha512-8nvyxZTfCXLyRmYfTttpJT6EPhfBRg0/q4J/Jj3/pNPLzp+vs05ZdktsY6QxAREaOMAnNEtSqcrB4S5DsXOfRg==",
+          "dev": true
+        }
+      }
+    },
     "pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -16806,6 +17011,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true
+    },
     "sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -16827,6 +17038,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass-formatter": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
+      "integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
+      "dev": true,
+      "requires": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -17323,6 +17543,15 @@
         "p-limit": "^3.1.0"
       }
     },
+    "suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
+      "requires": {
+        "s.color": "0.0.15"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17376,6 +17605,16 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "synckit": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.7.3.tgz",
+      "integrity": "sha512-jNroMv7Juy+mJ/CHW5H6TzsLWpa1qck6sCHbkv8YTur+irSq2PjbvmGnm2gy14BUQ6jF33vyR4DPssHqmqsDQw==",
+      "dev": true,
+      "requires": {
+        "@pkgr/utils": "^2.3.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "tailwindcss": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
diff --git a/package.json b/package.json
index 663b8d7..326e725 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,22 @@
 {
   "name": "@onwidget/astrowind",
   "description": "A template to make your website using Astro + Tailwind CSS.",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": true,
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build && subfont -ir --no-fallbacks --root dist",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "pretty": "prettier --write ."
   },
   "devDependencies": {
     "@astrojs/image": "^0.3.3",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
     "astro": "^1.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-astro": "^0.5.0",
     "subfont": "^6.9.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/astro/ctas/BasicCTA.astro b/src/components/astro/ctas/BasicCTA.astro
index 6ce15b0..a15ea89 100644
--- a/src/components/astro/ctas/BasicCTA.astro
+++ b/src/components/astro/ctas/BasicCTA.astro
@@ -1,15 +1,21 @@
 ---
-  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</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.</p>
+        <h2
+          class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
+        >
+          Astro + Tailwind CSS
+        </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.
+        </p>
       </div>
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/astro/features/BasicFeatures.astro b/src/components/astro/features/BasicFeatures.astro
index c34fce2..e4dc064 100644
--- a/src/components/astro/features/BasicFeatures.astro
+++ b/src/components/astro/features/BasicFeatures.astro
@@ -1,145 +1,242 @@
 ---
-  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>
+  <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">
+        <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">
+        <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-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.</p>
+        </h2><p
+          class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-300"
+        >
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat.
+        </p>
       </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">
+      <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"
+        >
           <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>
             </svg>
-            <div class="ml-4 text-xl font-bold">
-              Headers
-            </div>
+            <div class="ml-4 text-xl font-bold">Headers</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </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">
+        <div
+          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>
             </svg>
 
-            <div class="ml-4 text-xl font-bold">
-              Footers
-            </div>
+            <div class="ml-4 text-xl font-bold">Footers</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </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">
+        <div
+          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>
             </svg>
-            <div class="ml-4 text-xl font-bold">
-              Features
-            </div>
+            <div class="ml-4 text-xl font-bold">Features</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </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">
+        <div
+          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>
             </svg>
 
-            <div class="ml-4 text-xl font-bold">
-              Call-to-Action
-            </div>
+            <div class="ml-4 text-xl font-bold">Call-to-Action</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </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">
+        <div
+          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>
             </svg>
-            <div class="ml-4 text-xl font-bold">
-              Pricing
-            </div>
+            <div class="ml-4 text-xl font-bold">Pricing</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </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">
+        <div
+          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>
             </svg>
-            <div class="ml-4 text-xl font-bold">
-              Testimonial
-            </div>
+            <div class="ml-4 text-xl font-bold">Testimonial</div>
           </div>
           <p class="text-gray-500 dark:text-gray-400 text-md">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore.
           </p>
         </div>
       </div>
-
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/astro/features/StepsFeatures.astro b/src/components/astro/features/StepsFeatures.astro
index 1425f63..7baa704 100644
--- a/src/components/astro/features/StepsFeatures.astro
+++ b/src/components/astro/features/StepsFeatures.astro
@@ -1,25 +1,29 @@
 ---
-  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="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-gray-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.
+                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-sm 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 ">
+                <button
+                  type="button"
+                  class="btn-sm 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>
@@ -29,7 +33,9 @@
             <ul class="space-y-12">
               <li class="flex -mx-4">
                 <div class="px-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">
+                  <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"
+                  >
                     1
                   </span>
                 </div>
@@ -37,38 +43,41 @@
                   <h3 class="my-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 !
+                  <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 !
                   </p>
                 </div>
               </li>
               <li class="flex -mx-4">
                 <div class="px-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">
+                  <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"
+                  >
                     2
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="my-4 text-xl font-semibold">
-                    Flexible Team
-                  </h3>
+                  <h3 class="my-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.
+                    Flexibility is the key. All team is available 24/24 and
+                    joinable every day on our hotline.
                   </p>
                 </div>
               </li>
               <li class="flex -mx-4">
                 <div class="px-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">
+                  <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"
+                  >
                     3
                   </span>
                 </div>
                 <div class="px-4">
-                  <h3 class="my-4 text-xl font-semibold">
-                    Ecologic Software
-                  </h3>
+                  <h3 class="my-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.
+                    Our Software are ecologic and responsable. Green is not just
+                    a color, it's a way of life.
                   </p>
                 </div>
               </li>
@@ -76,7 +85,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </section>
diff --git a/src/components/astro/footers/BasicFooter.astro b/src/components/astro/footers/BasicFooter.astro
index c7cd9ba..9388a57 100644
--- a/src/components/astro/footers/BasicFooter.astro
+++ b/src/components/astro/footers/BasicFooter.astro
@@ -1,116 +1,193 @@
 ---
-import { IconTwitter, IconInstagram, IconFacebook, IconArrowRight } from "~/components/astro/icons";
-const { } = Astro.props;
+import {
+  IconTwitter,
+  IconInstagram,
+  IconFacebook,
+  IconArrowRight,
+} from "~/components/astro/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
+      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="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> ·
-          <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>
+          <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>
         </div>
       </div>
       <div class="sm: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="#">Web
-              Studio</a>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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="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="#">Documentation</a>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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="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="#">Home</a>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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="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>
+        <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" type="email"
+                <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"
+                  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
+                    className="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
+                  />
                 </button>
               </div>
             </div>
@@ -121,30 +198,40 @@ 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>
\ No newline at end of file
+</footer>
diff --git a/src/components/astro/headers/BasicHeader.astro b/src/components/astro/headers/BasicHeader.astro
index ac2c3c1..6e1014b 100644
--- a/src/components/astro/headers/BasicHeader.astro
+++ b/src/components/astro/headers/BasicHeader.astro
@@ -1,56 +1,85 @@
 ---
 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 lg:flex lg:justify-between max-w-6xl lg:px-4">
+  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 lg:flex lg:justify-between max-w-6xl lg: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 lg: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()">
+          aria-label="Toggle between Dark and Light mode"
+          onclick="window.toggleDarkMode()"
+        >
           <IconSun />
         </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()">
+          aria-label="Toggle Menu"
+          onclick="toggleMenu()"
+        >
           <IconMenu />
         </button>
       </div>
     </div>
-    <div class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200" id="menu">
-      <ul class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg:w-auto collapsed">
+    <div
+      class="items-center w-full lg:w-auto hidden lg:flex text-gray-600 dark:text-slate-200"
+      id="menu"
+    >
+      <ul
+        class="flex flex-col py-2 lg:py-0 lg:flex-row lg:self-center collapse w-full lg: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="#">Products</a>
+          <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="#"
+            >Products
+          </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="#">Docs</a>
+          <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="#"
+            >Docs
+          </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>
+          <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>
       </ul>
-      <div class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed">
+      <div
+        class="lg:self-center flex items-center mb-4 lg:mb-0 collapse collapsed"
+      >
         <div class="hidden items-center mr-3 lg: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>
 
@@ -60,4 +89,4 @@ const { } = Astro.props;
       </div>
     </div>
   </div>
-</header>
\ No newline at end of file
+</header>
diff --git a/src/components/astro/hero/HeroWithImage.astro b/src/components/astro/hero/HeroWithImage.astro
index 54bced6..b019e06 100644
--- a/src/components/astro/hero/HeroWithImage.astro
+++ b/src/components/astro/hero/HeroWithImage.astro
@@ -1,31 +1,46 @@
 ---
-import { Picture } from '@astrojs/image/components';
-const { } = Astro.props;
+import { Picture } from "@astrojs/image/components";
+const {} = Astro.props;
 ---
 
 <section>
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="pt-32 pb-12 md:pt-40 md:pb-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-6xl 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">Tailwind</span>
+          <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
+          </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
+            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.
           </p>
-          <div class="max-w-xs max-w-none flex justify-center  ">
+          <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="#0">Get
-                started</a>
+              <a
+                class="btn text-white bg-blue-600 hover:bg-blue-700 mb-4 sm:mb-0"
+                href="#0"
+                >Get started
+              </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="#0">Learn more</a>
+              <a
+                class="btn text-white bg-gray-900 hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 ml-4"
+                href="#0"
+                >Learn more
+              </a>
             </div>
           </div>
         </div>
@@ -33,11 +48,17 @@ const { } = Astro.props;
       <div>
         <div class="relative flex justify-center mb-8">
           <div class="flex flex-col justify-center">
-            <Picture src={import('~/assets/hero-astro.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/hero-astro.jpg")}
+              class="mx-auto rounded-md"
+              widths={[400, 768]}
+              sizes="(max-width: 768px) 100vw, 768px"
+              alt="Hero Image"
+              aspectRatio="16:9"
+            />
           </div>
         </div>
       </div>
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/components/astro/icons/IconArrowRight.astro b/src/components/astro/icons/IconArrowRight.astro
index 7799671..c70277d 100644
--- a/src/components/astro/icons/IconArrowRight.astro
+++ b/src/components/astro/icons/IconArrowRight.astro
@@ -1,11 +1,21 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
-  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <line x1="5" y1="12" x2="19" y2="12"></line>
   <line x1="13" y1="18" x2="19" y2="12"></line>
   <line x1="13" y1="6" x2="19" y2="12"></line>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/astro/icons/IconFacebook.astro b/src/components/astro/icons/IconFacebook.astro
index b89edd2..bff506a 100644
--- a/src/components/astro/icons/IconFacebook.astro
+++ b/src/components/astro/icons/IconFacebook.astro
@@ -1,9 +1,21 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
-  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
-</svg>
\ No newline at end of file
+  <path
+    d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
+  ></path>
+</svg>
diff --git a/src/components/astro/icons/IconGithub.astro b/src/components/astro/icons/IconGithub.astro
index f7b951a..4b65785 100644
--- a/src/components/astro/icons/IconGithub.astro
+++ b/src/components/astro/icons/IconGithub.astro
@@ -1,12 +1,22 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24"
-  viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round"
-  stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path
-    d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5">
+    d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
+  >
   </path>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/astro/icons/IconInstagram.astro b/src/components/astro/icons/IconInstagram.astro
index febab40..f90842d 100644
--- a/src/components/astro/icons/IconInstagram.astro
+++ b/src/components/astro/icons/IconInstagram.astro
@@ -1,11 +1,21 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
-  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <rect x="4" y="4" width="16" height="16" rx="4"></rect>
   <circle cx="12" cy="12" r="3"></circle>
   <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/astro/icons/IconMenu.astro b/src/components/astro/icons/IconMenu.astro
index 619d474..11efe4b 100644
--- a/src/components/astro/icons/IconMenu.astro
+++ b/src/components/astro/icons/IconMenu.astro
@@ -1,9 +1,20 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-   <line x1="4" y1="8" x2="20" y2="8"></line>
-   <line x1="4" y1="16" x2="20" y2="16"></line>
-</svg>
\ No newline at end of file
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <line x1="4" y1="8" x2="20" y2="8"></line>
+  <line x1="4" y1="16" x2="20" y2="16"></line>
+</svg>
diff --git a/src/components/astro/icons/IconSun.astro b/src/components/astro/icons/IconSun.astro
index 3dd67e0..8ca7afb 100644
--- a/src/components/astro/icons/IconSun.astro
+++ b/src/components/astro/icons/IconSun.astro
@@ -1,10 +1,22 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
-  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <circle cx="12" cy="12" r="4"></circle>
-  <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
-</svg>
\ No newline at end of file
+  <path
+    d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
+  ></path>
+</svg>
diff --git a/src/components/astro/icons/IconTwitter.astro b/src/components/astro/icons/IconTwitter.astro
index 70d260f..b6310c9 100644
--- a/src/components/astro/icons/IconTwitter.astro
+++ b/src/components/astro/icons/IconTwitter.astro
@@ -1,11 +1,22 @@
 ---
-  const { className = "w-5 h-5" } = Astro.props;
+const { className = "w-5 h-5" } = Astro.props;
 ---
 
-<svg xmlns="http://www.w3.org/2000/svg" class={className} width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75"
-  stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={className}
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  stroke-width="1.75"
+  stroke="currentColor"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <path
-    d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z">
+    d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
+  >
   </path>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/components/astro/icons/index.js b/src/components/astro/icons/index.js
index 2781b21..7b4cc16 100644
--- a/src/components/astro/icons/index.js
+++ b/src/components/astro/icons/index.js
@@ -1,10 +1,10 @@
-import IconSun from "./IconSun.astro"
-import IconGithub from "./IconGithub.astro"
-import IconTwitter from "./IconTwitter.astro"
-import IconFacebook from "./IconFacebook.astro"
-import IconInstagram from "./IconInstagram.astro"
-import IconArrowRight from "./IconArrowRight.astro"
-import IconMenu from "./IconMenu.astro"
+import IconSun from "./IconSun.astro";
+import IconGithub from "./IconGithub.astro";
+import IconTwitter from "./IconTwitter.astro";
+import IconFacebook from "./IconFacebook.astro";
+import IconInstagram from "./IconInstagram.astro";
+import IconArrowRight from "./IconArrowRight.astro";
+import IconMenu from "./IconMenu.astro";
 
 export {
   IconSun,
@@ -13,5 +13,5 @@ export {
   IconFacebook,
   IconInstagram,
   IconArrowRight,
-  IconMenu
-}
+  IconMenu,
+};
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index dbab039..039ed93 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,78 +1,100 @@
 ---
-  import "~/styles/base.css"
+import "~/styles/base.css";
 
-  import Header from "~/components/astro/headers/BasicHeader.astro"
-  import Footer from "~/components/astro/footers/BasicFooter.astro";
+import Header from "~/components/astro/headers/BasicHeader.astro";
+import Footer from "~/components/astro/footers/BasicFooter.astro";
 
-  const { title = "", description = "", withHeader = true } = Astro.props;
+const { title = "", description = "", withHeader = true } = Astro.props;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <meta
+      name="google-site-verification"
+      content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M"
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width">
-  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-  <title>{title}</title>
-  <meta name="description" content={description}>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet">
-  <meta name="google-site-verification" content="orcPxI47GSa-cRvY11tUe6iGg2IO_RPvnA1q95iEM3M" />
-</head>
+  <body
+    class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900"
+  >
+    <Header />
+    <slot />
+    <Footer />
+    <style>
+      :root {
+      }
 
-<body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-slate-900">
-  <Header />
-  <slot />
-  <Footer />
-</body>
+      :global(body) {
+        font-family: "IBM Plex Sans", sans-serif;
+      }
 
+      :global(.btn, .btn-sm) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0.25rem;
+        border-width: 1px;
+        border-color: transparent;
+        font-weight: 500;
+        line-height: 1.375;
+        transition-property: color, background-color, border-color, fill, stroke,
+          opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
+          -webkit-backdrop-filter;
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+          filter, backdrop-filter;
+        transition-property: color, background-color, border-color,
+          text-decoration-color, fill, stroke, opacity, box-shadow, transform,
+          filter, backdrop-filter, -webkit-text-decoration-color,
+          -webkit-backdrop-filter;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 0.75rem 1.5rem;
+        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
+          0 4px 6px -2px rgba(0, 0, 0, 0.02);
+        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+          0 4px 6px -2px var(--tw-shadow-color);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+      }
+    </style>
+
+    <script is:inline>
+      function toggleDarkMode() {
+        document.documentElement.classList.toggle("dark");
+        localStorage.theme = document.documentElement.classList.contains("dark")
+          ? "dark"
+          : "light";
+      }
+      window.toggleDarkMode = toggleDarkMode;
+
+      if (
+        localStorage.theme === "dark" ||
+        (!("theme" in localStorage) &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches)
+      ) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+
+      function toggleMenu() {
+        document.getElementById("menu").classList.toggle("hidden");
+      }
+      window.toggleMenu = toggleMenu;
+    </script>
+  </body>
 </html>
-
-<style>
-  :root {}
-
-  :global(body) {
-    font-family: 'IBM Plex Sans', sans-serif;
-  }
-
-  :global(.btn, .btn-sm) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    border-width: 1px;
-    border-color: transparent;
-    font-weight: 500;
-    line-height: 1.375;
-    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-    transition-duration: .15s;
-    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-    padding: 0.75rem 1.5rem;
-    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02);
-    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -2px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-</style>
-
-<script is:inline>
-  function toggleDarkMode() {
-    document.documentElement.classList.toggle("dark");
-    localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light"
-  }
-  window.toggleDarkMode = toggleDarkMode
-
-  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-  }
-
-  function toggleMenu() {
-    document.getElementById("menu").classList.toggle("hidden");
-  }
-  window.toggleMenu = toggleMenu
-</script>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0b1c3ae..d4917b4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,10 @@
 ---
-import Layout from '~/layouts/Layout.astro';
+import Layout from "~/layouts/Layout.astro";
 
-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 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";
 ---
 
 <Layout
@@ -12,9 +12,9 @@ import HeroWithImage from '~/components/astro/hero/HeroWithImage.astro';
   description="Performance and accessible template to make your website using Astro + Tailwind CSS."
 >
   <main>
-	<HeroWithImage />
-	<BasicFeatures />
-	<StepsFeatures />
-	<BasicCTA />
+    <HeroWithImage />
+    <BasicFeatures />
+    <StepsFeatures />
+    <BasicCTA />
   </main>
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/styles/base.css b/src/styles/base.css
index bd6213e..b5c61c9 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index c3d3d40..11d89ff 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-	darkMode: 'class',
-}
+  content: ["./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  darkMode: "class",
+};