feat: Cta section for flutter

nuxt-frontend/components/flutter-app-development/CtaSection.vue

@@ -0,0 +1,100 @@
+<template>
+  <section>
+    <!-- Mobile UI -->
+    <div class="relative lg:hidden h-[40vh]">
+      <img
+        :src="background400"
+        :srcset="`${background400} 400w, ${background800} 800w`"
+        class="h-full w-full object-cover opacity-20"
+        alt="flutter-cta"
+        loading="lazy"
+      />
+      <div class="absolute top-0 w-full h-full">
+        <div class="flex flex-col container gap-1 text-center mt-16">
+          <div class="flex flex-col gap-4">
+            <div>
+              <p class="header-1">Let's code your success story together!</p>
+            </div>
+            <div>
+              <span class="sub-h1-regular">
+                Join hands with us for your next app endeavour.
+              </span>
+            </div>
+          </div>
+          <div>
+            <nuxt-link
+              to="/contact"
+              @click.native="$mixpanel.track('tap_flutter_development_cta')"
+            >
+              <button class="gradient-btn primary-btn">
+                <span class="sub-h3-semibold border-none"
+                  >Get Free Consultation</span
+                >
+              </button>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Desktop UI -->
+    <div class="hidden lg:block relative h-[65vh] 2xl:h-[670px]">
+      <img
+        :src="background1200"
+        :srcset="`${background1200} 1200w, ${background2400} 2400w`"
+        class="h-full w-full object-cover opacity-20"
+        alt="flutter-cta"
+        loading="lazy"
+      />
+      <div class="absolute top-0 w-full h-full">
+        <div class="flex flex-row container gap-[5.25rem] mt-16">
+          <img
+            :src="hex"
+            class="flex-1 w-full h-full object-cover"
+            alt="flutter-hex-image"
+            loading="lazy"
+          />
+          <div class="flex flex-col gap-6 text-left flex-1 my-auto">
+            <div>
+              <p class="header-1">Let's code your success story together!</p>
+            </div>
+            <div>
+              <span class="sub-h1-regular">
+                Join hands with us for your next app endeavour.
+              </span>
+            </div>
+            <nuxt-link
+              to="/contact"
+              @click.native="$mixpanel.track('tap_flutter_development_cta')"
+            >
+              <button class="gradient-btn primary-btn mx-0">
+                <span class="sub-h3-semibold border-none"
+                  >Get Free Consultation</span
+                >
+              </button>
+            </nuxt-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script type="module">
+import background400 from "@/assets/images/flutter-app-development/cta/background-400w.webp";
+import background800 from "@/assets/images/flutter-app-development/cta/background-800w.webp";
+import background1200 from "@/assets/images/flutter-app-development/cta/background-1200w.webp";
+import background2400 from "@/assets/images/flutter-app-development/cta/background-2400w.webp";
+import hex from "@/assets/images/flutter-app-development/cta/hex-img.webp";
+export default {
+  data() {
+    return {
+      background400,
+      background800,
+      background1200,
+      background2400,
+      hex,
+    };
+  },
+  inject: ["mixpanel"],
+};
+</script>

nuxt-frontend/pages/flutter-app-development.vue

@@ -1,21 +1,24 @@
 <template>
   <div>
-    <metainfo>
-      <template v-slot:title="{ content }">
-        {{ content }}
-      </template>
-    </metainfo>
     <Header />
     <LandingSection ref="flutterLanding" />
+    <CtaSection />
+    <NewFooter />
   </div>
 </template>
 
 <script>
 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/flutter-app-development/LandingSection.vue";
-
+const CtaSection = defineAsyncComponent(() =>
+  import("@/components/flutter-app-development/CtaSection.vue"),
+);
+const NewFooter = defineAsyncComponent(() =>
+  import("@/components/partials/NewFooter.vue"),
+);
 export default {
   data() {
     return {
@@ -28,7 +31,6 @@ export default {
   setup() {
     const seoData = config.FLUTTER_APP_DEVELOPMENT_SEO_META_DATA;
     useSeoMeta({
-      robots: "noindex, nofollow",
       title: seoData.title,
       description: seoData.description,
       ogTitle: seoData.title,
@@ -40,6 +42,8 @@ export default {
   components: {
     Header,
     LandingSection,
+    CtaSection,
+    NewFooter,
   },
   methods: {
     sendEvent() {