changes in landing section image section

canopas · Oct 20, 2023 · b0ecbac · b0ecbac
1 parent 636fe70
commit b0ecbac
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 46 deletions.
diff --git a/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue b/vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="tw-pt-14 md:tw-pt-[7.5rem] tw-bg-black-core tw-text-white tw-text-center"
+  >
+    <div
+      class="tw-container tw-flex tw-flex-col tw-gap-4 md:tw-gap-6 md:tw-w-[54.4375rem]"
+    >
+      <span class="header-2"> Flutter App Development Services </span>
+      <span class="sub-h1-regular">
+        We leverage Flutter's rich, customizable widgets and fast development
+        capabilities to create beautiful and user-friendly apps that save you
+        time and cost of platform-specific development.
+      </span>
+    </div>
+    <!-- Flutter  -->
+    <div></div>
+  </div>
+</template>
+<script type="module">
+export default {
+  data() {
+    return {};
+  },
+  mounted() {
+    document.addEventListener("scroll", this.handleScroll);
+  },
+};
+</script>
diff --git a/vue-frontend/src/components/flutter-app-development/LandingSection.vue b/vue-frontend/src/components/flutter-app-development/LandingSection.vue
@@ -1,55 +1,56 @@
 <template>
-  <div
-    class="tw-container lg:tw-text-left tw-text-center lg:tw-flex xl:tw-my-8 tw-pb-16"
-  >
+  <section class="tw-mt-6 lg:tw-mt-[6.75rem]">
     <div
-      class="tw-flex tw-flex-col tw-gap-4 lg:tw-gap-6 lg:tw-flex-1 lg:tw-items-start"
+      class="tw-container lg:tw-text-left tw-text-center lg:tw-flex xl:tw-my-8 tw-pb-16"
     >
-      <h1 class="header-1">Flutter App Development Company</h1>
-      <p class="sub-h1-regular tw-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 into
-        reality, giving your brand the competitive edge it needs in this dynamic
-        mobile app market.
-      </p>
-      <div class="tw-mt-4 tw-hidden lg:tw-block">
-        <router-link
-          to="/contact"
-          @click.native="mixpanel.track('tap_flutter_development_cta')"
-        >
-          <button class="gradient-btn primary-btn tw-ml-0">
-            <span class="sub-h4-semibold tw-border-none"
-              >Get Free Consultation</span
-            >
-          </button>
-        </router-link>
+      <div
+        class="tw-flex tw-flex-col tw-gap-4 lg:tw-gap-6 lg:tw-flex-1 lg:tw-items-start"
+      >
+        <h1 class="header-1">Flutter App Development Company</h1>
+        <p class="sub-h1-regular tw-text-black-core/[0.89]">
+          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
+          into reality, giving your brand the competitive edge it needs in this
+          dynamic mobile app market.
+        </p>
+        <div class="tw-mt-4 tw-hidden lg:tw-block">
+          <router-link
+            to="/contact"
+            @click.native="mixpanel.track('tap_flutter_development_cta')"
+          >
+            <button class="gradient-btn primary-btn tw-ml-0">
+              <span class="sub-h4-semibold tw-border-none"
+                >Get Free Consultation</span
+              >
+            </button>
+          </router-link>
+        </div>
       </div>
-    </div>
-    <div
-      class="tw-mx-20 tw-mt-8 lg:tw-mx-0 tw-flex lg:tw-flex-wrap tw-flex-col md:tw-gap-[0.8rem] lg:tw-flex-1 lg:tw-relative"
-    >
-      <img
-        :src="landing400"
-        :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
-        sizes="(max-width: 768px) 90vw, (max-width: 1200px) 40vw, 25vw, 20vw"
-        class="tw-mx-auto lg:tw-absolute tw-h-full tw-w-full lg:tw--left-16"
-        alt="flutter-landing"
-      />
-      <div class="lg:tw-hidden">
-        <router-link
-          to="/contact"
-          @click.native="mixpanel.track('tap_flutter_development_cta')"
-        >
-          <button class="gradient-btn primary-btn">
-            <span class="sub-h3-semibold tw-border-none"
-              >Get Free Consultation</span
-            >
-          </button>
-        </router-link>
+      <div
+        class="tw-mx-20 tw-mt-8 lg:tw-mt-0 lg:tw-mx-0 tw-flex lg:tw-flex-wrap tw-flex-col md:tw-gap-[0.8rem] lg:tw-flex-1 lg:tw-relative"
+      >
+        <img
+          :src="landing400"
+          :srcset="`${landing400} 400w, ${landing800} 800w, ${landing1200} 1200w, ${landing2400} 2400w`"
+          class="tw-h-full tw-w-full tw-object-contain"
+          alt="flutter-landing"
+        />
+        <div class="lg:tw-hidden">
+          <router-link
+            to="/contact"
+            @click.native="mixpanel.track('tap_flutter_development_cta')"
+          >
+            <button class="gradient-btn primary-btn">
+              <span class="sub-h3-semibold tw-border-none"
+                >Get Free Consultation</span
+              >
+            </button>
+          </router-link>
+        </div>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>