finished landing page

Author: MohamedElmdary

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

@@ -1,36 +1,17 @@
 <template>
-  <div ref="container" :style="{ transition: 'transform 0.1s ease-in-out' }" @mousemove="onMouseMove($event)" @mouseleave="onMouseLeave()">
-    <v-card class="text-center">
-      <v-icon color="primary" icon="mdi-cloud-outline" size="50" />
+  <div
+    v-tilt-effect
+    class="h-100"
+  >
+    <v-card class="text-center h-100">
+      <v-icon color="primary" :icon="icon" size="50" />
 
-      <p class="text-h5 font-weight-bold mt-4 mb-1 text-no-wrap">
-        Cloud-Native Architecture
-      </p>
-      <p class="text-body-1 text-accent">
-        Built for the cloud with support for all major cloud providers and on-premise deployments.
-      </p>
+      <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" />
     </v-card>
   </div>
 </template>
 
 <script setup lang="ts">
-const container = ref<HTMLElement | null>(null)
-
-function onMouseMove(e: MouseEvent) {
-  const rect = container.value!.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
-
-  const centerX = rect.width / 2
-  const centerY = rect.height / 2
-
-  const rotateX = (y - centerY) / 10
-  const rotateY = (centerX - x) / 10
-
-  container.value!.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`
-}
-
-function onMouseLeave() {
-  container.value!.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)`
-}
+defineProps<{ icon: string, title: string, description: string }>()
 </script>

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

@@ -10,17 +10,44 @@
     </div>
 
     <VRow>
-      <VCol v-for="i in 6" :key="i" cols="4">
-        <FeatureCard />
+      <VCol v-for="feature in features" :key="feature.title" cols="4">
+        <FeatureCard v-bind="feature" />
       </VCol>
     </VRow>
   </v-container>
 </template>
 
 <script setup lang="ts">
-// defineProps<{
-//   title: string
-//   description: string
-//   icon: string
-// }>()
+const features = [
+  {
+    icon: "mdi-cloud-outline",
+    title: "Cloud-Native Architecture",
+    description: "Built for the cloud with support for all major cloud providers and on-premise deployments.",
+  },
+  {
+    icon: "mdi-shield-check-outline",
+    title: "Enterprise Security",
+    description: "Advanced security features including RBAC, network policies, and compliance monitoring.",
+  },
+  {
+    icon: "mdi-chart-line",
+    title: "Real-time Monitoring",
+    description: "Comprehensive monitoring and alerting with detailed metrics and performance insights.",
+  },
+  {
+    icon: "mdi-rocket-launch-outline",
+    title: "One-Click Deployments",
+    description: "Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.",
+  },
+  {
+    icon: "mdi-account-group-outline",
+    title: "Team Collaboration",
+    description: "Built-in collaboration tools for teams with role-based access and shared workspaces.",
+  },
+  {
+    icon: "mdi-cog-outline",
+    title: "Advanced Configuration",
+    description: "Flexible configuration management with support for Helm charts and custom resources.",
+  },
+]
 </script>

frontend/kubecloud-v2/plugins/tilt.directive.ts

@@ -0,0 +1,27 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("tilt-effect", {
+    mounted(el: HTMLElement) {
+      el.onmousemove = (e: MouseEvent) => {
+        const rect = el.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+
+        const centerX = rect.width / 2
+        const centerY = rect.height / 2
+
+        const rotateX = (y - centerY) / 10
+        const rotateY = (centerX - x) / 10
+
+        el.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`
+      }
+
+      el.onmouseleave = () => {
+        el.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)`
+      }
+    },
+    unmounted(el: HTMLElement) {
+      el.onmousemove = null
+      el.onmouseleave = null
+    },
+  })
+})