-
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.
- Loading branch information
Showing
19 changed files
with
446 additions
and
337 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,24 @@ | ||
| import { ProjectCard } from '@/components/ProjectCard/index.js'; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <div className="flex h-full flex-col items-center bg-black lg:max-w-[1024px]"> | ||
| <div | ||
| className="flex -mb-[30px] h-[520px] w-full flex-col justify-end pb-[120px]" | ||
| style={{ background: 'url(/KV.png)', backgroundPosition: 'center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} | ||
| > | ||
| <div className="text-center text-[32px] text-neutrals1">Stake $MASK for Rewards</div> | ||
| <div className="text-center text-[16px] text-neutrals4"> | ||
| This website is specifically created for Mask investors and believers, where you can stake $Mask to | ||
| earn token rewards! | ||
| return ( | ||
| <div className="flex h-full flex-col items-center bg-black lg:max-w-[1024px]"> | ||
| <div | ||
| className="-mb-[30px] flex h-[520px] w-full flex-col justify-end pb-[120px]" | ||
| style={{ | ||
| background: 'url(/KV.png)', | ||
| backgroundPosition: 'center', | ||
| backgroundSize: 'cover', | ||
| backgroundRepeat: 'no-repeat', | ||
| }} | ||
| > | ||
| <div className="text-center text-[32px] text-neutrals1">Stake $MASK for Rewards</div> | ||
| <div className="text-center text-[16px] text-neutrals4"> | ||
| This website is specifically created for Mask investors and believers, where you can stake $Mask to | ||
| earn token rewards! | ||
| </div> | ||
| </div> | ||
| <ProjectCard /> | ||
| </div> | ||
| </div> | ||
| <ProjectCard /> | ||
| </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,24 +1,31 @@ | ||
| import { ClaimReward } from "@/components/ClaimReward/index.js"; | ||
| import { ProjectDetailCard } from "@/components/ProjectDetailCard/index.js"; | ||
| import { StakeRanking } from "@/components/StakeRanking/index.js"; | ||
| import { StakeTokenInfo } from "@/components/StakeTokenInfo/index.js"; | ||
| import { StakeTokenInput } from "@/components/StakeTokenInput/index.js"; | ||
| import { ClaimReward } from '@/components/ClaimReward/index.js'; | ||
| import { ProjectDetailCard } from '@/components/ProjectDetailCard/index.js'; | ||
| import { StakeRanking } from '@/components/StakeRanking/index.js'; | ||
| import { StakeTokenInfo } from '@/components/StakeTokenInfo/index.js'; | ||
| import { StakeTokenInput } from '@/components/StakeTokenInput/index.js'; | ||
|
|
||
| export default function Stake() { | ||
| return <div className="flex h-full flex-col items-center bg-black lg:max-w-[1024px]"> | ||
| <div | ||
| className="flex -mb-[30px] h-[520px] w-full flex-col justify-end pb-[120px]" | ||
| style={{ background: 'url(/KV-meson.png)', backgroundPosition: 'center', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} | ||
| > | ||
| <ProjectDetailCard /> | ||
| </div> | ||
| <div className="flex flex-col lg:flex-row w-full gap-[24px]"> | ||
| <StakeTokenInfo /> | ||
| <ClaimReward /> | ||
| </div> | ||
| <div className="flex flex-col lg:flex-row w-full gap-[24px] mt-[51px]"> | ||
| <StakeTokenInput /> | ||
| <StakeRanking /> | ||
| </div> | ||
| </div> | ||
| return ( | ||
| <div className="flex h-full flex-col items-center bg-black lg:max-w-[1024px]"> | ||
| <div | ||
| className="-mb-[30px] flex h-[520px] w-full flex-col justify-end pb-[120px]" | ||
| style={{ | ||
| background: 'url(/KV-meson.png)', | ||
| backgroundPosition: 'center', | ||
| backgroundSize: 'cover', | ||
| backgroundRepeat: 'no-repeat', | ||
| }} | ||
| > | ||
| <ProjectDetailCard /> | ||
| </div> | ||
| <div className="flex w-full flex-col gap-[24px] lg:flex-row"> | ||
| <StakeTokenInfo /> | ||
| <ClaimReward /> | ||
| </div> | ||
| <div className="mt-[51px] flex w-full flex-col gap-[24px] lg:flex-row"> | ||
| <StakeTokenInput /> | ||
| <StakeRanking /> | ||
| </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,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
Oops, something went wrong.