docs: hero logo motion

.web/docs/.vitepress/theme/components/Graph.vue

@@ -0,0 +1,89 @@
+<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]) => {
+    const node1 = props.nodes[i];
+    const node2 = props.nodes[j];
+    const dx = node2.x - node1.x; // x distance between nodes
+    const dy = node2.y - node1.y; // y distance between nodes
+    const distance = Math.sqrt(dx * dx + dy * dy); // Euclidean distance between nodes
+    const curviness = distance * 0.2; // Curviness as a function of distance
+    const cx1 = (node1.x + node2.x) / 2 - dx * 0.2; // x-coordinate of first control point
+    const cy1 = Math.max(node1.y, node2.y) - curviness; // y-coordinate of first control point
+    const cx2 = (node1.x + node2.x) / 2 + dx * 0.2; // x-coordinate of second control point
+    const cy2 = cy1; // y-coordinate of second control point
+    return `M${node1.x} ${node1.y} C${cx1} ${cy1} ${cx2} ${cy2} ${node2.x} ${node2.y}`;
+  });
+});
+
+// Compute the maximum x and y coordinates
+const maxWidth = computed(() => Math.max(...props.nodes.map(node => node.x), ...props.connections.map(([i, j]) => Math.max(props.nodes[i].x, props.nodes[j].x))));
+const maxHeight = computed(() => Math.max(...props.nodes.map(node => node.y), ...props.connections.map(([i, j]) => Math.max(props.nodes[i].y, props.nodes[j].y))));
+
+</script>
+
+<template>
+  <div class="animated left-6 top-6">
+    <!-- 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 }">
+      <a v-if="node.link" :href="node.link">
+        <VPImage v-if="node.image" :alt="`Image ${index + 1}`" :class="`image-src w-20 rounded-2xl ${node.class ?? ''}`"
+                 :image="node.image"/>
+        <div v-else class="node-html" v-html="node.content"></div>
+      </a>
+      <template v-else>
+        <VPImage v-if="node.image" :alt="`Image ${index + 1}`" :class="`image-src w-20 rounded-2xl ${node.class ?? ''}`"
+                 :image="node.image"/>
+        <div v-else class="node-html" v-html="node.content"></div>
+      </template>
+    </div>
+
+    <svg :height="maxHeight" :width="maxWidth">
+      <!-- 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 50s;
+}
+</style>

.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>

.web/docs/.vitepress/theme/components/HomeHeroImage.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Graph from "./Graph.vue";
+import VPImage from "./VPImage.vue";
+
+const velocity = 'https://avatars.githubusercontent.com/u/41710604?s=200&v=4'
+const paper = 'https://avatars.githubusercontent.com/u/7608950?s=200&v=4'
+const spigot = 'https://avatars.githubusercontent.com/u/4350249?s=48&v=4'
+
+const center = {x: 100, y: 0};
+const space = 100; // Define your space constant here
+
+const nodes = [
+  {x: center.x, y: center.y, link: '/guide/', image: '/minekube-logo.png', class: 'w-48'}, // Top center node
+  {x: center.x - space * 1.5, y: 200, link: '/guide/connectors/gate', image: '/gate.png', class: 'w-32'}, // First bottom node (Gate)
+  {x: center.x - space * 0.5, y: 250, link: '/guide/connectors/plugin', image: velocity}, // Second bottom node
+  {x: center.x + space * 0.5, y: 250, link: '/guide/connectors/plugin', image: paper, class: 'w-16'}, // Third bottom node
+  {x: center.x + space * 1.5, y: 200, link: '/guide/connectors/plugin', image: spigot}, // Fourth bottom node
+
+  // {x: center.x, y: 0, image: '/mascot.png', class: 'w-12'},
+
+];
+
+// Define connections between nodes by their index
+const connections = [
+  [0, 1],
+  [0, 2],
+  [0, 3],
+  [0, 4],
+];
+
+</script>
+
+<template>
+
+  <div class="hidden lg:block">
+    <Graph :connections="connections" :nodes="nodes"/>
+  </div>
+
+  <div class="block lg:hidden">
+    <VPImage class="image-src" image="/minekube-logo.png"/>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>

.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>
+</template>

.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>