added casestudy section for flutter page

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

@@ -0,0 +1,115 @@
+<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 class="hidden lg:block">
+      <div id="stickyParent" class="h-[300vh]">
+        <div
+          v-for="(portfolio, index) in portfolios"
+          :key="index"
+          class="main sticky flex bg-[#F8F8F8]"
+        >
+          <div class="flex-1">
+            <img
+              :src="portfolio.image[2]"
+              :srcset="`${portfolio.image[2]} 800w`"
+              :alt="portfolio.title"
+              class="w-full h-full object-contain"
+              loading="lazy"
+            />
+          </div>
+          <div
+            class="flex-1 relative text-left text-white"
+            :class="(portfolio.background, { 'animate-moveIn': isAnimated })"
+          >
+            <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>
+    <!-- Desktop UI ends -->
+  </div>
+</template>
+<script setup>
+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";
+
+const isAnimated = ref(false);
+const portfolios = [
+  {
+    title: "Reelnews",
+    image: [mobile_reelnews1, mobile_reelnews2, desktop_reelnews1],
+    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, index) => {
+    const react = section.getBoundingClientRect();
+    if (react.top < windowHeight / 2 && react.bottom >= 0) {
+      isAnimated.value = true;
+    } else {
+      isAnimated.value = false;
+    }
+  });
+};
+</script>
+<style lang="postcss" scoped></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"),
 );