diff --git a/landing/hero-content.css b/landing/hero-content.css --- a/landing/hero-content.css +++ b/landing/hero-content.css @@ -1,19 +1,18 @@ -.cycling_header { - font-weight: bold; - font-family: 'iA Writer Duo S', monospace; - padding-bottom: 16px; - font-size: clamp(2.5rem, -0.5rem + 4vw, 4.25rem); +.header { + color: var(--white-80); + margin-bottom: 24px; } -@media (max-width: 1099px) { - .cycling_header { - font-size: clamp(1.5rem, 0.0122rem + 5.9514vw, 4.1rem); - } + +.header span { + background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.sub_heading { - color: var(--sub-heading-color); - font-size: clamp(1rem, 0.5556rem + 2.2222vw, 3.125rem); - margin-bottom: 60px; +.subHeader { + color: var(--white-80); + margin-bottom: 56px; } form { @@ -25,17 +24,6 @@ } } -.cycling_content, -.sub_heading { - font-family: 'iA Writer Duo S', monospace; - text-align: left; - line-height: 1.35; -} - -.cycling_content { - background: var(--sub-heading-color); -} - .contentWrapper { flex-basis: 300px; } diff --git a/landing/hero-content.react.js b/landing/hero-content.react.js --- a/landing/hero-content.react.js +++ b/landing/hero-content.react.js @@ -1,32 +1,32 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; -import TextLoop from 'react-text-loop'; import { assetMetaData } from './asset-meta-data.js'; import css from './hero-content.css'; import SubscriptionForm from './subscription-form.react.js'; +import typography from './typography.css'; function HeroContent(): React.Node { const [hero] = assetMetaData; + const headerClassName = classNames([typography.display3, css.header]); + const subheaderClassName = classNames([ + typography.subheading2, + css.subHeader, + ]); + return ( <section className={hero.infoStyle}> <div className={css.contentWrapper}> - <h1 className={css.cycling_header}> - {'Comm is crypto-native\nchat for '} - <TextLoop - interval={1750} - springConfig={{ stiffness: 180, damping: 16 }} - > - <span className={css.cycling_content}>DAOs</span> - <span className={css.cycling_content}>venture funds</span> - <span className={css.cycling_content}>open source</span> - <span className={css.cycling_content}>gaming guilds</span> - <span className={css.cycling_content}>social clubs</span> - </TextLoop> + <h1 className={headerClassName}> + Comm is an encrypted messaging app for <span>communities</span> </h1> - <p className={css.sub_heading}>(think "Web3 Discord")</p> + <p className={subheaderClassName}> + We extend Signal’s model of E2E encryption with personal servers + to enable richer functionality. + </p> <SubscriptionForm /> </div> </section>