diff --git a/src/pages/Downloads.module.scss b/src/pages/Downloads.module.scss index 95d40ba..04d231e 100644 --- a/src/pages/Downloads.module.scss +++ b/src/pages/Downloads.module.scss @@ -27,6 +27,15 @@ display: none; } +.downloadsContent { + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + border-top: 1px solid var(--devider); + padding-top: 20px; +} + .promoHolder { position: relative; display: flex; @@ -34,9 +43,7 @@ justify-content: center; align-items: center; margin-bottom: 24px; - - border-block: 1px solid var(--devider); - padding: 16px; + width: 300px; >video { width: 100%; @@ -46,32 +53,33 @@ .linkHolder { display: flex; - justify-content: space-between; - align-items: flex-start; - padding-top: 36px; - max-width: 598px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; + padding-top: 12px; >div { display: flex; + width: 243px; flex-direction: column; justify-content: center; align-items: center; - width: 290px; + padding: 20px 28px; + border-radius: 12px; + background-color: var(--background-input); } .appStore { - width: 308px; - background-color: var(--background-card); border-radius: 8px; .desktopCTA { color: var(--text-primary); text-align: center; - font-size: 18px; - font-weight: 400; + font-size: 20px; + font-weight: 600; line-height: 20px; - margin-bottom: 9px; } .buidDetails { @@ -81,7 +89,7 @@ color: var(--text-tertiary-2); font-size: 14px; font-weight: 400; - line-height: 18px; + line-height: 14px; >div:first-child { display: flex; @@ -105,8 +113,6 @@ } .playStore { - width: 308px; - background-color: var(--background-card); border-radius: 8px; .playstoreLink { margin-top: 16px; @@ -122,10 +128,9 @@ .desktopCTA { color: var(--text-primary); text-align: center; - font-size: 18px; - font-weight: 400; + font-size: 20px; + font-weight: 600; line-height: 20px; - margin-bottom: 9px; } .buidDetails { @@ -135,7 +140,7 @@ color: var(--text-tertiary-2); font-size: 14px; font-weight: 400; - line-height: 18px; + line-height: 14px; >div:first-child { display: flex; @@ -204,6 +209,11 @@ display: none; } + .downloadsContent { + flex-direction: column; + align-items: center; + } + .linkHolder { margin-top: 20px; flex-direction: column; diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx index acff6a3..12671d8 100644 --- a/src/pages/Downloads.tsx +++ b/src/pages/Downloads.tsx @@ -9,6 +9,8 @@ import playstoreImg from '../assets/images/playstore_download.svg'; import gitHubLight from '../assets/icons/github_light.svg'; import gitHubDark from '../assets/icons/github.svg'; +import primalDownloads from '../assets/images/primal_downloads.png'; + import styles from './Downloads.module.scss'; import { downloads as t } from '../translations'; import { useIntl } from '@cookbook/solid-intl'; @@ -97,80 +99,66 @@ const Downloads: Component = () => { -
-
+
-
-
-
{intl.formatMessage(t.callToActionIOSTitle)}
- -
-
- {intl.formatMessage(t.callToActionIOSTitle)} -
-
- -
-
-
{intl.formatMessage(t.released)}:
-
{intl.formatMessage(t.build)}:
-
-
-
{displayDate(iosRD).toLowerCase()}
-
{iosVersion}
-
-
- - - - +
+
-
-
{intl.formatMessage(t.callToActionAndroidTitle)}
-
-
- {intl.formatMessage(t.callToActionAndroidTitle)} +
+
+
{intl.formatMessage(t.callToActionIOSTitle)}
+ +
+
+ {intl.formatMessage(t.callToActionIOSTitle)} +
+ +
+
+ {displayDate(iosRD).toLowerCase()} | Build {iosVersion} +
+
+ + + +
+
+
{intl.formatMessage(t.callToActionAndroidTitle)}
-
-
-
{intl.formatMessage(t.released)}:
-
{intl.formatMessage(t.build)}:
+
+
+ {intl.formatMessage(t.callToActionAndroidTitle)} +
-
-
{displayDate(andRD).toLowerCase()}
-
{andVersion}
+ +
+
+ {displayDate(andRD).toLowerCase()} | Build {andVersion} +
+ + + + + + + {intl.formatMessage(t.getApk)} +
- - - - - - - {intl.formatMessage(t.getApk)} -