From fde7746db1239649f9afd6c0851fb8698875580c Mon Sep 17 00:00:00 2001
From: cp-jagruti-a <jagruti.a@canopas.com>
Date: Tue, 2 Jan 2024 09:24:23 +0530
Subject: [PATCH] Feat : Design development section of backend page

---
 .../development/DatabaseDesign.webp           | Bin 0 -> 2182 bytes
 .../development/Development.webp              | Bin 0 -> 1680 bytes
 .../development/Migration.webp                | Bin 0 -> 2164 bytes
 .../development/PerformanceOptimization.webp  | Bin 0 -> 3466 bytes
 .../development/Security.webp                 | Bin 0 -> 2062 bytes
 .../development/customarchitecture.webp       | Bin 0 -> 2816 bytes
 .../DevelopmentSection.vue                    | 320 ++++++++++++++++++
 nuxt-frontend/pages/backend-development.vue   |  30 +-
 8 files changed, 324 insertions(+), 26 deletions(-)
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/Development.webp
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/Migration.webp
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/Security.webp
 create mode 100644 nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp
 create mode 100644 nuxt-frontend/components/backend-development/DevelopmentSection.vue

diff --git a/nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp b/nuxt-frontend/assets/images/backend-development/development/DatabaseDesign.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ed85e89c6a0872f9d1c02e2afe6b2ebc86fc0d93
GIT binary patch
literal 2182
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

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/assets/images/backend-development/development/Development.webp b/nuxt-frontend/assets/images/backend-development/development/Development.webp
new file mode 100644
index 0000000000000000000000000000000000000000..36a244540dfffeb11660e17275f225c4a0fa56ff
GIT binary patch
literal 1680
zcmV;B25<RNNk&G91^@t8MM6+kP&il$0000G0002D006fD06|PpNQnag00EFzYfoNT
zkx&UpKmro#VCvxFpmi|gpmor3fP^Cf2}sEOI-w-w{W}o>L4eyhk)(k&$8tkNc>%%p
zkN<+FB_<e-i=I-x8$)p`Icoghy)h)$J&Y-w49sU3I|VlHPZcY}bA5K;uf_<SA82Qg
z-k$(7eK2Qbs9vRyi;7h(ysI!+mp5%J8|md$ylM;RedgnBAMoCP7XjIc=)|mVqJ~**
zNetR4qgKA%JfV&?<vLYcEKYPS^v}mcdQ~UIj^3Onx+PBbBfYyZR96!81$Nyi>A<Rh
zT7@JPsM^FY5Mj?5$GWO%&$V}@-5zoTqHw9sktKcoyV8eG-af@*8`UD|d~h#@>JhE?
z)brtd5WUAQv^1@+wJ6EOREk@O?!mRiv$>EQx6oxUpVWyj)INNZq*YwDQ!h>l1~YT)
z#wB!X%?pbv)Qv}W9#WLF^<HoNctmY3JQ^r)?!5Yjg9HxptPoe|HWiIHLb<7^#0|<#
zMJZ0uZYo;wfp$|-ixX6viedn8c4p1^K(nc+#s!K?P~}XG{;VAbC^i-KOpC#6kl9ge
zDi)a=#inADnbB-2Mwu7Yrec*@QEe(_X%k_#ZNn^S9_+Sl*rm*Z-L?(GWFu`OXg3vI
zud+59l@YX?imr|scJct)O~n!_6U-~yy*jET8_%$FnY}oYC9$#9!FH)6&i-Id-5AZy
zA>6`~7&H}+FxP%8=G&C1V$f7fnJoHE#ggfw-c$^kFv?BE5SIz!Y=_GflJqjeXEt#*
zW8&!jXwHhMqt;Z6m^?~N#fa&n(^PD5n^T@ma1n*3VuF*5Hx&!qWVopq;3$Jl#Q;|s
zYbyFU%Scnv$6W@RiaP#MOq$C51c!+xO(i_QWnKnNr98lAE`z3W_HmkG&{V#=cujjY
ze+_>Bwsi2CU3&Nwm!OA?*L<)vD=tA>67c9f5QR_iS*P1n&VN^WZ|u~qnQq%?b01>3
zZNtCKwrwEL%-c2)%^M@rSi`!pY7>9IfK|oaT<04@b;4_+PrvPdUS6J77f<ASOY5hb
zi}=nA+Bu<CS{i0Gq6@Q5dC>@WH3NC9;?_36iy6cxuHvs6F|Qp9qh30O2@Z1mW!H-K
zA|xM3br8vcN-u~(dU-9=6Nd`$f+GEIu%~LrLXRCTWPhE3h8zx1|E3-bjXUPjz?}ci
ziPXHr1jBJ5*#7Zf=tKZkP&gpi0ssJT7yz9CD!2f+06vjIn@J_3qM<39DbTPI2~FHB
z`X4)Y`mV62DEy4%+}Xc?ez4{jKE926PdE=S57cguAIN<GbO7`K{(;m1=mF)Q>^J?B
z{_mt$Pyirz-K4CBN9%0Wk;0_miehlZF*su}L5kysNdmoTWb@FR=bi7ZBN&O+fXyhq
zx@7Ns!52$5)@<Lxj{8I-HdxrEBH&#eKPIOWH6gE(L-?88GDo2ywKE^AVXu-GG@>kj
zo_;^iKOg6xt`^92r~NM}_8I^H{{Eu)3m@im&SNMjV`eA30&B#oM@njjnZHnAmIyps
zTKuJ#EfR$2(9WqrhZh__Nl%z9nFxOj)B~?G`x(U_#!EKj(<4x^X-)^DmItT&nfKD;
zJyE~Vo3ZZp?q9=qU)TOTeu;#T{xKhZS!05V@izdFD-J(HIOz=|1D~iSUE(TYD_}em
zdO$5Gb=-S%Gk5+ehN?!NH-Hk&eCzjWWUI_wUvgUgs8O;j7?PXd^4a2vZeulW$~r(r
zd@tbY@=q9Y+{D}hK&&|Z4Dv%pMkL}qnmfc)!`>ub@qhE`WnemiP27iIE+{*@NRP*|
zA^Ky)t-0uC>ozc4)~x{uegKNGiA@1&n_03C5x@Eqc0INilFX3(mQxPgz1npC4Px2t
zhlMukNL*6qrd|2ywEZ(k41}*M07d47j?g>K|K0z>zGVF;fiMOG(sC8DJP;BJnGxeo
z8no)#9)F|xlj2rWH~p*>R21}kO9IczG_3`CABSYt&s(?l67kL&i1u$Y@T2Qyj($41
zp@8|0&bn{^#+7(z`8*|#z+6IIb?zgLJn<BM?)I(wFa6U42xw0+v*X>va{&|nKj36-
z>fD$@S1M=*pY4*Oa~QX0#HB!u90!^Z1yv9%KoJ&tsSsm4%DrR$UG4w>g$m-;$cHPl
ajHQ?U<$Jg{fD|!xzzP_rfW(9V0001u1tsVJ

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/assets/images/backend-development/development/Migration.webp b/nuxt-frontend/assets/images/backend-development/development/Migration.webp
new file mode 100644
index 0000000000000000000000000000000000000000..daeeed80893f1b272e45c4f8dfaad38f38de4a5e
GIT binary patch
literal 2164
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

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp b/nuxt-frontend/assets/images/backend-development/development/PerformanceOptimization.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6c8a0b3116a0a2830697e3d6001c817bc4b15503
GIT binary patch
literal 3466
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

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/assets/images/backend-development/development/Security.webp b/nuxt-frontend/assets/images/backend-development/development/Security.webp
new file mode 100644
index 0000000000000000000000000000000000000000..ba3016d1c3fcfd835cb3a20f550164e1efa524d6
GIT binary patch
literal 2062
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

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp b/nuxt-frontend/assets/images/backend-development/development/customarchitecture.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a29034243e2e7faa5f2194942a3930558a09a581
GIT binary patch
literal 2816
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
S^0hdNH%wK)000000001H0BJ!0

literal 0
HcmV?d00001

diff --git a/nuxt-frontend/components/backend-development/DevelopmentSection.vue b/nuxt-frontend/components/backend-development/DevelopmentSection.vue
new file mode 100644
index 000000000..383973320
--- /dev/null
+++ b/nuxt-frontend/components/backend-development/DevelopmentSection.vue
@@ -0,0 +1,320 @@
+<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-[700vh]">
+      <div
+        class="bg-[#F8F8F8] sticky top-0 h-[100vh] main overflow-hidden snap-mandatory snap-y"
+      >
+        <div
+          v-for="(item, index) in items"
+          :key="index"
+          class="section container flex h-screen snap-start pt-10"
+        >
+          <div class="flex flex-col pb-10">
+            <div class="flex-1 relative">
+              <div class="absolute">
+                <div class="circle">
+                  <svg
+                    width="574"
+                    height="575"
+                    viewBox="0 0 574 575"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      v-for="(path, index) in paths"
+                      :key="index"
+                      :d="path.d"
+                      :stroke="path.strokeColor"
+                      :strokeWidth="
+                        index === activeIndex ? '35px' : path.strokeWidth
+                      "
+                      :fill="path.fill"
+                      :opacity="path.opacity"
+                    />
+                  </svg>
+                </div>
+
+                <div
+                  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-white w-[18.204rem] h-[18.17563rem]"
+                >
+                  <div
+                    class="absolute top-[45px] left-[3rem] rounded-[50%] bg-[#F8F8F8] w-[12.204rem] h-[12.17563rem]"
+                  >
+                    <div
+                      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-white w-[3rem] h-[3rem]"
+                    >
+                      <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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex-1 flex flex-col mt-[24rem]"
+            :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>
+  </section>
+</template>
+<script setup>
+import { Autoplay, Zoom } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { ref, computed } from "vue";
+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 modules = [Autoplay, Zoom];
+const paths = [
+  {
+    opacity: "0.2",
+    d: "M181.107 467.768C149.995 449.49 124.135 423.471 106.039 392.237C87.9434 361.003 78.2264 325.616 77.8322 289.514L89.9435 289.381C90.3149 323.393 99.4693 356.731 116.517 386.157C133.566 415.582 157.928 440.095 187.238 457.315L181.107 467.768Z",
+    strokeColor: "#F2709C",
+    fill: "#F2709C",
+    strokeWidth: 1,
+  },
+  {
+    opacity: "0.2",
+    d: "M392.32 468.112C361.049 486.347 325.586 496.15 289.396 496.564C253.207 496.978 217.529 487.989 185.849 470.475L191.706 459.864C221.551 476.365 255.163 484.834 289.258 484.444C323.352 484.053 356.762 474.817 386.222 457.638L392.32 468.112Z",
+    strokeColor: "#FF9472",
+    fill: "#FF9472",
+    strokeWidth: 1,
+  },
+  {
+    opacity: "0.2",
+    d: "M496.18 289.585C495.785 324.716 486.561 359.183 469.359 389.81C452.156 420.437 427.529 446.238 397.745 464.837L391.333 454.554C419.392 437.032 442.594 412.724 458.8 383.87C475.007 355.017 483.697 322.546 484.069 289.448L496.18 289.585Z",
+    strokeColor: "#F2709C",
+    fill: "#F2709C",
+    strokeWidth: 1,
+  },
+  {
+    d: "M403.995 90.2581C438.824 108.798 467.704 136.816 487.304 171.078C506.904 205.341 516.423 244.451 514.764 283.896L480.508 282.453C481.895 249.473 473.936 216.773 457.549 188.126C441.162 159.479 417.015 136.053 387.894 120.552L403.995 90.2581Z",
+    strokeColor: "#FF9472",
+    fill: "#FF9472",
+    strokeWidth: 1,
+  },
+  {
+    opacity: "0.2",
+    d: "M77.8467 283.759C78.4498 247.324 88.5451 211.678 107.134 180.345C125.724 149.012 152.163 123.078 183.838 105.106L189.812 115.651C159.971 132.582 135.062 157.015 117.549 186.533C100.036 216.052 90.5253 249.634 89.9571 283.96L77.8467 283.759Z",
+    strokeColor: "#FF9472",
+    fill: "#FF9472",
+    strokeWidth: 1,
+  },
+  {
+    opacity: "0.2",
+    d: "M188.317 102.635C219.385 85.9993 254.149 77.4874 289.382 77.8887C324.615 78.2901 359.176 87.5917 389.858 104.93L383.903 115.485C354.997 99.1505 322.437 90.3875 289.244 90.0094C256.051 89.6313 223.3 97.6504 194.03 113.322L188.317 102.635Z",
+    strokeColor: "#F2709C",
+    fill: "#F2709C",
+    strokeWidth: 1,
+  },
+  // Add other paths data here
+];
+
+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 activeIndex = ref(0);
+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;
+  const paths = document.querySelectorAll("path");
+
+  if (scrollPosition >= stickyTop) {
+    const scrollAmount = scrollPosition - stickyTop;
+    sticky.scrollTop = scrollAmount;
+  }
+  items.forEach((item) => {
+    const react = item.getBoundingClientRect();
+    const itemOffset = react.top + scrollPosition;
+    // You might need to adjust the condition based on your layout and when you want the animation to trigger
+    if (scrollPosition >= itemOffset - windowHeight / 2) {
+      // Find the corresponding circle element for the current item
+      const circleElement = item.querySelector(".circle");
+
+      // Set the animation flag to true for other elements
+      isAnimated.value = true;
+      circleElement.style.transform = `rotate(${window.scrollY * 0.1}deg)`;
+      paths.forEach((path, index) => {
+        activeIndex.value = index;
+      });
+    } else {
+      isAnimated.value = false;
+    }
+  });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+</script>
+<style scoped>
+.circle {
+  overflow: hidden;
+}
+li {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 50%;
+  transform-origin: 0% 100%;
+  margin-bottom: 10px; /* Add margin bottom here */
+}
+.text {
+  position: absolute;
+  left: -100%;
+  width: 200%;
+  height: 200%;
+  text-align: center;
+  -webkit-transform: skewY(30deg) rotate(15deg);
+  -ms-transform: skewY(30deg) rotate(15deg);
+  transform: skewY(30deg) rotate(15deg);
+  padding-top: 20px;
+}
+
+li:first-child {
+  -webkit-transform: rotate(0deg) skewY(-31deg);
+  -ms-transform: rotate(0deg) skewY(-31deg);
+  transform: rotate(0deg) skewY(-31deg);
+}
+li:nth-child(2) {
+  -webkit-transform: rotate(60deg) skewY(-31deg);
+  -ms-transform: rotate(60deg) skewY(-31deg);
+  transform: rotate(60deg) skewY(-31deg);
+}
+li:nth-child(3) {
+  -webkit-transform: rotate(120deg) skewY(-31deg);
+  -ms-transform: rotate(120deg) skewY(-31deg);
+  transform: rotate(120deg) skewY(-31deg);
+}
+li:nth-child(4) {
+  -webkit-transform: rotate(180deg) skewY(-31deg);
+  -ms-transform: rotate(180deg) skewY(-31deg);
+  transform: rotate(180deg) skewY(-31deg);
+}
+li:nth-child(5) {
+  -webkit-transform: rotate(240deg) skewY(-31deg);
+  -ms-transform: rotate(240deg) skewY(-31deg);
+  transform: rotate(240deg) skewY(-31deg);
+}
+li:nth-child(6) {
+  -webkit-transform: rotate(300deg) skewY(-31deg);
+  -ms-transform: rotate(300deg) skewY(-31deg);
+  transform: rotate(300deg) skewY(-31deg);
+}
+
+li:first-child .text {
+  background: #f2709c;
+}
+li:nth-child(2) .text {
+  background: #ff9472;
+}
+li:nth-child(3) .text {
+  background: #f2709c;
+}
+li:nth-child(4) .text {
+  background: #ff9472;
+}
+li:nth-child(5) .text {
+  background: #f2709c;
+}
+li:nth-child(6) .text {
+  background: #ff9472;
+}
+</style>
diff --git a/nuxt-frontend/pages/backend-development.vue b/nuxt-frontend/pages/backend-development.vue
index 18cc18dbb..bbfc30ceb 100644
--- a/nuxt-frontend/pages/backend-development.vue
+++ b/nuxt-frontend/pages/backend-development.vue
@@ -2,12 +2,8 @@
   <div>
     <Header />
     <LandingSection />
-    <CaseStudySection />
-    <PartnerWithUsSection />
-    <SuccessStorySection />
-    <BlogSection />
-    <BlackCtaSection />
-    <NewFooter />
+    <DevelopmentSection />
+    <NewFooter class="-mt-4 md:mt-0" />
   </div>
 </template>
 <script>
@@ -16,21 +12,7 @@ import config from "@/config.js";
 import { defineAsyncComponent } from "vue";
 import { elementInViewPort } from "@/utils.js";
 import LandingSection from "@/components/backend-development/LandingSection.vue";
-const CaseStudySection = defineAsyncComponent(
-  () => import("@/components/backend-development/CaseStudySection.vue"),
-);
-const PartnerWithUsSection = defineAsyncComponent(
-  () => import("@/components/backend-development/PartnerWithUsSection.vue"),
-);
-const SuccessStorySection = defineAsyncComponent(
-  () => import("@/components/backend-development/SuccessStorySection.vue"),
-);
-const BlogSection = defineAsyncComponent(
-  () => import("@/components/backend-development/BlogSection.vue"),
-);
-const BlackCtaSection = defineAsyncComponent(
-  () => import("@/components/backend-development/BlackCtaSection.vue"),
-);
+import DevelopmentSection from "@/components/backend-development/DevelopmentSection.vue";
 const NewFooter = defineAsyncComponent(
   () => import("@/components/partials/NewFooter.vue"),
 );
@@ -49,11 +31,7 @@ export default {
   components: {
     Header,
     LandingSection,
-    CaseStudySection,
-    PartnerWithUsSection,
-    SuccessStorySection,
-    BlogSection,
-    BlackCtaSection,
+    DevelopmentSection,
     NewFooter,
   },
   setup() {