From cb81d366fa4b87de003de25b9d0a049d02c488e2 Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Tue, 6 May 2025 20:24:37 +0800
Subject: [PATCH] Done with introduction, now moving on to front-page

---
 docs/src/_includes/partials/sidebar.njk |  2 +-
 docs/src/assets/styles.css              | 92 -------------------------
 docs/src/components/alert-dialog.njk    |  2 +-
 docs/src/components/combobox.njk        |  2 +-
 docs/src/components/dialog.njk          |  2 +-
 docs/src/components/dropdown-menu.njk   |  2 +-
 docs/src/components/popover.njk         |  2 +-
 docs/src/components/select.njk          |  2 +-
 docs/src/components/tabs.njk            |  2 +-
 docs/src/installation.njk               |  2 +-
 docs/src/introduction.njk               | 59 +++++++++++++++-
 11 files changed, 67 insertions(+), 102 deletions(-)

diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk
index b4da7a6..8b63b97 100644
--- a/docs/src/_includes/partials/sidebar.njk
+++ b/docs/src/_includes/partials/sidebar.njk
@@ -18,7 +18,7 @@
 <div class="grid gap-4 p-4">
   <header class="grid gap-1.5">
     <h2 class="font-semibold">I hope you like Basecoat...</h2>
-    <p class="text-muted-foreground text-sm">I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>) because I thought it'd be helpful to others. If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
+    <p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank">Ronan</a> and I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>). If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
   </header>
   <footer class="grid gap-2">
     <a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank">Sponsor me on GitHub</a>
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css
index 5c79b99..614f920 100644
--- a/docs/src/assets/styles.css
+++ b/docs/src/assets/styles.css
@@ -223,9 +223,6 @@
   }
 }
 @layer utilities {
-  .\@container {
-    container-type: inline-size;
-  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -258,9 +255,6 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -273,9 +267,6 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -336,9 +327,6 @@
   .mb-12 {
     margin-bottom: calc(var(--spacing) * 12);
   }
-  .-ml-1 {
-    margin-left: calc(var(--spacing) * -1);
-  }
   .-ml-1\.5 {
     margin-left: calc(var(--spacing) * -1.5);
   }
@@ -383,10 +371,6 @@
     width: calc(var(--spacing) * 2.5);
     height: calc(var(--spacing) * 2.5);
   }
-  .size-3 {
-    width: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 3);
-  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -448,15 +432,9 @@
   .min-h-\[350px\] {
     min-height: 350px;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -529,42 +507,21 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-y-0 {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -574,24 +531,15 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .scroll-m-20 {
     scroll-margin: calc(var(--spacing) * 20);
   }
   .scroll-mt-14 {
     scroll-margin-top: calc(var(--spacing) * 14);
   }
-  .scroll-mt-16 {
-    scroll-margin-top: calc(var(--spacing) * 16);
-  }
   .list-decimal {
     list-style-type: decimal;
   }
-  .grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -622,9 +570,6 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .gap-0 {
-    gap: calc(var(--spacing) * 0);
-  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -680,9 +625,6 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .gap-x-1 {
-    column-gap: calc(var(--spacing) * 1);
-  }
   .gap-x-1\.5 {
     column-gap: calc(var(--spacing) * 1.5);
   }
@@ -761,9 +703,6 @@
   .border-amber-50 {
     border-color: var(--color-amber-50);
   }
-  .border-border {
-    border-color: var(--border);
-  }
   .border-border\/50 {
     border-color: var(--border);
     @supports (color: color-mix(in lab, red, red)) {
@@ -791,9 +730,6 @@
   .bg-sidebar-primary {
     background-color: var(--sidebar-primary);
   }
-  .mask-repeat {
-    mask-repeat: repeat;
-  }
   .object-cover {
     object-fit: cover;
   }
@@ -830,9 +766,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -4581,26 +4514,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -4815,11 +4728,6 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
diff --git a/docs/src/components/alert-dialog.njk b/docs/src/components/alert-dialog.njk
index 9b06336..7575a6b 100644
--- a/docs/src/components/alert-dialog.njk
+++ b/docs/src/components/alert-dialog.njk
@@ -69,7 +69,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% set footer %}
   <button class="btn-outline" @click="open = false">Cancel</button>
diff --git a/docs/src/components/combobox.njk b/docs/src/components/combobox.njk
index 597440d..b45df85 100644
--- a/docs/src/components/combobox.njk
+++ b/docs/src/components/combobox.njk
@@ -81,7 +81,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% call select(
   listbox_attrs={"data-empty": "No framework found."},
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index 54b9f24..c93419e 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -100,7 +100,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% set footer %}
   <button class="btn-outline" @click="open = false">Cancel</button>
diff --git a/docs/src/components/dropdown-menu.njk b/docs/src/components/dropdown-menu.njk
index 2f10038..94ca0be 100644
--- a/docs/src/components/dropdown-menu.njk
+++ b/docs/src/components/dropdown-menu.njk
@@ -124,7 +124,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% call dropdown_menu(
   id="dropdown-menu",
diff --git a/docs/src/components/popover.njk b/docs/src/components/popover.njk
index d6ca2c1..446ffb6 100644
--- a/docs/src/components/popover.njk
+++ b/docs/src/components/popover.njk
@@ -99,7 +99,7 @@ document.addEventListener('alpine:init', () => {
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
 <section class="prose">
-  <p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+  <p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 </section>
 
 {% set raw_code %}{% raw %}{% call popover(
diff --git a/docs/src/components/select.njk b/docs/src/components/select.njk
index 139cd0a..3b4762c 100644
--- a/docs/src/components/select.njk
+++ b/docs/src/components/select.njk
@@ -118,7 +118,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% call select(name="select-js") %}
 <div role="group" aria-labelledby="fruit-options-label">
diff --git a/docs/src/components/tabs.njk b/docs/src/components/tabs.njk
index 11f3194..ce66836 100644
--- a/docs/src/components/tabs.njk
+++ b/docs/src/components/tabs.njk
@@ -118,7 +118,7 @@ document.addEventListener('alpine:init', () => {
 
 <h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
 
-<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
+<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
 
 {% set raw_code %}{% raw %}{% set account_panel %}
 <div class="card">
diff --git a/docs/src/installation.njk b/docs/src/installation.njk
index f454e61..710e3ae 100644
--- a/docs/src/installation.njk
+++ b/docs/src/installation.njk
@@ -88,7 +88,7 @@ toc:
   <p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
 </div>
 
-<h2 id="install-cli">Use the CLI</h2>
+<h2 id="install-cli"><a href="#install-cli">Use the CLI</a></h2>
 
 <div class="prose">
   <p>If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. <a href="/components/dialog">Dialog</a>). It will copy the JS and `<code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
diff --git a/docs/src/introduction.njk b/docs/src/introduction.njk
index f32c90f..31904d5 100644
--- a/docs/src/introduction.njk
+++ b/docs/src/introduction.njk
@@ -1,6 +1,63 @@
 ---
 layout: layouts/page.njk
 title: Introduction
-description: Basecoat is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
+description: Basecoat is a set of components built with Tailwind CSS. It is designed to be used with any traditional web stack 
+toc:
+  - label: Why Basecoat?
+    id: why
+  - label: How it works
+    id: how-it-works
+  - label: How can I help?
+    id: how-can-i-help
 ---
 
+<h2 id="why"><a href="#why">Why Basecoat?</a></h2>
+
+<div class="prose">
+  <p><b>Basecoat brings the magic of <a href="https://ui.shadcn.com/">shadcn/ui</a> to any traditional web stack: no React required.</b></p>
+
+  <p>Tailwind won. But building UIs with utility classes alone kinda sucks. Most Tailwind libraries like Flowbite, Preline, or even Tailwind UI ask you to copy walls of unreadable classes into your HTML. It works, but it's messy and hard to maintain.</p>
+
+  <p>shadcn/ui avoids that by wrapping everything in React components. It also gives you a killer design system, theme support, a CLI, and a growing ecosystem.</p>
+
+  <p>But maybe you're not using React. Maybe your app is built with plain HTML. Or Flask. Or Rails. Or Laravel. Or Django. Or whatever.</p>
+
+  <p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>
+
+  <ul>
+    <li><b>Lightweight</b>: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.</li>
+    <li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
+    <li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
+    <li><b>Accessible</b>: components follow accessibility best practices.</li>
+    <li><b>Dark mode ready</b>: respects your Tailwind config.</li>
+    <li><b>Extendable</b>: tweak styles with Tailwind or CSS variables.</li>
+    <li><b>Themable</b>: fully compatible with shadcn/ui themes.</li>
+    <li><b>Readable</b>: no class soup, just clean markup.</li>
+    <li><b>Free and open source</b>: MIT licensed.</li>
+  </ul>
+</div>
+
+<h2 id="how-it-works"><a href="#how-it-works">How it works</a></h2>
+
+<div class="prose">
+  <p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>form</code>, or <code>card</code>.</p>
+
+  <p>Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.</p>
+
+  <p>There's also a CLI to help you scaffold components and get set up fast.</p>
+
+  <p><a href="/docs/installation">Check out the installation guide</a> to get started.</p>
+</div>
+
+<h2 id="how-can-i-help"><a href="#how-can-i-help">How can I help?</a></h2>
+
+<div class="prose">
+  <p>Basecoat is 100% open source and free.</p>
+
+  <ul>
+    <li><a href="https://github.com/basecoat-ui/basecoat">Star it on GitHub</a></li>
+    <li><a href="https://github.com/basecoat-ui/basecoat/issues">Report bugs or request features</a></li>
+    <li><a href="https://github.com/basecoat-ui/basecoat/pulls">Submit a pull request</a></li>
+    <li><a href="https://github.com/sponsors/hunvreus">Sponsor the project</a></li>
+  </ul>
+</div>
\ No newline at end of file