-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feat/home-page' of github.com:DimensionDev/stake.mask.i…
…o into feat/home-page
- Loading branch information
Showing
18 changed files
with
318 additions
and
247 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,24 @@ | ||
| import SLNLogo from '@/assets/logos/sln-network.svg'; | ||
| export function ClaimReward() { | ||
| return ( | ||
| <div | ||
| className="flex w-full flex-col rounded-[16px] p-[16px] text-neutrals9" | ||
| style={{ background: 'var(--line-green)' }} | ||
| > | ||
| <div className="flex justify-between"> | ||
| <div className="flex items-center gap-[4px]"> | ||
| <SLNLogo className="w-[48px] h-[48px]" /> | ||
| <div className="text-[32px] leading-[48px]">SLN</div> | ||
| return ( | ||
| <div | ||
| className="flex w-full flex-col rounded-[16px] p-[16px] text-neutrals9" | ||
| style={{ background: 'var(--line-green)' }} | ||
| > | ||
| <div className="flex justify-between"> | ||
| <div className="flex items-center gap-[4px]"> | ||
| <SLNLogo className="h-[48px] w-[48px]" /> | ||
| <div className="text-[32px] leading-[48px]">SLN</div> | ||
| </div> | ||
| <div className="text-[40px] leading-[48px]">1,300.0002</div> | ||
| </div> | ||
| <div className="mt-[12px] flex justify-between text-[14px] text-neutrals9"> | ||
| <div>Reward</div> | ||
| <div>$ 23.00</div> | ||
| </div> | ||
| <button className="mt-[12px] flex h-[48px] items-center justify-center rounded-[99px] bg-neutrals9 px-[24px] py-[12px] text-[16px] leading-[16px] text-neutrals1"> | ||
| Claim | ||
| </button> | ||
| </div> | ||
| <div className='text-[40px] leading-[48px]'>1,300.0002</div> | ||
| </div> | ||
| <div className='flex justify-between text-[14px] text-neutrals9 mt-[12px]'> | ||
| <div>Reward</div> | ||
| <div>$ 23.00</div> | ||
| </div> | ||
| <button className="mt-[12px] flex items-center justify-center rounded-[99px] bg-neutrals9 h-[48px] px-[24px] py-[12px] text-[16px] leading-[16px] text-neutrals1"> | ||
| Claim | ||
| </button> | ||
| </div> | ||
| ); | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| import { Link } from '@/esm/Link.js' | ||
| import { Link } from '@/esm/Link.js'; | ||
| export const BottomBar = () => { | ||
| return <div className="flex py-[32px] px-[24px] items-center justify-between text-neutrals4 text-[12px]"> | ||
| <div>Since 2019 to Now ｜ Mask.io</div> | ||
| <div className="flex items-center gap-[16px]"> | ||
| <Link href={'#'}>Terms of Use</Link> | ||
| <Link href={'#'}>Privacy Policy</Link> | ||
| <Link href={'#'}>Cookie Policy</Link> | ||
| </div> | ||
| </div> | ||
| } | ||
| return ( | ||
| <div className="flex items-center justify-between px-[24px] py-[32px] text-[12px] text-neutrals4"> | ||
| <div>Since 2019 to Now ｜ Mask.io</div> | ||
| <div className="flex items-center gap-[16px]"> | ||
| <Link href={'#'}>Terms of Use</Link> | ||
| <Link href={'#'}>Privacy Policy</Link> | ||
| <Link href={'#'}>Cookie Policy</Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,52 @@ | ||
| import { Image } from "@/esm/Image.js" | ||
| import Twitter from "@/assets/logos/twitter.svg"; | ||
| import Github from "@/assets/logos/github.svg"; | ||
| import Discord from "@/assets/logos/discord.svg"; | ||
| import Telegram from "@/assets/logos/telegram.svg"; | ||
| import Medium from "@/assets/logos/medium.svg"; | ||
| import Reddit from "@/assets/logos/reddit.svg"; | ||
| import Youtube from "@/assets/logos/youtube.svg"; | ||
| import Facebook from "@/assets/logos/facebook.svg"; | ||
| import { Image } from '@/esm/Image.js'; | ||
| import Twitter from '@/assets/logos/twitter.svg'; | ||
| import Github from '@/assets/logos/github.svg'; | ||
| import Discord from '@/assets/logos/discord.svg'; | ||
| import Telegram from '@/assets/logos/telegram.svg'; | ||
| import Medium from '@/assets/logos/medium.svg'; | ||
| import Reddit from '@/assets/logos/reddit.svg'; | ||
| import Youtube from '@/assets/logos/youtube.svg'; | ||
| import Facebook from '@/assets/logos/facebook.svg'; | ||
|
|
||
| const iconsList = [ | ||
| { icon: <Twitter width={40} height={40} />, link: "https://twitter.com/realmaskbook" }, | ||
| { icon: <Github width={40} height={40} />, link: " " }, | ||
| { icon: <Discord width={40} height={40} />, link: " " }, | ||
| { icon: <Telegram width={40} height={40} />, link: " " }, | ||
| { icon: <Medium width={40} height={40} />, link: " " }, | ||
| { icon: <Reddit width={40} height={40} />, link: " " }, | ||
| { icon: <Youtube width={40} height={40} />, link: " " }, | ||
| { icon: <Facebook width={40} height={40} />, link: " " },] | ||
|
|
||
| { icon: <Twitter width={40} height={40} />, link: 'https://twitter.com/realmaskbook' }, | ||
| { icon: <Github width={40} height={40} />, link: ' ' }, | ||
| { icon: <Discord width={40} height={40} />, link: ' ' }, | ||
| { icon: <Telegram width={40} height={40} />, link: ' ' }, | ||
| { icon: <Medium width={40} height={40} />, link: ' ' }, | ||
| { icon: <Reddit width={40} height={40} />, link: ' ' }, | ||
| { icon: <Youtube width={40} height={40} />, link: ' ' }, | ||
| { icon: <Facebook width={40} height={40} />, link: ' ' }, | ||
| ]; | ||
|
|
||
| export function Info() { | ||
| return <div className="flex pt-[64px] pb-[48px] px-[36px] border-y-[1px] border-neutrals6"> | ||
| <div className="flex flex-col gap-[32px] flex-1"> | ||
| <Image src='/logo.svg' alt="Mask Network" width={120} height={35} /> | ||
| <div className="text-[40px] leading-[32px] w-[256px] text-neutrals2">Your Portal To The New, Open Internet.</div> | ||
| </div> | ||
| <div className="flex flex-col gap-[32px] flex-1"> | ||
| <div className="text-[16px] text-neutrals2">Integrations</div> | ||
| <div className="text-[16px] text-neutrals4">Github</div> | ||
| </div> | ||
| <div className="flex flex-col gap-[32px] flex-1"> | ||
| <div className="text-[16px] text-neutrals2">Help</div> | ||
| <div className="text-[16px] text-neutrals4">FAQs</div> | ||
| <div className="text-[16px] text-neutrals4">Support</div> | ||
| </div> | ||
| <div className="flex flex-col gap-[32px] flex-1"> | ||
| <div className="text-[16px] text-neutrals2">Contact Us</div> | ||
| <div className="flex gap-[8px]"> | ||
| {iconsList.map((item, index) => <a key={index} href={item.link}>{item.icon}</a>)} | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| return ( | ||
| <div className="flex border-y-[1px] border-neutrals6 px-[36px] pb-[48px] pt-[64px]"> | ||
| <div className="flex flex-1 flex-col gap-[32px]"> | ||
| <Image src="/logo.svg" alt="Mask Network" width={120} height={35} /> | ||
| <div className="w-[256px] text-[40px] leading-[32px] text-neutrals2"> | ||
| Your Portal To The New, Open Internet. | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-1 flex-col gap-[32px]"> | ||
| <div className="text-[16px] text-neutrals2">Integrations</div> | ||
| <div className="text-[16px] text-neutrals4">Github</div> | ||
| </div> | ||
| <div className="flex flex-1 flex-col gap-[32px]"> | ||
| <div className="text-[16px] text-neutrals2">Help</div> | ||
| <div className="text-[16px] text-neutrals4">FAQs</div> | ||
| <div className="text-[16px] text-neutrals4">Support</div> | ||
| </div> | ||
| <div className="flex flex-1 flex-col gap-[32px]"> | ||
| <div className="text-[16px] text-neutrals2">Contact Us</div> | ||
| <div className="flex gap-[8px]"> | ||
| {iconsList.map((item, index) => ( | ||
| <a key={index} href={item.link}> | ||
| {item.icon} | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| import { Image } from "@/esm/Image.js" | ||
| import { Info } from "./Info.js" | ||
| import { BottomBar } from "./BottomBar.js" | ||
| import { Image } from '@/esm/Image.js'; | ||
| import { Info } from './Info.js'; | ||
| import { BottomBar } from './BottomBar.js'; | ||
| export function Footer() { | ||
| return <div className="flex-col w-full bg-black hidden md:flex"> | ||
| <div | ||
| className="w-full relative aspect-[6]" > | ||
| <Image src='/masknetwork.png' alt="Mask Network" layout="fill" /> | ||
| </div> | ||
| <Info /> | ||
| <BottomBar /> | ||
| </div> | ||
| return ( | ||
| <div className="hidden w-full flex-col bg-black md:flex"> | ||
| <div className="relative aspect-[6] w-full"> | ||
| <Image src="/masknetwork.png" alt="Mask Network" layout="fill" /> | ||
| </div> | ||
| <Info /> | ||
| <BottomBar /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,30 @@ | ||
| import { Image } from "@/esm/Image.js"; | ||
| import MaskIcon from "@/assets/logos/mask.svg"; | ||
| import { Image } from '@/esm/Image.js'; | ||
| import MaskIcon from '@/assets/logos/mask.svg'; | ||
|
|
||
| interface StakerProps { | ||
| amount: number; | ||
| name: string; | ||
| avatar: string; | ||
| isTop?: boolean; | ||
| amount: number; | ||
| name: string; | ||
| avatar: string; | ||
| isTop?: boolean; | ||
| } | ||
|
|
||
| export function Staker({ amount, name, avatar, isTop }: StakerProps) { | ||
| return <div className="flex flex-col space-y-4 relative items-center"> | ||
| <Image src={avatar} width={64} height={64} className="border-white border-[2px] rounded-[99px]" alt="avatar" /> | ||
| <div className={`rounded-[99px] flex gap-[4px] py-[6px] px-[10px] text-neutrals9 text-[14px] !bg-neutrals1 absolute bottom-5`} style={{ background: `${isTop ? "var(--line-blue) !important" : ""}` }}> | ||
| {amount} <MaskIcon width={16} height={16} /> | ||
| </div> | ||
| <div className=" text-[12px] text-neutrals1"> | ||
| {name} | ||
| </div> | ||
| </div> | ||
| return ( | ||
| <div className="relative flex flex-col items-center space-y-4"> | ||
| <Image | ||
| src={avatar} | ||
| width={64} | ||
| height={64} | ||
| className="rounded-[99px] border-[2px] border-white" | ||
| alt="avatar" | ||
| /> | ||
| <div | ||
| className={`absolute bottom-5 flex gap-[4px] rounded-[99px] !bg-neutrals1 px-[10px] py-[6px] text-[14px] text-neutrals9`} | ||
| style={{ background: `${isTop ? 'var(--line-blue) !important' : ''}` }} | ||
| > | ||
| {amount} <MaskIcon width={16} height={16} /> | ||
| </div> | ||
| <div className=" text-[12px] text-neutrals1">{name}</div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,31 @@ | ||
| import { Image } from "@/esm/Image.js"; | ||
| import MaskIcon from "@/assets/logos/mask.svg"; | ||
| import Crown from "@/assets/crown.svg"; | ||
| import { Image } from '@/esm/Image.js'; | ||
| import MaskIcon from '@/assets/logos/mask.svg'; | ||
| import Crown from '@/assets/crown.svg'; | ||
|
|
||
| interface StakerProps { | ||
| amount: number; | ||
| name: string; | ||
| avatar: string; | ||
| amount: number; | ||
| name: string; | ||
| avatar: string; | ||
| } | ||
|
|
||
| export function TopStaker({ amount, name, avatar }: StakerProps) { | ||
| return <div className="flex flex-col space-y-4 relative items-center"> | ||
| <Crown width={36} height={36} className="absolute top-[10px] right-[-10px]" /> | ||
| <Image src={avatar} width={82} height={82} className="border-white border-[2px] rounded-[99px]" alt="avatar" /> | ||
| <div className="rounded-[99px] flex gap-[4px] py-[6px] px-[10px] text-neutrals9 text-[14px] items-center justify-center absolute bottom-5" style={{ background: "var(--line-green)" }}> | ||
| {amount} <MaskIcon width={16} height={16} /> | ||
| </div> | ||
| <div className=" text-[12px] text-neutrals1"> | ||
| {name} | ||
| </div> | ||
| </div> | ||
| return ( | ||
| <div className="relative flex flex-col items-center space-y-4"> | ||
| <Crown width={36} height={36} className="absolute right-[-10px] top-[10px]" /> | ||
| <Image | ||
| src={avatar} | ||
| width={82} | ||
| height={82} | ||
| className="rounded-[99px] border-[2px] border-white" | ||
| alt="avatar" | ||
| /> | ||
| <div | ||
| className="absolute bottom-5 flex items-center justify-center gap-[4px] rounded-[99px] px-[10px] py-[6px] text-[14px] text-neutrals9" | ||
| style={{ background: 'var(--line-green)' }} | ||
| > | ||
| {amount} <MaskIcon width={16} height={16} /> | ||
| </div> | ||
| <div className=" text-[12px] text-neutrals1">{name}</div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.