From ce1771166e244cab6753aa44236700590a8562d0 Mon Sep 17 00:00:00 2001
From: Phil Miller <phil@dmno.dev>
Date: Wed, 25 Dec 2024 00:18:43 -0500
Subject: [PATCH] WIP new animated graph on homepage (#171)

* WIP new animated graph on homepage

* more WIP, remove what is and merge with docs home

* WIP: remove beta banner, add dynamic test component and use that on mobile

* more wip on homepage

* more polishing on homepage

* wrapping up new homepage

---------

Co-authored-by: Theo Ephraim <theo@dmno.dev>
---
 .../src/components/layout/HeaderBar.vue       |   1 -
 packages/docs-site/.eslintrc.cjs              |   5 +-
 packages/docs-site/astro.config.ts            |   4 -
 packages/docs-site/package.json               |   3 +-
 .../docs-site/{src => }/postcss.config.cjs    |   1 +
 packages/docs-site/public/_redirects          |   1 +
 .../docs-site/src/components/CTABlock.astro   | 164 ++++---
 .../components/CustomStarlightBanner.astro    |  32 +-
 .../components/CustomStarlightHeader.astro    |   6 +-
 .../docs-site/src/components/EmailSignup.vue  | 104 ++---
 packages/docs-site/src/components/Hero.astro  |  48 ++-
 .../src/components/LandingPageSection.astro   |  60 +--
 .../docs-site/src/components/LogoBar.astro    |  54 +++
 .../docs-site/src/components/ThemeSelect.vue  |  41 +-
 .../docs-site/src/components/TileButton.vue   | 178 ++++++++
 .../components/homepage/ConfigExample.astro   |   6 +
 .../components/homepage/IntegrationTile.vue   | 198 +++++++++
 .../components/homepage/IntegrationsHero.vue  | 236 ++++++++++
 .../src/components/homepage/config-example.ts |  36 ++
 .../src/components/layouts/LandingPage.astro  |  80 ++--
 .../src/components/mailerlite/SignUp.astro    |  18 -
 .../docs/docs/get-started/quickstart.mdx      |  25 +-
 .../src/pages/_drafts/docs-home.astro         | 404 ++++++++++++++++++
 packages/docs-site/src/pages/docs/index.astro | 371 +---------------
 packages/docs-site/src/pages/index.astro      | 146 +++----
 packages/docs-site/src/style/global.less      |  19 +-
 packages/docs-site/tsconfig.json              |   5 +-
 .../ui-lib/src/components/DmnoTileLogo.vue    |   2 +-
 packages/ui-lib/src/components/DotsLoader.vue |  21 +-
 pnpm-lock.yaml                                | 232 +++++-----
 30 files changed, 1600 insertions(+), 901 deletions(-)
 rename packages/docs-site/{src => }/postcss.config.cjs (76%)
 create mode 100644 packages/docs-site/src/components/LogoBar.astro
 create mode 100644 packages/docs-site/src/components/TileButton.vue
 create mode 100644 packages/docs-site/src/components/homepage/ConfigExample.astro
 create mode 100644 packages/docs-site/src/components/homepage/IntegrationTile.vue
 create mode 100644 packages/docs-site/src/components/homepage/IntegrationsHero.vue
 create mode 100644 packages/docs-site/src/components/homepage/config-example.ts
 delete mode 100644 packages/docs-site/src/components/mailerlite/SignUp.astro
 create mode 100644 packages/docs-site/src/pages/_drafts/docs-home.astro

diff --git a/packages/dev-ui/src/components/layout/HeaderBar.vue b/packages/dev-ui/src/components/layout/HeaderBar.vue
index c9a2df7f..705a058c 100644
--- a/packages/dev-ui/src/components/layout/HeaderBar.vue
+++ b/packages/dev-ui/src/components/layout/HeaderBar.vue
@@ -23,7 +23,6 @@ import ThemeToggle from './ThemeToggle.vue';
 <style scoped>
 #header-bar {
   grid-area: header;
-  background: black;
   color: white;
   padding: 6px 8px;
   background: #2a2a2a;
diff --git a/packages/docs-site/.eslintrc.cjs b/packages/docs-site/.eslintrc.cjs
index 3b4674ef..9f83d5a2 100644
--- a/packages/docs-site/.eslintrc.cjs
+++ b/packages/docs-site/.eslintrc.cjs
@@ -6,7 +6,10 @@ module.exports = {
       extends: ["@dmno/eslint-config/base"],
     },
     {
-      // Define the configuration for `.astro` file.
+      files: ["**/*.vue"],
+      extends: ["@dmno/eslint-config/vue"],
+    },
+    {
       files: ["**/*.astro"],
       extends: ["plugin:astro/recommended"],
       // Allows Astro components to be parsed.
diff --git a/packages/docs-site/astro.config.ts b/packages/docs-site/astro.config.ts
index cea40c88..08374283 100644
--- a/packages/docs-site/astro.config.ts
+++ b/packages/docs-site/astro.config.ts
@@ -109,10 +109,6 @@ export default defineConfig({
         {
           label: 'Get Started',
           items: [
-            {
-              label: 'What is DMNO?',
-              link: '/docs/get-started/what-is-dmno/',
-            },
             {
               label: 'Quickstart',
               link: '/docs/get-started/quickstart/',
diff --git a/packages/docs-site/package.json b/packages/docs-site/package.json
index 71aa6dc7..201c5cdc 100644
--- a/packages/docs-site/package.json
+++ b/packages/docs-site/package.json
@@ -36,10 +36,11 @@
     "astro-robots-txt": "^1.0.0",
     "astro-sitemap": "^1.0.0",
     "dmno": "workspace:*",
-    "eslint-plugin-astro": "^1.2.2",
+    "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-mdx": "^3.1.5",
     "less": "^4.2.0",
     "nanostores": "^0.10.3",
+    "postcss-nested": "^7.0.2",
     "sharp": "^0.33.4",
     "starlight-blog": "^0.11.1",
     "starlight-links-validator": "^0.10.1",
diff --git a/packages/docs-site/src/postcss.config.cjs b/packages/docs-site/postcss.config.cjs
similarity index 76%
rename from packages/docs-site/src/postcss.config.cjs
rename to packages/docs-site/postcss.config.cjs
index aa25085f..ee7d634c 100644
--- a/packages/docs-site/src/postcss.config.cjs
+++ b/packages/docs-site/postcss.config.cjs
@@ -2,5 +2,6 @@ module.exports = {
   plugins: [
     // require('autoprefixer'),
     // require('cssnano'),
+    require('postcss-nested'),
   ],
 };
diff --git a/packages/docs-site/public/_redirects b/packages/docs-site/public/_redirects
index e69de29b..2ba047cf 100644
--- a/packages/docs-site/public/_redirects
+++ b/packages/docs-site/public/_redirects
@@ -0,0 +1 @@
+/docs/ /docs/get-started/quickstart/
diff --git a/packages/docs-site/src/components/CTABlock.astro b/packages/docs-site/src/components/CTABlock.astro
index 3eb61f5a..b6d03fd6 100644
--- a/packages/docs-site/src/components/CTABlock.astro
+++ b/packages/docs-site/src/components/CTABlock.astro
@@ -1,5 +1,7 @@
 ---
-import DIcon from '@/components/DIcon.astro';
+import DIcon from "@/components/DIcon.astro";
+import TileButton from "@/components/TileButton.vue";
+
 interface Props {
   text?: string;
   href?: string;
@@ -7,23 +9,36 @@ interface Props {
 }
 
 const { text, href, command } = Astro.props as Props;
-
 ---
 
 <div class="cta-block">
-  { href && text && 
-    <a href={href} class="button">{text}</a>
-  }
-  {command && 
-    <div class="install-command">
-      <DIcon name="console" />
-      <div>{command}</div>
-      <DIcon name={['copy', 'check']} class="install-command__copy" />
-    </div>
+  {href && text && <TileButton href={href}>{text}</TileButton>}
+  {
+    command && (
+      <div class="install-command">
+        <DIcon name="console" />
+        <div>{command}</div>
+        <DIcon name={["copy", "check"]} class="install-command__copy" />
+      </div>
+    )
   }
 </div>
 
 <style lang="less">
+  @property --spin-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: true;
+  }
+  @keyframes spin {
+    0% {
+      --spin-angle: 0deg;
+    }
+    100% {
+      --spin-angle: 360deg;
+    }
+  }
+
   .cta-block {
     display: flex;
     flex-wrap: wrap;
@@ -31,83 +46,61 @@ const { text, href, command } = Astro.props as Props;
     justify-content: center;
     gap: 1rem;
 
-
     @media (min-width: 50rem) {
       flex-direction: row;
       gap: 2rem;
     }
-    
-  }
-
-  a.button {
-
-    @property --spin {
-      syntax: '<angle>';
-      initial-value: 35deg;
-      inherits: false;
-    }
-
-    background: linear-gradient(var(--spin), var(--brand-purple) 0%, var(--brand-red) 100%);
-    color: var(--brand-white);
-    
-    font-size: 18px;
-    height: 48px;
-    border-radius: 50px;
-    padding: 0px 2rem;
-    align-content: center;
-    font-weight: bold;
-    text-wrap: nowrap;
-    text-decoration: none;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-;
-    &:hover {
-      background: linear-gradient(var(--spin), var(--brand-pink) 0%, var(--brand-pink) 100%);
-      background: var(--brand-pink);
-
-    }
-    &:hover {
-      transform: translate3d(-2px, -2px, 0);
-      background: var(--brand-pink);
-      box-shadow: 2px 2px 0 var(--tile-drop-shadow);
-    }
-    &:focus {
-      outline: 1px solid var(--brand-pink);
-    }
-    &:active {
-      transform: translate3d(0, 0, 0);
-      box-shadow: none;
-    }
   }
-      
 
   .install-command {
     display: flex;
     font-size: 18px;
     height: 48px;
-    border: 2px solid var(--brand-pink);
+    border: 1px solid var(--brand-pink);
+
     align-items: center;
     padding-right: 64px;
     font-weight: bold;
     background: black;
     position: relative;
-    html[data-theme='light'] & {
-      background: rgba(0,0,0,.2);
-      background: var(--brand-cyan--t2);
-      color: black;
-    }
-
     font-family: var(--code-font);
     text-wrap: nowrap;
 
-    --border-gradient-color-1: var(--brand-green);
-    --border-gradient-color-2: var(--brand-cyan);
-    border: 2px solid var(--border-gradient-color-1);
-    border-image-source: linear-gradient(90deg, var(--border-gradient-color-1), var(--border-gradient-color-2));
+    --glow-color: var(--brand-yellow);
+    animation: spin 5s linear infinite;
+    html[data-theme="light"] & {
+      // background: rgba(0, 0, 0, 0.2);
+      background: color-mix(in oklab, var(--brand-cyan) 10%, white);
+      color: black;
+      --glow-color: var(--brand-cyan);
+    }
+
+    border: 1px solid var(--brand-green);
+    border-image-source: conic-gradient(
+      from calc(var(--spin-angle) + 180deg),
+      var(--glow-color) 0deg,
+      var(--brand-green) 45deg,
+      var(--brand-green) 315deg,
+      var(--glow-color) 360deg
+    );
     border-image-slice: 1;
-    
+
+    // glow
+    &:before {
+      content: "";
+      inset: 0;
+      position: absolute;
+      background: red;
+      z-index: -1;
+      filter: blur(3px);
+      background: conic-gradient(
+        from var(--spin-angle),
+        var(--glow-color) 0deg,
+        transparent 45deg,
+        transparent 315deg,
+        var(--glow-color) 360deg
+      );
+    }
 
     :global(.d-icon) {
       height: 44px;
@@ -119,7 +112,7 @@ const { text, href, command } = Astro.props as Props;
         width: 36px;
         padding: 8px;
       }
-      
+
       // copy icon
       &:last-child {
         position: absolute;
@@ -134,23 +127,26 @@ const { text, href, command } = Astro.props as Props;
     }
     .install-command__copy.--success {
       color: var(--brand-green) !important;
-      :global(svg:nth-child(1)) { display: none; }
-      :global(svg:nth-child(2)) { display: block; }          
+      :global(svg:nth-child(1)) {
+        display: none;
+      }
+      :global(svg:nth-child(2)) {
+        display: block;
+      }
     }
-    
-
   }
 </style>
 
 <script>
-  document.querySelector('.install-command__copy')?.addEventListener('click', async (e) => {
-    await navigator.clipboard.writeText('npx dmno init');
-    if (e.target instanceof Element) {
-      e.target.classList.add('--success');
-      setTimeout(() => {
-        (e.target as Element).classList.remove('--success');
-      }, 2000);
-    }
-  });
+  document
+    .querySelector(".install-command__copy")
+    ?.addEventListener("click", async (e) => {
+      await navigator.clipboard.writeText("npx dmno init");
+      if (e.target instanceof Element) {
+        e.target.classList.add("--success");
+        setTimeout(() => {
+          (e.target as Element).classList.remove("--success");
+        }, 2000);
+      }
+    });
 </script>
-
diff --git a/packages/docs-site/src/components/CustomStarlightBanner.astro b/packages/docs-site/src/components/CustomStarlightBanner.astro
index 47845ccf..385c99a1 100644
--- a/packages/docs-site/src/components/CustomStarlightBanner.astro
+++ b/packages/docs-site/src/components/CustomStarlightBanner.astro
@@ -8,26 +8,24 @@ const showDefaultBanner =
   Astro.url.pathname.startsWith("/docs/") &&
   !["/docs/"].includes(Astro.url.pathname);
 ---
-{ (banner || showDefaultBanner) &&
-<div class="sl-banner__wrap">
-  <div class="sl-banner__wrap-inner">
-    {banner && <div class="sl-banner" set:html={banner.content} />}
-    {
-      showDefaultBanner && (
-        <>
-          <div class="sl-banner caution">
-            🚧 DMNO is still in beta! Use with caution!
-          </div>
+
+{
+  (banner || showDefaultBanner) && (
+    <div class="sl-banner__wrap">
+      <div class="sl-banner__wrap-inner">
+        {banner && <div class="sl-banner" set:html={banner.content} />}
+        {showDefaultBanner && (
           <div class="sl-banner info richtext">
             ✨ If you've tried DMNO or looked through the docs,{" "}
-            <a href="https://forms.gle/AfM99kTJ9p1c25g86" target="_blank">let us know</a>
+            <a href="https://forms.gle/AfM99kTJ9p1c25g86" target="_blank">
+              let us know
+            </a>
             what you think!
           </div>
-        </>
-      )
-    }
-  </div>
-</div>
+        )}
+      </div>
+    </div>
+  )
 }
 
 <style lang="less">
@@ -73,7 +71,7 @@ const showDefaultBanner =
     color: var(--color-text-full-shade);
   }
   .sl-banner.info {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     background: linear-gradient(
       45deg,
       var(--brand-blue--t2) 0%,
diff --git a/packages/docs-site/src/components/CustomStarlightHeader.astro b/packages/docs-site/src/components/CustomStarlightHeader.astro
index f308e941..c7469f56 100644
--- a/packages/docs-site/src/components/CustomStarlightHeader.astro
+++ b/packages/docs-site/src/components/CustomStarlightHeader.astro
@@ -44,7 +44,7 @@ const shouldRenderSearch = !isTopLevel;
       <span class="logo-font logo-dmno-text"> DMNO </span>
     </a>
   </div>
-  
+
   <HeaderNav />
   <!-- {isTopLevel ? 
     <HeaderNavMarketing
@@ -53,7 +53,7 @@ const shouldRenderSearch = !isTopLevel;
     <HeaderNav />
   } -->
 
-  {shouldRenderSearch ? <Search {...Astro.props} /> : <div/>}
+  {shouldRenderSearch ? <Search {...Astro.props} /> : <div />}
   <div class="sl-hidden md:sl-flex right-group">
     <SocialIcons />
     <ThemeSelect client:load />
@@ -156,7 +156,7 @@ const shouldRenderSearch = !isTopLevel;
   }
 
   .right-group {
-    justify-content: right ;
+    justify-content: right;
   }
   .header :global(.social-icons::after) {
     content: "";
diff --git a/packages/docs-site/src/components/EmailSignup.vue b/packages/docs-site/src/components/EmailSignup.vue
index 3b320d82..ecd8dba6 100644
--- a/packages/docs-site/src/components/EmailSignup.vue
+++ b/packages/docs-site/src/components/EmailSignup.vue
@@ -1,23 +1,24 @@
 <template>
-  
+
   <div class="footer-connect">
-    <h4>We need <span class="gradient-text">YOU</span> to help shape the future of DMNO!</h4>
+    <h4>We need <strong>YOU</strong> to help shape the future of DMNO!</h4>
     <div class="footer-connect__wrap">
       <div class="footer-connect__email">
         <div>Sign up for our email list</div>
         <form @submit.prevent="onSubmit">
           <input v-if="isSubmitting" placeholder="Sending..." />
           <template v-else>
-            <input type="text" v-model="email" :placeholder="emailSubmitted ? 'Thanks!' : 'Your email'" />
-            <a href="#" @click.prevent="onSubmit" class="button" v-html="ArrowIconSvg">
-            </a>
+            <input v-model="email" type="text" :placeholder="emailSubmitted ? 'Thanks!' : 'Your email'" />
+            <TileButton size="s" @click.prevent="onSubmit"><Icon icon="ion:ios-paper-plane" /></TileButton>
           </template>
-          
+
         </form>
       </div>
       <div class="footer-connect__discord">
         <div>Come chat with us</div>
-        <a class="button" :href="DISCORD_URL" target="_blank">Join our Discord!</a>
+        <div>
+          <TileButton :href="DISCORD_URL" target="_blank">Join our Discord!</TileButton>
+        </div>
       </div>
     </div>
   </div>
@@ -25,7 +26,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import ArrowIconSvg from "~icons/ion/ios-paper-plane?raw";
+import { Icon } from '@iconify/vue';
+import TileButton from './TileButton.vue';
 
 const DISCORD_URL = DMNO_PUBLIC_CONFIG.DISCORD_JOIN_URL;
 
@@ -66,42 +68,39 @@ async function onSubmit() {
 
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .footer-connect {
   border-radius: 8px;
-  margin-top: 2rem;
-  // border: 1px solid var(--brand-white);
-
-  // border-image-source: linear-gradient(30deg, var(--brand-purple), var(--brand-cyan));
-  // border-image-slice: 1;
-
-  // border-color: var(--brand-cyan);
-  background: black;
+  margin-top: 1rem;
+  border: 1px solid var(--brand-pink);
+  background: var(--brand-pink--t2);
 
-  // background: linear-gradient(35deg, var(--brand-blue--dark) 0%, var(--brand-cyan--dark) 100%);
-  
   html[data-theme='light'] & {
-    border: 1px solid black;
-    background: white;
-    color: black;
   }
 
-  color:white;
   padding: 1rem;
   font-size: 14px;
-  
+
+  h4 strong {
+    color: var(--brand-pink);
+  }
 
   .footer-connect__wrap {
     display: grid;
     gap: 1rem;
+
+    // label
+    > div > div:first-child {
+      padding-bottom: .5rem;
+    }
+
     @media (min-width: 50rem) {
       grid-template-columns: 1fr 1fr;
       gap: 2rem;
 
-
-      
       > div {
         position: relative;
+
         &:before {
           content: '';
           position: absolute;
@@ -118,16 +117,12 @@ async function onSubmit() {
     }
   }
 
-  
+
   h4 {
     font-size: 1.3rem;
     text-align: center;
     margin-bottom: 1rem;
   }
-  
-  a.button, input {
-    margin-top: .5rem;
-  }
 
   input {
     border: 1px solid white;
@@ -136,7 +131,7 @@ async function onSubmit() {
     padding: .5rem 1rem;
     display: block;
     width: 100%;
-    
+
     &:focus {
       border-color: var(--brand-pink);
       outline: none;
@@ -153,56 +148,15 @@ async function onSubmit() {
 
   .footer-connect__email {
     position: relative;
-    a.button {
+    .tile-button {
       position: absolute;
       right: 0;
       bottom: 0;
       margin-right: 6px;
       margin-bottom: 6px;
-      // padding: 0 8px;
-      width: auto;
       height: 26px;
-      border-radius: 2px;
-      display: flex;
-      align-items: center;
-      >svg {
-        display: block;
-        width: inherit;
-        height: inherit;
-        padding: 4px;
-        // margin-left: -1px;
-      }
+      width: 26px;
     }
   }
-
-  a.button {
-    // border: 1px solid var(--brand-purple);
-    background: linear-gradient(35deg, var(--brand-cyan) 0%, var(--brand-purple) 100%);
-    // background: var(--brand-purple);
-    // border: 1px solid var(--brand-pink);
-    border-radius: 4px;
-    display: block;
-    width: 100%;
-    // height: 40px;
-    text-decoration: none;
-    text-align: center;
-    color: white;
-    font-weight: bold;
-    padding: 8px 0;
-    &:hover {
-      transform: translate3d(-2px, -2px, 0);
-      // border-color: var(--brand-pink);
-      background: var(--brand-pink);
-      box-shadow: 2px 2px 0 var(--tile-drop-shadow);
-    }
-    &:focus {
-      outline: 1px solid var(--brand-pink);
-    }
-    &:active {
-      transform: translate3d(0, 0, 0);
-      box-shadow: none;
-    }
-  }
-
 }
 </style>
diff --git a/packages/docs-site/src/components/Hero.astro b/packages/docs-site/src/components/Hero.astro
index f7984ab8..76a74f0f 100644
--- a/packages/docs-site/src/components/Hero.astro
+++ b/packages/docs-site/src/components/Hero.astro
@@ -1,6 +1,5 @@
 ---
-
-interface Props{
+interface Props {
   heading?: string;
   subheading?: string;
   image?: string;
@@ -12,28 +11,29 @@ const { heading, subheading } = Astro.props as Props;
 <div class="hero">
   <h1><slot name="heading">{heading}</slot></h1>
   <h2><slot name="subheading">{subheading}</slot></h2>
+  <slot />
 </div>
 
 <style>
   .hero {
     color: var(--color-text-full-shade);
     padding-bottom: 2rem;
-    padding: 3rem  2rem;
+    padding: 3rem 2rem;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    @container (max-width: 800px) { 
+    gap: 0.5rem;
+    text-align: center;
+    @container (max-width: 800px) {
       padding: 2rem 0rem;
     }
-    
+
     .hero__logo {
       display: flex;
       position: relative;
       align-items: center;
-      
+
       :global(.dmno-tile-logo) {
         max-width: 50vw;
-        
       }
     }
     .hero__text {
@@ -41,33 +41,51 @@ const { heading, subheading } = Astro.props as Props;
     }
 
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       z-index: -1;
       top: 0;
       bottom: 50%;
       left: 0%;
       right: 0;
-      opacity: .2; 
+      opacity: 0.2;
     }
   }
   h1 {
-    font-size: 1.6rem;
-    line-height: 1.3em;
+    font-size: 2rem;
+    line-height: 1em;
+    /* the "g" masking is cut off without some padding */
+    padding-bottom: 0.1em;
+
+    --color-one: var(--brand-pink--text);
+    --color-two: var(--brand-purple--text);
+
+    background-color: var(--color-two);
+    background: linear-gradient(
+      180deg,
+      var(--color-one) 10%,
+      var(--color-two) 90%
+    );
+    background-clip: text;
+    color: transparent;
+
     @media (min-width: 50rem) {
-      font-size: 4rem;
+      font-size: 3.2rem;
       display: block;
       line-height: 1em;
     }
-    
+    @media (min-width: 72rem) {
+      font-size: 3.6rem;
+    }
   }
   h2 {
     font-size: 1.2rem;
     line-height: 1.4em;
     font-weight: 500;
+    margin-bottom: 2rem;
+    font-weight: bold;
     @media (min-width: 50rem) {
       font-size: 1.5rem;
     }
-    
   }
 </style>
diff --git a/packages/docs-site/src/components/LandingPageSection.astro b/packages/docs-site/src/components/LandingPageSection.astro
index 47b0dcaa..f869cb64 100644
--- a/packages/docs-site/src/components/LandingPageSection.astro
+++ b/packages/docs-site/src/components/LandingPageSection.astro
@@ -1,41 +1,45 @@
 ---
-import CTABlock from './CTABlock.astro';
+import CTABlock from "./CTABlock.astro";
 
 interface Props {
-  title?: string,
-  imgPath?: string,
-  imgAlt?: string,
-  imgDescription?: string,
-  ctaLink?: string,
-  ctaText?: string,
+  title?: string;
+  imgPath?: string;
+  imgAlt?: string;
+  imgDescription?: string;
+  ctaLink?: string;
+  ctaText?: string;
+  subheader?: string;
 }
-const { title, imgPath, imgAlt, imgDescription, ctaLink } = Astro.props as Props;
+const { title, imgPath, imgAlt, imgDescription, ctaLink, subheader } =
+  Astro.props as Props;
 ---
 
 <section class="feature-block">
-  { title && <h2>{title}</h2> }
-  { imgPath && <figure>
-    <img src={imgPath} alt={imgAlt}>
-    <figcaption class="description">{imgDescription}</figcaption>
-  </figure>}
-  
+  {title && <h2>{title}</h2>}
+  {subheader && <h3>{subheader}</h3>}
+  {
+    imgPath && (
+      <figure>
+        <img src={imgPath} alt={imgAlt} />
+        <figcaption class="description">{imgDescription}</figcaption>
+      </figure>
+    )
+  }
+
   <slot />
-  
-  { ctaLink && <CTABlock
-    text="Read more ->"
-    href={ctaLink}
-  />}
+
+  {ctaLink && <CTABlock text="Read more ->" href={ctaLink} />}
 </section>
 
 <style>
-.feature-block {
-  padding: 3rem  2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  
-  @container (max-width: 800px) { 
-    padding: 2rem 0rem;
+  .feature-block {
+    padding: 3rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @container (max-width: 800px) {
+      padding: 2rem 0rem;
+    }
   }
-}
 </style>
diff --git a/packages/docs-site/src/components/LogoBar.astro b/packages/docs-site/src/components/LogoBar.astro
new file mode 100644
index 00000000..bcc5c43c
--- /dev/null
+++ b/packages/docs-site/src/components/LogoBar.astro
@@ -0,0 +1,54 @@
+---
+
+---
+
+<div class="logo-bar">
+  <slot />
+</div>
+
+<style>
+  .logo-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    html[data-theme="light"] & {
+      color: black;
+    }
+
+    gap: 20px;
+    --logo-size: 50px;
+    @media (min-width: 50rem) {
+      gap: 30px;
+      --logo-size: 65px;
+    }
+
+    /* @media (min-width: 72rem) {
+      gap: 40px;
+    }
+
+    @media (min-width: 100rem) {
+      grid-template-columns: 4fr 5fr;
+    } */
+
+    :global(> div),
+    :global(> a) {
+      color: currentColor;
+      /* background: red; */
+      :global(> svg) {
+        display: block;
+        height: auto;
+        max-height: var(--logo-size);
+        min-width: var(--logo-size);
+        filter: saturate(80%);
+
+        &:hover {
+          filter: saturate(100%);
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/docs-site/src/components/ThemeSelect.vue b/packages/docs-site/src/components/ThemeSelect.vue
index d3058c5d..3796bcc4 100644
--- a/packages/docs-site/src/components/ThemeSelect.vue
+++ b/packages/docs-site/src/components/ThemeSelect.vue
@@ -1,6 +1,7 @@
 
 <template>
   <div class="theme-select" @click="toggleTheme">
+    <div class="theme-select__shadow" />
     <div class="theme-select__inner">
       <div class="theme-select__dark">
         <div v-html="MoonIcon" />
@@ -14,14 +15,14 @@
 
 <script setup lang="ts">
 // @ts-ignore
-import SunIcon from "~icons/material-symbols/light-mode?raw";
+import SunIcon from '~icons/material-symbols/light-mode?raw';
 // @ts-ignore
-import MoonIcon from "~icons/material-symbols/dark-mode?raw";
+import MoonIcon from '~icons/material-symbols/dark-mode?raw';
 
 function toggleTheme() {
   const currentTheme = document.documentElement.dataset.theme;
   const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-  localStorage.setItem('starlight-theme', newTheme); 
+  localStorage.setItem('starlight-theme', newTheme);
   document.documentElement.dataset.theme = newTheme;
 }
 </script>
@@ -41,30 +42,21 @@ function toggleTheme() {
     position: absolute;
   }
 
-  --hover-offset: -2px;
+  --hover-offset-x: 2px;
+  --hover-offset-y: 2px;
 
   html[data-theme="light"] & {
-    --hover-offset: 2px; // have to reverse because of 3d flip
+    --hover-offset-x: -2px; // have to reverse because of 3d flip
   }
 
   &:hover {
     .theme-select__inner {
       > div {
-        margin-top: -2px;
-        margin-left: var(--hover-offset);
-        box-shadow: 2px 2px 0px var(--tile-drop-shadow);
+        margin-left: var(--hover-offset-x);
+        margin-top: var(--hover-offset-y);
       }
     }
   }
-  // &:active {
-  //   .theme-select__inner {
-  //     > div {
-  //       margin-top: 0px;
-  //       margin-left: 0;
-  //       box-shadow: none;
-  //     }
-  //   }
-  // }
 }
 
 .theme-select__inner {
@@ -84,6 +76,21 @@ function toggleTheme() {
   }
 }
 
+.theme-select__shadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #999;
+  top: 0;
+  left: 0;
+  border-radius: 4px;
+  transition: transform 0.25s;
+  transform-style: preserve-3d;
+  html[data-theme="light"] & {
+    transform: rotateY(180deg);
+  }
+}
+
 .theme-select__dark, .theme-select__light {
   height: 100%;
   width: 100%;
diff --git a/packages/docs-site/src/components/TileButton.vue b/packages/docs-site/src/components/TileButton.vue
new file mode 100644
index 00000000..d6ae1e26
--- /dev/null
+++ b/packages/docs-site/src/components/TileButton.vue
@@ -0,0 +1,178 @@
+<template lang="pug">
+a.tile-button(
+  :class="computedClasses"
+  :href="href"
+  @mouseenter="$emit('hover:start')"
+  @mouseleave="$emit('hover:end')"
+  @click="(e) => emit('click', e)"
+)
+  .tile-button__shadow
+  .tile-button__back
+  .tile-button__front
+    //- .tile-button__icon
+      //- Icon(:icon="info.icon" class="icon" :style="{ color: info.color }")
+    .tile-button__label
+      slot {{ label }}
+
+
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+} from 'vue';
+
+const { size = 'm' } = defineProps<{
+  label?: string;
+  href?: string;
+  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl'
+}>();
+
+
+const emit = defineEmits(['click']);
+
+const computedClasses = computed(() => ({
+  [`--size-${size}`]: true,
+}));
+
+</script>
+
+<style scoped>
+
+@property --tile-thickness {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+.tile-button {
+
+  --tile-edge-color: #EEE;
+  html[data-theme="light"] & {
+    --tile-edge-color: #222;
+  }
+
+  --full-tile-thickness: 4px;
+
+  &.--size-xs {
+    --padding-y: 2px;
+    --padding-x: 2px;
+    --tile-radius: 3px;
+    --full-tile-thickness: 2px;
+  }
+  &.--size-s {
+    --padding-y: 2px;
+    --padding-x: 4px;
+    --tile-radius: 4px;
+    --full-tile-thickness: 3px;
+  }
+  &.--size-m {
+    --padding-y: 7px;
+    --padding-x: 12px;
+    --tile-radius: 6px;
+  }
+  &.--size-l {
+    --padding-y: 6px;
+    --padding-x: 16px;
+    --tile-radius: 6px;
+  }
+  &.--size-xl {
+    --padding-y: 8px;
+    --padding-x: 22px;
+    --tile-radius: 8px;
+  }
+  &.--size-2xl {
+    --padding-y: 10px;
+    --padding-x: 26px;
+    --tile-radius: 10px;
+  }
+
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: bold;
+  position: relative;
+
+  /* slower slide back in */
+  transition: --tile-thickness .6s cubic-bezier(.3, .7, .4, 1);
+
+  will-change: transform;
+  outline-offset: 4px;
+  display: grid;
+
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+
+  &:hover, &:focus {
+    --tile-thickness: var(--full-tile-thickness);
+    /* slide out more quickly, with some bounce */
+    transition: --tile-thickness .25s cubic-bezier(.3, .7, .4, 1.5);
+  }
+  &:active {
+    --tile-thickness: 2px !important;
+    transition: --tile-thickness 34ms;
+  }
+}
+
+.tile-button__front {
+  background: var(--brand-purple);
+  border-radius: var(--tile-radius);
+  z-index: 3;
+  border: 1px solid var(--tile-edge-color);
+  transform: translate(var(--tile-thickness), var(--tile-thickness));
+  padding: var(--padding-y) var(--padding-x);
+  color: white;
+  position: relative;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+}
+.tile-button__back {
+  border-radius: var(--tile-radius);
+  background: #888;
+  position: absolute;
+  will-change: transform;
+  inset: 0;
+  z-index: 2;
+  border: 1px solid var(--tile-edge-color);
+
+  /* 3d top face */
+  &:before {
+    content: '';
+    left: calc(var(--tile-thickness) + var(--tile-radius) / 2);
+    right: calc(-.25 * var(--tile-thickness));
+    height: calc(var(--tile-thickness));
+    border-top-right-radius: 2px;
+    position: absolute;
+    transform: skewX(45deg);
+    background: #AAA;
+    border-right: 1px solid var(--tile-edge-color);
+  }
+  /* 3d left face */
+  &:after {
+    content: '';
+    top: calc(var(--tile-thickness) + var(--tile-radius) / 2);
+    bottom: calc(-.25 * var(--tile-thickness));
+    width: calc(var(--tile-thickness));
+    border-bottom-left-radius: 2px;
+    background: var(--tile-shadow-color);
+    background: #555;
+    position: absolute;
+    transform: skewY(45deg);
+    border-bottom: 1px solid var(--tile-edge-color);
+  }
+}
+.tile-button__shadow {
+  height: calc(1.1 * var(--tile-thickness));
+  position: absolute;
+  bottom: 1px;
+  left: calc(var(--tile-radius)/4);
+  right: calc(var(--tile-thickness)/2);
+  box-shadow: calc(-2.5 * var(--tile-thickness)) calc(1 * var(--tile-thickness)) var(--tile-thickness) rgba(0,0,0,.3);
+  transform:
+    translate(var(--tile-thickness), var(--tile-thickness))
+    skewX(45deg);
+  z-index: 1;
+}
+</style>
diff --git a/packages/docs-site/src/components/homepage/ConfigExample.astro b/packages/docs-site/src/components/homepage/ConfigExample.astro
new file mode 100644
index 00000000..e71944ca
--- /dev/null
+++ b/packages/docs-site/src/components/homepage/ConfigExample.astro
@@ -0,0 +1,6 @@
+---
+import { Code } from "@astrojs/starlight/components";
+import code2 from "./config-example.ts?raw";
+---
+
+<Code code={code2} lang="ts" title=".dmno/config.mts - sample config file" />
diff --git a/packages/docs-site/src/components/homepage/IntegrationTile.vue b/packages/docs-site/src/components/homepage/IntegrationTile.vue
new file mode 100644
index 00000000..cb997cdd
--- /dev/null
+++ b/packages/docs-site/src/components/homepage/IntegrationTile.vue
@@ -0,0 +1,198 @@
+<template lang="pug">
+  a.icon-graph-tile(
+    :class="computedClasses" :href="info.docsHref"
+    @mouseenter="$emit('hover:start')"
+    @mouseleave="$emit('hover:end')"
+  )
+    .icon-graph-tile__shadow
+    .icon-graph-tile__back
+    .icon-graph-tile__front
+      .icon-graph-tile__line
+      .icon-graph-tile__icon
+        Icon(:icon="info.icon" class="icon" :style="{ color: info.color }")
+      .icon-graph-tile__dot-wrap
+        DotsLoader(:start-at="dotNumber")
+        //- .icon-graph-tile__dot
+
+</template>
+
+<script setup lang="ts">
+import {
+  ref, onMounted, onUnmounted, computed,
+} from 'vue';
+import { Icon } from '@iconify/vue';
+import { DotsLoader } from '@dmno/ui-lib';
+
+const props = defineProps<{
+  info: {
+    icon: string;
+    label: string;
+    docsHref: string;
+    color?: string;
+  }
+  dotsPosition?: 'left' | 'right' | 'top' | 'bottom'
+  dotNumber?: Number,
+}>();
+
+const computedClasses = computed(() => ({
+  [`--dots-${props.dotsPosition || 'right'}`]: true,
+}));
+
+</script>
+
+<style scoped>
+.icon-graph-tile {
+  --tile-radius: calc(.05 * var(--tile-width));
+  --tile-thickness: calc(.04 * var(--tile-width));
+  --tile-edge-color: #555;
+
+  width: var(--tile-width);
+  height: calc(var(--tile-width) / 2);
+  position: relative;
+
+  &:hover {
+    --tile-edge-color: var(--accent-color, black);
+    transform: scale(1.03);
+  }
+
+  &.--dots-left, &.--dots-right {
+    width: var(--tile-width);
+    height: calc(var(--tile-width) / 2);
+    grid-template-columns: 1fr 1fr;
+  }
+  &.--dots-top, &.--dots-bottom {
+    height: var(--tile-width);
+    width: calc(var(--tile-width) / 2);
+    grid-template-rows: 1fr 1fr;
+
+    .icon-graph-tile__line {
+      width: 80%;
+      height: 1px;
+      left: 10%;
+      top: 50%;
+    }
+
+  }
+
+  &.--dots-left .icon-graph-tile__front {
+    grid-template-areas: "dots icon";
+  }
+  &.--dots-right .icon-graph-tile__front {
+    grid-template-areas: "icon dots";
+  }
+  &.--dots-top .icon-graph-tile__front {
+    grid-template-areas: "dots" "icon";
+  }
+  &.--dots-bottom .icon-graph-tile__front {
+    grid-template-areas: "icon" "dots";
+  }
+}
+
+.icon-graph-tile__front {
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  background: #FFF;
+  color: black;
+  z-index: 3;
+  display: grid;
+  position: relative;
+  border-radius: var(--tile-radius);
+  grid-template-columns: 1fr 1fr;
+  /* box-shadow: -2px -2px 10px rgba(0,0,0,.4); */
+  border: 1px solid #111;
+  border: 1px solid var(--tile-edge-color);
+}
+.icon-graph-tile__back {
+  /* rounded corner 3d color */
+  background: #CCC;
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  margin-left: calc(-1 * var(--tile-thickness));
+  margin-top: calc(-1 * var(--tile-thickness));
+  z-index: 2;
+  border: 1px solid var(--tile-edge-color);
+  border-radius: var(--tile-radius);
+  border-top-right-radius: calc(1.5 * var(--tile-radius));
+  border-bottom-left-radius: calc(1.5 * var(--tile-radius));
+
+  /* 3d top face */
+  &:before {
+    content: '';
+    background: #FFF;
+    top: -1px;
+    left: calc(1.5 * var(--tile-thickness));
+    right: calc(-.25 * var(--tile-thickness));
+    height: calc(1.5 * var(--tile-thickness));
+    border-top-right-radius: 2px;
+    position: absolute;
+    transform: skewX(45deg);
+    border-right: 1px solid var(--tile-edge-color);
+    border-top: 1px solid var(--tile-edge-color);
+  }
+  /* 3d left face */
+  &:after {
+    content: '';
+    background: #999;
+    left: -1px;
+    top: calc(1.5 * var(--tile-thickness));
+    bottom: calc(-.25 * var(--tile-thickness));
+    width: calc(1.5 * var(--tile-thickness));
+    border-bottom-left-radius: 2px;
+    position: absolute;
+    transform: skewY(45deg);
+    border-bottom: 1px solid var(--tile-edge-color);
+    border-left: 1px solid var(--tile-edge-color);
+  }
+}
+.icon-graph-tile__shadow {
+  height: calc(1.1 * var(--tile-thickness));
+  position: absolute;
+  bottom: 1px;
+  left: calc(var(--tile-radius)/4);
+  right: calc(var(--tile-thickness) / 2);
+  box-shadow: calc(-.07 * var(--tile-width)) 1px 4px rgba(0,0,0,.6);
+  transform: skewX(45deg);
+  z-index: 1;
+}
+
+
+.icon-graph-tile__line {
+  position: absolute;
+  height: 80%;
+  width: 1px;
+  background: black;
+  left: 50%;
+  top: 10%;
+  opacity: .5;
+}
+.icon-graph-tile__icon {
+  grid-area: icon;
+  height: 100%;
+  display: block;
+  padding: 15%;
+  svg {
+    color: currentColor;
+    height: 100%;
+    width: 100%;
+  }
+}
+.icon-graph-tile__dot-wrap {
+  grid-area: dots;
+  padding: 10%;
+  /* display: grid;
+  align-items: center;
+  justify-content: center; */
+  position: relative;
+}
+.icon-graph-tile__dot {
+  width: 10px;
+  height: 10px;
+  /* border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%; */
+  border-radius: 50%;
+  background: currentColor;
+  opacity: .8
+}
+</style>
diff --git a/packages/docs-site/src/components/homepage/IntegrationsHero.vue b/packages/docs-site/src/components/homepage/IntegrationsHero.vue
new file mode 100644
index 00000000..cef7b8d4
--- /dev/null
+++ b/packages/docs-site/src/components/homepage/IntegrationsHero.vue
@@ -0,0 +1,236 @@
+<template lang="pug">
+  .integrations-hero
+    .integrations-hero__tiles
+      template(v-for="integrationType, rowIndex in Object.keys(TILES)" :key="integrationType")
+        div(:ref="(el) => rowEls[integrationType] = el")
+          IntegrationTile(
+            v-for="i in activeIndexesList[integrationType]"
+            :key="`${integrationType}-${i}`"
+            :info="TILES[integrationType][i]"
+            :dot-number="i + 1"
+            :dots-position="rowIndex % 2 === 1 ? 'left' : 'right'"
+            :class="i === activeIndexes[integrationType] ? '--active' : ''"
+            @hover:start="hoverIndexes[integrationType] = i"
+            @hover:end="hoverIndexes[integrationType] = null"
+          )
+    .integrations-hero__text
+      div
+        span
+          | Safely use your secrets<br/>
+          | from <b>{{ TILES.plugin[hoverIndexes.plugin ?? activeIndexes.plugin].label }}</b>
+      div
+        span with <b>{{ TILES.integration[hoverIndexes.integration ?? activeIndexes.integration].label }}</b>
+      div
+        span and <b>{{ TILES.platform[hoverIndexes.platform ?? activeIndexes.platform].label }}</b>
+
+</template>
+
+<script setup lang="ts">
+import {
+  ref, onMounted, onUnmounted, computed,
+  reactive,
+  useTemplateRef,
+} from 'vue';
+import IntegrationTile from './IntegrationTile.vue';
+
+
+const TILES = Object.freeze({
+  plugin: [
+    {
+      icon: 'simple-icons:1password', label: '1Password', docsHref: '/docs/plugins/1password/', color: '19275e',
+    },
+    {
+      icon: 'simple-icons:bitwarden', label: 'Bitwarden', docsHref: '/docs/plugins/bitwarden/', color: '165bdb',
+    },
+    { icon: 'mdi:lock', label: 'Encrypted Vault', docsHref: '/docs/plugins/encrypted-vault/' },
+    { icon: 'mdi:infinity', label: 'Infisical', docsHref: '/docs/plugins/infisical/' },
+    { icon: 'mdi:server-outline', label: 'a self-hosted store', docsHref: '/docs/plugins/overview/' },
+    {
+      icon: 'file-icons:dotenv', label: 'dotenv files', docsHref: '/docs/plugins/overview/', color: '555555',
+    },
+  ],
+  integration: [
+    { icon: 'devicon:remix', label: 'Remix', docsHref: '/docs/integrations/remix/' },
+    { icon: 'devicon:nextjs', label: 'Next.js', docsHref: '/docs/integrations/nextjs/' },
+    { icon: 'devicon:astro', label: 'Astro', docsHref: '/docs/integrations/astro/' },
+    { icon: 'devicon:vitejs', label: 'Vite', docsHref: '/docs/integrations/vite/' },
+    { icon: 'logos:fastify-icon', label: 'Fastify', docsHref: '/docs/integrations/fastify/' },
+    { icon: 'devicon:nodejs', label: 'Node.js', docsHref: '/docs/integrations/node/' },
+  ],
+  platform: [
+    { icon: 'devicon:netlify', label: 'Netlify', docsHref: '/docs/platforms/netlify/' },
+    { icon: 'devicon:vercel', label: 'Vercel', docsHref: '/docs/platforms/vercel/' },
+    { icon: 'devicon:cloudflare', label: 'Cloudflare', docsHref: '/docs/platforms/cloudflare/' },
+    { icon: 'devicon:docker', label: 'Docker', docsHref: '/docs/platforms/' },
+    { icon: 'mdi:server-outline', label: 'self-hosted infra', docsHref: '/docs/platforms/overview/' },
+  ],
+});
+
+const activeIndexes = reactive({
+  plugin: Math.floor(Math.random() * TILES.plugin.length),
+  integration: Math.floor(Math.random() * TILES.integration.length),
+  platform: Math.floor(Math.random() * TILES.platform.length),
+});
+
+function getIndexes(i: number, arrayLength: number) {
+  return [
+    (arrayLength + i - 2) % arrayLength,
+    (arrayLength + i - 1) % arrayLength,
+    i,
+    (i + 1) % arrayLength,
+    (i + 2) % arrayLength,
+  ];
+}
+const activeIndexesList = computed(() => ({
+  plugin: getIndexes(activeIndexes.plugin, TILES.plugin.length),
+  platform: getIndexes(activeIndexes.platform, TILES.platform.length),
+  integration: getIndexes(activeIndexes.integration, TILES.integration.length),
+}));
+const hoverIndexes = reactive({
+  plugin: null,
+  platform: null,
+  integration: null,
+});
+
+const rowEls = reactive<Partial<Record<keyof typeof TILES, HTMLElement>>>({});
+
+function initRowAnimationRestart(type: keyof typeof TILES) {
+  const el = rowEls[type];
+  if (!el) return;
+  el.addEventListener('animationend', () => {
+    const delta = type === 'integration' ? -1 : 1;
+    // using % on negative numbers doesn't work, so we add the full length again to stay positive
+    activeIndexes[type] = (TILES[type].length + activeIndexes[type] + delta) % TILES[type].length;
+    // restart the animation - no simple way...
+    el.style.animation = 'none';
+    // eslint-disable-next-line no-void
+    void el.offsetWidth; // trigger reflow
+    el.style.animation = '';
+  });
+}
+
+onMounted(() => {
+  let type: keyof typeof TILES;
+  for (type in TILES) initRowAnimationRestart(type);
+});
+
+
+</script>
+
+<style scoped>
+@keyframes slide-left {
+  from { transform: translateX(var(--tile-width)); }
+  to { transform: translateX(calc(-1 * var(--tile-spacing))); }
+}
+@keyframes slide-right {
+  from { transform: translateX(calc(-1 * var(--tile-width))); }
+  to { transform: translateX(var(--tile-spacing)); }
+}
+
+.integrations-hero {
+  --tile-shift-duration: 4s;
+  --tile-width: 60px;
+  --tile-height: calc(var(--tile-width) / 2);
+  --tile-spacing: calc(var(--tile-width) / 10);
+  --tile-width-w-spacing: calc(var(--tile-width) + var(--tile-spacing));
+
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+
+  position: relative;
+  border-radius: 8px;
+  grid-template-columns: 1fr 1fr;
+  gap: 0rem;
+
+  display: grid;
+
+
+  @media (min-width: 50rem) {
+    border-radius: 16px;
+    --tile-width: 120px;
+  }
+  html[data-theme="light"] & {
+    border-color: var(--brand-white);
+  }
+
+  .integrations-hero__text {
+    justify-content: center;
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    text-align: left;
+
+    @media (min-width: 50rem) {
+      font-size: 24px;
+    }
+
+    > div {
+      b {
+        color: var(--accent-color);
+      }
+    }
+  }
+  .integrations-hero__tiles {
+    width: calc(3 * var(--tile-width) + 2 * var(--tile-spacing));
+    justify-self: center;
+
+    /* overlay to see active area */
+    &::before {
+      content: '';
+      top: 0;
+      bottom: 0;
+      width: var(--tile-width);
+      left: var(--tile-width-w-spacing);
+      position: absolute;
+      background: rgba(255,0,0,.4);
+      z-index: 2;
+      display: none;
+    }
+    position: relative;
+    display: flex;
+    gap: var(--tile-spacing);
+    flex-direction: column;
+    padding-top: var(--tile-spacing);
+    padding-bottom: var(--tile-spacing);
+    height: calc(3 * (var(--tile-height) + var(--tile-spacing)) + var(--tile-spacing) );
+    mask-image: linear-gradient(to right,
+      transparent 7%,
+      red 25%,
+      red 75%,
+      transparent 93%
+    );
+
+    > div {
+      height: var(--tile-height);
+      width: calc(5 * (var(--tile-width-w-spacing)));
+      margin-left: calc(-1 * (var(--tile-width-w-spacing)));
+      position: relative;
+      display: flex;
+      gap: var(--tile-spacing);
+
+      &:hover {
+        animation-play-state: paused;
+      }
+
+      animation: slide-left var(--tile-shift-duration) linear;
+      &:nth-child(2) {
+        animation-name: slide-right;
+      }
+    }
+  }
+  .integrations-hero__text, .integrations-hero__tiles {
+    > div:nth-child(1){
+      --accent-color: var(--brand-pink--text);
+    }
+    > div:nth-child(2){
+      --accent-color: var(--brand-green--text);
+    }
+    > div:nth-child(3){
+      --accent-color: var(--brand-cyan--text);
+    }
+  }
+
+}
+</style>
diff --git a/packages/docs-site/src/components/homepage/config-example.ts b/packages/docs-site/src/components/homepage/config-example.ts
new file mode 100644
index 00000000..af7d47d3
--- /dev/null
+++ b/packages/docs-site/src/components/homepage/config-example.ts
@@ -0,0 +1,36 @@
+import {
+  DmnoBaseTypes, defineDmnoService, switchBy, configPath,
+} from 'dmno';
+import { EncryptedVaultDmnoPlugin, EncryptedVaultTypes } from '@dmno/encrypted-vault-plugin';
+import { OnePasswordDmnoPlugin, OnePasswordTypes } from '@dmno/1password-plugin';
+
+// use a plugin to fetch secrets from a secure backend like 1Password
+const onePassSecrets = new OnePasswordDmnoPlugin('1pass', { token: configPath('OP_TOKEN') });
+// or store them encrypted within your repo
+const vaultFileSecrets = new EncryptedVaultDmnoPlugin('vault', { key: configPath('DMNO_VAULT_KEY') });
+
+export default defineDmnoService({
+  // re-use items defined in other services
+  pick: ['API_KEY', 'DB_URL', 'DMNO_ENV'],
+  // more config specific to this service
+  schema: {
+    DMNO_VAULT_KEY: {
+      // re-use existing types with validation and docs info built-in
+      extends: EncryptedVaultTypes.encryptionKey,
+    },
+    OP_TOKEN: {
+      extends: OnePasswordTypes.serviceAccountToken,
+    },
+    SAAS_API_KEY: {
+      // load different values based on any other value
+      value: switchBy('DMNO_ENV', {
+        _default: 'my-dev-key',
+        production: onePassSecrets.item(),
+      }),
+    },
+    SAAS_PROJECT_TAG: {
+      // use a function to set a value - reference any other config
+      value: () => `myapp_${DMNO_CONFIG.DMNO_ENV}`,
+    },
+  },
+});
diff --git a/packages/docs-site/src/components/layouts/LandingPage.astro b/packages/docs-site/src/components/layouts/LandingPage.astro
index f8c2d86f..0e9ad890 100644
--- a/packages/docs-site/src/components/layouts/LandingPage.astro
+++ b/packages/docs-site/src/components/layouts/LandingPage.astro
@@ -1,11 +1,7 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-
-import ViteLogoSvg from '~icons/devicon/vitejs?raw';
-import NextLogoSvg from '~icons/logos/nextjs?raw';
-import RemixLogoSvg from '~icons/logos/remix-icon?raw';
-import AstroLogoSvg from '~icons/devicon/astro?raw';
-import NodeLogoSvg from '~icons/logos/nodejs-icon?raw';
+import { Icon } from 'astro-iconify';
+import LogoBar from '../LogoBar.astro';
 
 interface Props {
   title?: string;
@@ -36,17 +32,29 @@ const {
 
     { showIntegrations && 
       <section class="integrations-section">
-        <h3>Drop-in integrations for your favorite frameworks & tools</h3>
-        <div class="logo-bar">
-          <a href="/docs/integrations/remix/" set:html={RemixLogoSvg} />
-          <a href="/docs/integrations/nextjs/" set:html={NextLogoSvg} />
-          <a href="/docs/integrations/astro/" set:html={AstroLogoSvg} />
-          <a href="/docs/integrations/vite/" set:html={ViteLogoSvg} />
-          <a href="/docs/integrations/node/" set:html={NodeLogoSvg} />
+        <div>
+          <h2>DMNO works with everything</h2>
+          <p>Many use cases don't require anything extra, but our drop-in integrations make things even simpler</p>
         </div>
+        <LogoBar>
+          {/* prefer simple-icons for single color icons, so it flips dark/light */}
+          <a href="/docs/integrations/remix/"><Icon name="simple-icons:remix" /></a>
+          <a href="/docs/integrations/nextjs/"><Icon name="devicon:nextjs" /></a>
+          <a href="/docs/integrations/astro/"><Icon name="devicon:astro" /></a>
+          <a href="/docs/integrations/vite/"><Icon name="devicon:vitejs" /></a>
+          <a href="/docs/integrations/node/"><Icon name="logos:nodejs-icon" /></a>
+          <a href="/docs/integrations/fastify/"><Icon name="simple-icons:fastify" /></a>
+
+          <a href="/docs/plugins/1password/"><Icon name="simple-icons:1password" /></a>
+          <a href="/docs/plugins/bitwarden/"><Icon name="simple-icons:bitwarden" /></a>
+
+          <a href="/docs/platforms/cloudflare/"><Icon name="devicon:cloudflare" /></a>
+          <a href="/docs/platforms/vercel/"><Icon name="simple-icons:vercel" /></a>
+          <a href="/docs/platforms/netlify/"><Icon name="devicon:netlify" /></a>
+        </LogoBar>
         
         <div class="richtext">
-          <p>Use something else? 💪 <a href={DMNO_PUBLIC_CONFIG.DISCORD_JOIN_URL}>Join us on discord</a> and help us build the next one!</p>
+          <p>Looking for something else? 💪 <a href={DMNO_PUBLIC_CONFIG.DISCORD_JOIN_URL}>Join us on discord</a> and help us build the next one!</p>
         </div>
       </section>
     }
@@ -180,8 +188,18 @@ const {
   }
 
   .integrations-section {
+
+    h2 {
+      font-weight: bold;
+      margin: 0;
+      padding: 0;
+    }
+    h3 {
+      margin: 0;
+      padding: 0;
+    }
     background: var(--brand-purple--t2);
-    padding: 1rem;
+    padding: 2rem;
     @media (min-width: 50rem) {
       padding: 2rem;
     }
@@ -190,38 +208,12 @@ const {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
-    p {
-      text-align: right;
-      font-style: italic;
+    border: 1px solid var(--brand-purple);
+    .richtext {
       width: 100%;
+      font-size: .85em;
     }
   }
-  .logo-bar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5%;
-
-    > div, > a {
-      flex-grow: 1;
-      :global(> svg) {
-        display: block;
-        width: 100%;
-        height: auto;
-        max-height: 80px;
-        min-width: 30px;
-        opacity: .8;
-        
-        &:hover {
-          opacity: 1;
-          transform: scale(1.1);
-        }
-
-      }
-      
-      
-    }
-  }
-
 </style>
   
 </StarlightPage>
diff --git a/packages/docs-site/src/components/mailerlite/SignUp.astro b/packages/docs-site/src/components/mailerlite/SignUp.astro
deleted file mode 100644
index 1ce147d7..00000000
--- a/packages/docs-site/src/components/mailerlite/SignUp.astro
+++ /dev/null
@@ -1,18 +0,0 @@
----
----
-
-<script>
-  // <!-- MailerLite Universal -->
-  // @ts-nocheck
-  (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
-    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
-    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
-    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
-    ml('account', '824920');
-// <!-- End MailerLite Universal -->
-</script>
-
-<div class="sign-up-container">
-  <div class="ml-embedded" data-form="2mZufj"></div>
-</div>
-
diff --git a/packages/docs-site/src/content/docs/docs/get-started/quickstart.mdx b/packages/docs-site/src/content/docs/docs/get-started/quickstart.mdx
index c9527bc4..cb07ebc2 100644
--- a/packages/docs-site/src/content/docs/docs/get-started/quickstart.mdx
+++ b/packages/docs-site/src/content/docs/docs/get-started/quickstart.mdx
@@ -1,11 +1,20 @@
 ---
-title: DMNO quickstart
-description: Get started with DMNO's quickstart guide and start managing your configuration more effectively.
+title: Quickstart guide
+description: Get started with DMNO and start managing your configuration more effectively.
 ---
 
 import { Steps, FileTree, Code } from '@astrojs/starlight/components';
 import TabbedCode from '@/components/TabbedCode.astro'; 
 
+## Current requirements
+
+DMNO Config requires either of the following: 
+- `node` (>20.x) + either `pnpm`, `npm`, or `yarn`
+- `bun`
+
+:::tip
+While TypeScript is not required in your applications, you will get the full feature set (e.g., IntelliSense and inline docs) of DMNO by using it in a TypeScript project. Note that our `config.mts` files themselves are written in TypeScript, so you'll want to use an editor that at least supports it. 
+:::
 
 <Steps>
 
@@ -14,16 +23,16 @@ import TabbedCode from '@/components/TabbedCode.astro';
     Run this command in the root of your project:
     <TabbedCode dynamicExec="dmno init" />
 
-    This will create a `.dmno` folder in the root of your project with a `config.mts` file, including config items in your `schema` that we automatically imported from `.env` files. If in a monorepo, any additional services of your choice will get their own `.dmno` folders and associated files. Each `.dmno` folder looks something like this: 
+    This will create a `.dmno` folder in the root of your project with a `config.mts` file, including config items in your `schema` that we automatically scaffold using config items we find in `.env` files and in your source code. If in a monorepo, any additional services of your choice will get their own `.dmno` folders and associated files. Each `.dmno` folder looks something like this: 
 
     <FileTree>
-    - / 
+    - /your-project 
       - .dmno
         - .typegen/ (generated types)
-        - .env.local (your local overrides and sensitive values)
+        - .env.local (optional local overrides file, gitignored)
         - **config.mts** (your config schema)
         - tsconfig.json (dmno specific tsconfig)
-      - ... the rest of your folders
+      - ... the rest of your files and folders
     </FileTree>
 
 2. ### **Run `dmno resolve` in watch mode**
@@ -33,9 +42,9 @@ import TabbedCode from '@/components/TabbedCode.astro';
 
 3. ### **Write your schema**
 
-    The config schema and other settings live in the `.dmno/config.mts` files. `dmno init` does its best to scaffold out the initial version of this schema based on your existing `.env` files. Updating each item with a description, [`required`](/docs/guides/schema/#validations--required-config), and [`sensitive`](/docs/guides/schema/#secrets--security) is a great next step. You can then improve your schema over time, adding validations, and setting values from within the schema itself.
+    The config schema and other settings live in the `.dmno/config.mts` files. `dmno init` does its best to scaffold out the initial version of this schema but it should be reviewed. Updating each item with a description, [`required`](/docs/guides/schema/#validations--required-config), and [`sensitive`](/docs/guides/schema/#secrets--security) is a great next step. You can then improve your schema over time, adding validations, and setting values from within the schema itself.
 
-    Your initial should look something like this:
+    Your initial schema should look something like this:
 
     ```typescript title=".dmno/config.mts"
     import { DmnoBaseTypes, defineDmnoService } from 'dmno';
diff --git a/packages/docs-site/src/pages/_drafts/docs-home.astro b/packages/docs-site/src/pages/_drafts/docs-home.astro
new file mode 100644
index 00000000..1f9df880
--- /dev/null
+++ b/packages/docs-site/src/pages/_drafts/docs-home.astro
@@ -0,0 +1,404 @@
+---
+// ! THIS IS THE "DOCS" HOMEPAGE /docs/
+import DIcon from "@/components/DIcon.astro";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
+import { DmnoTileLogo } from "@dmno/ui-lib";
+import { Code } from "@astrojs/starlight/components";
+import ConfigExample from "@/components/homepage/ConfigExample.astro";
+---
+
+<StarlightPage
+  frontmatter={{
+    title: "👋",
+    description: "Full-stack configuration & secrets. Batteries included.",
+    tableOfContents: false,
+    next: false,
+  }}
+>
+  <div class="homepage not-content">
+    <div class="hero">
+      <div class="hero__logo">
+        <DmnoTileLogo client:load />
+      </div>
+      <div class="hero__text">
+        <h1>DMNO</h1>
+        <h2>
+          The <span class="squiggle" title="Made you hover 😉">missing</span> middleware
+          for your configuration and secrets.
+        </h2>
+        <div class="cta-wrap">
+          <a href="/docs/get-started/quickstart" class="button">Get started</a>
+          <div class="install-command">
+            <DIcon name="console" />
+            <div>npx dmno init</div>
+            <DIcon name={["copy", "check"]} class="install-command__copy" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="value-prop-section">
+      <!-- image to the left of the text -->
+      <div class="row">
+        <div class="value-prop-section__image-wrapper">
+          <img src="https://placehold.co/250" alt="DMNO" />
+        </div>
+        <div class="value-prop-section__text">
+          <h3>Why DMNO (👂 domino) is different:</h3>
+          <ul>
+            <li>🦺 Type-safe env vars</li>
+            <li>✅ Validation & coercion</li>
+            <li>⛔️ Leak detection & prevention</li>
+            <li>🛑 Log redaction</li>
+            <li>🔍 HTTP interception</li>
+            <li>🔄 Sync with multiple secrets managers</li>
+            <li>🔌 Integrations for popular frameworks & platforms</li>
+          </ul>
+        </div>
+      </div>
+      <div class="row">
+        <div class="value-prop-section__text">
+          <h3>Take control of your configuration & secrets.</h3>
+          <ul>
+            <li>
+              Tired of juggling <code>.env</code> files, and sharing secrets over
+              Slack?
+            </li>
+            <li>Sick of manually managing secrets in your codebase?</li>
+            <li>Worried about a secret leaking?</li>
+            <li>
+              Had to redeploy your app because you forgot to add a config item?
+            </li>
+            <li>Have a monorepo with multiple apps that share config?</li>
+            <li>Regularly copying and pasting from your secrets manager?</li>
+          </ul>
+          <h3>...then DMNO is for you.</h3>
+        </div>
+        <div class="value-prop-section__image-wrapper">
+          <img src="https://placehold.co/250" alt="DMNO" />
+        </div>
+      </div>
+      <section class="sample-config-section">
+        <h3>Sample config file</h3>
+        <ConfigExample />
+      </section>
+    </section>
+  </div>
+</StarlightPage>
+
+{/* hide site title */}
+<style is:global>
+  head:has(meta[content="👋"]) ~ body .content-panel:has(h1#_top) {
+    display: none !important;
+  }
+  head:has(meta[content="👋"])
+    ~ body
+    .content-panel:has(h1#_top)
+    ~ .content-panel {
+    border-top: none;
+  }
+
+  .main-frame {
+    min-height: 100vh;
+  }
+</style>
+
+<style lang="less">
+  :global(.main-frame) {
+  }
+  .homepage {
+    .hero {
+      color: var(--color-text-full-shade);
+      padding-bottom: 2rem;
+      display: flex;
+      flex-direction: column;
+
+      @media (min-width: 50rem) {
+        gap: 2rem;
+        padding-top: 4rem;
+        padding-bottom: 5rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+
+      @media (min-width: 72rem) {
+        padding-left: 4rem;
+        padding-right: 4rem;
+        gap: 4rem;
+      }
+
+      @media (min-width: 100rem) {
+        grid-template-columns: 4fr 5fr;
+      }
+
+      .hero__logo {
+        display: flex;
+        position: relative;
+        align-items: center;
+
+        :global(.dmno-tile-logo) {
+          max-width: 50vw;
+        }
+      }
+      .hero__text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      &:before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        bottom: 50%;
+        left: 0%;
+        right: 0;
+        opacity: 0.2;
+      }
+    }
+    h1 {
+      display: none;
+      @media (min-width: 50rem) {
+        font-size: 4rem;
+        display: block;
+      }
+      line-height: 0.8em;
+    }
+    h2 {
+      @media (min-width: 50rem) {
+        font-size: 1.5rem;
+      }
+
+      line-height: 1.4em;
+      margin: 1.5rem 0;
+      font-weight: 500;
+    }
+    .squiggle {
+      /* Define a custom property for the gradient angle */
+      @property --squiggle-angle {
+        syntax: "<angle>";
+        initial-value: 0deg;
+        inherits: false;
+      }
+
+      /* Create the wavy underline */
+      text-decoration: wavy underline var(--brand-pink);
+
+      /* Add animation */
+      animation: squiggle-move 2s ease-in-out infinite;
+    }
+
+    @keyframes squiggle-move {
+      from {
+        text-decoration-color: color-mix(
+          in oklch,
+          var(--brand-pink),
+          var(--brand-purple) 25%
+        );
+      }
+      50% {
+        text-decoration-color: color-mix(
+          in oklch,
+          var(--brand-pink),
+          var(--brand-purple) 75%
+        );
+      }
+      to {
+        text-decoration-color: color-mix(
+          in oklch,
+          var(--brand-pink),
+          var(--brand-purple) 25%
+        );
+      }
+    }
+
+    .cta-wrap {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      @media (min-width: 50rem) {
+        flex-direction: row;
+        gap: 2rem;
+      }
+    }
+
+    a.button {
+      @property --spin {
+        syntax: "<angle>";
+        initial-value: 35deg;
+        inherits: false;
+      }
+
+      background: linear-gradient(
+        var(--spin),
+        var(--brand-purple) 0%,
+        var(--brand-red) 100%
+      );
+      color: var(--brand-white);
+
+      font-size: 18px;
+      height: 48px;
+      border-radius: 50px;
+      padding: 0px 2rem;
+      align-content: center;
+      font-weight: bold;
+      text-wrap: nowrap;
+      text-decoration: none;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:hover {
+        background: linear-gradient(
+          var(--spin),
+          var(--brand-pink) 0%,
+          var(--brand-pink) 100%
+        );
+        background: var(--brand-pink);
+      }
+      &:hover {
+        transform: translate3d(-2px, -2px, 0);
+        background: var(--brand-pink);
+        box-shadow: 2px 2px 0 var(--tile-drop-shadow);
+      }
+      &:focus {
+        outline: 1px solid var(--brand-pink);
+      }
+      &:active {
+        transform: translate3d(0, 0, 0);
+        box-shadow: none;
+      }
+    }
+
+    .install-command {
+      display: flex;
+      font-size: 18px;
+      height: 48px;
+      border: 2px solid var(--brand-pink);
+      align-items: center;
+      padding-right: 64px;
+      font-weight: bold;
+      background: black;
+      position: relative;
+      html[data-theme="light"] & {
+        background: rgba(0, 0, 0, 0.2);
+        background: var(--brand-cyan--t2);
+        color: black;
+      }
+
+      font-family: var(--code-font);
+      text-wrap: nowrap;
+
+      --border-gradient-color-1: var(--brand-green);
+      --border-gradient-color-2: var(--brand-cyan);
+      border: 2px solid var(--border-gradient-color-1);
+      border-image-source: linear-gradient(
+        90deg,
+        var(--border-gradient-color-1),
+        var(--border-gradient-color-2)
+      );
+      border-image-slice: 1;
+
+      :global(.d-icon) {
+        height: 44px;
+        width: 44px;
+        flex-shrink: 0;
+
+        // console/cli caret
+        &:first-child {
+          width: 36px;
+          padding: 8px;
+        }
+
+        // copy icon
+        &:last-child {
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          padding: 8px;
+          &:hover {
+            color: var(--brand-pink);
+            cursor: pointer;
+          }
+        }
+      }
+      .install-command__copy.--success {
+        color: var(--brand-green) !important;
+        :global(svg:nth-child(1)) {
+          display: none;
+        }
+        :global(svg:nth-child(2)) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .value-prop-section {
+    display: grid;
+    .row {
+      display: grid;
+      grid-template-columns: 1fr; /* Single column by default (mobile) */
+    }
+
+    @media (min-width: 768px) {
+      .row:nth-child(1) {
+        grid-template-columns: 1fr 2fr;
+        margin-left: 2rem;
+      }
+      .row:nth-child(2) {
+        grid-template-columns: 3fr 1fr;
+        margin-right: 1rem;
+      }
+    }
+
+    h3 {
+      margin: 1rem 0;
+    }
+    ul {
+      // remove default list styling
+      list-style: none;
+      padding: 0 0 0 0.5rem;
+      align-self: grid-end;
+    }
+    .value-prop-section__text {
+      padding: 1rem 2rem;
+    }
+    .value-prop-section__image-wrapper {
+      margin: 2.5rem 0 0 1rem;
+    }
+  }
+
+  .integrations-section {
+    background: var(--brand-purple--t2);
+    padding: 1rem;
+    @media (min-width: 50rem) {
+      padding: 2rem;
+    }
+    margin: 2rem 0;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    p {
+      text-align: right;
+      font-style: italic;
+      width: 100%;
+    }
+  }
+</style>
+
+<script>
+  document
+    .querySelector(".install-command__copy")
+    ?.addEventListener("click", async (e) => {
+      await navigator.clipboard.writeText("npx dmno init");
+      if (e.target instanceof Element) {
+        e.target.classList.add("--success");
+        setTimeout(() => {
+          (e.target as Element).classList.remove("--success");
+        }, 2000);
+      }
+    });
+</script>
diff --git a/packages/docs-site/src/pages/docs/index.astro b/packages/docs-site/src/pages/docs/index.astro
index 6e289461..8a76e86e 100644
--- a/packages/docs-site/src/pages/docs/index.astro
+++ b/packages/docs-site/src/pages/docs/index.astro
@@ -1,370 +1,9 @@
 ---
 
-import DIcon from '@/components/DIcon.astro';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { DmnoTileLogo } from '@dmno/ui-lib';
-
-import ViteLogoSvg from '~icons/devicon/vitejs?raw';
-import NextLogoSvg from '~icons/logos/nextjs?raw';
-import RemixLogoSvg from '~icons/logos/remix-icon?raw';
-import AstroLogoSvg from '~icons/devicon/astro?raw';
-import NodeLogoSvg from '~icons/logos/nodejs-icon?raw';
-import FastifyLogoSvg from '~icons/logos/fastify-icon?raw';
-
 ---
-<StarlightPage frontmatter={{
-  title: '👋',
-  description: "Full-stack configuration & secrets. Batteries included.",
-  tableOfContents: false 
-}}>
-  <div class="homepage not-content">
-
-    <div class="hero">
-      <div class="hero__logo">
-          <DmnoTileLogo client:load />
-      </div>
-      <div class="hero__text">
-        <h1>DMNO</h1>
-        <h2>Full-stack configuration & secrets.<br/>Batteries included.</h2>
-        <div class="cta-wrap">
-          <a href='/docs/get-started/quickstart' class="button">Get started</a>
-          <div class="install-command">
-            <DIcon name="console" />
-            <div>npx dmno init</div>
-            <DIcon name={['copy', 'check']} class="install-command__copy" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <section class="value-prop-section">      
-      <div>
-        <h3>Type-safe env vars</h3>
-        <p>DMNO auto-generates powerful types for your config schema with intuitive documentation built right in.</p>
-      </div>
-      <div>
-        <h3>Validation & coercion</h3>
-        <p>Clean and check your config at every step of the way. Our built-in types cover 95% of use cases. Easily add custom validation logic on top.</p>
-      </div>
-      <div>
-        <h3>Keep your secrets safe</h3>
-        <p>DMNO prevents you from accidentally leaking any secrets, and helps you sync with teammates without sending <code>.env</code> files over slack.</p>
-      </div>
-      <div>
-        <h3>Composable config</h3>
-        <p>Easily reuse config definitions and you can even share resolved config values across services in a monorepo, if you are using one.</p>
-      </div>
-      <div>
-        <h3>Live reload</h3>
-        <p>Our <code>resolve -w</code> mode reloads your schema and restarts your code whenever anything changes. It's vite powered and FAST.</p>
-      </div>
-      <div>
-        <h3>Comprehensive configuration toolkit</h3>
-        <p>Includes everything you need to manage config - no need to wire together 5 different tools or spend weeks integrating an external service</p>
-      </div>
-      <div>
-        <h3></h3>
-        <p></p>
-      </div>
-    </section>
-
-    <section class="integrations-section">
-      <h3>Drop-in integrations for your favorite frameworks & tools</h3>
-      <div class="logo-bar">
-        <a href="/docs/integrations/remix/" set:html={RemixLogoSvg} />
-        <a href="/docs/integrations/nextjs/" set:html={NextLogoSvg} />
-        <a href="/docs/integrations/astro/" set:html={AstroLogoSvg} />
-        <a href="/docs/integrations/vite/" set:html={ViteLogoSvg} />
-      </div>
-      <div class="logo-bar">
-        <a href="/docs/integrations/fastify/" set:html={FastifyLogoSvg} />
-        <a href="/docs/integrations/node/" set:html={NodeLogoSvg} />
-      </div>
-      <div class="richtext">
-        <p>Use something else? 💪 <a href={DMNO_PUBLIC_CONFIG.DISCORD_JOIN_URL}>Join us on discord</a> and help us build the next one!</p>
-      </div>
-    </section>
-
-  </div>
-
-  {/* hide site title */}
-  <style is:global>
-    head:has(meta[content="👋"]) ~ body .content-panel:has(h1#_top) {
-      display: none !important;
-    }
-    head:has(meta[content="👋"]) ~ body .content-panel:has(h1#_top) ~ .content-panel {
-      border-top: none;
-    }
-
-    .main-frame {
-      min-height: 100vh;
-    }
-  </style>
-
-  <style lang="less">
-    :global(.main-frame) {
-    }
-    .homepage {
-      .hero {
-        color: var(--color-text-full-shade);
-        padding-bottom: 2rem;
-        display: flex;
-        flex-direction: column;
-
-        @media (min-width: 50rem) {
-          gap: 2rem;
-          padding-top: 4rem;
-          padding-bottom: 5rem;
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-        }
-
-        @media (min-width: 72rem) {
-          padding-left: 4rem;
-          padding-right: 4rem;          
-          gap: 4rem;
-        }
-
-        @media (min-width: 100rem) {
-          grid-template-columns: 4fr 5fr;
-        }
-        
-        .hero__logo {
-          display: flex;
-          position: relative;
-          align-items: center;
-          
-          :global(.dmno-tile-logo) {
-            max-width: 50vw;
-            
-          }
-        }
-        .hero__text {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        &:before {
-          content: '';
-          position: absolute;
-          z-index: -1;
-          top: 0;
-          bottom: 50%;
-          left: 0%;
-          right: 0;
-          opacity: .2;
-          
-        }
-      }
-      h1 {
-        display: none;  
-        @media (min-width: 50rem) {
-          font-size: 4rem;
-          display: block;
-        }
-        line-height: .8em;
-      }
-      h2 {
-        @media (min-width: 50rem) {
-          font-size: 1.5rem;
-        }
-        
-        line-height: 1.4em;
-        margin: 1.5rem 0;
-        font-weight: 500;
-      }
-      
-      .cta-wrap {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        @media (min-width: 50rem) {
-          flex-direction: row;
-          gap: 2rem;
-        }
-        
-      }
-
-      a.button {
-
-        @property --spin {
-          syntax: '<angle>';
-          initial-value: 35deg;
-          inherits: false;
-        }
-
-        background: linear-gradient(var(--spin), var(--brand-purple) 0%, var(--brand-red) 100%);
-        color: var(--brand-white);
-        
-        font-size: 18px;
-        height: 48px;
-        border-radius: 50px;
-        padding: 0px 2rem;
-        align-content: center;
-        font-weight: bold;
-        text-wrap: nowrap;
-        text-decoration: none;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        &:hover {
-          background: linear-gradient(
-            var(--spin),
-            var(--brand-pink) 0%,
-            var(--brand-pink) 100%
-          );
-          background: var(--brand-pink);
-        }
-        &:hover {
-          transform: translate3d(-2px, -2px, 0);
-          background: var(--brand-pink);
-          box-shadow: 2px 2px 0 var(--tile-drop-shadow);
-        }
-        &:focus {
-          outline: 1px solid var(--brand-pink);
-        }
-        &:active {
-          transform: translate3d(0, 0, 0);
-          box-shadow: none;
-        }
-      }
-      
-
-      .install-command {
-        display: flex;
-        font-size: 18px;
-        height: 48px;
-        border: 2px solid var(--brand-pink);
-        align-items: center;
-        padding-right: 64px;
-        font-weight: bold;
-        background: black;
-        position: relative;
-        html[data-theme="light"] & {
-          background: rgba(0, 0, 0, 0.2);
-          background: var(--brand-cyan--t2);
-          color: black;
-        }
-
-        font-family: var(--code-font);
-        text-wrap: nowrap;
-
-        --border-gradient-color-1: var(--brand-green);
-        --border-gradient-color-2: var(--brand-cyan);
-        border: 2px solid var(--border-gradient-color-1);
-        border-image-source: linear-gradient(90deg, var(--border-gradient-color-1), var(--border-gradient-color-2));
-        border-image-slice: 1;
-        
-
-        :global(.d-icon) {
-          height: 44px;
-          width: 44px;
-          flex-shrink: 0;
-
-          // console/cli caret
-          &:first-child {
-            width: 36px;
-            padding: 8px;
-          }
-          
-          // copy icon
-          &:last-child {
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            padding: 8px;
-            &:hover {
-              color: var(--brand-pink);
-              cursor: pointer;
-            }
-          }
-        }
-        .install-command__copy.--success {
-          color: var(--brand-green) !important;
-          :global(svg:nth-child(1)) { display: none; }
-          :global(svg:nth-child(2)) { display: block; }          
-        }
-        
-
-      }
-
-    }
-
-    .value-prop-section {
-      display: grid;
-      @media (min-width: 50rem) {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-      gap: 2.5rem;
-      h3 {
-        margin-bottom: 1rem;
-      }
-      code {
-        background: rgba(255,255,255,.15);
-        html[data-theme='light'] & {
-          background: rgba(0,0,0,.15);
-        }
-        padding: .1em .15em;
-      }
-    }
-
-    .integrations-section {
-      background: var(--brand-purple--t2);
-      padding: 1rem;
-      @media (min-width: 50rem) {
-        padding: 2rem;
-      }
-      margin: 2rem 0;
-      border-radius: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-      p {
-        text-align: right;
-        font-style: italic;
-        width: 100%;
-      }
-    }
-    .logo-bar {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 5%;
-      align-items: center;
-
-      > div, > a {
-        flex-grow: 1;
-        :global(> svg) {
-          display: block;
-          width: 100%;
-          height: auto;
-          max-height: 80px;
-          min-width: 30px;
-          opacity: .8;
-          
-          &:hover {
-            opacity: 1;
-            transform: scale(1.1);
-          }
-
-        }
-        
-        
-      }
-    }
-
-  </style>
 
-  <script>
-    document.querySelector('.install-command__copy')?.addEventListener('click', async (e) => {
-      await navigator.clipboard.writeText('npx dmno init');
-      if (e.target instanceof Element) {
-        e.target.classList.add('--success');
-        setTimeout(() => {
-          (e.target as Element).classList.remove('--success');
-        }, 2000);
-      }
-    });
-  </script>
-  
-</StarlightPage>
+<!-- will be handled by a cloudflare redirect when deployed -->
+<p>redirecting</p>
+<script>
+  window.location.href = "/docs/get-started/quickstart/";
+</script>
diff --git a/packages/docs-site/src/pages/index.astro b/packages/docs-site/src/pages/index.astro
index d7d39aad..22312db6 100644
--- a/packages/docs-site/src/pages/index.astro
+++ b/packages/docs-site/src/pages/index.astro
@@ -1,18 +1,23 @@
 ---
-import { Code } from '@astrojs/starlight/components';
-import LandingPage from '@/components/layouts/LandingPage.astro';
-import VideoBlock from '@/components/VideoBlock.astro';
-import CTABlock from '@/components/CTABlock.astro';
-import Hero from '@/components/Hero.astro';
-import LandingPageSection from '@/components/LandingPageSection.astro';
+// ! THIS IS PRIMARY MAIN HOMEPAGE /
 
-import importedCode from '/.dmno/config.mts?raw';
-import intellisenseImg from '@/assets/docs-images/platform-intellisense-example.png';
-import leakImg from '@/assets/docs-images/security-demo.png';
-import screenshotImg from '@/assets/blog/screenshot-with-comments.png';
+import LandingPage from "@/components/layouts/LandingPage.astro";
+import CTABlock from "@/components/CTABlock.astro";
+import Hero from "@/components/Hero.astro";
+import LandingPageSection from "@/components/LandingPageSection.astro";
+
+import IntegrationsHero from "@/components/homepage/IntegrationsHero.vue";
+
+import importedCode from "/.dmno/config.mts?raw";
+import intellisenseImg from "@/assets/docs-images/platform-intellisense-example.png";
+import leakImg from "@/assets/docs-images/security-demo.png";
+import screenshotImg from "@/assets/blog/screenshot-with-comments.png";
+import iconGraphPlaceholder from "@/assets/blog/screenshot-with-comments.png";
+import ConfigExample from "@/components/homepage/ConfigExample.astro";
 
 const muxId = "FmBLL2H1yt6cEfqz01QVje7LSlI8DtF9Vn18NRsv5o6E";
 ---
+
 <LandingPage
   title="DMNO"
   description="DMNO makes your configuration safer and smarter. It integrates with the tools you already use and it's powered by TypeScript and Vite."
@@ -20,92 +25,41 @@ const muxId = "FmBLL2H1yt6cEfqz01QVje7LSlI8DtF9Vn18NRsv5o6E";
   showSidebar={false}
   showIntegrations={true}
 >
-    <Hero>
-      <Fragment slot="heading">
-        Environment Variables.<br/>Evolved.
-      </Fragment>
-      <Fragment slot="subheading">
-        DMNO makes your configuration safer and smarter.<br/>It integrates with the tools you already use and it's powered by TypeScript and Vite.
-      </Fragment>
-    </Hero>
+  <Hero>
+    <Fragment slot="heading">Connective Configuration</Fragment>
+    <Fragment slot="subheading">
+      DMNO is the missing middleware for your configuration and secrets
+    </Fragment>
+    <IntegrationsHero client:only="vue" />
+  </Hero>
 
-    <CTABlock
-      text="Get started ->"
-      href="/docs/get-started/quickstart/"
-      command="npx dmno init"
-    />
+  <CTABlock
+    text="Get started ->"
+    href="/docs/get-started/quickstart/"
+    command="npx dmno init"
+  />
 
-    <!-- <img src={screenshotImg.src} alt="an annotated screenshot showing DMNO's various features"> -->
-    <LandingPageSection>
-      <VideoBlock muxId={muxId} />  
-    </LandingPageSection>
-    
-    
-    <LandingPageSection
-      title="Schema-defined configuration"
-      ctaLink="/docs/guides/schema/"
-    >
-      <Code
-        code={`
-import { DmnoBaseTypes, defineDmnoService, switchBy } from 'dmno';
-import { EncryptedVaultDmnoPlugin, EncryptedVaultTypes } from '@dmno/encrypted-vault-plugin';
-import { OnePasswordDmnoPlugin, OnePasswordTypes } from '@dmno/1password-plugin';
-
-// use a plugin to fetch secrets from a secure backend like 1Password
-const OnePass = new OnePasswordDmnoPlugin('1pass', {
-  token: configPath('OP_TOKEN'),
-});
-// or store them encrypted within your repo
-const MyProdVault = new EncryptedVaultDmnoPlugin('vault', {
-  key: configPath('DMNO_VAULT_KEY'),
-});
-
-export default defineDmnoService({
-  settings: {
-    // automatically detect and prevent leaks
-    interceptSensitiveLeakRequests: true,
-    redactSensitiveLogs: true,
-    preventClientLeaks: true,
-  }, 
-  // re-use items defined in other services
-  pick: ['API_KEY', 'DB_URL', 'DMNO_ENV'], 
-  // more config specific to this service
-  schema: {
-    DMNO_VAULT_KEY: {
-      // re-use existing types with validation and docs info built-in
-      extends: EncryptedVaultTypes.encryptionKey,
-    },
-    OP_TOKEN: {
-      extends: OnePasswordTypes.serviceAccountToken,
-    },
-    SAAS_API_KEY: {
-      // load different values based on any other value
-      value: switchBy('DMNO_ENV', {
-        _default: 'my-dev-key',
-        production: MyProdVault.item(),
-      }),
-    },
-    SAAS_PROJECT_TAG: {
-      // use a function to set a value - reference any other config
-      value: (ctx) => \`myapp_\${DMNO_CONFIG.DMNO_ENV}\`,
-    },
-  }
-});
-        `}
-        lang="ts"
-        title=".dmno/config.mts - sample config file"
-      />
-    </LandingPageSection>
-    <LandingPageSection
-      title="Leak prevention and detection"
-      imgPath={leakImg.src}
-      imgAlt="DMNO Warning of a potential leak"
-      ctaLink="/docs/get-started/security/#leak-detection"
-    />
-    <LandingPageSection
-      title="Feature-rich IntelliSense"
-      imgPath={intellisenseImg.src}
-      imgAlt="VS Code screenshot showing DMNO's IntelliSense"
-      ctaLink="https://dmno.dev/docs/guides/schema/#docs--intellisense"
-    />
+  <LandingPageSection
+    title="Schema-defined configuration"
+    subheader="Make your config a living part of your codebase and stop relying on .env files."
+    ctaLink="/docs/guides/schema/"
+  >
+    <ConfigExample />
+  </LandingPageSection>
+  <LandingPageSection
+    title="Leak prevention and detection"
+    subheader="Detect and prevent leaks before they happen, and automatically redact sensitive items in your logs."
+    imgPath={leakImg.src}
+    imgAlt="DMNO Warning of a potential leak"
+    ctaLink="/docs/get-started/security/#leak-detection"
+  />
+  <LandingPageSection
+    title="Feature-rich IntelliSense"
+    subheader="Get full-featured IntelliSense for your config in VS Code, without any additional setup."
+    imgPath={intellisenseImg.src}
+    imgAlt="VS Code screenshot showing DMNO's IntelliSense"
+    ctaLink="https://dmno.dev/docs/guides/schema/#docs--intellisense"
+  />
 </LandingPage>
+
+<style></style>
diff --git a/packages/docs-site/src/style/global.less b/packages/docs-site/src/style/global.less
index c12de841..5f0f7299 100644
--- a/packages/docs-site/src/style/global.less
+++ b/packages/docs-site/src/style/global.less
@@ -31,7 +31,7 @@ h5 {
 :root {
   --cp-s: 89%;
   --cp-l: 65%;
-  --cp-l2: 55%;
+  --cp-l2: 50%;
   --cp-s-dark: 65%;
   --cp-l-dark: 10%;
   --cp-t1: 50%;
@@ -484,3 +484,20 @@ li>p>img:last-child {
     }
   }
 }
+
+.responsive-image {
+  width: 100%;
+  height: auto;
+}
+
+@media (min-width: 768px) {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .desktop-only {
+    display: none;
+  }
+}
diff --git a/packages/docs-site/tsconfig.json b/packages/docs-site/tsconfig.json
index 8312b4dd..49e19a6d 100644
--- a/packages/docs-site/tsconfig.json
+++ b/packages/docs-site/tsconfig.json
@@ -10,5 +10,8 @@
     ],
     "customConditions": [ "ts-src" ]
   },
-  "exclude": [ "dist", "~partytown" ]
+  "exclude": [
+    "dist", "~partytown",
+    "src/components/homepage/config-example.ts"
+  ]
 }
diff --git a/packages/ui-lib/src/components/DmnoTileLogo.vue b/packages/ui-lib/src/components/DmnoTileLogo.vue
index 23e3f4ce..ea559b55 100644
--- a/packages/ui-lib/src/components/DmnoTileLogo.vue
+++ b/packages/ui-lib/src/components/DmnoTileLogo.vue
@@ -81,7 +81,7 @@ const dotsRef = ref<InstanceType<typeof DotsLoader>>();
   width: 100%;
   height: 100%;
 
-  border-radius: 0% 50% 50% 0%;
+  border-radius: 5% 50% 50% 5%;
   margin-left: 3%;
   background: white;
   // background: linear-gradient(35deg, var(--logo-color-1) 0%, var(--logo-color-2) 100%);
diff --git a/packages/ui-lib/src/components/DotsLoader.vue b/packages/ui-lib/src/components/DotsLoader.vue
index 3ccd7a9a..e063f9a5 100644
--- a/packages/ui-lib/src/components/DotsLoader.vue
+++ b/packages/ui-lib/src/components/DotsLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['dots-loader', `dots-loader--${counter+1}`]">
+  <div :class="['dots-loader', `--${counter+1}`, isMounted && '--loaded']">
     <div
       v-for="(_p, i) in POSITION_STEPS"
       :key="i"
@@ -10,10 +10,13 @@
 
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import {
+  computed, onMounted, ref,
+} from 'vue';
 
 const props = defineProps({
   autoPlay: { type: Boolean },
+  startAt: { type: Number },
 });
 
 
@@ -43,10 +46,15 @@ const POSITION_STEPS: Array<Array<PositionNames>> = [
 
 
 const NUM_POSITIONS = POSITION_STEPS.length;
+const isMounted = ref(false);
 
-const counter = ref(0);
-onMounted(() => {
+const counter = ref(props.startAt ? props.startAt - 1 : 0);
+onMounted(async () => {
   if (props.autoPlay) setTimeout(start, TIC_SEC_MS);
+  // firefox was animating the dots on initial load, so we enable animations after initial load
+  setTimeout(() => {
+    isMounted.value = true;
+  });
 });
 
 let ticInterval: ReturnType<typeof setInterval> | undefined;
@@ -92,16 +100,19 @@ defineExpose({ start, stop });
 
   --dot-size: 18%;
 
-  &.dots-loader--1 {
+  &.--1 > div:first-child {
     --dot-size: 25%;
   }
 
   > div {
+    transform: translate(0,0);
     width: var(--dot-size);
     height: var(--dot-size);
     border-radius: 50%;
     background: currentColor;
     position: absolute;
+  }
+  &.--loaded > div {
     transition: transform 1s, width 1s, height 1s;
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cefe7ed..645ba393 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -85,7 +85,7 @@ importers:
         version: 2.2.4
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       kleur:
         specifier: 'catalog:'
         version: 4.1.5
@@ -170,7 +170,7 @@ importers:
         version: 12.0.0
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       diff:
         specifier: ^5.2.0
         version: 5.2.0
@@ -306,7 +306,7 @@ importers:
         version: 2.1.6
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       es-toolkit:
         specifier: ^1.25.2
         version: 1.25.2
@@ -447,8 +447,8 @@ importers:
         specifier: workspace:*
         version: link:../core
       eslint-plugin-astro:
-        specifier: ^1.2.2
-        version: 1.2.2(eslint@8.57.0)(typescript@5.5.4)
+        specifier: ^1.3.1
+        version: 1.3.1(eslint@8.57.0)(typescript@5.5.4)
       eslint-plugin-mdx:
         specifier: ^3.1.5
         version: 3.1.5(eslint@8.57.0)
@@ -458,6 +458,9 @@ importers:
       nanostores:
         specifier: ^0.10.3
         version: 0.10.3
+      postcss-nested:
+        specifier: ^7.0.2
+        version: 7.0.2(postcss@8.4.47)
       sharp:
         specifier: ^0.33.4
         version: 0.33.4
@@ -555,7 +558,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
     devDependencies:
       '@dmno/eslint-config':
         specifier: workspace:*
@@ -595,7 +598,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       fastify-plugin:
         specifier: ^5.0.1
         version: 5.0.1
@@ -657,7 +660,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       lodash-es:
         specifier: 'catalog:'
         version: 4.17.21
@@ -706,7 +709,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       lodash-es:
         specifier: 'catalog:'
         version: 4.17.21
@@ -746,7 +749,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       execa:
         specifier: ^9.5.1
         version: 9.5.2
@@ -792,7 +795,7 @@ importers:
         version: 7.3.0
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       lodash-es:
         specifier: 'catalog:'
         version: 4.17.21
@@ -826,7 +829,7 @@ importers:
     dependencies:
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       lodash-es:
         specifier: 'catalog:'
         version: 4.17.21
@@ -863,7 +866,7 @@ importers:
         version: 0.1.1
       debug:
         specifier: 'catalog:'
-        version: 4.3.7(supports-color@9.4.0)
+        version: 4.3.7
       kleur:
         specifier: ^4.1.5
         version: 4.1.5
@@ -1124,9 +1127,6 @@ packages:
   '@astrojs/compiler@2.10.3':
     resolution: {integrity: sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw==}
 
-  '@astrojs/compiler@2.8.1':
-    resolution: {integrity: sha512-NGfPAgU/9rvDEwsXu82RI1AxiivaxtEYBK9saW1f+2fTHUUqCJQ27HYtb2akG2QxCmFikgZ9zk26BEWgiHho1Q==}
-
   '@astrojs/internal-helpers@0.4.1':
     resolution: {integrity: sha512-bMf9jFihO8YP940uD70SI/RDzIhUHJAolWVcO1v5PUivxGKvfLZTLTVVxEYzGYyPsA3ivdLNqMnL5VgmQySa+g==}
 
@@ -3092,9 +3092,6 @@ packages:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
@@ -6313,8 +6310,8 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-compat-utils@0.5.0:
-    resolution: {integrity: sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==}
+  eslint-compat-utils@0.6.4:
+    resolution: {integrity: sha512-/u+GQt8NMfXO8w17QendT4gvO5acfxQsAKirAt0LVxDnr2N8YLCVbregaNc/Yhp7NM128DwCaRvr8PLDfeNkQw==}
     engines: {node: '>=12'}
     peerDependencies:
       eslint: '>=6.0.0'
@@ -6382,8 +6379,8 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
-  eslint-plugin-astro@1.2.2:
-    resolution: {integrity: sha512-3UUWo/gwk/YhurYpFKgLJswV33kR9zhtzXk+u2g3WE5Px07wDtWSR3PoyPadHERA4g/9TCCGjsimU/TZyUKxow==}
+  eslint-plugin-astro@1.3.1:
+    resolution: {integrity: sha512-2XaLCMQm8htW1UvJvy1Zcmg8l0ziskitiUfJTn/w1Mk7r4Mxj0fZeNpN6UTNrm64XBIXSa5h8UCGrg8mdu47+g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: '>=8.57.0'
@@ -7111,10 +7108,6 @@ packages:
     resolution: {integrity: sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==}
     engines: {node: '>=18'}
 
-  globals@15.3.0:
-    resolution: {integrity: sha512-cCdyVjIUVTtX8ZsPkq1oCsOsLmGIswqnjZYMJJTGaNApj1yHtLSymKhwH51ttirREn75z3p4k051clwg7rvNKA==}
-    engines: {node: '>=18'}
-
   globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
     engines: {node: '>= 0.4'}
@@ -9621,9 +9614,6 @@ packages:
     resolution: {integrity: sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==}
     engines: {node: '>=14.16'}
 
-  pkg-types@1.1.0:
-    resolution: {integrity: sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==}
-
   pkg-types@1.1.3:
     resolution: {integrity: sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==}
 
@@ -9709,10 +9699,20 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-nested@7.0.2:
+    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
   postcss-selector-parser@6.0.16:
     resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.0.0:
+    resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==}
+    engines: {node: '>=4'}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -12493,8 +12493,6 @@ snapshots:
 
   '@astrojs/compiler@2.10.3': {}
 
-  '@astrojs/compiler@2.8.1': {}
-
   '@astrojs/internal-helpers@0.4.1': {}
 
   '@astrojs/language-server@2.14.2(typescript@5.5.4)':
@@ -12614,7 +12612,7 @@ snapshots:
   '@astrojs/telemetry@3.1.0':
     dependencies:
       ci-info: 4.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       dlv: 1.1.3
       dset: 3.1.3
       is-docker: 3.0.0
@@ -12668,7 +12666,7 @@ snapshots:
       '@babel/traverse': 7.24.7
       '@babel/types': 7.24.7
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -12688,7 +12686,7 @@ snapshots:
       '@babel/traverse': 7.25.6
       '@babel/types': 7.25.6
       convert-source-map: 2.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -13048,7 +13046,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.25.6
       '@babel/types': 7.24.7
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -13060,7 +13058,7 @@ snapshots:
       '@babel/parser': 7.25.6
       '@babel/template': 7.25.0
       '@babel/types': 7.25.6
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -13960,7 +13958,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.1
@@ -14060,7 +14058,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -14102,7 +14100,7 @@ snapshots:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
       '@iconify/types': 2.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       kolorist: 1.8.0
       local-pkg: 0.5.0
       mlly: 1.7.1
@@ -14114,7 +14112,7 @@ snapshots:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
       '@iconify/types': 2.0.0
-      debug: 4.4.0
+      debug: 4.4.0(supports-color@9.4.0)
       globals: 15.13.0
       kolorist: 1.8.0
       local-pkg: 0.5.1
@@ -14354,8 +14352,6 @@ snapshots:
 
   '@jridgewell/set-array@1.2.1': {}
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
-
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
   '@jridgewell/trace-mapping@0.3.25':
@@ -15846,7 +15842,7 @@ snapshots:
       '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4)
       '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -15866,7 +15862,7 @@ snapshots:
       '@typescript-eslint/type-utils': 7.7.1(eslint@8.57.0)(typescript@5.5.4)
       '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 7.7.1
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -15884,7 +15880,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.5.4
@@ -15897,7 +15893,7 @@ snapshots:
       '@typescript-eslint/types': 7.7.1
       '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.5.4)
       '@typescript-eslint/visitor-keys': 7.7.1
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
     optionalDependencies:
       typescript: 5.5.4
@@ -15918,7 +15914,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4)
       '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4)
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
@@ -15930,7 +15926,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.5.4)
       '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.5.4)
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.5.4)
     optionalDependencies:
@@ -15948,7 +15944,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.4.0(supports-color@9.4.0)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.6.3
@@ -15962,7 +15958,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 6.21.0
       '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -15977,7 +15973,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 7.7.1
       '@typescript-eslint/visitor-keys': 7.7.1
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.4
@@ -16713,6 +16709,10 @@ snapshots:
     dependencies:
       acorn: 8.12.1
 
+  acorn-jsx@5.3.2(acorn@8.14.0):
+    dependencies:
+      acorn: 8.14.0
+
   acorn-typescript@1.4.13(acorn@8.12.1):
     dependencies:
       acorn: 8.12.1
@@ -16729,13 +16729,13 @@ snapshots:
 
   agent-base@6.0.2(supports-color@9.4.0):
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.4.0(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.1:
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -16987,12 +16987,12 @@ snapshots:
 
   astro-eslint-parser@1.0.2(typescript@5.5.4):
     dependencies:
-      '@astrojs/compiler': 2.8.1
+      '@astrojs/compiler': 2.10.3
       '@typescript-eslint/scope-manager': 7.7.1
       '@typescript-eslint/types': 7.7.1
       '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.5.4)
-      astrojs-compiler-sync: 1.0.0(@astrojs/compiler@2.8.1)
-      debug: 4.3.7(supports-color@9.4.0)
+      astrojs-compiler-sync: 1.0.0(@astrojs/compiler@2.10.3)
+      debug: 4.4.0(supports-color@9.4.0)
       entities: 4.5.0
       eslint-scope: 8.0.1
       eslint-visitor-keys: 4.0.0
@@ -17062,7 +17062,7 @@ snapshots:
       common-ancestor-path: 1.0.1
       cookie: 0.6.0
       cssesc: 3.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       deterministic-object-hash: 2.0.2
       devalue: 5.0.0
       diff: 5.2.0
@@ -17122,9 +17122,9 @@ snapshots:
       - terser
       - typescript
 
-  astrojs-compiler-sync@1.0.0(@astrojs/compiler@2.8.1):
+  astrojs-compiler-sync@1.0.0(@astrojs/compiler@2.10.3):
     dependencies:
-      '@astrojs/compiler': 2.8.1
+      '@astrojs/compiler': 2.10.3
       synckit: 0.9.0
 
   async-sema@3.1.1: {}
@@ -17147,7 +17147,7 @@ snapshots:
     dependencies:
       '@fastify/error': 3.4.1
       archy: 1.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       fastq: 1.17.1
     transitivePeerDependencies:
       - supports-color
@@ -17508,7 +17508,7 @@ snapshots:
 
   capnp-ts@0.7.0:
     dependencies:
-      debug: 4.4.0
+      debug: 4.4.0(supports-color@9.4.0)
       tslib: 2.6.2
     transitivePeerDependencies:
       - supports-color
@@ -18069,15 +18069,15 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  debug@4.3.7(supports-color@9.4.0):
+  debug@4.3.7:
     dependencies:
       ms: 2.1.3
-    optionalDependencies:
-      supports-color: 9.4.0
 
-  debug@4.4.0:
+  debug@4.4.0(supports-color@9.4.0):
     dependencies:
       ms: 2.1.3
+    optionalDependencies:
+      supports-color: 9.4.0
 
   decache@4.6.2:
     dependencies:
@@ -18335,7 +18335,7 @@ snapshots:
   engine.io-client@6.6.1:
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       engine.io-parser: 5.2.3
       ws: 8.17.1
       xmlhttprequest-ssl: 2.1.1
@@ -18355,7 +18355,7 @@ snapshots:
       base64id: 2.0.0
       cookie: 0.4.2
       cors: 2.8.5
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       engine.io-parser: 5.2.3
       ws: 8.17.1
     transitivePeerDependencies:
@@ -18719,7 +18719,7 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.0(eslint@8.57.0):
+  eslint-compat-utils@0.6.4(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
       semver: 7.6.3
@@ -18763,7 +18763,7 @@ snapshots:
 
   eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.5.4))(eslint-plugin-import@2.29.1)(eslint@8.57.0):
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       enhanced-resolve: 5.16.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
@@ -18809,17 +18809,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-astro@1.2.2(eslint@8.57.0)(typescript@5.5.4):
+  eslint-plugin-astro@1.3.1(eslint@8.57.0)(typescript@5.5.4):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@typescript-eslint/types': 7.7.1
       astro-eslint-parser: 1.0.2(typescript@5.5.4)
       eslint: 8.57.0
-      eslint-compat-utils: 0.5.0(eslint@8.57.0)
-      globals: 15.3.0
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.16
+      eslint-compat-utils: 0.6.4(eslint@8.57.0)
+      globals: 15.13.0
+      postcss: 8.4.47
+      postcss-selector-parser: 7.0.0
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -18928,7 +18928,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -18962,8 +18962,8 @@ snapshots:
 
   espree@10.0.1:
     dependencies:
-      acorn: 8.12.1
-      acorn-jsx: 5.3.2(acorn@8.12.1)
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
       eslint-visitor-keys: 4.0.0
 
   espree@9.6.1:
@@ -19221,7 +19221,7 @@ snapshots:
 
   extract-zip@2.0.1:
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -19793,8 +19793,6 @@ snapshots:
 
   globals@15.13.0: {}
 
-  globals@15.3.0: {}
-
   globalthis@1.0.3:
     dependencies:
       define-properties: 1.2.1
@@ -20271,14 +20269,14 @@ snapshots:
   https-proxy-agent@5.0.1(supports-color@9.4.0):
     dependencies:
       agent-base: 6.0.2(supports-color@9.4.0)
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.4.0(supports-color@9.4.0)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.4:
     dependencies:
       agent-base: 7.1.1
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -20933,7 +20931,7 @@ snapshots:
       h3: 1.11.1
       http-shutdown: 1.2.2
       jiti: 1.21.0
-      mlly: 1.6.1
+      mlly: 1.7.3
       node-forge: 1.3.1
       pathe: 1.1.2
       std-env: 3.7.0
@@ -21979,7 +21977,7 @@ snapshots:
 
   micromark@2.11.4:
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       parse-entities: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -21987,7 +21985,7 @@ snapshots:
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.4.0(supports-color@9.4.0)
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -22009,7 +22007,7 @@ snapshots:
   micromark@4.0.0:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.1
@@ -22171,14 +22169,14 @@ snapshots:
     dependencies:
       acorn: 8.12.1
       pathe: 1.1.2
-      pkg-types: 1.1.0
+      pkg-types: 1.2.1
       ufo: 1.5.4
 
   mlly@1.7.1:
     dependencies:
       acorn: 8.12.1
       pathe: 1.1.2
-      pkg-types: 1.1.3
+      pkg-types: 1.2.1
       ufo: 1.5.4
 
   mlly@1.7.3:
@@ -23289,16 +23287,10 @@ snapshots:
     dependencies:
       find-up: 6.3.0
 
-  pkg-types@1.1.0:
-    dependencies:
-      confbox: 0.1.7
-      mlly: 1.7.3
-      pathe: 1.1.2
-
   pkg-types@1.1.3:
     dependencies:
       confbox: 0.1.7
-      mlly: 1.7.1
+      mlly: 1.7.3
       pathe: 1.1.2
 
   pkg-types@1.2.1:
@@ -23379,11 +23371,21 @@ snapshots:
       postcss: 8.4.47
       postcss-selector-parser: 6.0.16
 
+  postcss-nested@7.0.2(postcss@8.4.47):
+    dependencies:
+      postcss: 8.4.47
+      postcss-selector-parser: 7.0.0
+
   postcss-selector-parser@6.0.16:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.0.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-value-parser@4.2.0: {}
 
   postcss-values-parser@6.0.2(postcss@8.4.47):
@@ -24507,7 +24509,7 @@ snapshots:
 
   socket.io-adapter@2.5.5:
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       ws: 8.17.1
     transitivePeerDependencies:
       - bufferutil
@@ -24517,7 +24519,7 @@ snapshots:
   socket.io-client@4.8.0:
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       engine.io-client: 6.6.1
       socket.io-parser: 4.2.4
     transitivePeerDependencies:
@@ -24528,7 +24530,7 @@ snapshots:
   socket.io-parser@4.2.4:
     dependencies:
       '@socket.io/component-emitter': 3.1.2
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -24537,7 +24539,7 @@ snapshots:
       accepts: 1.3.8
       base64id: 2.0.0
       cors: 2.8.5
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       engine.io: 6.6.1
       socket.io-adapter: 2.5.5
       socket.io-parser: 4.2.4
@@ -24897,7 +24899,7 @@ snapshots:
 
   tabtab@3.0.2:
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       es6-promisify: 6.1.1
       inquirer: 6.5.2
       minimist: 1.2.8
@@ -25155,7 +25157,7 @@ snapshots:
       cac: 6.7.14
       chokidar: 3.6.0
       consola: 3.2.3
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       esbuild: 0.23.0
       execa: 5.1.1
       globby: 11.1.0
@@ -25182,7 +25184,7 @@ snapshots:
       cac: 6.7.14
       chokidar: 3.6.0
       consola: 3.2.3
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       esbuild: 0.23.0
       execa: 5.1.1
       globby: 11.1.0
@@ -25419,7 +25421,7 @@ snapshots:
       '@types/node': 20.14.12
       '@types/unist': 3.0.2
       concat-stream: 2.0.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       extend: 3.0.2
       glob: 10.3.12
       ignore: 5.3.1
@@ -25597,7 +25599,7 @@ snapshots:
       '@antfu/install-pkg': 0.4.1
       '@antfu/utils': 0.7.10
       '@iconify/utils': 2.1.32
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       kolorist: 1.8.0
       local-pkg: 0.5.0
       unplugin: 1.14.1(webpack-sources@3.2.3)
@@ -25797,7 +25799,7 @@ snapshots:
   vite-node@1.6.0(@types/node@20.14.12)(less@4.2.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       pathe: 1.1.2
       picocolors: 1.1.0
       vite: 5.4.11(@types/node@20.14.12)(less@4.2.0)
@@ -25815,7 +25817,7 @@ snapshots:
   vite-node@2.1.2(@types/node@20.14.12)(less@4.2.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       pathe: 1.1.2
       vite: 5.4.11(@types/node@20.14.12)(less@4.2.0)
     transitivePeerDependencies:
@@ -25833,7 +25835,7 @@ snapshots:
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.21.3)
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       error-stack-parser-es: 0.1.5
       fs-extra: 11.2.0
       open: 10.1.0
@@ -25899,7 +25901,7 @@ snapshots:
 
   vite-tsconfig-paths@5.0.1(typescript@5.5.4)(vite@5.4.11(@types/node@20.14.12)(less@4.2.0)):
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       globrex: 0.1.2
       tsconfck: 3.1.0(typescript@5.5.4)
     optionalDependencies:
@@ -25942,7 +25944,7 @@ snapshots:
       '@vitest/spy': 2.1.2
       '@vitest/utils': 2.1.2
       chai: 5.1.1
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       magic-string: 0.30.12
       pathe: 1.1.2
       std-env: 3.7.0
@@ -26119,7 +26121,7 @@ snapshots:
 
   vue-eslint-parser@9.4.2(eslint@8.57.0):
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -26132,7 +26134,7 @@ snapshots:
 
   vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
       eslint: 8.57.0
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -26193,7 +26195,7 @@ snapshots:
     dependencies:
       chalk: 4.1.2
       commander: 9.5.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -26201,7 +26203,7 @@ snapshots:
     dependencies:
       chalk: 4.1.2
       commander: 9.5.0
-      debug: 4.3.7(supports-color@9.4.0)
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color