diff --git a/nuxt-frontend/assets/css/global.css b/nuxt-frontend/assets/css/global.css
index be1b084d6..bc774d4d8 100644
--- a/nuxt-frontend/assets/css/global.css
+++ b/nuxt-frontend/assets/css/global.css
@@ -66,6 +66,29 @@
     @apply from-[#f2709c] to-[#ff9472] bg-clip-text text-transparent bg-gradient-[89.88deg];
   }
 
+  .cta-gradient-text {
+    @apply bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] bg-clip-text text-transparent;
+  }
+
+  .cta-gradient-border {
+    border-image: linear-gradient(to bottom, #f2709c, #ff835b) 1;
+  }
+
+  .hoverable-text:hover {
+    @apply bg-gradient-to-r from-[#f2709c] via-[#ff909c] to-[#ff9472] bg-clip-text text-transparent;
+  }
+
+  .cta-section {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+
+  .cta-box-shadow {
+    -webkit-appearance: none;
+    -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
+  }
+
   .v2-canopas-gradient-text {
     @apply from-[#FF835B] to-[#F2709C] bg-clip-text text-transparent bg-gradient-[270.11deg];
   }
diff --git a/nuxt-frontend/assets/images/CTA/fifth-cta-800w.webp b/nuxt-frontend/assets/images/CTA/fifth-cta-800w.webp
new file mode 100644
index 000000000..c4ea05bfe
Binary files /dev/null and b/nuxt-frontend/assets/images/CTA/fifth-cta-800w.webp differ
diff --git a/nuxt-frontend/assets/images/CTA/first-cta-2400w.webp b/nuxt-frontend/assets/images/CTA/first-cta-2400w.webp
new file mode 100644
index 000000000..bb35f5a0d
Binary files /dev/null and b/nuxt-frontend/assets/images/CTA/first-cta-2400w.webp differ
diff --git a/nuxt-frontend/assets/images/CTA/first-cta-400w.webp b/nuxt-frontend/assets/images/CTA/first-cta-400w.webp
new file mode 100644
index 000000000..796327544
Binary files /dev/null and b/nuxt-frontend/assets/images/CTA/first-cta-400w.webp differ
diff --git a/nuxt-frontend/assets/images/CTA/fourth-cta-2400w.webp b/nuxt-frontend/assets/images/CTA/fourth-cta-2400w.webp
new file mode 100644
index 000000000..0e58246ec
Binary files /dev/null and b/nuxt-frontend/assets/images/CTA/fourth-cta-2400w.webp differ
diff --git a/nuxt-frontend/assets/images/CTA/second-cta-2400.svg b/nuxt-frontend/assets/images/CTA/second-cta-2400.svg
new file mode 100644
index 000000000..5e4e46d43
--- /dev/null
+++ b/nuxt-frontend/assets/images/CTA/second-cta-2400.svg
@@ -0,0 +1,15 @@
+<svg width="2400" height="2407" viewBox="0 0 2400 2407" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 171.917C0 171.917 248.333 229.39 685 94.4542C1121.67 -40.4813 1343.33 -22.1551 1742.5 94.4537C2141.67 211.063 2400 171.917 2400 171.917V2406.67H0V171.917Z" fill="#3D3D3D"/>
+<mask id="mask0_10258_2741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="2400" height="2407">
+<path d="M0 171.917C0 171.917 248.333 229.39 685 94.4542C1121.67 -40.4813 1343.33 -22.1551 1742.5 94.4537C2141.67 211.063 2400 171.917 2400 171.917V2406.67H0V171.917Z" fill="#3D3D3D"/>
+</mask>
+<g mask="url(#mask0_10258_2741)">
+<rect opacity="0.3" width="253.333" height="256.667" rx="10" transform="matrix(0.898794 0.438371 -0.425364 0.905022 109.961 230.004)" fill="#F2709C" fill-opacity="0.2"/>
+<rect opacity="0.3" width="211.667" height="188.333" rx="15" transform="matrix(0.987688 0.156434 -0.151006 0.988533 -40.0391 1715)" fill="#FF9472" fill-opacity="0.2"/>
+<rect opacity="0.3" width="150" height="150" rx="10" transform="matrix(0.669131 0.743145 -0.730788 0.682605 2111.64 1603.34)" fill="#F2709C" fill-opacity="0.2"/>
+<rect opacity="0.3" width="165" height="165" rx="15" transform="matrix(-0.669131 -0.743145 -0.730788 0.682605 1998.3 643.336)" fill="#6CCAFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="128.333" height="128.333" rx="50" transform="matrix(0.669131 0.743145 -0.730788 0.682605 379.961 958.336)" fill="#B66CFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="128.333" height="128.333" rx="50" transform="matrix(0.669131 0.743145 -0.730788 0.682605 1859.97 2311.67)" fill="#B66CFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="156.667" height="158.333" rx="10" transform="matrix(0.891007 0.453991 -0.440801 0.897605 938.312 2176.67)" fill="#B66CFF" fill-opacity="0.2"/>
+</g>
+</svg>
diff --git a/nuxt-frontend/assets/images/CTA/second-cta-400.svg b/nuxt-frontend/assets/images/CTA/second-cta-400.svg
new file mode 100644
index 000000000..a946fbdef
--- /dev/null
+++ b/nuxt-frontend/assets/images/CTA/second-cta-400.svg
@@ -0,0 +1,15 @@
+<svg width="400" height="402" viewBox="0 0 400 402" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28.6527C0 28.6527 41.3889 38.2316 114.167 15.7424C186.944 -6.74688 223.889 -3.69252 290.417 15.7423C356.944 35.1771 400 28.6527 400 28.6527V401.111H0V28.6527Z" fill="#3D3D3D"/>
+<mask id="mask0_10258_2741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="400" height="402">
+<path d="M0 28.6527C0 28.6527 41.3889 38.2316 114.167 15.7424C186.944 -6.74688 223.889 -3.69252 290.417 15.7423C356.944 35.1771 400 28.6527 400 28.6527V401.111H0V28.6527Z" fill="#3D3D3D"/>
+</mask>
+<g mask="url(#mask0_10258_2741)">
+<rect opacity="0.3" width="42.2222" height="42.7778" rx="10" transform="matrix(0.898794 0.438371 -0.425364 0.905022 18.3281 38.334)" fill="#F2709C" fill-opacity="0.2"/>
+<rect opacity="0.3" width="35.2778" height="31.3889" rx="15" transform="matrix(0.987688 0.156434 -0.151006 0.988533 -6.67188 285.834)" fill="#FF9472" fill-opacity="0.2"/>
+<rect opacity="0.3" width="25" height="25" rx="10" transform="matrix(0.669131 0.743145 -0.730788 0.682605 351.941 267.223)" fill="#F2709C" fill-opacity="0.2"/>
+<rect opacity="0.3" width="27.5" height="27.5" rx="13.75" transform="matrix(-0.669131 -0.743145 -0.730788 0.682605 333.051 107.223)" fill="#6CCAFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="21.3889" height="21.3889" rx="10.6944" transform="matrix(0.669131 0.743145 -0.730788 0.682605 63.3281 159.723)" fill="#B66CFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="21.3889" height="21.3889" rx="10.6944" transform="matrix(0.669131 0.743145 -0.730788 0.682605 309.996 385.278)" fill="#B66CFF" fill-opacity="0.2"/>
+<rect opacity="0.3" width="26.1111" height="26.3889" rx="10" transform="matrix(0.891007 0.453991 -0.440801 0.897605 156.387 362.778)" fill="#B66CFF" fill-opacity="0.2"/>
+</g>
+</svg>
diff --git a/nuxt-frontend/assets/images/small-loader.svg b/nuxt-frontend/assets/images/small-loader.svg
new file mode 100644
index 000000000..6e36eba89
--- /dev/null
+++ b/nuxt-frontend/assets/images/small-loader.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="64px" height="64px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/nuxt-frontend/components/CTA/CTA1.vue b/nuxt-frontend/components/CTA/CTA1.vue
new file mode 100644
index 000000000..4458b435a
--- /dev/null
+++ b/nuxt-frontend/components/CTA/CTA1.vue
@@ -0,0 +1,88 @@
+<template>
+  <section
+    class="relative bg-[#FDE0E2] bg-gradient-background md:mt-0 md:bg-none"
+  >
+    <div class="mb-[-15px] sm:mb-0 md:hidden">
+      <img
+        :src="background400w"
+        alt="background-image"
+        class="absolute h-full w-full"
+        loading="lazy"
+      />
+      <div
+        class="blog-container sticky flex flex-col items-center justify-center py-20"
+      >
+        <p
+          class="cta-gradient-text flex text-center font-inter-medium text-base leading-[1.21rem]"
+        >
+          Get started today
+        </p>
+        <p
+          class="mt-6 text-center font-inter-bold text-4xl leading-[2.723rem] text-black-core/[0.85]"
+        >
+          Let&apos;s build the next big thing!
+        </p>
+        <p
+          class="mt-4 text-center font-inter-regular text-sm leading-[1.313rem] text-black-core/[0.75]"
+        >
+          Let&apos;s improve your business&apos;s digital strategy and implement
+          robust mobile apps to achieve your business objectives. Schedule Your
+          Free Consultation Now.
+        </p>
+        <nuxt-link :to="'/contact'">
+          <div
+            class="active:scale-[0.98] mx-auto mt-10 flex w-max items-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-center font-inter-semibold text-[1.1875rem] leading-[1.1875rem] tracking-normal text-white hover:shadow-[inset_2px_1000px_1px_#fff] md:mx-0"
+          >
+            <span class="hoverable-text inline-block px-[1.2rem] py-4">
+              Get Free Consultation
+            </span>
+          </div>
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="hidden md:block">
+      <img
+        :src="desktop_background2400w"
+        alt="background-image"
+        class="absolute h-full w-full"
+        loading="lazy"
+      />
+      <div
+        class="z-[1] blog-container sticky flex flex-col items-center justify-center py-20 4xl:py-32"
+      >
+        <p
+          class="cta-gradient-text text-center font-inter-medium text-lg leading-[1.375rem] xl:text-xl xl:leading-[1.513rem]"
+        >
+          Get started today
+        </p>
+        <p
+          class="mt-4 text-center font-inter-bold text-[2.813rem] leading-[3.438rem] text-black-core/[0.85] xl:text-[3.438rem] xl:leading-[4.16rem] 4xl:mt-6"
+        >
+          Let&apos;s build the next big thing!
+        </p>
+        <p
+          class="w-[75%] mt-4 text-center font-inter-regular text-[1.063rem] leading-[1.625rem] text-black-core/[0.75] xl:text-xl xl:leading-[1.875rem] 4xl:mt-6"
+        >
+          Let&apos;s improve your business&apos;s digital strategy and implement
+          robust mobile apps to achieve your business objectives. Schedule Your
+          Free Consultation Now.
+        </p>
+        <nuxt-link :to="'/contact'">
+          <div
+            class="mx-auto mt-10 flex w-max items-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-center font-inter-semibold text-[1.1875rem] leading-[1.1875rem] tracking-normal text-white hover:shadow-[inset_2px_1000px_1px_#fff] active:scale-[0.98] md:mx-0"
+          >
+            <span class="hoverable-text inline-block px-[1.2rem] py-4">
+              Get Free Consultation
+            </span>
+          </div>
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import background400w from "./../../assets/images/CTA/first-cta-400w.webp";
+import desktop_background2400w from "./../../assets/images/CTA/first-cta-2400w.webp";
+</script>
diff --git a/nuxt-frontend/components/CTA/CTA2.vue b/nuxt-frontend/components/CTA/CTA2.vue
new file mode 100644
index 000000000..5a4e592a6
--- /dev/null
+++ b/nuxt-frontend/components/CTA/CTA2.vue
@@ -0,0 +1,338 @@
+<template>
+  <div
+    class="relative -bottom-5 z-[1] overflow-hidden px-0 font-inter-medium sm:-bottom-2 xl:mt-32"
+  >
+    <div class="absolute h-[8%] w-full bg-white sm:h-[6%] md:hidden" />
+
+    <img
+      v-if="width < 600"
+      :src="bg400"
+      class="absolute -z-[1] w-full"
+      alt="contact-footer"
+    />
+
+    <img
+      v-else
+      :src="bg2400"
+      class="absolute left-0 top-0 -z-[1] h-full w-full object-cover"
+      alt="contact-footer"
+    />
+
+    <div
+      class="cta-gradient-text mt-20 text-center font-inter-bold text-3xl sm:mt-14 md:text-5xl md:leading-[3.625rem] lg:text-[4.0625rem] lg:leading-[4.9375rem]"
+    >
+      Say Hello!
+    </div>
+    <div class="blog-container text-center">
+      <div>
+        <form method="POST" @submit="submitForm">
+          <div class="py-5 lg:px-20 xl:px-44">
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div
+                class="relative pt-3 text-left md:col-span-2 md:mb-5 lg:pt-10"
+              >
+                <input
+                  id="username"
+                  v-model="name"
+                  type="text"
+                  class="floating-input peer mx-0 my-2 block w-full appearance-none rounded-none border-b border-white/[.6] bg-transparent px-0 text-lg text-white placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-xl lg:text-2xl"
+                  name="username"
+                  required
+                  autoComplete="given-username"
+                  placeholder=" "
+                  @input="
+                    showNameValidationError =
+                      $event.target.value.trim().length === 0
+                  "
+                />
+                <label
+                  htmlFor="username"
+                  class="absolute left-0 top-4 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-base leading-[1.1875rem] text-white/[.6] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-white md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem]"
+                >
+                  Your name
+                </label>
+
+                <span
+                  v-if="showNameValidationError"
+                  class="error cta-gradient-text"
+                >
+                  Name is required
+                </span>
+              </div>
+
+              <div class="relative pt-3 text-left md:mb-5 lg:pt-9">
+                <input
+                  id="email"
+                  v-model="email"
+                  class="floating-input peer mx-0 my-2 block w-full appearance-none rounded-none border-b border-white/[.6] bg-transparent px-0 text-lg text-white placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-xl lg:text-2xl"
+                  type="text"
+                  name="email"
+                  required
+                  autoComplete="given-email"
+                  placeholder=" "
+                  @input="
+                    showEmailValidationError =
+                      $event.target.value.trim().length === 0
+                  "
+                  @blur="showValidEmailError = isValidEmail(email)"
+                />
+                <label
+                  htmlFor="email"
+                  class="absolute left-0 top-4 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-base leading-[1.1875rem] text-white/[.6] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-white md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem]"
+                >
+                  Your email
+                </label>
+
+                <span
+                  v-if="showEmailValidationError"
+                  class="error cta-gradient-text"
+                >
+                  Email is required
+                </span>
+                <span
+                  v-if="email.trim().length != 0 && showValidEmailError"
+                  class="error cta-gradient-text"
+                >
+                  Please enter valid email address
+                </span>
+              </div>
+              <div class="relative pt-3 text-left md:mb-5 lg:pt-9">
+                <input
+                  id="phonenumber"
+                  v-model="phoneNumber"
+                  type="text"
+                  class="floating-input peer mx-0 my-2 block w-full appearance-none rounded-none border-b border-white/[.6] bg-transparent px-0 text-lg text-white placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-xl lg:text-2xl"
+                  name="phonenumber"
+                  required
+                  autoComplete="given-phonenumber"
+                  placeholder=" "
+                  @input="
+                    showPhoneNumberValidationError =
+                      $event.target.value.trim().length === 0
+                  "
+                  @blur="showValidPhoneNumberError = isValidPhone(phoneNumber)"
+                />
+                <label
+                  htmlFor="phonenumber"
+                  class="absolute left-0 top-4 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-base leading-[1.1875rem] text-white/[.6] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-white md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem]"
+                >
+                  Phone number
+                </label>
+
+                <span
+                  v-if="showPhoneNumberValidationError"
+                  class="error cta-gradient-text"
+                >
+                  Phone number is required
+                </span>
+
+                <span
+                  v-if="
+                    phoneNumber.trim().length != 0 && showValidPhoneNumberError
+                  "
+                  class="error cta-gradient-text"
+                >
+                  Please enter valid Phone number
+                </span>
+              </div>
+              <div
+                class="relative pt-3 text-left md:col-span-2 md:mb-5 lg:pt-10"
+              >
+                <textarea
+                  id="project"
+                  v-model="projectInfo"
+                  class="floating-input peer mx-0 my-2 block w-full appearance-none rounded-none border-b border-white/[.6] bg-transparent px-0 text-lg text-white placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-xl lg:text-2xl"
+                  name="project"
+                  rows="3"
+                  required
+                  autoComplete="given-project-info"
+                  placeholder=" "
+                />
+                <label
+                  htmlFor="project"
+                  class="absolute left-0 top-4 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-base leading-[1.1875rem] text-white/[.6] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-white md:text-[1.375rem] md:leading-[1.6875rem] lg:text-[1.75rem] lg:leading-[2.125rem]"
+                >
+                  Project detail
+                </label>
+
+                <span
+                  v-if="showProjectInfoValidationError"
+                  class="error cta-gradient-text"
+                >
+                  This field is required
+                </span>
+              </div>
+            </div>
+
+            <div class="mt-10 flex justify-center md:mt-12">
+              <img
+                v-if="showLoader"
+                :src="loaderImage"
+                class="h-16 w-16"
+                alt="loader-image"
+              />
+
+              <div v-else class="relative">
+                <div
+                  v-if="showErrorMessage"
+                  class="absolute -right-16 -top-8 w-[190%] text-center sm:-right-44 sm:-top-[1.875rem] sm:w-max md:-right-60 md:-top-[2.875rem] lg:-right-72 xl:-right-72 2xl:-right-[20.5rem]"
+                >
+                  <span
+                    class="cta-gradient-text flex text-center"
+                    :class="
+                      errorMessage === 'Invalid Recaptcha score'
+                        ? '!text-[1.5rem] sm:!mr-[7rem] md:!mr-[12rem] lg:!mr-[15rem] xl:!mr-[16rem] 2xl:!mr-[17rem]'
+                        : ''
+                    "
+                  >
+                    {{ errorMessage }}
+                  </span>
+                </div>
+
+                <button
+                  v-else
+                  id="submit"
+                  class="relative justify-self-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] font-inter-bold text-white hover:shadow-[inset_2px_1000px_1px_#fff]"
+                >
+                  <span
+                    class="text-md hoverable-text inline-block px-[1.8rem] py-[0.6rem] md:py-[0.8rem] lg:text-xl"
+                  >
+                    Get Free Consultation
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs } from "vue";
+import axios from "axios";
+import { isValidEmail, isValidPhone } from "./../../utils";
+import bg400 from "../../assets/images/CTA/second-cta-400.svg";
+import bg2400 from "../../assets/images/CTA/second-cta-2400.svg";
+import loaderImage from "../../assets/images/small-loader.svg";
+
+const width = 680;
+const name = ref("");
+const email = ref("");
+const projectInfo = ref("");
+const phoneNumber = ref("");
+const showNameValidationError = ref(false);
+const showEmailValidationError = ref(false);
+const showValidEmailError = ref(false);
+const showProjectInfoValidationError = ref(false);
+const showPhoneNumberValidationError = ref(false);
+const showValidPhoneNumberError = ref(false);
+const errorMessage = ref("Something went wrong on our side");
+const showLoader = ref(false);
+const showErrorMessage = ref(false);
+
+const props = defineProps({
+  "recaptcha-key": {
+    type: String,
+    required: true,
+  },
+  "contact-api-url": {
+    type: String,
+    required: true,
+  },
+});
+
+const { recaptchaKey, contactApiUrl } = toRefs(props);
+
+onMounted(() => {
+  const recaptchaScript = document.createElement("script");
+  recaptchaScript.setAttribute(
+    "src",
+    "https://www.google.com/recaptcha/enterprise.js?render=" +
+      recaptchaKey.value
+  );
+  recaptchaScript.setAttribute("async", "true");
+  recaptchaScript.setAttribute("defer", "true");
+  document.head.appendChild(recaptchaScript);
+});
+
+function validateForm() {
+  showNameValidationError.value = name.value.trim().length === 0;
+  showEmailValidationError.value = email.value.trim().length === 0;
+  showProjectInfoValidationError.value = projectInfo.value.trim().length === 0;
+  showPhoneNumberValidationError.value = phoneNumber.value.trim().length === 0;
+
+  return (
+    showNameValidationError.value ||
+    showEmailValidationError.value ||
+    showValidEmailError.value ||
+    showProjectInfoValidationError.value ||
+    showPhoneNumberValidationError.value ||
+    showValidPhoneNumberError.value
+  );
+}
+
+const submitForm = (event) => {
+  event.preventDefault();
+  if (!validateForm()) {
+    showLoader.value = true;
+  }
+
+  grecaptcha.enterprise.ready(() => {
+    grecaptcha.enterprise
+      .execute(recaptchaKey.value, {
+        action: "verify",
+      })
+      .then((token) => {
+        if (!validateForm()) {
+          const formData = {
+            name: name.value,
+            email: email.value,
+            project_info: projectInfo.value
+              ? projectInfo.value.replace(/\./g, ".\n")
+              : "NA",
+            phone_number: phoneNumber.value,
+            token,
+          };
+          axios
+            .post(contactApiUrl + "/api/send-contact-mail", formData)
+            .then(() => {
+              localStorage.setItem(
+                "client-name",
+                JSON.stringify(formData.name)
+              );
+              window.location.href = "/thank-you";
+              resetForm();
+            })
+            .catch((err) => {
+              if (err.response.status === 401) {
+                errorMessage.value = "Invalid recaptcha score";
+                showErrorMessage.value = true;
+                setTimeout(() => {
+                  showErrorMessage.value = false;
+                }, 3000);
+              }
+            })
+            .finally(() => {
+              showLoader.value = false;
+            });
+        }
+      })
+      .catch(() => {
+        errorMessage.value = "Invalid recaptcha score";
+        showErrorMessage.value = true;
+        setTimeout(() => {
+          showErrorMessage.value = false;
+        }, 3000);
+      });
+  });
+};
+
+const resetForm = () => {
+  name.value = "";
+  email.value = "";
+  projectInfo.value = "";
+  phoneNumber.value = "";
+};
+</script>
diff --git a/nuxt-frontend/components/CTA/CTA3.vue b/nuxt-frontend/components/CTA/CTA3.vue
new file mode 100644
index 000000000..28ea98694
--- /dev/null
+++ b/nuxt-frontend/components/CTA/CTA3.vue
@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <hr class="md:hidden" />
+    <div class="relative top-5 h-auto w-full md:top-0.5">
+      <div
+        class="blog-container flex flex-col md:-mt-[60px] md:flex-row md:space-x-6 lg:space-x-0 xl:px-20 2x:px-32"
+      >
+        <div class="mt-10 basis-7/12 md:mt-40 lg:basis-3/5">
+          <div
+            class="flex flex-col items-center space-y-4 md:w-[16.2rem] md:items-stretch lg:w-80 2xl:w-[22.23rem]"
+          >
+            <div
+              class="font-poppins-regular text-[1.2rem] leading-7 lg:text-2xl 2xl:text-[1.75rem] 2xl:leading-[2.3rem]"
+            >
+              Talk to an expert
+            </div>
+            <div
+              class="grid-rows-2 justify-items-stretch font-poppins-medium text-[2.3rem] uppercase sm:text-5xl md:grid lg:text-[3.4rem] lg:text-[3.7rem] 2xl:text-[4.125rem]"
+            >
+              <span class="mr-3 md:mr-0">get in</span>
+              <span class="md:justify-self-end">touch</span>
+            </div>
+            <div
+              class="text-center font-poppins-regular text-[0.9rem] leading-5 md:text-left lg:text-base 2xl:text-xl"
+            >
+              Our team is happy to answer your questions. Fill out the form and
+              we’ll get back to you as soon as possible
+            </div>
+          </div>
+        </div>
+        <div
+          class="cta-box-shadow relative top-14 h-fit w-full bg-white text-center font-poppins-regular lg:top-20 xl:top-[5.5rem]"
+        >
+          <form method="POST" @submit="submitForm">
+            <div class="px-8 pb-10 pt-[3rem] md:pt-20 lg:pb-14 lg:pt-24">
+              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div
+                  class="relative pt-3 text-left md:col-span-2 md:mb-5 lg:pt-10"
+                >
+                  <input
+                    id="username"
+                    v-model="name"
+                    type="text"
+                    class="text-md peer mx-0 mb-2 block w-full appearance-none rounded-none border-b border-black-900 bg-transparent px-0 text-black-900 placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-lg lg:text-xl"
+                    name="username"
+                    required
+                    autoComplete="given-username"
+                    placeholder=" "
+                    @input="
+                      showNameValidationError =
+                        $event.target.value.trim().length === 0
+                    "
+                  />
+                  <label
+                    htmlFor="username"
+                    class="absolute left-0 top-1 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-[1.07rem] leading-[1.1875rem] text-black-900/[.8] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-black-900 md:leading-[1.6875rem] lg:top-[1.6rem] lg:text-[1.35rem]"
+                  >
+                    Name*
+                  </label>
+
+                  <span
+                    v-if="showNameValidationError"
+                    class="error cta-gradient-text"
+                  >
+                    Name is required
+                  </span>
+                </div>
+
+                <div class="relative pt-3 text-left md:mb-5 lg:pt-9">
+                  <input
+                    id="email"
+                    v-model="email"
+                    class="text-md peer mx-0 mb-2 block w-full appearance-none rounded-none border-b border-black-900 bg-transparent px-0 text-black-900 placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-lg lg:text-xl"
+                    type="text"
+                    name="email"
+                    required
+                    autoComplete="given-email"
+                    placeholder=" "
+                    @input="
+                      showEmailValidationError =
+                        $event.target.value.trim().length === 0
+                    "
+                    @blur="showValidEmailError = isValidEmail(email)"
+                  />
+                  <label
+                    htmlFor="email"
+                    class="absolute left-0 top-1 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-[1.07rem] leading-[1.1875rem] text-black-900/[.8] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-black-900 md:leading-[1.6875rem] lg:top-[1.6rem] lg:text-[1.35rem]"
+                  >
+                    Email*
+                  </label>
+
+                  <span
+                    v-if="showEmailValidationError"
+                    class="error cta-gradient-text"
+                  >
+                    Email is required
+                  </span>
+
+                  <span
+                    v-if="email.trim().length != 0 && showValidEmailError"
+                    class="error cta-gradient-text"
+                  >
+                    Please enter valid email address
+                  </span>
+                </div>
+                <div class="relative pt-3 text-left md:mb-5 lg:pt-9">
+                  <input
+                    id="phonenumber"
+                    v-model="phoneNumber"
+                    type="text"
+                    class="text-md peer mx-0 mb-2 block w-full appearance-none rounded-none border-b border-black-900 bg-transparent px-0 text-black-900 placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-lg lg:text-xl"
+                    name="phonenumber"
+                    required
+                    autoComplete="given-phonenumber"
+                    placeholder=" "
+                    @input="
+                      showPhoneNumberValidationError =
+                        $event.target.value.trim().length === 0
+                    "
+                    @blur="
+                      showValidPhoneNumberError = isValidPhone(phoneNumber)
+                    "
+                  />
+                  <label
+                    htmlFor="phonenumber"
+                    class="absolute left-0 top-1 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-[1.07rem] leading-[1.1875rem] text-black-900/[.8] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-black-900 md:leading-[1.6875rem] lg:top-[1.6rem] lg:text-[1.35rem]"
+                  >
+                    Phone number*
+                  </label>
+
+                  <span
+                    v-if="showPhoneNumberValidationError"
+                    class="error cta-gradient-text"
+                  >
+                    Phone number is required
+                  </span>
+
+                  <span
+                    v-if="
+                      phoneNumber.trim().length != 0 &&
+                      showValidPhoneNumberError
+                    "
+                    class="error cta-gradient-text"
+                  >
+                    Please enter valid Phone number
+                  </span>
+                </div>
+                <div
+                  class="relative pt-3 text-left md:col-span-2 md:mb-5 lg:pt-10"
+                >
+                  <textarea
+                    id="project"
+                    v-model="projectInfo"
+                    class="text-md peer mx-0 mb-2 block w-full appearance-none rounded-none border-b border-black-900 bg-transparent px-0 text-black-900 placeholder-white/[.6] transition ease-in-out focus:outline-none active:outline-none md:text-lg lg:text-xl"
+                    name="project"
+                    rows="3"
+                    required
+                    autoComplete="given-project-info"
+                    placeholder=" "
+                  />
+                  <label
+                    htmlFor="project"
+                    class="absolute left-0 top-1 z-[2] mb-5 origin-[0] -translate-y-4 scale-75 transform text-[1.07rem] leading-[1.1875rem] text-black-900/[.8] duration-300 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:text-black-900 md:leading-[1.6875rem] lg:top-[1.6rem] lg:text-[1.35rem]"
+                  >
+                    Project detail*
+                  </label>
+
+                  <span
+                    v-if="showProjectInfoValidationError"
+                    class="error cta-gradient-text"
+                  >
+                    This field is required
+                  </span>
+                </div>
+              </div>
+
+              <div class="mt-6 flex lg:mt-10">
+                <img
+                  v-if="showLoader"
+                  :src="loaderImage"
+                  class="h-16 w-16"
+                  alt="loader-image"
+                />
+
+                <div v-else class="relative">
+                  <div
+                    v-if="showErrorMessage"
+                    class="sm:-vright-44 absolute -right-16 -top-8 w-[190%] text-center sm:-top-[1.875rem] sm:w-max md:-right-60 md:-top-[2.875rem] lg:-right-72 xl:-right-72 2xl:-right-[20.5rem]"
+                  >
+                    <span
+                      class="cta-gradient-text flex text-center"
+                      :class="
+                        errorMessage === 'Invalid Recaptcha score'
+                          ? '!text-2xl sm:!mr-[7rem] md:!mr-[12rem] lg:!mr-[15rem] xl:!mr-[16rem] 2xl:!mr-[17rem]'
+                          : ''
+                      "
+                    >
+                      {{ errorMessage }}
+                    </span>
+                  </div>
+
+                  <button
+                    id="submit"
+                    class="border-2 border-solid border-transparent bg-black-900 font-inter-bold text-white hover:border-black-900 hover:bg-white hover:text-black-900"
+                  >
+                    <span
+                      class="inline-block px-4 py-[0.6rem] text-base lg:px-[1.8rem] lg:py-[0.8rem] lg:text-[1.1875rem]"
+                    >
+                      Get Free Consultation
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div
+        class="h-[84px] w-full bg-black-900 md:h-[70px] lg:h-[83px] xl:h-[94px]"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, toRefs } from "vue";
+import axios from "axios";
+import { isValidEmail, isValidPhone } from "./../../utils";
+import loaderImage from "../../assets/images/small-loader.svg";
+
+const name = ref("");
+const email = ref("");
+const projectInfo = ref("");
+const phoneNumber = ref("");
+const showNameValidationError = ref(false);
+const showEmailValidationError = ref(false);
+const showValidEmailError = ref(false);
+const showProjectInfoValidationError = ref(false);
+const showPhoneNumberValidationError = ref(false);
+const showValidPhoneNumberError = ref(false);
+const errorMessage = ref("Something went wrong on our side");
+const showLoader = ref(false);
+const showErrorMessage = ref(false);
+
+const props = defineProps({
+  "recaptcha-key": {
+    type: String,
+    required: true,
+  },
+  "contact-api-url": {
+    type: String,
+    required: true,
+  },
+});
+
+const { recaptchaKey, contactApiUrl } = toRefs(props);
+
+onMounted(() => {
+  const recaptchaScript = document.createElement("script");
+  recaptchaScript.setAttribute(
+    "src",
+    "https://www.google.com/recaptcha/enterprise.js?render=" +
+      recaptchaKey.value
+  );
+  recaptchaScript.setAttribute("async", "true");
+  recaptchaScript.setAttribute("defer", "true");
+  document.head.appendChild(recaptchaScript);
+});
+
+function validateForm() {
+  showNameValidationError.value = name.value.trim().length === 0;
+  showEmailValidationError.value = email.value.trim().length === 0;
+  showProjectInfoValidationError.value = projectInfo.value.trim().length === 0;
+  showPhoneNumberValidationError.value = phoneNumber.value.trim().length === 0;
+
+  return (
+    showNameValidationError.value ||
+    showEmailValidationError.value ||
+    showValidEmailError.value ||
+    showProjectInfoValidationError.value ||
+    showPhoneNumberValidationError.value ||
+    showValidPhoneNumberError.value
+  );
+}
+
+const submitForm = (event) => {
+  event.preventDefault();
+  if (!validateForm()) {
+    showLoader.value = true;
+  }
+
+  grecaptcha.enterprise.ready(() => {
+    grecaptcha.enterprise
+      .execute(recaptchaKey.value, {
+        action: "verify",
+      })
+      .then((token) => {
+        if (!validateForm()) {
+          const formData = {
+            name: name.value,
+            email: email.value,
+            project_info: projectInfo.value
+              ? projectInfo.value.replace(/\./g, ".\n")
+              : "NA",
+            phone_number: phoneNumber.value,
+            token,
+          };
+          axios
+            .post(contactApiUrl + "/api/send-contact-mail", formData)
+            .then(() => {
+              localStorage.setItem(
+                "client-name",
+                JSON.stringify(formData.name)
+              );
+              window.location.href = "/thank-you";
+              resetForm();
+            })
+            .catch((err) => {
+              if (err.response.status === 401) {
+                errorMessage.value = "Invalid recaptcha score";
+                showErrorMessage.value = true;
+                setTimeout(() => {
+                  showErrorMessage.value = false;
+                }, 3000);
+              }
+            })
+            .finally(() => {
+              showLoader.value = false;
+            });
+        }
+      })
+      .catch(() => {
+        errorMessage.value = "Invalid recaptcha score";
+        showErrorMessage.value = true;
+        setTimeout(() => {
+          showErrorMessage.value = false;
+        }, 3000);
+      });
+  });
+};
+
+const resetForm = () => {
+  name.value = "";
+  email.value = "";
+  projectInfo.value = "";
+  phoneNumber.value = "";
+};
+</script>
diff --git a/nuxt-frontend/components/CTA/CTA4.vue b/nuxt-frontend/components/CTA/CTA4.vue
new file mode 100644
index 000000000..3c310932f
--- /dev/null
+++ b/nuxt-frontend/components/CTA/CTA4.vue
@@ -0,0 +1,75 @@
+<template>
+  <section>
+    <div
+      class="mt-5 bg-[#F8F8F8] font-inter-regular lg:mt-[150px] xl:mt-[170px] 2xl:mt-[250px] 2x:mt-[280px]"
+    >
+      <div
+        class="blog-container flex flex-col md:flex-row 2x:w-[82.5rem]"
+      >
+        <div class="order-2 md:relative md:order-first md:w-1/2">
+          <img
+            :src="cta2400"
+            alt="fourth-cta-image"
+            class="mx-[7.5%] -mb-6 h-[85%] w-[85%] object-contain sm:mx-[10%] sm:-mb-[0.9rem] sm:h-4/5 sm:w-4/5 md:absolute md:-top-[2.6rem] md:right-10 md:mx-0 md:h-fit md:w-fit lg:-top-[2.9rem] xl:-top-[7.6rem] xl:right-6 2xl:-top-[11.5rem] 2xl:right-10 2x:right-14"
+            loading="lazy"
+          />
+        </div>
+
+        <div
+          class="flex py-2.5 md:w-1/2 lg:py-10 2xl:py-[50px] 2xl:pl-[8.5rem]"
+        >
+          <div
+            class="m-auto w-4/5 py-10 sm:w-3/5 md:m-5 md:ml-auto md:w-full md:py-0 xl:m-auto"
+          >
+            <p
+              class="font-inter-bold text-[1.5rem] leading-[1.813rem] text-black-core/[0.87] md:text-[1.7rem] md:leading-[1.9rem] lg:text-[2.188rem] lg:leading-[2.625rem] xl:text-[3.125rem] xl:leading-[3.813rem]"
+            >
+              Whether you need...
+            </p>
+            <ul
+              class="pl-0 pt-6 font-inter-semibold text-base leading-5 text-black-core/[0.6] md:pt-4 md:text-[1.05rem] md:leading-[1.34rem] lg:pt-6 lg:text-[1.188rem] lg:leading-6 xl:text-[1.375rem] xl:leading-[1.8125rem]"
+            >
+              <li
+                v-for="(reason, index) in reasons"
+                :key="index"
+                class="flex"
+              >
+                <span class="pr-1">*</span>
+                <div class="sm:w-[90%]">
+                  {{ reason }}
+                </div>
+              </li>
+            </ul>
+            <div
+              class="pt-6 font-inter-regular text-sm leading-[1.125rem] text-black-core/[0.6] md:pt-4 md:text-[0.9rem] md:leading-[1.15rem] lg:pt-6 lg:text-lg lg:leading-[1.375rem] xl:text-[1.375rem] xl:leading-[1.813rem]"
+            >
+              Bring us your toughest challenge and we&apos;ll show you the path
+              to a sleek solution.
+            </div>
+            <nuxt-link :to="'/contact'">
+              <div
+                class="mx-auto mt-5 flex w-max items-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-center font-inter-semibold text-base font-normal font-semibold leading-[1.1875rem] !tracking-[0] text-white hover:shadow-[inset_2px_1000px_1px_#fff] active:scale-[0.98] md:mx-0 md:mt-4 md:text-[1.09375rem] md:leading-[1.3125rem] lg:mt-5 xl:text-[1.1875rem] xl:leading-[1.4375rem]"
+              >
+                <span
+                  class="hoverable-text inline-block px-[1.2rem] py-[0.7rem]"
+                >
+                  Talk to our experts
+                </span>
+              </div>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import cta2400 from "../../assets/images/CTA/fourth-cta-2400w.webp";
+
+const reasons = [
+  "High-performing mobile apps",
+  "Bulletproof cloud solutions",
+  "Custom solutions for your business.",
+];
+</script>
diff --git a/nuxt-frontend/components/CTA/CTA5.vue b/nuxt-frontend/components/CTA/CTA5.vue
new file mode 100644
index 000000000..b8edbae36
--- /dev/null
+++ b/nuxt-frontend/components/CTA/CTA5.vue
@@ -0,0 +1,66 @@
+<template>
+  <section>
+    <div class="relative -bottom-4 bg-black-core/[0.85] py-[50px] md:-bottom-1">
+      <div
+        class="absolute right-0 top-1 hidden h-[140px] border-l-[20px] border-[#F2709C] md:block lg:top-9 xl:h-[185px] 2xl:top-[4.25rem]"
+      />
+      <div
+        class="absolute bottom-[6.25rem] left-0 hidden h-[115px] border-l-[20px] border-[#FF9472] md:block"
+      />
+
+      <div
+        class="blog-container flex flex-col items-center md:flex-row-reverse 2x:px-20"
+      >
+        <div class="flex flex-col md:relative md:items-end lg:basis-[55.49%]">
+          <p
+            class="text-[2.625rem] text-center font-inter-bold leading-[3.125rem] text-white md:text-right md:text-[3.275rem] md:leading-[3.875rem] xl:text-[5.625rem] xl:leading-[6.125rem]"
+          >
+            <span class="bg-gradient-L bg-clip-text text-transparent">L</span
+            >et&apos;s
+            <span
+              class="ml-3 mr-[-0.2rem] bg-gradient-W bg-clip-text text-transparent md:ml-5"
+              >W</span
+            >ork
+            <br class="sm:hidden md:inline-block" />
+            <span
+              class="ml-3 mr-[-0.2rem] bg-gradient-T bg-clip-text text-transparent md:ml-0"
+              >T</span
+            >ogether
+          </p>
+          <p
+            class="mt-6 text-center font-inter-regular text-base text-white sm:w-[385px] md:text-right md:text-[1.4rem] md:leading-8 md:text-white/[0.75] xl:w-[82%] xl:text-[1.75rem] xl:leading-[2.625rem] 2xl:w-[68%]"
+          >
+            Not sure where to start? We also offer code and architecture
+            reviews, strategic planning, and more.
+          </p>
+          <nuxt-link :to="'/contact'" class="mt-10">
+            <div
+              class="mx-auto flex w-max items-center rounded-full border border-solid border-transparent bg-gradient-to-r from-[#f2709c] to-[#ff9472] text-center font-inter-semibold text-[1.09375rem] font-normal leading-[1.3125rem] !tracking-[0] text-white hover:shadow-[inset_2px_1000px_1px_#fff] active:scale-[0.98] md:mx-0 xl:text-[1.188rem] xl:leading-[1.188rem]"
+            >
+              <span
+                class="hoverable-text inline-block px-[1.2rem] py-[0.9rem] md:px-[1.3rem] md:py-4"
+              >
+                Get Free Consultation
+              </span>
+            </div>
+          </nuxt-link>
+        </div>
+        <div class="relative mt-8 md:mt-0 lg:basis-[44.51%]">
+          <img
+            :src="cta800"
+            alt="cta-image"
+            class="mx-[7.5%] mt-4 h-[85%] w-[85%] sm:mx-[10%] sm:h-4/5 sm:w-4/5 md:mx-0 md:mt-0 md:h-full md:w-full"
+          />
+
+          <div
+            class="cta-gradient-border absolute bottom-4 left-2 h-[55px] border-l-[13px] md:hidden"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import cta800 from "../../assets/images/CTA/fifth-cta-800w.webp";
+</script>
diff --git a/nuxt-frontend/components/mobile-app-development/CTASection2.vue b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
index 278d18ac9..7a1b9735c 100644
--- a/nuxt-frontend/components/mobile-app-development/CTASection2.vue
+++ b/nuxt-frontend/components/mobile-app-development/CTASection2.vue
@@ -20,7 +20,7 @@
           <span class="mr-[-0.2rem] bg-gradient-W bg-clip-text text-transparent"
             >W</span
           >ork
-          <span class="mr-[-0.2rem] bg-gradient-T bg-clip-text text-transparent"
+          <span class="mr-[-0.2rem] bg-gradient-T-small bg-clip-text text-transparent"
             >T</span
           >ogether
         </p>
diff --git a/nuxt-frontend/package.json b/nuxt-frontend/package.json
index dc0187e64..302ceb684 100644
--- a/nuxt-frontend/package.json
+++ b/nuxt-frontend/package.json
@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.22.15",
-    "@canopassoftware/nuxt-blog-kit": "^1.0.3",
+    "@canopassoftware/nuxt-blog-kit": "^1.0.4",
     "@ivanv/vue-collapse-transition": "^1.0.2",
     "@nuxt/devtools": "latest",
     "@nuxtjs/sitemap": "^5.1.0",
diff --git a/nuxt-frontend/pages/[slug].vue b/nuxt-frontend/pages/[slug].vue
index ce9311df9..3cbc02bad 100644
--- a/nuxt-frontend/pages/[slug].vue
+++ b/nuxt-frontend/pages/[slug].vue
@@ -10,6 +10,21 @@
         :contact-api-url="config.API_BASE"
       />
     </div>
+    <div class="cta-section">
+      <CTA1 v-if="CTACompName == 'CTA1'" />
+      <CTA2
+        v-if="CTACompName == 'CTA2'"
+        :recaptcha-key="config.VITE_RECAPTCHA_SITE_KEY"
+        :contact-api-url="config.API_BASE"
+      />
+      <CTA3
+        v-if="CTACompName == 'CTA3'"
+        :recaptcha-key="config.VITE_RECAPTCHA_SITE_KEY"
+        :contact-api-url="config.API_BASE"
+      />
+      <CTA4 v-if="CTACompName == 'CTA4'" />
+      <CTA5 v-if="CTACompName == 'CTA5'" />
+    </div>
     <BlogFooter
       :mixpanel="$mixpanel"
       :social-media-data="config.SOCIAL_MEDIA_DATA"
@@ -21,6 +36,11 @@
 
 <script setup>
 import Header from "@/components/partials/NewHeader.vue";
+import CTA1 from "@/components/CTA/CTA1.vue";
+import CTA2 from "@/components/CTA/CTA2.vue";
+import CTA3 from "@/components/CTA/CTA3.vue";
+import CTA4 from "@/components/CTA/CTA4.vue";
+import CTA5 from "@/components/CTA/CTA5.vue";
 import { useRoute } from "vue-router";
 import config from "@/config";
 import { useBlogDetailStore } from "@/stores/resources";
@@ -29,6 +49,7 @@ const { $mixpanel } = useNuxtApp();
 const post = ref({});
 const route = useRoute();
 const slug = ref(route.params.slug);
+const CTACompName = ref("");
 
 const store = useBlogDetailStore();
 const postData = computed(() => store.item);
@@ -53,6 +74,9 @@ if (status.value !== config.SUCCESS) {
   published_time = new Date(post.value?.published_on).toLocaleTimeString();
 }
 
+const CTAData = post.value?.cta?.data;
+CTACompName.value = CTAData?.attributes.component_name;
+
 useHead({
   script: [
     {
diff --git a/nuxt-frontend/tailwind.config.js b/nuxt-frontend/tailwind.config.js
index 76b66bbc1..575805551 100644
--- a/nuxt-frontend/tailwind.config.js
+++ b/nuxt-frontend/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
         xl: "1200px",
         xl2: "1330px",
         "2xl": "1400px",
+        "2x": "1600px",
         "2xll": "1800px",
         xll: "2440px",
         "3xl": "3840px",
@@ -283,7 +284,8 @@ module.exports = {
           "linear-gradient(to bottom, #FFFFFF , #FDE0E2 23%, #FDE0E2 88%, #FFFFFF 100%);",
         "gradient-L": "linear-gradient(178deg, #FFFFFF  68%, #f77783 40%);",
         "gradient-W": "linear-gradient(257deg, #FFFFFF  65%, #f77783 68%);",
-        "gradient-T": "linear-gradient(540deg, #FFFFFF  33%, #f77783 10%);",
+        "gradient-T": "linear-gradient(540deg, #FFFFFF  30.5%, #f77783 10%);",
+        "gradient-T-small": "linear-gradient(540deg, #FFFFFF  33%, #f77783 10%);",
         "multiple-underline-out":
           "linear-gradient(transparent calc(100% - 5px), white 1px)",
         "gradient-underline-out":
@@ -333,7 +335,7 @@ module.exports = {
             120: "120deg",
             135: "135deg",
           }),
-        },
+        }
       );
     }),
     function ({ addComponents }) {
@@ -366,6 +368,29 @@ module.exports = {
             maxWidth: "2550px",
           },
         },
+        ".blog-container": {
+          margin: "auto",
+          padding: "0 0.75rem",
+          maxWidth: "100%",
+          "@screen sm": {
+            maxWidth: "540px",
+          },
+          "@screen md": {
+            maxWidth: "720px",
+          },
+          "@screen lg": {
+            maxWidth: "960px",
+          },
+          "@screen xl": {
+            maxWidth: "1140px",
+          },
+          "@screen 2xl": {
+            maxWidth: "1320px",
+          },
+          "@screen 2x": {
+            maxWidth: "1470px",
+          },
+        },
       });
     },
   ],
diff --git a/nuxt-frontend/utils.js b/nuxt-frontend/utils.js
index 9338ea118..c73b57600 100644
--- a/nuxt-frontend/utils.js
+++ b/nuxt-frontend/utils.js
@@ -36,7 +36,7 @@ function setGithubStars(contributions, githubRepos) {
       .filter(
         (repo) =>
           repo.name ==
-          contribution.link.slice(contribution.link.lastIndexOf("/") + 1),
+          contribution.link.slice(contribution.link.lastIndexOf("/") + 1)
       )
       .map((repo) => repo.stargazers_count.toString())[0];
   });
@@ -79,7 +79,7 @@ function getJobDates() {
     currentDay <= maxDays
       ? startDateOfMonth
       : new Date(
-          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays),
+          startDateOfMonth.setDate(startDateOfMonth.getDate() + maxDays)
         );
 
   const datePosted = jobPosted.toISOString().split("T")[0];
@@ -160,6 +160,17 @@ function formateDate(date) {
   return [formattedDate, formattedTime];
 }
 
+function isValidPhone(phoneNumber) {
+  const phoneRegex = /^[0-9]{10}$/;
+  return !phoneRegex.test(phoneNumber);
+}
+
+function isValidEmail(email) {
+  const emailRegx =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return !emailRegx.test(email);
+}
+
 export {
   elementInViewPort,
   handleAnimationOnScroll,
@@ -169,4 +180,6 @@ export {
   getJobDates,
   getDiffrentWidthImages,
   setPostFields,
+  isValidPhone,
+  isValidEmail,
 };
diff --git a/nuxt-frontend/yarn.lock b/nuxt-frontend/yarn.lock
index a04805558..f2c6047cd 100644
--- a/nuxt-frontend/yarn.lock
+++ b/nuxt-frontend/yarn.lock
@@ -1667,10 +1667,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@canopassoftware/nuxt-blog-kit@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@canopassoftware/nuxt-blog-kit/-/nuxt-blog-kit-1.0.3.tgz#4da4e6d79ca584683542e2e7001ca39990758f2d"
-  integrity sha512-Cm3izWTi27eDzE/WXHq0TTAssPajvC18Md+B+1EV83Ky0jlpWUuA+zolpfOjQ14q60UMm73iZRd3NuLQhkvsSg==
+"@canopassoftware/nuxt-blog-kit@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@canopassoftware/nuxt-blog-kit/-/nuxt-blog-kit-1.0.4.tgz#9c240043c1921a90522dc0a0419f9d3751784566"
+  integrity sha512-XSRfht/DheVL9SZQHGafRCNhpG6fBfXqslgvWgAAtRjFJKbUhRcLOr241oLjgE0ySJzAGUbp31NRlMdSvD/F0A==
   dependencies:
     "@nuxt/kit" "^3.7.4"
     "@pinia/nuxt" "^0.5.0"