Initial commit

resources/js/views/front-pages/landing-page/features.vue

@@ -0,0 +1,133 @@
+<script setup>
+import check from '@images/svg/Check.svg'
+import keyboard from '@images/svg/keyboard.svg'
+import laptop from '@images/svg/laptop.svg'
+import paper from '@images/svg/paper-send.svg'
+import rocket from '@images/svg/rocket.svg'
+import user from '@images/svg/user.svg'
+
+const featuresData = [
+  {
+    title: 'Quality Code',
+    desc: 'Code structure that all developers will easily understand and fall in love with.',
+    icon: laptop,
+  },
+  {
+    title: 'Continuous Updates',
+    desc: 'Free updates for the next 12 months, including new demos and features.',
+    icon: rocket,
+  },
+  {
+    title: 'Starter Kit',
+    desc: 'Start your project quickly without having to remove unnecessary features.',
+    icon: paper,
+  },
+  {
+    title: 'API Ready',
+    desc: 'Just change the endpoint and see your own data loaded within seconds.',
+    icon: check,
+  },
+  {
+    title: 'Excellent Support',
+    desc: 'An easy-to-follow doc with lots of references and code examples.',
+    icon: user,
+  },
+  {
+    title: 'Well Documented',
+    desc: 'An easy-to-follow doc with lots of references and code examples.',
+    icon: keyboard,
+  },
+]
+</script>
+
+<template>
+  <VContainer id="features">
+    <div class="feature-cards">
+      <div class="headers d-flex justify-center flex-column align-center mb-12">
+        <VChip
+          label
+          color="primary"
+          class="mb-4"
+          size="small"
+        >
+          Useful Features
+        </VChip>
+        <div class="d-flex text-h4 mb-1 align-center flex-wrap justify-center">
+          <div class="position-relative me-2">
+            <div class="section-title">
+              Everything you need
+            </div>
+          </div>
+          to start your next project
+        </div>
+        <p class="text-body-1 mb-0">
+          Not just a set of tools, the package includes ready-to-deploy conceptual application.
+        </p>
+      </div>
+      <VRow>
+        <VCol
+          v-for="(data, index) in featuresData"
+          :key="index"
+          cols="12"
+          md="4"
+          sm="6"
+        >
+          <div class="d-flex flex-column align-center justify-center gap-4 mx-auto">
+            <VIcon
+              :icon="data.icon"
+              size="64"
+              color="primary"
+            />
+            <div class="text-center">
+              <h5 class="text-h5 mb-2">
+                {{ data.title }}
+              </h5>
+              <p
+                class="text-body-1 mb-6"
+                style="max-inline-size: 310px;"
+              >
+                {{ data.desc }}
+              </p>
+            </div>
+          </div>
+        </VCol>
+      </VRow>
+    </div>
+  </VContainer>
+</template>
+
+<style lang="scss" scoped>
+.feature-cards {
+  margin-block: 3.75rem;
+}
+
+.section-title::after {
+  position: absolute;
+  background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
+  background-size: contain;
+  block-size: 100%;
+  content: "";
+  inline-size: 120%;
+  inset-block-end: 0;
+  inset-inline-start: -12%;
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 36px;
+}
+
+.feature {
+  .v-avatar {
+    &.v-avatar--variant-outlined {
+      border: 2px solid rgba(var(--v-theme-primary), 0.32);
+
+      &:hover {
+        background: rgba(var(--v-theme-primary), 0.16);
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>