From 5363a992cf29b3f2d90abef85d6f278f17d748d2 Mon Sep 17 00:00:00 2001
From: cp-ashish-k <ashish.k@canopas.com>
Date: Thu, 4 Jan 2024 15:00:06 +0530
Subject: [PATCH] Feat : Added development section for frontend Page

---
 .../DevelopmentSection.vue                    | 197 ++++++++++++++++++
 .../frontend-development/LandingSection.vue   |   4 +-
 nuxt-frontend/pages/frontend-development.vue  |   3 +
 nuxt-frontend/tailwind.config.js              |   1 +
 4 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 nuxt-frontend/components/frontend-development/DevelopmentSection.vue

diff --git a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
new file mode 100644
index 000000000..28c81fb30
--- /dev/null
+++ b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
@@ -0,0 +1,197 @@
+<template>
+  <section
+    class="my-16 lg:mt-60 lg:mb-0 relative 3xl:h-[280vh] 3xl:outer-container"
+  >
+    <div
+      class="flex flex-col gap-4 lg:gap-6 container text-center lg:sticky top-28 3xl:!pb-0"
+      id="parentContainer"
+    >
+      <h2 class="text-black-87 mobile-header-2 lg:desk-header-2">
+        Frontend <br class="md:hidden" />development services
+      </h2>
+      <p
+        class="sub-h1-regular lg:mobile-header-2-regular text-black-60 xs:px-2 2xl:!px-32"
+      >
+        At Canopas, we understand the power of a stellar frontend interface. We
+        believe that a potent blend of aesthetics, responsiveness, and intuitive
+        design is paramount to captivate your audience and drive engagement. We
+        aim to create digital platforms that don't just tell your brand's story
+        but also offer an unparalleled user experience.
+      </p>
+    </div>
+    <!-- Mobile Swiper UI starts-->
+    <div class="swiper-content mt-6 lg:hidden">
+      <swiper
+        :slidesPerView="1"
+        :centeredSlides="true"
+        :spaceBetween="10"
+        :modules="modules"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        :speed="1500"
+        :pagination="pagination"
+        :breakpoints="{
+          '540': {
+            slidesPerView: 1.2,
+            spaceBetween: 0,
+          },
+          '620': {
+            slidesPerView: 1.4,
+            spaceBetween: 0,
+          },
+          '700': {
+            slidesPerView: 1.5,
+          },
+        }"
+        class="swiper-container"
+      >
+        <swiper-slide
+          v-for="(item, index) in items"
+          :key="index"
+          class="cursor-pointer px-4"
+        >
+          <div
+            :class="{
+              'bg-[#F2709C0A]': index % 2 === 0,
+              'bg-white-smoke': index % 2 !== 0,
+            }"
+            class="container py-6 rounded-xl"
+          >
+            <h3 class="mobile-header-3-semibold text-black-87">
+              {{ item.title }}
+            </h3>
+            <div class="sub-h3-regular text-black-60 mt-4">
+              <span
+                v-html="item.description"
+                class="flex gap-4 flex-col"
+              ></span>
+            </div>
+          </div>
+        </swiper-slide>
+        <div class="swiper-pagination"></div>
+      </swiper>
+    </div>
+    <!-- Mobile Swiper UI ends-->
+    <!-- Desktop Swiper UI starts-->
+    <div class="pt-24 xl:pt-20 main hidden lg:flex flex-col gap-32">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="child-content bg-white sticky top-96 mb-52"
+        :class="[
+          item.classList,
+          index === activeIndex
+            ? `transition-all duration-100 -rotate-6 opacity-90 ease-in`
+            : '',
+        ]"
+      >
+        <div
+          :class="{
+            'bg-pink-40': index % 2 === 0,
+            'bg-white-smoke': index % 2 !== 0,
+          }"
+          class="p-10 container rounded-xl w-[45rem] shadow-xl"
+        >
+          <h3 class="desk-header-3 text-black-87">
+            {{ index + 1 }}.
+            {{ item.title }}
+          </h3>
+          <div class="mobile-header-3-medium text-black-60 mt-4">
+            <span v-html="item.description" class="flex gap-4 flex-col"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Desktop Swiper UI ends-->
+  </section>
+</template>
+<script setup type="module">
+import { Autoplay, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+const modules = [Autoplay, Pagination];
+const pagination = {
+  el: ".swiper-pagination",
+  clickable: true,
+};
+var activeIndex = ref(null);
+const items = [
+  {
+    title: "Responsive Web Design",
+    description: `<span>As you know, mobile usage has been growing every day for more than a decade now.</span>
+            <span>In such a time, a responsive design isn't a luxury — it's a necessity.</span>
+            <span>We ensure your website looks and functions flawlessly, be it on a desktop, tablet, or mobile. Our team will help you design pixel perfect designs for all types of devices.</span>`,
+  },
+  {
+    title: "Single Page Applications (SPAs)",
+    description: `<span>By dynamically loading content and eliminating traditional page reloads, SPAs offer users a fluid, app-like experience within their browsers.</span>
+            <span>At Canopas, we specialize in leveraging modern frameworks such as React, Angular, and Vue.js to craft these responsive and interactive platforms.</span>
+            <span>Coupled with seamless backend integrations, our SPAs are not only user-friendly but also robust, ensuring fast performance and a smooth browsing experience.</span>`,
+  },
+  {
+    title: "Progressive Web Apps (PWAs)",
+    description: `<span>Progressive Web Apps (PWAs) Offer the best of both worlds, delivering web accessibility with the immersive experience of a native app.</span>
+            <span>At Canopas, we recognize the transformative potential of PWAs. By harnessing their offline capabilities, push notifications, and device hardware access, we create digital platforms that engage users seamlessly, regardless of network conditions or device type.</span>
+            <span>We ensure your website looks and functions flawlessly, be it on a desktop, tablet, or mobile. Our team will help you design pixel perfect designs for all types of devices.</span>`,
+  },
+  {
+    title: "UI/UX Design",
+    description: `<span>As you know, exceptional digital experiences begin with intuitive UI/UX Design, the art and science of crafting user interfaces that resonate and user experiences that captivate.</span>
+            <span>We delve deep into user behaviors, needs, and motivations to create designs that are not only visually appealing but also functionally streamlined.</span>
+            <span>Every pixel we craft and every interaction we design is aimed at providing users with a seamless journey, turning visitors into loyal customers. </span>
+            <span>By blending aesthetics with ergonomics, we ensure that our digital solutions are both beautiful and user-centric.</span>`,
+    classList: "!mb-44",
+  },
+  {
+    title: "Frontend Audits and Consultation",
+    description: `<span>Not sure where your current frontend stands? Our expert audits dive deep into your platform, identifying areas of improvement, and providing actionable insights for enhancement.</span>
+            <span>Leveraging a combination of cutting-edge tools and seasoned expertise, we dive deep into your web architecture, pinpointing areas that can benefit from refinement.</span>
+            <span>Our aim? To elevate your online platform's functionality, accessibility, and user engagement, turning potential weak points into strengths.</span>`,
+  },
+  {
+    title: "Performance Optimization",
+    description: `<span>User patience is finite. We fine-tune your frontend assets, ensuring lightningfast load times, reduced bounce rates, and an overall smoother user experience.</span>
+            <span>Through a meticulous analysis of your site's architecture, load times, and asset delivery, we pinpoint bottlenecks and implement strategic enhancements.</span>
+            <span>The result? A digital experience that not only loads faster but retains users, boosts engagement, and improves overall site metrics.</span>`,
+    classList: "!mb-64",
+  },
+];
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+function handleScroll() {
+  const child = document.querySelectorAll(".child-content");
+  const parent = document.getElementById("parentContainer");
+  child.forEach((item, index) => {
+    const itemRect = item.getBoundingClientRect();
+    const itemTop = itemRect.top;
+    if (itemTop < 380 && index == 5) {
+      parent.classList.add("lg:!pb-[47rem]");
+    } else if (itemTop > 420) {
+      parent.classList.remove("lg:!pb-[47rem]");
+    }
+    if (itemTop < 420) {
+      activeIndex.value = --index;
+    }
+  });
+}
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+
+.swiper-pagination {
+  @apply static pt-8;
+}
+.swiper-pagination-bullet {
+  @apply !w-3 !h-3 !rounded-full !bg-pink-90 !border !border-solid !border-white-core-80;
+}
+.swiper-pagination-bullet-active {
+  @apply !border-none !opacity-100;
+}
+</style>
diff --git a/nuxt-frontend/components/frontend-development/LandingSection.vue b/nuxt-frontend/components/frontend-development/LandingSection.vue
index 695e7926b..7808fa119 100644
--- a/nuxt-frontend/components/frontend-development/LandingSection.vue
+++ b/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 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 lg:hidden"
         to="/contact"
         @click.native="$mixpanel.track('tap_frontend_landing_cta')"
       >
diff --git a/nuxt-frontend/pages/frontend-development.vue b/nuxt-frontend/pages/frontend-development.vue
index d68bc620d..f402e9f0a 100644
--- a/nuxt-frontend/pages/frontend-development.vue
+++ b/nuxt-frontend/pages/frontend-development.vue
@@ -1,6 +1,7 @@
 <template>
   <Header />
   <LandingSection />
+  <DevelopmentSection />
   <NewFooter class="bg-gradient-to-b from-pink-0 to-pink-16" />
 </template>
 <script>
@@ -9,6 +10,7 @@ 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";
+import DevelopmentSection from "@/components/frontend-development/DevelopmentSection.vue";
 export default {
   beforeRouteEnter(to, from, next) {
     if (!config.SHOW_FRONTEND_DEVELOPMENT_PAGE) {
@@ -23,6 +25,7 @@ export default {
   components: {
     Header,
     LandingSection,
+    DevelopmentSection,
     NewFooter,
   },
   setup() {
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 64c4cb835..149196f7c 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -38,6 +38,7 @@ module.exports = {
           60: "#00000099",
         },
         white: "#ffffff",
+        "white-smoke": "#F8F8F8",
         "white-core": {
           1: "#FFFFFF1A",
           12: "#FFFFFF1F",