added casestudy section for flutter app page

.github/workflows/deploy-frontend-dev.yml

@@ -2,8 +2,8 @@ name: DeployFrontendDev
 
 on:
   push:
-    branches:
-      - "master"
+    # branches:
+    #   - "master"
 
 jobs:
   deploy-frontend-dev:

nuxt-frontend/components/flutter-app-development/CaseStudySection.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="mt-16 lg:mt-60 text-center 3xl:outer-container">
+    <div
+      class="container flex flex-col gap-4 lg:gap-6 pb-6 lg:pb-[4.5rem] lg:w-[51.625rem]"
+    >
+      <h2 class="header-2 text-black-core/[0.87]">Case studies</h2>
+      <span class="sub-h1-regular text-black-core/[0.6]">
+        Explore our case studies to witness how we've transformed our client's
+        ideas into successful Flutter apps.
+      </span>
+    </div>
+    <!-- Mobile UI -->
+    <div class="lg:hidden text-left">
+      <div
+        v-for="(portfolio, index) in portfolios"
+        :key="index"
+        class="bg-[#F8F8F8]"
+      >
+        <img
+          :src="portfolio.image[0]"
+          :srcset="`${portfolio.image[1]} 400w`"
+          class="w-[414px] h-[412px] object-cover mx-auto"
+          :alt="portfolio.title"
+          loading="lazy"
+        />
+        <div
+          class="pt-6 pb-14 text-white relative"
+          :class="portfolio.background"
+        >
+          <div
+            class="absolute -top-1 left-1/2 -translate-x-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-0 border-l-[13px] border-r-[13px] border-b-[14px] border-b-[#EF233C] border-b-solid"
+          ></div>
+          <div class="container flex flex-col gap-4">
+            <h3 class="header-3">{{ portfolio.title }}</h3>
+            <span class="sub-h1-regular">{{ portfolio.description }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Mobile UI ends -->
+    <!-- Desktop UI -->
+    <div id="stickyParent" class="hidden lg:block h-[150vh]">
+      <div class="sticky top-0 max-h-full main">
+        <div v-for="(portfolio, index) in portfolios" :key="index">
+          <div class="flex bg-[#F8F8F8] h-screen">
+            <div class="flex-1">
+              <img
+                :src="portfolio.image[2]"
+                :srcset="`${portfolio.image[2]} 800w,${portfolio.image[3]} 1200w`"
+                :alt="portfolio.title"
+                class="w-full h-full object-contain opacity-0"
+                loading="lazy"
+                :class="{ 'animate-fadeInLeft opacity-100': isAnimated }"
+              />
+            </div>
+            <div
+              class="flex-1 relative text-left text-white opacity-0"
+              :class="
+                ({ 'animate-moveIn opacity-100': isAnimated },
+                portfolio.background)
+              "
+            >
+              <div
+                class="absolute -left-4 top-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-[18px] border-b-[18px] border-r-[18px] border-r-[#EF223C] border-l-solid"
+              ></div>
+              <div
+                class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
+              >
+                <h3 class="header-3">{{ portfolio.title }}</h3>
+                <span class="sub-h1-regular">{{ portfolio.description }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Desktop UI ends -->
+  </div>
+</template>
+<script setup type="module">
+import mobile_reelnews1 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-400w.webp";
+import mobile_reelnews2 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-800w.webp";
+import desktop_reelnews1 from "@/assets/images/flutter-app-development/casestudy/p1-800w.webp";
+import desktop_reelnews2 from "@/assets/images/flutter-app-development/casestudy/p1-1200w.webp";
+
+const isAnimated = ref(false);
+const portfolios = [
+  {
+    title: "Reelnews",
+    image: [
+      mobile_reelnews1,
+      mobile_reelnews2,
+      desktop_reelnews1,
+      desktop_reelnews2,
+    ],
+    background: "bg-[#EF233C]",
+    description:
+      "Ditch Old News, Get reelnews: The News App for the Upcoming Wave of News Creators and Consumers.",
+  },
+];
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
+const handleScroll = () => {
+  const sections = document.querySelectorAll(".main");
+  const windowHeight = window.innerHeight;
+
+  sections.forEach((section) => {
+    const react = section.getBoundingClientRect();
+    if (react.top <= windowHeight / 4 && react.bottom >= 0) {
+      isAnimated.value = true;
+    }
+  });
+};
+</script>
+<!-- <style lang="postcss" scoped>
+@keyframes fadeInLeft {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes moveIn {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+.animate-fadeInLeft {
+  animation: fadeInLeft 2s ease-in-out;
+  opacity: 1;
+}
+.animate-moveIn {
+  animation: moveIn 1s ease-in-out;
+  opacity: 1;
+}
+</style> -->

nuxt-frontend/pages/flutter-app-development.vue

@@ -3,6 +3,7 @@
     <Header />
     <LandingSection />
     <DevelopmentSection />
+    <CaseStudySection />
     <CtaSection />
     <SuccessStory />
     <BlogSection />
@@ -19,6 +20,9 @@ import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/flutter-app-development/LandingSection.vue";
 import DevelopmentSection from "@/components/flutter-app-development/DevelopmentSection.vue";
+const CaseStudySection = defineAsyncComponent(
+  () => import("@/components/flutter-app-development/CaseStudySection.vue"),
+);
 const CtaSection = defineAsyncComponent(
   () => import("@/components/flutter-app-development/CtaSection.vue"),
 );

nuxt-frontend/tailwind.config.js

@@ -101,6 +101,11 @@ module.exports = {
           "0%": { top: "-120px", opacity: "0" },
           "100%": { top: " 0", opacity: "1" },
         },
+        fadeInLeft: {
+          "0%": { transform: "translateX(100%)", opacity: "0" },
+          "50%": { transform: "translateX(50%)", opacity: "0" },
+          "100%": { transform: "translateX(0)", opacity: "1" },
+        },
         fadeInRight: {
           "0%": { transform: "translateX(200px);" },
           "100%": { transform: "translateX(0px);" },
@@ -127,6 +132,16 @@ module.exports = {
             opacity: 0,
           },
         },
+        moveIn: {
+          "0%": {
+            transform: "translateY(100%);",
+            opacity: 0,
+          },
+          "100%": {
+            transform: "translateY(0);",
+            opacity: 1,
+          },
+        },
         moveUp: {
           "0%": {
             transform: "translateY(3rem)",
@@ -175,6 +190,8 @@ module.exports = {
         fadeSlideOut: "fadeOut 2.5s ease-in-out",
         zoomEffect: "zoomEffect 0.5s ease forwards",
         moveUp: "moveUp 1s ease-in-out",
+        fadeInLeft: "fadeInLeft 1s ease-in-out",
+        moveIn: "moveIn 0.5s ease-in-out",
       },
       zIndex: {
         "-1": "-1",