New sections (#444)

* changes

* remove unused code

* fix
This commit is contained in:
Jakub Kotula 2023-06-30 18:31:06 +01:00 committed by GitHub
parent 4d3dcc0977
commit f1715cede9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 214 additions and 54 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@ -1,10 +1,17 @@
import { Button, Tag, Text } from '@status-im/components' import { Button, Tag, Text } from '@status-im/components'
import { DownloadIcon, WalletIcon } from '@status-im/icons' import {
CommunitiesIcon,
DownloadIcon,
MessengerIcon,
WalletIcon,
} from '@status-im/icons'
import { cx } from 'class-variance-authority' import { cx } from 'class-variance-authority'
import { GridHero } from './cards' import { GridHero } from './cards'
import type { IconProps } from '@status-im/icons'
import type { StaticImageData } from 'next/image' import type { StaticImageData } from 'next/image'
import type { ComponentType } from 'react'
type Props = { type Props = {
type: 'Communities' | 'Create Community' | 'Wallet' | 'Messenger' type: 'Communities' | 'Create Community' | 'Wallet' | 'Messenger'
@ -16,6 +23,13 @@ type Props = {
dark?: boolean dark?: boolean
} }
const icons: Record<Props['type'], ComponentType<IconProps>> = {
Wallet: WalletIcon,
Communities: CommunitiesIcon,
'Create Community': CommunitiesIcon,
Messenger: MessengerIcon,
}
export const Hero = (props: Props) => { export const Hero = (props: Props) => {
const { type, title, description, color, images, maxWidth, dark } = props const { type, title, description, color, images, maxWidth, dark } = props
@ -30,7 +44,7 @@ export const Hero = (props: Props) => {
<div className="inline-flex"> <div className="inline-flex">
<Tag <Tag
size={32} size={32}
icon={WalletIcon} icon={icons[type]}
color={`$${color}-50`} color={`$${color}-50`}
label={type} label={type}
/> />

View File

@ -1,7 +1,11 @@
// import communityCardImage01 from '@assets/communities/community-card-01.png' import communityCardImage01 from '@assets/communities/community-card-01.png'
// import communityCardImage02 from '@assets/communities/community-card-02.png' import communityCardImage02 from '@assets/communities/community-card-02.png'
// import communityCardImage03 from '@assets/communities/community-card-03.png' import communityCardImage03 from '@assets/communities/community-card-03.png'
// import communityCardImage04 from '@assets/communities/community-card-04.png' import communityCardImage04 from '@assets/communities/community-card-04.png'
import communityCardNote01 from '@assets/communities/community-card-note-01.png'
import communityCardNote02 from '@assets/communities/community-card-note-02.png'
import communityCardNote03 from '@assets/communities/community-card-note-03.png'
import communityCardNote04 from '@assets/communities/community-card-note-04.png'
import featureImage1 from '@assets/communities/feature-01.png' import featureImage1 from '@assets/communities/feature-01.png'
import featureImage2 from '@assets/communities/feature-02.png' import featureImage2 from '@assets/communities/feature-02.png'
import featureImage3 from '@assets/communities/feature-03.png' import featureImage3 from '@assets/communities/feature-03.png'
@ -38,13 +42,11 @@ const CommunitiesPage: Page = () => {
images={[heroImage1, heroImage2, heroImage3, heroImage4]} images={[heroImage1, heroImage2, heroImage3, heroImage4]}
maxWidth={702} maxWidth={702}
/> />
<VideoSection <VideoSection
title="Fully Decentralized Communities" title="Fully Decentralized Communities"
description="Status Waku p2p messaging network is powered by people running Status Desktop - true decentralisation." description="Status Waku p2p messaging network is powered by people running Status Desktop - true decentralisation."
image={{ ...illustrationMain, width: 765, height: 725 }} image={{ ...illustrationMain, width: 765, height: 725 }}
/> />
<div className="pb-12 lg:pb-20"> <div className="pb-12 lg:pb-20">
<Section <Section
icon="skull" icon="skull"
@ -69,26 +71,92 @@ const CommunitiesPage: Page = () => {
color="turquoise" color="turquoise"
/> />
</div> </div>
<div className="border-t-[1px] border-dashed border-neutral-80/20" />
<div className="mx-auto max-w-[1200px] pb-60 pt-40"> <div className="container pt-24 lg:pt-40">
<div className="grid gap-4 pb-40"> <div className="grid max-w-[475px] gap-4">
<h2 className="text-64">Your next community</h2> <h2 className="text-40 lg:text-64">Your next community</h2>
<Text size={27}> <Text size={27}>
Explore the metaverse of communities and find your kindred spirits Explore the metaverse of communities and find your kindred spirits
in the Status Community Directory. in the Status&nbsp;Community Directory.
</Text> </Text>
<div className="flex min-w-[1200px] flex-row gap-10 overflow-x-auto">
<Image src={heroImage4} alt="TODO" />
<Image src={heroImage4} alt="TODO" />
<Image src={heroImage4} alt="TODO" />
<Image src={heroImage4} alt="TODO" />
</div>
</div> </div>
</div> </div>
<div className="rounded-[40px] bg-customisation-turquoise/5 py-40"> <div className="gallery">
<div className="gallery-wrapper">
<div className="gallery-inside">
<div className="relative min-h-[230px] min-w-[335px] snap-start">
<Image
src={communityCardImage01}
alt="TODO"
className="relative rounded-2xl shadow-2"
width="335"
height="230"
/>
<Image
src={communityCardNote01}
alt="TODO"
className="absolute left-[130px] top-[205px]"
width="173"
height="162"
/>
</div>
<div className="relative min-h-[230px] min-w-[335px] snap-start">
<Image
src={communityCardImage02}
alt="TODO"
className="relative rounded-2xl shadow-2"
width="335"
height="230"
/>
<Image
src={communityCardNote02}
alt="TODO"
className="absolute left-[55px] top-[-70px]"
width="258"
height="38"
/>
</div>
<div className="relative min-h-[230px] min-w-[335px] snap-start">
<Image
src={communityCardImage03}
alt="TODO"
className="relative rounded-2xl shadow-2"
width="335"
height="230"
/>
<Image
src={communityCardNote03}
alt="TODO"
className="absolute left-[-97px] top-[150px]"
height="166"
width="230"
/>
<Image
src={communityCardNote04}
alt="TODO"
className="absolute left-[120px] top-[-130px]"
height="175"
width="184"
/>
</div>
<div className="relative min-h-[230px] min-w-[335px] snap-start">
<Image
src={communityCardImage04}
alt="TODO"
className="relative rounded-2xl shadow-2"
width="335"
height="230"
/>
</div>
</div>
</div>
</div>
<div className="container rounded-[40px] bg-customisation-turquoise/5 py-40">
<div className="mx-auto max-w-[702px] gap-4 text-center"> <div className="mx-auto max-w-[702px] gap-4 text-center">
<h2 className="pb-4 text-64">A wonderful chat experience</h2> <h2 className="pb-4 text-40 lg:text-64">
A wonderful chat experience
</h2>
<Text size={27}> <Text size={27}>
Give your community a unique look that reflects its passions and Give your community a unique look that reflects its passions and
values. Or just look cool values. Or just look cool

View File

@ -12,6 +12,7 @@ import heroImage1 from '@assets/messenger/hero-01.png'
import heroImage2 from '@assets/messenger/hero-02.png' import heroImage2 from '@assets/messenger/hero-02.png'
import heroImage3 from '@assets/messenger/hero-03.png' import heroImage3 from '@assets/messenger/hero-03.png'
import heroImage4 from '@assets/messenger/hero-04.png' import heroImage4 from '@assets/messenger/hero-04.png'
import identityNote from '@assets/messenger/identity-note.png'
import sectionImage1 from '@assets/messenger/section-01.png' import sectionImage1 from '@assets/messenger/section-01.png'
import sectionImage2 from '@assets/messenger/section-02.png' import sectionImage2 from '@assets/messenger/section-02.png'
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
@ -98,17 +99,21 @@ const MessengerPage: Page = () => {
</div> </div>
</Content> </Content>
<div className="m-auto max-w-[700px] px-16 pb-[352px] pt-[524px] text-center"> <div className="bg-[url('/assets/messenger/illustration-security-01.png')] bg-[length:100%] bg-[center_top_-5rem] bg-no-repeat lg:bg-cover lg:bg-[center_top_-10rem]">
<h2 className="pb-3 text-64 text-white-100"> <div className="bg-[url('/assets/messenger/illustration-security-02.png')] bg-cover bg-[center_bottom_-5rem] bg-no-repeat lg:bg-[center_bottom_-10rem]">
<div className="m-auto max-w-[700px] px-16 pb-40 pt-44 text-center md:pb-[352px] md:pt-[524px]">
<h2 className="pb-3 text-40 text-white-100 md:text-64">
Keep who your friends are private Keep who your friends are private
</h2> </h2>
<Text size={19} color="$white-100"> <Text size={19} color="$white-100">
End to end encryption is important, but it doesnt stop an End to end encryption is important, but it doesnt stop an
eavesdropper knowing who is talking to who. Status metadata privacy eavesdropper knowing who is talking to who. Status metadata
fixes this - it means that even who you message with cant be privacy fixes this - it means that even who you message with cant
surveilled. be surveilled.
</Text> </Text>
</div> </div>
</div>
</div>
<Content> <Content>
<SectionLarge <SectionLarge
@ -166,33 +171,45 @@ const MessengerPage: Page = () => {
</SectionLarge> </SectionLarge>
<div className="py-40"></div> <div className="py-40"></div>
<div> <div className="container justify-center py-12 lg:flex lg:py-20">
<h2 className="text-center text-64"> <div className="relative z-[3]">
<div
className={cx(
'flex flex-col gap-12 lg:flex-row lg:items-center xl:gap-[120px]'
)}
>
<div className="flex flex-1 flex-col justify-start lg:justify-center">
<div className="flex flex-col">
<div className="mb-5 flex flex-col lg:mb-16">
<h2 className="text-left text-40 lg:text-64">
Your assets. Your assets.
<br /> <br />
Your identity. Your identity.
</h2> </h2>
<div className="relative flex pt-1">
<Text size={27}> <Text size={27}>
Showcase some or all of your tokens, memberships and accounts with Showcase some or all of your tokens, memberships and
friends, the world, or keep private. accounts with friends, the world, or keep private.
</Text> </Text>
</div>
<div> <Image
<Text size={13} color="$neutral-40" weight="medium"> src={identityNote}
Preview examples alt="Your identity"
</Text> className="my-6"
height="24"
<div className="flex gap-1"> width="183"
{['blue', 'pink', 'orange', 'green'].map(color => (
<div
key={color}
style={{ ['--bg-color' as string]: color }}
className={`h-[24px] w-[24px] rounded-full bg-[var(--bg-color)]`}
/> />
))}
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-1 justify-center overflow-hidden rounded-[32px]">
<Image src={heroImage2} alt="Your identity" className="mb-4" />
</div>
</div>
</div>
</div>
<SectionDesktopScreenshot <SectionDesktopScreenshot
title="Share your profile" title="Share your profile"
description="Using web URLs that can be posted on Web2 social media. User doesnt have Status? Open in browser." description="Using web URLs that can be posted on Web2 social media. User doesnt have Status? Open in browser."

View File

@ -6,9 +6,69 @@
.container { .container {
@apply mx-auto max-w-[1504px] px-5 lg:px-40; @apply mx-auto max-w-[1504px] px-5 lg:px-40;
} }
.border-dashed-default { .border-dashed-default {
@apply border-dashed border-neutral-80/20; @apply border-dashed border-neutral-80/20;
} }
.gallery {
width: 100%;
display: grid;
padding-bottom: 100px;
grid-template-columns:
[full-start] 1fr
[content-start]
min(1184px, 100% - 40px)
[content-end]
1fr [full-end];
}
.gallery-wrapper {
grid-column: full;
display: grid;
grid-template-columns: inherit;
padding-block: 150px;
overflow-y: hidden;
overflow-x: scroll;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
scroll-padding-left: 40px;
}
.gallery-inside {
grid-column: content;
display: flex;
align-items: center;
gap: 40px;
}
.gallery-inside::after {
content: '';
align-self: stretch;
padding-inline-end: max(20px, (100vw - 1024px) / 2 - 20px);
}
@media (min-width: 1024px) {
.gallery {
grid-template-columns:
[full-start] 1fr
[content-start]
min(1184px, 100% - 320px)
[content-end]
1fr [full-end];
}
.gallery-wrapper {
scroll-padding-left: 295px;
}
.gallery-inside::after {
content: '';
align-self: stretch;
padding-inline-end: max(160px, (100vw - 1184px) / 2 - 160px);
}
}
} }
@keyframes gradient { @keyframes gradient {

View File

@ -69,6 +69,7 @@ module.exports = {
}, },
boxShadow: { boxShadow: {
1: '0px 2px 20px rgba(9, 16, 28, 0.04)', 1: '0px 2px 20px rgba(9, 16, 28, 0.04)',
2: '0px 4px 20px rgba(9, 16, 28, 0.08)',
3: '0px 8px 30px rgba(9, 16, 28, 0.12);', 3: '0px 8px 30px rgba(9, 16, 28, 0.12);',
}, },