From f687c9e0df0197e954ce46734f323cee3dfc2767 Mon Sep 17 00:00:00 2001
From: Robin <robin.braemer@web.de>
Date: Tue, 23 Jan 2024 00:03:31 +0100
Subject: [PATCH] wip hero motion

---
 .../.vitepress/theme/components/Graph.vue     | 72 +++++++++++++++++++
 .../theme/components/HeroAnimation.vue        | 51 +++++++++++++
 .../theme/components/HomeHeroImage.vue        | 28 ++++++++
 .../.vitepress/theme/components/Layout.vue    |  6 +-
 .../.vitepress/theme/components/VPImage.vue   | 47 ++++++++++++
 5 files changed, 203 insertions(+), 1 deletion(-)
 create mode 100644 .web/docs/.vitepress/theme/components/Graph.vue
 create mode 100644 .web/docs/.vitepress/theme/components/HeroAnimation.vue
 create mode 100644 .web/docs/.vitepress/theme/components/HomeHeroImage.vue
 create mode 100644 .web/docs/.vitepress/theme/components/VPImage.vue

diff --git a/.web/docs/.vitepress/theme/components/Graph.vue b/.web/docs/.vitepress/theme/components/Graph.vue
new file mode 100644
index 0000000..cfc2796
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/Graph.vue
@@ -0,0 +1,72 @@
+<script setup>
+import {computed} from 'vue';
+import VPImage from "./VPImage.vue";
+
+// Define props
+const props = defineProps({
+  nodes: Array,
+  connections: Array
+});
+
+// Compute paths for each connection
+const paths = computed(() => {
+  return props.connections.map(([i, j, curviness]) => {
+    const node1 = props.nodes[i];
+    const node2 = props.nodes[j];
+    const cx1 = (node1.x + node2.x) / 2;
+    const cy1 = Math.min(node1.y, node2.y) - curviness; // Use the curviness value to adjust the y-coordinate of the control point
+    const cx2 = cx1;
+    const cy2 = cy1;
+    return `M${node1.x} ${node1.y} C${cx1} ${cy1} ${cx2} ${cy2} ${node2.x} ${node2.y}`;
+  });
+});
+</script>
+
+<template>
+  <div class="animated">
+    <!-- Create each node -->
+    <div v-for="(node, index) in nodes" :key="index"
+         :style="{ position: 'absolute', left: `${node.x}px`, top: `${node.y}px`, zIndex: index }">
+      <VPImage v-if="node.image" :alt="`Image ${index + 1}`" :image="node.image" class="image-src w-24"/>
+      <div v-else class="node-html" v-html="node.content"></div>
+    </div>
+
+    <svg height="200" width="200">
+      <!-- Create paths for each connection -->
+      <path v-for="(d, index) in paths" :key="index" :d="d" class="dashed-line" fill="none"/>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+@keyframes animation {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(20px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animated {
+  animation: animation 4s infinite ease-in-out;
+  position: relative;
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 1000;
+  }
+}
+
+.dashed-line {
+  stroke-width: 2;
+  stroke: var(--vp-c-text-1);
+  stroke-dasharray: 5;
+  stroke-dashoffset: 0;
+  animation: dashdraw linear infinite 30s;
+}
+</style>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/HeroAnimation.vue b/.web/docs/.vitepress/theme/components/HeroAnimation.vue
new file mode 100644
index 0000000..cbbe1c7
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/HeroAnimation.vue
@@ -0,0 +1,51 @@
+<template>
+  <div id="animation-container" class="relative h-128 w-128">
+    <div class="absolute left-1/2 animate-logo">
+      <img alt="Bottom Middle Node" src="/minekube-logo.png" width="128">
+    </div>
+    <div class="absolute left-1/2 top-64 animate-logo">
+      <img alt="Top Middle Node" src="/minekube-logo.png" width="128">
+    </div>
+    <div class="line animate-logo "></div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes logo-animation {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(20px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-logo {
+  animation: logo-animation 4s infinite ease-in-out;
+}
+
+@keyframes line-animation {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+.line {
+  position: absolute;
+  top: 64px;
+  left: 50%;
+  width: 2px;
+  height: 64px;
+  background: linear-gradient(90deg, transparent, #d00808, transparent);
+  background-size: 200% 200%;
+  animation: line-animation 2s infinite;
+}
+</style>
+<script setup>
+</script>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/HomeHeroImage.vue b/.web/docs/.vitepress/theme/components/HomeHeroImage.vue
new file mode 100644
index 0000000..d731481
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/HomeHeroImage.vue
@@ -0,0 +1,28 @@
+<script setup>
+import Graph from "./Graph.vue";
+
+const nodes = [
+  {x: 100, y: 0, image: '/minekube-logo.png'}, // Top center node
+  {x: 0, y: 150, image: 'https://avatars.githubusercontent.com/u/41710604?s=200&v=4'}, // Bottom left node
+  {x: 100, y: 150, image: 'https://avatars.githubusercontent.com/u/7608950?s=200&v=4'}, // Bottom center node
+  {x: 200, y: 150, image: 'https://avatars.githubusercontent.com/u/4350249?s=48&v=4'}, // Bottom right node
+  {x: 200, y: 250, content: '<div class="text-[--vp-c-text-1] font-mono">Gate</div>'}
+];
+
+const connections = [
+  [0, 1, 10], // Connect top center node to bottom left node
+  [0, 2, 100], // Connect top center node to bottom center node
+  [0, 3, 10] // Connect top center node to bottom right node
+];
+
+</script>
+
+<template>
+
+  <Graph :connections="connections" :nodes="nodes"/>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/.web/docs/.vitepress/theme/components/Layout.vue b/.web/docs/.vitepress/theme/components/Layout.vue
index 565f7c7..d02905b 100644
--- a/.web/docs/.vitepress/theme/components/Layout.vue
+++ b/.web/docs/.vitepress/theme/components/Layout.vue
@@ -4,6 +4,7 @@ import {useRouter} from 'vitepress';
 import {watch} from 'vue';
 import MeetTeam from "./MeetTeam.vue";
 import Landing from "./Landing.vue";
+import HomeHeroImage from "./HomeHeroImage.vue";
 
 const {Layout} = DefaultTheme
 
@@ -20,9 +21,12 @@ if (typeof window !== 'undefined' && window.posthog) {
 
 <template>
   <Layout>
+    <template #home-hero-image>
+      <HomeHeroImage/>
+    </template>
     <template #home-features-after>
       <Landing/>
       <MeetTeam/>
     </template>
   </Layout>
-</template>
\ No newline at end of file
+</template>
diff --git a/.web/docs/.vitepress/theme/components/VPImage.vue b/.web/docs/.vitepress/theme/components/VPImage.vue
new file mode 100644
index 0000000..23701e7
--- /dev/null
+++ b/.web/docs/.vitepress/theme/components/VPImage.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type {DefaultTheme} from 'vitepress/theme'
+import {withBase} from 'vitepress'
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+  alt?: string
+}>()
+
+defineOptions({inheritAttrs: false})
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+        v-if="typeof image === 'string' || 'src' in image"
+        :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+        :src="withBase(typeof image === 'string' ? image : image.src)"
+        class="VPImage"
+        v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+    />
+    <template v-else>
+      <VPImage
+          :alt="image.alt"
+          :image="image.dark"
+          class="dark"
+          v-bind="$attrs"
+      />
+      <VPImage
+          :alt="image.alt"
+          :image="image.light"
+          class="light"
+          v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+
+.dark .VPImage.light {
+  display: none;
+}
+</style>