home

public/locales/zh-CN.json

@@ -1053,5 +1053,6 @@
   "Community Auctions": "Community Auctions",
   "FAQs": "FAQs",
   "Auction duration": "Auction duration",
-  "Terms & Conditions": "Terms & Conditions"
+  "Terms & Conditions": "Terms & Conditions",
+  "Hcc Info":"HighCityCoin简称HCC，由HighCityTM铸造，"
 }

src/views/Home/HomeIndex.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useTranslation } from 'contexts/Localization'
+import FristCom from './components/FristCom'
+import IntroduceCom from './components/IntroduceCom'
+import CourseCom from './components/CourseCom'
+
+
+const Home: React.FC = () => {
+    const { t } = useTranslation()
+
+    return (
+        <>
+            <FristCom />
+            <IntroduceCom />
+            <CourseCom />
+        </>
+
+    )
+}
+
+export default Home

src/views/Home/components/CourseCom.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, BaseLayout, Box, Button, Image,Card } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FristPage = styled.div`
+    background-image: url('/images/home/three.svg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    padding:8rem 0 .8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width:80%
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width:80%
+  }`
+
+
+const SortDiv = styled.div`
+    height:190px;
+    position:relative;
+`
+
+const SortNum = styled.div`
+    position:absolute;
+    top:0;
+    left:-43px;
+    width: 82px;
+    height: 82px;
+    background: #1FC7D4;
+    border-radius: 50%;
+    font-size:46px;
+    color:#FAF9FA;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    z-index:2
+`
+
+const CardDiv = styled.div`
+  width:372px;
+  box-sizing:border-box;
+  padding:28px 40px 16px 26px;
+  border: 1px solid #E7E3EB;
+  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 25px;
+  position:absolute;
+  top:-25%;
+  background:#fff;
+  ${({ theme }) => theme.mediaQueries.sm} {
+    // left: 60px !important;
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+  }
+`
+
+
+const CourseCom: React.FC = () => {
+    const { t } = useTranslation()
+
+    const [list, setListState] = useState([
+        { title: "第一阶段：起源",id:1, list: [{ text: "2021年5月项目概念的诞生；" },{text:"2021年6月搭建HighClty团队；"},{text:"2021年5月~2022年1月团队磨合；"}]}, 
+        { title: "第二阶段：行动",id:2, list: [{ text: "2022年4月社交建社，交媒体发布活动，HighCity铸币开始，分红机制上线；" },{text:"2022年3月项目立项，网页设计，路线图公布，智能合约开发；"}]}, 
+        { title: "第三阶段：创造",id:3, list: [{ text: "2022年5月NFT创造；" },{text:"2022年6月社交软件开发；"}] }, 
+        { title: "第四阶段：融合",id:4, list: [{ text: "2022年12月社交软件落地；" },{text:"2022年12月NFT分红绑定社交软件；"},{text:"2022年12月HighCity生态初步建成；"}]}, 
+        { title: "第五阶段：落幕",id:5, list: [{ text: "2022年12月HighCity生态建成;" },{text:"2022年12月保持分红收益增长；"}]}])
+
+    return (
+        <>
+            <FristPage>
+                <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+                   <Flex justifyContent="center">
+                       <div>
+                           {
+                               list.map((item,index) => {
+                                    return <SortDiv key={ item.id } style={{ borderLeft:index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}>
+                                        <SortNum style={{backgroundColor:index % 2 ? '#7645D9' : '#1FC7D4'}}>{index + 1 }</SortNum>
+                                        {/* style={{left:index % 2 ? '-420px' : '60px'}} */}
+                                        <CardDiv style={{left:index % 2 ? '-420px' : '60px'}}>
+                                            <Heading>{ item.title }</Heading>
+                                            {
+                                                item.list.map((childItem) => {
+                                                    return <Text color='textSubtle' marginTop="15px" key={ childItem.text }>{ childItem.text }</Text>
+                                                })
+                                            }
+                                        </CardDiv>
+                                    </SortDiv>
+                               })
+                           }
+                       </div>
+                   </Flex>
+                </StyledPage>
+            </FristPage>
+
+        </>
+
+    )
+}
+
+export default CourseCom

src/views/Home/components/FlexItemCom.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+
+  const ScoreItem = styled.div`
+    width:100%;
+    text-algin:center;
+  `
+
+  const ItemText = styled(Text)`
+    text-align:center;
+    font-size:36px;
+  `
+
+  const ItemSubText = styled(Text)`
+    text-align:center;
+    font-size:20px;
+  `
+
+  export default function FlexItemCom({name,value}){
+
+    return (
+        <ScoreItem>
+            <ItemText color='text'>{ value }</ItemText>
+            <ItemSubText color='textSubtle'>{ name }</ItemSubText>
+        </ScoreItem>
+    )
+}
+

src/views/Home/components/FristCom.tsx

@@ -0,0 +1,171 @@
+import React,{useState} from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, BaseLayout, Box,Button,Image } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+import FlexItemCom from './FlexItemCom'
+
+const Hero = styled.div`
+  align-items: center;
+  background-image: url('/images/pan-bg-mobile.svg');
+  background-repeat: no-repeat;
+  background-position: top center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin: auto;
+  margin-bottom: 32px;
+  padding-top: 116px;
+  text-align: center;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    background-image: url('/images/pan-bg2.svg'), url('/images/pan-bg.svg');
+    background-position: left center, right center;
+    height: 165px;
+    padding-top: 0;
+  }
+`
+
+const Cards = styled(BaseLayout)`
+  align-items: stretch;
+  justify-content: stretch;
+  margin-bottom: 24px;
+  grid-gap: 24px;
+
+  & > div {
+    grid-column: span 6;
+    width: 100%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    & > div {
+      grid-column: span 8;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-bottom: 32px;
+    grid-gap: 32px;
+
+    & > div {
+      grid-column: span 6;
+    }
+  }
+`
+
+const CTACards = styled(BaseLayout)`
+  align-items: start;
+  margin-bottom: 24px;
+  grid-gap: 24px;
+
+  & > div {
+    grid-column: span 6;
+  }
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    & > div {
+      grid-column: span 8;
+    }
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    margin-bottom: 32px;
+    grid-gap: 32px;
+
+    & > div {
+      grid-column: span 4;
+    }
+  }
+`
+
+const FristPage = styled.div`
+    background-image: url('/images/home/bg.svg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    padding:.9rem 0 .8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width:80%
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width:80%
+  }`
+
+  const RadiusBtn = styled(Button)`
+    border-radius:50px;
+    width:170px;
+    height:60px;
+    font-size:18px;
+    margin:0px 20px 0 0;
+    background: linear-gradient(269deg, #1FC8D3 0%, #1FD4B0 100%);
+  `
+  const WhiteBtn = styled(Button)`
+    border-radius:50px;
+    width:170px;
+    height:60px;
+    border:1px solid #1FC7D4;
+    margin:0px 35px 0 0;
+  `
+
+
+  const ScoreDiv = styled(Flex)`
+    margin-top:127px;
+    background: #fff;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+    opacity: 1;
+    border-radius: 15px;
+    padding:59px 0;
+  `
+
+const FristCom: React.FC = () => {
+    const { t } = useTranslation()
+    const [burned,BurnedState] = useState([{id:1,name:'Burned',value:"62.55%"},{id:2,name:'Burned',value:"62.55%"},{id:3,name:'Burned',value:"62.55%"},{id:4,name:'Burned',value:"62.55%"}])
+    return (
+        <>
+            <FristPage>
+                <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+                    <Flex justifyContent="space-between" alignItems="center">
+                        <div>
+                        <Heading as="h1" scale="xl" mb="24px" color="secondary">
+                            {/* {t('PancakeSwap')} */}High City Coin
+                        </Heading>
+                            {/* <div>High City Coin</div> */}
+                            <Text>
+                                { t('Hcc Info') }<br />
+                                其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。<br />
+                                同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。</Text>
+                            <Flex alignItems="center" marginTop="60px">
+                                <RadiusBtn variant="primary" scale="sm">兑换</RadiusBtn>
+                                <WhiteBtn variant="secondary" scale="sm">NFT市场</WhiteBtn>
+                                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
+                                <Image src="/images/home/fg.png" alt="" width={34} height={34} marginRight="12px" />
+                            </Flex>
+                        </div>
+                        <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
+                    </Flex>
+                    <ScoreDiv justifyContent="space-between">
+                        {
+                            burned.map(item => {
+                                return <FlexItemCom key={ item.id } name={ item.name } value={ item.value } />
+                            })
+                        }
+                    </ScoreDiv>
+                </StyledPage>
+            </FristPage>
+            
+        </>
+
+    )
+}
+
+export default FristCom

src/views/Home/components/IntroduceCom.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Flex, Heading, Text, BaseLayout, Box,Button,Image } from '@pancakeswap/uikit'
+import { useTranslation } from 'contexts/Localization'
+
+const FristPage = styled.div`
+    background: linear-gradient(270deg, #EFF6FF 0%, #E9FDFF 100%);
+    padding:8rem 0 .8rem 0;
+`
+
+const StyledPage = styled(Box)`
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-top: 24px;
+    padding-bottom: 24px;
+    width:80%
+  }
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    padding-top: 32px;
+    padding-bottom: 32px;
+    width:80%
+  }`
+
+  const BoxMain = styled(Box)`
+    background: #FFFFFF;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
+    opacity: 1;
+    border-radius: 20px;
+    padding:94px 92px 37px 92px;
+    position:relative;
+`
+
+const MainDiv = styled.div`
+  position:absolute;
+  top:-76px;
+  left:50%;
+  margin-left:-76px;
+  width: 152px;
+  height: 152px;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+  opacity: 1;
+  box-sizing:border-box;
+  padding: 13px;
+  & > div{
+      width:100%;
+      height:100%;
+      border-radius:50%;
+      background:#E0FFFF;
+      padding:25px;
+  }
+`
+
+const HeadingDiv = styled(Heading)`
+  margin-top:18px;
+  font-size:36px;
+  color:#333333;
+`
+
+const TextCom = styled(Text)`
+    margin-top:35px;
+    text-align:center;
+    line-height:32px;
+`
+
+
+const IntroduceCom: React.FC = () => {
+    const { t } = useTranslation()
+
+    return (
+        <>
+            <FristPage>
+                <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
+                    <BoxMain>
+                        <MainDiv>
+                            <div>
+                                <Image src='/images/home/intor.svg' alt='' width={75} height={75} />
+                            </div>
+                        </MainDiv>
+                        <HeadingDiv textAlign='center'>HlighCitySwap</HeadingDiv>
+                        <TextCom >HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。</TextCom>
+                    </BoxMain>
+                </StyledPage>
+            </FristPage>
+            
+        </>
+
+    )
+}
+
+export default IntroduceCom

src/views/Home/index.ts

@@ -1 +1 @@
-export { default } from './Home'
+export { default } from './HomeIndex'