Initial commit

resources/js/views/front-pages/landing-page/faq-section.vue

@@ -0,0 +1,124 @@
+<script setup>
+import boyWithLogo from '@images/front-pages/landing-page/faq-boy-with-logos.png'
+
+const faqData = [
+  {
+    question: 'Do you charge for each upgrade?',
+    answer: 'Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.',
+  },
+  {
+    question: 'Do I need to purchase a license for each website?',
+    answer: 'Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.',
+  },
+  {
+    question: 'What is regular license?',
+    answer: 'Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee). Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup). For more info on regular license you can check official description.',
+  },
+  {
+    question: 'What is extended license?',
+    answer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.',
+  },
+  {
+    question: 'Which license is applicable for SASS application?',
+    answer: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi molestias exercitationem ab cum nemo facere voluptates veritatis quia, eveniet veniam at et repudiandae mollitia ipsam quasi labore enim architecto non!',
+  },
+]
+</script>
+
+<template>
+  <div id="faq">
+    <VContainer>
+      <!-- 👉 Header  -->
+      <div class="faq-section">
+        <div class="headers d-flex justify-center flex-column align-center">
+          <VChip
+            label
+            color="primary"
+            size="small"
+            class="mb-4"
+          >
+            FAQ
+          </VChip>
+          <h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
+            Frequently Asked
+            <div class="position-relative ms-2">
+              <div class="section-title">
+                questions
+              </div>
+            </div>
+          </h4>
+          <p class="text-body-1 mb-0">
+            Browse through these FAQs to find answers to commonly asked questions.
+          </p>
+        </div>
+        <VRow>
+          <VCol
+            cols="12"
+            md="5"
+          >
+            <div class="pt-10 d-flex align-center justify-center h-100">
+              <VImg
+                :src="boyWithLogo"
+                height="330"
+                width="330"
+              />
+            </div>
+          </VCol>
+          <VCol
+            cols="12"
+            md="7"
+          >
+            <VExpansionPanels class="pt-16">
+              <VExpansionPanel
+                v-for="faq in faqData"
+                :key="faq.question"
+              >
+                <VExpansionPanelTitle>
+                  {{ faq.question }}
+                </VExpansionPanelTitle>
+                <VExpansionPanelText>
+                  {{ faq.answer }}
+                </VExpansionPanelText>
+              </VExpansionPanel>
+            </VExpansionPanels>
+          </VCol>
+        </VRow>
+      </div>
+    </VContainer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.faq-section {
+  margin-block: 5.25rem;
+}
+
+@media (max-width: 600px) {
+  .faq-section {
+    margin-block: 4rem;
+  }
+}
+
+#faq {
+  border-radius: 3.75rem 3.75rem 0 0;
+  background-color: rgba(var(--v-theme-background));
+}
+
+.section-title {
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 36px;
+}
+
+.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: "";
+  font-weight: 800;
+  inline-size: 130%;
+  inset-block-end: 12%;
+  inset-inline-start: -12%;
+}
+</style>