feat: improve landing page

MePhew-GonteQ-Industries · Mar 23, 2024 · be047f0 · be047f0
1 parent b241203
commit be047f0
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 58 deletions.
diff --git a/src/components/Home/ServicesList.vue b/src/components/Home/ServicesList.vue
@@ -3,6 +3,7 @@
     class="services-wrapper"
     ref="services"
   >
+    <h2 class="services-header">Zapoznaj się z naszą ofertą</h2>
     <CustomLoader
       :class="{ hidden: !loading }"
       v-if="!loaderAnimationFinished"
@@ -137,8 +138,15 @@ export default {
   min-height: 20vh;
   width: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 2rem;
+
+  .services-header {
+    font-size: 2.5rem;
+    color: $secondary-text-color;
+  }
 
   .hidden {
     display: none;

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -25,7 +25,7 @@
   },
   "footer": ["Terms of use", "Privacy policy", "Cookies policy", "GDPR"],
   "app": {
-    "description": "Professional hairdressing salon. Razor shaving, hair cutting, wedding and occasional hairstyles. Feel free to check out our offer and photos of our hairstyles."
+    "description": "Professional hairdressing salon"
   },
   "home": {
     "appHeading": "One app, lots of possibilites",

diff --git a/src/locales/pl.json b/src/locales/pl.json
@@ -30,7 +30,7 @@
     "Obowiązek informacyjny RODO"
   ],
   "app": {
-    "description": "Profesjonalny salon fryzjerski. Golenie brzytwą, stryżenie włosów, fryzury ślubne oraz okolicznosciowe. Zapraszamy do zapoznania się znaszą ofertą, oraz prezentacją wykonanych przez nas fryzur."
+    "description": "Profesjonalny salon fryzjerski"
   },
   "home": {
     "appHeading": "Jedna aplikacja, wiele możliwości",

diff --git a/src/styles/_constants.css b/src/styles/_constants.css
@@ -1,4 +1,4 @@
 :root {
   --transition-duration: 0.6s;
-  --translucent-color: rgba(33, 33, 33, 0.6);
+  --translucent-color: rgba(33, 33, 33, 0.7);
 }
diff --git a/src/views/AppContainer.vue b/src/views/AppContainer.vue
@@ -839,11 +839,10 @@ export default {
         justify-content: center;
 
         .description {
-          font-size: 1rem;
+          font-size: 3rem;
           font-family: "Poppins", sans-serif;
           margin-top: 0.75rem;
-          max-width: 45vw;
-          font-weight: 400;
+          font-weight: 700;
         }
 
         .wordmark {

diff --git a/src/views/Home/HomePage.vue b/src/views/Home/HomePage.vue
@@ -12,62 +12,66 @@
 
     <ImageGallery :photos="photos" />
 
-    <div class="mobile-app-banner">
-      <div class="cta">
-        <p class="primary">{{ t("home.appHeading") }}</p>
-        <p class="description">
-          {{ t("home.appDescription") }}
-        </p>
-        <p class="secondary">
-          {{ t("home.appDescriptionSecondary") }}
-        </p>
-        <div class="download-links">
-          <a
-            href="https://apps.apple.com/pl/app/zo%C5%82za-hairstyles/id1628563055"
-            target="_blank"
-          >
-            <img
-              class="app-store-badge"
-              src="@/assets/app-store-badge.svg"
-              alt="Pobierz z App Store"
-            />
-          </a>
-          <a
-            href="https://play.google.com/store/apps/details?id=pl.zolzahairstyles.app"
-            target="_blank"
-          >
-            <img
-              class="gp-badge"
-              src="https://www-growth.scdn.co/static/badges/svgs/google/badge-pl.svg"
-              alt="Pobierz w Google Play"
-            />
-          </a>
-        </div>
-      </div>
+    <section class="mobile-app-section">
+      <h4 class="app-header">Aplikacja mobilna</h4>
 
-      <div class="banner">
-        <div class="app-showcase-container">
-          <div class="wrapper">
-            <img
-              class="iphone"
-              src="@/assets/iphone-13-pro-max.png"
-              alt=""
-            />
-            <video
-              class="app-showcase"
-              src="@/assets/appDemo.mp4"
-              muted
-              loop
-              webkit-playsinline
-              playsinline
-              autoplay
+      <div class="mobile-app-banner">
+        <div class="cta">
+          <p class="primary">{{ t("home.appHeading") }}</p>
+          <p class="description">
+            {{ t("home.appDescription") }}
+          </p>
+          <p class="secondary">
+            {{ t("home.appDescriptionSecondary") }}
+          </p>
+          <div class="download-links">
+            <a
+              href="https://apps.apple.com/pl/app/zo%C5%82za-hairstyles/id1628563055"
+              target="_blank"
             >
-              <track kind="captions" />
-            </video>
+              <img
+                class="app-store-badge"
+                src="@/assets/app-store-badge.svg"
+                alt="Pobierz z App Store"
+              />
+            </a>
+            <a
+              href="https://play.google.com/store/apps/details?id=pl.zolzahairstyles.app"
+              target="_blank"
+            >
+              <img
+                class="gp-badge"
+                src="https://www-growth.scdn.co/static/badges/svgs/google/badge-pl.svg"
+                alt="Pobierz w Google Play"
+              />
+            </a>
+          </div>
+        </div>
+
+        <div class="banner">
+          <div class="app-showcase-container">
+            <div class="wrapper">
+              <img
+                class="iphone"
+                src="@/assets/iphone-13-pro-max.png"
+                alt=""
+              />
+              <video
+                class="app-showcase"
+                src="@/assets/appDemo.mp4"
+                muted
+                loop
+                webkit-playsinline
+                playsinline
+                autoplay
+              >
+                <track kind="captions" />
+              </video>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </section>
   </section>
 </template>
 
@@ -222,9 +226,22 @@ export default {
   justify-content: space-between;
   background-color: $primary-color;
 
-  .mobile-app-banner {
+  .mobile-app-section {
     margin-top: 1.5rem;
     width: 100%;
+    background-color: $secondary-color;
+    display: flex;
+    flex-direction: column;
+    padding-top: 1.5rem;
+    align-items: center;
+
+    .app-header {
+      font-size: 2.5rem;
+      color: $secondary-text-color;
+    }
+  }
+
+  .mobile-app-banner {
     background-image: url("@/assets/app-baner-background.png");
     background-color: $secondary-color;
     color: $secondary-text-color;