Homepage stuff

Author: jlukic

docs/public/images/background-gradient.webp

@@ -19,7 +19,7 @@
   --nav-menu-title-icon-color: inherit;
   --nav-menu-title-icon-opacity: 0.4;
   --nav-menu-title-icon-width: 1.5rem;
-  --nav-menu-title-icon-distance: 1rem;
+  --nav-menu-title-icon-distance: 10px;
 
   --nav-menu-title-icon-active-opacity: 1;
 

docs/public/images/ui.png

@@ -7,29 +7,92 @@
     position: absolute;
     top: 1rem;
     width: 100%;
+    z-index: var(--float-layer);
   }
 
   aboveFold {
     color: var(--standard-80);
     background-image: var(--angled-gradient);
-    display: block;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
+    contain: content;
     height: 620px;
+    perspective: 1000px;
+
+
+    content {
+      position: relative;
+      width: 100%;
+      flex-grow: 1;
+      z-index: 2;
+      line-height: 1.18;
+      background-image: radial-gradient(circle at 50% 50%, oklch(0.34 0.08 192.2 / 0.59) 0%, oklch(0.24 0.07 240.07 / 0.61) 400px, oklch(0.11 0 0) 1500px);
+      background-image: radial-gradient(circle at 50% 50%, oklch(0.15 0 0) 0%, oklch(0.23 0.06 239.71 / 0.59) 600px, oklch(0.38 0.09 218.29) 1500px);
+      align-content: center;
+      transition: background 1000ms;
+    }
+
 
     h2 {
-      font-size: 24px;
+      font-size: 48px;
+      margin: 0;
     }
     p {
-      font-size: 18px;
+      font-size: 20px;
+      line-height: 1.8;
+      margin-top: 0.5rem;
+
+      b {
+        color: #52B5FF;
+      }
     }
 
     ui-button {
       font-size: 18px;
     }
+    .center {
+      margin: 0 auto;
+      text-align: center;
+      max-width: 800px;
+    }
 
-    .left {
-      margin-top: 10rem;
+
+    &:before {
+      position: absolute;
+      z-index: 1;
+      width: 135%;
+      height: 170%;
+      top: 0;
+      left: 0px;
+      content: '';
+      pointer-events: none;
+      background: url(/images/ui.png);
+      transform-origin: 50% 50%;
+      transform-style: preserve-3d;
+      animation-name: masthead;
+      transition: filter 500ms ease-in-out, opacity 3000ms ease-in-out, transform 6000ms ease-in-out;
+      opacity: 0;
+      animation-duration: 15s;
+      animation-fill-mode: both;
+      filter: blur(0px);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+        transform: rotateX(10deg) rotateZ(0deg) rotateY(0deg) translateY(0%) translateX(0%) translateZ(0px);
+    }
+
+    &.animate{
+      .content {
+        background-image: radial-gradient(circle at 50% 50%, oklch(0.34 0.08 192.2 / 0.59) 0%, oklch(0.24 0.07 240.07 / 0.61) 400px, oklch(0.11 0 0) 1500px);
+      }
+
+      &:before {
+        opacity: 0.03;
+        filter: blur(3px);
+        transform: rotateX(47deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(0%) translateZ(370px);
+      }
     }
+
   }
 
   ribbon {
@@ -43,3 +106,13 @@
 
 
 }
+
+
+@keyframes masthead {
+ 0% {
+    background-position: 0% 0%;
+ }
+ 100% {
+    background-position: 0% -475px;
+ }
+}

docs/src/components/NavMenu/NavMenu.css

@@ -1,18 +1,25 @@
 ---
 import Homepage from '../layouts/Homepage.astro';
 ---
-
 <Homepage>
   <aboveFold>
+    <content>
     <ui-container>
-      <div class="left">
-        <h2>This is the title</h2>
-        <p>This is the copy</p>
-        <ui-button primary icon-after icon="right-chevron" href="/learn/selection">Try It Out</ui-button>
-        <ui-button transparent inverted href="/components"> Visit Docs</ui-button>
+      <div class="center">
+        <h2>Build Once. Use Anywhere.</h2>
+        <p>Create your next in house UI framework using <b>web standards</b> with robust <b>ui primitives</b>, rich <b>templating</b>, signals based <b>reactivity</b>, and all the bells & whistles to work at scale.</p>
+        <ui-button primary icon-after icon="right-chevron" href="/learn/selection">Try In 5 Minutes</ui-button>
+        <ui-button secondary href="/components">View Docs</ui-button>
       </div>
     </ui-container>
+    </content>
   </aboveFold>
+  <script is:inline>
+    const el = document.querySelector('aboveFold');
+    requestAnimationFrame(function() {
+      el.classList.add('animate');
+    });
+  </script>
   <ribbons>
     <ribbon>
       1

docs/src/layouts/Homepage.css

@@ -1,4 +1,4 @@
-:root {
+:root, :defined {
 
   --button-vertical-align: baseline;
 

docs/src/pages/index.astro

@@ -1,4 +1,4 @@
-:root {
+:root, :defined {
 
   /* Primary */
   --button-primary-color: var(--primary-color);