const nounFont = fetch( "https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap" ).body; const glyphFont = ` @font-face { font-family: GraublauWeb; src: url("https://nouns.center/assets/nountown.otf") format("opentype"); } `; const Centered = styled.div` padding-left: 12px; padding-right: 12px; display: flex; flex-direction: column; justify-content: start; align-items: center; `; const Heading = styled.h1` display: block; ${glyphFont} color: white; background: blue; width: 100%; padding-top: 100px; padding-left: 24px; font-size: 96px; margin: 0px; font-family: GraublauWeb; span { position: absolute; bottom: 0; display: flex } `; const Subheading = styled.h3` padding: 12px; font-size: 20px; margin-top: 20px; `; const Glyph = styled.b` ${nounFont} font-size: 23px; font-family: 'Londrina Solid', sans-serif; `; const { body } = fetch("https://seq.ceremony.ethereum.org/auth/request_link"); const { eth_auth_url, github_auth_url } = body ?? {}; return ( <> <Heading> Nounish KZG <span> <img src="https://api.cloudnouns.com/v1/pfp?background=n&size=100&text=k" /> <img src="https://api.cloudnouns.com/v1/pfp?background=n&size=100&text=z" /> <img src="https://api.cloudnouns.com/v1/pfp?background=n&size=100&text=g" /> </span> </Heading> <Centered> <Subheading> Hello anoun. <br /> Are you ready for your <Glyph>Noun</Glyph> to go down in <b>history?</b> </Subheading> <Widget src="near/widget/DIG.Button" props={{ fill: "ghost", iconLeft: "ph-bold ph-currency-eth", label: "Unlock using Ethereum", variant: "secondary", }} href={eth_auth_url} /> <Widget src="near/widget/DIG.Button" props={{ fill: "ghost", iconLeft: "ph-bold ph-github-logo", label: "Unlock using Github", variant: "secondary", }} href={eth_auth_url} /> </Centered> </> );