fix(docs): Update Readme.md

Reviewed-on: #13

.env.deploy.example

@@ -0,0 +1,10 @@
+# Copy to .env.deploy for local runs: set -a && source .env.deploy && set +a && ./scripts/deploy-talkpro.sh
+#
+# Gitea Actions: only this secret is required (Settings → Secrets → Actions):
+#   TALKPRO_SSH_PRIVATE_KEY = full PEM file contents
+# Host/user/path defaults are in .gitea/workflows/deploy-talkpro.yml
+
+TALKPRO_HOST=13.214.179.69
+TALKPRO_USER=ubuntu
+TALKPRO_REMOTE_ROOT=/home/ubuntu/talkpro
+TALKPRO_SSH_KEY_FILE=/absolute/path/to/luis-only.pem

.gitea/workflows/deploy-talkpro.yml

@@ -0,0 +1,57 @@
+# Build talk-pro and rsync dist/ to the marketing VPS (talkpro.info).
+#
+# Required Gitea repo secret (Settings → Secrets → Actions):
+#   TALKPRO_SSH_PRIVATE_KEY  full PEM for ubuntu@talkpro (same as luis-only.pem)
+#
+# Host/user/path defaults are in the `env:` block below (edit there if needed).
+#
+# Requires a runner with: node 22+, ssh, ssh-keyscan, tar (rsync optional; no sudo needed).
+
+name: Deploy to talkpro
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+env:
+  TALKPRO_HOST: "13.214.179.69"
+  TALKPRO_USER: ubuntu
+  TALKPRO_REMOTE_ROOT: /home/ubuntu/talkpro
+
+jobs:
+  build-and-sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+
+      - name: Check deploy secrets
+        env:
+          TALKPRO_SSH_PRIVATE_KEY: ${{ secrets.TALKPRO_SSH_PRIVATE_KEY }}
+        run: |
+          if [ -z "${TALKPRO_SSH_PRIVATE_KEY}" ]; then
+            echo "ERROR: Missing Gitea secret TALKPRO_SSH_PRIVATE_KEY"
+            echo "Add it under Repository → Settings → Secrets (Actions)."
+            echo "Value: full contents of your ubuntu@talkpro SSH private key (PEM)."
+            exit 1
+          fi
+
+      - name: Trust host key
+        run: |
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+          ssh-keyscan -H "$TALKPRO_HOST" >> ~/.ssh/known_hosts 2>/dev/null || true
+
+      - name: Build and deploy to talkpro
+        env:
+          TALKPRO_SSH_PRIVATE_KEY: ${{ secrets.TALKPRO_SSH_PRIVATE_KEY }}
+        run: bash scripts/deploy-talkpro.sh

.gitignore

@@ -5,3 +5,5 @@ dist/
 .env
 .env.*
 !.env.example
+!.env.deploy.example
+.env.deploy

README.md

@@ -26,6 +26,28 @@ Open [http://localhost:4321](http://localhost:4321)
 | `npm run build` | Build for production into `dist/` |
 | `npm run preview` | Preview production build locally |
 
+## Deploy (Gitea Actions → talkpro.info)
+
+Pushes to **`main`** or **`master`** run [`.gitea/workflows/deploy-talkpro.yml`](.gitea/workflows/deploy-talkpro.yml): `npm ci` → `npm run build` → `rsync` `dist/` to the marketing server (`/home/ubuntu/talkpro`).
+
+**Repository secret** (Gitea → Settings → Secrets → Actions) — **required**:
+
+| Secret | Value |
+|--------|--------|
+| `TALKPRO_SSH_PRIVATE_KEY` | Full PEM text of the `ubuntu@talkpro` deploy key |
+
+Host (`13.214.179.69`), user (`ubuntu`), and web root (`/home/ubuntu/talkpro`) are set in the workflow. Optional secrets `TALKPRO_HOST`, `TALKPRO_USER`, `TALKPRO_REMOTE_ROOT` override those defaults.
+
+Manual deploy from this repo:
+
+```bash
+cp .env.deploy.example .env.deploy   # edit paths
+set -a && source .env.deploy && set +a
+bash scripts/deploy-talkpro.sh
+```
+
+`/api/site-links` (APK / App Store URLs) is still updated via the parent **talkpro** repo: `./scripts/post-talkpro-site-links.sh` on your laptop.
+
 ## Project Structure
 
 ```
@@ -72,6 +94,41 @@ Figma assets are stored in `public/assets/`. To re-download them (valid for 7 da
 bash scripts/download-assets.sh
 ```
 
+## Cloudflare Cache & the `site-links-client.js` Version Flag
+
+The site is proxied through **Cloudflare**, which aggressively caches static files. Astro's built CSS/JS bundles are safe because they get **content-hashed filenames** on every build (e.g. `_astro/index.Bx3kF9.js`) — Cloudflare never has an old copy because the filename itself changes.
+
+`public/site-links-client.js` is the exception. It lives in `public/` so it always deploys to the same URL (`/site-links-client.js`). Cloudflare caches this URL and will keep serving the old version until either:
+
+- The Cloudflare cache is **purged** (Caching → Purge Everything in the dashboard), or
+- The script URL is **versioned** so Cloudflare treats it as a new file.
+
+The URL is versioned in `src/layouts/Base.astro`:
+
+```html
+<script src="/site-links-client.js?v=2" defer></script>
+```
+
+**Every time you change `site-links-client.js`**, bump this number (`?v=2` → `?v=3`, etc.) and redeploy. Cloudflare will fetch the latest file immediately without needing a cache purge.
+
+| Change type | Cache action needed |
+|---|---|
+| CSS / Astro component change | None — hashed filename handles it |
+| `site-links-client.js` change | Bump `?v=N` in `Base.astro` and redeploy |
+| Emergency full reset | Cloudflare dashboard → Caching → Purge Everything |
+
+## i18n — Adding or Updating Translations
+
+All page copy lives in `src/i18n/translations.ts`. The English (`en`) entry is the base — every other language only needs to override the keys it wants to change; missing keys fall back to English automatically.
+
+Supported languages: `en`, `zh-cn`, `zh-tw`, `es`, `vi`, `pt`, `de`, `fr`, `hi`, `ar`, `ru`, `id`, `ur`, `ja`, `ko`, `ms`.
+
+To add a new language:
+1. Add the locale code to the `languages` array at the top of `translations.ts`.
+2. Add its label to `languageLabels` and `languageNames`.
+3. Add a translation object under `translations` (only the keys you want to override are required).
+4. Create the page route: copy `src/pages/[lang]/index.astro` if it doesn't exist.
+
 ## Design Source
 
 Figma: [Talk Pro — Home Page Desktop](https://www.figma.com/design/Gb8WMJ2RLlcZ0bigoiOQx9/Talk-Pro?node-id=9505-537&m=dev)

public/site-links-client.js

@@ -0,0 +1,310 @@
+/**
+ * Mirrors talkpro static site: /api/site-links, APK default, in-app + App Store modals.
+ * Strings come from #site-links-i18n (JSON) rendered by DownloadCTA.astro.
+ */
+(function () {
+  const DEFAULT_APK = 'https://talkspro.xyz/download';
+  let apkDownloadUrl = DEFAULT_APK;
+
+  function getApkDownloadUrl() {
+    return apkDownloadUrl;
+  }
+
+  function getI18n() {
+    const el = document.getElementById('site-links-i18n');
+    if (!el || !el.textContent.trim()) return {};
+    try {
+      return JSON.parse(el.textContent);
+    } catch {
+      return {};
+    }
+  }
+
+  function detectInAppBrowser() {
+    const ua = navigator.userAgent || '';
+    if (/MicroMessenger/i.test(ua)) return 'wechat';
+    try {
+      if (typeof window.WeixinJSBridge !== 'undefined') return 'wechat';
+    } catch {
+      /* ignore */
+    }
+    if (/QQ\//i.test(ua) && /MQQBrowser/i.test(ua)) return 'qq';
+    if (/Weibo/i.test(ua)) return 'weibo';
+    return '';
+  }
+
+  function isIOSDevice() {
+    const ua = navigator.userAgent || '';
+    if (/iPhone|iPad|iPod/i.test(ua)) return true;
+    if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) return true;
+    return false;
+  }
+
+  function isAndroidDevice() {
+    const ua = navigator.userAgent || '';
+    return /Android/i.test(ua) && !isIOSDevice();
+  }
+
+  const MODAL_WRAP =
+    'position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;';
+  const MODAL_BACK = 'position:absolute;inset:0;background:rgba(0,0,0,.45);cursor:pointer;';
+  const MODAL_PANEL =
+    'position:relative;max-width:420px;width:100%;margin:auto;padding:20px 22px;border-radius:12px;background:#fff;color:#1a1a1a;font:15px/1.45 system-ui,-apple-system,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.18);';
+  const MODAL_TITLE = 'margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.25;';
+  const MODAL_BODY = 'margin:0 0 18px;font-size:14px;color:#444;';
+  const MODAL_ACTIONS = 'display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;';
+  const BTN =
+    'cursor:pointer;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #ccc;background:#f5f5f5;color:#1a1a1a;';
+  const BTN_PRIMARY = 'border-color:#1a6cff;background:#1a6cff;color:#fff;';
+  const BTN_ORANGE = 'cursor:pointer;border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;border:1px solid #f28a4b;background:#f28a4b;color:#fff;';
+
+  function initInAppBrowserModal() {
+    if (document.getElementById('inapp-browser-modal')) return;
+    const wrap = document.createElement('div');
+    wrap.id = 'inapp-browser-modal';
+    wrap.setAttribute('role', 'dialog');
+    wrap.setAttribute('aria-modal', 'true');
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.style.cssText = MODAL_WRAP + 'display:none;';
+    wrap.innerHTML =
+      '<div data-inapp-close style="' +
+      MODAL_BACK +
+      '"></div>' +
+      '<div style="' +
+      MODAL_PANEL +
+      '">' +
+      '<h3 id="inapp-modal-title" style="' +
+      MODAL_TITLE +
+      '"></h3>' +
+      '<p id="inapp-modal-body" style="' +
+      MODAL_BODY +
+      '"></p>' +
+      '<div style="' +
+      MODAL_ACTIONS +
+      '">' +
+      '<button type="button" id="inapp-copy-apk" style="' +
+      BTN +
+      BTN_PRIMARY +
+      '"></button>' +
+      '<button type="button" id="inapp-try-chrome" style="' +
+      BTN +
+      '" hidden></button>' +
+      '<button type="button" id="inapp-got-it" data-inapp-close style="' +
+      BTN +
+      '"></button>' +
+      '</div></div>';
+    document.body.appendChild(wrap);
+
+    const close = () => {
+      wrap.style.display = 'none';
+      wrap.setAttribute('aria-hidden', 'true');
+    };
+    wrap.querySelectorAll('[data-inapp-close]').forEach((el) => {
+      el.addEventListener('click', close);
+    });
+
+    const i18n = () => getI18n();
+    document.getElementById('inapp-copy-apk').addEventListener('click', async () => {
+      const btn = document.getElementById('inapp-copy-apk');
+      const dict = i18n();
+      const done = dict.inapp_browser_copied || 'Copied';
+      try {
+        await navigator.clipboard.writeText(getApkDownloadUrl());
+        const prev = btn.textContent;
+        btn.textContent = done;
+        setTimeout(() => {
+          btn.textContent = dict.inapp_browser_copy || prev;
+        }, 1600);
+      } catch {
+        window.prompt(dict.inapp_browser_copy || 'Copy', getApkDownloadUrl());
+      }
+    });
+
+    document.getElementById('inapp-try-chrome').addEventListener('click', () => {
+      const enc = encodeURIComponent(getApkDownloadUrl());
+      const intent =
+        getApkDownloadUrl().replace(/^https:/i, 'intent:') +
+        '#Intent;' +
+        'scheme=https;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;' +
+        'package=com.android.chrome;S.browser_fallback_url=' +
+        enc +
+        ';end';
+      window.location.href = intent;
+    });
+  }
+
+  function openInAppBrowserModal() {
+    const modal = document.getElementById('inapp-browser-modal');
+    if (!modal) return;
+    const dict = getI18n();
+    const tryChrome = modal.querySelector('#inapp-try-chrome');
+    const showChrome = isAndroidDevice() && !!detectInAppBrowser();
+    if (tryChrome) {
+      tryChrome.hidden = !showChrome;
+      tryChrome.setAttribute('aria-hidden', showChrome ? 'false' : 'true');
+    }
+    modal.style.display = 'flex';
+    modal.setAttribute('aria-hidden', 'false');
+    const titleEl = modal.querySelector('#inapp-modal-title');
+    const bodyEl = modal.querySelector('#inapp-modal-body');
+    if (titleEl) titleEl.textContent = dict.inapp_browser_title || '';
+    if (bodyEl) {
+      const iosWechat = isIOSDevice() && detectInAppBrowser() === 'wechat';
+      const bodyKey = iosWechat ? 'inapp_browser_body_ios' : 'inapp_browser_body';
+      bodyEl.innerHTML =
+        dict[bodyKey] || dict.inapp_browser_body || '';
+    }
+    const copyBtn = modal.querySelector('#inapp-copy-apk');
+    const gotBtn = modal.querySelector('#inapp-got-it');
+    if (copyBtn) copyBtn.textContent = dict.inapp_browser_copy || '';
+    if (tryChrome) tryChrome.textContent = dict.inapp_browser_try_chrome || '';
+    if (gotBtn) gotBtn.textContent = dict.inapp_browser_got_it || 'OK';
+  }
+
+  function initAppStoreSoonModal() {
+    if (document.getElementById('app-store-soon-modal')) return;
+    const wrap = document.createElement('div');
+    wrap.id = 'app-store-soon-modal';
+    wrap.setAttribute('role', 'dialog');
+    wrap.setAttribute('aria-modal', 'true');
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.style.cssText = MODAL_WRAP + 'display:none;';
+    wrap.innerHTML =
+      '<div data-app-soon-close style="' +
+      MODAL_BACK +
+      '"></div>' +
+      '<div style="' +
+      MODAL_PANEL +
+      '">' +
+      '<h3 id="app-soon-title" style="' +
+      MODAL_TITLE +
+      '"></h3>' +
+      '<p id="app-soon-body" style="' +
+      MODAL_BODY +
+      '"></p>' +
+      '<div style="' +
+      MODAL_ACTIONS +
+      '">' +
+      '<button type="button" data-app-soon-close style="' +
+      BTN_ORANGE +
+      '"></button>' +
+      '</div></div>';
+    document.body.appendChild(wrap);
+    const close = () => {
+      wrap.style.display = 'none';
+      wrap.setAttribute('aria-hidden', 'true');
+    };
+    wrap.querySelectorAll('[data-app-soon-close]').forEach((el) => {
+      el.addEventListener('click', close);
+    });
+  }
+
+  function openAppStoreSoonModal() {
+    const modal = document.getElementById('app-store-soon-modal');
+    if (!modal) return;
+    const dict = getI18n();
+    const tEl = modal.querySelector('#app-soon-title');
+    const bEl = modal.querySelector('#app-soon-body');
+    const ok = modal.querySelector('button[data-app-soon-close]');
+    if (tEl) tEl.textContent = dict.app_store_soon_title || '';
+    if (bEl) bEl.innerHTML = dict.app_store_soon_body || '';
+    if (ok) ok.textContent = dict.app_store_soon_ok || 'OK';
+    modal.style.display = 'flex';
+    modal.setAttribute('aria-hidden', 'false');
+  }
+
+  function bindBrowserDownloadLinks() {
+    document.querySelectorAll('a.store-badge--browser').forEach((a) => {
+      const openForInApp = (e) => {
+        if (!detectInAppBrowser()) return;
+        e.preventDefault();
+        e.stopPropagation();
+        openInAppBrowserModal();
+      };
+      a.addEventListener('click', openForInApp);
+      a.addEventListener(
+        'touchend',
+        (e) => {
+          if (!detectInAppBrowser()) return;
+          e.preventDefault();
+          openInAppBrowserModal();
+        },
+        { passive: false }
+      );
+    });
+  }
+
+  function bindAppStoreAppleBadges() {
+    document.querySelectorAll('a.store-badge--apple[data-app-soon]').forEach((a) => {
+      const stopAndOpen = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        openAppStoreSoonModal();
+      };
+      a.addEventListener('click', stopAndOpen);
+      a.addEventListener(
+        'touchend',
+        (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          openAppStoreSoonModal();
+        },
+        { passive: false }
+      );
+    });
+  }
+
+  function loadSiteLinksThenBind() {
+    if (window.location.protocol === 'file:') {
+      bindBrowserDownloadLinks();
+      bindAppStoreAppleBadges();
+      return;
+    }
+    fetch('/api/site-links', { credentials: 'same-origin' })
+      .then((r) => {
+        if (!r.ok) throw new Error('bad status');
+        return r.json();
+      })
+      .then((j) => {
+        const apk = String(j.apk_download_url || '').trim();
+        const ios = String(j.app_store_url || '').trim();
+        if (apk.startsWith('https://')) apkDownloadUrl = apk;
+        document.querySelectorAll('a.store-badge--browser').forEach((a) => {
+          if (apk.startsWith('https://')) a.setAttribute('href', apk);
+        });
+        document.querySelectorAll('a.store-badge--apple').forEach((a) => {
+          if (ios.startsWith('https://')) {
+            a.setAttribute('href', ios);
+            a.removeAttribute('data-app-soon');
+            a.setAttribute('rel', 'noopener noreferrer');
+            a.setAttribute('target', '_blank');
+          }
+        });
+        const meta = document.getElementById('site-links-meta');
+        if (meta) {
+          const dict = getI18n();
+          const u = String(j.updated_at || '').trim();
+          if (u) {
+            meta.textContent =
+              (dict.linksMetaPrefix || 'Store links file updated: ') +
+              u +
+              (dict.linksMetaSuffix || ' (GMT+8)');
+            meta.hidden = false;
+          } else {
+            meta.hidden = true;
+          }
+        }
+      })
+      .catch(() => {
+        /* keep defaults */
+      })
+      .finally(() => {
+        bindBrowserDownloadLinks();
+        bindAppStoreAppleBadges();
+      });
+  }
+
+  initInAppBrowserModal();
+  initAppStoreSoonModal();
+  loadSiteLinksThenBind();
+})();

scripts/deploy-talkpro.sh

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# Build Astro dist/ and sync to the Talk Pro marketing host (talkpro.info).
+# Used by Gitea Actions and for manual deploys from this repo.
+#
+# Required (CI): TALKPRO_SSH_PRIVATE_KEY — PEM contents (Gitea secret)
+# Optional: TALKPRO_SSH_KEY_FILE — path to PEM (local)
+# Defaults match .env.deploy.example / Gitea workflow job env:
+#   TALKPRO_HOST=13.214.179.69  TALKPRO_USER=ubuntu  TALKPRO_REMOTE_ROOT=/home/ubuntu/talkpro
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "$ROOT"
+
+HOST="${TALKPRO_HOST:-13.214.179.69}"
+USER="${TALKPRO_USER:-ubuntu}"
+REMOTE_ROOT="${TALKPRO_REMOTE_ROOT:-/home/ubuntu/talkpro}"
+[[ -n "$HOST" ]] || HOST=13.214.179.69
+[[ -n "$USER" ]] || USER=ubuntu
+[[ -n "$REMOTE_ROOT" ]] || REMOTE_ROOT=/home/ubuntu/talkpro
+
+KEY_FILE="${TALKPRO_SSH_KEY_FILE:-}"
+TMP_KEY=""
+cleanup() {
+  [[ -n "$TMP_KEY" && -f "$TMP_KEY" ]] && rm -f "$TMP_KEY"
+}
+trap cleanup EXIT
+
+if [[ -n "${TALKPRO_SSH_PRIVATE_KEY:-}" ]]; then
+  TMP_KEY="$(mktemp)"
+  chmod 600 "$TMP_KEY"
+  printf '%s\n' "$TALKPRO_SSH_PRIVATE_KEY" | tr -d '\r' > "$TMP_KEY"
+  KEY_FILE="$TMP_KEY"
+elif [[ -z "$KEY_FILE" || ! -f "$KEY_FILE" ]]; then
+  echo "ERROR: Set TALKPRO_SSH_PRIVATE_KEY (Gitea secret / env) or TALKPRO_SSH_KEY_FILE (local path)" >&2
+  exit 1
+fi
+if [[ ! -s "$KEY_FILE" ]]; then
+  echo "ERROR: SSH key file is empty — check TALKPRO_SSH_PRIVATE_KEY secret in Gitea" >&2
+  exit 1
+fi
+chmod 600 "$KEY_FILE"
+
+SSH_OPTS=(-i "$KEY_FILE" -o BatchMode=yes -o StrictHostKeyChecking=accept-new)
+RSYNC_SSH="ssh -i \"$KEY_FILE\" -o BatchMode=yes -o StrictHostKeyChecking=accept-new"
+REMOTE="${USER}@${HOST}"
+
+if [[ -f package-lock.json ]]; then
+  npm ci
+else
+  npm install
+fi
+npm run build
+
+command -v ssh >/dev/null || { echo "ERROR: ssh not found (install openssh-client)" >&2; exit 127; }
+
+ssh "${SSH_OPTS[@]}" "$REMOTE" "mkdir -p ${REMOTE_ROOT}"
+
+if command -v rsync >/dev/null 2>&1; then
+  echo "Uploading with rsync..."
+  rsync -avz --delete \
+    -e "$RSYNC_SSH" \
+    dist/ \
+    "${REMOTE}:${REMOTE_ROOT}/"
+else
+  command -v tar >/dev/null || { echo "ERROR: need rsync or tar on the runner" >&2; exit 127; }
+  echo "Uploading with tar over ssh (rsync not available on runner)..."
+  ssh "${SSH_OPTS[@]}" "$REMOTE" "mkdir -p ${REMOTE_ROOT} && rm -rf ${REMOTE_ROOT:?}/*"
+  tar -C dist -cf - . | ssh "${SSH_OPTS[@]}" "$REMOTE" "tar -C ${REMOTE_ROOT} -xf -"
+fi
+
+echo "Deployed dist/ → ${REMOTE}:${REMOTE_ROOT}/"

src/assets.ts

@@ -0,0 +1,5 @@
+const assetVersion = '20260518-1'
+
+export function assetPath(path: string) {
+  return `${path}?v=${assetVersion}`
+}

src/components/AppPreview.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,10 +8,12 @@ export interface Props {
 
 const { t } = Astro.props
 const slides = [
-  "/assets/preview-phone.png",
-  "/assets/preview-phone.png",
-  "/assets/preview-phone.png",
+  assetPath("/assets/preview-phone.png"),
+  assetPath("/assets/preview-phone.png"),
+  assetPath("/assets/preview-phone.png"),
 ]
+const arrowLeft = assetPath("/assets/preview-arrow-left.svg")
+const arrowRight = assetPath("/assets/preview-arrow-right.svg")
 ---
 
 <section class="app-preview">
@@ -31,7 +34,7 @@ const slides = [
     <div class="app-preview__control-wrap">
       <div class="app-preview__control-inner">
         <button id="btn-prev" class="app-preview__button">
-          <img alt={t.previous} class="app-preview__button-icon" src="/assets/preview-arrow-left.svg" />
+          <img alt={t.previous} class="app-preview__button-icon" src={arrowLeft} />
         </button>
       </div>
     </div>
@@ -43,7 +46,7 @@ const slides = [
     <div class="app-preview__control-wrap">
       <div class="app-preview__control-inner">
         <button id="btn-next" class="app-preview__button">
-          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src="/assets/preview-arrow-right.svg" />
+          <img alt={t.next} class="app-preview__button-icon app-preview__button-icon--next" src={arrowRight} />
         </button>
       </div>
     </div>

src/components/CoreSystem.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,14 +7,14 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const halftone = "/assets/core-halftone-bg.png";
+const halftone = assetPath("/assets/core-halftone-bg.png");
 const icons = [
-  "/assets/core-icon-private.png",
-  "/assets/core-icon-groups.png",
-  "/assets/core-icon-channels.png",
-  "/assets/core-icon-voice.png",
-  "/assets/core-icon-video.png",
-  "/assets/core-icon-media.png",
+  assetPath("/assets/core-icon-private.png"),
+  assetPath("/assets/core-icon-groups.png"),
+  assetPath("/assets/core-icon-channels.png"),
+  assetPath("/assets/core-icon-voice.png"),
+  assetPath("/assets/core-icon-video.png"),
+  assetPath("/assets/core-icon-media.png"),
 ]
 ---
 

src/components/DownloadCTA.astro

@@ -1,16 +1,20 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
   t: Translations['download']
+  siteLinks: Translations['siteLinks']
 }
 
-const { t } = Astro.props
-const bgPattern = "/assets/cta-bg-pattern.svg";
-const talkproLogo = "/assets/cta-talkpro-logo.svg";
-const androidIcon = "/assets/cta-android-icon.svg";
-const appleIcon = "/assets/cta-apple-icon.svg";
-const phoneArt = "/assets/cta-phone-art.png";
+const { t, siteLinks } = Astro.props
+const bgPattern = assetPath("/assets/cta-bg-pattern.svg");
+const talkproLogo = assetPath("/assets/cta-talkpro-logo.svg");
+const androidIcon = assetPath("/assets/cta-android-icon.svg");
+const appleIcon = assetPath("/assets/cta-apple-icon.svg");
+const phoneArt = assetPath("/assets/cta-phone-art.png");
+const defaultApkHref = "https://talkspro.xyz/download";
+const siteLinksJson = JSON.stringify(siteLinks);
 ---
 
 <section id="download" class="download-cta">
@@ -35,7 +39,12 @@ const phoneArt = "/assets/cta-phone-art.png";
       </div>
 
       <div class="store-badges">
-        <div class="store-badge store-badge--android">
+        <a
+          class="store-badge store-badge--android store-badge--browser"
+          href={defaultApkHref}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
           <div class="store-badge__icon-frame">
             <img alt={t.androidAlt} class="store-badge__android-icon" src={androidIcon} />
           </div>
@@ -43,8 +52,12 @@ const phoneArt = "/assets/cta-phone-art.png";
             <p class="store-badge__platform">{t.android}</p>
             <p class="store-badge__label">{t.androidCta}</p>
           </div>
-        </div>
-        <div class="store-badge store-badge--ios">
+        </a>
+        <a
+          class="store-badge store-badge--ios store-badge--apple"
+          href="#"
+          data-app-soon="1"
+        >
           <div class="store-badge__icon-frame">
             <img alt={t.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
           </div>
@@ -52,8 +65,9 @@ const phoneArt = "/assets/cta-phone-art.png";
             <p class="store-badge__platform">{t.ios}</p>
             <p class="store-badge__label">{t.iosCta}</p>
           </div>
-        </div>
+        </a>
       </div>
+
     </div>
 
     <div class="download-cta__phone">
@@ -63,3 +77,5 @@ const phoneArt = "/assets/cta-phone-art.png";
     </div>
   </div>
 </section>
+
+<script type="application/json" id="site-links-i18n" set:html={siteLinksJson} />

src/components/Experience.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,15 +7,25 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const images = ["/assets/exp-card-1.png", "/assets/exp-card-2.png", "/assets/exp-card-3.png"]
+const images = [
+  assetPath("/assets/exp-card-1.png"),
+  assetPath("/assets/exp-card-2.png"),
+  assetPath("/assets/exp-card-3.png"),
+]
 const imageClasses = ['experience-card__image--one', 'experience-card__image--two', 'experience-card__image--three']
 ---
 
 <section id="experience" class="experience">
   <div class="experience__inner">
-    <p class="experience__title">
-      {t.title}
-    </p>
+    <div class="experience__heading">
+      <p class="experience__title">
+        {t.title}
+      </p>
+
+      <p class="experience__caption">
+        {t.caption}
+      </p>
+    </div>
 
     <div class="experience__body">
       <div class="experience__grid">
@@ -36,10 +47,6 @@ const imageClasses = ['experience-card__image--one', 'experience-card__image--tw
           </div>
         ))}
       </div>
-
-      <p class="experience__caption">
-        {t.caption}
-      </p>
     </div>
   </div>
 </section>

src/components/Footer.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,7 +7,7 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const logoFull = "/assets/footer-logo.png";
+const logoFull = assetPath("/assets/footer-logo.png");
 ---
 
 <footer class="site-footer">

src/components/Header.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import { getLocalePath, languageLabels, languageNames, languages, type Lang, type Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,9 +8,9 @@ export interface Props {
 }
 
 const { lang, t } = Astro.props
-const logoIcon = "/assets/header-logo-icon.png";
-const logoWordmark = "/assets/header-logo-wordmark.svg";
-const globeIcon = "/assets/header-globe.svg";
+const logoIcon = assetPath("/assets/header-logo-icon.png");
+const logoWordmark = assetPath("/assets/header-logo-wordmark.svg");
+const globeIcon = assetPath("/assets/header-globe.svg");
 const navItems = [
   { href: '#hero', label: t.nav.home },
   { href: '#features', label: t.nav.features },

src/components/Hero.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,10 +8,11 @@ export interface Props {
 }
 
 const { t, download } = Astro.props
-const heroBg = "/assets/hero-bg.png";
-const phoneMockup = "/assets/hero-phone.png";
-const androidIcon = "/assets/cta-android-icon.svg";
-const appleIcon = "/assets/cta-apple-icon.svg";
+const heroBg = assetPath("/assets/hero-bg.png");
+const phoneMockup = assetPath("/assets/hero-phone.png");
+const androidIcon = assetPath("/assets/cta-android-icon.svg");
+const appleIcon = assetPath("/assets/cta-apple-icon.svg");
+const defaultApkHref = "https://talkspro.xyz/download";
 ---
 
 <section id="hero" class="hero">
@@ -39,7 +41,12 @@ const appleIcon = "/assets/cta-apple-icon.svg";
           {t.description}
         </p>
         <div class="hero__actions">
-          <a href="#download" class="store-badge store-badge--android hero__store-badge">
+          <a
+            href={defaultApkHref}
+            class="store-badge store-badge--android store-badge--browser hero__store-badge"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
             <div class="store-badge__icon-frame">
               <img alt={download.androidAlt} class="store-badge__android-icon" src={androidIcon} />
             </div>
@@ -48,7 +55,11 @@ const appleIcon = "/assets/cta-apple-icon.svg";
               <p class="store-badge__label">{download.androidCta}</p>
             </div>
           </a>
-          <a href="#download" class="store-badge store-badge--ios hero__store-badge">
+          <a
+            href="#"
+            class="store-badge store-badge--ios store-badge--apple hero__store-badge"
+            data-app-soon="1"
+          >
             <div class="store-badge__icon-frame">
               <img alt={download.appleAlt} class="store-badge__apple-icon" src={appleIcon} />
             </div>

src/components/Trust.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,6 +7,9 @@ export interface Props {
 }
 
 const { t } = Astro.props
+const trustIconSprite = assetPath("/assets/trust-icon-sprite.png")
+const trustIconImprovement = assetPath("/assets/trust-icon-improvement.png")
+const trustDivider = assetPath("/assets/trust-divider.svg")
 const iconClasses = [
   'trust-card__icon--one',
   'trust-card__icon--two',
@@ -35,7 +39,7 @@ const iconClasses = [
                 <img
                   alt=""
                   class={`trust-card__icon ${iconClasses[index]}`}
-                  src={index === 3 ? "/assets/trust-icon-improvement.png" : "/assets/trust-icon-sprite.png"}
+                  src={index === 3 ? trustIconImprovement : trustIconSprite}
                 />
               </div>
             </div>
@@ -47,7 +51,7 @@ const iconClasses = [
           {index < t.cards.length - 1 && (
             <div class="trust__divider">
               <div class="trust__divider-frame">
-                <img alt="" class="trust__divider-image" src="/assets/trust-divider.svg" />
+                <img alt="" class="trust__divider-image" src={trustDivider} />
               </div>
             </div>
           )}

src/components/WhyTalkPro.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,14 +7,15 @@ export interface Props {
 }
 
 const { t } = Astro.props
-const underline = "/assets/why-underline.svg";
+const underline = assetPath("/assets/why-underline.svg");
 const icons = [
-  "/assets/why-icon-simple.svg",
-  "/assets/why-icon-familiar.svg",
-  "/assets/why-icon-connected.svg",
-  "/assets/why-icon-modern.svg",
+  assetPath("/assets/why-icon-simple.svg"),
+  assetPath("/assets/why-icon-familiar.svg"),
+  assetPath("/assets/why-icon-connected.svg"),
+  assetPath("/assets/why-icon-modern.svg"),
 ]
-const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-card__icon--square', 'why-card__icon--modern']
+const illustrationVideo = assetPath("/assets/why-illustration.mp4")
+const iconClasses = ['why-card__icon--simple', 'why-card__icon--familiar', 'why-card__icon--connected', 'why-card__icon--modern']
 ---
 
 <section class="why">
@@ -49,7 +51,7 @@ const iconClasses = ['why-card__icon--square', 'why-card__icon--familiar', 'why-
           playsinline
           preload="metadata"
         >
-          <source src="/assets/why-illustration.mp4" type="video/mp4" />
+          <source src={illustrationVideo} type="video/mp4" />
         </video>
       </div>
     </div>

src/layouts/Base.astro

@@ -27,13 +27,16 @@ const {
   </head>
   <body class="bg-surface font-sans overflow-x-hidden">
     <slot />
+    <script src="/site-links-client.js?v=2" defer></script>
     <script>
       (() => {
         const header = document.getElementById('site-header');
         const getOffset = () => header ? header.offsetHeight : 0;
         let activeScrollAnimation = 0;
 
-        const easeInCubic = (t: number) => t * t * t;
+        const easeInOutCubic = (t: number) => (
+          t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+        );
 
         const animateScrollTo = (targetTop: number) => {
           const startTop = window.scrollY;
@@ -54,7 +57,7 @@ const {
           const step = (now: number) => {
             const elapsed = now - startTime;
             const progress = Math.min(elapsed / duration, 1);
-            const easedProgress = easeInCubic(progress);
+            const easedProgress = easeInOutCubic(progress);
 
             window.scrollTo(0, startTop + distance * easedProgress);
 
@@ -77,6 +80,7 @@ const {
             e.preventDefault();
             const top = target.getBoundingClientRect().top + window.scrollY - getOffset();
             animateScrollTo(top);
+            history.pushState(null, '', href);
           });
         });
 

src/pages/[lang]/index.astro

@@ -31,6 +31,6 @@ const t = getTranslations(lang)
   <UseCases t={t.useCases} />
   <Trust t={t.trust} />
   <!-- AppPreview section disabled per lead request. -->
-  <DownloadCTA t={t.download} />
+  <DownloadCTA t={t.download} siteLinks={t.siteLinks} />
   <Footer t={t.footer} />
 </Base>

src/pages/index.astro

@@ -24,6 +24,6 @@ const t = getTranslations(lang)
   <UseCases t={t.useCases} />
   <Trust t={t.trust} />
   <!-- AppPreview section disabled per lead request. -->
-  <DownloadCTA t={t.download} />
+  <DownloadCTA t={t.download} siteLinks={t.siteLinks} />
   <Footer t={t.footer} />
 </Base>

src/styles/download.css

@@ -28,7 +28,7 @@
     align-items: center;
     width: 100%;
     max-width: 1280px;
-    gap: 32px;
+    gap: 0px;
     margin: 0 auto;
     padding: 60px 16px;
 }
@@ -60,7 +60,7 @@
     flex-wrap: nowrap;
     align-items: center;
     flex-shrink: 0;
-    gap: 20px;
+    gap: 16px;
     max-width: 100%;
 }
 
@@ -129,14 +129,29 @@
     border-radius: 20px;
 }
 
+a.store-badge {
+    box-sizing: border-box;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.download-cta__links-meta {
+    font-size: 13px;
+    color: #7a726d;
+    margin: 14px auto 0;
+    max-width: min(1180px, calc(100% - 40px));
+    text-align: center;
+}
+
 .store-badge--android {
     background: #f28a4b;
     border: 1px solid #c5834e;
 }
 
 .store-badge--ios {
-    background: #383838;
-    border: 1px solid #141414;
+    background: #121212F0;
+    border: 1px solid #2C2C2C;
 }
 
 .store-badge__icon {
@@ -153,7 +168,7 @@
     flex-shrink: 0;
     width: 44px;
     height: 44px;
-    background: #151515;
+    background: #323232;
     border-radius: 12px;
 }
 
@@ -185,10 +200,10 @@
 
 .store-badge__platform {
     margin: 0;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 600;
     line-height: normal;
-    letter-spacing: 0.05px;
+    letter-spacing: var(--ls-13);
 }
 
 .store-badge--android .store-badge__platform {
@@ -196,7 +211,7 @@
 }
 
 .store-badge--ios .store-badge__platform {
-    color: #ccc;
+    color: #949494;
 }
 
 .store-badge__label {
@@ -213,8 +228,16 @@
     display: block;
     order: 1;
     flex-shrink: 0;
-    width: min(418px, calc(100vw - 32px));
-    aspect-ratio: 418 / 510;
+    width: 240px;
+    height: 292px;
+}
+
+@media (min-width: 578px) {
+    .download-cta__phone {
+        width: min(418px, calc(100vw - 32px));
+        height: auto;
+        aspect-ratio: 418 / 510;
+    }
 }
 
 .download-cta__phone-crop {
@@ -271,14 +294,14 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .download-cta {
         height: 600px;
     }
 
     .download-cta__inner {
         flex-direction: row;
-        gap: 0;
+        gap: 16px;
         padding: 0 24px;
     }
 

src/styles/features.css

@@ -49,10 +49,10 @@
 .features__description {
   width: 100%;
   margin: 0;
-  font-size: 18px;
+  font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
-  letter-spacing: var(--ls-18);
+  letter-spacing: var(--ls-15);
   color: #7a726d;
   text-align: center;
 }
@@ -72,8 +72,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
-  padding: 32px;
+  gap: 24px;
+  padding: 36px;
   background: rgba(255, 255, 255, 0.78);
   border-radius: 30px;
 }
@@ -140,8 +140,8 @@
 @media (min-width: 576px) {
   .features__header,
   .features__grid {
-    padding-left: 28px;
-    padding-right: 28px;
+    padding-left: 24px;
+    padding-right: 24px;
   }
 
   .features__title {
@@ -172,7 +172,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .features__header {
     padding: 0 clamp(36px, 14vw, 180px);
   }
@@ -188,6 +188,11 @@
     font-size: 48px;
     letter-spacing: var(--ls-48);
   }
+
+  .features__description {
+    font-size: 18px;
+    letter-spacing: var(--ls-18);
+  }
 }
 
 @media (min-width: 1280px) {

src/styles/footer.css

@@ -103,7 +103,7 @@
   }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
   .site-footer {
     padding: 60px 0;
   }

src/styles/global.css

@@ -73,3 +73,7 @@ body {
   --ls-71: -1.58px;
   --ls-72: -1.61px;
 }
+
+:target {
+  scroll-margin-top: 72px;
+}

src/styles/header.css

@@ -145,7 +145,8 @@
     right: 0;
     z-index: 60;
     width: 240px;
-    overflow: hidden;
+    max-height: min(520px, calc(100vh - 96px));
+    overflow-y: auto;
     background: #fff;
     border: 1px solid #e3d9d1;
     border-radius: 18px;
@@ -158,11 +159,11 @@
 
 .language-switcher__option {
     display: block;
-    padding: 18px 24px;
-    font-size: 18px;
+    padding: 14px 24px;
+    font-size: 14px;
     font-weight: 600;
     line-height: normal;
-    letter-spacing: var(--ls-18);
+    letter-spacing: var(--ls-14);
     color: #7a726d;
     text-decoration: none;
     transition:
@@ -232,6 +233,8 @@
 }
 
 .mobile-nav {
+    max-height: calc(100vh - 72px);
+    overflow-y: auto;
     background: #fff;
     border-top: 1px solid #e3d9d1;
 }
@@ -257,6 +260,11 @@
     color: #2e2a28;
     text-decoration: none;
     border-bottom: 1px solid #e3d9d1;
+    transition: color 160ms ease;
+}
+
+.mobile-nav__link.is-active {
+    color: #f28a4b;
 }
 
 .mobile-nav__link--last {
@@ -264,18 +272,22 @@
 }
 
 .mobile-nav__languages {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
     align-items: center;
-    gap: 16px;
+    gap: 12px 16px;
     padding: 16px 0;
     border-top: 1px solid #e3d9d1;
 }
 
 .mobile-nav__language-link {
-    font-size: 15px;
+    min-width: 0;
+    font-size: 14px;
     font-weight: 600;
-    letter-spacing: var(--ls-15);
+    line-height: 1.25;
+    letter-spacing: var(--ls-14);
     color: #2e2a28;
+    text-align: center;
     text-decoration: none;
 }
 
@@ -285,14 +297,13 @@
 
 @media (max-width: 500px) {
     .mobile-nav__languages {
-        display: grid;
         grid-template-columns: repeat(3, minmax(0, 1fr));
-        align-items: center;
-        gap: 12px 16px;
     }
+}
 
-    .mobile-nav__language-link {
-        text-align: center;
+@media (min-width: 501px) and (max-width: 1024px) {
+    .mobile-nav__languages {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
     }
 }
 
@@ -322,7 +333,7 @@
     background: #e07a3b;
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .site-header__bar {
         padding: 0 24px;
     }

src/styles/hero.css

@@ -191,7 +191,7 @@
     }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1024px) {
     .hero__actions {
         flex-wrap: nowrap;
     }
@@ -246,6 +246,28 @@
         font-size: 56px;
         letter-spacing: var(--ls-56);
     }
+
+    .hero__phone-column {
+        padding-top: 60px;
+    }
+
+    .hero__phone-frame {
+        width: min(580px, 100%);
+        height: auto;
+        aspect-ratio: 116 / 191;
+    }
+
+    .hero__phone-crop {
+        position: relative;
+        inset: auto;
+        overflow: visible;
+    }
+
+    .hero__phone {
+        position: static;
+        width: 100%;
+        height: auto;
+    }
 }
 
 @media (min-width: 1024px) {
@@ -259,23 +281,47 @@
     }
 
     .hero__phone-column {
-        align-items: center;
-        justify-content: flex-start;
+        position: relative;
         flex: 1;
         min-width: 0;
         height: 100%;
-        padding-top: 60px;
+        overflow: hidden;
     }
 
     .hero__phone-frame {
-        width: 100%;
-        height: auto;
-        aspect-ratio: 673 / 1108;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: hidden;
+    }
+
+    .hero__phone-crop {
+        position: relative;
+        inset: auto;
+        height: 100%;
+        overflow: visible;
+    }
+
+    .hero__phone {
+        position: static;
+        width: auto;
+        height: 100%;
+    }
+
+    .hero__actions {
+        flex-wrap: nowrap;
+    }
+
+    .hero__store-badge {
+        flex: 0 1 auto;
+        min-width: 0;
     }
 
     .hero__content {
-        width: 660px;
-        padding: 80px 0;
+        width: clamp(560px, 44vw, 600px);
+        padding: 0;
     }
 }
 
@@ -295,6 +341,37 @@
     .hero__inner {
         padding: 0;
     }
+
+    .hero__phone-column {
+        align-items: flex-start;
+        padding-top: 60px;
+    }
+
+    .hero__phone-frame {
+        position: static;
+        top: auto;
+        right: auto;
+        bottom: auto;
+        overflow: visible;
+        flex: 1 0 0;
+        width: auto;
+        max-width: calc(955px * 116 / 191);
+        height: 955px;
+        aspect-ratio: 116 / 191;
+    }
+
+    .hero__phone-crop {
+        height: auto;
+    }
+
+    .hero__phone {
+        width: 100%;
+        height: 100%;
+    }
+
+    .hero__content {
+        width: clamp(560px, 52vw, 660px);
+    }
 }
 
 @media (min-width: 1376px) {

src/styles/preview.css

@@ -33,9 +33,10 @@
 .app-preview__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;
     text-align: center;
 }
@@ -205,7 +206,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .app-preview {
         padding: 120px clamp(32px, 6vw, 130px) 0;
     }
@@ -214,6 +215,11 @@
         font-size: 48px;
     }
 
+    .app-preview__description {
+        font-size: 18px;
+        letter-spacing: var(--ls-18);
+    }
+
     .app-preview__side-phone,
     .app-preview__control-wrap {
         display: flex;

src/styles/sections.css

@@ -18,6 +18,14 @@
     margin: 0 auto;
 }
 
+.experience__heading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    gap: 24px;
+}
+
 .experience__title {
     width: 100%;
     margin: 0;
@@ -49,7 +57,7 @@
     flex-direction: column;
     align-items: center;
     width: 100%;
-    gap: 16px;
+    gap: 36px;
     padding: 0 0 36px;
     overflow: hidden;
     background: linear-gradient(to bottom, #fef0eb, #fff);
@@ -84,7 +92,7 @@
 }
 
 .experience-card__image--one {
-    top: -86.50%;
+    top: -86.5%;
     left: 0;
     width: 100%;
     height: 298.5%;
@@ -139,10 +147,10 @@
 .experience__caption {
     width: 100%;
     margin: 0;
-    font-size: 18px;
+    font-size: 15px;
     font-weight: 400;
     line-height: 1.5;
-    letter-spacing: var(--ls-18);
+    letter-spacing: var(--ls-15);
     color: #7a726d;
     text-align: center;
 }
@@ -228,10 +236,10 @@
 .use-cases__description {
     width: 100%;
     margin: 0;
-    font-size: 18px;
+    font-size: 15px;
     font-weight: 400;
     line-height: 1.5;
-    letter-spacing: var(--ls-18);
+    letter-spacing: var(--ls-15);
     color: #7a726d;
     text-align: left;
 }
@@ -308,7 +316,7 @@
     color: #7a726d;
 }
 
-@media (max-width: 639px) {
+@media (max-width: 578px) {
     .use-cases__rows {
         gap: 24px;
         overflow: visible;
@@ -349,8 +357,8 @@
 @media (min-width: 576px) {
     .experience,
     .use-cases {
-        padding-left: 28px;
-        padding-right: 28px;
+        padding-left: 24px;
+        padding-right: 24px;
     }
 
     .experience__title,
@@ -360,7 +368,7 @@
     }
 }
 
-@media (min-width: 626px) {
+@media (min-width: 578px) {
     .experience__grid {
         grid-template-columns: repeat(2, minmax(0, 320px));
     }
@@ -376,7 +384,7 @@
     }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 578px) {
     .use-case-row {
         grid-template-columns: minmax(220px, 300px) minmax(280px, 1fr);
         height: 120px;
@@ -407,7 +415,7 @@
     }
 }
 
-@media (min-width: 920px) {
+@media (min-width: 1200px) {
     .experience__grid {
         grid-template-columns: repeat(3, minmax(0, 320px));
     }
@@ -417,17 +425,19 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 576px) {
+    .experience-card__title {
+        white-space: nowrap;
+    }
+}
+
+@media (min-width: 1024px) {
     .experience {
         padding-top: 60px;
         padding-bottom: 60px;
         padding-left: 36px;
         padding-right: 36px;
     }
-
-    .experience-card__title {
-        white-space: nowrap;
-    }
 }
 
 @media (min-width: 1200px) {
@@ -436,9 +446,15 @@
         font-size: 48px;
         letter-spacing: var(--ls-48);
     }
+
+    .experience__caption,
+    .use-cases__description {
+        font-size: 18px;
+        letter-spacing: var(--ls-18);
+    }
 }
 
-@media (min-width: 1295px) {
+@media (min-width: 1201px) {
     .use-cases {
         padding: 60px 64px;
     }

src/styles/trust.css

@@ -1,273 +1,328 @@
 .trust {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 60px 16px;
-  background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 60px 16px;
+    background: #fff;
 }
 
 .trust__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  max-width: 1280px;
-  gap: 40px;
-  margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    max-width: 1280px;
+    gap: 40px;
+    margin: 0 auto;
 }
 
 .trust__header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: 24px;
-  overflow: clip;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 24px;
+    overflow: clip;
 }
 
 .trust__title {
-  width: 100%;
-  margin: 0;
-  font-size: 28px;
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: var(--ls-28);
-  color: #1a1a1a;
+    width: 100%;
+    margin: 0;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: var(--ls-28);
+    color: #1a1a1a;
 }
 
 .trust__description {
-  width: 100%;
-  margin: 0;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: var(--ls-18);
-  color: #7a726d;
+    width: 100%;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: var(--ls-15);
+    color: #7a726d;
 }
 
 .trust__grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  gap: 32px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    gap: 32px;
 }
 
 .trust-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  min-width: 0;
-  gap: 16px;
-  padding: 24px;
-  border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 0;
+    gap: 16px;
+    padding: 24px;
+    border-radius: 30px;
 }
 
 .trust-card__icon-frame {
-  position: relative;
-  flex-shrink: 0;
-  width: 128px;
-  height: 128px;
+    position: relative;
+    flex-shrink: 0;
+    width: 128px;
+    height: 128px;
 }
 
 .trust-card__icon-crop {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
 }
 
 .trust-card__icon {
-  position: absolute;
-  max-width: none;
+    position: absolute;
+    max-width: none;
 }
 
 .trust-card__icon--one {
-  top: 7.04%;
-  left: -31.48%;
-  width: 312.73%;
-  height: 174.55%;
+    top: 7.04%;
+    left: -31.48%;
+    width: 312.73%;
+    height: 174.55%;
 }
 
 .trust-card__icon--two {
-  top: 3.1%;
-  left: -164.72%;
-  width: 335.61%;
-  height: 187.32%;
+    top: 3.1%;
+    left: -164.72%;
+    width: 335.61%;
+    height: 187.32%;
 }
 
 .trust-card__icon--three {
-  top: -105.62%;
-  left: -187.93%;
-  width: 378.86%;
-  height: 211.46%;
+    top: -105.62%;
+    left: -187.93%;
+    width: 378.86%;
+    height: 211.46%;
 }
 
 .trust-card__icon--four {
-  top: 0;
-  left: 4.14%;
-  width: 100%;
-  height: 100%;
+    top: 0;
+    left: 4.14%;
+    width: 100%;
+    height: 100%;
 }
 
 .trust-card__copy {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 8px;
 }
 
 .trust-card__title {
-  width: 100%;
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  letter-spacing: var(--ls-16);
-  color: #0d0d0d;
+    width: 100%;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 22px;
+    letter-spacing: var(--ls-16);
+    color: #0d0d0d;
 }
 
 .trust-card__description {
-  width: 100%;
-  margin: 0;
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: var(--ls-15);
-  color: #7a726d;
+    width: 100%;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: var(--ls-15);
+    color: #7a726d;
 }
 
 .trust__divider {
-  position: relative;
-  display: none; /* shown only in desktop flex row via 1023px breakpoint */
-  flex-shrink: 0;
-  width: 0;
-  height: 118px;
+    position: relative;
+    display: none; /* shown only in desktop flex row via 1023px breakpoint */
+    flex-shrink: 0;
+    width: 0;
+    height: 118px;
 }
 
 .trust__divider-frame {
-  position: absolute;
-  inset: 0 -0.5px;
+    position: absolute;
+    inset: 0 -0.5px;
 }
 
 .trust__divider-image {
-  display: block;
-  width: 100%;
-  max-width: none;
-  height: 100%;
+    display: block;
+    width: 100%;
+    max-width: none;
+    height: 100%;
 }
 
-@media (max-width: 1022px) {
-  .trust-card__copy {
-    align-items: center;
-    text-align: center;
-  }
+@media (max-width: 1023px) {
+    .trust-card__copy {
+        align-items: center;
+        text-align: center;
+    }
 
-  .trust-card__title,
-  .trust-card__description {
-    text-align: center;
-  }
+    .trust-card__title,
+    .trust-card__description {
+        text-align: center;
+    }
 }
 
 @media (min-width: 440px) {
-  .trust {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
+    .trust {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
 
-  .trust__title {
-    font-size: 32px;
-    letter-spacing: var(--ls-32);
-  }
+    .trust__title {
+        font-size: 32px;
+        letter-spacing: var(--ls-32);
+    }
 }
 
 @media (min-width: 576px) {
-  .trust {
-    padding-left: 28px;
-    padding-right: 28px;
-  }
+    .trust {
+        padding-left: 24px;
+        padding-right: 24px;
+    }
 
-  .trust__title {
-    font-size: 36px;
-    letter-spacing: var(--ls-36);
-  }
+    .trust__title {
+        font-size: 36px;
+        letter-spacing: var(--ls-36);
+    }
 }
 
 @media (min-width: 768px) {
-  .trust {
-    padding-left: 36px;
-    padding-right: 36px;
-  }
+    .trust {
+        padding-left: 36px;
+        padding-right: 36px;
+    }
 
-  .trust__title {
-    font-size: 42px;
-    letter-spacing: var(--ls-42);
-  }
+    .trust__title {
+        font-size: 42px;
+        letter-spacing: var(--ls-42);
+    }
 
-  .trust__grid {
-    position: relative;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+    .trust__grid {
+        position: relative;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
 }
 
-@media (min-width: 768px) and (max-width: 1022px) {
-  .trust__grid > .trust-card:nth-child(1),
-  .trust__grid > .trust-card:nth-child(5) {
-    position: relative;
-  }
+@media (min-width: 768px) and (max-width: 1023px) {
+    .trust__grid > .trust-card:nth-child(1),
+    .trust__grid > .trust-card:nth-child(5) {
+        position: relative;
+    }
 
-  .trust__grid > .trust-card:nth-child(1)::after,
-  .trust__grid > .trust-card:nth-child(5)::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: -16px;
-    transform: translateY(-50%);
-    width: 0;
-    height: 118px;
-    border-left: 1px solid rgba(240, 132, 88, 0.5);
-  }
+    .trust__grid > .trust-card:nth-child(1)::after,
+    .trust__grid > .trust-card:nth-child(5)::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: -16px;
+        transform: translateY(-50%);
+        width: 0;
+        height: 118px;
+        border-left: 1px solid rgba(240, 132, 88, 0.5);
+    }
 }
 
-@media (min-width: 1023px) {
-  .trust {
-    padding-top: 60px;
-    padding-bottom: 60px;
-    padding-left: 36px;
-    padding-right: 36px;
-  }
+@media (min-width: 1024px) {
+    .trust {
+        padding-top: 60px;
+        padding-bottom: 60px;
+        padding-left: 28px;
+        padding-right: 28px;
+    }
 
-  .trust__grid {
-    display: flex;
-    gap: 24px;
-  }
+    .trust__grid {
+        display: flex;
+        gap: 14px;
+    }
 
-  .trust-card {
-    flex: 1;
-  }
+    .trust-card {
+        flex: 1;
+        padding: 16px 8px;
+    }
 
-  .trust__divider {
-    display: block;
-  }
+    .trust-card__icon-frame {
+        width: 112px;
+        height: 112px;
+    }
+
+    .trust-card__copy {
+        align-items: center;
+        text-align: center;
+    }
+
+    .trust-card__title {
+        font-size: 15px;
+        line-height: 20px;
+        letter-spacing: var(--ls-15);
+        text-align: center;
+    }
+
+    .trust-card__description {
+        font-size: 14px;
+        line-height: 1.45;
+        letter-spacing: var(--ls-14);
+        text-align: center;
+    }
+
+    .trust__divider {
+        display: block;
+    }
 }
 
 @media (min-width: 1200px) {
-  .trust__title {
-    font-size: 48px;
-    letter-spacing: var(--ls-48);
-  }
+    .trust__title {
+        font-size: 48px;
+        letter-spacing: var(--ls-48);
+    }
+
+    .trust__description {
+        font-size: 18px;
+        letter-spacing: var(--ls-18);
+    }
+
+    .trust__grid {
+        gap: 24px;
+    }
+
+    .trust-card {
+        padding: 24px;
+    }
+
+    .trust-card__icon-frame {
+        width: 128px;
+        height: 128px;
+    }
+
+    .trust-card__title {
+        font-size: 16px;
+        line-height: 22px;
+        letter-spacing: var(--ls-16);
+    }
+
+    .trust-card__description {
+        font-size: 15px;
+        line-height: 1.5;
+        letter-spacing: var(--ls-15);
+    }
 }
 
 @media (min-width: 1376px) {
-  .trust {
-    padding-top: 120px;
-    padding-bottom: 120px;
-    padding-left: 120px;
-    padding-right: 120px;
-  }
+    .trust {
+        padding-top: 120px;
+        padding-bottom: 120px;
+        padding-left: 120px;
+        padding-right: 120px;
+    }
 }

src/styles/why.css

@@ -78,18 +78,25 @@
 }
 
 .why__description {
-    width: 100%;
-    margin: 0;
-    font-size: 18px;
+  width: 100%;
+  margin: 0;
+  font-size: 15px;
     font-weight: 400;
     line-height: 1.5;
+    letter-spacing: var(--ls-15);
+  color: #7a726d;
+}
+
+@media (min-width: 1200px) {
+  .why__description {
+    font-size: 18px;
     letter-spacing: var(--ls-18);
-    color: #7a726d;
+  }
 }
 
 .why__illustration {
-    position: relative;
-    display: block;
+  position: relative;
+  display: block;
     order: 1;
     align-self: center;
     flex-shrink: 0;
@@ -119,8 +126,8 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    gap: 24px;
-    padding: 36px;
+    gap: 20px;
+    padding: 20px 16px;
     overflow: clip;
     background: #fef0eb;
     border: 1px solid #e8e4de;
@@ -132,8 +139,8 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 80px;
-    height: 80px;
+    width: 60px;
+    height: 60px;
     overflow: clip;
     background: #f08458;
     border-radius: 9999px;
@@ -143,19 +150,24 @@
     display: block;
 }
 
-.why-card__icon--square {
-    width: 44px;
-    height: 44px;
+.why-card__icon--simple {
+    width: 33.001px;
+    height: 32.973px;
 }
 
 .why-card__icon--familiar {
-    width: 38px;
-    height: 40px;
+    width: 28.5px;
+    height: 30px;
+}
+
+.why-card__icon--connected {
+    width: 33px;
+    height: 32.936px;
 }
 
 .why-card__icon--modern {
-    width: 24px;
-    height: 44px;
+    width: 18.125px;
+    height: 33px;
 }
 
 .why-card__copy {
@@ -194,6 +206,35 @@
         padding-right: 20px;
     }
 
+    .why-card {
+        gap: 24px;
+    }
+
+    .why-card__icon-frame {
+        width: 80px;
+        height: 80px;
+    }
+
+    .why-card__icon--simple {
+        width: 44.001px;
+        height: 43.964px;
+    }
+
+    .why-card__icon--familiar {
+        width: 38px;
+        height: 40px;
+    }
+
+    .why-card__icon--connected {
+        width: 44px;
+        height: 43.914px;
+    }
+
+    .why-card__icon--modern {
+        width: 24.168px;
+        height: 44px;
+    }
+
     .why__title {
         font-size: 32px;
         letter-spacing: var(--ls-32);
@@ -202,8 +243,8 @@
 
 @media (min-width: 576px) {
     .why {
-        padding-left: 28px;
-        padding-right: 28px;
+        padding-left: 24px;
+        padding-right: 24px;
     }
 
     .why__title {
@@ -223,11 +264,8 @@
         letter-spacing: var(--ls-42);
     }
 
-    .why__grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
     .why-card {
+        padding: 36px;
         min-height: 152px;
     }
 
@@ -237,7 +275,7 @@
     }
 }
 
-@media (min-width: 1023px) {
+@media (min-width: 1024px) {
     .why {
         padding-top: 60px;
         padding-bottom: 60px;
@@ -245,6 +283,10 @@
         padding-right: 36px;
     }
 
+    .why__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
     .why__intro {
         flex-direction: row;
     }