From 0e97ec44476ed3af06cbaab7f4fd82c5d20b6f30 Mon Sep 17 00:00:00 2001
From: Theo Ephraim <theo@dmno.dev>
Date: Tue, 24 Dec 2024 20:44:25 -0800
Subject: [PATCH] wrapping up new homepage

---
 packages/docs-site/astro.config.ts            |   4 -
 packages/docs-site/package.json               |   1 +
 .../docs-site/{src => }/postcss.config.cjs    |   1 +
 packages/docs-site/public/_redirects          |   1 +
 .../components/CustomStarlightBanner.astro    |  16 +-
 packages/docs-site/src/components/Hero.astro  |   4 +-
 .../src/components/IconGraph/AnimatedDot.vue  |  28 --
 .../components/IconGraph/ConnectionLine.vue   |  40 --
 .../src/components/IconGraph/IconGraph.vue    | 405 ------------------
 .../docs-site/src/components/LogoBar.astro    |  12 +-
 .../docs-site/src/components/ThemeSelect.vue  |  41 +-
 .../docs-site/src/components/TileButton.vue   |  30 +-
 .../components/homepage/IntegrationTile.vue   |  42 +-
 .../components/homepage/IntegrationsHero.vue  |  18 +-
 .../src/components/homepage/config-example.ts |  16 +-
 .../src/components/layouts/LandingPage.astro  |   7 +-
 .../docs/docs/get-started/quickstart.mdx      |  30 +-
 .../src/pages/_drafts/docs-home.astro         | 404 +++++++++++++++++
 packages/docs-site/src/pages/docs/index.astro | 403 +----------------
 packages/docs-site/src/style/global.less      |   2 +-
 packages/ui-lib/src/components/DotsLoader.vue |  18 +-
 pnpm-lock.yaml                                |  14 +
 22 files changed, 532 insertions(+), 1005 deletions(-)
 rename packages/docs-site/{src => }/postcss.config.cjs (76%)
 delete mode 100644 packages/docs-site/src/components/IconGraph/AnimatedDot.vue
 delete mode 100644 packages/docs-site/src/components/IconGraph/ConnectionLine.vue
 delete mode 100644 packages/docs-site/src/components/IconGraph/IconGraph.vue
 create mode 100644 packages/docs-site/src/pages/_drafts/docs-home.astro

diff --git a/packages/docs-site/astro.config.ts b/packages/docs-site/astro.config.ts
index 12c441de..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: 'Home',
-              link: '/docs/',
-            },
             {
               label: 'Quickstart',
               link: '/docs/get-started/quickstart/',
diff --git a/packages/docs-site/package.json b/packages/docs-site/package.json
index 278140e8..201c5cdc 100644
--- a/packages/docs-site/package.json
+++ b/packages/docs-site/package.json
@@ -40,6 +40,7 @@
     "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/CustomStarlightBanner.astro b/packages/docs-site/src/components/CustomStarlightBanner.astro
index 651bbd97..385c99a1 100644
--- a/packages/docs-site/src/components/CustomStarlightBanner.astro
+++ b/packages/docs-site/src/components/CustomStarlightBanner.astro
@@ -15,15 +15,13 @@ const showDefaultBanner =
       <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>
-              what you think!
-            </div>
-          </>
+          <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>
+            what you think!
+          </div>
         )}
       </div>
     </div>
diff --git a/packages/docs-site/src/components/Hero.astro b/packages/docs-site/src/components/Hero.astro
index a75740b1..76a74f0f 100644
--- a/packages/docs-site/src/components/Hero.astro
+++ b/packages/docs-site/src/components/Hero.astro
@@ -57,8 +57,8 @@ const { heading, subheading } = Astro.props as Props;
     /* the "g" masking is cut off without some padding */
     padding-bottom: 0.1em;
 
-    --color-one: var(--brand-pink);
-    --color-two: var(--brand-purple);
+    --color-one: var(--brand-pink--text);
+    --color-two: var(--brand-purple--text);
 
     background-color: var(--color-two);
     background: linear-gradient(
diff --git a/packages/docs-site/src/components/IconGraph/AnimatedDot.vue b/packages/docs-site/src/components/IconGraph/AnimatedDot.vue
deleted file mode 100644
index bd34ed5a..00000000
--- a/packages/docs-site/src/components/IconGraph/AnimatedDot.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-}>()
-
-const path = computed(() => `M${props.x1},${props.y1} L${props.x2},${props.y2}`)
-</script>
-
-<template>
-  <circle r="4" fill="#6366f1">
-    <animateMotion
-      dur="2s"
-      repeatCount="indefinite"
-      :path="path"
-    />
-    <animate
-      attributeName="opacity"
-      values="0;1;0"
-      dur="2s"
-      repeatCount="indefinite"
-    />
-  </circle>
-</template>
diff --git a/packages/docs-site/src/components/IconGraph/ConnectionLine.vue b/packages/docs-site/src/components/IconGraph/ConnectionLine.vue
deleted file mode 100644
index 9b267f1c..00000000
--- a/packages/docs-site/src/components/IconGraph/ConnectionLine.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import AnimatedDot from './AnimatedDot.vue'
-import { computed } from 'vue'
-
-const activeColor = 'rgb(155 86 245)'; // BRAND PURPLE
-const inactiveColor = 'rgb(209 213 219)';
-
-const props = defineProps<{
-  x1: number
-  y1: number
-  x2: number
-  y2: number
-  active?: boolean
-}>()
-
-const coordinates = computed(() => ({
-  x1: props.x1,
-  y1: props.y1,
-  x2: props.x2,
-  y2: props.y2
-}))
-</script>
-
-<template>
-  <g>
-    <line
-      :x1="coordinates.x1"
-      :y1="coordinates.y1"
-      :x2="coordinates.x2"
-      :y2="coordinates.y2"
-      :stroke="active ? activeColor : inactiveColor"
-      stroke-width="2"
-      :class="{ 'transition-colors duration-300': true }"
-    />
-    <AnimatedDot 
-      v-if="active"
-      v-bind="coordinates"
-    />
-  </g>
-</template>
diff --git a/packages/docs-site/src/components/IconGraph/IconGraph.vue b/packages/docs-site/src/components/IconGraph/IconGraph.vue
deleted file mode 100644
index b6c62759..00000000
--- a/packages/docs-site/src/components/IconGraph/IconGraph.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<template>
-  <div class="container">
-    <div class="dynamic-text-container">
-      <h2>Use secrets from
-        <span class="dynamic-text-wrapper">
-          <transition name="fade" mode="out-in">
-            <span :key="secretIcons[selectedLeftIndex].label" class="dynamic-text active-secret">
-              {{ secretIcons[selectedLeftIndex].label }}
-            </span>
-          </transition>
-        </span>
-        in your
-        <span class="dynamic-text-wrapper">
-          <transition name="fade" mode="out-in">
-            <span :key="integrationIcons[selectedMiddleIndex].label" class="dynamic-text active-integration">
-              {{ integrationIcons[selectedMiddleIndex].label }}
-            </span>
-          </transition>
-        </span>
-        app and deploy to
-        <span class="dynamic-text-wrapper">
-          <transition name="fade" mode="out-in">
-            <span :key="platformIcons[selectedRightIndex].label" class="dynamic-text active-platform">
-              {{ platformIcons[selectedRightIndex].label }}
-            </span>
-          </transition>
-        </span>.
-      </h2>
-    </div>
-    <div class="graph-container">
-      <svg class="svg-container" viewBox="0 0 1000 600">
-        <!-- Left to Center connections -->
-        <template v-for="(_, index) in secretIcons" :key="`left-${index}`">
-          <ConnectionLine
-            :x1="leftX + iconSize"
-            :y1="getVerticalPosition(index, secretIcons.length) + iconSize/2"
-            :x2="centerX"
-            :y2="centerY + centerIconSize/2"
-            :active="index === selectedLeftIndex"
-          />
-        </template>
-
-        <!-- Center to Middle connections -->
-        <template v-for="(_, index) in integrationIcons" :key="`middle-${index}`">
-          <ConnectionLine
-            :x1="centerX + centerIconSize"
-            :y1="centerY + centerIconSize/2"
-            :x2="middleX"
-            :y2="getVerticalPosition(index, integrationIcons.length) + iconSize/2"
-            :active="index === selectedMiddleIndex"
-          />
-        </template>
-
-        <!-- Middle to Right connections -->
-        <template v-for="(_, index) in platformIcons" :key="`right-${index}`">
-          <ConnectionLine
-            :x1="middleX + iconSize"
-            :y1="getRightConnectionY(index, integrationIcons.length) + iconSize/2"
-            :x2="rightX"
-            :y2="getVerticalPosition(index, platformIcons.length) + iconSize/2"
-            :active="index === selectedRightIndex"
-          />
-        </template>
-      </svg>
-      <div class="icon-container">
-        <!-- Left Group -->
-        <div class="column-container left" :style="{ left: leftX + 'px' }">
-          <h2>Secrets</h2>
-          <div
-            v-for="(icon, index) in secretIcons"
-            :key="index"
-            :class="[
-              'icon-base icon-left',
-              index === selectedLeftIndex ? 'icon-selected' : ''
-            ]"
-            :style="{ top: getVerticalPosition(index, secretIcons.length) + 'px' }"
-            :title="icon.label"
-            @click="navigateTo(icon.docsHref)"
-          >
-            <Icon :icon="icon.icon" class="icon" :ssr="true" />
-          </div>
-        </div>
-
-        <!-- Center Node -->
-        <div
-          class="center-icon"
-          :style="{
-            left: centerX + 'px',
-            top: centerY + 'px'
-          }"
-        >
-          <img :src="DMNOLogo.src" class="icon" />
-        </div>
-
-        <!-- Middle Group -->
-        <div class="column-container middle" :style="{ left: middleX + 'px' }">
-          <h2>Integrations</h2>
-          <div
-            v-for="(icon, index) in integrationIcons"
-            :key="index"
-            :class="[
-              'icon-base icon-middle',
-              index === selectedMiddleIndex ? 'icon-selected' : ''
-            ]"
-            :style="{ top: getVerticalPosition(index, integrationIcons.length) + 'px' }"
-            :title="icon.label"
-            @click="navigateTo(icon.docsHref)"
-          >
-            <Icon :icon="icon.icon" class="icon" :ssr="true" />
-          </div>
-        </div>
-
-        <!-- Right Group -->
-        <div class="column-container right" :style="{ left: rightX + 'px' }">
-          <h2>Platforms</h2>
-          <div
-            v-for="(icon, index) in platformIcons"
-            :key="index"
-            :class="[
-              'icon-base icon-right',
-              index === selectedRightIndex ? 'icon-selected' : ''
-            ]"
-            :style="{ top: getVerticalPosition(index, platformIcons.length) + 'px' }"
-            :title="icon.label"
-            @click="navigateTo(icon.docsHref)"
-          >
-            <Icon :icon="icon.icon" class="icon" :ssr="true" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  ref, onMounted, onUnmounted, computed,
-} from 'vue';
-import { Icon } from '@iconify/vue';
-import DMNOLogo from '@dmno/ui-lib/brand-assets/domino-d-gradient-tile.svg';
-import ConnectionLine from './ConnectionLine.vue';
-
-function shuffleArray(array: Array<any>) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-}
-
-const secretIcons = ref([
-  { icon: 'mdi:1password', label: '1Password', docsHref: '/docs/plugins/1password/' },
-  { icon: 'simple-icons:bitwarden', label: 'Bitwarden', docsHref: '/docs/plugins/bitwarden/' },
-  { 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: 'your self-hosted secrets manager', docsHref: '/docs/plugins/overview/' },
-]);
-
-const integrationIcons = ref([
-  { 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: 'logos:vitejs', label: 'Vite', docsHref: '/docs/integrations/vite/' },
-  { icon: 'devicon:nodejs', label: 'Node.js', docsHref: '/docs/integrations/node/' },
-]);
-
-const platformIcons = ref([
-  { 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/' },
-]);
-
-// Selected icon states
-const selectedLeftIndex = ref(0);
-const selectedMiddleIndex = ref(0);
-const selectedRightIndex = ref(0);
-
-const INTERVAL = 4000;
-
-// Cycle through icons every 2 seconds
-onMounted(() => {
-  shuffleArray(secretIcons.value);
-  shuffleArray(integrationIcons.value);
-  shuffleArray(platformIcons.value);
-
-  setInterval(() => {
-    selectedLeftIndex.value = (selectedLeftIndex.value + 1) % secretIcons.value.length;
-  }, INTERVAL);
-
-  setInterval(() => {
-    selectedMiddleIndex.value = (selectedMiddleIndex.value + 1) % integrationIcons.value.length;
-  }, INTERVAL);
-
-  setInterval(() => {
-    selectedRightIndex.value = (selectedRightIndex.value + 1) % platformIcons.value.length;
-  }, INTERVAL);
-
-  setInterval(() => {
-    shuffleArray(secretIcons.value);
-    shuffleArray(integrationIcons.value);
-    shuffleArray(platformIcons.value);
-  }, INTERVAL * platformIcons.value.length);
-});
-
-// Adjusted coordinates for better connections
-const iconSize = 64; // 16 * 4 (w-16)
-const centerIconSize = 80; // 20 * 4 (w-20)
-const spacing = 100;
-const maxWidth = window.innerWidth < 1200 ? window.innerWidth : 1200;
-
-// Column spacing, calculated based on the viewport width
-const colSpacing = ref(maxWidth / 4 || 260); // Use SVG viewBox width divided by 4 columns
-
-const leftX = computed(() => 0);
-const centerX = computed(() => colSpacing.value);
-const middleX = computed(() => colSpacing.value * 2);
-const rightX = computed(() => colSpacing.value * 3);
-
-onMounted(() => {
-  const updateSpacing = () => {
-    colSpacing.value = maxWidth / 4 || 260;
-  };
-
-  window.addEventListener('resize', updateSpacing);
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateSpacing);
-  });
-});
-
-// Calculate vertical positions
-const getVerticalPosition = (index: number, total: number) => {
-  const totalHeight = (total - 1) * spacing;
-  const startY = (600 - totalHeight) / 2;
-  return startY + (index * spacing);
-};
-
-// Center Y position - align with middle of all icons
-const centerY = 300 - centerIconSize / 2;
-
-// Calculate connection points for the right group
-const getRightConnectionY = (rightIndex: number, middleTotal: number) => {
-  const middleSpacing = (middleTotal - 1) * spacing;
-  const middleStartY = (600 - middleSpacing) / 2;
-  const segmentSize = middleSpacing / (platformIcons.value.length - 1);
-  return middleStartY + (rightIndex * segmentSize);
-};
-
-const navigateTo = (href: string) => {
-  window.location.href = href;
-};
-</script>
-
-<style>
-.container {
-  margin-left: 40px;
-  width: 100%;
-  display: flex;
-  align-items: left;
-  justify-content: left;
-  flex-wrap: wrap;
-}
-
-.graph-container {
-  position: relative;
-  width: 1000px;
-  height: 600px;
-  @media (max-width: 768px) {
-    display: none;
-  }
-}
-
-.svg-container {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.icon-container {
-  position: absolute;
-  max-width: 1200px;
-  min-width: 800px;
-  display: flex;
-}
-
-.dynamic-text-container {
-  margin: 2rem 0;
-}
-
-.dynamic-text-container > .dynamic-text {
-  color: rgb(147 51 234); /* text-purple-600 */
-  &:nth-of-type(1) {
-    color: rgb(41, 232, 232);
-  }
-
-  &:nth-of-type(2) {
-    color: rgb(116, 240, 161);
-  }
-}
-
-.icon-base {
-  width: 4rem; /* w-16 */
-  height: 4rem; /* h-16 */
-  background-color: white;
-  border-radius: 0.5rem; /* rounded-lg */
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* shadow-lg */
-  padding: 0.75rem; /* p-3 */
-  transition-property: all;
-  transition-duration: 300ms;
-  position: absolute;
-  cursor: pointer;
-}
-
-.icon-base:hover {
-  transform: scale(1.1);
-}
-
-.icon-selected {
-  transform: scale(1.1);
-  border-width: 2px;
-}
-
-/* todo user brand colors */
-
-.icon-left {
-  border-color: rgb(156 163 175);
-}
-
-.icon-left.icon-selected {
-  border: 2px solid rgb(41, 232, 232);
-}
-
-.icon-middle.icon-selected {
-  border: 2px solid rgb(116, 240, 161);
-}
-
-.icon-right.icon-selected {
-  border: 2px solid rgb(243, 125, 227);
-}
-
-.center-icon {
-  position: absolute;
-  width: 5rem; /* w-20 */
-  height: 5rem; /* h-20 */
-  background-color: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  padding: 1rem; /* p-4 */
-  transition-property: transform;
-}
-
-.center-icon:hover {
-  transform: scale(1.1);
-}
-
-.icon {
-  width: 100%;
-  height: 100%;
-  color: rgb(156 163 175); /* text-gray-400 */
-}
-
-.center-icon .icon {
-  color: rgb(147 51 234); /* text-purple-600 */
-}
-
-.column-container {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  /* gap: 1rem; */
-}
-
-.column-container > h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: rgb(221, 226, 233); /* text-gray-600 */
-  text-align: left;
-}
-
-.dynamic-text-wrapper {
-  display: inline-block;
-  color: rgb(147 51 234); /* text-purple-600 */
-  &:nth-of-type(1) {
-    color: rgb(41, 232, 232);
-  }
-
-  &:nth-of-type(2) {
-    color: rgb(116, 240, 161);
-  }
-  /* min-width: 100px; Adjust based on your content */
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-</style>
diff --git a/packages/docs-site/src/components/LogoBar.astro b/packages/docs-site/src/components/LogoBar.astro
index 17430443..bcc5c43c 100644
--- a/packages/docs-site/src/components/LogoBar.astro
+++ b/packages/docs-site/src/components/LogoBar.astro
@@ -13,6 +13,10 @@
     gap: 40px;
     align-items: center;
     justify-content: center;
+    color: white;
+    html[data-theme="light"] & {
+      color: black;
+    }
 
     gap: 20px;
     --logo-size: 50px;
@@ -29,14 +33,12 @@
       grid-template-columns: 4fr 5fr;
     } */
 
-    > div,
-    > a {
-      /* flex-grow: 1; */
+    :global(> div),
+    :global(> a) {
       color: currentColor;
       /* background: red; */
-      > svg {
+      :global(> svg) {
         display: block;
-        width: 100%;
         height: auto;
         max-height: var(--logo-size);
         min-width: var(--logo-size);
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
index 85ffa271..d6ae1e26 100644
--- a/packages/docs-site/src/components/TileButton.vue
+++ b/packages/docs-site/src/components/TileButton.vue
@@ -18,9 +18,8 @@ a.tile-button(
 </template>
 
 <script setup lang="ts">
-import { onMount } from 'nanostores';
 import {
-  ref, computed, type PropType, onBeforeMount,
+  computed,
 } from 'vue';
 
 const { size = 'm' } = defineProps<{
@@ -91,24 +90,23 @@ const computedClasses = computed(() => ({
   cursor: pointer;
   text-decoration: none;
   font-weight: bold;
-  width: max-content;
   position: relative;
 
-  transition: --tile-thickness .2s cubic-bezier(.3, .7, .4, 1);;
+  /* 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;
   }
 
-  /* slower slide back in */
-  transition: --tile-thickness .6s cubic-bezier(.3, .7, .4, 1);
 
   &:hover, &:focus {
     --tile-thickness: var(--full-tile-thickness);
-    /* slide out more quickly */
+    /* slide out more quickly, with some bounce */
     transition: --tile-thickness .25s cubic-bezier(.3, .7, .4, 1.5);
   }
   &:active {
@@ -120,16 +118,15 @@ const computedClasses = computed(() => ({
 .tile-button__front {
   background: var(--brand-purple);
   border-radius: var(--tile-radius);
-  color: white;
+  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);
-  height: 100%;
+  color: white;
   position: relative;
-  z-index: 3;
   display: grid;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--tile-edge-color);
-  transform: translate(var(--tile-thickness), var(--tile-thickness));
 }
 .tile-button__back {
   border-radius: var(--tile-radius);
@@ -143,20 +140,13 @@ const computedClasses = computed(() => ({
   /* 3d top face */
   &:before {
     content: '';
-    /* right: calc(-.2 * var(--tile-radius)); */
-
     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;
-    /* background: var(--tile-shadow-color); */
     position: absolute;
     transform: skewX(45deg);
-    /* box-shadow: inset 0px -4px 4px rgba(0,0,0,.3); */
     background: #AAA;
-    /* border-top: 1px solid var(--tile-edge-color); */
     border-right: 1px solid var(--tile-edge-color);
   }
   /* 3d left face */
@@ -170,9 +160,7 @@ const computedClasses = computed(() => ({
     background: #555;
     position: absolute;
     transform: skewY(45deg);
-    /* border-left: 1px solid var(--tile-edge-color); */
     border-bottom: 1px solid var(--tile-edge-color);
-    /* box-shadow: inset -4px 0px 4px rgba(0,0,0,.3); */
   }
 }
 .tile-button__shadow {
diff --git a/packages/docs-site/src/components/homepage/IntegrationTile.vue b/packages/docs-site/src/components/homepage/IntegrationTile.vue
index 6b4d5ee5..cb997cdd 100644
--- a/packages/docs-site/src/components/homepage/IntegrationTile.vue
+++ b/packages/docs-site/src/components/homepage/IntegrationTile.vue
@@ -44,17 +44,11 @@ const computedClasses = computed(() => ({
 .icon-graph-tile {
   --tile-radius: calc(.05 * var(--tile-width));
   --tile-thickness: calc(.04 * var(--tile-width));
-  --tile-shadow-color: #999;
   --tile-edge-color: #555;
 
   width: var(--tile-width);
   height: calc(var(--tile-width) / 2);
-
-  border-radius: var(--tile-radius);
   position: relative;
-  /* box-shadow: -3px -3px 0 var(--shadow-color); */
-
-  z-index: 2;
 
   &:hover {
     --tile-edge-color: var(--accent-color, black);
@@ -103,57 +97,53 @@ const computedClasses = computed(() => ({
   z-index: 3;
   display: grid;
   position: relative;
-  border-radius: inherit;
+  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;
-  background: var(--tile-shadow-color);
   position: absolute;
   margin-left: calc(-1 * var(--tile-thickness));
   margin-top: calc(-1 * var(--tile-thickness));
   z-index: 2;
-  border-radius: inherit;
-  /* rounded corner 3d color */
-  background: #CCC;
   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: '';
-    /* right: calc(-.2 * var(--tile-radius)); */
-
-    top: 0;
-    left: calc(var(--tile-thickness) + var(--tile-radius) / 2);
+    background: #FFF;
+    top: -1px;
+    left: calc(1.5 * var(--tile-thickness));
     right: calc(-.25 * var(--tile-thickness));
-    height: calc(var(--tile-thickness));
+    height: calc(1.5 * var(--tile-thickness));
     border-top-right-radius: 2px;
-    /* background: var(--tile-shadow-color); */
     position: absolute;
     transform: skewX(45deg);
-    /* box-shadow: inset 0px -4px 4px rgba(0,0,0,.3); */
-    background: #FFF;
-    /* border-top: 1px solid var(--tile-edge-color); */
     border-right: 1px solid var(--tile-edge-color);
+    border-top: 1px solid var(--tile-edge-color);
   }
   /* 3d left face */
   &:after {
     content: '';
-    left: 0;
-    top: calc(var(--tile-thickness) + var(--tile-radius) / 2);
+    background: #999;
+    left: -1px;
+    top: calc(1.5 * var(--tile-thickness));
     bottom: calc(-.25 * var(--tile-thickness));
-    width: calc(var(--tile-thickness));
+    width: calc(1.5 * var(--tile-thickness));
     border-bottom-left-radius: 2px;
-    background: #999;
     position: absolute;
     transform: skewY(45deg);
-    /* border-left: 1px solid var(--tile-edge-color); */
     border-bottom: 1px solid var(--tile-edge-color);
-    /* box-shadow: inset -4px 0px 4px rgba(0,0,0,.3); */
+    border-left: 1px solid var(--tile-edge-color);
   }
 }
 .icon-graph-tile__shadow {
diff --git a/packages/docs-site/src/components/homepage/IntegrationsHero.vue b/packages/docs-site/src/components/homepage/IntegrationsHero.vue
index 74f4cb4d..cef7b8d4 100644
--- a/packages/docs-site/src/components/homepage/IntegrationsHero.vue
+++ b/packages/docs-site/src/components/homepage/IntegrationsHero.vue
@@ -72,7 +72,7 @@ const activeIndexes = reactive({
   platform: Math.floor(Math.random() * TILES.platform.length),
 });
 
-function getIndexes(i, arrayLength) {
+function getIndexes(i: number, arrayLength: number) {
   return [
     (arrayLength + i - 2) % arrayLength,
     (arrayLength + i - 1) % arrayLength,
@@ -92,10 +92,11 @@ const hoverIndexes = reactive({
   integration: null,
 });
 
-const rowEls = ref({});
+const rowEls = reactive<Partial<Record<keyof typeof TILES, HTMLElement>>>({});
 
 function initRowAnimationRestart(type: keyof typeof TILES) {
-  const el = rowEls.value[type];
+  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
@@ -104,7 +105,7 @@ function initRowAnimationRestart(type: keyof typeof TILES) {
     el.style.animation = 'none';
     // eslint-disable-next-line no-void
     void el.offsetWidth; // trigger reflow
-    el.style.animation = null;
+    el.style.animation = '';
   });
 }
 
@@ -136,7 +137,6 @@ onMounted(() => {
   max-width: 800px;
   width: 100%;
   margin: 0 auto;
-  color: white;
 
   position: relative;
   border-radius: 8px;
@@ -173,7 +173,7 @@ onMounted(() => {
     }
   }
   .integrations-hero__tiles {
-    width: calc(3 * var(--tile-width));
+    width: calc(3 * var(--tile-width) + 2 * var(--tile-spacing));
     justify-self: center;
 
     /* overlay to see active area */
@@ -222,13 +222,13 @@ onMounted(() => {
   }
   .integrations-hero__text, .integrations-hero__tiles {
     > div:nth-child(1){
-      --accent-color: var(--brand-pink);
+      --accent-color: var(--brand-pink--text);
     }
     > div:nth-child(2){
-      --accent-color: var(--brand-green);
+      --accent-color: var(--brand-green--text);
     }
     > div:nth-child(3){
-      --accent-color: var(--brand-cyan);
+      --accent-color: var(--brand-cyan--text);
     }
   }
 
diff --git a/packages/docs-site/src/components/homepage/config-example.ts b/packages/docs-site/src/components/homepage/config-example.ts
index d34d5094..af7d47d3 100644
--- a/packages/docs-site/src/components/homepage/config-example.ts
+++ b/packages/docs-site/src/components/homepage/config-example.ts
@@ -5,21 +5,11 @@ import { EncryptedVaultDmnoPlugin, EncryptedVaultTypes } from '@dmno/encrypted-v
 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'),
-});
+const onePassSecrets = new OnePasswordDmnoPlugin('1pass', { token: configPath('OP_TOKEN') });
 // or store them encrypted within your repo
-const MyProdVault = new EncryptedVaultDmnoPlugin('vault', {
-  key: configPath('DMNO_VAULT_KEY'),
-});
+const vaultFileSecrets = 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
@@ -35,7 +25,7 @@ export default defineDmnoService({
       // load different values based on any other value
       value: switchBy('DMNO_ENV', {
         _default: 'my-dev-key',
-        production: OnePass.item(),
+        production: onePassSecrets.item(),
       }),
     },
     SAAS_PROJECT_TAG: {
diff --git a/packages/docs-site/src/components/layouts/LandingPage.astro b/packages/docs-site/src/components/layouts/LandingPage.astro
index cbf97348..0e9ad890 100644
--- a/packages/docs-site/src/components/layouts/LandingPage.astro
+++ b/packages/docs-site/src/components/layouts/LandingPage.astro
@@ -37,18 +37,19 @@ const {
           <p>Many use cases don't require anything extra, but our drop-in integrations make things even simpler</p>
         </div>
         <LogoBar>
-          <a href="/docs/integrations/remix/"><Icon name="devicon:remix" /></a>
+          {/* 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="logos:fastify-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="devicon:vercel" /></a>
+          <a href="/docs/platforms/vercel/"><Icon name="simple-icons:vercel" /></a>
           <a href="/docs/platforms/netlify/"><Icon name="devicon:netlify" /></a>
         </LogoBar>
         
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 089c4369..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,6 +1,6 @@
 ---
-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';
@@ -8,17 +8,9 @@ import TabbedCode from '@/components/TabbedCode.astro';
 
 ## Current requirements
 
-DMNO Config requires the following: 
-
-- Node.js > 20.x
-- One of the following:
-  - `pnpm`
-  - `npm`
-  - `yarn`
-  - `bun`
-
-Optionally: 
-- TypeScript
+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. 
@@ -31,16 +23,16 @@ While TypeScript is not required in your applications, you will get the full fea
     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**
@@ -50,9 +42,9 @@ While TypeScript is not required in your applications, you will get the full fea
 
 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 1f9df880..8a76e86e 100644
--- a/packages/docs-site/src/pages/docs/index.astro
+++ b/packages/docs-site/src/pages/docs/index.astro
@@ -1,404 +1,9 @@
 ---
-// ! 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>
+---
 
+<!-- will be handled by a cloudflare redirect when deployed -->
+<p>redirecting</p>
 <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);
-      }
-    });
+  window.location.href = "/docs/get-started/quickstart/";
 </script>
diff --git a/packages/docs-site/src/style/global.less b/packages/docs-site/src/style/global.less
index 93bf43cb..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%;
diff --git a/packages/ui-lib/src/components/DotsLoader.vue b/packages/ui-lib/src/components/DotsLoader.vue
index b9c63bda..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,7 +10,9 @@
 
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import {
+  computed, onMounted, ref,
+} from 'vue';
 
 const props = defineProps({
   autoPlay: { type: Boolean },
@@ -44,10 +46,15 @@ const POSITION_STEPS: Array<Array<PositionNames>> = [
 
 
 const NUM_POSITIONS = POSITION_STEPS.length;
+const isMounted = ref(false);
 
 const counter = ref(props.startAt ? props.startAt - 1 : 0);
-onMounted(() => {
+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;
@@ -93,16 +100,19 @@ defineExpose({ start, stop });
 
   --dot-size: 18%;
 
-  &.dots-loader--1 > div:first-child {
+  &.--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 4b078362..645ba393 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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
@@ -9696,6 +9699,12 @@ 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'}
@@ -23362,6 +23371,11 @@ 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