diff --git a/public/images/home/12.svg b/public/images/home/12.svg new file mode 100644 index 0000000..de06964 --- /dev/null +++ b/public/images/home/12.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/home/bg.svg b/public/images/home/bg.svg new file mode 100644 index 0000000..ecaaa57 --- /dev/null +++ b/public/images/home/bg.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/images/home/fg.png b/public/images/home/fg.png new file mode 100644 index 0000000..3355c58 Binary files /dev/null and b/public/images/home/fg.png differ diff --git a/public/images/home/intor.svg b/public/images/home/intor.svg new file mode 100644 index 0000000..d254cdc --- /dev/null +++ b/public/images/home/intor.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/public/images/home/logo.svg b/public/images/home/logo.svg new file mode 100644 index 0000000..f73f140 --- /dev/null +++ b/public/images/home/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/home/three.svg b/public/images/home/three.svg new file mode 100644 index 0000000..ecaaa57 --- /dev/null +++ b/public/images/home/three.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/public/locales/zh-CN.json b/public/locales/zh-CN.json index 8b6ef42..47cf633 100644 --- a/public/locales/zh-CN.json +++ b/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铸造，" } diff --git a/src/views/Home/HomeIndex.tsx b/src/views/Home/HomeIndex.tsx new file mode 100644 index 0000000..4628303 --- /dev/null +++ b/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 ( + <> + + + + + + ) +} + +export default Home diff --git a/src/views/Home/components/CourseCom.tsx b/src/views/Home/components/CourseCom.tsx new file mode 100644 index 0000000..47fc092 --- /dev/null +++ b/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 ( + <> + + + +
+ { + list.map((item,index) => { + return + {index + 1 } + {/* style={{left:index % 2 ? '-420px' : '60px'}} */} + + { item.title } + { + item.list.map((childItem) => { + return { childItem.text } + }) + } + + + }) + } +
+ + + + + + + ) +} + +export default CourseCom diff --git a/src/views/Home/components/FlexItemCom.tsx b/src/views/Home/components/FlexItemCom.tsx new file mode 100644 index 0000000..654155d --- /dev/null +++ b/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 ( + + { value } + { name } + + ) +} + diff --git a/src/views/Home/components/FristCom.tsx b/src/views/Home/components/FristCom.tsx new file mode 100644 index 0000000..3c82869 --- /dev/null +++ b/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 ( + <> + + + +
+ + {/* {t('PancakeSwap')} */}High City Coin + + {/*
High City Coin
*/} + + { t('Hcc Info') }
+ 其作用主要是在HighCitySwap上购买NFT、NFT盒子与其他可交易产品。
+ 同时，HCC与BTC、ETH具有相同属性，可以进行自由交易。 + + 兑换 + NFT市场 + + + +
+ + + + { + burned.map(item => { + return + }) + } + + + + + + + ) +} + +export default FristCom diff --git a/src/views/Home/components/IntroduceCom.tsx b/src/views/Home/components/IntroduceCom.tsx new file mode 100644 index 0000000..bb4cf05 --- /dev/null +++ b/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 ( + <> + + + + +
+ +
+ + HlighCitySwap + HIighCitySwap的诞生，源于创始人Liu Bus对区块链技术的狂热追求，他始终相信区块链技术能够得到更广泛的应用。为此，他做了一个勇敢的决定，放弃在其他领域的投资，身心专注投入到区块链技术实践应用当中去，将自己所熟悉的领域——互联网社交，与区块链技术融合，HighCitySwap由此诞生。这就是我们的开始，感谢你们的支持，HighCity团队将永远前行。 + + + + + + + ) +} + +export default IntroduceCom diff --git a/src/views/Home/index.ts b/src/views/Home/index.ts index 435f759..a0cd5e5 100644 --- a/src/views/Home/index.ts +++ b/src/views/Home/index.ts @@ -1 +1 @@ -export { default } from './Home' +export { default } from './HomeIndex'