From 0e3ef11e53622c007a969f1bb1c8aff5115d34de Mon Sep 17 00:00:00 2001
From: cp-ashish-k <ashish.k@canopas.com>
Date: Tue, 19 Dec 2023 16:20:37 +0530
Subject: [PATCH] added success story section

---
 .github/workflows/deploy-frontend-dev.yml     |   4 +-
 .../backend-development/quote-left.webp       | Bin 0 -> 600 bytes
 .../SuccessStorySection.vue                   | 137 ++++++++++++++++++
 nuxt-frontend/pages/backend-development.vue   |   5 +
 4 files changed, 144 insertions(+), 2 deletions(-)
 create mode 100644 nuxt-frontend/assets/images/backend-development/quote-left.webp
 create mode 100644 nuxt-frontend/components/backend-development/SuccessStorySection.vue

diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-frontend-dev.yml
index ea851975a..3a428279d 100644
--- a/.github/workflows/deploy-frontend-dev.yml
+++ b/.github/workflows/deploy-frontend-dev.yml
@@ -2,8 +2,8 @@ name: DeployFrontendDev
 
 on:
   push:
-    branches:
-      - "master"
+    # branches:
+    #   - "master"
 
 jobs:
   deploy-frontend-dev:
diff --git a/nuxt-frontend/assets/images/backend-development/quote-left.webp b/nuxt-frontend/assets/images/backend-development/quote-left.webp
new file mode 100644
index 0000000000000000000000000000000000000000..41b5e87d1576fc7453e5322c8e1dddd4c0df62ce
GIT binary patch
literal 600
zcmV-e0;l~_Nk&Fc0ssJ4MM6+kP&il$0000G0000#001=r06|PpNX`KO00Dq%Yj4=*
z$EF%wsBvflXPVFqHZ+AbZK<g7|GbT5=?x-c0x+KUs-zaUr~LnE<VWC}EAN|E+8ggr
z7pd&4)7;qKJl00z>5>jwv%^mF>>(do8^(9qlY=PD*Vs<`3*$*?Uxx|@i^Ii184(Vu
zjO`peFsi0k5sd%R{F)O+cN$xPt6Dx8<3ghfTz48D@T>+ExC)IAcxD;}zNbOqS`7uh
z!hRE%%)Y|;G!(d=262+sQ@9HIC!81dSD(d@y=qV4TYGOf3;U~&u)lgOhUBvtl2`4W
z@O}0!c(Xq{X>SFR<SawE*8s?rr!+9p@UOhB|C8yjSIgD--Rdfa*<i1$;n^EJrL#Ga
zr*z&<<bL;bqskrquk=;@*rqQD;3oml0IC4U5j+932-YwbfUyObV_J%82}=yOD9&Lm
zMb$7a8q|=Zjwt?2QSWEeEK%)<TF`>{7gwXEsEi}1p#@FIK`$IJ4M;8KK#n;995ESq
zhs*$Shyqw56yG&s1ArQ^-sAw4uV23t_lMt#+v26tLG?P&-F#HgPwMl4ar01tHC-MD
z%%Vd_!r<0MTEXb@HoY>&<)N0gB{=?;>)lAbN`iAfs*>$}<b*y}P&go50002+1OS}@
zDnI}>06uLllSU*Wp`k7a0DujNX#fCYoP|GCkeTX2)-0ztctX$2vseHC{_#YA{y|^=
mkL3UV9(z~+_=k>vN$>yi3jh3nC;#~K+Q0wAIsgCw0000O$r?2P

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/components/backend-development/SuccessStorySection.vue b/nuxt-frontend/components/backend-development/SuccessStorySection.vue
new file mode 100644
index 000000000..aecab3511
--- /dev/null
+++ b/nuxt-frontend/components/backend-development/SuccessStorySection.vue
@@ -0,0 +1,137 @@
+<template>
+  <section class="my-16 lg:my-60 3xl:outer-container">
+    <!-- Mobile UI start -->
+    <div class="lg:hidden">
+      <div class="header-2 text-center text-black-core/[0.87] mb-6">
+        Our success stories
+      </div>
+      <swiper
+        :slidesPerView="1.1"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        :spaceBetween="0"
+        :centeredSlides="true"
+        :speed="1500"
+        :loop="true"
+        :modules="modules"
+      >
+        <swiper-slide
+          v-for="client in clients"
+          :key="client"
+          class="text-white bg-[#121212] !scale-75 transition-all duration-200 rounded-xl text-left ease-in"
+        >
+          <div class="container py-6">
+            <img
+              :src="imageleft"
+              class="w-6 h-6 object-contain"
+              loading="lazy"
+              alt="left-quote"
+            />
+            <div class="mt-6">
+              <div class="flex flex-col gap-6">
+                <p class="sub-h1-semibold" v-html="client.review"></p>
+                <div class="flex flex-col">
+                  <p class="sub-h3-semibold opacity-80">{{ client.name }}</p>
+                  <p class="sub-h3-regular opacity-60">
+                    {{ client.designation }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- Mobile UI END -->
+    <!-- Desktop UI -->
+    <div class="hidden lg:block container">
+      <div class="header-2 text-center text-black-core/[0.87] mb-[4.5rem]">
+        Success Stories
+      </div>
+      <swiper
+        :slidesPerView="1.5"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: true,
+        }"
+        :centeredSlides="true"
+        :speed="1500"
+        :loop="true"
+        :modules="modules"
+        class="h-[35.4375rem] !overflow-visible"
+      >
+        <swiper-slide
+          v-for="client in clients"
+          :key="client"
+          class="client text-white bg-[#121212] !scale-75 transition-all duration-200 rounded-xl text-left ease-in"
+          ><div class="container py-14 mx-14">
+            <img
+              :src="imageleft"
+              class="w-6 h-6 object-contain"
+              loading="lazy"
+              alt="quote-left"
+            />
+            <div class="flex flex-col !justify-between mt-6 h-[25.26rem]">
+              <div class="sub-h1-semibold">{{ client.review }}</div>
+              <div class="flex flex-col">
+                <p class="sub-h3-semibold opacity-80">{{ client.name }}</p>
+                <p class="sub-h3-regular opacity-60">
+                  {{ client.designation }}
+                </p>
+              </div>
+            </div>
+          </div></swiper-slide
+        >
+      </swiper>
+    </div>
+    <!-- Desktop UI END-->
+  </section>
+</template>
+<script setup>
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import imageleft from "@/assets/images/backend-development/quote-left.webp";
+const modules = [Autoplay];
+const 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."`,
+  },
+];
+</script>
+<style lang="postcss" scoped>
+.swiper-slide-active {
+  @apply !scale-100;
+}
+.client {
+  box-shadow: 1.5rem 1.5rem #ff9472 !important;
+}
+</style>
diff --git a/nuxt-frontend/pages/backend-development.vue b/nuxt-frontend/pages/backend-development.vue
index c554c8c1c..f8b710682 100644
--- a/nuxt-frontend/pages/backend-development.vue
+++ b/nuxt-frontend/pages/backend-development.vue
@@ -3,6 +3,7 @@
     <Header />
     <LandingSection />
     <CaseStudySection />
+    <SuccessStorySection />
     <NewFooter class="-mt-4 md:mt-0" />
   </div>
 </template>
@@ -15,6 +16,9 @@ import LandingSection from "@/components/backend-development/LandingSection.vue"
 const CaseStudySection = defineAsyncComponent(
   () => import("@/components/backend-development/CaseStudySection.vue"),
 );
+const SuccessStorySection = defineAsyncComponent(
+  () => import("@/components/backend-development/SuccessStorySection.vue"),
+);
 const NewFooter = defineAsyncComponent(
   () => import("@/components/partials/NewFooter.vue"),
 );
@@ -34,6 +38,7 @@ export default {
     Header,
     LandingSection,
     CaseStudySection,
+    SuccessStorySection,
     NewFooter,
   },
   setup() {