changes in landing section image section

canopas · Oct 20, 2023 · 4fa064c · 4fa064c
1 parent e9959cb
commit 4fa064c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 49 deletions.
diff --git a/vue-frontend/server.js b/vue-frontend/server.js
@@ -108,8 +108,8 @@ async function createServer(
 
 if (!isTest) {
   createServer().then(({ app }) =>
-    app.listen(8080, () => {
-      console.log("http://localhost:8080");
+    app.listen(3080, () => {
+      console.log("http://localhost:3080");
     }),
   );
 }

diff --git a/vue-frontend/src/components/flutter-app-development/LandingSection.vue b/vue-frontend/src/components/flutter-app-development/LandingSection.vue
@@ -1,58 +1,33 @@
 <template>
-  <div
-    class="tw-container md:tw-text-left tw-text-center md:tw-flex xl:tw-my-8 tw-pb-16"
-  >
-    <div
-      class="tw-flex tw-flex-col tw-gap-4 md:tw-gap-6 md:tw-flex-1 md:tw-w-[34rem]"
-    >
+  <div class="tw-container lg:tw-text-left tw-text-center lg:tw-flex xl:tw-my-8 tw-pb-16">
+    <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-900 tw-text-opacity-60">
+      <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 md:tw-block">
-        <button class="gradient-btn">
-          <router-link
-            to="/contact"
-            @click.native="mixpanel.track('tap_flutter_development_cta')"
-          >
-            <span class="sub-h4-semibold tw-border-none"
-              >Get Free Consultation</span
-            >
-          </router-link>
-        </button>
+      <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
-      class="tw-mt-[2.01rem] tw-flex md:tw-flex-wrap tw-flex-col tw-justify-center tw-gap-[0.8rem] md:tw-flex-1 md:tw-relative tw-pb-16"
-    >
-      <img
-        :src="landing400"
-        :srcset="`${landing400} 400w,${landing800} 800w`"
-        class="tw-mx-auto md:tw-hidden tw-w-[14.5625rem] tw-h-[13.57931rem]"
-        alt="flutter-landing"
-      />
-      <img
-        :src="landing1200"
-        :srcset="`${landing1200} 1200w,${landing2400} 2400w`"
-        class="tw-hidden md:tw-block tw-absolute tw-w-[90rem] tw-h-[32rem] tw--left-16"
-        alt="flutter-landing"
-      />
-      <div class="md:tw-hidden">
-        <button class="gradient-btn">
-          <router-link
-            to="/contact"
-            @click.native="mixpanel.track('tap_flutter_development_cta')"
-          >
-            <span
-              class="tw-text-[1rem] tw-font-semibold tw-leading-6 tw-border-none"
-              >Get Free Consultation</span
-            >
-          </router-link>
-        </button>
+      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>
     </div>
   </div>
@@ -72,9 +47,6 @@ export default {
       landing2400,
     };
   },
-  mounted() {
-    this.width = window.innerWidth;
-  },
   inject: ["mixpanel"],
 };
 </script>