create dare to leap section

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

@@ -89,7 +89,7 @@
               class="bg-[#121212] ease absolute top-1/2 left-1/2 right-1/2 rounded-xl transition-all duration-700 opacity-0 overflow-hidden w-0 h-0 hover:opacity-100 group-hover:h-full group-hover:w-full group-hover:top-0 group-hover:left-0 group-hover:right-0"
             >
               <div
-                class="absolute w-80 -top-72 left-1/2 text-center -translate-x-1/2 -translate-y-1/2 transition-all duration-700 transform group-hover:top-1/2"
+                class="absolute w-72 xl:w-80 -top-72 left-1/2 text-center -translate-x-1/2 -translate-y-1/2 transition-all duration-700 transform group-hover:top-1/2"
               >
                 <span
                   v-html="blog.hovertitle"

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

@@ -0,0 +1,62 @@
+<template>
+  <div
+    class="bg-[#F8F8F8] mt-14 text-center lg:text-left lg:h-[552px] 3xl:outer-container"
+  >
+    <div
+      class="container py-14 lg:py-20 xl:py-12 2xl:py-0 flex flex-col gap-4 lg:flex-row lg:gap-[3.12rem]"
+    >
+      <div
+        class="xs:mx-4 lg:!mx-0 flex flex-col gap-4 lg:gap-6 flex-[52.69%] my-auto"
+      >
+        <p class="header-1 xl:header-2 text-black-core/[0.87]">
+          Crafting tomorrow's technology starts with one click.
+          <span class="border-text"> Will you take the leap? </span>
+        </p>
+        <span class="text-black-core/[0.6] sub-h1-regular"
+          >Discover how we can elevate your project.</span
+        >
+        <nuxt-link
+          class="gradient-btn primary-btn hidden lg:flex mx-0"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_flutter_development_cta')"
+        >
+          <span class="sub-h3-semibold border-none">Drop Us a Line </span>
+          <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
+        </nuxt-link>
+      </div>
+      <div class="mx-auto lg:mx-0 flex-[40%] lg:flex justify-end">
+        <img
+          :src="leap"
+          :srcset="`${leap400} 400w, ${leap800} 800w`"
+          loading="lazy"
+          alt="Drop-us-a-line-image"
+          class="h-full w-[20.42463rem] lg:w-full object-contain"
+        />
+        <nuxt-link
+          class="gradient-btn primary-btn lg:hidden"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_flutter_development_cta')"
+        >
+          <span class="sub-h3-semibold border-none">Drop Us a Line </span>
+          <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
+        </nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import leap from "@/assets/images/flutter-app-development/leap.webp";
+import leap400 from "@/assets/images/flutter-app-development/leap400.webp";
+import leap800 from "@/assets/images/flutter-app-development/leap800.webp";
+</script>
+<style lang="postcss" scoped>
+.border-text {
+  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.87);
+}
+@media (min-width: 992px) {
+  .border-text {
+    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.87);
+  }
+}
+</style>

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

@@ -3,7 +3,7 @@
     <div class="container lg:text-left text-center lg:flex xl:my-8 pb-16">
       <div class="flex flex-col gap-4 lg:gap-6 lg:flex-1">
         <h1 class="header-1">Flutter App Development Company</h1>
-        <p class="sub-h1-regular text-black-core/[0.89]">
+        <p class="sub-h1-regular text-black-core/[0.6]">
           We harness the power of Flutter to create visually stunning, fast, and
           highly responsive applications that effortlessly work on both iOS and
           Android platforms. Our team turns your unique business requirements
@@ -23,25 +23,23 @@
         </div>
       </div>
       <div
-        class="mx-20 mt-8 lg:mt-0 lg:mx-0 flex flex-col md:gap-[1rem] lg:flex-1"
+        class="mx-auto w-[14.5625rem] xs:w-[20.5625rem] mt-8 lg:mt-0 lg:mx-0 md:gap-[1rem] lg:flex-1"
       >
         <img
           :src="landing400"
           :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
           class="h-full w-full object-contain"
           alt="flutter-landing"
         />
-        <div class="lg:hidden">
-          <nuxt-link
-            class="gradient-btn primary-btn"
-            to="/contact"
-            @click.native="$mixpanel.track('tap_flutter_development_cta')"
-          >
-            <span class="sub-h3-semibold border-none"
-              >Get Free Consultation</span
-            >
-          </nuxt-link>
-        </div>
+      </div>
+      <div class="lg:hidden mt-3">
+        <nuxt-link
+          class="gradient-btn primary-btn"
+          to="/contact"
+          @click.native="$mixpanel.track('tap_flutter_development_cta')"
+        >
+          <span class="sub-h3-semibold border-none">Get Free Consultation</span>
+        </nuxt-link>
       </div>
     </div>
   </section>

nuxt-frontend/nuxt.config.js

@@ -1,7 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import { defineNuxtConfig } from "nuxt/config";
-
 export default defineNuxtConfig({
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: "en",
+      },
+    },
+  },
   devtools: { enabled: true },
   modules: [
     "@pinia/nuxt",

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

@@ -5,6 +5,7 @@
     <CtaSection />
     <SuccessStory />
     <BlogSection />
+    <CtaSection2 />
     <NewFooter ref="flutterFooter" />
   </div>
 </template>
@@ -24,12 +25,14 @@ const SuccessStory = defineAsyncComponent(
 const BlogSection = defineAsyncComponent(
   () => import("@/components/flutter-app-development/BlogSection.vue"),
 );
+const CtaSection2 = defineAsyncComponent(
+  () => import("@/components/flutter-app-development/CtaSection2.vue"),
+);
 const NewFooter = defineAsyncComponent(
   () => import("@/components/partials/NewFooter.vue"),
 );
 const { $mixpanel } = useNuxtApp();
 const footer = ref(null);
-
 const seoData = config.FLUTTER_APP_DEVELOPMENT_SEO_META_DATA;
 useSeoMeta({
   robots: "noindex, nofollow",