Create FAQ for desktop

canopas · Sep 12, 2023 · 93fd339 · 93fd339
1 parent 445b686
commit 93fd339
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 49 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/FaqSection.vue b/vue-frontend/src/components/ios-app-development/FaqSection.vue
@@ -1,24 +1,22 @@
 <template>
-  <section>
+  <section class="tw-my-8 md:tw-mb-20 md:tw-mt-32">
     <div class="tw-mb-4 md:tw-container">
       <div
         class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 md:tw-my-0 md:-tw-ml-8"
       >
-        <div class="tw-mb-4 tw-text-center">
+        <div class="tw-text-center">
           <span
             class="tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.453125rem] lg:tw-leading-[4.46875rem]"
             >FAQs on iOS App Development</span
           >
         </div>
 
         <div
-          class="tw-container tw--mt-8 tw-flex-[67%] tw-pb-16 md:tw-w-[65rem]"
+          class="tw-container tw-mt-6 tw-flex-[67%] tw-pb-8 md:tw-pb-16 md:tw-w-[65rem]"
         >
           <div class="md:tw-pl-[30px]">
             <transition-group tag="div" :name="'faq-' + faqTransitionName">
-              <div
-                class="faq-section tw-mt-12 tw-h-auto tw-min-h-[28rem] sm:tw-min-h-[33rem]"
-              >
+              <div class="faq-section tw-h-auto">
                 <div
                   class="tw-mt-4"
                   v-for="faq in faqs.slice(sliceFrom, sliceTo)"
@@ -56,14 +54,15 @@
                         />
                       </div>
                     </div>
+
                     <collapse-transition>
                       <div
-                        class="faq-header tw-flex tw-flex-row tw-items-center"
+                        class="faq-header tw-mt-1.5 tw-flex tw-flex-row tw-items-center gradient-border tw-h-auto tw-border-l md:tw-border-none md:tw-ml-0 tw-ml-3"
                         v-if="openList && faq.id == currentIndex"
                         :key="faq.answer"
                       >
                         <div
-                          class="faq-answer tw-mt-4 tw-w-[90%] tw-font-inter-regular tw-text-base tw-leading-normal tw-text-black-core/[0.87] md:tw-text-xl md:tw-leading-[1.875rem]"
+                          class="faq-answer tw-w-[90%] tw-px-3 tw-font-inter-regular tw-text-base tw-leading-normal tw-text-black-core/[0.87] md:tw-text-xl md:tw-leading-[1.875rem]"
                           v-html="faq.answer"
                         ></div>
                       </div>
@@ -76,48 +75,48 @@
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="tw-container tw--mt-8 tw-pr-4 tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
-    >
-      <button
-        v-if="isActivePrev"
-        type="button"
-        :disabled="!isActivePrev"
-        class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer sm:tw-mx-2"
-        @click="slide(-1)"
-        @click.native="mixpanel.track('tap_android_app_faq_previous_arrow')"
-        aria-label="leftArrow"
-      >
-        <font-awesome-icon
-          :class="isActivePrev ? 'footer-icon' : ''"
-          class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-border-[#3d3d3d26] tw-bg-white tw-p-2.5 md:tw-h-5 md:tw-w-5"
-          icon="fa-angle-left"
-          id="leftArrow"
-        />
-      </button>
-      <button
-        v-else
-        type="button"
-        :disabled="!isActiveNext"
-        class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer sm:tw-mx-2"
-        @click="slide(1)"
-        @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
-        aria-label="rightArrow"
+      <div
+        class="tw-container tw-py-4 tw-flex tw-justify-center tw-items-center md:tw-justify-end tw-pr-4 tw-text-center md:tw-text-right md:tw-pr-6 md:tw-pt-4 xl:tw-pr-20 2xl:tw-pr-44"
       >
-        <div
+        <button
+          v-if="isActivePrev"
+          type="button"
+          :disabled="!isActivePrev"
+          class="clients-indicators tw-mx-1 tw-my-0 tw-cursor-pointer sm:tw-mx-2"
+          @click="slide(-1)"
+          @click.native="mixpanel.track('tap_android_app_faq_previous_arrow')"
+          aria-label="leftArrow"
+        >
+          <font-awesome-icon
+            :class="isActivePrev ? 'footer-icon' : ''"
+            class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-border-[#3d3d3d26] tw-bg-white tw-p-2.5 tw-drop-shadow-md md:tw-h-5 md:tw-w-5"
+            icon="fa-angle-left"
+            id="leftArrow"
+          />
+        </button>
+        <button
+          v-else
+          type="button"
           :disabled="!isActiveNext"
-          class="faq-question v2-canopas-gradient-text tw-w-[90%] tw-font-inter-semibold tw-text-[1.125rem] tw-leading-[1.6875rem] md:tw-text-[1.5rem] lg:tw-text-[1.75rem] md:tw-leading-[2rem] lg:tw-leading-[2.625rem]"
+          class="clients-indicators tw-flex tw-items-center tw-justify-center tw-my-0 tw-cursor-pointer"
+          @click="slide(1)"
+          @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
+          aria-label="rightArrow"
         >
-          Load More Questions
-        </div>
-        <font-awesome-icon
-          :class="isActiveNext ? 'footer-icon' : ''"
-          class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-bg-white tw-p-2.5 md:tw-h-5 md:tw-w-5"
-          icon="fa-angle-right"
-          id="rightArrow"
-        />
-      </button>
+          <div
+            :disabled="!isActiveNext"
+            class="faq-question v2-canopas-gradient-text tw-w-full tw-font-inter-semibold tw-text-base tw-leading-[1.21rem] md:tw-text-[1.5rem] lg:tw-text-3xl md:tw-leading-[1.3234375rem] lg:tw-leading-[1.436875rem]"
+          >
+            Load More Questions
+          </div>
+          <font-awesome-icon
+            :class="isActiveNext ? 'footer-icon' : ''"
+            class="arrow tw-h-3.5 tw-w-3.5 tw-rounded-full tw-bg-white tw-p-2.5 md:tw-h-5 md:tw-w-5"
+            icon="fa-angle-right"
+            id="rightArrow"
+          />
+        </button>
+      </div>
     </div>
   </section>
 </template>
@@ -168,13 +167,13 @@ export default {
           id: 6,
           question: "What happens if I find a bug after the app is launched?",
           answer:
-            "We offer post-aunch support, during which we will fix any bugs free of charge. After this period, we offer maintenance and support services.",
+            "We offer post-launch support, during which we will fix any bugs free of charge. After this period, we offer maintenance and support services.",
         },
         {
           id: 7,
           question: "Can you help launch my app on the App Store?",
           answer:
-            "Yes, we can guide you through the whole process of launching your app on the App Store, incuding setting up all necessary configurations and ensuring your app complies with all of Apple's guidelines.",
+            "Yes, we can guide you through the whole process of launching your app on the App Store, including setting up all necessary configurations and ensuring your app complies with all of Apple's guidelines.",
         },
         {
           id: 8,
@@ -255,3 +254,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.gradient-border {
+  border-image: linear-gradient(180deg, #f2709c 50%, #ff835b 50%) 1;
+}
+</style>
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
@@ -174,6 +174,7 @@ module.exports = {
         270: "270.11deg",
         180: "180deg",
       },
+
       backgroundImage: {
         "gradient-underline":
           "linear-gradient(transparent, transparent),linear-gradient(transparent, transparent),linear-gradient(to right, #f2709c, #ff835b)",