added landing section backend

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

@@ -0,0 +1,54 @@
+<template>
+  <section class="bg-ios-landing-background bg-opacity-10 3xl:outer-container">
+    <div
+      class="container flex flex-col lg:flex-row mt-6 lg:py-[7.5rem] gap-4 text-center lg:text-left"
+    >
+      <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1">
+        <h1 class="header-1 text-black-core/[0.87] lg:w-1/2">
+          Backend development company
+        </h1>
+        <p class="sub-h1-regular xs:px-4 lg:!px-0 text-black-core/[0.6]">
+          Our backend development team isn’t just about writing code; it's about
+          crafting powerful, efficient, scalable, and secure foundations that
+          drive innovative applications. We shape, optimize, and elevate digital
+          platforms ensuring they're ready for tomorrow's challenges.
+        </p>
+        <nuxt-link
+          class="gradient-btn primary-btn ml-0 hidden lg:block"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_backend_landing_cta')"
+        >
+          <span class="sub-h3-semibold xl:sub-h4-semibold border-none !my-auto"
+            >Be Future-Ready With Us</span
+          ></nuxt-link
+        >
+      </div>
+      <div class="flex flex-col gap-1 lg:flex-1 lg:my-auto">
+        <div class="w-[18.75rem] lg:w-[33.9375rem] mx-auto lg:mx-0">
+          <img
+            :src="landing400"
+            :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
+            alt="backend-landing-section"
+            class="w-full h-full object-contain"
+          />
+        </div>
+        <nuxt-link
+          class="gradient-btn primary-btn mb-16 lg:hidden"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_backend_landing_cta')"
+        >
+          <span class="sub-h3-semibold border-none"
+            >Be Future-Ready With Us</span
+          ></nuxt-link
+        >
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+import landing400 from "@/assets/images/backend-development/landing/landing-400w.webp";
+import landing800 from "@/assets/images/backend-development/landing/landing-800w.webp";
+import landing1200 from "@/assets/images/backend-development/landing/landing-1200w.webp";
+import landing2400 from "@/assets/images/backend-development/landing/landing-2400w.webp";
+const { $mixpanel } = useNuxtApp();
+</script>

nuxt-frontend/components/services/WhatWeOfferDesktop.vue

@@ -112,6 +112,8 @@ export default {
           title: "Backend Development",
           description:
             "The 'behind-the-scenes' backbone of any app, the backend, handles the critical tasks of data management, server configuration, and application logic. Our experts ensure your app is robust, secure, and efficient from its core, enabling it to handle high traffic loads, process data swiftly, and interact flawlessly with front-end requests.",
+          url: "/backend-development",
+          showServices: config.SHOW_BACKEND_DEVELOPMENT_PAGE,
         },
         {
           path: [100, 100],

nuxt-frontend/components/services/WhatWeOfferMobile.vue

@@ -109,6 +109,8 @@ export default {
             "The 'behind-the-scenes' backbone of any app, the backend, handles the critical tasks of data management, server configuration, and application logic. Our experts ensure your app is robust, secure, and efficient from its core, enabling it to handle high traffic loads, process data swiftly, and interact flawlessly with front-end requests.",
           class:
             "bg-gradient-to-b from-[#D2D8E3]/[0.95] via-[#D2D8E3]/[0.95] to-white bg-gradient-[180deg] ",
+          url: "/backend-development",
+          showServices: config.SHOW_BACKEND_DEVELOPMENT_PAGE,
         },
         {
           images: [frontend400w, frontend800w],

nuxt-frontend/config.js

@@ -119,10 +119,19 @@ export default Object.freeze({
     url: "https://dev-stack.canopas.com/flutter-app-development",
     image: "https://dev-stack.canopas.com/apple-touch-icon.png",
   },
+  BACKEND_DEVELOPMENT_SEO_META_DATA: {
+    title: "Backend Development Company - Canopas",
+    description:
+      "We create bespoke Backend API's known for their supreme performance, unwavering security, and outmost reliability",
+    type: "Website",
+    url: "https://dev-stack.canopas.com/backend-development",
+    image: "https://dev-stack.canopas.com/apple-touch-icon.png",
+  },
   IS_PROD: false,
   SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
   SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: true,
   SHOW_IOS_APP_DEVELOPMENT_PAGE: true,
+  SHOW_BACKEND_DEVELOPMENT_PAGE: true,
   SMILEPLUS_URL: "https://www.udini.ai/products/smile",
   WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
   MIX_PANEL_TOKEN: "acf7239a736ff487ca6058c981a55d7e",

nuxt-frontend/config.prod.js

@@ -119,10 +119,19 @@ export default Object.freeze({
     url: "https://dev-stack.canopas.com/flutter-app-development",
     image: "https://dev-stack.canopas.com/apple-touch-icon.png",
   },
+  BACKEND_DEVELOPMENT_SEO_META_DATA: {
+    title: "Backend Development Company - Canopas",
+    description:
+      "We create bespoke baclend API's known for their supreme performance, unwavering security, and outmost trlisbility",
+    type: "Website",
+    url: "https://dev-stack.canopas.com/backend-development",
+    image: "https://dev-stack.canopas.com/apple-touch-icon.png",
+  },
   IS_PROD: true,
   SHOW_ANDROID_APP_DEVELOPMENT_PAGE: true,
   SHOW_IOS_APP_DEVELOPMENT_PAGE: false,
   SHOW_FLUTTER_APP_DEVELOPMENT_PAGE: false,
+  SHOW_BACKEND_DEVELOPMENT_PAGE: false,
   SMILEPLUS_URL: "https://www.udini.ai/products/smile",
   WEBSITE_OPEN_SOURCE_URL: "https://github.com/canopas/canopas-website",
   MIX_PANEL_TOKEN: "16b177c2cda3ec1fb11c63a07f27996c",

nuxt-frontend/pages/backend-development.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <Header />
+    <LandingSection />
+    <NewFooter class="-mt-4 md:mt-0" />
+  </div>
+</template>
+<script setup>
+import Header from "@/components/partials/NewHeader.vue";
+import config from "@/config.js";
+import { defineAsyncComponent } from "vue";
+import { elementInViewPort } from "@/utils.js";
+import LandingSection from "@/components/backend-development/LandingSection.vue";
+const NewFooter = defineAsyncComponent(
+  () => import("@/components/partials/NewFooter.vue"),
+);
+
+const { $mixpanel } = useNuxtApp();
+const footer = ref(null);
+const seoData = config.BACKEND_DEVELOPMENT_SEO_META_DATA;
+useSeoMeta({
+  robots: "noindex,nofollow",
+  title: seoData.title,
+  description: seoData.description,
+  ogTitle: seoData.title,
+  ogType: seoData.type,
+  ogUrl: seoData.url,
+  ogImage: seoData.image,
+});
+let event = "";
+let events = {
+  footer: "view_backend_development_footer",
+};
+let elements;
+onMounted(() => {
+  elements = ref({
+    footer: footer,
+  });
+  window.addEventListener("scroll", sendEvent);
+  $mixpanel.track("view_backend_development_page");
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", sendEvent);
+});
+
+function sendEvent() {
+  const newEvent = events[elementInViewPort(elements.value)];
+  if (newEvent && event !== newEvent) {
+    event = newEvent;
+    $mixpanel.track(event);
+  }
+}
+</script>