const verifiedCheck = ( <svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13" fill="none" > <rect y="0.5" width="16" height="12" rx="6" fill="#B0B0B0" /> <path d="M5 6.69231L7 9L11 4" stroke="white" stroke-linecap="round" stroke-linejoin="round" /> </svg> ); const trippleDots = ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="4" viewBox="0 0 18 4" fill="none" > <circle cx="2" cy="2" r="2" fill="black" /> <circle cx="9" cy="2" r="2" fill="black" /> <circle cx="16" cy="2" r="2" fill="black" /> </svg> ); const dotSVG = ( <svg xmlns="http://www.w3.org/2000/svg" width="4" height="5" viewBox="0 0 4 5" fill="none" > <circle cx="2" cy="2.5" r="2" fill="#B0B0B0" /> </svg> ); const tradePortLogo = ( <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none" > <path d="M15.3076 7.74805L18.0078 10.4727L6.70031 21.8821L4 19.1574L15.3076 7.74805Z" fill="black" /> <path d="M28.1357 20.6895L30.8361 23.414L19.5285 34.8235L16.8281 32.0988L28.1357 20.6895Z" fill="black" /> <path d="M25.4345 10.4727L28.1348 13.1973L13.1143 28.3531L10.4141 25.6284L25.4345 10.4727Z" fill="black" /> <path d="M34.5492 14.2174L31.8488 16.942L21.7227 6.72464L24.4229 4L34.5492 14.2174Z" fill="black" /> </svg> ); const Root = styled.div` display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; `; const fewAndFarLogo = ( <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" > <g clip-path="url(#clip0_155_4752)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.564453L0.604503 19.8572L3.91621 19.8379L3.83048 3.95389H19.3669V0.564453H0.5ZM8.51959 8.77372L8.63256 19.8651L11.9443 19.8297L11.8659 12.1631H19.367V8.77372H8.51959ZM22.8227 23.2105H11.9753V19.8212H19.4763L19.3979 12.1542L22.7097 12.1188L22.8227 23.2105ZM11.9753 31.4197H30.8421L30.7376 12.1266L27.4259 12.1458L27.5117 28.0302H11.9753V31.4197Z" fill="black" /> </g> <defs> <clipPath id="clip0_155_4752"> <rect width="30.9531" height="31.9849" fill="white" transform="translate(0.5)" /> </clipPath> </defs> </svg> ); const Right = styled.div` width: 50% `; const TopLeft = styled.div` h1 { overflow: hidden; color: #000; text-overflow: ellipsis; whitespace: nowrap; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } `; const Top = styled.div` display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-direction: column; > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } `; const Username = styled.div` display: flex; svg { margin: 7px; } h2 { overflow: hidden; color: #B0B0B0; text-overflow: ellipsis; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } `; const Svg = styled.div` svg { margin-top: 2px; margin-left: 3px; } `; const TopRight = styled.div` display: flex; justify-content: center; align-items: center; background: #FFF; p { border: 1px solid #000; border-radius: 32px; color: #000; padding: 7px 20px; text-align: center; font-family: Helvetica Neue; font-size: 12px; font-style: normal; font-weight: 500; margin-bottom: 0; cursor: pointer; } p:hover { background: black; color: white; } `; const Left = styled.div` display: flex; flex-direction: column; `; const ImageContainer = styled.div` width: 544px; height: 544px; background: black; `; const PriceSection = styled.div` margin-top: 20px; width: 544px; display: flex; align-items: flex-start; justify-content: space-between; `; const Price = styled.div` h1 { color: #B0B0B0; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } `; const Owner = styled.div` h2 { margin: 0; overflow: hidden; color: #000; text-overflow: ellipsis; font-family: Helvetica Neue; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } p { color: #B0B0B0; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; margin-bottom: 7px; } `; const PriceAmount = styled.div` display: flex; align-items: baseline; h2 { color: #000; font-family: Helvetica Neue; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } h5 { color: #000; font-family: Helvetica Neue; font-size: 20px; font-style: normal; font-weight: 300; line-height: normal; text-transform: uppercase; margin-left: 10px; } `; const Buttons = styled.div` width: 100%; display: flex; justify-content: space-between; button:first-child { display: flex; width: 268px; padding: 7px 0px; justify-content: center; align-items: center; border: 1px solid #000; background: #000; border-radius: 0; } button:first-child:hover { background: white; color: black; border-color: black; } button:last-child { display: flex; width: 268px; padding: 7px 0px; justify-content: center; align-items: center; border: 1px solid #000; background: #fff; border-radius: 0; color: black; } button:last-child:hover { background: black; color: white; } `; const Des = styled.div` width: 90%; h5 { margin-top: 10px; color: #000; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 148%; /* 23.68px */ } `; const Share = styled.div` display: flex; width: 32px; height: 32px; padding: 0px 7px; justify-content: center; align-items: center; border-radius: 32px; border: 1px solid #000; margin-left: 7px; `; const Others = styled.div` margin-top: 31px; h1 { color: #000; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 160%; /* 38.4px */ } `; const Table = styled.div``; const MarketRow = styled.div` width: 480px; display: flex; align-items: center; justify-content: space-between; margin-left: 35px; p { color: #363C42; font-family: Helvetica Neue; font-size: 14px; font-style: normal; font-weight: 500; line-height: 160%; /* 22.4px */ } `; const TableHeader = styled.div` display: flex; flex-direction: row; width: 480px; justify-content: space-between; h2 { color: #000; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 160%; /* 25.6px */ } `; return ( <Root> <Right> <Top> <div> <TopLeft> <h1>Lorem Ipsum Header </h1> <Username> <h2>My User</h2> <Svg>{verifiedCheck}</Svg> {dotSVG} <h2>1 HR AGO</h2> </Username> </TopLeft> <TopRight> <p>Follow Artist</p> <Share>{trippleDots}</Share> </TopRight> </div> <Des> <h5> Lorem ih5sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h5> </Des> </Top> <Widget src="agwaze.near/widget/CPlanet.Explore.NFTInfo" /> </Right> <Left> <ImageContainer></ImageContainer> <PriceSection> <Price> <h1>CURRENT PRICE</h1> <PriceAmount> <h2>7.239</h2> <h5>$11,496.32M</h5> </PriceAmount> </Price> <Owner> <p>Current Owner</p> <h2>LOREMIP...</h2> </Owner> </PriceSection> <Buttons> <button>Buy Now</button> <button>Trade NFT</button> </Buttons> <Others> <h1>OTHER LISTINGS</h1> <Table> <TableHeader> <h2>Marketplace</h2> <h2>Price</h2> <h2>USD Price</h2> <h2>Time</h2> </TableHeader> <MarketRow> {tradePortLogo} <p>7.2399</p> <p>$11,496</p> <p>58 minutes</p> </MarketRow> </Table> </Others> </Left> </Root> );