From 9e0db1bb065946561aafa3c191ab9c027c37f955 Mon Sep 17 00:00:00 2001
From: Ashish <ashish.k@canopas.com>
Date: Tue, 7 Nov 2023 11:35:27 +0530
Subject: [PATCH] changes in landing section and cta section

---
 .../flutter-app-development/CtaSection.vue    | 68 ++++++-------------
 .../LandingSection.vue                        | 30 ++++----
 .../pages/flutter-app-development.vue         |  4 --
 3 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/nuxt-frontend/components/flutter-app-development/CtaSection.vue b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
index 82381bbc5..1b4ca17f4 100644
--- a/nuxt-frontend/components/flutter-app-development/CtaSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/CtaSection.vue
@@ -1,59 +1,33 @@
 <template>
   <section>
-    <!-- Mobile UI -->
-    <div class="relative lg:hidden h-[40vh]">
+    <div class="relative h-[40vh] lg:h-[65vh] 2xl:h-[670px]">
       <img
         :src="background400"
         :srcset="`${background400} 400w, ${background800} 800w`"
-        class="h-full w-full object-cover opacity-20"
+        class="h-full w-full object-cover opacity-20 lg:hidden"
         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"
+        class="h-full w-full object-cover opacity-20 hidden lg:block"
         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">
+        <div
+          class="flex flex-col lg:flex-row container gap-1 lg:gap-[5.25rem] text-center mt-16"
+        >
           <img
             :src="hex"
-            class="flex-1 w-full h-full object-cover"
+            class="flex-1 w-full h-full object-cover hidden lg:block"
             alt="flutter-hex-image"
             loading="lazy"
           />
-          <div class="flex flex-col gap-6 text-left flex-1 my-auto">
+          <div
+            class="flex flex-col gap-4 lg:gap-6 lg:text-left lg:flex-1 lg:my-auto"
+          >
             <div>
               <p class="header-1">Let's code your success story together!</p>
             </div>
@@ -62,16 +36,18 @@
                 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">
+            <div>
+              <nuxt-link
+                class="gradient-btn primary-btn lg:mx-0"
+                to="/contact"
+                @click.native="$mixpanel.track('tap_flutter_development_cta')"
+              >
                 <span class="sub-h3-semibold border-none"
-                  >Get Free Consultation</span
-                >
-              </button>
-            </nuxt-link>
+                  >Connect With Us
+                </span>
+                <Icon name="fa6-solid:arrow-right" class="fa ml-3" />
+              </nuxt-link>
+            </div>
           </div>
         </div>
       </div>
@@ -79,7 +55,7 @@
   </section>
 </template>
 
-<script type="module">
+<script type="module" lang="ts">
 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";
diff --git a/nuxt-frontend/components/flutter-app-development/LandingSection.vue b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
index 84d98b971..918a19e67 100644
--- a/nuxt-frontend/components/flutter-app-development/LandingSection.vue
+++ b/nuxt-frontend/components/flutter-app-development/LandingSection.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="mt-6 lg:mt-[6.75rem]">
     <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 lg:items-start">
+      <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]">
           We harness the power of Flutter to create visually stunning, fast, and
@@ -11,20 +11,19 @@
           dynamic mobile app market.
         </p>
         <div class="hidden lg:block">
-          <router-link
+          <nuxt-link
+            class="gradient-btn primary-btn ml-0"
             to="/contact"
             @click.native="$mixpanel.track('tap_flutter_development_cta')"
           >
-            <button class="gradient-btn primary-btn ml-0">
-              <span class="sub-h4-semibold border-none"
-                >Get Free Consultation</span
-              >
-            </button>
-          </router-link>
+            <span class="sub-h4-semibold border-none"
+              >Get Free Consultation</span
+            >
+          </nuxt-link>
         </div>
       </div>
       <div
-        class="mx-20 mt-8 lg:mt-0 lg:mx-0 flex lg:flex-wrap flex-col md:gap-[1rem] lg:flex-1"
+        class="mx-20 mt-8 lg:mt-0 lg:mx-0 flex flex-col md:gap-[1rem] lg:flex-1"
       >
         <img
           :src="landing400"
@@ -33,16 +32,15 @@
           alt="flutter-landing"
         />
         <div class="lg:hidden">
-          <router-link
+          <nuxt-link
+            class="gradient-btn primary-btn"
             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>
-          </router-link>
+            <span class="sub-h3-semibold border-none"
+              >Get Free Consultation</span
+            >
+          </nuxt-link>
         </div>
       </div>
     </div>
diff --git a/nuxt-frontend/pages/flutter-app-development.vue b/nuxt-frontend/pages/flutter-app-development.vue
index b8e06efd5..a17f3d06b 100644
--- a/nuxt-frontend/pages/flutter-app-development.vue
+++ b/nuxt-frontend/pages/flutter-app-development.vue
@@ -22,10 +22,6 @@ const NewFooter = defineAsyncComponent(() =>
 export default {
   data() {
     return {
-      event: "",
-      events: {
-        flutterLanding: "view_flutter_development_landing_section",
-      },
     };
   },
   setup() {