1

src/components/DownloadCTA.astro

@@ -3,14 +3,17 @@ import type { Translations } from '../i18n/translations'
 
 export interface Props {
   t: Translations['download']
+  siteLinks: Translations['siteLinks']
 }
 
-const { t } = Astro.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 defaultApkHref = "https://talkspro.xyz/download";
+const siteLinksJson = JSON.stringify(siteLinks);
 ---
 
 <section id="download" class="download-cta">
@@ -35,7 +38,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 +51,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 +64,13 @@ 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>
+      <p
+        id="site-links-meta"
+        class="download-cta__links-meta"
+        hidden
+      />
     </div>
 
     <div class="download-cta__phone">
@@ -63,3 +80,5 @@ const phoneArt = "/assets/cta-phone-art.png";
     </div>
   </div>
 </section>
+
+<script type="application/json" id="site-links-i18n" set:html={siteLinksJson} />