const facebookIcon = ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M16.168 6H13.168C12.6157 6 12.168 6.44772 12.168 7V10H16.168C16.2817 9.99748 16.3896 10.0504 16.4572 10.1419C16.5248 10.2334 16.5438 10.352 16.508 10.46L15.768 12.66C15.6998 12.8619 15.5111 12.9984 15.298 13H12.168V20.5C12.168 20.7761 11.9441 21 11.668 21H9.16797C8.89183 21 8.66797 20.7761 8.66797 20.5V13H7.16797C6.89183 13 6.66797 12.7761 6.66797 12.5V10.5C6.66797 10.2239 6.89183 10 7.16797 10H8.66797V7C8.66797 4.79086 10.4589 3 12.668 3H16.168C16.4441 3 16.668 3.22386 16.668 3.5V5.5C16.668 5.77614 16.4441 6 16.168 6Z" fill="white" /> </svg> ); const twitterIcon = ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M20.6406 6.7174C20.1762 7.33692 19.6148 7.87733 18.9781 8.31776C18.9781 8.47959 18.9781 8.64142 18.9781 8.81225C18.9832 11.7511 17.8093 14.5691 15.7196 16.6345C13.6298 18.6999 10.799 19.8399 7.8619 19.7989C6.16384 19.8046 4.48752 19.4169 2.96427 18.6661C2.88213 18.6302 2.82916 18.549 2.82947 18.4593V18.3604C2.82947 18.2313 2.93408 18.1267 3.06312 18.1267C4.73227 18.0716 6.34187 17.4929 7.66419 16.4724C6.15338 16.4419 4.79404 15.5469 4.16845 14.1707C4.13686 14.0956 4.14669 14.0093 4.19442 13.9432C4.24214 13.8771 4.32085 13.8407 4.4021 13.8471C4.86127 13.8932 5.32503 13.8505 5.76805 13.7212C4.10024 13.375 2.84706 11.9904 2.66771 10.2957C2.66134 10.2144 2.69777 10.1357 2.76385 10.0879C2.82992 10.0402 2.91609 10.0303 2.99123 10.062C3.43879 10.2595 3.92194 10.3635 4.41109 10.3676C2.94969 9.40846 2.31846 7.58405 2.8744 5.92622C2.93179 5.76513 3.06966 5.64612 3.23735 5.61294C3.40503 5.57975 3.57781 5.63728 3.69217 5.76439C5.66424 7.86325 8.37389 9.11396 11.2497 9.25279C11.1761 8.95885 11.1399 8.65676 11.1419 8.35372C11.1688 6.76472 12.152 5.34921 13.6312 4.76987C15.1103 4.19054 16.7927 4.56203 17.8908 5.71044C18.6392 5.56785 19.3629 5.31645 20.0385 4.96421C20.088 4.93331 20.1508 4.93331 20.2003 4.96421C20.2312 5.01373 20.2312 5.07652 20.2003 5.12604C19.873 5.87552 19.3201 6.50412 18.6187 6.92419C19.2329 6.85296 19.8363 6.70807 20.416 6.49264C20.4648 6.45942 20.5289 6.45942 20.5777 6.49264C20.6186 6.51134 20.6492 6.54711 20.6613 6.59042C20.6734 6.63373 20.6658 6.68018 20.6406 6.7174Z" fill="white" /> </svg> ); const callIcon = ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M20.4867 15.7194L16.5491 14.0319C16.3809 13.9602 16.194 13.9451 16.0164 13.9889C15.8389 14.0326 15.6804 14.1329 15.5647 14.2745L13.8209 16.405C11.0842 15.1147 8.88182 12.9123 7.59149 10.1756L9.72199 8.43177C9.86391 8.31634 9.96436 8.15782 10.0081 7.9802C10.0519 7.80258 10.0366 7.61553 9.96458 7.44738L8.27705 3.50981C8.19798 3.32854 8.05815 3.18054 7.88166 3.09133C7.70516 3.00213 7.50307 2.9773 7.31023 3.02113L3.65392 3.86489C3.468 3.90782 3.30212 4.01251 3.18336 4.16186C3.06459 4.3112 2.99996 4.4964 3 4.68721C3 13.7049 10.3091 21 19.3128 21C19.5037 21.0001 19.6889 20.9355 19.8384 20.8168C19.9878 20.698 20.0925 20.5321 20.1355 20.3461L20.9792 16.6898C21.0228 16.496 20.9974 16.2931 20.9075 16.116C20.8176 15.9389 20.6688 15.7987 20.4867 15.7194Z" fill="white" /> </svg> ); const telegram = ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M22.4021 4.63866L19.1632 19.9134C18.9188 20.9915 18.2816 21.2598 17.376 20.7519L12.4409 17.1153L10.0596 19.4056C9.79611 19.6691 9.57571 19.8895 9.06783 19.8895L9.42238 14.8634L18.569 6.59832C18.9667 6.24376 18.4828 6.04732 17.951 6.40188L6.64341 13.5218L1.77541 11.9982C0.716529 11.6676 0.697363 10.9393 1.99582 10.4314L21.0366 3.09586C21.9182 2.76525 22.6896 3.2923 22.4021 4.63866Z" fill="white" /> </svg> ); const Root = styled.div` min-height: 512px; background: black; padding: 4rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; @media only screen and (max-width: 500px) { padding: 2rem } `; const Top = styled.div` display: flex; flex-direction: row; align-items: flex-start; justify-content: center; width: 100%; flex-wrap: wrap; `; const Bottom = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; `; const LeftFoot = styled.div` min-width: 50%; p { color: #FFF; width: 400px; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 300; line-height: 135%; /* 32.4px */ } a { display: inline-flex; padding: 12px 24px; margin-top 54px; justify-content: center; align-items: center; gap: 8px; color: white; transition: 0.3s ease-in-out; width: 140px; border-radius: 60px; border: 1px solid #FFF; background: transparent; } a:hover { background: white; color: black; } @media only screen and (max-width: 900px){ width: 100% align-items: center; justify-content: center; margin-bottom: 40px; button { margin-top: 10px; align-self: center; margin-left: 70px; } } `; const RightHeader = styled.div` display: flex; h1:first-child { font-style: italic; font-weight: 200; } h1 { color: #FFF; text-align: center; font-family: Helvetica Neue; font-size: 64px; font-weight: 400; line-height: 120%; /* 76.8px */ text-transform: uppercase; } `; const RightFoot = styled.div` display: flex; width: 40%; flex-direction: row; align-items: flex-start; justify-content: space-between; @media only screen and (max-width: 900px) { width: 100%; } `; const Socials = styled.div` display: flex; flex-direction: column; align-items: flex-start; h1 { color: #FFF; font-family: Helvetica Neue; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ margin-bottom: 26px; } div { display: flex; flex-direction: column; align-items: flex-start; list-style-type: none; } li { margin: 0; padding: 0; color: white; text-decoration: none; font-family: Helvetica Neue; font-size: 14px; font-style: normal; cursor: pointer; margin-bottom: 19px; font-weight: 400; line-height: 150%; /* 21px */ svg { margin-right: 3px; } } `; const CopyRight = styled.div` color: white; `; const Policies = styled.div` a { color: white; text-decoration: underline; transition: 0.5s ease-in-out; margin-right: 10px; } `; return ( <Root> <Top> <LeftFoot> <RightHeader> <h1>C</h1> <h1>Planet</h1> </RightHeader> <p>CPlanet is the global constellation supporting creatives</p> <a target="_blank" href="https://creativesdao.org/join"> Join </a> </LeftFoot> <RightFoot> <Socials> <h1>Socials</h1> <div> <a target="_blank" href="https://www.creativesdao.org/bos"> <li> <img src="https://ipfs.near.social/ipfs/bafkreibbnvp7u3syjnjoxst7jjuyutsygblxrttdx2aaqiylozj4bvah2a" /> Near Social </li> </a> <a target="_blank" href="https://www.creativesdao.org/twitter"> <li> {twitterIcon} Twitter </li> </a> <a target="_blank" href="https://www.creativesdao.org/telegram"> <li> {telegram} Telegram </li> </a> <a target="_blank" href="https://www.creativesdao.org/weekly-call"> <li> {callIcon} Weekly Call </li> </a> </div> </Socials> <Socials> <h1>Our Products</h1> <div> <a target="_blank" href="https://www.creativesdao.org/app"> <li>Creative DAO</li> </a> <a target="_blank" href="https://dropflow.xyz/"> <li>Drop Flow</li> </a> <a target="_blank" href="https://drops.fund/"> <li>Drop.Funds</li> </a> <a target="_blank" href="https://www.creativesdao.org/case-studies"> <li>Case Studies</li> </a> <a target="_blank" href="https://www.creativesdao.org/communities"> <li>Communties</li> </a> <a target="_blank" href="https://www.creativesdao.org/sbt"> <li>SBT</li> </a> </div> </Socials> <Socials> <h1>Deep Dive</h1> <div> <a target="_blank" href="https://www.creativesdao.org"> <li>Website</li> </a> <a target="_blank" href="https://www.creativesdao.org/charter"> <li>Charter</li> </a> <a target="_blank" href="https://www.creativesdao.org/council"> <li>Council</li> </a> <a target="_blank" href="https://www.creativesdao.org/dao"> <li>DAO</li> </a> <a target="_blank" href="https://www.creativesdao.org/funding"> <li>Get Funded</li> </a> </div> </Socials> </RightFoot> </Top> <Bottom> <CopyRight> 2023 CPlanet - Built with ❤️ by Minority Programmers </CopyRight> <Policies> <a href="#">Privacy & Policy</a> <a href="#">Terms & Conditions</a> <a href="#">Cookies Settings</a> </Policies> </Bottom> </Root> );