chore: update

src/components/Living/index.tsx

@@ -0,0 +1,6 @@
+import s from './styles.module.scss';
+
+const Living = () => {
+  return <span className={s.container}/>
+}
+export default Living

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;
+    }
+  }
+}

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<GameItemProps[]>(() => {
+    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<br/>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<br/>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.<br/>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.<br/>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.<br/>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 (
+    <Flex flexDirection="column" pb={{ base: "24px", md: "48px" }}>
+      <p className={styles.container__title}>Experience Bitcoin like never before</p>
+    </Flex>
+  )
+})
+
+Activities.displayName = "Activities"

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%;
+  }
+}

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)}
                 >
+                  {/*<Living />*/}
                   {d?.tag}
                 </Flex>
               )

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 = () => {