Update icons and minimal details

src/components/astro/features/BasicFeatures.astro

@@ -5,7 +5,7 @@
 <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="relative max-w-6xl mx-auto px-4 sm:px-6">
-    <div class="py-4 sm:py-6 lg:py-8 lg:pt-12">
+    <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-500 font-semibold tracking-wide uppercase">
           Features

src/components/astro/footers/BasicFooter.astro

@@ -1,4 +1,5 @@
 ---
+  import { IconTwitter, IconGithub, IconFacebook, IconArrowRight } from "~/components/astro/icons";
   const { } = Astro.props;
 ---
 
@@ -92,11 +93,8 @@
                 <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>
-                  <svg class="w-3 h-3 fill-current text-blue-600 mx-3 flex-shrink-0" viewBox="0 0 12 12"
+
-                    xmlns="http://www.w3.org/2000/svg">
+                  <IconArrowRight className="w-5 h-5 text-blue-600 mx-3 flex-shrink-0" />
-                    <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
-                      fill-rule="nonzero"></path>
-                  </svg>
                 </button>
               </div>
             </div>
@@ -107,37 +105,27 @@
     <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 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 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="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
+            aria-label="Twitter" href="/">
-              xmlns="http://www.w3.org/2000/svg">
+            <IconTwitter />
-              <path
+            
-                d="M24 11.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H8c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z">
-              </path>
-            </svg>
           </a>
         </li>
         <li class="ml-4">
-          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 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="Github" href="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
+            aria-label="Github" href="/">
-              xmlns="http://www.w3.org/2000/svg">
+            
-              <path
+            <IconGithub />
-                d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z">
-              </path>
-            </svg>
           </a>
         </li>
         <li class="ml-4">
-          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out dark:bg-gray-800 dark:text-white"
+          <a class="flex justify-center items-center text-gray-600 hover:text-gray-700 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="/"><svg class="w-8 h-8 fill-current" viewBox="0 0 32 32"
+            aria-label="Facebook" href="/">
-              xmlns="http://www.w3.org/2000/svg">
+            <IconFacebook />
-              <path
-                d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z">
-              </path>
-            </svg>
           </a>
         </li>
       </ul>
-      <div class="text-sm text-gray-600 mr-4 dark:text-slate-500">
+      <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
         Made by <a class="text-blue-600 hover:underline" href="https://onwidget.com/">onWidget</a>. All rights reserved.
       </div>
     </div>

src/components/astro/headers/BasicHeader.astro

@@ -1,4 +1,5 @@
 ---
+  import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
   const { } = Astro.props;
 ---
 
@@ -13,18 +14,14 @@
       </a>
       <div class="flex items-center lg:hidden">
         <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">
+          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"
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
+          onclick="window.toggleDarkMode()">
-            class="w-5 h-5">
+          <IconSun />
-            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-          </svg>
         </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"><svg
+          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">
-            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+
-            aria-hidden="true" class="w-6 h-6">
+          <IconMenu />
-            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
-          </svg>
         </button>
       </div>
     </div>
@@ -48,19 +45,11 @@
           <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"
             onclick="window.toggleDarkMode()">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
+            <IconSun />
-              class="w-5 h-5">
-              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-            </svg>
           </button>
           <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">
-            <svg class="w-5 h-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img"
+            <IconGithub />
-              xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-              <path fill="currentColor"
-                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
-              </path>
-            </svg>
           </a>
 
           <!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium  text-center ml-3 btn-sm" href="/login/">Get started

src/components/astro/hero/HeroWithImage.astro

@@ -2,7 +2,7 @@
   const { } = Astro.props;
 ---
 
-<section class="relative">
+<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">
@@ -17,13 +17,13 @@
             adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
             veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </p>
-          <div class="max-w-xs mx-auto sm:max-w-none sm:flex sm: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 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Get
+              <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 w-full sm:w-auto sm:ml-4"
+              <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>

src/components/astro/icons/IconArrowRight.astro

@@ -0,0 +1,11 @@
+---
+  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="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>

src/components/astro/icons/IconFacebook.astro

@@ -0,0 +1,9 @@
+---
+  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>
+  <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>

src/components/astro/icons/IconGithub.astro

@@ -0,0 +1,12 @@
+---
+  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>
+  <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">
+  </path>
+</svg>

src/components/astro/icons/IconMenu.astro

@@ -0,0 +1,9 @@
+---
+  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>

src/components/astro/icons/IconSun.astro

@@ -0,0 +1,10 @@
+---
+  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>
+  <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>

src/components/astro/icons/IconTwitter.astro

@@ -0,0 +1,11 @@
+---
+  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>
+  <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">
+  </path>
+</svg>

src/components/astro/icons/index.js

@@ -0,0 +1,15 @@
+import IconSun from "./IconSun.astro"
+import IconGithub from "./IconGithub.astro"
+import IconTwitter from "./IconTwitter.astro"
+import IconFacebook from "./IconFacebook.astro"
+import IconArrowRight from "./IconArrowRight.astro"
+import IconMenu from "./IconMenu.astro"
+
+export {
+  IconSun,
+  IconGithub,
+  IconTwitter,
+  IconFacebook,
+  IconArrowRight,
+  IconMenu
+}