Refined FAQ section

canopas · Oct 28, 2023 · dd6c639 · dd6c639
1 parent c020698
commit dd6c639
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/FaqSection.vue b/vue-frontend/src/components/ios-app-development/FaqSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="tw-my-8 md:tw-mb-20 lg:tw-my-60">
+  <section class="tw-my-8 sm:tw-mt-16 md:tw-mb-20 lg:tw-my-60">
     <div class="tw-mb-4 lg:tw-container">
       <div class="tw-mx-[2%] tw-my-0 tw-flex tw-flex-col tw-gap-4 lg:tw-my-0">
         <div class="tw-text-center">
@@ -85,26 +85,26 @@
                     :key="faq"
                   >
                     <div
-                      class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white tw-p-[15px] tw-shadow-md sm:tw-p-[25px]"
+                      class="faq-container tw-cursor-pointer tw-overflow-hidden tw-rounded-[5px] tw-bg-white lg:tw-p-[15px] lg:tw-shadow-md"
                       @click="expandListItem(faq.id)"
                     >
                       <div
                         class="faq-header tw-flex tw-flex-row tw-items-center"
                       >
                         <div
-                          class="faq-question tw-w-[90%] sub-h1-semibold"
+                          class="faq-question tw-w-[90%] tw-p-[10px] sub-h1-semibold"
                           :class="
                             openList && faq.id == currentIndex
                               ? 'v2-canopas-gradient-text footer-icon'
-                              : 'tw-text-black-core/[0.87]'
+                              : 'tw-text-black-core/[0.60] lg:tw-text-black-core/[0.80]'
                           "
                         >
                           {{ faq.question }}
                         </div>
                         <div
                           class="faq-icon tw-w-[10%] tw-text-end"
                           @click.native="
-                            mixpanel.track('tap_android_app_faq_questions')
+                            mixpanel.track('tap_ios_app_faq_questions')
                           "
                         >
                           <font-awesome-icon
@@ -116,20 +116,20 @@
                             "
                             :icon="
                               openList && faq.id == currentIndex
-                                ? 'xmark'
-                                : 'plus'
+                                ? 'angle-up'
+                                : 'angle-down'
                             "
                           />
                         </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-animate-fadeIn tw-items-center gradient-border tw-h-auto tw-border-l md:tw-border-l-4 tw-ml-3"
                           v-if="openList && faq.id == currentIndex"
                           :key="faq.answer"
                         >
                           <div
-                            class="faq-answer tw-mt-4 tw-w-[90%] tw-animate-fadeIn sub-h3-regular tw-text-black-core/[0.87]"
+                            class="faq-answer tw-w-[90%] tw-px-3 sub-h3-regular"
                             v-html="faq.answer"
                           ></div>
                         </div>
@@ -143,17 +143,19 @@
                 </div>
               </transition-group>
             </collapse-transition>
-            <div class="tw-mx-auto tw-my-8 lg:tw-hidden">
+            <div
+              class="tw-w-full tw-my-8 lg:tw-hidden tw-mt-8 tw-flex tw-justify-center tw-items-center"
+            >
               <div
-                class="tw-border tw-border-white primary-btn"
+                class="gradient-button tw-border tw-border-black tw-w-[155px] tw-cursor-pointer tw-h-[57px]"
                 @click="showAdditionalFAQs = !showAdditionalFAQs"
               >
-                <span class="tw-text-white sub-h3-semibold"
+                <span class="sub-h3-semibold v2-canopas-gradient-text"
                   >{{ showAdditionalFAQs ? "View Less" : "View More" }}
                 </span>
                 <font-awesome-icon
-                  class="tw-ml-2 tw-mt-1 fab tw-w-4 tw-h-4 tw-text-white"
-                  :icon="showAdditionalFAQs ? faAngleUp : faAngleDown"
+                  class="fa tw-ml-2 tw-mt-1 footer-icon"
+                  :icon="showAdditionalFAQs ? faAngleDown : faAngleUp"
                 />
               </div>
             </div>
@@ -170,7 +172,7 @@
         :disabled="!isActivePrev"
         class="lg:tw--mr-4 tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
         @click="slide(-1)"
-        @click.native="mixpanel.track('tap_android_app_faq_previous_arrow')"
+        @click.native="mixpanel.track('tap_ios_app_faq_previous_arrow')"
         aria-label="leftArrow"
       >
         <font-awesome-icon
@@ -186,7 +188,7 @@
         class="lg:tw--mr-4 tw-h-12 tw-flex tw-ml-auto tw-items-center tw-text-center"
         :disabled="!isActiveNext"
         @click="slide(1)"
-        @click.native="mixpanel.track('tap_android_app_faq_next_arrow')"
+        @click.native="mixpanel.track('tap_ios_app_faq_next_arrow')"
         aria-label="rightArrow"
       >
         <span class="v2-canopas-gradient-text sub-h4-semibold"
@@ -206,12 +208,15 @@
 <script type="module">
 import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 
 const TOTAL_FAQ_IN_SLIDE = 5;
 
 export default {
   data() {
     return {
+      faAngleUp,
+      faAngleDown,
       showAdditionalFAQs: false,
       faqs: [
         {
@@ -337,8 +342,11 @@ export default {
   },
 };
 </script>
-<style scoped>
+<style lang="postcss">
 .gradient-border {
   border-image: linear-gradient(180deg, #f2709c 50%, #ff835b 50%) 1;
 }
+.gradient-button {
+  @apply tw-m-[5px] tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-bg-gradient-to-r tw-from-[#ff9472] tw-via-[#ff909c] tw-to-[#f2709c] tw-p-[1rem] tw-text-center tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98];
+}
 </style>