Update new images in mobile view

canopas · Sep 13, 2023 · 823d86a · 823d86a
1 parent 053a011
commit 823d86a
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 34 deletions.
diff --git a/vue-frontend/src/assets/images/ios-app-development/blog/blog3-400w.webp b/vue-frontend/src/assets/images/ios-app-development/blog/blog3-400w.webp
diff --git a/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog2-1200w.webp b/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog2-1200w.webp
diff --git a/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog2-800w.webp b/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog2-800w.webp
diff --git a/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog3-1200w.webp b/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog3-1200w.webp
diff --git a/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog3-800w.webp b/vue-frontend/src/assets/images/ios-app-development/blog/desk-blog3-800w.webp
diff --git a/vue-frontend/src/components/ios-app-development/BlogSection.vue b/vue-frontend/src/components/ios-app-development/BlogSection.vue
@@ -1,28 +1,34 @@
 <template>
-  <section class="tw-my-20 md:tw-mt-[8.063rem] xll:tw-container">
+  <section class="tw-my-20 md:tw-my-32 xll:tw-container">
     <div
       class="tw-pb-4 md:tw-py-12 tw-text-center tw-font-inter-bold tw-text-3xl tw-leading-[2.4375rem] md:tw-text-[2.65625rem] md:tw-leading-[3.796875rem] lg:tw-text-[3.4375rem] lg:tw-leading-[5.15625rem] tw-tracking-[-4%] xll:tw-py-24 tw-text-black-core/[0.87]"
     >
       <span>Our Blogs</span>
     </div>
     <!-- Mobile UI start -->
-    <div class="tw-mt-8 tw-block md:tw-hidden">
+    <div class="tw-mt-8 tw-block md:tw-hidden card-container">
       <swiper
-        :slidesPerView="1.5"
+        :slidesPerView="1"
         :spaceBetween="10"
         :centeredSlides="true"
         :modules="modules"
         :speed="3000"
-        class="!tw-p-8 md:tw-p-4"
+        :breakpoints="{
+          '470': {
+            slidesPerView: 1.2,
+          },
+          '520': {
+            slidesPerView: 1.4,
+          },
+        }"
+        class="!tw-p-8 md:tw-p-4 card"
       >
-        <swiper-slide
-          v-for="(blog, index) in blogs"
-          :key="index"
-          class="mobile-transition"
-        >
+        <swiper-slide v-for="(blog, index) in blogs" :key="index">
           <div
-            class="tw-w-80 tw-h-[299px] tw-drop-shadow-md tw-text-left tw-cursor-pointer card"
+            class="tw-w-80 tw-h-[299px] tw-drop-shadow-md tw-text-left tw-cursor-pointer"
+            :style="blog.style"
             :class="blog.className"
+            style="animation-delay: 1s"
           >
             <img
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
@@ -34,7 +40,7 @@
             />
             <div
               @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
+              class="tw-w-80 tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
             >
               <h2
                 class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
@@ -86,7 +92,7 @@
         <swiper-slide
           v-for="(blog, index) in blogs"
           :key="index"
-          class="tw-relative tw-flex tw-flex-col tw-pl-4 sm:tw-pl-8"
+          class="tw-cursor-pointer tw-relative tw-flex tw-flex-col tw-pl-4 sm:tw-pl-8"
         >
           <div class="tw-h-full tw-w-full">
             <img
@@ -99,6 +105,7 @@
             />
           </div>
           <p
+            @click="openBlog(blog.link, 'tap_ios_blog_section')"
             class="tw-mt-2 tw-font-inter-semibold tw-text-2xl lg:tw-text-[2.125rem] 2xll:tw-w-[75%] xll:tw-w-full lg:tw-leading-[3.1875rem] tw-tracking-[-4%] tw-text-black-core/[0.87]"
           >
             {{ blog.title }}
@@ -151,39 +158,39 @@ export default {
           readTime: "5 min read",
           deskImage: [dektop_blog1_800w, dektop_blog1_1200w],
           link: "https://blog.canopas.com/the-ultimate-guide-to-ios-unit-testing-with-best-practices-part-2-f2eacbf3d8d4",
-          className: "tw-sticky tw-left-0",
+          className: "",
         },
         {
           title: "SwiftUI Performance Tuning: Tips and Tricks",
           image: mobile_blog2_400w,
           readTime: "8 min read",
           deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
           link: "https://blog.canopas.com/swiftui-performance-tuning-tips-and-tricks-a8f9eeb23ec4",
-          className: "-tw-rotate-6",
+          className: "-tw-rotate-6 tw-animate-slideLeft ",
         },
         {
           title: "Designing Data Layer For Offline-first Apps",
           image: mobile_blog3_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
           link: "https://blog.canopas.com/ios-designing-data-layer-for-offline-first-apps-f929c83bb195",
-          className: "tw-rotate-6",
+          className: "tw-rotate-6 tw-animate-slideLeft ",
         },
         {
           title: "SwiftUI — Complex navigation made easier with UIPilot",
           image: mobile_blog4_400w,
           readTime: "5 min read",
           deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
           link: "https://blog.canopas.com/swiftui-complex-navigation-made-easier-with-uipilot-5b33279f3476",
-          className: "-tw-rotate-6",
+          className: "-tw-rotate-6 tw-animate-slideLeft ",
         },
         {
           title: "A Complete Guide to iOS App Auto Deployment with CI-CD",
           image: mobile_blog5_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
           link: "https://blog.canopas.com/a-complete-guide-to-ios-app-auto-deployment-with-ci-cd-b5dc516ba41d",
-          className: "tw-rotate-6",
+          className: "tw-rotate-6 tw-animate-slideLeft",
         },
       ],
     };
@@ -203,21 +210,17 @@ export default {
 </script>
 <style lang="postcss" scoped>
 @import "swiper/css";
-/* .swiper-slide-next > .card {
-  @apply tw-animate-slideRight;
-} */
-.card:nth-child(2) {
-  @apply tw-animate-slideRight;
-  animation-delay: 0.2s;
+.card-container {
+  position: relative;
+  width: 100%;
+  height: 370px;
+  perspective: 1000px;
 }
-
-.card:nth-child(3) {
-  @apply tw-animate-slideRight;
-  animation-delay: 0.4s;
-}
-
-.card:nth-child(4) {
-  @apply tw-animate-slideRight;
-  animation-delay: 0.6s;
+.card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
 </style>
diff --git a/vue-frontend/src/pages/ios-app-development.vue b/vue-frontend/src/pages/ios-app-development.vue
@@ -8,10 +8,10 @@
     <Header />
     <LandingSection ref="landing" />
     <DevelopmentSection ref="development" />
-    <BlogSection ref="blog" />
-    <FaqSection ref="faq" />
     <CtaSection ref="cta1" />
+    <BlogSection ref="blog" />
     <CtaSection2 ref="cta2" />
+    <FaqSection ref="faq" />
     <NewFooter ref="footer" />
   </div>
 </template>

diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
@@ -147,6 +147,16 @@ module.exports = {
             transform: " scale(1.2) translateX(15%)",
           },
         },
+        slideLeft: {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(0) ",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(-100%)",
+          },
+        },
       },
       animation: {
         zoomIn: "zoomIn 4s ease-in infinite",
@@ -161,6 +171,7 @@ module.exports = {
         fadeIn: "fadeIn 0.6s ease-in",
         slideDown: "slideDown 7s infinite",
         slideRight: "slideRight 7s infinite",
+        slideLeft: "slideLeft 3s forwards",
         fadeUp: "fadeUp 4s ease-in",
         fadeSlide: "fadeIn 4s ease-in-out",
         fadeSlideOut: "fadeOut 2.5s ease-in-out",