From a7930e78cb30bfcc62a179fb6ead38d6b247c472 Mon Sep 17 00:00:00 2001
From: Priyanka Gour <priyanka.g@canopas.com>
Date: Thu, 21 Sep 2023 09:53:16 +0530
Subject: [PATCH] Feat:Create SuccessStory Section for ios devlopment page

---
 .../review-background-400w.webp               | Bin 0 -> 1844 bytes
 .../ios-app-development/SuccessStory.vue      | 266 ++++++++++++++++++
 .../src/pages/ios-app-development.vue         |  28 +-
 3 files changed, 283 insertions(+), 11 deletions(-)
 create mode 100644 vue-frontend/src/assets/images/ios-app-development/review-background-400w.webp
 create mode 100644 vue-frontend/src/components/ios-app-development/SuccessStory.vue

diff --git a/vue-frontend/src/assets/images/ios-app-development/review-background-400w.webp b/vue-frontend/src/assets/images/ios-app-development/review-background-400w.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5d84cff0a5a651da5365c4287f18a44ba72cff4f
GIT binary patch
literal 1844
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
XalcJ6nM*Gm1js{qdglK-o*({CNEKl!

literal 0
HcmV?d00001

diff --git a/vue-frontend/src/components/ios-app-development/SuccessStory.vue b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
new file mode 100644
index 000000000..2a805ed01
--- /dev/null
+++ b/vue-frontend/src/components/ios-app-development/SuccessStory.vue
@@ -0,0 +1,266 @@
+<template>
+  <section class="tw-mb-20">
+    <div
+      class="tw-container md:tw-mt-36 lg:tw-mb-8 tw-mb-7 tw-mx-auto tw-text-center"
+    >
+      <span
+        class="tw-tracking-[-4%] tw-mb-2.5 tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[2.65625rem] lg:tw-text-[3.4375rem] md:tw-leading-[3.796875rem] lg:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
+      >
+        Success Stories</span
+      >
+    </div>
+    <!-- Mobile UI start -->
+    <div
+      class="tw-ml-auto md:tw-hidden tw-mx-auto tw-h-[30rem] tw-relative xll:tw-container tw-overflow-hidden"
+    >
+      <img
+        :src="reviewBackgroundImage"
+        :srcset="`${reviewBackgroundImage} 400w`"
+        class="tw-h-full tw-w-full tw-object-cover tw-ease-in-out tw-duration-1000"
+        alt="ios-review-image"
+      />
+      <div
+        class="tw-container swiper-content tw-absolute tw-p-4 tw-w-full tw-text-center tw-text-[#FFF] tw-transform tw-left-1/2 tw-top-1/2 tw--translate-x-1/2 tw--translate-y-1/2 xl:tw-w-[80%] md:tw-top-[49%] lg:tw-top-[48%]"
+      >
+        <swiper
+          :slidesPerView="1"
+          :centeredSlides="true"
+          :autoplay="{
+            delay: 3000,
+            disableOnInteraction: false,
+          }"
+          :speed="3000"
+          :loop="true"
+          :spaceBetween="20"
+          :pagination="pagination"
+          :modules="modules"
+          class="swiper-container"
+        >
+          <swiper-slide
+            v-for="(client, index) in clients"
+            :key="index"
+            class="tw-cursor-pointer tw-my-auto"
+          >
+            <div
+              class="tw-mx-auto sm:tw-px-10 md:tw-px-6 lg:tw-px-4 xl:tw-px-24 tw-text-white tw-flex tw-flex-col tw-justify-between tw-items-center tw-object-center"
+            >
+              <div
+                class="tw-font-inter-semibold tw-text-lg tw-leading-[1.6875rem] tw-transition-all tw-ease tw-duration-500 tw-tracking-[-2%]"
+              >
+                {{ client.review }}
+              </div>
+              <div class="tw-flex tw-flex-col tw-mt-8 tw-mb-2.5">
+                <span class="tw-flex tw-flex-row">
+                  <font-awesome-icon
+                    v-for="i in 5"
+                    :key="i"
+                    class="fa-star tw-w-5 tw-h-5 footer-icon"
+                    icon="star"
+                /></span>
+              </div>
+              <div class="tw-flex tw-flex-col">
+                <span
+                  class="tw-font-inter-semibold tw-text-base tw-leading-[1.2rem]"
+                  >{{ client.name }}</span
+                >
+                <span
+                  class="tw-font-inter-regular tw-text-xs tw-leading-[0.9rem] tw-mt-[0.3rem]"
+                  >{{ client.designation }}</span
+                >
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+    <!-- Mobile UI END -->
+    <!-- Desktop UI -->
+    <div
+      class="tw-hidden tw-w-full tw-h-[850px] lg:tw-h-[750px] tw-bg-[#FFF8F5] md:tw-flex tw-justify-center tw-items-center tw-relative tw-overflow-hidden before:tw-content-[''] before:tw-absolute before:tw-bottom-[0%] lg:before:tw-bottom-[-8%] before:tw-w-full before:tw-bg-[#fff] before:tw-h-[7%] before:tw-rounded-[50%] before:tw-shadow-[15px_1px_0_100px_rgba(255,255,255)] after:tw-content-[''] after:tw-absolute after:tw-top-[-2%] lg:after:tw-top-[-11%] after:tw-w-full after:tw-bg-[#fff] after:tw-h-[10%] after:tw-rounded-[50%] after:tw-shadow-[15px_1px_0_100px_rgba(255,255,255)] top-curve xll:tw-container"
+    >
+      <swiper
+        dir="rtl"
+        :slidesPerView="1"
+        :speed="2000"
+        :loop="true"
+        :autoplay="{
+          delay: 2000,
+          disableOnInteraction: false,
+        }"
+        :breakpoints="{
+          '1400': {
+            slidesPerView: 1.3,
+            spaceBetween: 30,
+          },
+          '1700': {
+            slidesPerView: 1.2,
+            spaceBetween: 20,
+          },
+          '2200': {
+            slidesPerView: 1.3,
+          },
+          '2450': {
+            slidesPerView: 1,
+          },
+        }"
+        :allowTouchMove="false"
+        :spaceBetween="20"
+        :pagination="pagination"
+        :modules="modules"
+        class="swiper-container tw-basis-[116rem] lg:tw-basis-[156rem] xl:tw-basis-[175rem]"
+      >
+        <swiper-slide
+          v-for="(client, index) in clients"
+          :key="index"
+          class="tw-flex tw-justify-center tw-items-center"
+        >
+          <div
+            class="tw-ml-4 lg:tw-ml-12 tw-p-5 tw-text-white tw-flex tw-flex-row tw-items-center tw-justify-end card-contain"
+          >
+            <div
+              class="tw-drop-shadow-md tw-rounded-[15px] tw-flex tw-flex-col tw-bg-white tw-h-[337px] tw-w-[20rem] lg:tw-w-[25rem] xl:tw-w-[30rem] card-rotate tw-relative"
+            ></div>
+            <div
+              class="tw-my-auto tw-px-12 tw-absolute tw-top-[32%] lg:tw-top-[35%] tw-left-0"
+            >
+              <span class="tw-flex tw-flex-row tw-justify-end tw-mb-2.5">
+                <font-awesome-icon
+                  v-for="i in 5"
+                  :key="i"
+                  class="fa-star tw-w-6 tw-h-6 footer-icon"
+                  icon="star"
+              /></span>
+              <div class="tw-flex tw-flex-col tw-text-left">
+                <span
+                  class="tw-font-inter-semibold tw-text-black-core/[0.87] tw-text-xl tw-leading-[1.875rem]"
+                  >{{ client.name }}</span
+                >
+                <span
+                  class="tw-font-inter-regular tw-text-black-core/[0.60] tw-text-[1.125rem] tw-leading-[1.6875rem] tw-mt-[0.3rem]"
+                  >{{ client.designation }}</span
+                >
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+
+      <swiper
+        :slidesPerView="1"
+        :speed="2000"
+        :loop="true"
+        :allowTouchMove="false"
+        :autoplay="{
+          delay: 2000,
+          disableOnInteraction: false,
+        }"
+        :breakpoints="{
+          '1400': {
+            slidesPerView: 1.28,
+          },
+          '1700': {
+            slidesPerView: 1.3,
+            spaceBetween: 0,
+          },
+          '2200': {
+            slidesPerView: 1.4,
+          },
+          '2450': {
+            slidesPerView: 1,
+          },
+        }"
+        :spaceBetween="20"
+        :pagination="pagination"
+        :modules="modules"
+        class="swiper-container !tw-flex !tw-items-center tw-justify-left"
+      >
+        <swiper-slide
+          v-for="(client, index) in clients"
+          :key="index"
+          class="tw-flex tw-justify-center tw-items-center"
+        >
+          <div
+            class="tw-p-4 xl:tw-mr-8 2xll:tw-mr-0 xl:tw-p-6 2xll:tw-p-12 tw-font-inter-medium tw-text-black-core/[0.87] tw-text-[1.75rem] tw-leading-[2.625rem] tw-transition-all tw-ease tw-duration-500 !tw-tracking-[-2%]"
+          >
+            {{ client.review }}
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+
+    <!-- Desktop UI END-->
+  </section>
+</template>
+
+<script>
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import reviewBackgroundImage from "@/assets/images/ios-app-development/review-background-400w.webp";
+export default {
+  data() {
+    return {
+      modules: [Autoplay],
+      reviewBackgroundImage,
+      clients: [
+        {
+          id: 1,
+          name: "Rebecca Kimura",
+          designation: "Founder at Togness, Australia",
+          review:
+            "“There was rarely ever a second explanation needed. Even if we struggled to explain technically what we wanted, they understood the first time.”",
+        },
+        {
+          id: 2,
+          name: "Elyass Bouchater",
+          designation: "Product Manager at Luxe, Morocco",
+          review:
+            "“The Play Store is the hardest app store to get good reviews on, and we've just reached a five-star rating, which has been one of our biggest achievements, partly thanks to Canopas' work.”",
+        },
+        {
+          id: 3,
+          name: "Rob Eberhard",
+          designation: "Founder at ActivScout, Canada",
+          review:
+            "“I was especially impressed with the skills of their backend developer and how well the project manager and she worked with one another to create a  high performing iOS app.”",
+        },
+        {
+          id: 4,
+          name: "Lisa Weinstein",
+          designation: "Founder at Brickandbatten, USA",
+          review:
+            "“There is not enough space to say all the wonderful things I would want to share about Canopas. The team is incredibly helpful, stays calm even when we had to deal with tough issues on our app and always found a way to help us fix whatever was needed or roll out any new features for our app in both the iOS and Android stores.”",
+        },
+        {
+          id: 5,
+          name: "Cyril Trosset",
+          designation: "CTO at Udini, France",
+          review:
+            "“Multiple versions of this Android app have been successfully delivered over time. They are always very responsive on bug resolution. They are very efficient at producing complex interfaces and  high quality apps.”",
+        },
+      ],
+    };
+  },
+
+  components: {
+    Swiper,
+    SwiperSlide,
+    FontAwesomeIcon,
+  },
+  inject: ["mixpanel"],
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+.swiper-wrapper {
+  @apply tw-items-center;
+}
+.card-rotate {
+  transform: rotateY(3deg);
+}
+
+.card-contain {
+  perspective: 120px;
+  backface-visibility: hidden;
+}
+</style>
diff --git a/vue-frontend/src/pages/ios-app-development.vue b/vue-frontend/src/pages/ios-app-development.vue
index 0891a806a..c1935aea8 100644
--- a/vue-frontend/src/pages/ios-app-development.vue
+++ b/vue-frontend/src/pages/ios-app-development.vue
@@ -6,12 +6,13 @@
       </template>
     </metainfo>
     <Header />
-    <LandingSection ref="landing" />
-    <DevelopmentSection ref="development" />
-    <FaqSection ref="faq" />
-    <CtaSection ref="cta1" />
-    <CtaSection2 ref="cta2" />
-    <NewFooter ref="footer" />
+    <LandingSection ref="iosLanding" />
+    <DevelopmentSection ref="iosDevelopment" />
+    <CtaSection ref="iosCta1" />
+    <SuccessStorySection ref="iosSuccessstory" />
+    <CtaSection2 ref="iosCta2" />
+    <FaqSection ref="iosFaq" />
+    <NewFooter ref="iosFooter" />
   </div>
 </template>
 
@@ -23,6 +24,9 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/ios-app-development/LandingSection.vue";
 import DevelopmentSection from "@/components/ios-app-development/DevelopmentSection.vue";
+const SuccessStorySection = defineAsyncComponent(() =>
+  import("@/components/ios-app-development/SuccessStory.vue"),
+);
 const FaqSection = defineAsyncComponent(() =>
   import("@/components/ios-app-development/FaqSection.vue"),
 );
@@ -41,11 +45,12 @@ export default {
     return {
       event: "",
       events: {
-        landing: "view_ios_development_landing_section",
-        development: "view_ios_app_development_section",
-        faq: "view_ios_development_faq_section",
-        cta1: "view_cta_1_ios_app_development_section",
-        cta2: "view_cta_2_ios_app_development_section",
+        iosLanding: "view_ios_development_landing_section",
+        iosDevelopment: "view_ios_app_development_section",
+        iosSuccessstory: "view_ios_app_development_section",
+        iosFaq: "view_ios_development_faq_section",
+        iosCta1: "view_cta_1_ios_app_development_section",
+        iosCta2: "view_cta_2_ios_app_development_section",
       },
     };
   },
@@ -73,6 +78,7 @@ export default {
     Header,
     LandingSection,
     DevelopmentSection,
+    SuccessStorySection,
     FaqSection,
     CtaSection,
     CtaSection2,