fix(feat): add locales and refine responsive landing page UI

src/styles/hero.css

@@ -96,6 +96,7 @@
     font-size: 14px;
     font-weight: 700;
     line-height: normal;
+    letter-spacing: var(--ls-14);
     color: #0d0d0d;
 }
 
@@ -110,9 +111,10 @@
 
 .hero__title {
     width: 100%;
-    font-size: 40px;
+    font-size: 36px;
     font-weight: 700;
     line-height: 1.1;
+    letter-spacing: var(--ls-36);
     color: #2e2a28;
 }
 
@@ -124,9 +126,10 @@
 .hero__description {
     width: 100%;
     margin: 0;
-    font-size: 18px;
+    font-size: 15px;
     font-weight: 400;
     line-height: 1.5;
+    letter-spacing: var(--ls-15);
     color: #7a726d;
 }
 
@@ -136,52 +139,21 @@
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
+    width: 100%;
     gap: 14px;
     overflow: clip;
 }
 
-.hero__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    padding: 14px 24px;
-    overflow: clip;
-    border-radius: 17px;
+.hero__store-badge {
     text-decoration: none;
-    transition: background-color 160ms ease;
+    transition:
+        transform 160ms ease,
+        filter 160ms ease;
 }
 
-.hero__button--primary {
-    background: #f28a4b;
-}
-
-.hero__button--primary:hover {
-    background: #e07a3b;
-}
-
-.hero__button--secondary {
-    background: rgba(255, 255, 255, 0.55);
-    border: 1px solid #e3d9d1;
-}
-
-.hero__button--secondary:hover {
-    background: #fff;
-}
-
-.hero__button-label {
-    font-size: 15px;
-    font-weight: 700;
-    line-height: normal;
-    white-space: nowrap;
-}
-
-.hero__button--primary .hero__button-label {
-    color: #fff;
-}
-
-.hero__button--secondary .hero__button-label {
-    color: #2e2a28;
+.hero__store-badge:hover {
+    filter: brightness(0.96);
+    transform: translateY(-1px);
 }
 
 .hero__tags {
@@ -208,31 +180,71 @@
     font-size: 14px;
     font-weight: 700;
     line-height: normal;
+    letter-spacing: var(--ls-14);
     color: #7a726d;
     white-space: nowrap;
 }
 
 @media (max-width: 433px) {
+    .hero__store-badge {
+        min-width: 0;
+    }
+}
+
+@media (max-width: 1023px) {
+    .hero__actions {
+        flex-wrap: nowrap;
+    }
+
+    .hero__store-badge {
+        flex: 1 1 calc((100% - 14px) / 2);
+        width: calc((100% - 14px) / 2);
+        min-width: 0;
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .hero__store-badge .store-badge__copy,
+    .hero__store-badge .store-badge__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+@media (max-width: 540px) {
     .hero__actions {
         flex-direction: column;
+    }
+
+    .hero__store-badge {
+        flex-basis: auto;
+        width: min(100%, calc(100vw - 32px));
+    }
+
+    .hero__tags {
         justify-content: center;
         width: 100%;
     }
+}
 
-    .hero__button {
-        width: min(100%, calc(100vw - 32px));
-        padding-right: 14px;
-        padding-left: 14px;
+@media (min-width: 440px) {
+    .hero__title {
+        font-size: 42px;
+        letter-spacing: var(--ls-42);
     }
+}
 
-    .hero__button-label {
-        font-size: clamp(13px, 3.5vw, 15px);
+@media (min-width: 576px) {
+    .hero__title {
+        font-size: 48px;
+        letter-spacing: var(--ls-48);
     }
 }
 
 @media (min-width: 768px) {
     .hero__title {
         font-size: 56px;
+        letter-spacing: var(--ls-56);
     }
 }
 
@@ -265,9 +277,17 @@
         width: 660px;
         padding: 80px 0;
     }
+}
 
+@media (min-width: 1200px) {
     .hero__title {
-        font-size: 72px;
+        font-size: 64px;
+        letter-spacing: var(--ls-64);
+    }
+
+    .hero__description {
+        font-size: 18px;
+        letter-spacing: var(--ls-18);
     }
 }
 
@@ -276,3 +296,10 @@
         padding: 0;
     }
 }
+
+@media (min-width: 1376px) {
+    .hero__title {
+        font-size: 72px;
+        letter-spacing: var(--ls-72);
+    }
+}