{"version":3,"sources":["views/Home/components/CompositeImage.tsx","views/Home/components/Hero.tsx","views/Home/components/SalesSection/data.ts","views/Home/components/ColoredWordHeading.tsx","views/Home/components/SalesSection/index.tsx","views/Home/components/Footer.tsx","views/Home/components/CakeDataRow.tsx","views/Home/index.tsx","components/PageSection/svg/CurvedSvg.tsx","components/PageSection/CurvedDivider.tsx","components/PageSection/index.tsx","views/Nft/mint/Home/DisplayTimeLeft.tsx"],"names":["Resolution","Hero","t","useTranslation","account","useWeb3React","id","position","flexDirection","alignItems","justifyContent","mt","flex","paddingX","scale","color","mb","style","gap","variant","onClick","registerToken","tokens","plearn","address","symbol","decimals","mr","pcc","padding","ConnectWalletButton","to","width","tradeAnyThingSectionData","headingText","useColorWordHeading","bodyText","reverse","primaryButton","text","external","images","path","attributes","src","alt","cakeSectionData","floatingAnim","x","y","keyframes","Wrapper","styled","Box","maxHeight","DummyImg","img","ImageWrapper","getImageUrl","base","imageSrc","resolution","getSrcSet","MD","LG","CompositeImage","srcSet","map","image","pl","pt","ColoredWordHeading","firstColor","props","theme","useTheme","split","firstWord","remainingWords","slice","join","displayedColor","colors","secondary","SalesSection","headingColor","bodyColor","headingTranslatedText","bodyTranslatedText","ml","alignSelf","href","bold","fontSize","height","BgWrapper","div","Flex","Footer","Container","mediaQueries","md","textAlign","fontWeight","StyledColumn","radii","default","primary","DataInfoGrid","sm","PlearnDataRow","totalSupply","useTotalSupply","burnedBalance","getBalanceNumber","useBurnedBalance","cakeSupply","poolTvl","usePoolTVL","totalValueLocked","useFarmTVL","plus","toNumber","tvlString","formatLocalisedCompactNumber","mcap","usePricePlearnBusd","times","mcapString","Balance","lineHeight","value","my","tvl","gt","marketCap","cakeEmissions","StyledHeroPageSection","PageSection","lg","Home","useMatchBreakpoints","isMobile","roundData","isTablet","useGetNftRoundData","remainingNFT","collectionData","maxSupply","mintedTokenIds","length","endDateCloseBuy","Date","Number","timeLeft","calculateCountdown","HomeSectionContainerStyles","days","hours","min","margin","maxWidth","paddingLeft","paddingRight","Page","innerProps","paddingTop","paddingBottom","backgroundImage","backgroundPosition","backgroundSize","index","hasCurvedDivider","p","borderRadius","backgroundColor","textDecoration","px","minWidth","isFetching","marginTop","as","Link","background","sharedStyles","clipPath","clipFill","css","isDark","dark","light","ConcaveContainer","ConvexContainer","ConvexTop","clipPathUnits","d","ConvexBottom","ConcaveTop","ConcaveBottom","dividerFill","ComponentWrapper","CurvedDivider","dividerPosition","dividerComponent","concave","showConvexTop","showConvexBottom","showConcaveTop","showConcaveBottom","BackgroundColor","getPadding","ChildrenWrapper","children","svgFill","concaveDivider","containerProps","TimeHeading","Heading"],"mappings":"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","file":"static/js/29.812b83a6.chunk.js","sourcesContent":["import React from 'react'\nimport styled, { keyframes } from 'styled-components'\nimport { Box } from '@plearn/uikit'\n\nconst floatingAnim = (x: string, y: string) => keyframes`\n  from {\n    transform: translate(0,  0px);\n  }\n  50% {\n    transform: translate(${x}, ${y});\n  }\n  to {\n    transform: translate(0, 0px);\n  }  \n`\n\nconst Wrapper = styled(Box)<{ maxHeight: string }>`\n  position: relative;\n  max-height: ${({ maxHeight }) => maxHeight};\n\n  & :nth-child(2) {\n    animation: ${floatingAnim('8px', '15px')} 3s ease-in-out infinite;\n    animation-delay: 1s;\n  }\n\n  & :nth-child(3) {\n    animation: ${floatingAnim('5px', '10px')} 3s ease-in-out infinite;\n    animation-delay: 0.66s;\n  }\n\n  & :nth-child(4) {\n    animation: ${floatingAnim('6px', '5px')} 3s ease-in-out infinite;\n    animation-delay: 0.33s;\n  }\n\n  & :nth-child(5) {\n    animation: ${floatingAnim('4px', '12px')} 3s ease-in-out infinite;\n    animation-delay: 0s;\n  }\n`\n\nconst DummyImg = styled.img<{ maxHeight: string }>`\n  max-height: ${({ maxHeight }) => maxHeight};\n  visibility: hidden;\n`\n\nconst ImageWrapper = styled(Box)`\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  max-width: 370px;\n\n  img {\n    max-height: 100%;\n    width: auto;\n  }\n`\n\nenum Resolution {\n  MD = '1.5x',\n  LG = '2x',\n}\ninterface ImageAttributes {\n  src: string\n  alt: string\n}\n\nexport interface CompositeImageProps {\n  path: string\n  attributes: ImageAttributes[]\n}\n\ninterface ComponentProps extends CompositeImageProps {\n  animate?: boolean\n  maxHeight?: string\n}\n\nexport const getImageUrl = (base: string, imageSrc: string, resolution?: Resolution): string =>\n  `${base}${imageSrc}${resolution ? `@${resolution}.png` : '.png'}`\n\nexport const getSrcSet = (base: string, imageSrc: string) => {\n  return `${getImageUrl(base, imageSrc)} 512w, \n  ${getImageUrl(base, imageSrc, Resolution.MD)} 768w, \n  ${getImageUrl(base, imageSrc, Resolution.LG)} 1024w,`\n}\n\nconst CompositeImage: React.FC<ComponentProps> = ({ path, attributes, maxHeight = '512px' }) => {\n  return (\n    <Wrapper maxHeight={maxHeight}>\n      <DummyImg\n        src={getImageUrl(path, attributes[0].src)}\n        maxHeight={maxHeight}\n        srcSet={getSrcSet(path, attributes[0].src)}\n      />\n      {attributes.map((image) => (\n        <ImageWrapper key={image.src} pl={[null, null, null, \"100px\"]} pt={[null, null, null, \"70px\"]} >\n          <img src={getImageUrl(path, image.src)} srcSet={getSrcSet(path, image.src)} alt={image.alt} />\n        </ImageWrapper>\n      ))}\n    </Wrapper>\n  )\n}\n\nexport default CompositeImage\n","import React from 'react'\nimport { Link } from 'react-router-dom'\nimport { Flex, Heading, Button, Text, MetamaskIcon } from '@plearn/uikit'\nimport { useWeb3React } from '@web3-react/core'\nimport { useTranslation } from 'contexts/Localization'\nimport ConnectWalletButton from 'components/ConnectWalletButton'\nimport tokens from 'config/constants/tokens'\nimport { registerToken } from 'utils/wallet'\n\nconst Hero = () => {\n  const { t } = useTranslation()\n  const { account } = useWeb3React()\n\n  return (\n    <>\n      {/* <BgWrapper>\n        <InnerWrapper>{theme.isDark ? <SlideSvgDark width=\"100%\" /> : <SlideSvgLight width=\"100%\" />}</InnerWrapper>\n      </BgWrapper> */}\n      <Flex\n        id=\"homepage-hero\"\n        position=\"relative\"\n        flexDirection={['row', null, null, 'row']}\n        alignItems={['flex-end', null, null, 'center']}\n        justifyContent=\"center\"\n        mt={[account ? '100px' : '50px', null, '100px']}\n        // pl={[\"6px\", \"6px\", null, null]}\n        // pr={[\"6px\", \"6px\", null, null]}\n      >\n        <Flex flex=\"1\" flexDirection=\"column\" paddingX=\"10px\">\n          <Heading scale=\"xl\" color=\"primary\" mb=\"24px\">\n            {t('PLEARN SWAP')}\n          </Heading>\n          <Text color=\"primaryLight\" mb=\"24px\">\n            PLEARN is a DeFi (Decentralized Finance Platform) operated on BNB Smart Chain (BSC) with all transactions\n            handled by smart contracts which ensure accountability and transparency at minimum transaction fee. PLEARN\n            is unique because investors will not only benefit from yield but also from privileges from our partners in\n            the area of travel, lifestyle, and beyond.\n          </Text>\n          {/* <Flex mb=\"8px\" justifyContent={['flex-start', 'flex-start', 'flex-start']} style={{ gap: '8px' }}>\n            <Button\n              variant=\"secondary\"\n              onClick={() => registerToken(tokens.plearn.address, tokens.plearn.symbol, tokens.plearn.decimals)}\n            >\n              <MetamaskIcon mr=\"6px\" />\n              <Text color=\"bronze\">{t('Add PLN to Metamask')}</Text>\n            </Button>\n          </Flex> */}\n          <Flex flexDirection={['column', 'column', 'row', 'row']} style={{ gap: '8px' }}>\n            <Button\n              variant=\"secondary\"\n              scale=\"md\"\n              onClick={() => registerToken(tokens.plearn.address, tokens.plearn.symbol, tokens.plearn.decimals)}\n            >\n              <MetamaskIcon mr=\"6px\" />\n              <Text color=\"bronze\">{t('Add PLN')}</Text>\n            </Button>\n            <Button\n              variant=\"secondary\"\n              scale=\"md\"\n              onClick={() => registerToken(tokens.pcc.address, tokens.pcc.symbol, tokens.pcc.decimals)}\n            >\n              <MetamaskIcon mr=\"6px\" />\n              <Text color=\"bronze\">{t('Add PCC')}</Text>\n            </Button>\n          </Flex>\n          <Flex padding=\"14px 0px\" flexDirection={['column', 'column', 'row', 'row']}>\n            {!account && <ConnectWalletButton mr=\"8px\" />}\n            <Link to=\"/swap\">\n              <Button width={['100%', '100%', '290px', '290px']} variant={!account ? 'secondary' : 'primary'}>\n                {t('Trade Now')}\n              </Button>\n            </Link>\n          </Flex>\n        </Flex>\n        {/* <Flex\n          height={['192px', null, null, '100%']}\n          width={['192px', null, null, '100%']}\n          flex={[null, null, null, '1']}\n          mb={['24px', null, null, '0']}\n          position=\"relative\"\n        >\n          <BunnyWrapper>\n            <img src={`${imagePath}${imageSrc}.png`} srcSet={getSrcSet(imagePath, imageSrc)} alt={t('Lunar bunny')} />\n          </BunnyWrapper>\n          <StarsWrapper>\n            <CompositeImage {...starsImage} />\n          </StarsWrapper>\n        </Flex> */}\n      </Flex>\n    </>\n  )\n}\n\nexport default Hero\n","import { SalesSectionProps } from '.'\n\nexport const tradeAnyThingSectionData: SalesSectionProps = {\n  headingText: 'PLN to popular crypto and vice versa in a heart beat.',\n  useColorWordHeading: false,\n  bodyText: 'PLN can be swapped into many popular tokens available on BNB Smart Chain.',\n  reverse: true,\n  primaryButton: {\n    to: '/swap',\n    text: 'Trade Now',\n    external: false,\n  },\n  // secondaryButton: {\n  //   to: 'https://docs.pancakeswap.finance/',\n  //   text: 'Learn',\n  //   external: true,\n  // },\n  images: {\n    path: '/images/',\n    attributes: [{ src: 'coin_stacked', alt: 'Tokens' }],\n  },\n}\n\nexport const earnSectionData: SalesSectionProps = {\n  headingText: 'Your earning and enjoyment go hand in hand.',\n  headingColor: 'white',\n  useColorWordHeading: false,\n  bodyText:\n    'Stake PLN or farm PLN with other crypto and get more PLN plus extra lifestyle perks from your ranking and tier.',\n  bodyColor: 'white',\n  reverse: true,\n  primaryButton: {\n    to: '/farms',\n    text: 'Explore',\n    external: false,\n  },\n  // secondaryButton: {\n  //   to: 'https://docs.pancakeswap.finance/products/yield-farming',\n  //   text: 'Learn',\n  //   external: true,\n  // },\n  images: null,\n}\n\nexport const cakeSectionData: SalesSectionProps = {\n  headingText: 'PLN is where earning and enjoyment go hand in hand.',\n  useColorWordHeading: false,\n  bodyText:\n    'PLN is Plearn’s platform token which is the center of all transactions on the platform and beyond. You can easily buy, swap, stake, PLN.',\n  reverse: false,\n  primaryButton: {\n    to: '/swap?outputCurrency=0xBe0D3526fc797583Dada3F30BC390013062A048B',\n    text: 'Trade Now',\n    external: false,\n  },\n\n  images: null,\n}\n","import React from 'react'\nimport { Colors, Heading, TextProps } from '@plearn/uikit'\nimport useTheme from 'hooks/useTheme'\n\ninterface HeadingProps extends TextProps {\n  text: string\n  firstColor?: keyof Colors\n}\n\nconst ColoredWordHeading: React.FC<HeadingProps> = ({ text, firstColor, mb = '24px', ...props }) => {\n  const { theme } = useTheme()\n  const split = text.split(' ')\n  const firstWord = split[0]\n  const remainingWords = split.slice(1).join(' ')\n  const displayedColor = (theme.colors[firstColor] as string) ?? theme.colors.secondary\n\n  return (\n    <Heading scale=\"xl\" mb={mb} {...props}>\n      <span style={{ color: displayedColor }}>{firstWord} </span>\n      {remainingWords}\n    </Heading>\n  )\n}\n\nexport default ColoredWordHeading\n","import React from 'react'\nimport { Flex, Text, Button, Link, Heading } from '@plearn/uikit'\nimport { Link as RouterLink } from 'react-router-dom'\nimport { useTranslation } from 'contexts/Localization'\nimport CompositeImage, { CompositeImageProps } from '../CompositeImage'\nimport ColoredWordHeading from '../ColoredWordHeading'\n\ninterface SalesSectionButton {\n  to: string\n  text: string\n  external: boolean\n}\n\nexport interface SalesSectionProps {\n  headingText: string\n  headingColor?: string\n  bodyText: string\n  bodyColor?: string\n  reverse: boolean\n  primaryButton: SalesSectionButton\n  // secondaryButton: SalesSectionButton\n  images: CompositeImageProps\n  useColorWordHeading?: boolean\n}\n\nconst SalesSection: React.FC<SalesSectionProps> = (props) => {\n  const { t } = useTranslation()\n\n  const { headingText, headingColor = \"primary\", bodyText, bodyColor = \"textSubtle\", reverse, primaryButton, images, useColorWordHeading = true } = props\n\n  const headingTranslatedText = t(headingText)\n  const bodyTranslatedText = t(bodyText)\n\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex\n        flexDirection={['column-reverse', null, null, reverse ? 'row-reverse' : 'row']}\n        alignItems={['flex-end', null, null, 'center']}\n        justifyContent=\"center\"\n      >\n        <Flex\n          flexDirection=\"column\"\n          flex=\"1\"\n          ml={[null, null, null, reverse && '0px']}\n          mr={[null, null, null, !reverse && '64px']}\n          alignSelf={['flex-start', null, null, 'center']}\n        >\n          {useColorWordHeading ?\n          <ColoredWordHeading text={headingTranslatedText} />\n          : <Heading scale=\"lg\" mb=\"24px\" color={headingColor}>{headingTranslatedText}</Heading>\n        }\n          <Text color={bodyColor} mb=\"24px\">\n            {bodyTranslatedText}\n          </Text>\n          <Flex>\n            <Button mr=\"16px\">\n              {primaryButton.external ? (\n                <Link external href={primaryButton.to}>\n                  <Text color=\"card\" bold fontSize=\"16px\">\n                    {t(primaryButton.text)}\n                  </Text>\n                </Link>\n              ) : (\n                <RouterLink to={primaryButton.to}>\n                  <Text color=\"card\" bold fontSize=\"16px\">\n                    {t(primaryButton.text)}\n                  </Text>\n                </RouterLink>\n              )}\n            </Button>\n            {/* {secondaryButton.external ? (\n              <Link external href={secondaryButton.to}>\n                {t(secondaryButton.text)}\n              </Link>\n            ) : (\n              <RouterLink to={secondaryButton.to}>{t(secondaryButton.text)}</RouterLink>\n            )} */}\n          </Flex>\n        </Flex>\n        {images && (\n          <Flex\n            height={['192px', null, null, '100%']}\n            width={['192px', null, null, '100%']}\n            flex={[null, null, null, '1']}\n            mb={['24px', null, null, '0']}\n          >\n            <CompositeImage {...images} maxHeight=\"400px\" />\n          </Flex>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nexport default SalesSection\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Flex, Heading, Text, Link, Button } from '@plearn/uikit'\nimport { useTranslation } from 'contexts/Localization'\nimport ConnectWalletButton from 'components/ConnectWalletButton'\nimport Container from 'components/Layout/Container'\nimport { useWeb3React } from '@web3-react/core'\n// import SunburstSvg from './SunburstSvg'\n// import CompositeImage from './CompositeImage'\n\nconst BgWrapper = styled.div`\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  background: ${({ theme }) => theme.colors.secondary};\n`\n\n// const StyledSunburst = styled(SunburstSvg)`\n//   height: 350%;\n//   width: 350%;\n\n//   ${({ theme }) => theme.mediaQueries.xl} {\n//     height: 400%;\n//     width: 400%;\n//   }\n// `\n\nconst Wrapper = styled(Flex)`\n  z-index: 1;\n  position: relative;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n`\n\nconst FloatingPancakesWrapper = styled(Container)`\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  visibility: hidden;\n\n  ${({ theme }) => theme.mediaQueries.md} {\n    visibility: visible;\n  }\n`\n\nconst TopLeftImgWrapper = styled(Flex)`\n  position: absolute;\n  left: 0;\n  top: 0;\n`\n\n// const BottomRightImgWrapper = styled(Flex)`\n//   position: absolute;\n//   right: 0;\n//   bottom: 0;\n// `\n\n// const topLeftImage = {\n//   path: '/images/home/flying-pancakes/',\n//   attributes: [\n//     { src: '1-bottom', alt: 'Pancake flying on the bottom' },\n//     { src: '1-left', alt: 'Pancake flying on the left' },\n//     { src: '1-top', alt: 'Pancake flying on the top' },\n//   ],\n// }\n\n// const bottomRightImage = {\n//   path: '/images/home/flying-pancakes/',\n//   attributes: [\n//     { src: '2-bottom', alt: 'Pancake flying on the bottom' },\n//     { src: '2-top', alt: 'Pancake flying on the top' },\n//     { src: '2-right', alt: 'Pancake flying on the right' },\n//   ],\n// }\n\nconst Footer = () => {\n  const { t } = useTranslation()\n  const { account } = useWeb3React()\n\n  return (\n    <>\n      <BgWrapper>\n        <Flex alignItems=\"center\" justifyContent=\"center\" width=\"100%\" height=\"100%\">\n          {/* <StyledSunburst /> */}\n        </Flex>\n      </BgWrapper>\n      {/* <FloatingPancakesWrapper>\n        <TopLeftImgWrapper>\n          <CompositeImage {...topLeftImage} maxHeight=\"256px\" />\n        </TopLeftImgWrapper>\n        <BottomRightImgWrapper>\n          <CompositeImage {...bottomRightImage} maxHeight=\"256px\" />\n        </BottomRightImgWrapper>\n      </FloatingPancakesWrapper> */}\n      <Wrapper>\n        <Heading textAlign=\"center\" mb=\"24px\" scale=\"xl\" color=\"primary\">\n          {t('Start earning and enjoying life now.')}\n        </Heading>\n        <Text textAlign=\"center\" color=\"white\">\n          {t('Click connect wallet to explore investment options and benefits.')}\n        </Text>\n        <Text mb=\"18px\" bold color=\"white\">\n          {t('You can also visit our lifestyle partners below.')}\n        </Text>\n        <Flex flexDirection={[\"column\", \"column\", \"row\", \"row\"]}>\n          <Button scale=\"md\" variant=\"secondary\" width={170} mt=\"8px\">\n            <Link external href=\"https://phillclub.com\"  style={{ fontWeight: 300 }}>\n              {t('Phill Club')}\n            </Link>\n          </Button>\n          <Button variant=\"secondary\" width={170} mt=\"8px\" ml={[\"0\", \"0\", \"10px\", \"10px\"]}>\n            <Link external href=\"https://plearnclub.com\"  style={{ fontWeight: 300 }}>\n              {t('Plearn Club')}\n            </Link>\n          </Button>\n        </Flex>\n        {!account && <ConnectWalletButton mt=\"24px\" />}\n      </Wrapper>\n    </>\n  )\n}\n\nexport default Footer\n","import React from 'react'\nimport styled from 'styled-components'\nimport { useTotalSupply, useBurnedBalance } from 'hooks/useTokenBalance'\nimport { getBalanceNumber, formatLocalisedCompactNumber } from 'utils/formatBalance'\nimport { usePricePlearnBusd, useFarmTVL } from 'state/farms/hooks'\nimport { usePoolTVL, useFetchUnlockedTokenAndRewardTokenFoundingInvestorPool } from 'state/pools/hooks'\nimport { Flex, Text, Heading, Skeleton } from '@plearn/uikit'\nimport { useTranslation } from 'contexts/Localization'\nimport Balance from 'components/Balance'\nimport tokens from 'config/constants/tokens'\n\nconst StyledColumn = styled(Flex)`\n  flex-direction: column;\n  border-radius: ${({ theme }) => theme.radii.default};\n\n  padding: 16px 16px;\n  border: 1px ${({ theme }) => theme.colors.primary} solid;\n`\n\nconst DataInfoGrid = styled.div`\n  display: grid;\n  grid-gap: 16px 8px;\n  margin-top: 24px;\n  grid-template-columns: repeat(2, auto);\n\n  ${({ theme }) => theme.mediaQueries.sm} {\n    grid-gap: 16px;\n  }\n\n  ${({ theme }) => theme.mediaQueries.md} {\n    grid-gap: 32px;\n    grid-template-columns: repeat(2, auto);\n  }\n`\n\nconst emissionsPerBlock = 0\nconst startSupply = 78000000\nconst initialLiquidity = 13000000\n\nconst PlearnDataRow = () => {\n  const { t } = useTranslation()\n  const totalSupply = useTotalSupply()\n  const burnedBalance = getBalanceNumber(useBurnedBalance(tokens.plearn.address))\n  const cakeSupply = totalSupply ? getBalanceNumber(totalSupply) - burnedBalance : 0\n  const poolTvl = usePoolTVL()\n  const farmTvl = useFarmTVL()\n  const totalValueLocked = farmTvl.plus(poolTvl).toNumber()\n  const tvlString = totalValueLocked ? formatLocalisedCompactNumber(totalValueLocked) : '-'\n  const cakePriceBusd = usePricePlearnBusd()\n  const mcap = cakePriceBusd.times(cakeSupply)\n  const mcapString = formatLocalisedCompactNumber(mcap.toNumber())\n\n  // const unlockedTokenAndRewardTokenFoundingInvestorPool = useFetchUnlockedTokenAndRewardTokenFoundingInvestorPool()\n  // const circulatingSupply = cakeSupply - startSupply + initialLiquidity + unlockedTokenAndRewardTokenFoundingInvestorPool\n\n  return (\n    <DataInfoGrid>\n      <StyledColumn>\n        <Text color=\"textSubtle\">{t('Total supply')}</Text>\n        {cakeSupply ? (\n          <Balance color=\"primary\" decimals={0} lineHeight=\"1.1\" fontSize=\"24px\" bold value={cakeSupply} />\n        ) : (\n          <Skeleton height={24} width={126} my=\"4px\" />\n        )}\n      </StyledColumn>\n      <StyledColumn>\n        <Text color=\"textSubtle\">{t('Total value locked')}</Text>\n        {totalValueLocked ? (\n          <Heading scale=\"md\" color=\"primary\">\n            {t('$%tvl%', { tvl: tvlString })}\n          </Heading>\n        ) : (\n          <Skeleton height={24} width={126} my=\"4px\" />\n        )}\n      </StyledColumn>\n      {/* <StyledColumn>\n        <Text color=\"textSubtle\">{t('Burned to date')}</Text>\n        {burnedBalance ? (\n          <Balance color=\"primary\" decimals={0} lineHeight=\"1.1\" fontSize=\"24px\" bold value={burnedBalance} />\n        ) : (\n          <Skeleton height={24} width={126} my=\"4px\" />\n        )}\n      </StyledColumn> */}\n      <StyledColumn>\n        <Text color=\"textSubtle\">{t('Market cap')}</Text>\n        {mcap?.gt(0) && mcapString ? (\n          <Heading scale=\"md\" color=\"primary\">\n            {t('$%marketCap%', { marketCap: mcapString })}\n          </Heading>\n        ) : (\n          <Skeleton height={24} width={126} my=\"4px\" />\n        )}\n      </StyledColumn>\n      <StyledColumn>\n        <Text color=\"textSubtle\">{t('Current emissions')}</Text>\n        <Heading scale=\"md\" color=\"primary\">\n          {t('%cakeEmissions%/block', { cakeEmissions: emissionsPerBlock })}\n        </Heading>\n      </StyledColumn>\n    </DataInfoGrid>\n  )\n}\n\nexport default PlearnDataRow\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Link } from 'react-router-dom'\nimport { Flex, Button, Text, Box, Heading, useMatchBreakpoints, Skeleton } from '@plearn/uikit'\nimport PageSection from 'components/PageSection'\nimport { useWeb3React } from '@web3-react/core'\nimport { PageMeta } from 'components/Layout/Page'\nimport Container from 'components/Layout/Container'\n// import CountDownBanner from 'components/CountDownBanner'\nimport { calculateCountdown } from 'components/Flip/calculateCountdown'\nimport { DisplayTimeLeft, TimeHeading } from 'views/Nft/mint/Home/DisplayTimeLeft'\nimport { useGetNftRoundData } from 'state/nftMint/hooks'\nimport Hero from './components/Hero'\nimport { tradeAnyThingSectionData, cakeSectionData } from './components/SalesSection/data'\nimport SalesSection from './components/SalesSection'\nimport Footer from './components/Footer'\nimport PlearnDataRow from './components/CakeDataRow'\n\nconst StyledHeroPageSection = styled(PageSection)`\n  padding-top: 16px;\n\n  ${({ theme }) => theme.mediaQueries.md} {\n    padding-top: 48px;\n  }\n`\n\nconst UserBannerWrapperContainer = styled(Container)`\n  z-index: 1;\n  position: absolute;\n  width: 100%;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, 0);\n  padding-left: 0px;\n  padding-right: 0px;\n\n  ${({ theme }) => theme.mediaQueries.lg} {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n`\n\nconst StyledPlearnCollectionCard = styled(Box)<{ disabled?: boolean }>`\n  border-radius: 0px;\n  background: url('/images/nfts/home/capape_background.jpg');\n  width: 100%;\n  max-width: 100%;\n`\n\nconst Home: React.FC = () => {\n  const { account } = useWeb3React()\n  const { isMobile, isTablet } = useMatchBreakpoints()\n  const roundData = useGetNftRoundData()\n\n  const totalNFT = roundData.collectionData.maxSupply\n  const soldNFT = roundData.collectionData.mintedTokenIds.length\n  const remainingNFT = totalNFT - soldNFT\n\n  const endDateCloseBuy = new Date(Number(1667883600000)) // Tuesday, November 8, 2022 12:00:00 PM GMT+07:00\n  const timeLeft = calculateCountdown(endDateCloseBuy)\n  const { days, hours, min } = timeLeft\n\n  const HomeSectionContainerStyles = { margin: '0', width: '100%', maxWidth: '850px', paddingLeft: 0, paddingRight: 0 }\n  const HomeSecondSectionContainerStyles = {\n    margin: '0',\n    width: '100%',\n    maxWidth: '850px',\n    paddingLeft: 0,\n    paddingRight: 0,\n  }\n\n  return (\n    <>\n      <PageMeta />\n      <StyledHeroPageSection\n        innerProps={{\n          style: {\n            margin: '0',\n            width: '100%',\n            maxWidth: '850px',\n            paddingLeft: 0,\n            paddingRight: 0,\n            paddingTop: 40,\n            paddingBottom: 50,\n          },\n        }}\n        style={{\n          backgroundImage: 'url(/images/nfts/home/capape_background.jpg)',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n        // background={\n        //   theme.isDark\n        //     ? 'radial-gradient(103.12% 50% at 50% 50%, #21193A 0%, #191326 100%)'\n        //     : 'linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)'\n        // }\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Flex p={10} alignItems=\"center\" flexDirection={['column', 'column', 'row']}>\n          <img\n            src=\"/images/nfts/home/capape_yellow.jpg\"\n            width={isMobile ? 200 : 160}\n            height={isMobile ? 200 : 160}\n            style={{ borderRadius: '100%' }}\n            alt=\"capape nft collection\"\n          />\n          <div style={{ padding: 10 }}>\n            <Heading scale=\"lg\" color=\"#F0B986\" textAlign=\"left\" mt={20} mb={12}>\n              CAP’S APES NFT COLLECTION\n            </Heading>\n            <Text lineHeight=\"30px\" textAlign=\"left\">\n              <span color=\"#f0b986\" style={{ color: '#f0b986', fontWeight: 'bold' }}>\n                Plearn Team is pleased to announce our first NFT project\n              </span>\n              , Cap’s Apes NFT Collection. Cap’s Apes Collection is the derivative of the Bored Ape Yacht Club (BAYC)\n              NFT #2603, the most popular NFT collection in the world.\n            </Text>\n          </div>\n        </Flex>\n      </StyledHeroPageSection>\n      <StyledHeroPageSection\n        innerProps={{\n          style: {\n            margin: '0',\n            width: '100%',\n            maxWidth: '850px',\n            paddingLeft: 0,\n            paddingRight: 0,\n            paddingTop: 50,\n            paddingBottom: 50,\n          },\n        }}\n        style={{\n          backgroundColor: 'black',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n        // background={\n        //   theme.isDark\n        //     ? 'radial-gradient(103.12% 50% at 50% 50%, #21193A 0%, #191326 100%)'\n        //     : 'linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)'\n        // }\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <div style={{ padding: 20 }}>\n          <Heading scale=\"ll\" textAlign=\"left\" color=\"white\" mb={12}>\n            CAP’S APES WHISKY SET NFT\n          </Heading>\n          <Text lineHeight=\"30px\" fontSize=\"16px\" textAlign=\"left\">\n            PLEARN Club proudly presents Cap’s Apes Whiskey Set NFT. The exclusive set includes a bottle of Scotch\n            Whisky, artisanally distilled, aged, and bottled at the renowned Tomintoul situated in the highest village\n            by the same name on the highland of Scotland. The whisky itself was meticulously crafted using the best\n            ingredients and aged for 26 years before arriving in Cap’s Apes bottles, each adorned with unique Cap’s Apes\n            NFT image on the label. The NFT profile in each set bears a unique number and is derived from BAYC#2603,\n            part of highly famous Bored Ape Yatch Club NFT collection, owned by PLEAN Club.{' '}\n            <Link to=\"/nfts/collections/whiskyset\" style={{ color: '#ECBB79', textDecoration: 'underline' }}>\n              Learn more...\n            </Link>\n          </Text>\n        </div>\n        <Flex mt={40} alignItems=\"center\" flexDirection={['column', 'column', 'column', 'row']}>\n          <Box px={10}>\n            <img\n              src=\"/images/nfts/home/whiskybottle_right.jpg\"\n              style={{ minWidth: 320, borderRadius: 16 }}\n              alt=\"capape nft collection\"\n            />\n          </Box>\n          <Box px={10}>\n            <Heading scale=\"lg\" textAlign={isMobile ? 'center' : 'left'} color=\"white\" mb={12}>\n              CAP’S APES WHISKY SET NFT <span style={{ color: '#ECBB79' }}>LIMITED 240 SET</span>\n            </Heading>\n            <Flex\n              mt=\"20px\"\n              alignItems={['center', 'center', 'center', 'flex-start']}\n              flexDirection={['column', 'column', 'column', 'column']}\n              justifyContent={['center', 'center', 'left']}\n            >\n              <Text fontSize=\"24px\">Remaining</Text>\n              {roundData.isFetching ? (\n                <Skeleton width=\"80px\" height=\"50px\" mt=\"5px\" mb=\"7px\" />\n              ) : (\n                <TimeHeading color=\"primary\">{remainingNFT}</TimeHeading>\n              )}\n              <Text fontSize=\"10px\">Cap’s Apes Whisky Set NFT</Text>\n              <div style={{ width: '100%', textAlign: 'left', marginTop: 30 }}>\n                <Button mt={10} mb={30} width={isMobile ? '100%' : null} as={Link} to=\"/nfts/collections/capsape\">\n                  See collection\n                </Button>\n              </div>\n            </Flex>\n          </Box>\n        </Flex>\n      </StyledHeroPageSection>\n      <StyledHeroPageSection\n        innerProps={{\n          style: {\n            margin: '0',\n            width: '100%',\n            maxWidth: '850px',\n            paddingLeft: 0,\n            paddingRight: 0,\n            paddingTop: 50,\n            paddingBottom: 50,\n          },\n        }}\n        style={{\n          backgroundColor: '#131218',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Flex alignItems=\"center\" flexDirection={['column-reverse', 'column-reverse', 'row']}>\n          <div style={{ padding: 10, flex: 5 }}>\n            <Heading scale=\"ll\" color=\"white\" mb={12}>\n              CAP’S APES NFT PROFILE PICTURE\n            </Heading>\n            <Text lineHeight=\"30px\" fontSize=\"16px\" textAlign={isMobile ? 'left' : 'left'}>\n            The Cap’s Ape NFT is not just a piece of digital art; it’s also an investment that can grow in value over time. As a one-of-a-kind piece, it offers exclusivity and a sense of ownership to its collector. Once you’ve acquired Cap’s Ape, you can proudly show it off as your profile picture on the Plearn platform.\n            </Text>\n            <div style={{ textAlign: isMobile ? 'center' : 'left' }}>\n              <Button mt={20} mb={30} as={Link} width={isMobile ? '100%' : null} to=\"/nfts/collections/capsape\">\n                See collection\n              </Button>\n            </div>\n          </div>\n          <Box padding={10} style={{ flex: 4 }}>\n            <img src=\"/images/nfts/home/capape_group4.png\" alt=\"capape nft collection\" />\n          </Box>\n        </Flex>\n      </StyledHeroPageSection>\n      {/* <StyledHeroPageSection\n        innerProps={{\n          style: {\n            margin: '0',\n            width: '100%',\n            maxWidth: '850px',\n            paddingLeft: 0,\n            paddingRight: 0,\n            paddingTop: 50,\n            paddingBottom: 50,\n          },\n        }}\n        style={{\n          backgroundColor: 'black',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Flex alignItems=\"center\" flexDirection={['column-reverse', 'column-reverse', 'row']}>\n          <div style={{ padding: 10, flex: 5 }}>\n            <Heading scale=\"ll\" color=\"white\" mb={12}>\n              YACHT OWNERSHIP NFT\n            </Heading>\n            <Text lineHeight=\"30px\" fontSize=\"16px\" textAlign={isMobile ? 'left' : 'left'}>\n              The NFT holder will have fractional ownership of the yacht. After the first mint, each holder will be able\n              to claim the yacht personalized kits to personalize the yacht. The kits will include a personalized pillow\n              case, personalized cup coaster, etc. to make the yacht yours when you use it. The NFT is tradable in the\n              market and the NFT holder will get the profits generated from renting and selling of the yacht after 10\n              years.\n            </Text>\n            <div style={{ textAlign: isMobile ? 'center' : 'left' }}>\n              <Button disabled mt={10} mb={30} as={Link} width={isMobile ? '100%' : null} to=\"#\">\n                Coming Soon\n              </Button>\n            </div>\n          </div>\n          <Box padding={10} style={{ flex: 4 }}>\n            <img\n              src=\"/images/nfts/home/Yacht_Ownership.png\"\n              style={{ width: 400, height: 374 }}\n              alt=\"capape nft collection\"\n            />\n          </Box>\n        </Flex>\n      </StyledHeroPageSection> */}\n      {/* <StyledPlearnCollectionCard p=\"36px\" background=\"transparent\">\n        \n      </StyledPlearnCollectionCard> */}\n      <StyledHeroPageSection\n        innerProps={{\n          style: {\n            margin: '0',\n            width: '100%',\n            maxWidth: '850px',\n            paddingLeft: 0,\n            paddingRight: 0,\n            paddingTop: 0,\n            paddingBottom: 100,\n          },\n        }}\n        style={{\n          backgroundImage: 'url(/images/moon_bg.jpg)',\n          backgroundPosition: 'center',\n          backgroundSize: 'cover',\n        }}\n        // background={\n        //   theme.isDark\n        //     ? 'radial-gradient(103.12% 50% at 50% 50%, #21193A 0%, #191326 100%)'\n        //     : 'linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)'\n        // }\n        index={2}\n        hasCurvedDivider={false}\n      >\n        {/* {account && (\n          <UserBannerWrapperContainer>\n            <UserBanner />\n          </UserBannerWrapperContainer>\n        )} */}\n        {/* <Flex\n          pt={[account ? '220px' : '0', null, null, account ? '76px' : '0']}\n          mt={[account ? '0' : '-16px', null, null, account ? '0' : '-48px']}\n          pb=\"24px\"\n        >\n          <PancakeSquadBanner />\n        </Flex> */}\n        <Hero />\n      </StyledHeroPageSection>\n      {/* Second Block: CAKE makes our world go round. */}\n      <PageSection\n        id=\"page-section-2\"\n        innerProps={{ style: HomeSecondSectionContainerStyles }}\n        background=\"#333333\"\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Flex\n          position=\"relative\"\n          flexDirection={['column-reverse', 'column-reverse', 'row', 'row']}\n          alignItems={['center', 'center', 'center', 'center']}\n          justifyContent=\"space-between\"\n          id=\"homepage-second-block\"\n          mt={['20px', '20px', '50px', '50px']}\n          mb={['20px', '20px', '50px', '50px']}\n        >\n          {/* Data Info */}\n          <Flex\n            id=\"homepage-data-row\"\n            flex=\"2\"\n            width={['-webkit-fill-available', '-webkit-fill-available', null, null]}\n            flexDirection={['column', 'column', 'column', 'column']}\n            mr={[null, null, '30px', '50px']}\n          >\n            <PlearnDataRow />\n          </Flex>\n          {/* 'CAKE makes our world go round..' Text */}\n          <Flex id=\"homepage-sales-section\" flex=\"2\">\n            <SalesSection {...cakeSectionData} />\n          </Flex>\n        </Flex>\n      </PageSection>\n      {/* Third Block: Earn passive income with crypto. */}\n      {/* <PageSection\n        id=\"page-section-3\"\n        innerProps={{ style: HomeSecondSectionContainerStyles }}\n        // background={theme.colors.gradients.cardHeader}\n        style={{ backgroundImage: 'url(/images/earnSection.jpg)', backgroundPosition: 'center' }}\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Flex\n          position=\"relative\"\n          flexDirection={['column', 'column', 'row', 'row']}\n          alignItems={['baseline', 'baseline', 'left', 'center']}\n          justifyContent=\"space-between\"\n          id=\"homepage-third-block\"\n          mt={50}\n          mb={50}\n        >\n          \n          <Flex id=\"third-block-data-row\" flex={[1,1,2,3]} flexDirection=\"column\" mr={[null, null, \"20px\", \"50px\"]}>\n            <SalesSection {...earnSectionData} />\n          </Flex>\n          \n          <Flex id=\"third-block-sales-section\" flex={[1,1,3,3]}\n          width={[\"-webkit-fill-available\", \"-webkit-fill-available\", null, null]}>\n            <FarmsPoolsRow />\n          </Flex>\n        </Flex>\n      </PageSection> */}\n      {/* <PageSection\n        innerProps={{ style: { margin: '0', width: '100%' } }}\n        background={\n          theme.isDark ? theme.colors.gradients.bubblegum : 'linear-gradient(180deg, #FFFFFF 22%, #D7CAEC 100%)'\n        }\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <MetricsSection />\n      </PageSection> */}\n      {/* Trade anything */}\n      <PageSection\n        id=\"page-section-4\"\n        style={{ paddingTop: 0, paddingBottom: 30 }}\n        innerProps={{ style: HomeSectionContainerStyles }}\n        background=\"none\"\n        index={2}\n        hasCurvedDivider={false}\n      >\n        {/* <OuterWedgeWrapper>\n          <InnerWedgeWrapper top fill={theme.isDark ? '#201335' : '#D8CBED'}>\n            <WedgeTopLeft />\n          </InnerWedgeWrapper>\n        </OuterWedgeWrapper> */}\n        <SalesSection {...tradeAnyThingSectionData} />\n      </PageSection>\n      {/* <PageSection\n        innerProps={{ style: HomeSectionContainerStyles }}\n        background={\n          theme.isDark\n            ? 'linear-gradient(180deg, #0B4576 0%, #091115 100%)'\n            : 'linear-gradient(180deg, #6FB6F1 0%, #EAF2F6 100%)'\n        }\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <WinSection />\n      </PageSection> */}\n      <PageSection\n        innerProps={{ style: HomeSectionContainerStyles }}\n        background=\"linear-gradient(180deg, #7645D9 0%, #5121B1 100%)\"\n        index={2}\n        hasCurvedDivider={false}\n      >\n        <Footer />\n      </PageSection>\n    </>\n  )\n}\n\nexport default Home\n","import React from 'react'\nimport styled, { css, DefaultTheme } from 'styled-components'\nimport { Box } from '@plearn/uikit'\nimport { ClipFill } from '../types'\n\ninterface CurveProps {\n  clipFill?: ClipFill\n}\n\ninterface ContainerProps extends CurveProps {\n  clipPath: string\n}\n\nconst sharedStyles = (theme: DefaultTheme, clipPath: string, clipFill?: ClipFill) => css`\n  width: 100%;\n  height: 20px;\n  clip-path: url(${clipPath});\n\n  background: ${() => {\n    if (theme.isDark) {\n      return clipFill?.dark || clipFill?.light || theme.colors.background\n    }\n    return clipFill?.light || theme.colors.background\n  }};\n\n  & svg {\n    display: block;\n  }\n`\n\nconst ConcaveContainer = styled(Box)<ContainerProps>`\n  ${({ theme, clipPath, clipFill }) => sharedStyles(theme, clipPath, clipFill)}\n  transform: ${({ clipPath }) => (clipPath === '#bottomConcaveCurve' ? 'translate(0, -13px)' : 'translate(0, 1px)')};\n`\n\nconst ConvexContainer = styled(Box)<ContainerProps>`\n  ${({ theme, clipPath, clipFill }) => sharedStyles(theme, clipPath, clipFill)}\n  transform: ${({ clipPath }) => (clipPath === '#bottomConvexCurve' ? 'translate(0, -13px)' : 'translate(0, -1px)')};\n`\n\nexport const ConvexTop: React.FC<CurveProps> = ({ clipFill }) => (\n  <ConvexContainer clipFill={clipFill} clipPath=\"#topConvexCurve\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <clipPath id=\"topConvexCurve\" clipPathUnits=\"objectBoundingBox\">\n          <path d=\"M 0,1 L 0,0 L 1,0 L 1,1 C 0.75 0, .25 0, 0 1 Z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </ConvexContainer>\n)\n\nexport const ConvexBottom: React.FC<CurveProps> = ({ clipFill }) => (\n  <ConvexContainer clipFill={clipFill} clipPath=\"#bottomConvexCurve\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <clipPath id=\"bottomConvexCurve\" clipPathUnits=\"objectBoundingBox\">\n          <path d=\"M 0,0 L 0,1 L 1,1 L 1,0 C .75 1, .25 1, 0 0 Z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </ConvexContainer>\n)\n\nexport const ConcaveTop: React.FC<CurveProps> = ({ clipFill }) => (\n  <ConcaveContainer clipFill={clipFill} clipPath=\"#topConcaveCurve\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <clipPath id=\"topConcaveCurve\" clipPathUnits=\"objectBoundingBox\">\n          <path d=\"M 0,0 L 0,1 L 1,1 L 1,0 C .75 1, .25 1, 0 0 Z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </ConcaveContainer>\n)\n\nexport const ConcaveBottom: React.FC<CurveProps> = ({ clipFill }) => (\n  <ConcaveContainer clipFill={clipFill} clipPath=\"#bottomConcaveCurve\">\n    <svg width=\"0\" height=\"0\">\n      <defs>\n        <clipPath id=\"bottomConcaveCurve\" clipPathUnits=\"objectBoundingBox\">\n          <path d=\"M 0,1 L 0,0 L 1,0 L 1,1 C .75 0.1, .25 0.1, 0 1 Z\" />\n        </clipPath>\n      </defs>\n    </svg>\n  </ConcaveContainer>\n)\n","import React from 'react'\nimport styled from 'styled-components'\nimport { ConcaveTop, ConcaveBottom, ConvexTop, ConvexBottom } from './svg/CurvedSvg'\nimport { DividerFill, ClipFill } from './types'\n\ninterface CurvedDividerProps extends WrapperProps {\n  svgFill?: string\n  dividerComponent?: React.ReactNode\n  dividerPosition?: 'top' | 'bottom'\n  concave?: boolean\n  clipFill?: ClipFill\n}\ninterface WrapperProps {\n  index: number\n  dividerFill?: DividerFill\n}\n\nconst Wrapper = styled.div<WrapperProps>`\n  background: ${({ theme, dividerFill }) => {\n    if (theme.isDark) {\n      return dividerFill?.dark || dividerFill?.light || 'none'\n    }\n    return dividerFill?.light || dividerFill?.dark || 'none'\n  }};\n  z-index: ${({ index }) => index};\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n`\n\nconst ComponentWrapper = styled.div<WrapperProps>`\n  z-index: ${({ index }) => index + 1};\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`\n\nconst CurvedDivider: React.FC<CurvedDividerProps> = ({\n  index,\n  dividerPosition,\n  dividerComponent,\n  concave,\n  clipFill,\n  dividerFill,\n}) => {\n  const showConvexTop = dividerPosition === 'top' && !concave\n  const showConvexBottom = dividerPosition === 'bottom' && !concave\n  const showConcaveTop = dividerPosition === 'top' && concave\n  const showConcaveBottom = dividerPosition === 'bottom' && concave\n\n  const getConcaveDivider = () => {\n    return (\n      <>\n        {showConcaveTop && <ConcaveTop clipFill={clipFill} />}\n        {showConcaveBottom && <ConcaveBottom clipFill={clipFill} />}\n      </>\n    )\n  }\n\n  const getConvexDivider = () => {\n    return (\n      <>\n        {showConvexTop && <ConvexTop clipFill={clipFill} />}\n        {showConvexBottom && <ConvexBottom clipFill={clipFill} />}\n      </>\n    )\n  }\n\n  return (\n    <Wrapper index={index} dividerFill={dividerFill}>\n      {dividerComponent && <ComponentWrapper index={index}>{dividerComponent}</ComponentWrapper>}\n      {getConcaveDivider()}\n      {getConvexDivider()}\n    </Wrapper>\n  )\n}\n\nexport default CurvedDivider\n","import React from 'react'\nimport styled from 'styled-components'\nimport { BoxProps, Box, Flex, FlexProps } from '@plearn/uikit'\nimport Container from 'components/Layout/Container'\nimport CurvedDivider from './CurvedDivider'\nimport { ClipFill, DividerFill } from './types'\n\ninterface PageSectionProps extends BackgroundColorProps {\n  svgFill?: string\n  dividerComponent?: React.ReactNode\n  hasCurvedDivider?: boolean\n  dividerPosition?: 'top' | 'bottom'\n  concaveDivider?: boolean\n  containerProps?: BoxProps\n  innerProps?: BoxProps\n  clipFill?: ClipFill\n  dividerFill?: DividerFill\n}\n\ninterface BackgroundColorProps extends FlexProps {\n  index: number\n  background?: string\n  getPadding?: () => string\n}\n\nconst BackgroundColor = styled(Flex)<BackgroundColorProps>`\n  position: relative;\n  flex-direction: column;\n  align-items: center;\n  z-index: ${({ index }) => index - 1};\n  background: ${({ background, theme }) => background || theme.colors.background};\n  padding: ${({ getPadding }) => getPadding()};\n`\n\nconst ChildrenWrapper = styled(Container)`\n  min-height: auto;\n  padding-top: 16px;\n  padding-bottom: 16px;\n\n  ${({ theme }) => theme.mediaQueries.sm} {\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n\n  ${({ theme }) => theme.mediaQueries.lg} {\n    padding-top: 48px;\n    padding-bottom: 48px;\n  }\n`\n\nconst PageSection: React.FC<PageSectionProps> = ({\n  children,\n  background,\n  svgFill,\n  index = 1,\n  dividerComponent,\n  dividerPosition = 'bottom',\n  hasCurvedDivider = true,\n  concaveDivider = false,\n  clipFill,\n  dividerFill,\n  containerProps,\n  innerProps,\n  ...props\n}) => {\n  const getPadding = () => {\n    // No curved divider\n    if (!hasCurvedDivider) {\n      return '32px 8px'\n    }\n    // Bottom curved divider\n    // Less bottom padding, as the divider is present there\n    if (dividerPosition === 'bottom') {\n      return '48px 0 14px'\n    }\n    // Top curved divider\n    // Less top padding, as the divider is present there\n    if (dividerPosition === 'top') {\n      return '14px 0 48px'\n    }\n    return '48px 0'\n  }\n\n  return (\n    <Box id=\"pageSection\" {...containerProps}>\n      {hasCurvedDivider && dividerPosition === 'top' && (\n        <CurvedDivider\n          svgFill={svgFill}\n          index={index}\n          concave={concaveDivider}\n          dividerPosition={dividerPosition}\n          dividerComponent={dividerComponent}\n          clipFill={clipFill}\n          dividerFill={dividerFill}\n        />\n      )}\n        <BackgroundColor background={background} index={index} getPadding={getPadding} {...props}>\n          <ChildrenWrapper {...innerProps}>{children}</ChildrenWrapper>\n        </BackgroundColor>\n     \n      {hasCurvedDivider && dividerPosition === 'bottom' && (\n        <CurvedDivider\n          svgFill={svgFill}\n          index={index}\n          concave={concaveDivider}\n          dividerPosition={dividerPosition}\n          dividerComponent={dividerComponent}\n          clipFill={clipFill}\n          dividerFill={dividerFill}\n        />\n      )}\n    </Box>\n  )\n}\n\nexport default PageSection\n","import React from 'react'\nimport { Heading, Flex, Text } from '@plearn/uikit'\nimport styled from 'styled-components'\n\nexport const TimeHeading = styled(Heading)`\n  font-family: Inter;\n  font-weight: 400;\n  font-size: 56px;\n  margin-left: 10px;\n  margin-right: 10px;\n`\n\nexport const DisplayTimeLeft = ({ days, hours, min }: { days: number; hours: number; min: number }) => {\n  return (\n    <Flex alignContent=\"center\" justifyContent=\"center\" justifyItems=\"center\" justifySelf=\"center\">\n      <Flex width={60} flexDirection=\"column\" alignItems=\"center\" justifyContent=\"center\">\n        <TimeHeading scale=\"xl\" color=\"primary\">\n          {days.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}\n        </TimeHeading>\n        <Text fontSize=\"10px\">DAYS</Text>\n      </Flex>\n      <Flex flexDirection=\"column\" alignItems=\"center\">\n        <TimeHeading scale=\"xl\" color=\"primary\">\n          :\n        </TimeHeading>\n      </Flex>\n      <Flex width={60} flexDirection=\"column\" alignItems=\"center\" justifyContent=\"center\">\n        <TimeHeading scale=\"xl\" color=\"primary\">\n          {hours.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}\n        </TimeHeading>\n        <Text fontSize=\"10px\">HOURS</Text>\n      </Flex>\n      <Flex flexDirection=\"column\" alignItems=\"center\">\n        <TimeHeading scale=\"xl\" color=\"primary\">\n          :\n        </TimeHeading>\n      </Flex>\n      <Flex width={60} flexDirection=\"column\" alignItems=\"center\" justifyContent=\"center\">\n        <TimeHeading scale=\"xl\" color=\"primary\">\n          {min.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}\n        </TimeHeading>\n        <Text fontSize=\"10px\">MINUTES</Text>\n      </Flex>\n    </Flex>\n  )\n}\n"],"sourceRoot":""}