diff --git a/public/assets/app-store.svg b/public/assets/app-store.svg new file mode 100644 index 0000000000..7f44b55d58 --- /dev/null +++ b/public/assets/app-store.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/assets/multipass.png b/public/assets/multipass.png new file mode 100644 index 0000000000..1cf2319c08 Binary files /dev/null and b/public/assets/multipass.png differ diff --git a/public/assets/play-store.svg b/public/assets/play-store.svg new file mode 100644 index 0000000000..1376505925 --- /dev/null +++ b/public/assets/play-store.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Multipass/DownloadSection.tsx b/src/components/Multipass/DownloadSection.tsx new file mode 100644 index 0000000000..78550540ff --- /dev/null +++ b/src/components/Multipass/DownloadSection.tsx @@ -0,0 +1,64 @@ +import styled from '@emotion/styled' +import React from 'react' + +export const DownloadSection: React.FC = () => { + return ( + +

+ To claim your Multipass, download the Operator Wallet. +

+
+ Download on App Store + Get it on Google Play +
+ + ) +} + +const StyledDownloadSection = styled.section` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 48px; + + @media (max-width: 991px) { + margin-top: 40px; + } + + .download-instruction { + color: #fff; + text-align: center; + letter-spacing: 0.14px; + font-size: 14px; + line-height: 1; + } + + .download-buttons { + display: flex; + margin-top: 24px; + align-items: center; + gap: 8px; + } + + .app-store-button { + aspect-ratio: 3.31; + object-fit: contain; + width: 182px; + } + + .play-store-button { + aspect-ratio: 3.34; + object-fit: contain; + width: 184px; + } +` diff --git a/src/components/Multipass/MultipassHeader.tsx b/src/components/Multipass/MultipassHeader.tsx new file mode 100644 index 0000000000..6d52967961 --- /dev/null +++ b/src/components/Multipass/MultipassHeader.tsx @@ -0,0 +1,44 @@ +import styled from '@emotion/styled' +import React from 'react' + +export const MultipassHeader: React.FC = () => { + return ( + +
+
Coming Soon
+
+100 XP
+
+

Multipass

+ + ) +} + +const Container = styled.header` + display: flex; + flex-direction: column; + align-items: center; + + .row { + display: flex; + gap: 8px; + margin-bottom: 16px; + } + + .header-title { + color: #fff; + font-size: 40px; + line-height: 1.2; + letter-spacing: 0.4px; + } + + .xp-badge { + border-radius: 99px; + background-color: rgba(50, 4, 48, 1); + margin-top: 12px; + padding: 4px 12px; + font-size: 14px; + color: #f29ae9; + letter-spacing: 0.14px; + line-height: 1; + } +` diff --git a/src/containers/Multipass/MultipassContainer.tsx b/src/containers/Multipass/MultipassContainer.tsx new file mode 100644 index 0000000000..8fee303562 --- /dev/null +++ b/src/containers/Multipass/MultipassContainer.tsx @@ -0,0 +1,87 @@ +// import { DownloadSection } from '@/components/Multipass/DownloadSection' +import { MultipassHeader } from '@/components/Multipass/MultipassHeader' +import styled from '@emotion/styled' +import React from 'react' + +const MultipassClaimPage: React.FC = () => { + return ( + +
+ +
+

+ As a valued member of our decentralized digital society, we're + excited to offer you the chance to secure your assets with a + state-of-the-art hardware wallet, built on{' '} + + Keycard + + . +

+ {/* */} +
+ Multipass device +
+ + ) +} + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + padding-top: 80px; + + .claim-container { + width: 609px; + max-width: 100%; + } + + .claim-content { + display: flex; + width: 506px; + max-width: 100%; + flex-direction: column; + align-items: center; + margin: 0 auto; + + a { + color: white; + text-decoration: none; + } + } + + .claim-description { + color: #fff; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.14px; + margin-top: 32px; + text-align: center; + + @media (max-width: 991px) { + max-width: 100%; + } + } +` + +const Image = styled.img` + aspect-ratio: 1.58; + object-fit: contain; + width: 100%; + border-radius: 10px; + box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.15); + margin-top: 110px; + + @media (max-width: 991px) { + max-width: 100%; + margin-top: 80px; + } +` + +export default MultipassClaimPage diff --git a/src/containers/Multipass/index.ts b/src/containers/Multipass/index.ts new file mode 100644 index 0000000000..49ea2e0869 --- /dev/null +++ b/src/containers/Multipass/index.ts @@ -0,0 +1 @@ +export { default as MultipassContainer } from './MultipassContainer' diff --git a/src/pages/multipass.tsx b/src/pages/multipass.tsx new file mode 100644 index 0000000000..1759a74744 --- /dev/null +++ b/src/pages/multipass.tsx @@ -0,0 +1,13 @@ +import { SEO } from '@/components/SEO' +import MultipassContainer from '@/containers/Multipass/MultipassContainer' + +type PageProps = {} + +export default function MultipassPage(props: PageProps) { + return ( + <> + + + + ) +} diff --git a/utils/.placeholder b/utils/.placeholder deleted file mode 100644 index e69de29bb2..0000000000