Added CTA sections and refactor css classes

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];
   }

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>