From 95cfc0c24d59ccc8f289f0de8db85549e22610d1 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 09:58:46 +0100
Subject: [PATCH 01/11] 
 https://github.com/onwidget/astrowind/commit/8ff3675cfaf946daec006769fce9bbeac25d395e

---
 src/components/common/BasicScripts.astro | 7 +++++++
 src/config/components/header.js          | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro
index eeb05a4b..e431ec73 100644
--- a/src/components/common/BasicScripts.astro
+++ b/src/components/common/BasicScripts.astro
@@ -35,6 +35,13 @@ import { SITE } from '~/config/site/config.js';
     let lastKnownScrollPosition = window.scrollY;
     let ticking = true;
 
+    attachEvent('#header nav', 'click', function () {
+      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
+      document.body.classList.remove('overflow-hidden');
+      document.getElementById('header')?.classList.remove('h-screen');
+      document.querySelector('#header nav')?.classList.add('hidden');
+    });
+
     attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
       elem.classList.toggle('expanded');
       document.body.classList.toggle('overflow-hidden');
diff --git a/src/config/components/header.js b/src/config/components/header.js
index 913e9c13..e7f159cb 100644
--- a/src/config/components/header.js
+++ b/src/config/components/header.js
@@ -30,7 +30,7 @@ const headerData = {
       links: [
         {
           text: 'Features',
-          href: '#',
+          href: '#features',
         },
         {
           text: 'Pricing',

From 454fcb8ddb1577ccb4a9296cb3b6057e7de16aeb Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 10:00:37 +0100
Subject: [PATCH 02/11] 
 https://github.com/onwidget/astrowind/commit/0b740cc42b6af10e8f8e1cb843d7de69b9783f67

---
 src/config/components/header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/components/header.js b/src/config/components/header.js
index e7f159cb..89a227d1 100644
--- a/src/config/components/header.js
+++ b/src/config/components/header.js
@@ -30,7 +30,7 @@ const headerData = {
       links: [
         {
           text: 'Features',
-          href: '#features',
+          href: getPermalink('#features'),
         },
         {
           text: 'Pricing',

From 29727456342f86627d74dd5b36a86da2d4f30a2f Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 10:02:37 +0100
Subject: [PATCH 03/11] https://github.com/onwidget/astrowind/pull/191

---
 src/pages/[...blog]/[...page].astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro
index a90f5cfa..8c8a00f3 100644
--- a/src/pages/[...blog]/[...page].astro
+++ b/src/pages/[...blog]/[...page].astro
@@ -43,8 +43,8 @@ const meta = {
     <BlogList posts={page.data} />
     <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
     <!--
-      <PostTags tags={allCategories} class="mb-2" header="Search by Categories:" isCategory />
-      <PostTags tags={allTags}  header="Search by Tags:" />
+      <PostTags tags={allCategories} class="mb-2" title="Search by Categories:" isCategory />
+      <PostTags tags={allTags} title="Search by Tags:" />
     -->
   </section>
 </Layout>

From 39521ffec6caf185a4f71ac6bdddb3527e5dd7ba Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 10:10:56 +0100
Subject: [PATCH 04/11] 
 https://github.com/onwidget/astrowind/commit/7997ed1fb22689b6fb4b9e5007315df46f42afd9

---
 src/components/widgets/Announcement.astro | 2 +-
 src/components/widgets/CallToAction.astro | 2 +-
 src/components/widgets/Content.astro      | 2 +-
 src/components/widgets/FAQs.astro         | 2 +-
 src/components/widgets/Features.astro     | 2 +-
 src/components/widgets/Features2.astro    | 2 +-
 src/components/widgets/Footer.astro       | 2 +-
 src/components/widgets/Header.astro       | 2 +-
 src/components/widgets/Hero.astro         | 2 +-
 src/components/widgets/Hero2.astro        | 2 +-
 src/components/widgets/Note.astro         | 2 +-
 src/components/widgets/Stats.astro        | 2 +-
 src/components/widgets/Steps.astro        | 2 +-
 src/components/widgets/Steps2.astro       | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/widgets/Announcement.astro b/src/components/widgets/Announcement.astro
index fc03e0a9..becb7ab7 100644
--- a/src/components/widgets/Announcement.astro
+++ b/src/components/widgets/Announcement.astro
@@ -4,7 +4,7 @@ import announcement from '~/config/components/announcement';
 
 <!-- if info set -->{
   announcement && announcement.enabled && announcement.type === 'info' && (
-    <div class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis">
+    <div class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis not-prose">
       <Fragment set:html={announcement.text} />
     </div>
   )
diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index 71cb4714..9a992d57 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -24,7 +24,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="relative">
+<section class="relative not-prose">
   <div class="max-w-6xl mx-auto px-4 sm:px-6">
     <div class="py-12 md:py-20">
       <div
diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 9f1ed270..3a24adbc 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -31,7 +31,7 @@ const {
 } = Astro.props;
 ---
 
-<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20']}>
+<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20 not-prose']}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (
diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
index d77b1d21..0a5f3435 100644
--- a/src/components/widgets/FAQs.astro
+++ b/src/components/widgets/FAQs.astro
@@ -21,7 +21,7 @@ const {
 } = Astro.props;
 ---
 
-<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
+<div class="px-4 py-16 mx-auto max-w-6xl lg:py-20 not-prose">
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index 02b85ea3..59edd254 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -22,7 +22,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="scroll-mt-16" id="features">
+<section class="scroll-mt-16 not-prose" id="features">
   <div class="px-4 py-16 mx-auto max-w-6xl lg:px-8 lg:py-20">
     {
       (title || subtitle || highlight) && (
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
index cbdd03ea..08ef8ad1 100644
--- a/src/components/widgets/Features2.astro
+++ b/src/components/widgets/Features2.astro
@@ -26,7 +26,7 @@ const {
 const totalColumns = columns || items.length;
 ---
 
-<section class="relative">
+<section class="relative not-prose">
   <div class="absolute inset-0 bg-amber-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 -mb-12">
     <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
index dc2928c4..12f99e69 100644
--- a/src/components/widgets/Footer.astro
+++ b/src/components/widgets/Footer.astro
@@ -26,7 +26,7 @@ export interface Props {
 const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme = 'light' } = Astro.props;
 ---
 
-<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800']}>
+<footer class:list={[{ dark: theme === 'dark' }, 'relative border-t border-gray-200 dark:border-slate-800 not-prose']}>
   <div class="dark:bg-dark absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6 dark:text-slate-300">
     <div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index a784a5cd..9e6d3c1e 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -45,7 +45,7 @@ const {
 <header
   class:list={[
     { sticky: isSticky, relative: !isSticky },
-    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100',
+    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100 not-prose',
   ]}
   id="header"
 >
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index 86bc05bb..e4e2680d 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -37,7 +37,7 @@ if (padding !== '' && padding !== null && padding) {
 }
 ---
 
-<section class="relative md:-mt-[76px]">
+<section class="relative md:-mt-[76px] not-prose">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro
index 77b8166a..49697f0b 100644
--- a/src/components/widgets/Hero2.astro
+++ b/src/components/widgets/Hero2.astro
@@ -27,7 +27,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="relative md:-mt-[76px]">
+<section class="relative md:-mt-[76px] not-prose">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
diff --git a/src/components/widgets/Note.astro b/src/components/widgets/Note.astro
index d0864d78..ed84bf92 100644
--- a/src/components/widgets/Note.astro
+++ b/src/components/widgets/Note.astro
@@ -5,7 +5,7 @@ import note from '~/config/components/note';
 
 {
   note && note.enabled && (
-    <section class="bg-blue-50 dark:bg-slate-800">
+    <section class="bg-blue-50 dark:bg-slate-800 not-prose">
       <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
         {note.icon.enabled && <Icon name={note.icon.name} class="w-5 h-5 inline-block align-text-bottom" />}
         <Fragment set:html={note.text} />
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index 0ee01139..a4e15102 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -19,7 +19,7 @@ const {
 } = Astro.props;
 ---
 
-<div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl">
+<div class="px-4 py-4 md:py-16 sm:px-6 mx-auto md:px-24 lg:px-8 lg:py-20 max-w-6xl not-prose">
   {
     (title || subtitle || highlight) && (
       <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index b9676e7e..0c033295 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -24,7 +24,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
+<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl not-prose">
   <div class="grid gap-6 row-gap-10 md:grid-cols-2">
     <div class="md:py-4 md:pr-16 mb-4 md:mb-0">
       {title && <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 4c226799..13176d5c 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -64,7 +64,7 @@ const {
 ---
 
 <section>
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 overflow-hidden">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 overflow-hidden not-prose">
     <div class="py-12 md:py-20">
       <div class="py-4 sm:py-6 lg:py-8">
         <div class="flex flex-wrap md:-mx-8">

From c7ff96cef2eb5711aa29e66670ac40b1f0e7af2a Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 10:40:35 +0100
Subject: [PATCH 05/11] https://github.com/onwidget/astrowind/pull/199

---
 .prettierignore                               |   1 +
 src/assets/styles/base.css                    |   4 +
 src/components/widgets/CallToAction.astro     |   2 +-
 src/components/widgets/DListItem.astro        |  22 ++
 src/components/widgets/Hero.astro             |  10 +-
 src/components/widgets/Hero2.astro            |   4 +-
 .../post/astrowind-template-in-depth.md       |  49 ----
 .../post/astrowind-template-in-depth.mdx      | 248 ++++++++++++++++++
 8 files changed, 279 insertions(+), 61 deletions(-)
 create mode 100644 src/components/widgets/DListItem.astro
 delete mode 100644 src/content/post/astrowind-template-in-depth.md
 create mode 100644 src/content/post/astrowind-template-in-depth.mdx

diff --git a/.prettierignore b/.prettierignore
index 70f3e71f..f310bef7 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,4 @@ node_modules
 .github
 .changeset
 .cache/image/cache.json
+astrowind-template-in-depth.mdx
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index 8a024cfe..e4e79cb3 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+.dd *:first-child {
+  margin-top: 0;
+}
+
 @layer components {
   .text-page {
     color: var(--aw-color-text-page);
diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index 9a992d57..c40b73ec 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 
-interface CallToAction {
+export interface CallToAction {
   text: string;
   href: string;
   icon?: string;
diff --git a/src/components/widgets/DListItem.astro b/src/components/widgets/DListItem.astro
new file mode 100644
index 00000000..72da0c2c
--- /dev/null
+++ b/src/components/widgets/DListItem.astro
@@ -0,0 +1,22 @@
+---
+// component: DListItem
+//
+// Mimics the html 'dl' (description list)
+//
+// The 'dt' item is the item 'term' and is inserted into an 'h6' tag.
+// Caller needs to style the 'h6' tag appropriately.
+//
+// You can put pretty much any content you want between the open and
+// closing tags - it's simply contained in an enclosing div with a
+// margin left.  No need for 'dd' items.
+//
+const {
+  dt
+} = Astro.props;
+interface Props {
+  dt:string
+}
+const content:string = await Astro.slots.render('default');
+---
+<h6 set:html={dt}></h6>
+<div class="dd ml-8" set:html={content}/>
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index e4e2680d..efd7c202 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -1,15 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { Picture } from '@astrojs/image/components';
-
-interface CallToAction {
-  text: string;
-  href: string;
-  target: string;
-  rel: string;
-  icon?: string;
-  enabled?: boolean;
-}
+import type { CallToAction } from '~/components/widgets/CallToAction.astro';
 
 export interface Props {
   padding?: any;
diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro
index 49697f0b..3bd30b84 100644
--- a/src/components/widgets/Hero2.astro
+++ b/src/components/widgets/Hero2.astro
@@ -12,8 +12,8 @@ export interface Props {
   title?: string;
   subtitle?: string;
   content?: string;
-  callToAction?: string | CallToAction;
-  callToAction2?: string | CallToAction;
+  callToAction?: CallToAction;
+  callToAction2?: CallToAction;
   image?: string | any; // TODO: find HTMLElementProps
 }
 
diff --git a/src/content/post/astrowind-template-in-depth.md b/src/content/post/astrowind-template-in-depth.md
deleted file mode 100644
index e7434b25..00000000
--- a/src/content/post/astrowind-template-in-depth.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-publishDate: 2023-01-08T00:00:00Z
-title: AstroWind template in depth
-description: Lorem ipsum dolor sit amet
-excerpt: Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas
-image: ~/assets/images/stickers.jpg
-category: Tutorials
-tags:
-  - astro
-  - tailwind css
-  - front-end
-canonical: https://astrowind.vercel.app/astrowind-template-in-depth
----
-
-## Dictum integer fusce ac ridiculus et odio sollicitudin diam at
-
-Lorem ipsum dolor sit amet consectetur adipiscing elit euismod rutrum, consequat fringilla ultricies nullam curae mollis semper conubia viverra, orci aenean dapibus pharetra nec tortor tellus cubilia. Ullamcorper mi lectus eu malesuada tempor massa praesent magna mattis posuere, lobortis vulputate ut duis magnis parturient habitant nibh id tristique, quis suspendisse donec nisl penatibus sem non feugiat taciti. Mollis per ridiculus integer cursus semper vestibulum fermentum penatibus cubilia blandit scelerisque, tempus platea leo posuere ac pharetra volutpat aliquet euismod id ullamcorper lobortis, urna est magna mus rhoncus massa curae libero praesent eget. Mattis malesuada vestibulum quis ac nam phasellus suscipit facilisis libero diam posuere, cursus massa vehicula neque imperdiet tincidunt dui egestas lacinia mollis aliquet orci, nisl curabitur dapibus litora dis cum nostra montes ligula praesent. Facilisi aliquam convallis molestie tempor blandit ultricies bibendum parturient cubilia quam, porttitor morbi torquent tempus taciti nec faucibus elementum phasellus, quis inceptos vestibulum gravida augue potenti eget nunc maecenas. Tempor facilisis ligula volutpat habitant consequat inceptos orci per potenti blandit platea, mus sapien eget vel libero vestibulum augue cubilia ut ultrices fringilla lectus, imperdiet pellentesque cum ridiculus convallis sollicitudin nisl interdum semper felis.
-
-Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti augue nulla vivamus senectus odio, quisque curabitur enim consequat class sociis feugiat ullamcorper, felis dis imperdiet cubilia commodo sed massa phasellus. Viverra purus mus nisi condimentum dui vehicula facilisis turpis, habitant nascetur lectus tempor quisque habitasse urna scelerisque, nibh nullam vestibulum luctus aenean mollis metus. Suscipit gravida duis nec aliquet natoque molestie a ridiculus scelerisque cum, justo cursus sapien sodales purus dignissim vel facilisi magnis, inceptos rutrum ut integer auctor commodo sollicitudin fames et. Faucibus ligula nibh sagittis mauris auctor posuere habitant, scelerisque phasellus accumsan egestas gravida viverra nam, sed etiam eleifend proin massa dictumst. Porttitor risus luctus per aenean tellus primis fringilla vitae fames lacinia mauris metus, nec pulvinar quisque commodo sodales ac nibh natoque phasellus semper placerat. Lectus aenean potenti leo sollicitudin tristique eros quam ligula, vestibulum diam consequat enim torquent nec tempus, blandit viverra dapibus eleifend dis nunc nascetur.
-
-## Sodales hendrerit malesuada et vestibulum
-
-- Luctus euismod pretium nisi et, est dui enim.
-
-- Curae eget inceptos malesuada, fermentum class.
-
-- Porttitor vestibulum aliquam porta feugiat velit, potenti eu placerat.
-
-- Ligula lacus tempus ac porta, vel litora.
-
-Torquent non nisi lacinia faucibus nibh tortor taciti commodo porttitor, mus hendrerit id leo scelerisque mollis habitasse orci tristique aptent, lacus at molestie cubilia facilisis porta accumsan condimentum. Metus lacus suscipit porttitor integer facilisi torquent, nostra nulla platea at natoque varius venenatis, id quam pharetra aliquam leo. Dictum orci himenaeos quam mi fusce lacinia maecenas ac magna eleifend laoreet, vivamus enim curabitur ullamcorper est ultrices convallis suscipit nascetur. Ornare fames pretium ante ac eget nisi tellus vivamus, convallis mauris sapien imperdiet sollicitudin aliquet taciti quam, lacinia tempor primis magna iaculis at eu. Est facilisi proin risus eleifend orci torquent ultricies platea, quisque nullam vel porttitor euismod sociis non, maecenas sociosqu interdum arcu sed pharetra potenti. Aliquet risus tempus hendrerit sapien tellus eget cursus enim etiam dui, lobortis nostra pellentesque odio posuere morbi ad neque senectus arcu eu, turpis proin ac felis purus fames magnis dis dignissim.
-
-Orci volutpat augue viverra scelerisque dictumst ut condimentum vivamus, accumsan cum sem sollicitudin aliquet vehicula porta pretium placerat, malesuada euismod primis cubilia rutrum tempus parturient. Urna mauris in nibh morbi hendrerit vulputate condimentum, iaculis consequat porttitor dui dis euismod eros, arcu elementum venenatis varius lectus nisi. Nibh arcu ultrices semper morbi quam aptent quisque porta posuere iaculis, vestibulum cum vitae primis varius natoque conubia eu. Placerat sociis sagittis sociosqu morbi purus lobortis convallis, bibendum tortor ridiculus orci habitasse viverra dictum, quis rutrum fusce potenti volutpat vehicula. Curae porta inceptos lectus mus urna litora semper aliquam libero rutrum sem dui maecenas ligula quis, eget risus non imperdiet cum morbi magnis suspendisse etiam augue porttitor placerat facilisi hendrerit. Et eleifend eget augue duis fringilla sagittis erat est habitasse commodo tristique quisque pretium, suspendisse imperdiet inceptos mollis blandit magna mus elementum molestie sed vestibulum. Euismod morbi hendrerit suscipit felis ornare libero ligula, mus tortor urna interdum blandit nisi netus posuere, purus fermentum magnis nam primis nulla.
-
-## Elementum nisi urna cursus nisl quam ante tristique blandit ultricies eget
-
-Netus at rutrum taciti vestibulum molestie conubia semper class potenti lobortis, hendrerit donec vitae ad libero natoque parturient litora congue. Torquent rhoncus odio cursus iaculis molestie arcu leo condimentum accumsan, laoreet congue duis libero justo tortor commodo fusce, massa eros hac euismod netus sodales mi magnis. Aenean nullam sollicitudin ad velit nulla venenatis suspendisse iaculis, aliquet senectus mollis aptent fringilla volutpat nascetur, nec urna vehicula lacinia neque augue orci. Suspendisse et eleifend convallis sollicitudin posuere diam turpis gravida congue ultrices, laoreet ultricies dapibus proin facilisis magna class praesent fusce. Mus morbi magnis ultricies sed turpis ultrices tempus tortor bibendum, netus nulla viverra torquent malesuada ridiculus tempor. Parturient sociosqu erat ullamcorper gravida natoque varius, etiam habitant augue praesent per curabitur iaculis, donec pellentesque cursus suscipit aliquet. Congue curae cursus scelerisque pellentesque quis fusce arcu eros dictumst luctus ridiculus nisl viverra, turpis class faucibus phasellus feugiat eleifend fringilla orci tristique habitasse conubia quam. Habitasse montes congue sodales rutrum cras torquent cursus auctor condimentum imperdiet egestas nascetur, platea tincidunt ut sollicitudin purus libero lobortis ad nisi diam quam.
-
-Venenatis suscipit class iaculis non velit ultrices ligula nulla mattis turpis erat, enim montes sapien rhoncus tincidunt scelerisque fermentum dapibus imperdiet risus, tempor est massa pretium at molestie morbi nec libero aptent. Morbi rhoncus massa accumsan a pharetra nec conubia at, sem justo sociis suspendisse aenean dis magna, parturient inceptos ad vestibulum lectus ullamcorper ante. In condimentum suscipit iaculis suspendisse nisl gravida risus sociis, cursus nec lectus per tristique phasellus imperdiet ultrices taciti, natoque sociosqu curae tellus hendrerit feugiat dignissim. Risus est fringilla elementum ullamcorper nibh urna sociosqu quis, netus eu mollis torquent ridiculus nisi et, sodales cum vulputate augue facilisis egestas vel. Ridiculus volutpat nisi netus venenatis vitae posuere purus, nec aliquam fusce nascetur mus iaculis, sociosqu sodales erat id tempor malesuada. Lacinia platea sagittis tincidunt semper nam magna praesent, ante ornare senectus in ligula justo, id rhoncus nullam nec maecenas aliquam. Enim aenean rutrum magnis magna duis pulvinar curae posuere massa, dui orci class dis phasellus parturient aliquet luctus eget bibendum, ultricies fringilla erat purus habitasse natoque urna aliquam.
-
-Cursus varius volutpat aliquam tellus blandit netus orci, augue eleifend molestie cubilia proin. Sagittis enim nam hendrerit risus sem laoreet commodo interdum, odio fames et nunc bibendum urna conubia cursus neque, arcu accumsan nascetur ridiculus cubilia vestibulum sapien. Luctus maecenas accumsan turpis donec dictum justo ridiculus consequat ad, habitant elementum litora magna sed rutrum tempus. Et dapibus eget feugiat dictum quam proin sem tincidunt lectus risus natoque, massa ut purus sollicitudin dignissim hac sed nibh facilisis arcu dis lacinia, cras fringilla erat sociis eleifend varius vestibulum nunc aenean neque. Penatibus curabitur aptent magna faucibus aliquam sed massa curae maecenas nibh, sodales montes nulla cursus litora justo suscipit ut neque, varius rutrum enim dignissim auctor velit luctus blandit nostra. Torquent lobortis nec volutpat aliquet vestibulum penatibus bibendum, eget platea a dictum mollis congue. Netus consequat eget cursus cubilia nostra quam etiam sollicitudin purus, imperdiet per bibendum proin duis felis montes ut tincidunt semper, ad vestibulum accumsan tortor fames potenti tristique praesent. Arcu mollis tempus tincidunt ad platea mauris, nec inceptos dis penatibus donec, primis taciti fermentum erat mi.
-
-Lacinia pellentesque dui porttitor arcu mauris turpis quam vitae rutrum in vel, sociosqu ultricies ultrices rhoncus fames taciti ut aliquet placerat ligula. Nec libero aptent nisl euismod pellentesque curae posuere magnis, fusce condimentum augue fames penatibus mollis consequat, justo ullamcorper semper nibh netus turpis est. Condimentum nisi bibendum fames placerat habitasse curabitur facilisis accumsan sagittis ante, etiam id turpis aliquam elementum habitant eget aptent nisl, duis nullam velit hac cubilia risus ultricies interdum ultrices. A praesent taciti duis tempor sollicitudin primis auctor, consequat potenti porta iaculis ad imperdiet, habitasse sagittis quam eu mus nisl. Lacus morbi aptent fusce augue curae elementum diam litora leo condimentum pharetra facilisi eros, dis bibendum primis habitasse tempus porttitor dictumst potenti justo congue hendrerit curabitur. Pretium natoque penatibus pellentesque auctor, luctus libero pharetra proin vitae, habitant nam posuere. Tortor facilisis sed venenatis nostra massa congue lobortis rutrum ornare, ullamcorper libero nibh elementum dictumst torquent felis at, nam porttitor curabitur neque natoque accumsan hac id. Dictum aenean sed facilisis interdum libero eu, praesent curae purus ac platea, natoque penatibus malesuada erat faucibus.
-
-Porta lobortis ad dapibus id vitae convallis litora vehicula molestie mattis aliquam, sociosqu nisi ridiculus netus faucibus platea aptent diam vivamus. Taciti tristique in erat ridiculus ad ultricies mollis risus, laoreet aliquam semper felis nam cubilia praesent, tempus nostra augue penatibus convallis proin quis. Lacus commodo senectus tempus suspendisse suscipit, class porttitor mi potenti at, vitae mattis a pharetra. At cras felis fermentum turpis sapien fames volutpat sollicitudin integer egestas ornare nunc, praesent mollis nibh quisque tristique vitae curae lobortis lacinia donec sagittis. Tincidunt enim morbi etiam malesuada odio laoreet lacinia, phasellus fringilla integer inceptos lobortis ridiculus suscipit massa, turpis leo molestie a mus conubia. Ridiculus magna fermentum sodales interdum posuere mi risus per rhoncus donec orci, pulvinar curabitur facilisis curae accumsan ligula scelerisque porta a porttitor, dignissim parturient facilisi felis quis malesuada litora convallis cum integer. Fringilla pulvinar consequat suspendisse aenean mollis interdum odio viverra aptent, nascetur eget magna facilisi erat fermentum turpis taciti ornare molestie, nam sollicitudin natoque gravida porta nulla rutrum condimentum.
-
-Bibendum leo etiam porta fermentum donec mauris netus nibh per non varius diam, massa aliquam elementum lacinia himenaeos sem eros platea justo neque placerat. Etiam morbi ac magna quis gravida mi molestie praesent potenti pharetra id ornare euismod congue, est sapien iaculis rhoncus platea posuere litora integer mattis lacinia cubilia rutrum sem. Facilisis est tempus ridiculus ultricies faucibus nec aenean praesent ad vel penatibus, mus hac bibendum pretium rhoncus nascetur non neque mollis curabitur lacinia, consequat ut tortor aptent et sapien ornare quisque suspendisse vitae. Et suscipit nulla mauris integer nam elementum massa, purus pellentesque placerat magnis scelerisque leo metus, sociis interdum tincidunt ac ullamcorper feugiat. Magnis inceptos justo tincidunt ad etiam conubia ultricies tortor, metus congue ullamcorper turpis bibendum sociosqu cubilia curae urna, in phasellus pellentesque quam platea imperdiet accumsan. Urna vivamus ut bibendum diam sociis euismod rutrum, consequat magnis primis curae donec quis placerat conubia, semper mattis mollis auctor fringilla erat. Suspendisse phasellus gravida mollis eleifend nascetur dictum lectus dui fringilla pulvinar feugiat, venenatis lobortis posuere dictumst porttitor bibendum ullamcorper montes ultrices congue, scelerisque lacinia viverra suscipit vel natoque inceptos dignissim habitant laoreet.
-
-Nascetur gravida mus imperdiet dapibus suspendisse cras nisl conubia, vulputate placerat senectus viverra nibh dictum et morbi pulvinar, cubilia ad non eleifend sagittis scelerisque penatibus. Auctor rutrum arcu phasellus tellus et magnis in, aliquet sociis fermentum class praesent aliquam lectus curabitur, natoque id pulvinar hac ultricies augue. Himenaeos commodo cum donec metus curae convallis sociis, facilisi lectus torquent fermentum rutrum vivamus non platea, nisl venenatis id ullamcorper mauris at. Facilisis etiam pharetra porta hendrerit eu conubia aliquam malesuada senectus, dui sociis penatibus integer mus quis turpis. Venenatis placerat ultricies tincidunt morbi himenaeos metus, diam curae aliquet neque pellentesque justo lobortis, cras sodales nam imperdiet parturient. Ligula potenti fringilla platea feugiat pulvinar dis habitant, nec nisl diam orci consequat condimentum gravida accumsan, massa vehicula euismod faucibus dignissim et. Scelerisque natoque vel eu proin etiam nostra pulvinar ullamcorper convallis facilisi, viverra vitae nunc penatibus ligula magnis cum senectus habitasse at, sagittis rhoncus faucibus netus nisl facilisis tristique parturient nulla. Condimentum massa lectus volutpat mollis curae eu, curabitur feugiat conubia mauris commodo mattis, magnis ad nullam ac sapien.
diff --git a/src/content/post/astrowind-template-in-depth.mdx b/src/content/post/astrowind-template-in-depth.mdx
new file mode 100644
index 00000000..adaba5e1
--- /dev/null
+++ b/src/content/post/astrowind-template-in-depth.mdx
@@ -0,0 +1,248 @@
+---
+publishDate: 2023-07-17T00:00:00Z
+title: AstroWind template in depth
+description: Internals documentation
+excerpt: While easy to get started, Astrowind is quite complex internally.  This page provides documentation on some of the more intricate parts.
+image: ~/assets/images/stickers.jpg
+category: Documentation
+tags:
+  - astro
+  - tailwind css
+  - front-end
+canonical: https://astrowind.vercel.app/astrowind-template-in-depth
+---
+import DListItem from "../../components/widgets/DListItem.astro";
+import ToggleTheme from "../../components/common/ToggleTheme.astro";
+
+## Overview
+
+It can be a somewhat daunting task trying to get a handle on _AstroWind_ internals, and particularly various points of usage.
+
+This page outlines and clarifies some of the techniques found in _AstroWind_.  Use it as a guide for further modification, or an instructional for techniques to use in your own endeavors.
+
+## Styling
+
+As the name suggests, _AstroWind_ relies on _TailWind_ for styling.  Furthermore, _AstroWind_ defines custom low level style settings which are incorporated into _TailWind_ seamlessly, and which provides consistency for higher level styling constructs, as well as enabling dark mode.
+
+The styling mechanism consists of the following files (all paths are prefixed with `/src/` ):
+
+<DListItem dt="assets/styles/base.css">
+  This file is essentially an extension of _TailWind's_ base.css.  High-level component styles are defined here.
+  
+  Note also styling on elements selected by 'attribute' selectors at the bottom of the files, particularly those selected by 'data' attributes. 
+</DListItem>
+<DListItem dt="components/CustomStyles.astro">
+  Defines custom colors and fonts.  For these to take effect in the 'base.css' file, they need to be loaded in the html header section. See next.
+</DListItem>
+<DListItem dt="components/common/MetaTags.astro">
+  Instantiates the _CustomStyles.astro_ component, along with other meta information (as the name implies).  All of this is injected in to the header - see next.  
+</DListItem>
+<DListItem dt="layouts/BaseLayout.astro">
+  This layout is used for all of the pages rendered by _AstroWind_.  The contents of _MetaTags.astro_ component, described above, is injected into the html header.
+</DListItem>
+
+### Dark Mode
+
+_Dark Mode_ is triggered by the little 'sunlight' icon:<ToggleTheme/>in the page header. It is defined in the _components/common/ToggleTheme.astro_, but the event is attached and the action defined in _components/common/BasicScripts.astro_ in the following snippet:
+```javascript
+    attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
+      if (defaultTheme.endsWith(':only')) {
+        return;
+      }
+      document.documentElement.classList.toggle('dark');
+      localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    });
+```
+Note that this is a client event.  _BasicScripts.astro_ defines several other client-side functionality as well as this one.
+
+## Advanced Slot Usage
+
+_slots_ are part of the component implementation, which is a common concept among many frameworks, including _Astrojs_.  The typical slot definition in a component looks like this:
+```astro 
+  // (file: MyComponent.astro)
+  ---
+    const {title} = Astro.props;
+    interface Props = {
+      title:string
+    }
+  ---
+    <div>
+      <h2>{title}</h2>
+      <slot/>  <!-- slot contents injected here -->
+    <div>
+```
+And in usage elsewhere:
+```astro
+  import MyComponent from "~/components/MyComponent";
+  ...
+  <MyComponent someArg="A Slot example">
+    <p>This content will be displayed in the slot</p>
+  </MyComponent>
+```
+### Alternate usage
+There's another way we can use slots, useful particularly when a component can have markdown content is as follows (study carefully...):
+
+```astro 
+  // (file: MyComponent.astro)
+  ---
+    const {title} = Astro.props;
+    interface Props = {
+      title:string
+    }
+
+    const content:string = await Astro.props.render('default');
+            // renders the html to the 'content' variable
+  ---
+    <div>
+      <h2>{title}</h2>
+      <div set:html={content}/>  <!-- slot contents injected here -->
+    <div>
+```
+Whoa!! What's going on here?
+
+Notice there is no slot definition in the html portion of the component.  Instead, what we do is have _Astro_ render the slot content (here, the 'default' content, but you can also render named slots) into a variable, and then use that content in a _div_ (for instance).
+
+So, if the usage is in a markdown file, like so:
+
+```mdx
+  import MyComponent from '../../components/MyComponent';
+
+  # Using the above component in a .mdx file (that can take components)
+
+  <MyComponent title="This is a slot implementor">
+  ### Here is some markdown content
+  - With a bullet item.
+  </MyComponent>
+```
+_MyComponent_ renders the markdown to html and then injects it into the div.
+
+This actually has a big advantage -- consider that with the normal usage you don't have access to the slot contents: _Astro_ just plops the content into the _&lt;slot/&gt;_ tag.  Using this method, however, allows you to access the content and further manipulate it before it gets inserted into the html.
+
+This allows a great deal of flexibility in component design.
+
+### Yet Another Step
+
+Now, we get to the techniques used in _AstroWind_, we'll use the  _pages/index.astro_ file to illustrate.
+
+You'll note that the index file imports a lot of components, each one roughly analagous to a panel in the index page.  Each of these components, in turn, is instantiated sequentially throughout the page.  But, you'll notice that some of them use this kind of construct (we'll use the last section, _CallToAction_, as it is most illustrative of the technique):
+
+```astro
+  <CallToAction
+    callToAction={{
+      text: 'Get template',
+      href: 'https://github.com/onwidget/astrowind',
+      icon: 'tabler:download',
+    }}
+  >
+    <Fragment slot="title">
+      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap">Tailwind CSS</span>
+    </Fragment>
+
+    <Fragment slot="subtitle">
+      Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
+      waste more time! :P
+    </Fragment>
+  </CallToAction>
+```
+Some things to note, here:
+<DListItem dt="The <em>callToAction</em> argument">
+  This argument is actually being passed a javascript object -- not a string.  (However, in the TS definition, it could be a string...)
+</DListItem>
+<DListItem dt="There are several <em>Fragment</em> children">
+  Furthermore, these &lt;Fragment/&gt; elements each have a _slot="(value)"_ specifier.
+</DListItem>
+
+The latter seems odd, because &lt;Fragment/&gt; is a built-in component over which you have no control, and doesn't have a provision for rendering slots, <em>per se</em>.
+
+The answer lies in a paragraph in the _Astro_ docs, slots section, which states:
+
+> Use a `slot="my-slot"` attribute on the child element that you want to pass through to a matching slot `name="my-slot" />` placeholder in your component.
+
+That's pretty concise and a bit of a head-scratcher to read, but basically what it says is that:
+  1. Given a component that defines a slot:
+  1. you can reference a slot from a child element of that component and,
+  1. provide content to the parent component's slot from the child by naming the slot in the child with a `slot="<slot-name>"` property assignment, where the _slot-name_ is the parent's slot.
+
+So, in the example above, the _CallToAction_ component defines the _subtitle_ slot, and the following _&lt;Fragment slot="subtitle"&gt;_ populates the slot with the following content:
+
+```astro
+    <Fragment slot="subtitle">
+      Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
+      waste more time! :P
+    </Fragment>
+```
+
+And, the _CallToAction_ component defines and renders it thusly:
+
+```astro
+---
+  ... 
+  const {
+    subtitle = await Astro.slots.render('subtitle'),
+} = Astro.props;
+---
+  ...
+  {subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
+  ...
+
+```
+There's a lot to wrap your head around, here.
+
+Notice first that _subtitle_ is defined as a prop/argument, but it's being processed as a slot.  Interestingly, prop args and slots seem to be somewhat interchangeable: if the subtitle was just a string, it would simply take that assignment.  The main difference is that if you render them independently, you have to call the render with an _await_ modifier.
+
+## CallToAction Property
+<table>
+<tr>
+<td class="font-bold">Note:</td>
+<td>
+There's a _lot_ of duplicate (or at least very similar code) in the following components, especially as regards the _CallToAction_ mechanism -- adding to a lot of confusion and something of a maintenance headache:
+
+<div class="ml-8">
+src/components/widgets/Hero.astro  
+src/components/widgets/Steps2.astro  
+src/components/widgets/CallToAction.astro  
+src/components/widgets/Hero2.astro  
+src/pages/landing/startup.astro
+</div>
+
+Seems like this could be cleaned up.
+</td>
+</tr>
+</table>
+
+The _CallToAction_ property can be of type `string | CallToAction` where the `CallToAction` is a typed object. In the component, this is handled thusly:
+```astro
+---
+  const {
+    callToAction = await Astro.slots.render('callToAction'),
+  } = Astro.props;
+          // also rendered as a slot
+---
+  <div>
+  ...
+  {
+  typeof callToAction === 'string' ? (
+    <Fragment set:html={callToAction} />
+  ) : (
+    callToAction &&
+    callToAction.text &&
+    callToAction.href && (
+      <div class="mt-6 max-w-xs mx-auto">
+        <a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
+          {callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
+          {callToAction.text}
+        </a>
+      </div>
+    )
+  )
+}
+  </div>
+```
+First, the property type is checked to see if it's a string: if so, it's just set into a child _&lt;Fragment&gt;'s_ html.
+
+If not, it is validated as an object and then members of the object are assigned to various
+html elements.
+
+
+
+

From 63b636d7dd200f04e08c02f0668175140b83b507 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:18:02 +0100
Subject: [PATCH 06/11] 
 https://github.com/onwidget/astrowind/commit/006c332f8551b31c06e942d299c108c19c957ab5
 +
 https://github.com/onwidget/astrowind/commit/5a716917a38185180f2fab63b87146b6b69dc79d

---
 package-lock.json                             |  10 +++---
 package.json                                  |   2 +-
 src/assets/favicons/favicon.ico               | Bin 0 -> 4286 bytes
 src/assets/favicons/favicon.svg               |  11 ++++++
 src/components/CustomFonts.astro              |  34 ++++++++++++++++++
 src/components/Favicons.astro                 |   8 +++++
 ...{CustomStyles.astro => VariablesCss.astro} |   6 +---
 src/components/common/MetaTags.astro          |   7 ----
 src/layouts/BaseLayout.astro                  |   6 ++++
 9 files changed, 66 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/favicons/favicon.ico
 create mode 100644 src/assets/favicons/favicon.svg
 create mode 100644 src/components/CustomFonts.astro
 create mode 100644 src/components/Favicons.astro
 rename src/components/{CustomStyles.astro => VariablesCss.astro} (80%)

diff --git a/package-lock.json b/package-lock.json
index c00ce1f2..28d99448 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@astrojs/tailwind": "^4.0.0",
         "@astrolib/analytics": "^0.3.0",
         "@astrolib/seo": "^0.4.0",
-        "@fontsource/inter": "^4.5.15",
+        "@fontsource-variable/inter": "^5.0.5",
         "@iconify-json/flat-color-icons": "^1.1.6",
         "@iconify-json/icon-park": "^1.1.11",
         "@iconify-json/mdi": "^1.1.52",
@@ -1411,10 +1411,10 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@fontsource/inter": {
-      "version": "4.5.15",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
-      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==",
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.0.7.tgz",
+      "integrity": "sha512-aOG0xPnkjV9w5Iw9maGWYyM3P2ivRKCFHkzbSVN2MAmwsMQJP3Dkr6Og1FSHoQBZjGx4SfMWTU72h+dXthND5g==",
       "dev": true
     },
     "node_modules/@humanwhocodes/config-array": {
diff --git a/package.json b/package.json
index 9001141e..557855c1 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@astrojs/tailwind": "^4.0.0",
     "@astrolib/analytics": "^0.3.0",
     "@astrolib/seo": "^0.4.0",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource-variable/inter": "^5.0.5",
     "@iconify-json/flat-color-icons": "^1.1.6",
     "@iconify-json/icon-park": "^1.1.11",
     "@iconify-json/mdi": "^1.1.52",
diff --git a/src/assets/favicons/favicon.ico b/src/assets/favicons/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..578ad458b8906c08fbed84f42b045fea04db89d1
GIT binary patch
literal 4286
zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k
zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA
zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)}
z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn
z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol<TYbS?nEF<^Ey@`h)N;!GF9X
zw=YHV20P|-=`6YWLdnykk+f-vgpveGo^!eAX>%keY9-e>4W>p7AHmH~&!P7f7!Uj`
zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W
z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk
zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6
zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+<EF0ZfRpPx
z)*R2d9^@R=!>!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git>
zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$
z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b
z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8us<O$gg^m)I`Q>LzVG^q00Qh
gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I

literal 0
HcmV?d00001

diff --git a/src/assets/favicons/favicon.svg b/src/assets/favicons/favicon.svg
new file mode 100644
index 00000000..542f90ae
--- /dev/null
+++ b/src/assets/favicons/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/src/components/CustomFonts.astro b/src/components/CustomFonts.astro
new file mode 100644
index 00000000..9f053f50
--- /dev/null
+++ b/src/components/CustomFonts.astro
@@ -0,0 +1,34 @@
+---
+import '@fontsource-variable/inter';
+// 'DM Sans'
+// Nunito
+// Dosis
+// Outfit
+// Roboto
+// Literata
+// 'IBM Plex Sans'
+// Karla
+// Poppins
+// 'Fira Sans'
+// 'Libre Franklin'
+// Inconsolata
+// Raleway
+// Oswald
+// 'Space Grotesk'
+// Urbanist
+---
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: var(--aw-font-sans);
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+    --aw-color-text-page: rgb(17 24 39);
+    --aw-color-text-muted: rgb(75 85 99);
+    --aw-color-bg-page: rgb(255 255 255);
+  }
+</style>
diff --git a/src/components/Favicons.astro b/src/components/Favicons.astro
new file mode 100644
index 00000000..109794ca
--- /dev/null
+++ b/src/components/Favicons.astro
@@ -0,0 +1,8 @@
+---
+import favIcon from '~/assets/favicons/favicon.ico';
+import favIconSvg from '~/assets/favicons/favicon.svg';
+---
+
+<link rel="shortcut icon" href={favIcon} />
+<link rel="icon" type="image/svg+xml" href={favIcon} />
+<link rel="mask-icon" href={String(favIconSvg)} color="#8D46E7" />
diff --git a/src/components/CustomStyles.astro b/src/components/VariablesCss.astro
similarity index 80%
rename from src/components/CustomStyles.astro
rename to src/components/VariablesCss.astro
index 7e4a78ea..3d0855e7 100644
--- a/src/components/CustomStyles.astro
+++ b/src/components/VariablesCss.astro
@@ -1,13 +1,9 @@
 ---
-import '@fontsource/inter/variable.css';
-
-// Nunito
-// Dosis
 ---
 
 <style is:inline is:global>
   :root {
-    --aw-font-sans: 'InterVariable';
+    --aw-font-sans: 'Inter Variable';
     --aw-font-serif: var(--aw-font-sans);
     --aw-font-heading: var(--aw-font-sans);
 
diff --git a/src/components/common/MetaTags.astro b/src/components/common/MetaTags.astro
index 9bfce09f..62804ef8 100644
--- a/src/components/common/MetaTags.astro
+++ b/src/components/common/MetaTags.astro
@@ -8,8 +8,6 @@ import { MetaSEO } from '~/types';
 import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import CustomStyles from '~/components/CustomStyles.astro';
-
 export interface Props extends MetaSEO {
   dontUseTitleTemplate?: boolean;
 }
@@ -81,15 +79,10 @@ const image =
   }}
 />
 
-<CustomStyles />
-
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}
 
 <!-- Google Analytics -->
 {SITE.googleAnalyticsId && <GoogleAnalytics id={String(SITE.googleAnalyticsId)} partytown={true} />}
 
-<link rel="shortcut icon" href={getAsset('/favicon.ico')} />
-<link rel="icon" type="image/svg+xml" href={getAsset('/favicon.svg')} />
-<link rel="mask-icon" href={getAsset('/favicon.svg')} color="#8D46E7" />
 <link rel="sitemap" href={getAsset('/sitemap-index.xml')} />
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 9b595919..522ce50b 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -2,6 +2,9 @@
 import '~/assets/styles/base.css';
 
 import MetaTags from '~/components/common/MetaTags.astro';
+import Favicons from '~/components/Favicons.astro';
+import VariablesCss from "~/components/VariablesCss.astro"
+import CustomFonts from "~/components/CustomFonts.astro"
 import BasicScripts from '~/components/common/BasicScripts.astro';
 
 import { MetaSEO } from '~/types';
@@ -18,6 +21,9 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
 <!DOCTYPE html>
 <html lang={language} dir={textDirection} class="2xl:text-[20px]">
   <head>
+    <Favicons />
+    <VariablesCss />
+    <CustomFonts />
     <MetaTags {...meta} />
     <link rel="sitemap" href="/sitemap-index.xml" />
   </head>

From 7d0161a26b3fd179c7e733d92ca4e890d17f6c88 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:20:47 +0100
Subject: [PATCH 07/11] 
 https://github.com/onwidget/astrowind/commit/ce4dfa0a69850e151bfd6569c14cd1c844cb8b8a

---
 src/components/widgets/Header.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 9e6d3c1e..3bbc8cf1 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -69,7 +69,7 @@ const {
             <li class={links?.length ? 'dropdown' : ''}>
               {links?.length ? (
                 <>
-                  <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
+                <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center">
                     {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
                   </button>
                   <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">

From 419918f80f53c15ea3638e96241cd3da6d1f78d9 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:21:42 +0100
Subject: [PATCH 08/11] 
 https://github.com/onwidget/astrowind/commit/1fe2303b0b8c7d8e927cee284f52f4a5bc1ac5f9

---
 public/favicon.ico | Bin 4286 -> 0 bytes
 public/favicon.svg |  11 -----------
 2 files changed, 11 deletions(-)
 delete mode 100644 public/favicon.ico
 delete mode 100644 public/favicon.svg

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 578ad458b8906c08fbed84f42b045fea04db89d1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k
zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA
zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)}
z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn
z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol<TYbS?nEF<^Ey@`h)N;!GF9X
zw=YHV20P|-=`6YWLdnykk+f-vgpveGo^!eAX>%keY9-e>4W>p7AHmH~&!P7f7!Uj`
zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W
z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk
zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6
zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+<EF0ZfRpPx
z)*R2d9^@R=!>!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git>
zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$
z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b
z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8us<O$gg^m)I`Q>LzVG^q00Qh
gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I

diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index 542f90ae..00000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        #flame { fill: #FF5D01; }
-        #a { fill: #000014; }
-        @media (prefers-color-scheme: dark) {
-            #a { fill: #fff; }
-        }
-    </style>
-    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
-    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
-</svg>

From d89e88fa7842c621b383669ad87ce814723baf30 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:37:28 +0100
Subject: [PATCH 09/11] 
 https://github.com/onwidget/astrowind/commit/242a172b36698c16c6c7b0b0459d5770f75a1fa5

---
 src/assets/styles/base.css               |  22 ++++-
 src/components/common/BasicScripts.astro |  27 ++---
 src/components/widgets/Header.astro      | 121 +++++++++++++----------
 src/config/components/header.js          |  29 +++++-
 src/pages/contact.astro                  |  10 ++
 src/pages/landing/mobile-app.astro       |  16 +--
 src/pages/landing/saas.astro             |  12 ---
 src/pages/pricing.astro                  |  10 ++
 src/pages/services.astro                 |  10 ++
 9 files changed, 164 insertions(+), 93 deletions(-)
 create mode 100644 src/pages/contact.astro
 create mode 100644 src/pages/pricing.astro
 create mode 100644 src/pages/services.astro

diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index e4e79cb3..0b56fa0d 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -36,8 +36,26 @@
   }
 }
 
-#header.scroll {
-  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-sm dark:bg-slate-900 dark:md:bg-slate-900/90;
+#header.scroll > div:first-child {
+  @apply bg-white md:bg-white/90 md:backdrop-blur-md;
+  box-shadow: 0 0.375rem 1.5rem 0 rgb(140 152 164 / 13%);
+}
+.dark #header.scroll > div:first-child,
+#header.scroll.dark > div:first-child {
+  @apply bg-white md:bg-[#030621e6] border-b border-gray-500/20;
+  box-shadow: none;
+}
+/* #header.scroll > div:last-child {
+  @apply py-3;
+} */
+
+#header.expanded nav {
+  position: fixed;
+  top: 70px;
+  left: 0;
+  right: 0;
+  bottom: 70px !important;
+  padding: 0 5px;
 }
 
 .dropdown:hover .dropdown-menu {
diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro
index e431ec73..d363b84f 100644
--- a/src/components/common/BasicScripts.astro
+++ b/src/components/common/BasicScripts.astro
@@ -36,17 +36,19 @@ import { SITE } from '~/config/site/config.js';
     let ticking = true;
 
     attachEvent('#header nav', 'click', function () {
-      document.querySelector('[data-aw-toggle-menu]')?.classList.remove('expanded');
-      document.body.classList.remove('overflow-hidden');
-      document.getElementById('header')?.classList.remove('h-screen');
-      document.querySelector('#header nav')?.classList.add('hidden');
+      document.querySelector("[data-aw-toggle-menu]")?.classList.remove("expanded");
+      document.body.classList.remove("overflow-hidden");
+      document.getElementById("header")?.classList.remove("h-screen");
+      document.querySelector("#header nav")?.classList.add("hidden");
     });
 
-    attachEvent('[data-aw-toggle-menu]', 'click', function (_, elem) {
-      elem.classList.toggle('expanded');
-      document.body.classList.toggle('overflow-hidden');
-      document.getElementById('header')?.classList.toggle('h-screen');
-      document.querySelector('#header nav')?.classList.toggle('hidden');
+    attachEvent('[data-aw-toggle-menu]', 'click', function () {
+      document.body.classList.toggle("overflow-hidden");
+      document.getElementById("header")?.classList.toggle("h-screen");
+      document.getElementById("header")?.classList.toggle("expanded");
+      document.getElementById("header")?.classList.toggle("bg-page");
+      document.querySelector("#header nav")?.classList.toggle("hidden");
+      document.querySelector("#header > div > div:last-child")?.classList.toggle("hidden");
     });
 
     attachEvent('[data-aw-toggle-color-scheme]', 'click', function () {
@@ -119,8 +121,9 @@ import { SITE } from '~/config/site/config.js';
     if (elem) {
       elem.classList.remove('expanded');
     }
-    document.body.classList.remove('overflow-hidden');
-    document.getElementById('header')?.classList.remove('h-screen');
-    document.querySelector('#header nav')?.classList.add('hidden');
+    document.body.classList.remove("overflow-hidden");
+    document.getElementById("header")?.classList.remove("h-screen");
+    document.getElementById("header")?.classList.remove("expanded");
+    document.querySelector("#header nav")?.classList.add("hidden");
   };
 </script>
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 3bbc8cf1..ce96c7e4 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -1,10 +1,11 @@
 ---
-import { Icon } from 'astro-icon/components';
-import Logo from '~/components/Logo.astro';
-import ToggleTheme from '~/components/common/ToggleTheme.astro';
-import ToggleMenu from '~/components/common/ToggleMenu.astro';
+import { Icon } from "astro-icon/components";
+import Logo from "~/components/Logo.astro";
+import ToggleTheme from "~/components/common/ToggleTheme.astro";
+import ToggleMenu from "~/components/common/ToggleMenu.astro";
 
-import { getHomePermalink, getAsset } from '~/utils/permalinks';
+import { getHomePermalink } from "~/utils/permalinks";
+import { trimSlash, getAsset } from "~/utils/permalinks";
 
 interface Link {
   text?: string;
@@ -14,69 +15,88 @@ interface Link {
 }
 
 interface ActionLink extends Link {
-  type?: string;
-  target?: string;
-  rel?: string;
+  class?: string;
 }
 
 interface MenuLink extends Link {
-  links?: Array<Link>;
+  links?: Array<MenuLink>;
 }
 
 export interface Props {
+  id?: string;
   links?: Array<MenuLink>;
   actions?: Array<ActionLink>;
   isSticky?: boolean;
+  isDark?: boolean;
+  isFullWidth?: boolean;
   showToggleTheme?: boolean;
   showRssFeed?: boolean;
   position?: string;
 }
 
 const {
+  id = "header",
   links = [],
   actions = [],
   isSticky = false,
+  isDark = false,
+  isFullWidth = false,
   showToggleTheme = false,
   showRssFeed = false,
-  position = 'center',
+  position = "center",
 } = Astro.props;
+
+const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
 ---
 
 <header
   class:list={[
-    { sticky: isSticky, relative: !isSticky },
-    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100 not-prose',
+    { sticky: isSticky, relative: !isSticky, dark: isDark },
+    "top-0 z-40 flex-none mx-auto w-full border-b border-gray-50/0 transition-[opacity] ease-in-out",
   ]}
-  id="header"
+  {...id ? { id } : {}}
 >
-  <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-7xl">
-    <div class:list={[{ 'mr-auto': position === 'right' }, 'flex justify-between']}>
+  <div class="absolute inset-0"></div>
+  <div
+    class:list={[
+      "relative text-default py-3 px-3 md:px-6 mx-auto w-full md:flex md:justify-between",
+      {
+        "max-w-7xl": !isFullWidth,
+      },
+    ]}
+  >
+    <div class:list={[{ "mr-auto rtl:mr-0 rtl:ml-auto": position === "right" }, "flex justify-between"]}>
       <a class="flex items-center" href={getHomePermalink()}>
         <Logo />
       </a>
       <div class="flex items-center md:hidden">
-        {showToggleTheme && <ToggleTheme />}
+        {/* <ToggleTheme /> */}
         <ToggleMenu />
       </div>
     </div>
     <nav
-      class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible md:mx-5"
+      class="items-center w-full md:w-auto hidden md:flex text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:mx-5"
       aria-label="Main navigation"
     >
-      <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
+      <ul
+        class="flex flex-col md:flex-row md:self-center w-full md:w-auto text-xl md:text-[0.9375rem] tracking-[0.01rem] font-medium"
+      >
         {
           links.map(({ text, href, links }) => (
-            <li class={links?.length ? 'dropdown' : ''}>
+            <li class={links?.length ? "dropdown" : ""}>
               {links?.length ? (
                 <>
-                <button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center">
-                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 hidden md:inline" />
+                  <button class="hover:text-link dark:hover:text-white px-4 py-3 flex items-center">
+                    {text} <Icon name="tabler:chevron-down" class="w-3.5 h-3.5 ml-0.5 rtl:ml-0 rtl:mr-0.5 hidden md:inline" />
                   </button>
                   <ul class="dropdown-menu md:backdrop-blur-md dark:md:bg-dark rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white/90 md:min-w-[200px] drop-shadow-xl">
                     {links.map(({ text: text2, href: href2 }) => (
                       <li>
                         <a
-                          class="first:rounded-t last:rounded-b md:hover:bg-gray-200 dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap"
+                          class:list={[
+                            "first:rounded-t last:rounded-b md:hover:bg-gray-100 hover:text-link dark:hover:text-white dark:hover:bg-gray-700 py-2 px-5 block whitespace-no-wrap",
+                            { "aw-link-active" : href2 === currentPath}
+                          ]}
                           href={href2}
                         >
                           {text2}
@@ -87,7 +107,10 @@ const {
                 </>
               ) : (
                 <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"
+                  class:list={[
+                    "hover:text-link dark:hover:text-white px-4 py-3 flex items-centers",
+                    { "aw-link-active": href === currentPath }
+                  ]}
                   href={href}
                 >
                   {text}
@@ -98,40 +121,38 @@ const {
         }
       </ul>
     </nav>
-    <div class:list={[{ 'ml-auto': position === 'left' }, 'md:self-center flex items-center md:mb-0']}>
-      <div class="hidden items-center md:flex">
-        {showToggleTheme && <ToggleTheme iconClass="w-5 h-5" />}
-
-        {
-          showRssFeed && (
-            <a
-              class="text-muted 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="RSS Feed"
-              href={getAsset('/rss.xml')}
-            >
-              <Icon name="tabler:rss" class="w-5 h-5" />
-            </a>
-          )
-        }
+    <div
+      class:list={[
+        { "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
+        "hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 bottom-0 p-3 md:p-0",
+      ]}
+    >
+      <div class="items-center flex justify-between w-full md:w-auto">
+        <div class="flex">
+          {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
+          {
+            showRssFeed && (
+              <a
+                class="text-muted 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="RSS Feed"
+                href={getAsset('/rss.xml')}
+              >
+                <Icon name="tabler:rss" class="w-5 h-5" />
+              </a>
+            )
+          }
+        </div>
         {
           actions?.length ? (
-            <span class="ml-4">
-              {actions.map(({ text, href, type, target, rel }) => (
-                <a
-                  class:list={[
-                    'btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm',
-                    { 'btn-ghost': type === 'ghost', 'btn-primary': type === 'primary' },
-                  ]}
-                  href={href}
-                  target={target}
-                  rel={rel}
-                >
+            <span class="ml-4 rtl:ml-0 rtl:mr-0">
+              {actions.map(({ text, href, class: className }) => (
+                <a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
                   <Fragment set:html={text} />
                 </a>
               ))}
             </span>
           ) : (
-            ''
+            ""
           )
         }
       </div>
diff --git a/src/config/components/header.js b/src/config/components/header.js
index 89a227d1..ed125e04 100644
--- a/src/config/components/header.js
+++ b/src/config/components/header.js
@@ -34,7 +34,7 @@ const headerData = {
         },
         {
           text: 'Pricing',
-          href: '#',
+          href: getPermalink('/pricing'),
         },
         {
           text: 'About us',
@@ -50,7 +50,7 @@ const headerData = {
         },
         {
           text: 'Contact',
-          href: '#',
+          href: getPermalink('/contact'),
         },
         {
           text: 'Terms',
@@ -71,8 +71,29 @@ const headerData = {
 
     // The blog link is a special case, it uses the getBlogPermalink function
     {
-      text: 'Blog',
-      href: getBlogPermalink(),
+      text: "Blog",
+      links: [
+        {
+          text: "Blog List",
+          href: getBlogPermalink(),
+        },
+        {
+          text: "Article",
+          href: getPermalink("get-started-website-with-astro-tailwind-css", "post"),
+        },
+        {
+          text: "Article (with Widgets)",
+          href: getPermalink("markdown-elements-demo-post", "post"),
+        },
+        {
+          text: "Category Page",
+          href: getPermalink("tutorials", "category"),
+        },
+        {
+          text: "Tag Page",
+          href: getPermalink("astro", "tag"),
+        },
+      ],
     },
   ],
 
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 00000000..2041c89c
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+const meta = {
+  title: "Contact",
+};
+---
+
+<Layout {meta}>
+  Contact
+</Layout>
diff --git a/src/pages/landing/mobile-app.astro b/src/pages/landing/mobile-app.astro
index ce00ba27..470ce7cb 100644
--- a/src/pages/landing/mobile-app.astro
+++ b/src/pages/landing/mobile-app.astro
@@ -5,6 +5,8 @@ import Header from '~/components/widgets/Header.astro';
 import Hero2 from '~/components/widgets/Hero2.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 
+import headerData from '~/config/components/header';
+
 import config from '~/config/site/config';
 
 const meta = {
@@ -16,19 +18,7 @@ const meta = {
   <Fragment slot="announcement"></Fragment>
   <Fragment slot="header">
     <Header
-      links={[]}
-      actions={[
-        {
-          type: 'ghost',
-          text: 'Login',
-          href: '#',
-        },
-        {
-          type: 'primary',
-          text: 'Sign Up',
-          href: '#',
-        },
-      ]}
+      {...headerData}
       showRssFeed={config.showRssFeed}
       showToggleTheme={config.showToggleTheme}
       isSticky={config.isSticky}
diff --git a/src/pages/landing/saas.astro b/src/pages/landing/saas.astro
index ad1733fd..e31906df 100644
--- a/src/pages/landing/saas.astro
+++ b/src/pages/landing/saas.astro
@@ -20,18 +20,6 @@ const meta = {
   <Fragment slot="header">
     <Header
       {...headerData}
-      actions={[
-        {
-          type: 'ghost',
-          text: 'Login',
-          href: '#',
-        },
-        {
-          type: 'primary',
-          text: 'Sign Up',
-          href: '#',
-        },
-      ]}
       isSticky={config.isSticky}
       showToggleTheme={config.showToggleTheme}
       showRssFeed={config.showRssFeed}
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
new file mode 100644
index 00000000..865cacbd
--- /dev/null
+++ b/src/pages/pricing.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+const meta = {
+  title: "Pricing",
+};
+---
+
+<Layout {meta}>
+  Pricing
+</Layout>
diff --git a/src/pages/services.astro b/src/pages/services.astro
new file mode 100644
index 00000000..78cabc04
--- /dev/null
+++ b/src/pages/services.astro
@@ -0,0 +1,10 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+const meta = {
+  title: "Services",
+};
+---
+
+<Layout {meta}>
+  Services
+</Layout>

From e35839f682be1646e2384c85a92d5d75c8cdb124 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:43:42 +0100
Subject: [PATCH 10/11] 
 https://github.com/onwidget/astrowind/commit/b5370e026c19f4c16a132b674cee51c3025df35b
 +
 https://github.com/onwidget/astrowind/commit/8b940e55be1435742fb32143cd8669525cc889a1

---
 src/assets/styles/{base.css => tailwind.css} |  0
 src/components/CustomStyles.astro            | 54 ++++++++++++++++++++
 src/components/VariablesCss.astro            | 17 ------
 src/layouts/BaseLayout.astro                 |  8 ++-
 4 files changed, 57 insertions(+), 22 deletions(-)
 rename src/assets/styles/{base.css => tailwind.css} (100%)
 create mode 100644 src/components/CustomStyles.astro
 delete mode 100644 src/components/VariablesCss.astro

diff --git a/src/assets/styles/base.css b/src/assets/styles/tailwind.css
similarity index 100%
rename from src/assets/styles/base.css
rename to src/assets/styles/tailwind.css
diff --git a/src/components/CustomStyles.astro b/src/components/CustomStyles.astro
new file mode 100644
index 00000000..40bcbe83
--- /dev/null
+++ b/src/components/CustomStyles.astro
@@ -0,0 +1,54 @@
+---
+import '@fontsource-variable/inter';
+
+// 'DM Sans'
+// Nunito
+// Dosis
+// Outfit
+// Roboto
+// Literata
+// 'IBM Plex Sans'
+// Karla
+// Poppins
+// 'Fira Sans'
+// 'Libre Franklin'
+// Inconsolata
+// Raleway
+// Oswald
+// 'Space Grotesk'
+// Urbanist
+---
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: var(--aw-font-sans);
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+
+    --aw-color-text-heading: rgb(0 0 0); 
+    --aw-color-text-default: rgb(16 16 16);
+    --aw-color-text-muted: rgb(16 16 16 / 66%);
+    --aw-color-bg-page: rgb(255 255 255);
+
+    --aw-color-bg-page-dark: rgb(3 6 32);
+  }
+
+  .dark {
+    --aw-font-sans: 'Inter Variable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: var(--aw-font-sans);
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+
+    --aw-color-text-heading: rgb(0 0 0); 
+    --aw-color-text-default: rgb(229 236 246);
+    --aw-color-text-muted: rgb(229 236 246 / 66%);
+    --aw-color-bg-page: var(--aw-color-bg-page-dark);
+  }
+</style>
diff --git a/src/components/VariablesCss.astro b/src/components/VariablesCss.astro
deleted file mode 100644
index 3d0855e7..00000000
--- a/src/components/VariablesCss.astro
+++ /dev/null
@@ -1,17 +0,0 @@
----
----
-
-<style is:inline is:global>
-  :root {
-    --aw-font-sans: 'Inter Variable';
-    --aw-font-serif: var(--aw-font-sans);
-    --aw-font-heading: var(--aw-font-sans);
-
-    --aw-color-primary: rgb(59 130 246);
-    --aw-color-secondary: rgb(30 58 138);
-    --aw-color-accent: rgb(109 40 217);
-    --aw-color-text-page: rgb(17 24 39);
-    --aw-color-text-muted: rgb(75 85 99);
-    --aw-color-bg-page: rgb(255 255 255);
-  }
-</style>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 522ce50b..1d7bd62f 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,10 +1,9 @@
 ---
-import '~/assets/styles/base.css';
+import '~/assets/styles/tailwind.css';
 
 import MetaTags from '~/components/common/MetaTags.astro';
 import Favicons from '~/components/Favicons.astro';
-import VariablesCss from "~/components/VariablesCss.astro"
-import CustomFonts from "~/components/CustomFonts.astro"
+import CustomStyles from "~/components/CustomStyles.astro"
 import BasicScripts from '~/components/common/BasicScripts.astro';
 
 import { MetaSEO } from '~/types';
@@ -22,8 +21,7 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
 <html lang={language} dir={textDirection} class="2xl:text-[20px]">
   <head>
     <Favicons />
-    <VariablesCss />
-    <CustomFonts />
+    <CustomStyles />
     <MetaTags {...meta} />
     <link rel="sitemap" href="/sitemap-index.xml" />
   </head>

From 37f0532504b2dc9c860c2ef0bc2d459f18354fe5 Mon Sep 17 00:00:00 2001
From: grantbirki <grantbirki@github.com>
Date: Sat, 5 Aug 2023 11:44:29 +0100
Subject: [PATCH 11/11] lint

---
 src/config/components/header.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/config/components/header.js b/src/config/components/header.js
index ed125e04..1f1b78ab 100644
--- a/src/config/components/header.js
+++ b/src/config/components/header.js
@@ -71,27 +71,27 @@ const headerData = {
 
     // The blog link is a special case, it uses the getBlogPermalink function
     {
-      text: "Blog",
+      text: 'Blog',
       links: [
         {
-          text: "Blog List",
+          text: 'Blog List',
           href: getBlogPermalink(),
         },
         {
-          text: "Article",
-          href: getPermalink("get-started-website-with-astro-tailwind-css", "post"),
+          text: 'Article',
+          href: getPermalink('get-started-website-with-astro-tailwind-css', 'post'),
         },
         {
-          text: "Article (with Widgets)",
-          href: getPermalink("markdown-elements-demo-post", "post"),
+          text: 'Article (with Widgets)',
+          href: getPermalink('markdown-elements-demo-post', 'post'),
         },
         {
-          text: "Category Page",
-          href: getPermalink("tutorials", "category"),
+          text: 'Category Page',
+          href: getPermalink('tutorials', 'category'),
         },
         {
-          text: "Tag Page",
-          href: getPermalink("astro", "tag"),
+          text: 'Tag Page',
+          href: getPermalink('astro', 'tag'),
         },
       ],
     },