fix(docs): Update Readme.md

Reviewed-on: #13

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)

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);

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,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -7,11 +8,11 @@ export interface Props {
 }
 
 const { t, siteLinks } = 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 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);
 ---
@@ -66,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">

src/components/Experience.astro

@@ -1,4 +1,5 @@
 ---
+import { assetPath } from '../assets'
 import type { Translations } from '../i18n/translations'
 
 export interface Props {
@@ -6,7 +7,11 @@ 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']
 ---
 

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,10 @@ 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";
 ---
 

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,13 +7,14 @@ 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 illustrationVideo = assetPath("/assets/why-illustration.mp4")
 const iconClasses = ['why-card__icon--simple', 'why-card__icon--familiar', 'why-card__icon--connected', 'why-card__icon--modern']
 ---
 
@@ -49,7 +51,7 @@ const iconClasses = ['why-card__icon--simple', '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,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');

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;
     }
 

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;
     }

src/styles/trust.css

@@ -162,7 +162,7 @@
     height: 100%;
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1023px) {
     .trust-card__copy {
         align-items: center;
         text-align: center;
@@ -215,7 +215,7 @@
     }
 }
 
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1023px) {
     .trust__grid > .trust-card:nth-child(1),
     .trust__grid > .trust-card:nth-child(5) {
         position: relative;
@@ -223,7 +223,7 @@
 
     .trust__grid > .trust-card:nth-child(1)::after,
     .trust__grid > .trust-card:nth-child(5)::after {
-    content: '';
+        content: "";
         position: absolute;
         top: 50%;
         right: -16px;
@@ -238,17 +238,42 @@
     .trust {
         padding-top: 60px;
         padding-bottom: 60px;
-    padding-left: 36px;
-    padding-right: 36px;
+        padding-left: 28px;
+        padding-right: 28px;
     }
 
     .trust__grid {
         display: flex;
-    gap: 24px;
+        gap: 14px;
     }
 
     .trust-card {
         flex: 1;
+        padding: 16px 8px;
+    }
+
+    .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 {
@@ -266,6 +291,31 @@
         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) {

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;
     }