changed dev frontend.yml file

nuxt-frontend/components/backend-development/DevelopmentSection.vue

@@ -0,0 +1,143 @@
+<template>
+  <section class="pt-16 lg:pt-[7.5rem] 3xl:outer-container lg:bg-[#F8F8F8]">
+    <div
+      class="container text-center flex flex-col gap-4 lg:gap-6 mb-6 lg:mb-8"
+    >
+      <h2 class="header-2 text-black-core/[0.87]">
+        Backend development services
+      </h2>
+      <p class="sub-h1-regular text-black-core/[0.6]">
+        Our backend development services ensure that your software runs
+        flawlessly, scales effortlessly, and remains bulletproof. We craft
+        unique solutions that cater to your distinct business challenges and
+        aspirations.
+      </p>
+    </div>
+    <div id="stickyParent" class="sticky-parent h-[650vh]">
+      <div
+        class="sticky top-0 h-[100vh] main overflow-hidden snap-mandatory snap-y"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          class="section flex container h-screen snap-start"
+        >
+          <div class="flex flex-col">
+            <div class="flex-1 relative">
+              <div
+                class="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+              ></div>
+              <div
+                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+              >
+                <img :src="item.image" class="w-10 lg:w-16" :alt="item.title" />
+              </div>
+            </div>
+            <div
+              class="flex-1 flex flex-col gap-4 my-auto"
+              :class="{ 'animate-fadeIn': isAnimated }"
+            >
+              <h3 class="header-3" :class="item.className">
+                {{ item.title }}
+              </h3>
+              <span
+                v-html="item.description"
+                class="sub-h3-regular lg:sub-h3-medium flex flex-col gap-4 text-black-core/[0.6]"
+              ></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import custom from "@/assets/images/backend-development/development/customarchitecture.webp";
+import development from "@/assets/images/backend-development/development/Development.webp";
+import database from "@/assets/images/backend-development/development/DatabaseDesign.webp";
+import performance from "@/assets/images/backend-development/development/PerformanceOptimization.webp";
+import migration from "@/assets/images/backend-development/development/Migration.webp";
+import security from "@/assets/images/backend-development/development/Security.webp";
+const items = [
+  {
+    title: "Custom Backend Architecture",
+    image: custom,
+    className: "text-[#FF9472]",
+    description: `<span>In today's dynamic digital landscape, a one-size-fits-all approach often falls short. Recognizing the unique challenges and objectives of each business,we offer tailored backend solutions built from the ground up.</span>
+    <span>Our expertise ensures that your application functions with precision, aligning seamlessly with your front-end while meeting specific business logic and operational needs.</span>
+    <span>At Canopas, we craft unique solutions that cater to your distinct business challenges and aspirations.</span>`,
+  },
+  {
+    title: "Seamless API Development & Integration",
+    image: development,
+    className: "text-[#F2709C]",
+    description: `<span>As businesses increasingly rely on a myriad of software applications, the need for efficient communication between these platforms becomes paramount.</span>
+    <span>Our team crafts seamless and efficient APIs, ensuring that your various applications connect and relay information without hitches. This focus on integration fosters smooth data flow, ultimately enhancing operational efficiency.</span>
+    <span>From monolithic to serverless microservices, we've got you covered with skills that help you scale your business. We put a great emphasis on API documentation for future integrations and updates.</span>`,
+  },
+  {
+    title: "Database Design & Management",
+    image: database,
+    className: "text-[#FF9472]",
+    description: `<span>In the digital era, data is gold. Our approach to database design prioritizes structure, optimization, and scalability.</span>
+    <span>We ensure that you have a robust system in place to securely store, manage, and retrieve vast amounts of data. By choosing us, you're not only ensuring immediate data efficiency but also preparing your business for future growth.</span>
+    <span>For database selection, we analyze project requirements first and then make a decision based on the feature requirements. Sometimes, we use relational and non-relational databases in a single project..</span>`,
+  },
+  {
+    title: "Performance Optimization",
+    image: performance,
+    className: "text-[#F2709C]",
+    description: `<span>A slow server response can be the chink in your digital armor, deterring potential users and impacting user experience.</span>
+    <span>We go beyond mere backend development by enhancing server responses and actively working on reducing load times. This ensures that your users enjoy an uninterrupted and swift experience, increasing satisfaction and engagement.</span>
+    <span>We use techniques like data sharding, caching, and database optimization. It helps you bring more repeat customers and happy customers who advocate your brand to others.</span>`,
+  },
+  {
+    title: "Migration & Upgrades",
+    image: migration,
+    className: "text-[#FF9472]",
+    description: `<span>Legacy systems, while familiar, often hinder growth and efficiency. Our team specializes in transitioning your old systems to contemporary, more efficient platforms.</span>
+    <span>Through meticulous planning and execution, we ensure no data loss ordowntime, making the migration process seamless and painless.</span>
+    <span>We also utilize CI/CD platforms and automate deployment pipelines to push changes efficiently. We always make sure that new updates don't break the experience for users on older versions or systems.</span>`,
+  },
+  {
+    title: "Security & Compliance",
+    image: security,
+    className: "text-[#F2709C]",
+    description: `<span>In an age where cyber threats are prevalent, the security of your backend is non-negotiable.</span>
+    <span>We embed robust security measures from the ground up, ensuring databreaches remain a concern of the past.</span>
+    <span>Additionally, with evolving industry standards, we ensure that your backend is not only secure but also compliant, giving you peace of mind and earning the trust of your users.</span>
+    <span>We promote regular training sessions and workshops on the latest developments in the industry and encourage the team to stay updated with all the security and regulatory compliances.</span>`,
+  },
+];
+const isAnimated = ref(false);
+const handleScroll = () => {
+  const stickyParent = document.getElementById("stickyParent");
+  const stickyTop = stickyParent.offsetTop;
+  var position = stickyParent.getBoundingClientRect();
+
+  const sticky = document.querySelector(".main");
+  const items = document.querySelectorAll(".section");
+  const scrollPosition = window.scrollY || window.pageYOffset;
+  const windowHeight = window.innerHeight;
+  if (scrollPosition >= stickyTop) {
+    const scrollAmount = scrollPosition - stickyTop;
+    sticky.scrollTop = scrollAmount;
+  }
+  items.forEach((item) => {
+    const react = item.getBoundingClientRect();
+    if (react.height == windowHeight) {
+      console.log(react);
+      isAnimated.value = true;
+    } else {
+      isAnimated.value = false;
+    }
+  });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+</script>

nuxt-frontend/pages/backend-development.vue

@@ -2,6 +2,7 @@
   <div>
     <Header />
     <LandingSection />
+    <DevelopmentSection />
     <NewFooter class="-mt-4 md:mt-0" />
   </div>
 </template>
@@ -11,6 +12,7 @@ import config from "@/config.js";
 import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/backend-development/LandingSection.vue";
+import DevelopmentSection from "@/components/backend-development/DevelopmentSection.vue";
 const NewFooter = defineAsyncComponent(
   () => import("@/components/partials/NewFooter.vue"),
 );
@@ -29,6 +31,7 @@ export default {
   components: {
     Header,
     LandingSection,
+    DevelopmentSection,
     NewFooter,
   },
   setup() {