Add welcome and experience section in home page

Author: MohamedElmdary

frontend/kubecloud-v2/components/home/HomeExperienceSection.vue

@@ -0,0 +1,64 @@
+<template>
+  <div ref="vantaGlobe">
+    <div
+      class="d-flex justify-center align-center"
+      :style="{
+        minHeight: '600px',
+
+      }"
+    >
+      <v-container class="mt-16">
+        <div>
+          <h1 class="text-h1 font-weight-bold text-center mb-8">
+            Ready to Transform Your Kubernetes Experience?
+          </h1>
+          <p class="text-body-1 text-center mx-auto pa-2 rounded-lg" :style="{ maxWidth: '600px', backgroundColor: 'rgba(var(--v-theme-background), 0.8)' }">
+            Join a growing community of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+          </p>
+
+          <div class="d-flex justify-center mt-4">
+            <v-btn
+              class="btn-form"
+              text="Deploy Kubernetes Cluster"
+              variant="flat"
+              color="primary"
+              to="/dashboard/clusters/deploy"
+            />
+          </div>
+        </div>
+      </v-container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+ensureThreeGlobal()
+
+const vantaGlobe = ref<HTMLElement | null>(null)
+
+useHead({
+  script: [
+    {
+      async: true,
+      src: "/scripts/vanta.globe.min.js",
+      defer: true,
+      onload() {
+        window?.VANTA?.GLOBE?.({
+          el: vantaGlobe.value,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: true,
+          minHeight: 200,
+          minWidth: 200,
+          scale: 1,
+          scaleMobile: 1,
+          color: 0x2B3951,
+          color2: 0x2B3951,
+          size: 0.75,
+          backgroundColor: 0x0A192F,
+        })
+      },
+    },
+  ],
+})
+</script>

frontend/kubecloud-v2/components/home/HomeWelcomeSection.vue

@@ -0,0 +1,65 @@
+<template>
+  <div ref="vantaDots">
+    <div
+      class="d-flex justify-center align-center"
+      :style="{
+        minHeight: '700px',
+        background: `
+            url(${myceliumBg1}) no-repeat  bottom right/40%,
+            url(${myceliumBg2}) no-repeat  -120px 80px/30%
+          `,
+      }"
+    >
+      <v-container>
+        <div>
+          <h1 class="text-h1 font-weight-bold text-center mb-4">
+            Mycelium Cloud
+          </h1>
+          <p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
+            Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native
+            applications at scale
+          </p>
+        </div>
+      </v-container>
+    </div>
+  </div>
+
+  <VDivider />
+</template>
+
+<script setup lang="ts">
+import myceliumBg1 from "~/assets/images/mycelium_bg_1.svg"
+import myceliumBg2 from "~/assets/images/mycelium_bg_2.svg"
+
+ensureThreeGlobal()
+
+const vantaDots = ref<HTMLElement | null>(null)
+
+useHead({
+  script: [
+    {
+      async: true,
+      src: "/scripts/vanta.dots.min.js",
+      defer: true,
+      onload() {
+        window?.VANTA?.DOTS?.({
+          el: vantaDots.value,
+          mouseControls: true,
+          touchControls: true,
+          gyroControls: false,
+          minHeight: 200,
+          minWidth: 200,
+          scale: 1,
+          scaleMobile: 1,
+          color: 0x2B3951,
+          color2: 0x2B3951,
+          backgroundColor: 0x0A192F,
+          size: 5,
+          spacing: 70,
+          showLines: true,
+        })
+      },
+    },
+  ],
+})
+</script>

frontend/kubecloud-v2/global.d.ts

@@ -6,3 +6,13 @@ declare module "axios" {
     notify?: boolean
   }
 }
+
+declare global {
+  interface Window {
+    THREE?: typeof import("three")
+    VANTA?: {
+      DOTS?: (options: Record<string, any>) => void
+      GLOBE?: (options: Record<string, any>) => void
+    }
+  }
+}

frontend/kubecloud-v2/pages/index.vue

@@ -1,26 +1,6 @@
 <template>
   <div>
-    <div
-      class="border-b d-flex justify-center align-center"
-      :style="{
-        minHeight: '500px',
-        background: `
-        url(${myceliumBg1}) no-repeat  bottom right/40%,
-        url(${myceliumBg2}) no-repeat  -120px 80px/30%,
-        linear-gradient(100.95deg, #0B1A30 71.46%, #225196 145.62%)
-      `,
-      }"
-    >
-      <v-container>
-        <h1 class="text-h1 font-weight-bold text-center mb-4">
-          Mycelium Cloud
-        </h1>
-        <p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
-          Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native
-          applications at scale
-        </p>
-      </v-container>
-    </div>
+    <HomeWelcomeSection />
 
     <v-container class="my-16">
       <div v-if="isLoading || stats.length === 0" class="d-flex justify-center align-center" :style="{ height: '198px' }">
@@ -42,13 +22,12 @@
         </v-row>
       </v-fade-transition>
     </v-container>
+
+    <HomeExperienceSection />
   </div>
 </template>
 
 <script setup lang="ts">
-import myceliumBg1 from "~/assets/images/mycelium_bg_1.svg"
-import myceliumBg2 from "~/assets/images/mycelium_bg_2.svg"
-
 definePageMeta({ middleware: "public" })
 
 const { stats, isLoading } = useStats({ exclude: ["users", "clusters", "balance"] })