Refine landing section

canopas · Oct 26, 2023 · 16be2e3 · 16be2e3
1 parent 6e0da50
commit 16be2e3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/LandingSection.vue b/vue-frontend/src/components/ios-app-development/LandingSection.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="tw-bg-gradient-to-t tw-from-[#F47695]/[25%] tw-via-[##FFF]/[50%] tw-to-[#FFF]/[50.82%] tw-pb-10"
+    class="tw-bg-ios-landing-background tw-bg-opacity-10 tw-py-10 3xl:tw-outer-container"
   >
     <div
-      class="tw-container tw-px-4 tw-pb-4 tw-text-left lg:tw-flex xl:tw-my-8"
+      class="tw-container tw-px-4 tw-pb-4 3xl:tw-pb-28 tw-text-left lg:tw-flex tw-mb-4 md:tw-mb-7 lg:tw-mb-14 2xl:tw-mt-28"
     >
       <div class="lg:tw-flex-1 tw-mb-6">
         <h1
@@ -17,19 +17,19 @@
           transform your business vision into reality, giving your brand the
           edge it needs in today's competitive marketplace.
         </p>
-
         <router-link
-          class="tw-relative tw-z-9 tw-ml-0 xl:tw-w-[290px] tw-hidden lg:tw-block tw-my-8 lg:tw-mt-8 lg:tw-mb-4 xl:tw-my-8 gradient-btn consultation-btn tw-h-[3.3rem] tw-w-max tw-items-left tw-rounded-full"
+          class="tw-relative tw-z-9 tw-ml-0 lg:tw-mt-8 tw-hidden tw-w-[51%] lg:tw-block gradient-btn consultation-btn"
           to="/contact"
           @click.native="mixpanel.track('tap_ios_development_cta')"
         >
-          <span class="sub-h3-semibold xl:sub-h4-semibold"
+          <span
+            class="tw-px-[5px] tw-text-center sub-h3-semibold xl:sub-h4-semibold"
             >Consult Our iOS Team</span
           >
         </router-link>
       </div>
       <div
-        class="tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-justify-center lg:tw-flex-1"
+        class="tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-justify-center lg:tw-flex-1 tw-mt-8 xs:tw-mt-0"
       >
         <img
           :src="landing400"
@@ -41,27 +41,27 @@
           v-if="width < 1400"
           :src="landingmd800"
           :srcset="`${landingmd800} 800w`"
-          class="tw-overflow-visible tw-hidden lg:tw-block tw-h-full xl:!tw-h-full lg:!tw-mt-[10%] lg:!tw-h-[98%] tw--ml-[82%] lg:tw--ml-[52%] xl:tw--ml-[70%] tw-w-[55%] tw-object-cover"
+          class="tw-overflow-visible tw-hidden lg:tw-block tw-h-full lg:!tw--mt-[0.5%] xl:!tw-mt-[0.5%] xl:tw- lg:!tw-h-[31rem] xl:!tw-h-[38rem] tw--ml-[82%] lg:tw--ml-[61%] xl:tw--ml-[59%] tw-w-[55%] tw-object-cover"
           alt="ios-landing"
         />
         <img
           v-else
           :src="landing1200"
           :srcset="`${landing1200} 1200w`"
-          class="tw-overflow-visible tw-hidden lg:tw-block tw-h-[37.5rem] tw-mt-8 xl:tw--ml-[70%] tw-w-[55%] tw-object-cover"
+          class="tw-overflow-visible tw-hidden lg:tw-block lg:tw-h-[40rem] tw--mt-[4%] xl:tw--ml-[80%] tw-object-cover"
           alt="ios-landing"
         />
 
         <div
           class="tw--mt-[2.7rem] tw-mr-28 xs:tw--mt-14 xs:tw-mr-40 lg:tw-hidden"
         >
           <router-link
-            class="gradient-btn tw-w-max tw-items-left tw-rounded-xl"
+            class="gradient-btn consultation-btn"
             to="/contact"
             @click.native="mixpanel.track('tap_ios_development_cta')"
           >
             <span
-              class="tw-font-inter-medium tw-px-[5px] tw-text-center tw-text-[1rem] tw-leading-[1.21rem]"
+              class="tw-px-[5px] tw-text-center sub-h3-semibold xl:sub-h4-semibold"
               >Consult Our iOS Team</span
             >
           </router-link>

diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
@@ -221,6 +221,8 @@ module.exports = {
           "radial-gradient(84% 76.48% at 50% 50%, #FEF1DE 0%, rgba(255, 191, 171, 0) 100%)",
         "togness-radical-gradient":
           "radial-gradient(84% 76.48% at 50% 50%, #E7F2FF 0%, rgba(255, 191, 171, 0) 100%)",
+        "ios-landing-background":
+          "linear-gradient(188deg, #FFF 18.82%, rgba(249, 133, 132, 0.10) 52.46%, rgba(244, 118, 149, 0.10)67.02%)",
       },
     },
   },