Add shadow to cards

vue-frontend/src/components/ios-app-development/SuccessStory.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="tw-mb-20">
-    <div class="tw-container tw-mt-36 tw-mb-7 tw-mx-auto tw-text-center">
+    <div class="tw-container md:tw-my-36 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%]"
       >
@@ -75,13 +75,18 @@
     <!-- Mobile UI END -->
     <!-- Desktop UI -->
     <div
-      class="tw-w-full tw-h-[630px] lg:tw-h-[750px] tw-relative tw-overflow-hidden before:tw-content-[''] before:tw-absolute before:tw-bottom-[-10%] before:tw-w-full before:tw-bg-[#fff] before:tw-h-[10%] before:tw-rounded-[50%] before:tw-shadow-[15px_1px_0_100px_rgba(255,255,255)] top-curve xll:tw-container tw-hidden tw-bg-[#FFF8F5] tw-h-[646px] md:tw-flex tw-justify-center tw-items-center"
+      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-[-14%] 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
-        :slidesPerView="1.1"
+        :slidesPerView="1"
         :centeredSlides="true"
         :speed="3000"
         :loop="true"
+        :breakpoints="{
+          '1100': {
+            slidesPerView: 1.125,
+          },
+        }"
         :spaceBetween="20"
         :pagination="pagination"
         :modules="modules"
@@ -96,9 +101,9 @@
             class="tw-mx-auto tw-text-white tw-flex tw-flex-row tw-items-center tw-object-center"
           >
             <div
-              class="tw-flex tw-flex-col tw-bg-white tw-h-[337px] tw-w-[80rem] lg:tw-w-[50rem] tw-text-left"
+              class="author tw-drop-shadow-md tw-rounded-[15px] tw-flex tw-flex-col tw-bg-white tw-h-[337px] tw-w-[125rem] lg:tw-w-[80rem] lg:tw-w-[50rem] tw-text-left"
             >
-              <div class="tw-my-auto tw-p-12">
+              <div class="tw-my-auto tw-px-12">
                 <span class="tw-flex tw-flex-row tw-justify-left tw-mb-2.5">
                   <font-awesome-icon
                     v-for="i in 5"
@@ -119,7 +124,7 @@
               </div>
             </div>
             <div
-              class="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%]"
+              class="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>
@@ -147,35 +152,35 @@ export default {
           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.",
+            "“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.",
+            "“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.",
+            "“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.",
+            "“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",
+            "“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.”",
         },
       ],
     };
@@ -202,18 +207,6 @@ export default {
   inject: ["mixpanel"],
 };
 </script>
-<style lang="postcss">
+<style lang="postcss" scoped>
 @import "swiper/css";
-
-.top-curve::after {
-  /* before:tw-content-none before:tw-absolute before:tw-bottom-[-10%] before:tw-w-full before:tw-bg-[#fff] before:tw-h-[10%] before:tw-rounded-[50%] before:tw-shadow-[15px_1px_0_100px_rgba(255,255,255,0.3)] */
-  content: "";
-  position: absolute;
-  top: -8%;
-  width: 100%;
-  background-color: #fff;
-  height: 10%;
-  border-radius: 50%;
-  box-shadow: 15px 1px 0px 100px #fff;
-}
 </style>