diff --git a/src/components/Living/index.tsx b/src/components/Living/index.tsx new file mode 100644 index 000000000..15bd2d21c --- /dev/null +++ b/src/components/Living/index.tsx @@ -0,0 +1,6 @@ +import s from './styles.module.scss'; + +const Living = () => { + return +} +export default Living diff --git a/src/components/Living/styles.module.scss b/src/components/Living/styles.module.scss new file mode 100644 index 000000000..e24fcf565 --- /dev/null +++ b/src/components/Living/styles.module.scss @@ -0,0 +1,33 @@ +.container { + --color: #FA4E0E; + --size: 8px; + display: inline-block; + position: relative; + background-color: var(--color); + width: var(--size); + height: var(--size); + border-radius: 50%; + z-index: 1; + &:before { + content: ''; + display: block; + position: absolute; + background-color: var(--color); + opacity: 0.9; + width: 100%; + height: 100%; + border-radius: 50%; + animation: live 2s ease-in-out infinite; + z-index: -1; + } + @keyframes live { + 0% { + transform: scale(1, 1); + } + 100% { + transform: scale(3, 3); + background-color: var(--color); + opacity: 0; + } + } +} diff --git a/src/modules/PublicSale/activities/index.tsx b/src/modules/PublicSale/activities/index.tsx new file mode 100644 index 000000000..8e39d4dd6 --- /dev/null +++ b/src/modules/PublicSale/activities/index.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import BigNumber from 'bignumber.js'; +import dayjs from 'dayjs'; +import { PUBLIC_SALE_START } from '@/modules/Whitelist'; +import { Flex } from '@chakra-ui/react'; +import styles from './styles.module.scss'; + +interface ICTA { + title: string, + type: 'action' | 'link', + onPress?: () => void; + link?: string +} + +export interface GameItemProps { + key: number, + tag: string + title: string, + desc: string | any, + src: string, + ctas?: ICTA[] +} + +const Activities = React.memo(() => { + const DAYS = React.useMemo(() => { + return [ + { + key: 0, + tag: 'DAY 1', + title: 'Fully on-chain gaming on Bitcoin', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Play games on Arcade', + type: 'link', + link: 'https://bitcoinarcade.xyz/' + }], + desc: `Have fun with Bitcoin Arcade - the Bitcoin L2 for fully-on-chain gaming
Play hyper-casual mobile games on Bitcoin and earn $ARCA testnet tokens.` + }, + { + key: 1, + tag: 'DAY 2', + title: 'BRC-20 Futures Trading Competition', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Trade on Naka', + type: 'link', + link: 'https://nakachain.xyz/' + }], + desc: 'Experience on-chain BRC-20 perpetual trading with Naka Chain - the Bitcoin L2 for BRC-20 DeFi powered by BVM
For the first time, you can go long and short on BRC-20 tokens on a decentralized platform' + }, + { + key: 2, + tag: 'DAY 3', + title: 'Playing with Lego at BVM network', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Play with modular blocks', + type: 'link', + link: 'https://playmodular.com/' + }], + desc: 'Build whatever on Bitcoin with modular blocks powered by the BVM network.' + }, + { + key: 3, + tag: 'DAY 4', + title: 'Poker Friday Night on Bitcoin', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Play games on Arcade', + type: 'link', + link: 'https://bitcoinarcade.xyz/' + }], + desc: 'Have fun with Bitcoin Arcade - the Bitcoin L2 for fully-on-chain gaming.
Play hyper-casual mobile games on Bitcoin and earn $ARCA testnet tokens.' + }, + { + key: 4, + tag: 'DAY 5', + title: 'Get Fit & Raise Charity on Bitcoin', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Run with Alphas', + type: 'link', + link: 'https://alpha.wtf/' + }], + desc: 'A fitness and charity event built on Bitcoin in honor of Hal Finney.
The more you run, the more you donate and earn at the same time' + }, + { + key: 5, + tag: 'DAY 6', + title: 'Get Fit & Raise Charity on Bitcoin', + src: 'public-sale/playGame.png', + ctas: [{ + title: 'Run with Alphas', + type: 'link', + link: 'https://alpha.wtf/' + }], + desc: 'A fitness and charity event built on Bitcoin in honor of Hal Finney.
The more you run, the more you donate and earn at the same time' + }, + { + key: 6, + tag: 'DAY 7', + title: 'Last day', + src: 'public-sale/playGame.png', + desc: 'Details of Day 7 will be provided as soon as Day 6 is completed.' + }, + ] + }, []) + + const currentDay = React.useMemo(() => { + const diffDay = new BigNumber(dayjs.utc(PUBLIC_SALE_START).diff(dayjs.utc(), 'days')).absoluteValue().toNumber(); + return { + step: DAYS.length > diffDay ? DAYS[diffDay] : DAYS[DAYS.length - 1], + diffDay + } + }, []) + + return ( + +

Experience Bitcoin like never before

+
+ ) +}) + +Activities.displayName = "Activities" diff --git a/src/modules/PublicSale/activities/styles.module.scss b/src/modules/PublicSale/activities/styles.module.scss new file mode 100644 index 000000000..256c2e890 --- /dev/null +++ b/src/modules/PublicSale/activities/styles.module.scss @@ -0,0 +1,9 @@ +.container { + &__title { + color: #FFF; + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: 150%; + } +} diff --git a/src/modules/PublicSale/playGame/index.tsx b/src/modules/PublicSale/playGame/index.tsx index 60f741afa..c5b35fda1 100644 --- a/src/modules/PublicSale/playGame/index.tsx +++ b/src/modules/PublicSale/playGame/index.tsx @@ -6,6 +6,7 @@ import cx from 'clsx'; import dayjs from 'dayjs'; import { PUBLIC_SALE_START } from '@/modules/Whitelist'; import BigNumber from 'bignumber.js'; +import Living from '@/components/Living'; interface ICTA { title: string, @@ -173,9 +174,11 @@ const Playgame = () => { flex={1} justifyContent="center" alignItems="center" + gap="12px" onClick={() => setSelectedDay(d)} className={cx(s.item, d?.key === selectedDay?.key ? s.selected : null)} > + {/**/} {d?.tag} ) diff --git a/src/modules/Whitelist/index.tsx b/src/modules/Whitelist/index.tsx index 08f2801de..8bb58b5da 100644 --- a/src/modules/Whitelist/index.tsx +++ b/src/modules/Whitelist/index.tsx @@ -24,7 +24,7 @@ import { isProduction } from '@/config'; const CONTAINER_ID = 'WHITE_LIST_CONTAINER_ID'; -export const PUBLIC_SALE_START = isProduction ? '2024-01-30 03:30:00' : '2024-01-29 04:00:00' +export const PUBLIC_SALE_START = isProduction ? '2024-01-30 03:30:00' : '2024-01-29 03:30:00' export const PUBLIC_SALE_END = '2024-02-06 03:30:00' const Whitelist = () => {