Feat: Design case study section for frontend page

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

@@ -0,0 +1,122 @@
+<template>
+  <section class="mt-16 lg:!mt-60">
+    <div
+      class="container mb-2 lg:-mb-4 2xl:-mb-12 xll:-mb-52 3xl:-mb-[35rem] text-center"
+    >
+      <h2 class="mobile-header-2 lg:desk-header-2 text-black-87">
+        Case studies
+      </h2>
+      <p
+        class="sub-h1-regular lg:mobile-header-2-regular mt-4 lg:mt-6 text-black-60 xs:px-4"
+      >
+        Explore our case studies to witness how we've transformed our
+        <br class="hidden md:inline-block" />client's ideas into successful
+        websites.
+      </p>
+    </div>
+    <!-- Mobile View starts -->
+    <div class="lg:hidden mb-16">
+      <div
+        v-for="(portfolio, index) in portfolios"
+        :key="index"
+        class="mt-4 py-12"
+        :class="portfolio.bgcolor"
+      >
+        <div class="container">
+          <img
+            :src="portfolio.image[0]"
+            :srcset="`${portfolio.image[0]} 400w,${portfolio.image[1]} 800w`"
+            :alt="portfolio.title"
+            class="w-full h-full object-cover"
+          />
+          <h2 class="mobile-header-2 text-black-87 mt-2">
+            {{ portfolio.title }}
+          </h2>
+          <p class="sub-h1-regular text-black-60 mt-2">
+            {{ portfolio.description }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- Mobile View ends -->
+    <!-- Desktop View starts -->
+    <div class="h-[200vh] mb-32 hidden lg:block" id="parentContainer">
+      <div
+        class="sticky top-0 h-screen main overflow-hidden snap-y snap-mandatory scroll-smooth"
+      >
+        <div
+          v-for="(portfolio, index) in portfolios"
+          :key="index"
+          :id="`portfolio-${index}`"
+          class="section text-center h-screen flex justify-evenly snap-start opacity-0"
+        >
+          <div
+            class="flex flex-col w-[75rem] py-28 container rounded-xl"
+            :class="portfolio.bgdesk"
+          >
+            <img
+              :src="portfolio.image[0]"
+              :srcset="`${portfolio.image[0]} 400w,${portfolio.image[1]} 800w`"
+              :alt="portfolio.title"
+              class="w-[36rem] h-96 object-cover m-auto"
+              loading="lazy"
+            />
+            <h2 class="mobile-header-2 text-black-87 mt-2">
+              {{ portfolio.title }}
+            </h2>
+            <p class="sub-h1-regular text-black-60 mt-2">
+              {{ portfolio.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Desktop View Ends -->
+  </section>
+</template>
+<script setup>
+import web400 from "@/assets/images/frontend-development/casestudy/web-400w.webp";
+import web800 from "@/assets/images/frontend-development/casestudy/web-800w.webp";
+import luxe400 from "@/assets/images/frontend-development/casestudy/luxe-400w.webp";
+import luxe800 from "@/assets/images/frontend-development/casestudy/luxe-800w.webp";
+
+const portfolios = [
+  {
+    title: "Canopas",
+    image: [web400, web800],
+    description: "Web and mobile app development company",
+    bgcolor: "bg-web-gradient-background",
+    bgdesk: "bg-web-desk-gradient-background",
+  },
+  {
+    title: "Luxeradio",
+    image: [luxe400, luxe800],
+    description: "New personalized radio and modern art gallery.",
+    bgcolor: "bg-luxeradio-gradient-background",
+    bgdesk: "bg-luxeradio-desk-gradient-background",
+  },
+];
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+function handleScroll() {
+  const parentContainer = document.getElementById("parentContainer");
+  const parentTop = parentContainer.offsetTop;
+  const childContainer = document.querySelector(".main");
+  const scrollPosition = window.scrollY || window.pageYOffset;
+  const sections = document.querySelectorAll(".section");
+  if (scrollPosition >= parentTop) {
+    const scrollAmount = scrollPosition - parentTop;
+    childContainer.scrollTop = scrollAmount;
+  }
+  sections.forEach((section) => {
+    const itemReact = section.getBoundingClientRect();
+    if (itemReact.top < 350 || childContainer.offsetTop - parentTop > 500) {
+      section.classList.add("animate-popUp");
+    }
+  });
+}
+</script>

nuxt-frontend/components/frontend-development/LandingSection.vue

@@ -15,7 +15,7 @@
           visually stunning, high-performing, and user-centric interfaces.
         </p>
         <nuxt-link
-          class="white-btn gradient-border-btn primary-btn border-none ml-0 mt-6 hidden lg:flex"
+          class="gradient-btn primary-btn border-none ml-0 mt-6 hidden lg:flex"
           to="/contact"
           @click.native="$mixpanel.track('tap_frontend_landing_cta')"
         >
@@ -35,7 +35,7 @@
         />
       </div>
       <nuxt-link
-        class="white-btn gradient-border-btn primary-btn border-none lg:hidden"
+        class="gradient-btn primary-btn border-none lg:hidden"
         to="/contact"
         @click.native="$mixpanel.track('tap_frontend_landing_cta')"
       >

nuxt-frontend/pages/frontend-development.vue

@@ -1,16 +1,18 @@
 <template>
-  <div>
-    <Header />
-    <LandingSection />
-    <NewFooter class="bg-gradient-to-b from-pink-0 to-pink-16" />
-  </div>
+  <Header />
+  <LandingSection />
+  <CaseStudySection />
+  <NewFooter class="bg-gradient-to-b from-pink-0 to-pink-16" />
 </template>
 <script>
 import Header from "@/components/partials/NewHeader.vue";
 import NewFooter from "@/components/partials/NewFooter.vue";
 import config from "@/config.js";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/frontend-development/LandingSection.vue";
+const CaseStudySection = defineAsyncComponent(
+  () => import("@/components/frontend-development/CaseStudySection.vue"),
+);
 export default {
   beforeRouteEnter(to, from, next) {
     if (!config.SHOW_FRONTEND_DEVELOPMENT_PAGE) {
@@ -25,6 +27,7 @@ export default {
   components: {
     Header,
     LandingSection,
+    CaseStudySection,
     NewFooter,
   },
   setup() {

nuxt-frontend/tailwind.config.js

@@ -228,6 +228,15 @@ module.exports = {
             backgroundSize: "100%",
           },
         },
+        popUp: {
+          "0%": {
+            transform: "scale(0)",
+          },
+          "100%": {
+            transform: "scale(1)",
+            opacity: 1,
+          },
+        },
       },
       animation: {
         zoomIn: "zoomIn 4s ease-in infinite",
@@ -249,6 +258,7 @@ module.exports = {
         moveUp: "moveUp 1s ease-in-out",
         fadeInLeft: "fadeInLeft 1s ease-in-out",
         moveIn: "moveIn 0.5s ease-in-out",
+        popUp: "popUp 0.3s linear forwards",
       },
       zIndex: {
         "-1": "-1",
@@ -309,6 +319,14 @@ module.exports = {
           "radial-gradient(84% 76.48% at 50% 50%, #E7F2FF 0%, rgba(255, 191, 171, 0) 100%)",
         "ios-landing-background":
           "linear-gradient(184deg, #FFF 18.82%, rgba(249, 133, 132, 0.10) 52.46%, rgba(244, 118, 149, 0.10)67.02%)",
+          "web-gradient-background":
+          "linear-gradient(180deg, #FFF 0.13%, rgba(242, 112, 156, 0.3) 28.03%, rgba(255, 148, 114, 0.3) 58.27%, #FFF 90%)",
+        "luxeradio-gradient-background":
+          "linear-gradient(179deg, #FFF 1.45%, rgba(199, 27, 47, 0.3) 33.43%, rgba(210, 174, 67, 0.3) 66.39%, #FFF 98.32%)",
+        "web-desk-gradient-background":
+          "linear-gradient(218deg, #FFF 5.58%, rgba(242, 112, 156, 0.3) 35.04%, rgba(255, 148, 114, 0.3) 70.11%, #FFF 100%)",
+        "luxeradio-desk-gradient-background":
+          "linear-gradient(221deg, #FFF 5.17%, rgba(199, 27, 47, 0.3) 36.97%, rgba(210, 174, 67, 0.3) 70.28%, #FFF 95.97%)",
       },
     },
   },