军团长

public/images/recommend/tip.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #1fc7d4;
+      }
+    </style>
+  </defs>
+  <path id="疑问_1_" data-name="疑问 (1)" class="cls-1" d="M12.5,1.471A11.029,11.029,0,1,1,1.471,12.5,11.041,11.041,0,0,1,12.5,1.471ZM12.5,0A12.5,12.5,0,1,0,25,12.5,12.5,12.5,0,0,0,12.5,0ZM11.452,18.4A1.048,1.048,0,1,0,12.5,17.348,1.048,1.048,0,0,0,11.452,18.4Zm.895-2.359a.736.736,0,0,1-.734-.736,4.75,4.75,0,0,1,2.579-4.116A1.964,1.964,0,0,0,15.1,9.346a1.966,1.966,0,0,0-1.561-1.464,3.254,3.254,0,0,0-2.611.6,2.5,2.5,0,0,0-.773,1.655.737.737,0,0,1-.734.721H9.411a.734.734,0,0,1-.725-.738A3.969,3.969,0,0,1,9.938,7.393a4.511,4.511,0,0,1,4.05-.918c2.9.97,2.693,3.061,2.466,3.832a3.442,3.442,0,0,1-1.687,2.221l0,.009A3.126,3.126,0,0,0,13.084,15.3a.738.738,0,0,1-.738.737Z"/>
+</svg>

public/locales/zh-CN.json

@@ -1078,5 +1078,25 @@
   "December 2022 NFT bonus binding social software":"2022年12月NFT分红绑定社交软件；",
   "In December 2022, HighCity Ecology was preliminarily completed":"2022年12月HighCity生态初步建成；",
   "HighCity Ecology completed in December 2022":"2022年12月HighCity生态建成;",
-  "Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；"
+  "Maintain dividend income growth in December 2022":"2022年12月保持分红收益增长；",
+  "Buy commander NFT":"购买军团长NFT",
+  "Upgrade recommendation rights, can enjoy the share of secondary recommendation":"升级推荐权益，可享有二级推荐的分成",
+  "Enjoy a higher percentage than ordinary users":"享有比普通用户更高的分成比例",
+  "Commander NFT can be traded in the NFT market":"军团长NFT可在NFT市场内进行交易",
+  "First stage sharing ratio":"一级分成比例",
+  "Secondary split ratio":"二级分成比例",
+  "Buy It Now":"立即购买",
+  "recommend":"推荐",
+  "The lower the number of":"下级数量",
+  "NFT total revenue":"NFT总收益",
+  "HCC total revenue":"HCC总收益",
+  "To get profit":"待领收益",
+  "No income is received temporarily":"暂无收益领取",
+  "Upgrade commander":"升级军团长",
+  "Regimental recommendation":"军团长推荐",
+  "Number of secondary subordinates":"二级下级人数",
+  "Number of first-level subordinates":"一级下级人数",
+  "Immediately to receive":"立即领取",
+  "buy again":"再次购买",
+  "Connect the purse":"连接钱包"
 }

src/App.tsx

@@ -49,6 +49,7 @@ const PoolFinder = lazy(() => import('./views/PoolFinder'))
 const RemoveLiquidity = lazy(() => import('./views/RemoveLiquidity'))
 const Referral = lazy(() => import('./views/Referral'))
 const Nft = lazy(() => import('./views/Nft'))
+const Recommend = lazy(() => import('./views/recommend'))
 
 // This config is required for number formatting
 BigNumber.config({
@@ -93,6 +94,9 @@ const App: React.FC = () => {
             <Route path="/nft">
               <Nft />
             </Route>
+            <Route path="/recommend">
+              <Recommend />
+            </Route>
             {/* <Route path="/lottery">
               <Lottery />
             </Route>
@@ -143,6 +147,7 @@ const App: React.FC = () => {
             <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
             <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
             <Route exact strict path="/nft" component={Nft} />
+            <Route exact strict path="/recommend" component={Recommend} />
 
             {/* Redirect */}
             {/* <Route path="/staking">

src/components/Menu/config.ts

@@ -45,6 +45,11 @@ const config: (t: ContextApi['t']) => MenuEntry[] = (t) => [
 	  icon: 'TicketIcon',
 	  href: '/nft'
 	},
+	{
+	  label: t('recommend'),
+	  icon: 'TicketIcon',
+	  href: '/recommend'
+	},
   // {
   //   label: t('Prediction (BETA)'),
   //   icon: 'PredictionsIcon',

src/config/localization/translations.json

@@ -1205,5 +1205,25 @@
   "December 2022 NFT bonus binding social software":"December 2022 NFT bonus binding social software;",
   "In December 2022, HighCity Ecology was preliminarily completed":"In December 2022, HighCity Ecology was preliminarily completed;",
   "HighCity Ecology completed in December 2022":"HighCity Ecology completed in December 2022",
-  "Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;"
+  "Maintain dividend income growth in December 2022":"Maintain dividend income growth in December 2022;",
+  "Buy commander NFT":"Buy commander NFT",
+  "Upgrade recommendation rights, can enjoy the share of secondary recommendation":"Upgrade recommendation rights, can enjoy the share of secondary recommendation",
+  "Enjoy a higher percentage than ordinary users":"Enjoy a higher percentage than ordinary users",
+  "Commander NFT can be traded in the NFT market":"Commander NFT can be traded in the NFT market",
+  "First stage sharing ratio":"First stage sharing ratio",
+  "Secondary split ratio":"Secondary split ratio",
+  "Buy It Now":"Buy It Now",
+  "recommend":"recommend",
+  "The lower the number of":"The lower the number of",
+  "NFT total revenue":"NFT total revenue",
+  "HCC total revenue":"HCC total revenue",
+  "To get profit":"To get profit",
+  "No income is received temporarily":"No income is received temporarily",
+  "Upgrade commander":"Upgrade commander",
+  "Regimental recommendation":"Regimental recommendation",
+  "Number of secondary subordinates":"Number of secondary subordinates",
+  "Number of first-level subordinates":"Number of first-level subordinates",
+  "Immediately to receive":"Immediately to receive",
+  "buy again":"buy again",
+  "Connect the purse":"Connect the purse"
 }

src/views/Home/HomeIndex.tsx

@@ -4,7 +4,6 @@ import FristCom from './components/FristCom'
 import IntroduceCom from './components/IntroduceCom'
 import CourseCom from './components/CourseCom'
 
-
 const Home: React.FC = () => {
   const { t } = useTranslation()
 
@@ -14,7 +13,6 @@ const Home: React.FC = () => {
       <IntroduceCom />
       <CourseCom />
     </>
-
   )
 }
 

src/views/Home/components/CourseCom.tsx

@@ -7,7 +7,7 @@ const FristPage = styled.div`
   background-image: url('/images/home/three.svg');
   background-size: 100%;
   background-repeat: no-repeat;
-    padding:8rem 0 .8rem 0;
+  padding: 8rem 0 0.8rem 0;
 `
 
 const StyledPage = styled(Box)`
@@ -17,15 +17,15 @@ const StyledPage = styled(Box)`
   ${({ theme }) => theme.mediaQueries.sm} {
     padding-top: 24px;
     padding-bottom: 24px;
-    width:80%
+    width: 80%;
   }
 
   ${({ theme }) => theme.mediaQueries.lg} {
     padding-top: 32px;
     padding-bottom: 32px;
-    width:80%
+    width: 80%;
-  }`
+  }
-
+`
 
 const SortDiv = styled.div`
   height: 190px;
@@ -38,21 +38,21 @@ const SortNum = styled.div`
   left: -43px;
   width: 82px;
   height: 82px;
-    background: #1FC7D4;
+  background: #1fc7d4;
   border-radius: 50%;
   font-size: 46px;
-    color:#FAF9FA;
+  color: #faf9fa;
   display: flex;
   align-items: center;
   justify-content: center;
-    z-index:2
+  z-index: 2;
 `
 
 const CardDiv = styled.div`
   width: 372px;
   box-sizing: border-box;
   padding: 28px 40px 16px 26px;
-  border: 1px solid #E7E3EB;
+  border: 1px solid #e7e3eb;
   box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
   border-radius: 25px;
   position: absolute;
@@ -66,17 +66,54 @@ const CardDiv = styled.div`
   }
 `
 
-
 const CourseCom: React.FC = () => {
   const { t } = useTranslation()
 
   const [list, setListState] = useState([
-        { title: t('Stage one: Origin'),id:1, list: [{ text: t('The project concept was born in May 2021') },{text:t('Set up HighClty team in June 2021')},{text:t('May 2021 -- January 2022 Team run-in')}]}, 
+    {
-    { title: t('Stage two: Action'),id:2, list: [{ text: t('In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online') },{text:t('In March 2022, project approval, web design, roadmap announcement, smart contract development')}]}, 
+      title: t('Stage one: Origin'),
-    { title: t('Stage three: Creation'),id:3, list: [{ text: t('Created by NFT in May 2022') },{text:t('June 2022 social software development')}] }, 
+      id: 1,
-    { title: t('Stage four: Integration'),id:4, list: [{ text: t('Launch of social software in December 2022') },{text:t('December 2022 NFT bonus binding social software')},{text:t('In December 2022, HighCity Ecology was preliminarily completed')}]}, 
+      list: [
-    { title: t('Stage five: Closing the curtain'),id:5, list: [{ text: t('HighCity Ecology completed in December 2022') },{text:t('Maintain dividend income growth in December 2022')}]}])
+        { text: t('The project concept was born in May 2021') },
-    
+        { text: t('Set up HighClty team in June 2021') },
+        { text: t('May 2021 -- January 2022 Team run-in') },
+      ],
+    },
+    {
+      title: t('Stage two: Action'),
+      id: 2,
+      list: [
+        {
+          text: t(
+            'In April 2022, social networking and media release activities, HighCity coin started and dividend mechanism went online',
+          ),
+        },
+        { text: t('In March 2022, project approval, web design, roadmap announcement, smart contract development') },
+      ],
+    },
+    {
+      title: t('Stage three: Creation'),
+      id: 3,
+      list: [{ text: t('Created by NFT in May 2022') }, { text: t('June 2022 social software development') }],
+    },
+    {
+      title: t('Stage four: Integration'),
+      id: 4,
+      list: [
+        { text: t('Launch of social software in December 2022') },
+        { text: t('December 2022 NFT bonus binding social software') },
+        { text: t('In December 2022, HighCity Ecology was preliminarily completed') },
+      ],
+    },
+    {
+      title: t('Stage five: Closing the curtain'),
+      id: 5,
+      list: [
+        { text: t('HighCity Ecology completed in December 2022') },
+        { text: t('Maintain dividend income growth in December 2022') },
+      ],
+    },
+  ])
 
   return (
     <>
@@ -84,21 +121,26 @@ const CourseCom: React.FC = () => {
         <StyledPage px={['16px', '24px']} mx="auto" maxWidth="1200px">
           <Flex justifyContent="center">
             <div>
-                           {
+              {list.map((item, index) => {
-                               list.map((item,index) => {
+                return (
-                                    return <SortDiv key={ item.id } style={{ borderLeft:index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}>
+                  <SortDiv
+                    key={item.id}
+                    style={{ borderLeft: index + 1 === list.length ? 'none' : '4px solid #31D0AA' }}
+                  >
                     <SortNum style={{ backgroundColor: index % 2 ? '#7645D9' : '#1FC7D4' }}>{index + 1}</SortNum>
                     <CardDiv style={{ left: index % 2 ? '-420px' : '60px' }}>
                       <Heading>{item.title}</Heading>
-                                            {
+                      {item.list.map((childItem) => {
-                                                item.list.map((childItem) => {
+                        return (
-                                                    return <Text color='textSubtle' marginTop="15px" key={ childItem.text }>{ childItem.text }</Text>
+                          <Text color="textSubtle" marginTop="15px" key={childItem.text}>
-                                                })
+                            {childItem.text}
-                                            }
+                          </Text>
+                        )
+                      })}
                     </CardDiv>
                   </SortDiv>
-                               })
+                )
-                           }
+              })}
             </div>
           </Flex>
         </StyledPage>

src/views/Home/components/FlexItemCom.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import styled from 'styled-components'
 import { Text } from '@pancakeswap/uikit'
 
-
 const ScoreItem = styled.div`
   width: 100%;
   text-algin: center;
@@ -19,12 +18,10 @@ import { Text } from '@pancakeswap/uikit'
 `
 
 export default function FlexItemCom({ name, value }) {
-
   return (
     <ScoreItem>
-            <ItemText color='text'>{ value }</ItemText>
+      <ItemText color="text">{value}</ItemText>
-            <ItemSubText color='textSubtle'>{ name }</ItemSubText>
+      <ItemSubText color="textSubtle">{name}</ItemSubText>
     </ScoreItem>
   )
 }
-

src/views/Home/components/FristCom.tsx

@@ -9,7 +9,7 @@ const FristPage = styled.div`
   background-image: url('/images/home/bg.svg');
   background-size: 100%;
   background-repeat: no-repeat;
-    padding:.9rem 0 .8rem 0;
+  padding: 0.9rem 0 0.8rem 0;
 `
 
 const StyledPage = styled(Box)`
@@ -19,14 +19,15 @@ const StyledPage = styled(Box)`
   ${({ theme }) => theme.mediaQueries.sm} {
     padding-top: 24px;
     padding-bottom: 24px;
-    width:80%
+    width: 80%;
   }
 
   ${({ theme }) => theme.mediaQueries.lg} {
     padding-top: 32px;
     padding-bottom: 32px;
-    width:80%
+    width: 80%;
-  }`
+  }
+`
 
 const RadiusBtn = styled(Button)`
   border-radius: 50px;
@@ -34,17 +35,16 @@ const RadiusBtn = styled(Button)`
   height: 60px;
   font-size: 18px;
   margin: 0px 20px 0 0;
-    background: linear-gradient(269deg, #1FC8D3 0%, #1FD4B0 100%);
+  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
 `
 const WhiteBtn = styled(Button)`
   border-radius: 50px;
   width: 170px;
   height: 60px;
-    border:1px solid #1FC7D4;
+  border: 1px solid #1fc7d4;
   margin: 0px 35px 0 0;
 `
 
-
 const ScoreDiv = styled(Flex)`
   margin-top: 127px;
   background: #fff;
@@ -53,44 +53,53 @@ const ScoreDiv = styled(Flex)`
   border-radius: 15px;
   padding: 59px 0;
 `
+const InfoDiv = styled.div``
 
 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%" }])
+  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">
+          <Flex justifyContent="space-between" alignItems="center" flexDirection="row-reverse" flexWrap="wrap">
-                        <div>
+            <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
+            <InfoDiv>
               <Heading as="h1" scale="xl" mb="24px" color="secondary">
                 High City Coin
               </Heading>
               <Text>
-                                {t('Hcc Info')}<br />
+                {t('Hcc Info')}
-                                {t('Hcc Nft')}<br />
+                <br />
-                                {t('Hcc BTC')}</Text>
+                {t('Hcc Nft')}
+                <br />
+                {t('Hcc BTC')}
+              </Text>
               <Flex alignItems="center" marginTop="60px">
-                                <RadiusBtn variant="primary" scale="sm">{t('Exchange')}</RadiusBtn>
+                <RadiusBtn variant="primary" scale="sm">
-                                <WhiteBtn variant="secondary" scale="sm">{ t('Bazaar') }</WhiteBtn>
+                  {t('Exchange')}
+                </RadiusBtn>
+                <WhiteBtn variant="secondary" scale="sm">
+                  {t('Bazaar')}
+                </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>
+            </InfoDiv>
-                        <Image src="/images/home/logo.svg" alt="" width={315} height={315} />
           </Flex>
           <ScoreDiv justifyContent="space-between">
-                        {
+            {burned.map((item) => {
-                            burned.map(item => {
               return <FlexItemCom key={item.id} name={item.name} value={item.value} />
-                            })
+            })}
-                        }
           </ScoreDiv>
         </StyledPage>
       </FristPage>
-
     </>
-
   )
 }
 

src/views/Home/components/IntroduceCom.tsx

@@ -4,8 +4,8 @@ import { Flex, Heading, Text, BaseLayout, Box,Button,Image } from '@pancakeswap/
 import { useTranslation } from 'contexts/Localization'
 
 const FristPage = styled.div`
-    background: linear-gradient(270deg, #EFF6FF 0%, #E9FDFF 100%);
+  background: linear-gradient(270deg, #eff6ff 0%, #e9fdff 100%);
-    padding:8rem 0 .8rem 0;
+  padding: 8rem 0 0.8rem 0;
 `
 
 const StyledPage = styled(Box)`
@@ -15,17 +15,18 @@ const StyledPage = styled(Box)`
   ${({ theme }) => theme.mediaQueries.sm} {
     padding-top: 24px;
     padding-bottom: 24px;
-    width:80%
+    width: 80%;
   }
 
   ${({ theme }) => theme.mediaQueries.lg} {
     padding-top: 32px;
     padding-bottom: 32px;
-    width:80%
+    width: 80%;
-  }`
+  }
+`
 
 const BoxMain = styled(Box)`
-    background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);
   opacity: 1;
   border-radius: 20px;
@@ -40,7 +41,7 @@ const MainDiv = styled.div`
   margin-left: -76px;
   width: 152px;
   height: 152px;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
   border-radius: 50%;
   opacity: 1;
@@ -50,7 +51,7 @@ const MainDiv = styled.div`
     width: 100%;
     height: 100%;
     border-radius: 50%;
-      background:#E0FFFF;
+    background: #e0ffff;
     padding: 25px;
   }
 `
@@ -67,7 +68,6 @@ const TextCom = styled(Text)`
   line-height: 32px;
 `
 
-
 const IntroduceCom: React.FC = () => {
   const { t } = useTranslation()
 
@@ -78,17 +78,15 @@ const IntroduceCom: React.FC = () => {
           <BoxMain>
             <MainDiv>
               <div>
-                                <Image src='/images/home/intor.svg' alt='' width={75} height={75} />
+                <Image src="/images/home/intor.svg" alt="" width={75} height={75} />
               </div>
             </MainDiv>
-                        <HeadingDiv textAlign='center'>HlighCitySwap</HeadingDiv>
+            <HeadingDiv textAlign="center">HlighCitySwap</HeadingDiv>
             <TextCom>{t('HlighCitySwapInfo')}</TextCom>
           </BoxMain>
         </StyledPage>
       </FristPage>
-            
     </>
-
   )
 }
 

src/views/Nft/component/FlexText.tsx

@@ -6,12 +6,14 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
 
 export default function FlexText({ name, value }) {
-
   return (
-        <Flex justifyContent="flex-end" alignItems='center' marginTop="12px" padding="0 21px">
+    <Flex justifyContent="flex-end" alignItems="center" marginTop="12px" padding="0 21px">
-            <Text color='#6B6472' fontSize="14px">{ name }：</Text>
+      <Text color="#6B6472" fontSize="14px">
-            <Text color='#1FC7D4' fontSize="14px">{ value }</Text>
+        {name}：
+      </Text>
+      <Text color="#1FC7D4" fontSize="14px">
+        {value}
+      </Text>
     </Flex>
   )
-
 }

src/views/Nft/component/StepCom.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { Text, Flex, Image } from '@pancakeswap/uikit'
 
 export default function StepCom() {
-
   const [valNumber, setInputState] = useState(1)
 
   const onAdd = (type) => {
@@ -13,15 +12,15 @@ export default function StepCom(){
       if (valNumber === 0) return
       setInputState(valNumber - 1)
     }
-       
   }
 
   return (
-        <Flex justifyContent="space-between" alignItems='center' width={120}>
+    <Flex justifyContent="space-between" alignItems="center" width={120}>
-            <Image src='/images/nft/sub-icon.png' alt="" onClick={() => onAdd('sub')} width={25} height={25} />
+      <Image src="/images/nft/sub-icon.png" alt="" onClick={() => onAdd('sub')} width={25} height={25} />
-            <Text width={60} textAlign='center' color='#2F3748' fontSize="16px">{valNumber}</Text>
+      <Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
-            <Image src='/images/nft/add-icon.png' alt="1" onClick={() => onAdd('add')} width={25} height={25} />
+        {valNumber}
+      </Text>
+      <Image src="/images/nft/add-icon.png" alt="1" onClick={() => onAdd('add')} width={25} height={25} />
     </Flex>
   )
-
 }

src/views/Nft/index.tsx

@@ -5,7 +5,6 @@ import SwiperCore, { Keyboard, Mousewheel, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Card, Button, Text, Flex, Image } from '@pancakeswap/uikit'
 
-
 import FlexText from './component/FlexText'
 // import Step from './component/Step'
 
@@ -13,11 +12,10 @@ import StepCom from './component/StepCom'
 
 import 'swiper/swiper.min.css'
 
-import 'swiper/components/pagination/pagination.min.css';
+import 'swiper/components/pagination/pagination.min.css'
 
 SwiperCore.use([Keyboard, Mousewheel, Pagination])
 
-
 const MainDiv = styled.div`
   width: 100%;
   min-height: calc(100vh - 64px);
@@ -45,7 +43,6 @@ const StyledPage = styled.div`
     padding-top: 32px;
     min-height: calc(100vh - 64px);
   }
-  
 `
 
 const BodyWrapper = styled(Card)`
@@ -61,12 +58,12 @@ const HindDiv = styled.div`
   position: absolute;
   top: -40px;
   left: 0;
-    z-index:10
+  z-index: 10;
 `
 const BlindboxImage = styled(Image)`
   max-width: 377px;
   max-height: 367px;
-  z-index:9
+  z-index: 9;
 `
 
 const Divs = styled.div`
@@ -106,38 +103,45 @@ const SwiperDiv = styled(Swiper)`
   }
 `
 
-
 const Nft: React.FC = () => {
   const [blindboxList] = useState([{ id: 1 }, { id: 2 }, { id: 3 }])
 
   return (
     <MainDiv>
-            <SwiperDiv loop pagination={{ clickable: true }} spaceBetween={16} freeModeMomentumRatio={0.25} freeModeMomentumVelocityRatio={0.5}>
+      <SwiperDiv
-                {
+        loop
-                    blindboxList.map((item) => {
+        pagination={{ clickable: true }}
-                        return <SwiperSlide key={item.id}>
+        spaceBetween={16}
+        freeModeMomentumRatio={0.25}
+        freeModeMomentumVelocityRatio={0.5}
+      >
+        {blindboxList.map((item) => {
+          return (
+            <SwiperSlide key={item.id}>
               <StyledPage>
                 <Divs>
                   <BodyWrapper>
                     <HindDiv>
-                                            <Image src='/images/nft/hint.png' alt="" width={32} height={32} />
+                      <Image src="/images/nft/hint.png" alt="" width={32} height={32} />
                     </HindDiv>
-                                        <Flex justifyContent='center' marginTop="-40px">
+                    <Flex justifyContent="center" marginTop="-40px">
-                                            <BlindboxImage src='/images/nft/blindbox.png' alt="" width={377} height={367} />
+                      <BlindboxImage src="/images/nft/blindbox.png" alt="" width={377} height={367} />
                     </Flex>
-                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
-                                            <Text color='textSubtle'>系列</Text>
+                      <Text color="textSubtle">系列</Text>
-                                            <Text color='text'>法式盛宴</Text>
+                      <Text color="text">法式盛宴</Text>
                     </DetailInfo>
-                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
-                                            <Text color='textSubtle'>价格</Text>
+                      <Text color="textSubtle">价格</Text>
-                                            <Flex alignItems='center' justifyContent="flex-end">
+                      <Flex alignItems="center" justifyContent="flex-end">
-                                                <Text color='#1FC7D4' fontSize="24px">500</Text>
+                        <Text color="#1FC7D4" fontSize="24px">
-                                                <Text color='text'>黄油</Text>
+                          500
+                        </Text>
+                        <Text color="text">黄油</Text>
                       </Flex>
                     </DetailInfo>
-                                        <DetailInfo justifyContent='space-between' alignItems='center'>
+                    <DetailInfo justifyContent="space-between" alignItems="center">
-                                            <Text color='textSubtle'>数量</Text>
+                      <Text color="textSubtle">数量</Text>
                       <StepCom />
                     </DetailInfo>
                     <FlexText name="钱包中的 BUTTER" value="0" />
@@ -147,8 +151,8 @@ const Nft: React.FC = () => {
                 </Divs>
               </StyledPage>
             </SwiperSlide>
-                    })
+          )
-                }
+        })}
       </SwiperDiv>
     </MainDiv>
   )

src/views/recommend/components/BuyNftModal.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Button, Modal, Image } from '@pancakeswap/uikit'
+import TextFlex from './TextFlex'
+import FlexCom from './FlexCom'
+
+const ModalDiv = styled(Modal)`
+  & > .jCXCIB {
+    border-bottom: none;
+    text-align: center;
+    & > .hMvvbb {
+      justify-content: center;
+    }
+  }
+`
+
+const InfoDiv = styled.div`
+  box-sizing: border-box;
+  padding: 30px 26px;
+  /* width: calc(100% - 280px); */
+  margin-left: 2rem;
+  box-shadow: 0px 1px 8px rgba(15, 161, 146, 0.28);
+`
+const UpBtn = styled(Button)`
+  width: 40%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+export default function BuyNftModal() {
+  const { t } = useTranslation()
+
+  const onDismiss = () => {
+    console.log('aaa')
+  }
+  return (
+    <ModalDiv title={t('Buy commander NFT')} onDismiss={onDismiss} style={{ width: '50rem' }}>
+      <Flex alignItems="center" flexWrap="wrap" justifyContent="center">
+        <Image src="/images/recommend/logo.svg" width={300} height={300} marginBottom="20px" />
+        <InfoDiv>
+          <TextFlex
+            text={t('Upgrade recommendation rights, can enjoy the share of secondary recommendation')}
+            color="#FEFDF1"
+          />
+          <TextFlex text={t('Enjoy a higher percentage than ordinary users')} color="#FFF9FA" />
+          <TextFlex text={t('Commander NFT can be traded in the NFT market')} color="#F5FFF9" />
+          <FlexCom name={t('First stage sharing ratio')} value="10％" />
+          <FlexCom name={t('Secondary split ratio')} value="5％" />
+        </InfoDiv>
+      </Flex>
+
+      <Flex>
+        <UpBtn>{t('Buy It Now')}</UpBtn>
+      </Flex>
+    </ModalDiv>
+  )
+}

src/views/recommend/components/ConnectedComponent.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading, Image, useModal } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import BuyNftModal from './BuyNftModal'
+import HeaderMian from './HeaderMain'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 30px;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.textDisabled};
+  color: ${({ theme }) => theme.colors.textDisabled};
+`
+
+const UpBtn = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+  border: none;
+`
+
+const FooterBtn = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 30px 20px 30px;
+`
+const MainDiv = styled.div`
+  padding: 0 30px;
+`
+
+export default function ConnectedCom() {
+  const { t } = useTranslation()
+  const [onBuyModal] = useModal(<BuyNftModal />)
+
+  return (
+    <MainDiv>
+      <HeaderMian title={t('recommend')} />
+      <>
+        <FlexCom name={t('The lower the number of')} value="100000(人)" />
+        <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+        <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+      </>
+
+      <FooterBtn>
+        <ButtonDiv variant="secondary">{t('No income is received temporarily')}</ButtonDiv>
+        <UpBtn onClick={onBuyModal}>{t('Upgrade commander')}</UpBtn>
+      </FooterBtn>
+    </MainDiv>
+  )
+}

src/views/recommend/components/FlexCom.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Text } from '@pancakeswap/uikit'
+
+const FlexDiv = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+`
+
+export default function FlexCom({
+  name,
+  value,
+  paddings = '0',
+  leftColor = 'text',
+  RightColor = 'textSubtle',
+  color = '#1FC7D4',
+}) {
+  return (
+    <FlexDiv style={{ padding: paddings }}>
+      <Text color={leftColor}>{name}</Text>
+      <Text color={RightColor}>{value}</Text>
+    </FlexDiv>
+  )
+}

src/views/recommend/components/HeaderMain.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 30px;
+  position: relative;
+`
+
+const TipDiv = styled(Image)`
+  position: absolute;
+  cursor: pointer;
+  top: 24px;
+  left: 0;
+`
+export default function HeaderMian({ title }) {
+  return (
+    <HeadingDiv scale="xl" mb="24px" textAlign="center">
+      <TipDiv src="/images/recommend/tip.svg" width={25} height={25} />
+      {title}
+    </HeadingDiv>
+  )
+}

src/views/recommend/components/RegimentalComponent.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Flex, Text, Image, Button, Heading } from '@pancakeswap/uikit'
+import FlexCom from './FlexCom'
+import HeaderMian from './HeaderMain'
+
+const MainDiv = styled.div`
+  width: 60%;
+`
+const HeaderFlex = styled(Flex)`
+  padding-left: 20px;
+`
+
+const BuyButton = styled(Button)`
+  width: 150px;
+  border-radius: 50px;
+  margin-left: 20px;
+  /* background: ${({ theme }) => theme.colors.gradients.violet}; */
+  background: linear-gradient(180deg, #7be0fc 0%, #ac7bf1 100%);
+`
+
+const ContentFlex = styled(Flex)`
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+`
+
+const InfoDiv = styled.div`
+  width: calc(50% - 40px);
+  margin: 0 20px;
+  /* width: 400px; */
+  min-width: 315px;
+  background: #ffffff;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 40px;
+  box-sizing: border-box;
+  margin-top: 50px;
+  padding: 0 30px 35px 30px;
+`
+const ButtonDiv = styled(Button)`
+  width: 100%;
+  margin: 20px auto 0px auto;
+  border-radius: 50px;
+  border: 1px solid ${({ theme }) => theme.colors.primaryDark};
+  color: ${({ theme }) => theme.colors.primaryDark};
+`
+export default function RegimentalCom() {
+  const { t } = useTranslation()
+  return (
+    <MainDiv>
+      <HeaderFlex>
+        <Image src="/images/recommend/logo.svg" width={60} height={60} />
+        <BuyButton>{t('buy again')}</BuyButton>
+      </HeaderFlex>
+      <ContentFlex>
+        <InfoDiv>
+          <HeaderMian title={t('recommend')} />
+          <FlexCom name={t('The lower the number of')} value="100000(人)" />
+          <FlexCom name={t('NFT total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('HCC total revenue')} value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+        </InfoDiv>
+        <InfoDiv>
+          <HeaderMian title={t('Regimental recommendation')} />
+          <FlexCom name={t('Number of first-level subordinates')} value="100000(人)" />
+          <FlexCom name={t('NFT total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+          <FlexCom name={t('Number of secondary subordinates')} value="" />
+          <FlexCom name={t('HCC total revenue')} paddings="0 10px" leftColor="textSubtle" value="100000.00(HCC)" />
+          <FlexCom name={t('To get profit')} value="100000.00(HCC)" />
+          <ButtonDiv variant="secondary">{t('Immediately to receive')}</ButtonDiv>
+          {/* <ButtonNoDiv variant="secondary">{t('No income is received temporarily)}</ButtonNoDiv> */}
+        </InfoDiv>
+      </ContentFlex>
+    </MainDiv>
+  )
+}

src/views/recommend/components/TextFlex.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '@pancakeswap/uikit'
+
+const MainDiv = styled(Flex)`
+  box-sizing: border-box;
+  padding: 14px 36px;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  color: #2f2e41;
+  font-size: 14px;
+  justify-content: center;
+`
+
+export default function TextFlex({ color, text = '' }) {
+  return <MainDiv style={{ background: color }}>{text}</MainDiv>
+}

src/views/recommend/components/UnunitedCom.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { useTranslation } from 'contexts/Localization'
+import { Button, Heading } from '@pancakeswap/uikit'
+
+const HeadingDiv = styled(Heading)`
+  padding-top: 5rem;
+`
+
+const ButtonDiv = styled(Button)`
+  width: 80%;
+  margin: 5rem auto 3rem auto;
+  margin-left: 10%;
+`
+export default function UnunitedCom() {
+  const { t } = useTranslation()
+  return (
+    <>
+      <HeadingDiv scale="xl" mb="24px" textAlign="center">
+        {t('recommend')}
+      </HeadingDiv>
+      <ButtonDiv>{t('Connect the purse')}</ButtonDiv>
+    </>
+  )
+}

src/views/recommend/index.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Card, Button, Text, Flex, Image, Heading } from '@pancakeswap/uikit'
+
+import UnunitedCom from './components/UnunitedCom'
+import ConnectedCom from './components/ConnectedComponent'
+import RegimentalCom from './components/RegimentalComponent'
+
+const MainDiv = styled.div`
+  min-height: calc(100vh - 64px);
+  background-image: url('/images/recommend/bg.svg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const ContengDiv = styled.div`
+  width: 60%;
+  background: rgba(255, 255, 255, 0.39);
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  border-radius: 40px;
+`
+
+const Nft: React.FC = () => {
+  //  邀请false普通邀请 true军团长邀请
+  const [type, typeState] = useState(false)
+  //  是否连接钱包
+  const [status, statusState] = useState(true)
+
+  return (
+    <MainDiv>
+      {type ? <RegimentalCom /> : <ContengDiv>{status ? <ConnectedCom /> : <UnunitedCom />}</ContengDiv>}
+    </MainDiv>
+  )
+}
+export default Nft