Add gradient as per standard

canopas · Oct 25, 2023 · 6e0da50 · 6e0da50
1 parent 46b5329
commit 6e0da50
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/vue-frontend/src/assets/css/tailwind.css b/vue-frontend/src/assets/css/tailwind.css
@@ -176,7 +176,7 @@
     @apply tw-from-[#FF835B] tw-to-[#F2709C] tw-bg-clip-text tw-text-transparent tw-bg-gradient-[270.11deg];
   }
   .gradient-btn {
-    @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-from-[#ff835b] tw-to-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
+    @apply tw-mb-0 tw-ml-auto tw-mr-auto tw-mt-5 tw-rounded-[0.6rem] tw-border tw-border-solid tw-border-transparent tw-to-[#ff835b] tw-from-[#f2709c] tw-p-4 tw-text-center tw-text-white tw-bg-gradient-[270.11deg] hover:tw-bg-gradient-to-r hover:tw-from-[#ff9472] hover:tw-via-[#ff909c] hover:tw-to-[#f2709c] hover:tw-shadow-[inset_2px_1000px_1px_#fff] active:tw-scale-[0.98] lg:tw-mb-0 lg:tw-ml-2 lg:tw-mr-2 lg:tw-mt-5 lg:tw-px-4 lg:tw-py-4;
   }
   .gradient-btn > span {
     @apply tw-mx-1.5 tw-my-0 tw-font-bold;

diff --git a/vue-frontend/src/components/ios-app-development/LandingSection.vue b/vue-frontend/src/components/ios-app-development/LandingSection.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="tw-bg-gradient-to-t tw-from-[#F77D8D]/[31.07%] md:tw-from-[#F77D8D]/[27.59%] tw-to-[#FFFFFF] tw-pb-10"
+    class="tw-bg-gradient-to-t tw-from-[#F47695]/[25%] tw-via-[##FFF]/[50%] tw-to-[#FFF]/[50.82%] tw-pb-10"
   >
     <div
-      class="tw-container tw-px-4 tw-pb-4 tw-text-left md:tw-flex xl:tw-my-8"
+      class="tw-container tw-px-4 tw-pb-4 tw-text-left lg:tw-flex xl:tw-my-8"
     >
-      <div class="md:tw-flex-1 tw-mb-6">
+      <div class="lg:tw-flex-1 tw-mb-6">
         <h1
-          class="header-1 tw-mb-4 tw-pr-2 tw-mb-2 lg:tw-w-2/4 sm:tw-mb-0 tw-text-black-core/[0.87]"
+          class="header-1 tw-mb-4 tw-pr-2 lg:tw-w-2/4 tw-text-black-core/[0.87]"
         >
           iOS App Development Company
         </h1>
@@ -19,42 +19,41 @@
         </p>
 
         <router-link
-          class="tw-relative tw-z-9 tw-ml-0 xl:tw-w-[290px] tw-hidden md: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 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"
           to="/contact"
           @click.native="mixpanel.track('tap_ios_development_cta')"
         >
-          <span
-            class="tw-font-inter-semibold tw-text-center tw-text-[1.1875rem] tw-leading-[0.425rem]"
+          <span class="sub-h3-semibold xl:sub-h4-semibold"
             >Consult Our iOS Team</span
           >
         </router-link>
       </div>
       <div
-        class="tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center md:tw-flex-1"
+        class="tw-flex tw-flex-col lg:tw-flex-row tw-items-center tw-justify-center lg:tw-flex-1"
       >
         <img
           :src="landing400"
           :srcset="`${landing400} 400w,${landing800} 800w`"
-          class="tw-overflow-visible md:tw-mt-0 tw-h-[21.49113rem] xs:tw-h-[24.49113rem] md:tw-hidden tw-w-[23.77063rem] tw-object-cover"
+          class="tw-overflow-visible md:tw-mt-0 tw-h-[21.49113rem] xs:tw-h-[24.49113rem] lg:tw-hidden tw-w-[23.77063rem] tw-object-cover"
           alt="ios-landing"
         />
         <img
           v-if="width < 1400"
           :src="landingmd800"
           :srcset="`${landingmd800} 800w`"
-          class="tw-overflow-visible tw-hidden md: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 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"
           alt="ios-landing"
         />
         <img
           v-else
           :src="landing1200"
           :srcset="`${landing1200} 1200w`"
-          class="tw-overflow-visible tw-hidden md: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 tw-h-[37.5rem] tw-mt-8 xl:tw--ml-[70%] tw-w-[55%] tw-object-cover"
           alt="ios-landing"
         />
 
         <div
-          class="tw--mt-[2.7rem] tw-mr-28 xs:tw--mt-14 xs:tw-mr-40 md:tw-hidden"
+          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"