fix(site): merge into one layout

unionlabs · Oct 29, 2024 · c20c436 · c20c436
1 parent 0480c84
commit c20c436
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 158 deletions.
diff --git a/site/src/components/sections/landing/BorderIntro.astro b/site/src/components/sections/landing/BorderIntro.astro
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
@@ -1,22 +1,167 @@
 ---
 import Layout from "#/layouts/Layout.astro"
-import BorderIntro from "../components/sections/landing/BorderIntro.astro"
 import { ClientRouter } from "astro:transitions"
+import TextP from "../components/typography/TextP.astro"
+import H1 from "../components/typography/h1.astro"
+import MatrixCover from "../components/MatrixCover.astro"
 
 interface Props {
   title: any
   text: any
 }
 
 const { title, text } = Astro.props
+
+const slideTextAnimation = {
+  forwards: {
+    old: {
+      name: "slideOutLeft",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    },
+    new: {
+      name: "slideInRight",
+      duration: "0.4s",
+      easing: "ease-out",
+      fillMode: "forwards"
+    }
+  }
+}
 ---
 
 <head>
   <ClientRouter/>
 </head>
 
 <Layout title="Union">
-  <BorderIntro {title} {text}/>
+  <div class="header-grid">
+    <div class="shiny-border">
+      <div class="glow-effect" transition:persist></div>
+    </div>
+    <MatrixCover />
+    <div class="bg-gradient-to-r from-transparent via-black to-transparent px-4 py-6 text-center header-text-content flex justify-center">
+      <div class="max-w-2xl flex flex-col gap-4" transition:animate={slideTextAnimation}>
+        <H1>{title}</H1>
+        <TextP>{text}</TextP>
+      </div>
+    </div>
+  </div>
   <slot/>
 </Layout>
 
+
+<style lang="postcss" is:global>
+    .header-grid {
+        --outer-border: 8px;
+        --inner-border: 5px;
+        --header-height: 68px;
+        height: calc(100vh - var(--header-height));
+        min-height: 400px;
+        width: 100%;
+        display: grid;
+        grid-template-rows: 0 var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        grid-template-columns: var(--outer-border) var(--inner-border) 1fr auto 1fr var(--inner-border) var(--outer-border);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .glow-effect {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        background: conic-gradient(
+                from 0deg at 50% 50%,
+                rgba(160, 236, 253, 1) 15deg,
+                rgba(160, 236, 253, 0) 15deg,
+                rgba(160, 236, 253, 0) 55deg,
+                rgba(160, 236, 253, 0) 345deg,
+                rgba(160, 236, 253, 1) 345deg
+        );
+        mix-blend-mode: screen;
+        filter: blur(10px);
+        transform-origin: center;
+    }
+
+    .shiny-border {
+        background-color: #262626;
+        grid-area: 2 / 2 / 7 / 7;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .header-grid > canvas {
+        grid-area: 3 / 3 / 6 / 6;
+        background-color: transparent;
+        z-index: 3;
+    }
+
+    .header-text-content {
+        grid-area: 4 / 3 / 5 / 6;
+        z-index: 4;
+    }
+</style>
+
+<script>
+  import {rotateCamera} from "../lib/matrix-cover";
+
+  document.addEventListener('astro:after-preparation', (e) => {
+    rotateCamera();
+  });
+
+  let headerGrid;
+  let glowEffect;
+  let previousAngle = 0;
+  let currentRotation = 0;
+  let mouseMoveHandler;
+
+  function initializeGlowEffect() {
+    headerGrid = document.querySelector('.header-grid');
+    glowEffect = document.querySelector('.glow-effect');
+
+    if (headerGrid && glowEffect) {
+      mouseMoveHandler = (e) => {
+        const rect = headerGrid.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+
+        const deltaX = e.clientX - centerX;
+        const deltaY = e.clientY - centerY;
+        const newAngle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        const scale = Math.max(4, (distance / rect.height) * 8);
+
+        let angleDiff = newAngle - previousAngle;
+
+        if (angleDiff > 180) {
+          angleDiff -= 360;
+        } else if (angleDiff < -180) {
+          angleDiff += 360;
+        }
+
+        currentRotation += angleDiff;
+        previousAngle = newAngle;
+
+        glowEffect.style.transform = `scale(${scale}) rotate(${currentRotation + 90}deg)`;
+      };
+
+      headerGrid.addEventListener('mousemove', mouseMoveHandler);
+    }
+  }
+
+  function cleanup() {
+    if (headerGrid && mouseMoveHandler) {
+      headerGrid.removeEventListener('mousemove', mouseMoveHandler);
+    }
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    cleanup();
+    initializeGlowEffect();
+  });
+
+  document.addEventListener('astro:before-preparation', cleanup);
+</script>
+