const NoMessageContainer = styled.div` height: calc(100vh - 241px); display: flex; justify-content: center; align-items: center; text-align: center; @media (max-width: 1024px) { padding-top: 3rem; width: 100%; } `; const BubbleLSvg = styled.svg` width: 152px; height: 76px; @media (max-width: 1024px) { width: 76px; height: 38px; } `; const MessageBubbleIllustarionL = () => { return ( <BubbleLSvg width="152" height="76" viewBox="0 0 152 76" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="152" height="76" rx="11.6923" fill="#1D1D21" /> <line x1="20.4619" y1="21.9241" x2="134.462" y2="21.9241" stroke="#5765F2" strokeWidth="2.92308" /> <line x1="20.4619" y1="33.6148" x2="131.539" y2="33.6148" stroke="#5765F2" strokeWidth="2.92308" /> <line x1="20.4619" y1="45.3076" x2="108.154" y2="45.3076" stroke="#5765F2" strokeWidth="2.92308" /> <line x1="20.4619" y1="57.0004" x2="119.847" y2="57.0004" stroke="#5765F2" strokeWidth="2.92308" /> </BubbleLSvg> ); }; const BubbleMSvg = styled.svg` width: 110px; height: 55px; @media (max-width: 1024px) { width: 55px; height: 27.5px; } `; const MessageBubbleIllustraionM = () => { return ( <BubbleMSvg width="110" height="55" viewBox="0 0 110 55" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="110" height="55" rx="8.46154" fill="#1D1D21" /> <line x1="14.8076" y1="15.8661" x2="97.3076" y2="15.8661" stroke="#5765F2" strokeWidth="2.11538" /> <line x1="14.8076" y1="24.3265" x2="95.1922" y2="24.3265" stroke="#5765F2" strokeWidth="2.11538" /> <line x1="14.8076" y1="32.7884" x2="78.2691" y2="32.7884" stroke="#5765F2" strokeWidth="2.11538" /> <line x1="14.8076" y1="41.2503" x2="86.7307" y2="41.2503" stroke="#5765F2" strokeWidth="2.11538" /> </BubbleMSvg> ); }; const BubbleSSvg = styled.svg` width: 71px; height: 36px; @media (max-width: 1024px) { width: 35.5px; height: 18px; } `; const MessageBubbleIllustarionS = () => { return ( <BubbleSSvg viewBox="0 0 71 36" fill="none" xmlns="http://www.w3.org/2000/svg" > <rect width="71" height="35.5" rx="5.46154" fill="#1D1D21" /> <line x1="9.55762" y1="10.2409" x2="62.8076" y2="10.2409" stroke="#5765F2" strokeWidth="1.36538" /> <line x1="9.55762" y1="15.7016" x2="61.4422" y2="15.7016" stroke="#5765F2" strokeWidth="1.36538" /> <line x1="9.55762" y1="21.1634" x2="50.5192" y2="21.1634" stroke="#5765F2" strokeWidth="1.36538" /> <line x1="9.55762" y1="26.6253" x2="55.9807" y2="26.6253" stroke="#5765F2" strokeWidth="1.36538" /> </BubbleSSvg> ); }; const RobbotIllustrationSvg = styled.svg` width: 223px; height: 171px; @media (max-width: 1024px) { width: 111.5px; height: 85.5px; } `; const RobotIllustarion = () => { return ( <RobbotIllustrationSvg width="223" height="171" viewBox="0 0 223 171" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M156.307 152.795H135.719C132.095 152.795 130.423 157.301 133.17 159.665L133.412 159.872C140.785 166.218 151.741 166.038 158.903 159.455C161.476 157.089 159.803 152.795 156.307 152.795Z" fill="#25252A" /> <circle cx="21.8062" cy="79.9734" r="6.827" stroke="#25252A" strokeWidth="1.95057" /> <rect x="69.2695" width="22.7567" height="61.1179" rx="11.3783" fill="#606060" /> <rect x="84.2246" width="124.837" height="61.1179" rx="9.75285" fill="#37373A" /> <rect x="199.308" width="22.7567" height="61.1179" rx="11.3783" fill="#606060" /> <circle cx="104.056" cy="91.3517" r="6.827" fill="#111111" /> <path d="M22.4561 80.9487L60.2568 115.74C60.6733 116.124 61.2899 116.194 61.7817 115.913L106.981 90.1346" stroke="#37373A" strokeWidth="9.75285" strokeLinecap="round" /> <path d="M138.873 125.35L103.132 93.0735C97.3877 87.8863 101.057 78.3479 108.797 78.3479H126.878C127.991 78.3479 129.033 77.803 129.667 76.8893L132.123 73.3539C135.466 68.5401 140.956 65.6692 146.817 65.6692C152.678 65.6692 158.167 68.5401 161.511 73.3539L163.966 76.8893C164.601 77.803 165.643 78.3479 166.755 78.3479H187.152C195.255 78.3479 198.715 88.6462 192.256 93.5383L149.641 125.814C146.406 128.265 141.885 128.07 138.873 125.35Z" fill="#606060" /> <circle cx="176.226" cy="88.7509" r="6.827" fill="#111111" /> <circle cx="69.2701" cy="139.791" r="6.827" stroke="#25252A" strokeWidth="1.95057" /> <path d="M175.251 89.7262L132.569 125.838C132.407 125.975 132.214 126.071 132.006 126.116L69.2695 139.791" stroke="#37373A" strokeWidth="9.75285" strokeLinecap="round" /> <path d="M106.93 30.559L132.665 30.559C137.195 30.559 139.285 24.9266 135.851 21.9716L135.549 21.7117C126.332 13.7804 112.637 14.0047 103.685 22.2335C100.468 25.1908 102.56 30.559 106.93 30.559Z" fill="#606060" /> <path d="M156.344 30.559L182.079 30.559C186.609 30.559 188.699 24.9266 185.265 21.9716L184.963 21.7117C175.746 13.7804 162.051 14.0047 153.099 22.2335C149.882 25.1908 151.974 30.559 156.344 30.559Z" fill="#606060" /> <path d="M128.438 47.8665C132.394 50.0848 147.041 52.1738 173.976 42.783" stroke="#606060" strokeWidth="0.812738" /> <path d="M157.139 145.643H134.317C130.287 145.643 128.432 150.655 131.491 153.278L131.759 153.508C139.94 160.523 152.07 160.324 160.016 153.046C162.883 150.42 161.025 145.643 157.139 145.643Z" fill="#37373A" /> <path d="M158.884 137.84H133.15C128.619 137.84 126.53 143.473 129.964 146.428L130.266 146.688C139.483 154.619 153.177 154.395 162.129 146.166C165.347 143.208 163.254 137.84 158.884 137.84Z" fill="#606060" /> <path d="M1 78.1587C9.14909 80.322 23.5229 79.8125 15.8254 60.4676" stroke="#606060" strokeWidth="0.812738" /> <path d="M52.8506 154.484C60.1866 150.328 70.0999 139.907 51.0654 131.471" stroke="#606060" strokeWidth="0.812738" /> </RobbotIllustrationSvg> ); }; const IllustarionContainer = styled.div` ${({ bottom }) => bottom && "padding-bottom: 1.7rem;"} padding-right: 10rem; `; const Text = styled.h6` color: #fff; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; `; return ( <NoMessageContainer> <div> <IllustarionContainer bottom> <MessageBubbleIllustarionL /> </IllustarionContainer> <MessageBubbleIllustarionS /> <RobotIllustarion /> <MessageBubbleIllustraionM /> <Text>Be first to send an message!</Text> </div> </NoMessageContainer> );