mirror of
https://github.com/acid-info/logos-ordinals-dashboard.git
synced 2025-02-14 14:07:45 +00:00
feat: add multipass
This commit is contained in:
jinhojang6
parent
236b791ef4
commit
f17cf6df63
13
public/assets/app-store.svg
Normal file
13
public/assets/app-store.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
BIN
public/assets/multipass.png
Normal file
BIN
public/assets/multipass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
22
public/assets/play-store.svg
Normal file
22
public/assets/play-store.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<svg width="184" height="55" viewBox="0 0 184 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_3367_2873)">
|
||||||
|
<path d="M179.546 0.763916H3.75603C2.09693 0.763916 0.751953 2.13193 0.751953 3.81947V51.1806C0.751953 52.8681 2.09693 54.2361 3.75603 54.2361H179.546C181.205 54.2361 182.55 52.8681 182.55 51.1806V3.81947C182.55 2.13193 181.205 0.763916 179.546 0.763916Z" fill="white" stroke="black" stroke-width="2"/>
|
||||||
|
<path d="M65.8015 14.4039C65.8015 15.4564 65.5429 16.3773 64.8962 17.0351C64.1201 17.8245 63.2147 18.2192 62.0506 18.2192C60.8866 18.2192 59.9811 17.8245 59.2051 17.0351C58.4291 16.2457 58.041 15.3249 58.041 14.1408C58.041 12.9568 58.4291 12.0359 59.2051 11.2465C59.9811 10.4572 60.8866 10.0625 62.0506 10.0625C62.568 10.0625 63.0854 10.194 63.6027 10.4572C64.1201 10.7203 64.5081 10.9834 64.7668 11.3781L64.1201 12.0359C63.6027 11.3781 62.956 11.115 62.0506 11.115C61.2745 11.115 60.4985 11.3781 59.9811 12.0359C59.3344 12.5621 59.0758 13.3515 59.0758 14.2724C59.0758 15.1933 59.3344 15.9826 59.9811 16.5089C60.6278 17.0351 61.2745 17.4298 62.0506 17.4298C62.956 17.4298 63.6027 17.1667 64.2495 16.5089C64.6374 16.1142 64.8962 15.5879 64.8962 14.9302H62.0506V14.0093H65.8015C65.8015 14.0093 65.8015 14.1408 65.8015 14.4039Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M71.7516 11.115H68.2594V13.6146H71.4929V14.5355H68.2594V17.0351H71.7516V17.956H67.2246V10.0625H71.7516V11.115Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M76.021 17.956H74.9859V10.9834H72.7871V10.0625H78.2192V10.9834H76.021V17.956Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M81.9707 17.956V10.0625H83.0049V17.956H81.9707Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M87.4031 17.956H86.3689V10.9834H84.1699V10.0625H89.4729V10.9834H87.2739V17.956H87.4031Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M99.6893 17.0351C98.9135 17.8245 98.0078 18.2192 96.8437 18.2192C95.6796 18.2192 94.7746 17.8245 93.9981 17.0351C93.2223 16.2457 92.834 15.3249 92.834 14.1408C92.834 12.9568 93.2223 12.0359 93.9981 11.2465C94.7746 10.4572 95.6796 10.0625 96.8437 10.0625C98.0078 10.0625 98.9135 10.4572 99.6893 11.2465C100.465 12.0359 100.853 12.9568 100.853 14.1408C100.853 15.1933 100.465 16.2457 99.6893 17.0351ZM94.7746 16.3773C95.2921 16.9036 96.0679 17.2982 96.8437 17.2982C97.6202 17.2982 98.396 17.0351 98.9135 16.3773C99.4309 15.8511 99.8185 15.0618 99.8185 14.1408C99.8185 13.2199 99.5601 12.4306 98.9135 11.9043C98.396 11.3781 97.6202 10.9834 96.8437 10.9834C96.0679 10.9834 95.2921 11.2465 94.7746 11.9043C94.2572 12.4306 93.8689 13.2199 93.8689 14.1408C93.8689 14.9302 94.128 15.7196 94.7746 16.3773Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M102.277 17.956V10.0625H103.441L107.192 16.2457V14.6671V10.0625H108.227V17.956H107.192L103.182 11.5097V13.0883V17.956H102.277Z" fill="black" stroke="black" stroke-width="0.2" stroke-miterlimit="10"/>
|
||||||
|
<path d="M92.5747 29.5327C89.4708 29.5327 87.0134 31.9008 87.0134 35.1898C87.0134 38.3471 89.4708 40.8467 92.5747 40.8467C95.6787 40.8467 98.1368 38.4787 98.1368 35.1898C98.1368 31.9008 95.6787 29.5327 92.5747 29.5327ZM92.5747 38.4787C90.8932 38.4787 89.4708 37.0316 89.4708 35.0582C89.4708 33.0848 90.8932 31.6377 92.5747 31.6377C94.2563 31.6377 95.6787 32.9533 95.6787 35.0582C95.6787 37.1631 94.2563 38.4787 92.5747 38.4787ZM80.5456 29.5327C77.4417 29.5327 74.9842 31.9008 74.9842 35.1898C74.9842 38.3471 77.4417 40.8467 80.5456 40.8467C83.6503 40.8467 86.1077 38.4787 86.1077 35.1898C86.1077 31.9008 83.6503 29.5327 80.5456 29.5327ZM80.5456 38.4787C78.8648 38.4787 77.4417 37.0316 77.4417 35.0582C77.4417 33.0848 78.8648 31.6377 80.5456 31.6377C82.2272 31.6377 83.6503 32.9533 83.6503 35.0582C83.6503 37.1631 82.2272 38.4787 80.5456 38.4787ZM66.189 31.243V33.611H71.7507C71.6213 34.9267 71.1039 35.9791 70.4572 36.6369C69.6812 37.4262 68.3877 38.3471 66.189 38.3471C62.6967 38.3471 60.1098 35.5844 60.1098 32.0324C60.1098 28.4803 62.826 25.7175 66.189 25.7175C67.9998 25.7175 69.4225 26.5069 70.4572 27.4278L72.1387 25.7175C70.7159 24.402 68.9051 23.3495 66.3183 23.3495C61.662 23.3495 57.6523 27.2963 57.6523 32.0324C57.6523 36.7684 61.662 40.7152 66.3183 40.7152C68.9051 40.7152 70.7159 39.9259 72.268 38.2156C73.8202 36.6369 74.3375 34.4004 74.3375 32.6902C74.3375 32.1639 74.3375 31.6377 74.2081 31.243H66.189ZM124.911 33.0848C124.393 31.7692 123.099 29.5327 120.254 29.5327C117.409 29.5327 115.081 31.7692 115.081 35.1898C115.081 38.3471 117.409 40.8467 120.513 40.8467C122.97 40.8467 124.522 39.2681 125.04 38.3471L123.229 37.0316C122.582 37.9524 121.806 38.6102 120.513 38.6102C119.219 38.6102 118.443 38.0841 117.796 36.9L125.169 33.7426L124.911 33.0848ZM117.409 34.9267C117.409 32.8217 119.09 31.6377 120.254 31.6377C121.159 31.6377 122.065 32.1639 122.323 32.8217L117.409 34.9267ZM111.329 40.3205H113.787V23.8757H111.329V40.3205ZM107.449 30.7167C106.802 30.059 105.768 29.4012 104.474 29.4012C101.758 29.4012 99.1709 31.9008 99.1709 35.0582C99.1709 38.2156 101.629 40.5837 104.474 40.5837C105.768 40.5837 106.802 39.9259 107.32 39.2681H107.449V40.0574C107.449 42.1623 106.285 43.3463 104.474 43.3463C103.051 43.3463 102.017 42.2939 101.758 41.373L99.6884 42.2939C100.335 43.741 101.887 45.5829 104.604 45.5829C107.449 45.5829 109.778 43.8726 109.778 39.7943V29.7959H107.449V30.7167ZM104.604 38.4787C102.922 38.4787 101.499 37.0316 101.499 35.0582C101.499 33.0848 102.922 31.6377 104.604 31.6377C106.285 31.6377 107.579 33.0848 107.579 35.0582C107.579 37.0316 106.285 38.4787 104.604 38.4787ZM136.163 23.8757H130.343V40.3205H132.8V34.1373H136.163C138.879 34.1373 141.466 32.1639 141.466 29.0065C141.466 25.8491 138.879 23.8757 136.163 23.8757ZM136.292 31.9008H132.8V26.2438H136.292C138.103 26.2438 139.138 27.8225 139.138 29.0065C139.009 30.3221 137.974 31.9008 136.292 31.9008ZM151.167 29.5327C149.356 29.5327 147.545 30.3221 146.898 32.0324L149.097 32.9533C149.615 32.0324 150.391 31.7692 151.296 31.7692C152.59 31.7692 153.754 32.5586 153.883 33.8742V34.0057C153.495 33.7426 152.46 33.348 151.425 33.348C149.097 33.348 146.769 34.6635 146.769 37.0316C146.769 39.2681 148.709 40.7152 150.779 40.7152C152.46 40.7152 153.236 39.9259 153.883 39.1365H154.012V40.4521H156.34V34.1373C156.082 31.1114 153.883 29.5327 151.167 29.5327ZM150.908 38.4787C150.132 38.4787 148.968 38.0841 148.968 37.0316C148.968 35.716 150.391 35.3213 151.555 35.3213C152.59 35.3213 153.107 35.5845 153.754 35.8475C153.495 37.4263 152.201 38.4787 150.908 38.4787ZM164.489 29.7959L161.773 36.9H161.644L158.798 29.7959H156.211L160.48 39.7943L158.022 45.3198H160.48L167.076 29.7959H164.489ZM142.759 40.3205H145.217V23.8757H142.759V40.3205Z" fill="black"/>
|
||||||
|
<path d="M17.2995 43.6091C16.7821 43.3461 16.5234 42.6883 16.5234 42.0305C16.5234 41.8989 16.5234 41.6358 16.5234 41.5042C16.5234 31.7689 16.5234 22.0336 16.5234 12.4298C16.5234 11.9036 16.6528 11.5089 16.7821 10.9827C16.9115 10.7195 17.1701 10.4564 17.4289 10.1934C22.9906 15.8503 28.4229 21.5073 33.8553 27.1644C28.2936 32.4266 22.8612 37.9522 17.2995 43.6091Z" fill="black"/>
|
||||||
|
<path d="M39.2857 21.3761C37.7336 22.9548 36.0521 24.5335 34.5 26.2438C29.3263 20.8499 24.0233 15.456 18.8496 10.0621C18.8496 10.0621 18.8496 9.93054 18.9789 9.93054C25.7048 13.7457 32.4305 17.561 39.2857 21.3761Z" fill="black"/>
|
||||||
|
<path d="M18.8496 43.6093C24.0233 38.3469 29.3263 33.0846 34.5 27.8223C35.9228 29.2694 37.4749 30.7166 39.1564 32.2952C32.4305 36.1105 25.7048 39.9256 18.9789 43.6093H18.8496Z" fill="black"/>
|
||||||
|
<path d="M40.0634 31.7692C38.382 30.1905 36.8299 28.6118 35.1484 27.0332C36.8299 25.3229 38.5114 23.6126 40.1927 21.9023C40.7101 22.1654 41.2275 22.4286 41.7449 22.8232C43.0383 23.6126 44.4611 24.2704 45.7545 25.0597C46.1425 25.1913 46.4012 25.4544 46.6599 25.8491C47.1772 26.5068 47.1772 27.1647 46.6599 27.8225C46.4012 28.0856 46.1425 28.3487 45.7545 28.4803C43.9437 29.6643 42.0036 30.7168 40.0634 31.7692Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_3367_2873">
|
||||||
|
<rect width="184" height="55" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.0 KiB |
64
src/components/Multipass/DownloadSection.tsx
Normal file
64
src/components/Multipass/DownloadSection.tsx
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import styled from '@emotion/styled'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const DownloadSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<StyledDownloadSection>
|
||||||
|
<p className="download-instruction">
|
||||||
|
To claim your Multipass, download the Operator Wallet.
|
||||||
|
</p>
|
||||||
|
<div className="download-buttons">
|
||||||
|
<img
|
||||||
|
className="app-store-button"
|
||||||
|
loading="lazy"
|
||||||
|
src="/assets/app-store.svg"
|
||||||
|
alt="Download on App Store"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
className="play-store-button"
|
||||||
|
loading="lazy"
|
||||||
|
src="/assets/play-store.svg"
|
||||||
|
alt="Get it on Google Play"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</StyledDownloadSection>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
`
|
||||||
44
src/components/Multipass/MultipassHeader.tsx
Normal file
44
src/components/Multipass/MultipassHeader.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import styled from '@emotion/styled'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const MultipassHeader: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<div className="row">
|
||||||
|
<div className="xp-badge">Coming Soon</div>
|
||||||
|
<div className="xp-badge">+100 XP</div>
|
||||||
|
</div>
|
||||||
|
<h1 className="header-title">Multipass</h1>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
`
|
||||||
87
src/containers/Multipass/MultipassContainer.tsx
Normal file
87
src/containers/Multipass/MultipassContainer.tsx
Normal file
@ -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 (
|
||||||
|
<Container>
|
||||||
|
<main className="claim-container">
|
||||||
|
<MultipassHeader />
|
||||||
|
<section className="claim-content">
|
||||||
|
<p className="claim-description">
|
||||||
|
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{' '}
|
||||||
|
<a
|
||||||
|
href="https://keycard.tech/docs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Keycard
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
{/* <DownloadSection /> */}
|
||||||
|
</section>
|
||||||
|
<Image src="/assets/multipass.png" alt="Multipass device" />
|
||||||
|
</main>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
1
src/containers/Multipass/index.ts
Normal file
1
src/containers/Multipass/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as MultipassContainer } from './MultipassContainer'
|
||||||
13
src/pages/multipass.tsx
Normal file
13
src/pages/multipass.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { SEO } from '@/components/SEO'
|
||||||
|
import MultipassContainer from '@/containers/Multipass/MultipassContainer'
|
||||||
|
|
||||||
|
type PageProps = {}
|
||||||
|
|
||||||
|
export default function MultipassPage(props: PageProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SEO pagePath="/multipass" />
|
||||||
|
<MultipassContainer />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user