Add use-cases page

Author: MohamedElmdary

frontend/kubecloud-v2/components/cards/FeatureCard.vue

@@ -8,10 +8,20 @@
 
       <p class="text-h5 font-weight-bold mt-4 mb-1 text-no-wrap" v-text="title" />
       <p class="text-body-1 text-accent" v-text="description" />
+      <div v-if="tags" class="d-flex justify-center ga-2 mt-4 flex-wrap">
+        <v-chip
+          v-for="tag in tags"
+          :key="tag"
+          size="small"
+          variant="tonal"
+          color="primary"
+          :text="tag"
+        />
+      </div>
     </v-card>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{ icon: string, title: string, description: string }>()
+defineProps<{ icon: string, title: string, description: string, tags?: string[] }>()
 </script>

frontend/kubecloud-v2/components/features/FeatureSectionLayout.vue

@@ -1,6 +1,12 @@
 <template>
   <v-row>
-    <v-col cols="6" class="position-relative" :style="{ height: '500px' }" :order="reversed ? 'last' : undefined">
+    <v-col
+      cols="12"
+      md="6"
+      class="position-relative"
+      :style="{ height: '500px' }"
+      :order="reversed || $vuetify.display.smAndDown ? 'last' : undefined"
+    >
       <div
         class="position-absolute h-100 w-100 inset-0"
         :style="{
@@ -21,13 +27,13 @@
       />
     </v-col>
 
-    <v-col cols="6" class="d-flex align-center">
+    <v-col cols="12" md="6" class="d-flex align-center">
       <div>
         <h3 class="text-h4 font-weight-bold mb-2" v-text="title" />
 
         <div class="text-subtitle-1 text-accent" v-text="description" />
 
-        <div class="d-flex ga-2 mt-2">
+        <div class="d-flex justify-center ga-2 mt-4 flex-wrap">
           <v-chip
             v-for="tag in tags"
             :key="tag"

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

@@ -43,20 +43,7 @@ useHead({
       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,
-        })
+        applyVantaGlobe(vantaGlobe.value!)
       },
     },
   ],

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

@@ -42,22 +42,7 @@ useHead({
       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,
-        })
+        applyVantaDots(vantaDots.value!)
       },
     },
   ],

frontend/kubecloud-v2/global.d.ts

@@ -13,6 +13,8 @@ declare global {
     VANTA?: {
       DOTS?: (options: Record<string, any>) => void
       GLOBE?: (options: Record<string, any>) => void
+      BIRDS?: (options: Record<string, any>) => void
+      HALO?: (options: Record<string, any>) => void
     }
   }
 }

frontend/kubecloud-v2/pages/features.vue

@@ -1,6 +1,11 @@
 <template>
-  <v-container>
-    <div>Features</div>
+  <v-container class="py-16">
+    <h1 class="text-h2 font-weight-bold text-center mb-4">
+      Powerful Features
+    </h1>
+    <p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
+      Everything you need to build, deploy, and scale your applications with confidence.
+    </p>
 
     <FeatureMyceliumPanel />
     <FeatureWebGateway />

frontend/kubecloud-v2/pages/use-cases.vue

@@ -1,7 +1,61 @@
 <template>
-  <div>Use Cases</div>
+  <div ref="vantaDots" class="h-100">
+    <v-container class="py-16">
+      <div class="mb-16">
+        <h1 class="text-h2 font-weight-bold text-center mb-4">
+          Use Cases
+        </h1>
+        <p class="text-body-1 text-center text-primary mx-auto" :style="{ maxWidth: '600px' }">
+          Explore how Mycelium Cloud empowers different industries and teams.
+        </p>
+      </div>
+
+      <VRow>
+        <VCol v-for="feature in features" :key="feature.title" cols="4">
+          <FeatureCard v-bind="feature" />
+        </VCol>
+      </VRow>
+    </v-container>
+  </div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: "public" })
+
+ensureThreeGlobal()
+const vantaDots = ref<HTMLElement | null>(null)
+
+useHead({
+  script: [
+    {
+      async: true,
+      src: "/scripts/vanta.dots.min.js",
+      defer: true,
+      onload() {
+        applyVantaDots(vantaDots.value!)
+      },
+    },
+  ],
+})
+
+const features = [
+  {
+    icon: "mdi-brain",
+    title: "AI/ML Training",
+    description: "Run GPU-accelerated workloads for deep learning and data science on demand.",
+    tags: ["GPU Acceleration", "Scalable Compute", "Cost Optimization"],
+  },
+  {
+    icon: "mdi-domain",
+    title: "Enterprise Kubernetes",
+    description: "Deploy production-grade clusters with full control and no vendor lock-in.",
+    tags: ["High Availability", "Security", "Compliance"],
+  },
+  {
+    icon: "mdi-router-wireless",
+    title: "Edge & IoT",
+    description: "Leverage global nodes for low-latency edge computing and IoT applications.",
+    tags: ["Low Latency", "Global Distribution", "Real-time Processing"],
+  },
+]
 </script>

frontend/kubecloud-v2/utils/three.ts

@@ -7,3 +7,39 @@ export function ensureThreeGlobal() {
 
   return THREE
 }
+
+export function applyVantaDots(el: HTMLElement) {
+  window?.VANTA?.DOTS?.({
+    el,
+    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,
+  })
+}
+
+export function applyVantaGlobe(el: HTMLElement) {
+  window?.VANTA?.GLOBE?.({
+    el,
+    mouseControls: true,
+    touchControls: true,
+    gyroControls: true,
+    minHeight: 200,
+    minWidth: 200,
+    scale: 1,
+    scaleMobile: 1,
+    color: 0x2B3951,
+    color2: 0x2B3951,
+    size: 0.75,
+    backgroundColor: 0x0A192F,
+  })
+}