hero section

packages/docs/.npmrc

@@ -1 +1,4 @@
-shamefully-hoist=true
+shamefully-hoist=true
+always-auth=true
+//npm.greensock.com/:_authToken=16fa9441-3df7-431c-b385-c54779b8ed45
+@gsap:registry=https://npm.greensock.com

packages/docs/app.config.ts

@@ -21,7 +21,7 @@ export default defineAppConfig({
       exclude: []
     },
     main: {
-      padded: true,
+      padded: false,
       fluid: true
     },
     header: {

packages/docs/app.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// import { myriad } from "@myriadjs/core";
+// myriad({
+//   foreground: "#00008b",
+//   background: "#ffffff",
+//   accents: ["#ff9400"],
+//   custom: {
+//     link: '#0000ff',
+//   },
+// }, {
+//   readability: 4,
+// }).attach()
+</script>
+
+<template>
+  <Layout>
+    <NuxtPage />
+  </Layout>
+</template>
+
+<style lang="scss">
+@import './css';
+
+body {
+  background: var(--background-10);
+  color: var(--foreground);
+}
+
+.containerx {
+  display: flex;
+  gap: var(--space-s);
+  flex-direction: column;
+
+  border-radius: var(--radius);
+  //padding: var(--space-xl);
+  background: var(--background);
+  margin-bottom: var(--space-xl);
+}
+
+html {
+  --elements-backdrop-background: var(--background) !important;
+  --docus-header-title-color-static: var(--background-10) !important;
+  --docus-body-color: var(--background-20) !important;
+  --docus-body-backgroundColor: var(--background) !important;
+  --typography-body-backgroundColor: var(--background) !important;
+  --typography-body-color: var(--foreground) !important;
+
+  ---13e-button-primary: var(--accent) !important;
+  ---uk-p-button-secondary: var(--accent) !important;
+  --elements-text-primary-color-static: var(--foreground) !important;
+  --elements-border-primary-static: var(--background-10) !important;
+
+  --color-primary-400: var(--accent) !important;
+}
+
+h1 {
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 0.8;
+}
+
+p {
+  max-width: 75ch;
+}
+
+h1,
+h2,
+h3,
+h4,
+p,
+a,
+a .title,
+button,
+body {
+  color: var(--foreground) !important;
+}
+
+a.active {
+  color: var(--accent) !important;
+}
+
+.button-link {
+  color: var(--accent-contrast) !important;
+  background-color: var(--accent) !important;
+}
+
+.terminal {
+  color: var(--foreground) !important;
+  background-color: var(--background) !important;
+  border: 1px solid var(--background-10) !important;
+}
+
+.terminal .header {
+  background-color: var(--background-10) !important;
+  border-bottom: 1px solid var(--background-10) !important;
+}
+
+.terminal .prompt {
+  background-color: var(--background-20) !important;
+  color: var(--foreground) !important;
+}
+
+.terminal .copied {
+  background-color: var(--background-10) !important;
+  color: var(--foreground) !important;
+}
+</style>

packages/docs/components/Layout.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { config } = useDocus()
+
+useHead({
+  titleTemplate: config.value.titleTemplate,
+  meta: [{ name: 'twitter:card', content: 'summary_large_image' }]
+})
+
+useContentHead(config.value as any)
+</script>
+
+<template>
+  <div class="app-layout">
+    <AppLoadingBar />
+    <main>
+      <slot />
+    </main>
+    <AppFooter />
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space);
+}
+</style>

packages/docs/components/Logo.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup></script>
+
+<template>
+  <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.04 244.17">
+    <circle class="main-circle" cx="122.08" cy="122.08" r="109.08" />
+    <circle class="moon-circle" cx="203.31" cy="52.19" r="46.72" />
+  </svg>
+</template>
+
+<style scoped>
+#logo .main-circle {
+  fill: none;
+  stroke: var(--foreground);
+  stroke-miterlimit: 2;
+  stroke-width: 26px;
+}
+
+#logo .moon-circle {
+  fill: var(--foreground);
+  stroke-width: 0px;
+}
+</style>

packages/docs/components/content/Hero.vue

@@ -1,10 +1,128 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+gsap.registerPlugin(ScrollTrigger)
+
+const hero = ref<HTMLElement>()
+const logo = ref<HTMLElement>()
+const circle = ref<HTMLElement>()
+const content = ref<HTMLElement>()
+
+onMounted(() => {
+  if (!process.client) return
+
+  if (!hero.value) return
+  gsap.to(hero.value, {
+    y: 400,
+    scrollTrigger: {
+      trigger: hero.value,
+      start: 'top top',
+      end: 'bottom top',
+      scrub: true
+    }
+  })
+
+  if (!logo.value) return
+  gsap.to(logo.value, {
+    rotate: 360,
+    width: '80rem',
+    scrollTrigger: {
+      trigger: hero.value,
+      start: 'top top',
+      end: 'bottom top',
+      scrub: true
+    }
+  })
+
+  if (!circle.value) return
+  gsap.to(circle.value, {
+    y: 400,
+    scrollTrigger: {
+      trigger: hero.value,
+      start: 'top top',
+      end: 'bottom top',
+      scrub: true
+    }
+  })
+
+  if (!content.value) return
+  gsap.to(content.value, {
+    y: -700,
+    scrollTrigger: {
+      trigger: hero.value,
+      start: 'top top',
+      end: 'bottom top',
+      scrub: true
+    }
+  })
+})
+</script>
 
 <template>
-  <div>
-    <ProseH1>Umbra</ProseH1>
-    <ProseP> Umbra is a design system for building modern websites and applications. </ProseP>
+  <div ref="circle" class="circle" />
+  <div ref="hero" class="hero">
+    <div ref="logo" class="umbra-logo">
+      <Logo />
+    </div>
+    <div ref="content" class="content">
+      <ProseH1>Umbra</ProseH1>
+      <ProseP>A theme management library to rule them all</ProseP>
+      <ProseP>
+        Makes it easy to modify and manage your theme. Switch between themes. Change theme.
+        Automatic dark/light mode. Monitor theme accessibility with the cutting edge standards of
+        APCA. Perfect parity with radix-colors.
+      </ProseP>
+      <ProseP>
+        Start simple and scale theme complexity infinitely without any friction. You can decide to
+        theme every element on your site differently at a moments notice without any need to
+        reorganize anything at all. Just plug and play. Scale to infinity.
+      </ProseP>
+      <ProseP>
+        Boss-man randomly wants to be able to dynamically change the color of that one card? Done.
+        Need more extreme variant in theming customisations? Then use a color alias layer that lets
+        you get as complex as you want.
+      </ProseP>
+      <ProseP>
+        Or keep it all super simple, umbra lets you manage it all from a single source and very
+        quickly. Change a color and watch the other colors adjust themselves to your change instead
+        of having to manually shift everything every time you need to change something.
+      </ProseP>
+      <ProseP>
+        It's more than just a theme generator, its a theme manager. The generation part is just the
+        backdrop that makes adjustments quick and easy to do. You can can manually dictate
+        everything yourself if and when you need to.
+      </ProseP>
+      <ProseP>
+        Start simple, get as complex as you want, scale infinitely. And if you decide you no longer
+        want Umbra, removing it is as easy as copying the output and pasting it yourself. You are
+        never locked into this library. This way Umbra will always be a safe bet for the future.
+      </ProseP>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.umbra-logo {
+  width: 8rem;
+}
+
+.circle {
+  position: absolute;
+  left: 0px;
+  top: -87vw;
+  height: 100vw;
+  width: 100vw;
+  background: var(--background);
+  border-radius: 60rem;
+  box-shadow: 0px 100px 160px 27px var(--background);
+}
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  padding-bottom: 12rem;
+  height: 100vh;
+}
+</style>

packages/docs/content/0.index.md

@@ -13,8 +13,6 @@ main:
 ::
 
 ::card-grid
-#title
-What's included
 
 #root
 :ellipsis{left=0px width=40rem top=10rem blur=140px}

packages/docs/css/block.scss

@@ -0,0 +1,73 @@
+:root {
+  --block-size: 3em;
+  --block-inner-size: calc(var(--block-size) - var(--space-s));
+
+  --border-size: 1px;
+  --border-color: var(--foreground);
+  --border-style: solid;
+  --border:
+    var(--border-size) 
+    var(--border-style)
+    var(--border-color);
+}
+
+.page {
+  margin: auto;
+  max-width: calc(100vw - var(--space-xl));
+  width: 2400px;
+  transition: background .4s ease-in-out;
+
+  @media (max-width: 500px) {
+    max-width: calc(100vw);
+  }
+
+  @media (max-width: 2000px) {
+    width: 1300px;
+  }
+}
+
+.block {
+  display: flex;
+  align-items: center;
+  height: var(--block-size);
+  padding: 0px var(--space-s);
+}
+
+.rounded {
+  border-radius: var(--radius);
+}
+
+.border {
+  border: var(--border);
+  border-radius: var(--radius);
+}
+
+.panel {
+  border-radius: var(--radius);
+  padding: var(--space-m);
+  background-color: var(--background-10);
+}
+
+.compact-panel {
+  border-radius: var(--radius);
+  padding: var(--space-s);
+  background-color: var(--background-10);
+}
+
+.post-flex {
+  display: flex;
+  gap: var(--space-s);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.color-flip {
+  filter: invert(90);
+  img, .img {
+    filter: invert(1);
+    &::after {
+      filter: invert(90);
+    }
+  }
+}