Initial commit

resources/js/views/front-pages/landing-page/product-stats.vue

@@ -0,0 +1,71 @@
+<script setup>
+import check from '@images/svg/Check.svg'
+import diamond from '@images/svg/Diamond.svg'
+import laptop from '@images/svg/laptop.svg'
+import user from '@images/svg/user.svg'
+
+const statData = [
+  {
+    title: 'Support Tickets Resolved',
+    value: '7.1k+',
+    icon: laptop,
+    color: 'primary',
+  },
+  {
+    title: 'Join creatives community',
+    value: '50k+',
+    icon: user,
+    color: 'success',
+  },
+  {
+    title: 'Highly Rated Products',
+    value: '4.8/5',
+    icon: diamond,
+    color: 'info',
+  },
+  {
+    title: 'Money Back Guarantee',
+    value: '100%',
+    icon: check,
+    color: 'warning',
+  },
+]
+</script>
+
+<template>
+  <div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
+    <VContainer>
+      <div class="py-12">
+        <VRow>
+          <VCol
+            v-for="(product, index) in statData"
+            :key="index"
+            cols="12"
+            sm="6"
+            lg="3"
+          >
+            <VCard
+              flat
+              :style="{ border: `1px solid rgba(var(--v-theme-${product.color}))` }"
+            >
+              <VCardText class="text-center">
+                <VIcon
+                  :color="product.color"
+                  :icon="product.icon"
+                  size="64"
+                  class="mb-4"
+                />
+                <h3 class="text-h3">
+                  {{ product.value }}
+                </h3>
+                <p class="text-body-1 font-weight-medium mb-0 text-wrap">
+                  {{ product.title }}
+                </p>
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+      </div>
+    </VContainer>
+  </div>
+</template>