fix(docs): Update Readme.md

Update Base.astro with new js
fix(style): Change IOS buttons style
2026-05-21 10:19:30 +08:00 · 2026-05-21 10:15:47 +08:00 · 2026-05-20 16:17:12 +08:00 · 2026-05-20 06:37:35 +00:00 · 2026-05-20 11:36:04 +08:00 · 2026-05-19 03:31:02 +00:00
9 changed files with 1340 additions and 227 deletions
--- a/README.md
+++ b/README.md
@@ -94,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)
--- a/public/site-links-client.js
+++ b/public/site-links-client.js
@@ -56,6 +56,7 @@
  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;
@@ -185,8 +186,7 @@
      MODAL_ACTIONS +
      '">' +
      '<button type="button" data-app-soon-close style="' +
-      BTN +
-      BTN_PRIMARY +
+      BTN_ORANGE +
      '"></button>' +
      '</div></div>';
    document.body.appendChild(wrap);
--- a/src/components/DownloadCTA.astro
+++ b/src/components/DownloadCTA.astro
@@ -67,11 +67,7 @@ const siteLinksJson = JSON.stringify(siteLinks);
          </div>
        </a>
      </div>
-      <p
-        id="site-links-meta"
-        class="download-cta__links-meta"
-        hidden
-      />
+
    </div>

    <div class="download-cta__phone">
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -27,7 +27,7 @@ const {
  </head>
  <body class="bg-surface font-sans overflow-x-hidden">
    <slot />
-    <script src="/site-links-client.js" defer></script>
+    <script src="/site-links-client.js?v=2" defer></script>
    <script>
      (() => {
        const header = document.getElementById('site-header');
--- a/src/styles/download.css
+++ b/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%;
 }

@@ -150,8 +150,8 @@ a.store-badge {
 }

 .store-badge--ios {
-    background: #383838;
-    border: 1px solid #141414;
+    background: #121212F0;
+    border: 1px solid #2C2C2C;
 }

 .store-badge__icon {
@@ -168,7 +168,7 @@ a.store-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
-    background: #151515;
+    background: #323232;
    border-radius: 12px;
 }

@@ -211,7 +211,7 @@ a.store-badge {
 }

 .store-badge--ios .store-badge__platform {
-    color: #ccc;
+    color: #949494;
 }

 .store-badge__label {
@@ -232,7 +232,7 @@ a.store-badge {
    height: 292px;
 }

-@media (min-width: 577px) {
+@media (min-width: 578px) {
    .download-cta__phone {
        width: min(418px, calc(100vw - 32px));
        height: auto;
@@ -301,7 +301,7 @@ a.store-badge {

    .download-cta__inner {
        flex-direction: row;
-        gap: 0;
+        gap: 16px;
        padding: 0 24px;
    }

--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -92,7 +92,7 @@
 }

 .experience-card__image--one {
-    top: -86.50%;
+    top: -86.5%;
    left: 0;
    width: 100%;
    height: 298.5%;
@@ -316,7 +316,7 @@
    color: #7a726d;
 }

-@media (max-width: 640px) {
+@media (max-width: 578px) {
    .use-cases__rows {
        gap: 24px;
        overflow: visible;
@@ -368,7 +368,7 @@
    }
 }

-@media (min-width: 1024px) {
+@media (min-width: 578px) {
    .experience__grid {
        grid-template-columns: repeat(2, minmax(0, 320px));
    }
@@ -384,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;
@@ -425,6 +425,12 @@
    }
 }

+@media (min-width: 576px) {
+    .experience-card__title {
+        white-space: nowrap;
+    }
+}
+
@media (min-width: 1024px) {
    .experience {
        padding-top: 60px;
@@ -432,10 +438,6 @@
        padding-left: 36px;
        padding-right: 36px;
    }
-
-    .experience-card__title {
-        white-space: nowrap;
-    }
 }

@media (min-width: 1200px) {
@@ -452,7 +454,7 @@
    }
 }

-@media (min-width: 1295px) {
+@media (min-width: 1201px) {
    .use-cases {
        padding: 60px 64px;
    }
--- a/src/styles/trust.css
+++ b/src/styles/trust.css
@@ -1,278 +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: 15px;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: var(--ls-15);
-  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: 1024px) {
-  .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: 24px;
-    padding-right: 24px;
-  }
+    .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: 1024px) {
-  .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: 1024px) {
-  .trust {
-    padding-top: 60px;
-    padding-bottom: 60px;
-    padding-left: 36px;
-    padding-right: 36px;
-  }
+    .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__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;
+    }
 }
--- a/src/styles/why.css
+++ b/src/styles/why.css
@@ -264,10 +264,6 @@
        letter-spacing: var(--ls-42);
    }

-    .why__grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
    .why-card {
        padding: 36px;
        min-height: 152px;
@@ -287,6 +283,10 @@
        padding-right: 36px;
    }

+    .why__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
    .why__intro {
        flex-direction: row;
    }
Author	SHA1	Message	Date
SeekingGamer	f3ee755f47	fix(docs): Update Readme.md All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 29s Details	2026-05-21 10:19:30 +08:00
SeekingGamer	f8d97f46c5	Update Base.astro with new js All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 31s Details	2026-05-21 10:15:47 +08:00
SeekingGamer	edec5370b6	fix(style): Change IOS buttons style Some checks failed Deploy to talkpro / build-and-sync (push) Has been cancelled Details	2026-05-20 16:17:12 +08:00
Finn	08699e6d0d	Merge pull request 'fix(style): fix gaps and pop up screen ui' (#13 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 35s Details Reviewed-on: #13	2026-05-20 06:37:35 +00:00
SeekingGamer	74793fbc11	fix(style): fix gaps and pop up screen ui	2026-05-20 11:36:04 +08:00
Finn	1de7b09ceb	Merge pull request 'fix(docs): Update Translation ts' (#12 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 28s Details Reviewed-on: #12	2026-05-19 03:31:02 +00:00
SeekingGamer	a8229e543e	fix(docs): Update Translation ts	2026-05-19 11:30:10 +08:00
Finn	b34e4b8538	Merge pull request 'fix(style):Removed the site link in Downloads astro' (#11 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 29s Details Reviewed-on: #11	2026-05-19 03:00:49 +00:00
SeekingGamer	37055ca74a	fix(style):Removed the site link in Downloads astro	2026-05-19 10:59:27 +08:00
Finn	9f58001a56	Merge pull request 'finn-staging' (#10 ) from finn-staging into main All checks were successful Deploy to talkpro / build-and-sync (push) Successful in 33s Details Reviewed-on: #10	2026-05-19 02:55:57 +00:00
SeekingGamer	2a2d5fb9e5	fix(feat): Change styling for responsive layout	2026-05-19 10:51:38 +08:00
SeekingGamer	0220aa5ff8	fix(style): compact reliability row at 1024	2026-05-18 16:03:09 +08:00
SeekingGamer	7f7b44415e	fix(style): keep reliability grid at tablet widths	2026-05-18 15:58:05 +08:00