Changeset View
Changeset View
Standalone View
Standalone View
landing/hero-content.react.js
// @flow | // @flow | ||||
import classNames from 'classnames'; | |||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import TextLoop from 'react-text-loop'; | |||||
ginsu: The next diff will remove this dependency from our package.json | |||||
import { assetMetaData } from './asset-meta-data.js'; | import { assetMetaData } from './asset-meta-data.js'; | ||||
import css from './hero-content.css'; | import css from './hero-content.css'; | ||||
import SubscriptionForm from './subscription-form.react.js'; | import SubscriptionForm from './subscription-form.react.js'; | ||||
import typography from './typography.css'; | |||||
function HeroContent(): React.Node { | function HeroContent(): React.Node { | ||||
const [hero] = assetMetaData; | const [hero] = assetMetaData; | ||||
const headerClassName = classNames([typography.display3, css.header]); | |||||
const subheaderClassName = classNames([ | |||||
typography.subheading2, | |||||
css.subHeader, | |||||
atulUnsubmitted Not Done Inline ActionsWe aren't "separating" subheading2 into subHeading2 w/ camelCase, should we just do css.subheader for consistency atul: We aren't "separating" `subheading2` into `subHeading2` w/ camelCase, should we just do `css. | |||||
]); | |||||
return ( | return ( | ||||
<section className={hero.infoStyle}> | <section className={hero.infoStyle}> | ||||
<div className={css.contentWrapper}> | <div className={css.contentWrapper}> | ||||
<h1 className={css.cycling_header}> | <h1 className={headerClassName}> | ||||
{'Comm is crypto-native\nchat for '} | Comm is an encrypted messaging app for <span>communities</span> | ||||
<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> | </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 /> | <SubscriptionForm /> | ||||
</div> | </div> | ||||
</section> | </section> | ||||
); | ); | ||||
} | } | ||||
export default HeroContent; | export default HeroContent; |
The next diff will remove this dependency from our package.json