mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
New look for the downloads page
This commit is contained in:
parent
efe1e690f2
commit
fb9e2838a1
@ -27,6 +27,15 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.downloadsContent {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid var(--devider);
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.promoHolder {
|
.promoHolder {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -34,9 +43,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
width: 300px;
|
||||||
border-block: 1px solid var(--devider);
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
>video {
|
>video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -46,32 +53,33 @@
|
|||||||
|
|
||||||
.linkHolder {
|
.linkHolder {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
justify-content: center;
|
||||||
padding-top: 36px;
|
align-items: center;
|
||||||
max-width: 598px;
|
gap: 16px;
|
||||||
|
padding-top: 12px;
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 243px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 290px;
|
padding: 20px 28px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: var(--background-input);
|
||||||
}
|
}
|
||||||
|
|
||||||
.appStore {
|
.appStore {
|
||||||
width: 308px;
|
|
||||||
background-color: var(--background-card);
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
|
|
||||||
.desktopCTA {
|
.desktopCTA {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-bottom: 9px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buidDetails {
|
.buidDetails {
|
||||||
@ -81,7 +89,7 @@
|
|||||||
color: var(--text-tertiary-2);
|
color: var(--text-tertiary-2);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 18px;
|
line-height: 14px;
|
||||||
|
|
||||||
>div:first-child {
|
>div:first-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -105,8 +113,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.playStore {
|
.playStore {
|
||||||
width: 308px;
|
|
||||||
background-color: var(--background-card);
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
.playstoreLink {
|
.playstoreLink {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
@ -122,10 +128,9 @@
|
|||||||
.desktopCTA {
|
.desktopCTA {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
font-weight: 400;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-bottom: 9px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.buidDetails {
|
.buidDetails {
|
||||||
@ -135,7 +140,7 @@
|
|||||||
color: var(--text-tertiary-2);
|
color: var(--text-tertiary-2);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 18px;
|
line-height: 14px;
|
||||||
|
|
||||||
>div:first-child {
|
>div:first-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -204,6 +209,11 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.downloadsContent {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.linkHolder {
|
.linkHolder {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -9,6 +9,8 @@ import playstoreImg from '../assets/images/playstore_download.svg';
|
|||||||
import gitHubLight from '../assets/icons/github_light.svg';
|
import gitHubLight from '../assets/icons/github_light.svg';
|
||||||
import gitHubDark from '../assets/icons/github.svg';
|
import gitHubDark from '../assets/icons/github.svg';
|
||||||
|
|
||||||
|
import primalDownloads from '../assets/images/primal_downloads.png';
|
||||||
|
|
||||||
import styles from './Downloads.module.scss';
|
import styles from './Downloads.module.scss';
|
||||||
import { downloads as t } from '../translations';
|
import { downloads as t } from '../translations';
|
||||||
import { useIntl } from '@cookbook/solid-intl';
|
import { useIntl } from '@cookbook/solid-intl';
|
||||||
@ -97,80 +99,66 @@ const Downloads: Component = () => {
|
|||||||
|
|
||||||
<PageCaption title={intl.formatMessage(t.title)} />
|
<PageCaption title={intl.formatMessage(t.title)} />
|
||||||
|
|
||||||
<div class={styles.promoHolder}>
|
<div class={styles.downloadsContent}>
|
||||||
<video
|
|
||||||
controls={true}
|
|
||||||
muted={true}
|
|
||||||
autoplay={true}
|
|
||||||
playsinline={true}
|
|
||||||
poster='/public/primal_mobile_poster.png'
|
|
||||||
src='https://primal.b-cdn.net/media-cache?s=o&a=1&u=https%3A%2F%2Fmedia.primal.net%2Fuploads%2F9%2Fd6%2F91%2F9d691046b2b73d13e48ed08bf4b3fd64560bac40e5e6a1e4f65fd7d40cfcedee.mp4'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={styles.linkHolder}>
|
<div class={styles.promoHolder}>
|
||||||
<div class={styles.appStore}>
|
<img src={primalDownloads} />
|
||||||
<div class={styles.desktopCTA}>{intl.formatMessage(t.callToActionIOSTitle)}</div>
|
|
||||||
|
|
||||||
<div class={styles.callToActionIOS}>
|
|
||||||
<div class={styles.ctaTitle}>
|
|
||||||
{intl.formatMessage(t.callToActionIOSTitle)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={styles.buidDetails}>
|
|
||||||
<div>
|
|
||||||
<div>{intl.formatMessage(t.released)}:</div>
|
|
||||||
<div>{intl.formatMessage(t.build)}:</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>{displayDate(iosRD).toLowerCase()}</div>
|
|
||||||
<div>{iosVersion}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href={appStoreLink}
|
|
||||||
target='_blank'
|
|
||||||
>
|
|
||||||
<img src={appstoreImg} />
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class={styles.playStore}>
|
|
||||||
<div class={styles.desktopCTA}>{intl.formatMessage(t.callToActionAndroidTitle)}</div>
|
|
||||||
|
|
||||||
<div class={styles.callToActionAndroid}>
|
<div class={styles.linkHolder}>
|
||||||
<div class={styles.ctaTitle}>
|
<div class={styles.appStore}>
|
||||||
{intl.formatMessage(t.callToActionAndroidTitle)}
|
<div class={styles.desktopCTA}>{intl.formatMessage(t.callToActionIOSTitle)}</div>
|
||||||
|
|
||||||
|
<div class={styles.callToActionIOS}>
|
||||||
|
<div class={styles.ctaTitle}>
|
||||||
|
{intl.formatMessage(t.callToActionIOSTitle)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class={styles.buidDetails}>
|
||||||
|
<div>
|
||||||
|
{displayDate(iosRD).toLowerCase()} | Build {iosVersion}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={appStoreLink}
|
||||||
|
target='_blank'
|
||||||
|
>
|
||||||
|
<img src={appstoreImg} />
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class={styles.playStore}>
|
||||||
|
<div class={styles.desktopCTA}>{intl.formatMessage(t.callToActionAndroidTitle)}</div>
|
||||||
|
|
||||||
<div class={styles.buidDetails}>
|
<div class={styles.callToActionAndroid}>
|
||||||
<div>
|
<div class={styles.ctaTitle}>
|
||||||
<div>{intl.formatMessage(t.released)}:</div>
|
{intl.formatMessage(t.callToActionAndroidTitle)}
|
||||||
<div>{intl.formatMessage(t.build)}:</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div>{displayDate(andRD).toLowerCase()}</div>
|
<div class={styles.buidDetails}>
|
||||||
<div>{andVersion}</div>
|
<div>
|
||||||
|
{displayDate(andRD).toLowerCase()} | Build {andVersion}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={playstoreLink}
|
||||||
|
target='_blank'
|
||||||
|
class={styles.playstoreLink}
|
||||||
|
>
|
||||||
|
<img src={playstoreImg} />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={apkLink}
|
||||||
|
target='_blank'
|
||||||
|
class={styles.apkLink}
|
||||||
|
>
|
||||||
|
{intl.formatMessage(t.getApk)}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a
|
|
||||||
href={playstoreLink}
|
|
||||||
target='_blank'
|
|
||||||
class={styles.playstoreLink}
|
|
||||||
>
|
|
||||||
<img src={playstoreImg} />
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a
|
|
||||||
href={apkLink}
|
|
||||||
target='_blank'
|
|
||||||
class={styles.apkLink}
|
|
||||||
>
|
|
||||||
{intl.formatMessage(t.getApk)}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user