Merge pull request #202 from activebridge/fix/services_mob_app_dev_ti…

…tles Fix Services/Mob dev titles and descriptions
activebridge · Apr 23, 2024 · 1ca4c93 · 1ca4c93
2 parents 1452ff2 + 0fe2ddc
commit 1ca4c93
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 102 deletions.
diff --git a/_data/mob_dev_services.yml b/_data/mob_dev_services.yml
@@ -1,4 +1,4 @@
-title: Mobile application development
+page-title: Mobile App Development
 subtitle: We build responsive mobile applications with rich features and solid
           security.
 description: With over 5 years of experience, our team excels in developing custom

diff --git a/_sass/list-with-images.scss b/_sass/list-with-images.scss
@@ -73,7 +73,7 @@
   .list-with-images__item {
     flex-wrap: wrap;
     max-width: 400px;
-    margin: auto;
+    margin: 0 auto;
 
     &-icon {
       margin: 0 auto;

diff --git a/_sass/mob_dev_services.scss b/_sass/mob_dev_services.scss
@@ -1,44 +1,16 @@
 .mob_dev_services {
-  .header-2 { font-size: 22px; }
-
-  &__cross_platform,
-  &__engagement-models {
-    .header-2 { margin-top: 25px; }
-  }
-
   &.development .list-with-images {
-    margin: 4vh 0 0;
-
     &__item-icon img {
       border-radius: 20px;
       box-shadow: none;
     }
   }
 
-  .header-2.with-margin {
-    margin: 5vh auto;
-    max-width: 70%;
-  }
-
-  .description.with_margin {
-    margin-top: 6vh;
-
-    &-2 {
-      margin-top: 2vh;
-      margin-bottom: 6vh;
-    }
-  }
-
   &__main.wrap {
     padding-top: 14vh;
     background-image: linear-gradient(-135deg, $medium_purple 28.4%, rgba($buzok, .7) 52.42%, $medium_purple 73.77%);
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
 
-    .header-3:not(:first-child) {
-      margin-top: 7vh;
-      font-size: 1.4em;
-    }
-
     .list-with-images.horizontal .list-with-images__item {
       max-width: 150px;
       width: 100%;
@@ -48,8 +20,6 @@
   &__cross_platform {
     background-image: linear-gradient($white, $palianytsia);
 
-    .header-2.with-margin { margin-bottom: 0; }
-
     &.development__cards {
       .cards-container {
         justify-content: space-around;
@@ -66,8 +36,6 @@
   &__react_native {
     background-image: linear-gradient($sky-ua, $white);
     box-shadow: 0 4px 25px 0 rgba($purple-heart, .25);
-
-    .description.with_margin { margin: 6vh 0; }
   }
 
   &__flutter {
@@ -78,16 +46,11 @@
   &__ionic {
     background-image: linear-gradient(135deg, $black_sea, $black_sea, $main-violet);
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
-
-    .description.with_margin { margin-bottom: 6vh; }
   }
 
   &__approaches {
     .timeline-item { padding-bottom: 100px; }
-
     .timeline-item:last-child:nth-child(odd)::before { bottom: 3em; }
-
-    .header-2 { margin: 6vh 0 0; }
   }
 
   &__engagement-models {
@@ -97,12 +60,6 @@
 
 @media screen and (max-width: 767px) {
   .mob_dev_services {
-    .header-2 { font-size: 1em; }
-
-    .header-2.with-margin { max-width: 100%; }
-
-    .header-3:not(:first-child) { font-size: 1.1em; }
-
     .list-with-images.horizontal {
       justify-content: space-around;
       .list-with-images__item-icon img { max-width: 135px; }
@@ -117,7 +74,6 @@
 @media screen and (max-width: 767px) {
   .mob_dev_services {
     &__main.wrap { padding-top: 7vh; }
-
     &__approaches .timeline-item { padding-bottom: 30px; }
   }
 }
diff --git a/_sass/utility.scss b/_sass/utility.scss
@@ -3,6 +3,7 @@
 .mb-6 { margin-bottom: 60px; }
 .mt-1 { margin-top: 10px; }
 .mt-2 { margin-top: 20px; }
+.vertical-p-8 { padding: 80px 0; }
 
 .cera-regular { font-family: "Cera Regular", serif; }
 .cera-bold { font-family: "Cera-Bold", serif; }
@@ -11,4 +12,5 @@
 
 @media (max-width: 767px) {
   .mb-4 { margin-bottom: 25px; }
+  .vertical-p-8 { padding: 60px 0; }
 }
diff --git a/services/mobile-app-development.html b/services/mobile-app-development.html
@@ -12,20 +12,18 @@
 <div class="container mob_dev_services development">
   <div class="mob_dev_services__main wrap">
     <div class="wrapper">
-      <div class="header-3 white-text">{{ site.data.mob_dev_services.title }}</div>
-      <div class="header-2 with-margin">{{ site.data.mob_dev_services.subtitle }}</div>
-      <div class="description white-text">
-        {{ site.data.mob_dev_services.description }}
-      </div>
-      <div class="header-3">{{ site.data.mob_dev_services.industries_title }}</div>
+      <p class="page-title">{{ site.data.mob_dev_services.page-title }}</p>
+      <p class="message inria-bold with-margin">{{ site.data.mob_dev_services.subtitle }}</p>
+      <p class="description white-text mb-4">{{ site.data.mob_dev_services.description }}</p>
+      <h2 class="block-sub-title">{{ site.data.mob_dev_services.industries_title }}</h2>
       <div class="list-with-images horizontal">
         {% for item in site.data.mob_dev_services.industries %}
           <div class="list-with-images__item">
             <div class="list-with-images__item-icon">
               <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Industry">
             </div>
             <div class="list-with-images__item-text">
-              <div class="header-2 white-text">{{ item.title }}</div>
+              <h3 class="message inria-bold white-text mt-1 mb-0">{{ item.title }}</h3>
             </div>
           </div>
         {% endfor %}
@@ -35,42 +33,36 @@
 
   <div class="mob_dev_services__cross_platform wrap development__cards">
     <div class="wrapper">
-      <h1 class="header-3">{{ site.data.mob_dev_services.cross_platform.title }}</h1>
-      <div class="header-2">
-        {{ site.data.mob_dev_services.cross_platform.description }}
-      </div>
+      <h1 class="block-cera-title">{{ site.data.mob_dev_services.cross_platform.title }}</h1>
+      <p class="message inria-bold">{{ site.data.mob_dev_services.cross_platform.description }}</p>
       <div class="cards-container">
         {% for item in site.data.mob_dev_services.cross_platform.all %}
           <div class="card">
-            <div class="card__title-2">{{ item.title }}</div>
+            <h3 class="card__title-2">{{ item.title }}</h3>
             <div class="card__icon">
               <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Icon">
             </div>
-            <div class="card__description">{{ item.description }}</div>
+            <p class="card__description">{{ item.description }}</p>
           </div>
         {% endfor %}
       </div>
-      <div class="header-2 with-margin">
-        {{ site.data.mob_dev_services.cross_platform.subtitle }}
-      </div>
+      <p class="message inria-bold mt-2">{{ site.data.mob_dev_services.cross_platform.subtitle }}</p>
     </div>
   </div>
 
   <div class="mob_dev_services__react_native wrap">
     <div class="wrapper">
-      <h2 class="header-3">{{ site.data.mob_dev_services.react_native.title }}</h2>
-      <div class="description with_margin">
-        {{ site.data.mob_dev_services.react_native.description }}
-      </div>
+      <h2 class="block-cera-title">{{ site.data.mob_dev_services.react_native.title }}</h2>
+      <p class="description">{{ site.data.mob_dev_services.react_native.description }}</p>
       <div class="list-with-images">
         {% for item in site.data.mob_dev_services.react_native.all %}
           <div class="list-with-images__item">
             <div class="list-with-images__item-icon">
               <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Icon">
             </div>
             <div class="list-with-images__item-text">
-              <div class="header-2">{{ item.title }}</div>
-              <div class="description">{{ item.description }}</div>
+              <h3 class="message inria-bold mb-0 mt-2">{{ item.title }}</h3>
+              <p class="description">{{ item.description }}</p>
             </div>
           </div>
         {% endfor %}
@@ -80,22 +72,18 @@ <h2 class="header-3">{{ site.data.mob_dev_services.react_native.title }}</h2>
 
   <div class="mob_dev_services__flutter wrap">
     <div class="wrapper">
-      <h2 class="header-3">{{ site.data.mob_dev_services.flutter.title }}</h2>
-      <div class="description with_margin">
-        {{ site.data.mob_dev_services.flutter.description_1 }}
-      </div>
-      <div class="description with_margin-2">
-        {{ site.data.mob_dev_services.flutter.description_2 }}
-      </div>
+      <h2 class="block-cera-title">{{ site.data.mob_dev_services.flutter.title }}</h2>
+      <p class="description mb-4">{{ site.data.mob_dev_services.flutter.description_1 }}</p>
+      <p class="description">{{ site.data.mob_dev_services.flutter.description_2 }}</p>
       <div class="list-with-images">
         {% for item in site.data.mob_dev_services.flutter.all %}
           <div class="list-with-images__item">
             <div class="list-with-images__item-icon">
               <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Icon">
             </div>
             <div class="list-with-images__item-text">
-              <div class="header-2">{{ item.title }}</div>
-              <div class="description">{{ item.description }}</div>
+              <h3 class="message inria-bold mb-0 mt-2">{{ item.title }}</h3>
+              <p class="description">{{ item.description }}</p>
             </div>
           </div>
         {% endfor %}
@@ -105,18 +93,16 @@ <h2 class="header-3">{{ site.data.mob_dev_services.flutter.title }}</h2>
 
   <div class="mob_dev_services__ionic wrap">
     <div class="wrapper">
-      <h2 class="header-3 white-text">{{ site.data.mob_dev_services.ionic.title }}</h2>
-      <div class="description with_margin white-text">
-        {{ site.data.mob_dev_services.ionic.description }}
-      </div>
+      <h2 class="block-cera-title white-text">{{ site.data.mob_dev_services.ionic.title }}</h2>
+      <p class="description white-text">{{ site.data.mob_dev_services.ionic.description }}</p>
       <div class="list-with-images">
         {% for item in site.data.mob_dev_services.ionic.all %}
           <div class="list-with-images__item">
             <div class="list-with-images__item-icon">
               <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Icon">
             </div>
             <div class="list-with-images__item-text">
-              <div class="header-2 white-text">{{ item.title }}</div>
+              <h3 class="message inria-bold white-text mb-0 mt-2">{{ item.title }}</h3>
               <div class="description white-text">{{ item.description }}</div>
             </div>
           </div>
@@ -126,9 +112,11 @@ <h2 class="header-3 white-text">{{ site.data.mob_dev_services.ionic.title }}</h2
   </div>
 
   <div class="mob_dev_services__approaches">
-    <div class="wrap">
-      <div class="header-3">{{ site.data.mob_dev_services.approaches.title }}</div>
-      <div class="header-2">{{ site.data.mob_dev_services.approaches.subtitle }}</div>
+    <div class="wrapper">
+      <div class="vertical-p-8">
+        <h2 class="block-cera-title">{{ site.data.mob_dev_services.approaches.title }}</h2>
+        <p class="message inria-bold mb-0">{{ site.data.mob_dev_services.approaches.subtitle }}</p>
+      </div>
     </div>
     <div class="wrapper timeline solutions-first-animated-cards animated-cards" data-animation="snake">
       <svg class="desktop-svg" viewBox="0 0 891 2998" fill="none" preserveAspectRatio="none">
@@ -140,17 +128,11 @@ <h2 class="header-3 white-text">{{ site.data.mob_dev_services.ionic.title }}</h2
             <img src="/assets/images/mob_development_services/{{ item.icon }}" alt="Approach">
           </div>
           <div class="timeline-item__content">
-            <div class="timeline-item__content-title inria">
-              {{ item.title}}
-            </div>
-            <div class="timeline-item__content-description">
-              {{ item.description}}
-            </div>
+            <h3 class="timeline-item__content-title inria">{{ item.title}}</h3>
+            <p class="timeline-item__content-description">{{ item.description}}</p>
             {% if item.output %}
               <div class="timeline-item__content-output">
-                <div class="timeline-item__content-output-title">
-                  {{ site.data.mob_dev_services.approaches.output }}
-                </div>
+                <p class="timeline-item__content-output-title">{{ site.data.mob_dev_services.approaches.output }}</p>
                 <ul class="timeline-item__content-output-list">
                   {% for el in item.output %}
                     <li class="timeline-item__content-output-item">{{ el.text }}</li>
@@ -166,17 +148,13 @@ <h2 class="header-3 white-text">{{ site.data.mob_dev_services.ionic.title }}</h2
 
   <div class="development__cards wrap mob_dev_services__engagement-models">
     <div class="wrapper">
-      <div class="header-3">
-        {{ site.data.ror_dev_services.engagement_models.title }}
-      </div>
-      <div class="header-2">
-        {{ site.data.ror_dev_services.engagement_models.subtitle }}
-      </div>
+      <h2 class="block-cera-title">{{ site.data.ror_dev_services.engagement_models.title }}</h2>
+      <p class="message inria-bold">{{ site.data.ror_dev_services.engagement_models.subtitle }}</p>
       <div class="cards-container">
         {% for item in site.data.ror_dev_services.engagement_models.all %}
           <div class="card">
-            <div class="card__title-2">{{ item.title }}</div>
-            <div class="card__description">{{ item.description }}</div>
+            <h3 class="card__title-2">{{ item.title }}</h3>
+            <p class="card__description">{{ item.description }}</p>
             <a href="{{ item.link }}" class="button" id="mob_app_{{ item.index }}" data-link="transition">
               {{ site.data.web_dev_services.button }}
             </a>