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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
@ -45,33 +52,34 @@
|
||||
}
|
||||
|
||||
.linkHolder {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-top: 36px;
|
||||
max-width: 598px;
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 290px;
|
||||
gap: 16px;
|
||||
padding-top: 12px;
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
width: 243px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
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;
|
||||
|
@ -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,15 +99,10 @@ const Downloads: Component = () => {
|
||||
|
||||
<PageCaption title={intl.formatMessage(t.title)} />
|
||||
|
||||
<div class={styles.downloadsContent}>
|
||||
|
||||
<div class={styles.promoHolder}>
|
||||
<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'
|
||||
/>
|
||||
<img src={primalDownloads} />
|
||||
</div>
|
||||
|
||||
<div class={styles.linkHolder}>
|
||||
@ -120,12 +117,7 @@ const Downloads: Component = () => {
|
||||
|
||||
<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>
|
||||
{displayDate(iosRD).toLowerCase()} | Build {iosVersion}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -147,12 +139,7 @@ const Downloads: Component = () => {
|
||||
|
||||
<div class={styles.buidDetails}>
|
||||
<div>
|
||||
<div>{intl.formatMessage(t.released)}:</div>
|
||||
<div>{intl.formatMessage(t.build)}:</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{displayDate(andRD).toLowerCase()}</div>
|
||||
<div>{andVersion}</div>
|
||||
{displayDate(andRD).toLowerCase()} | Build {andVersion}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -174,6 +161,7 @@ const Downloads: Component = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user