From 2413c629c2c6b607f4ec7210e3aca3eb09c3d7b2 Mon Sep 17 00:00:00 2001
From: Ashish <ashish.k@canopas.com>
Date: Fri, 10 Nov 2023 10:35:40 +0530
Subject: [PATCH] create-success-story

---
 .../images/flutter-app-development/quote.webp | Bin 0 -> 644 bytes
 .../SuccessStorySection.vue                   | 117 ++++++++++++++++++
 .../pages/flutter-app-development.vue         |   5 +
 3 files changed, 122 insertions(+)
 create mode 100644 nuxt-frontend/assets/images/flutter-app-development/quote.webp
 create mode 100644 nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue

diff --git a/nuxt-frontend/assets/images/flutter-app-development/quote.webp b/nuxt-frontend/assets/images/flutter-app-development/quote.webp
new file mode 100644
index 0000000000000000000000000000000000000000..05a26090682a7ef9a853dfb5f08bc4aa4521d872
GIT binary patch
literal 644
zcmV-~0(<>ZNk&F|0ssJ4MM6+kP&il$0000G0000d001Wd06|PpNNE8800EE{ZF}5S
zKLG(S4%27>n1BfgKmx!7Lcjo203z_sbYFa>_U!xOvwFre-$nHQmVzK6CO|f}-4G%W
z$Dwbfyz3*(Vc(Q-9tHPJfi9wGINRh=+}qp%6-Q?oQT1T(sO*(<RPQoPs2APQ4kzeE
zq`^r#k==&r?Yt&s`uJyk$n_$@G|l9akbSk1^Mrhq7S^{UKVIVaY9{#_#<sV7Ao&j2
ztA*qQYd07Y$uG!%A^95SVbpFHlE2>G9!(_qCEZ#sqL!F{3t&DXmj^?HJ}Z2MORDRG
zW~IJfP8w%JRBjARuME6YVo)Z_+qaenWgL_n%d2F$RfbN%YPh*EEKvJad!>B=zH3Qq
zB`SEA`+Eso{>i<A8bo>xX<j+MLpJ^4I#1B|BF<2?5fOh1dl3;A>xJe>x_W1l_qDv}
zhdQGe-B{z`EF!*~m#ycaOzdQPvn%196m53F7JDb<+kO}$5W~>5vJn7QP&gp$0001R
z1^}G_DkuOb06vjIol2#nqM@UU0I(7XX#f+zJ=9~WzY!)~T#k0Xe7v^tKWCGwuNv=q
zIOR{#)rSB8{{8n7mESh@KA3gx2pO#0$L!ydlYr6B=`UXnM>T_s-#TSQhW~a#%nSx)
z{vxKa5wM-iem~Vx5NAs7BmpOxYWuk3vr3Dfe>#myy_Vk{t~~v+zKpibpXUQwD-T${
za>J*;Yf}PZ;;zon6_+L*XduvecO@OHu}ptgaaVI6I+TOER>Fu-eJP%^c$EE$s9#(O
eCONTV!tgta-+BXpSs%<OnOK@V)~14*0000|)+P@C

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
new file mode 100644
index 000000000..c667c8d8b
--- /dev/null
+++ b/nuxt-frontend/components/flutter-app-development/SuccessStorySection.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="bg-black-core text-white text-center h-[600px] lg:h-[750px]">
+    <div
+      class="container flex gap-6 lg:gap-[4.5rem] flex-col pt-12 xs:pt-14 sm:pt-[4.5rem] lg:!pt-[7.5rem] xl:!pt-24 lg:px-48"
+    >
+      <div class="header-2">Our Success Stories</div>
+      <div class="flex flex-col gap-6 lg:gap-10">
+        <img
+          :src="quoteimage"
+          class="mx-auto w-10 lg:w-14 h-full object-contain"
+          alt="quote-image"
+        />
+        <div class="swiper-content">
+          <swiper
+            :slidesPerView="1"
+            :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">
+              <div class="flex flex-col gap-6 lg:gap-10">
+                <div class="sub-h1-semibold">"{{ client.review }}"</div>
+                <div class="flex flex-col">
+                  <span class="sub-h3-semibold opacity-80">{{
+                    client.name
+                  }}</span>
+                  <span class="sub-h3-regular opacity-60">{{
+                    client.designation
+                  }}</span>
+                </div>
+              </div>
+            </swiper-slide>
+            <div class="swiper-pagination"></div>
+          </swiper>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { Autoplay, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import quoteimage from "@/assets/images/flutter-app-development/quote.webp";
+export default {
+  data() {
+    return {
+      modules: [Pagination, Autoplay],
+      quoteimage,
+      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.",
+        },
+      ],
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+    };
+  },
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+.swiper-pagination {
+  @apply static pt-6 pl-0;
+}
+.swiper-pagination-bullet {
+  @apply !w-3 !h-3 !rounded-full !bg-[#F2709C]/[0.8] !border !border-solid !border-[#FFFFFF]/[0.80];
+}
+.swiper-pagination-bullet-active {
+  @apply !border-none !opacity-100;
+}
+</style>
diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
index 42d078b54..bfa104f16 100644
--- a/nuxt-frontend/pages/flutter-app-development.vue
+++ b/nuxt-frontend/pages/flutter-app-development.vue
@@ -3,6 +3,7 @@
     <Header />
     <LandingSection />
     <CtaSection />
+    <SuccessStory />
     <NewFooter ref="flutterFooter" />
   </div>
 </template>
@@ -16,6 +17,9 @@ import LandingSection from "@/components/flutter-app-development/LandingSection.
 const CtaSection = defineAsyncComponent(() =>
   import("@/components/flutter-app-development/CtaSection.vue"),
 );
+const SuccessStory = defineAsyncComponent(() =>
+  import("@/components/flutter-app-development/SuccessStorySection.vue"),
+);
 const NewFooter = defineAsyncComponent(() =>
   import("@/components/partials/NewFooter.vue"),
 );
@@ -44,6 +48,7 @@ export default {
     Header,
     LandingSection,
     CtaSection,
+    SuccessStory,
     NewFooter,
   },
   methods: {