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

src/components/Hero.astro

@@ -11,6 +11,7 @@ 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 defaultApkHref = "https://talkspro.xyz/download";
 ---
 
 <section id="hero" class="hero">
@@ -39,7 +40,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 +54,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>