From 0010c9ba0c8d64150ef930773106212e61292541 Mon Sep 17 00:00:00 2001 From: myf <> Date: Fri, 15 Apr 2022 16:04:26 +0800 Subject: [PATCH] home --- public/images/home/12.svg | 3 + public/images/home/bg.svg | 10 ++ public/images/home/fg.png | Bin 0 -> 3138 bytes public/images/home/intor.svg | 13 ++ public/images/home/logo.svg | 3 + public/images/home/three.svg | 10 ++ public/locales/zh-CN.json | 3 +- src/views/Home/HomeIndex.tsx | 21 +++ src/views/Home/components/CourseCom.tsx | 112 ++++++++++++++ src/views/Home/components/FlexItemCom.tsx | 31 ++++ src/views/Home/components/FristCom.tsx | 171 +++++++++++++++++++++ src/views/Home/components/IntroduceCom.tsx | 95 ++++++++++++ src/views/Home/index.ts | 2 +- 13 files changed, 472 insertions(+), 2 deletions(-) create mode 100644 public/images/home/12.svg create mode 100644 public/images/home/bg.svg create mode 100644 public/images/home/fg.png create mode 100644 public/images/home/intor.svg create mode 100644 public/images/home/logo.svg create mode 100644 public/images/home/three.svg create mode 100644 src/views/Home/HomeIndex.tsx create mode 100644 src/views/Home/components/CourseCom.tsx create mode 100644 src/views/Home/components/FlexItemCom.tsx create mode 100644 src/views/Home/components/FristCom.tsx create mode 100644 src/views/Home/components/IntroduceCom.tsx 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 0000000000000000000000000000000000000000..3355c582b3c37b74100135400a99e2cc001eb307 GIT binary patch literal 3138 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 literal 0 HcmV?d00001 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'