Skip to content

Commit

Permalink
Merge pull request #376 from cofacts/landing-page-copy
Browse files Browse the repository at this point in the history 
Update landing page copy & fix styles
  • Loading branch information
@MrOrz
MrOrz authored Jan 17, 2021
2 parents 11c9382 + fac0f38 commit 5e5ed18
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 309 deletions.
23 changes: 16 additions & 7 deletions components/LandingPage/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@ const useLandingPageHeaderStyles = makeStyles(theme => ({
[theme.breakpoints.down('sm')]: {
padding: `0 15px 0 13px`,
},

'& a:link': {
textDecoration: 'none',
},
'& a:hover': {
textDecoration: 'underline',
},
},
navItemWrapper: {
display: 'flex',
Expand All @@ -87,9 +94,9 @@ const useLandingPageHeaderStyles = makeStyles(theme => ({
},
menuIcon: {
display: 'flex',
alignSelf: 'stretch',
paddingLeft: 44, // Enlarge clickable area
alignItems: 'center',
width: 14,
height: 14,

'& > img': {
transform: 'rotate(180deg)',
Expand Down Expand Up @@ -162,7 +169,7 @@ const LandingPageHeader = React.memo(({ user, onLoginModalOpen }) => {
const handleScroll = () => {
const standard = isSmallScreen
? window.innerWidth * 0.8 + 60
: window.innerHeight;
: window.innerHeight * 0.8 - 60;

if (window.pageYOffset > standard) {
setNavSpringProps({
Expand Down Expand Up @@ -232,14 +239,15 @@ const LandingPageHeader = React.memo(({ user, onLoginModalOpen }) => {
}}
/>
) : (
<div
<a
href="javascript:;"
className={classes.item}
onClick={() => {
onLoginModalOpen();
}}
>
{t`Login`}
</div>
</a>
)}
</div>
) : (
Expand Down Expand Up @@ -281,14 +289,15 @@ const LandingPageHeader = React.memo(({ user, onLoginModalOpen }) => {
}}
/>
) : (
<span
<a
href="javascript:;"
className={classes.mobileTab}
onClick={() => {
onLoginModalOpen();
}}
>
{t`Login`}
</span>
</a>
)}
</div>
</animated.div>
Expand Down
2 changes: 1 addition & 1 deletion components/LandingPage/SectionArticles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const SectionArticles = () => {

return (
<section className={classes.root}>
<h3>{c('landing page').t`Messages reported in Cofacts`}</h3>
<h3>{c('landing page').t`Everyone wants to know...`}</h3>
<div className={classes.articleContainer}>
<img className={classes.leftImage} src={leftImage} />
<img className={classes.rightImage} src={rightImage} />
Expand Down
34 changes: 16 additions & 18 deletions components/LandingPage/SectionCanDo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import cx from 'clsx';
import { c, t } from 'ttag';
import { makeStyles } from '@material-ui/core/styles';
import { useRouter } from 'next/router';

import { withDarkTheme } from 'lib/theme';
import Button from '@material-ui/core/Button';
import InputBox from 'components/LandingPage/InputBox';

import lineQrcode from './images/line-qrcode.png';
Expand Down Expand Up @@ -116,14 +117,8 @@ const useStyles = makeStyles(theme => ({
},
},
button: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 230,
padding: '8px 0',
lineHeight: 1,
cursor: 'pointer',
border: '3px solid white',
border: '3px solid #fff',
borderRadius: 50,
marginTop: 'auto',

Expand Down Expand Up @@ -218,17 +213,21 @@ const SectionCanDo = ({ className }) => {
<div className={classes.cardContainer}>
<div className={cx(classes.card, classes.searchCard)}>
<div className={cx(classes.text, classes.searchTitle)}>
{c('landing page').t`Paste suspicious text message below`}
{c('landing page').t`Paste a suspicious text message below`}
</div>
<InputBox
className={classes.inputBox}
value={searchKeyword}
tags={LANG === 'zh-TW' ? SEARCH_KEYWORDS_ZH : SEARCH_KEYWORDS_EN}
onChange={setSearchKeyword}
/>
<div className={cx(classes.button, classes.text)} onClick={onSearch}>
<Button
variant="outlined"
className={cx(classes.button, classes.text)}
onClick={onSearch}
>
{c('landing page').t`Search`}
</div>
</Button>
</div>
<div className={cx(classes.text, classes.or)}>
{c('landing page').t`or`}
Expand All @@ -242,23 +241,22 @@ const SectionCanDo = ({ className }) => {
</div>
</div>
<div className={cx(classes.smText, classes.lineContent)}>
{t`Search by ID “@cofacts” or scan our QR Code to follow our Cofacts
LINE@ account, forward any possible hoax, scam, rumor, or urban
legend sources to it, then our chatbot will help you check the
credibility of the source!`}
{t`Search by ID “@cofacts” or scan the QR Code above to follow Cofacts
LINE account. Forward suspicious text to it, the chatbot will help you
check the credibility of the text!`}
</div>
<a
<Button
className={cx(classes.button, classes.text)}
href="https://g0v.hackmd.io/s/rkVVQDmqQ"
target="_blank"
rel="noopener noreferrer"
>
{t`Tutorial`}
</a>
</Button>
</div>
</div>
</section>
);
};

export default SectionCanDo;
export default withDarkTheme(SectionCanDo);
90 changes: 40 additions & 50 deletions components/LandingPage/SectionContribute.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
import { useEffect, useRef } from 'react';
import cx from 'clsx';
import { c, t } from 'ttag';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { animated, useSpring } from 'react-spring';

import { TUTORIAL, EDITOR_ENTRANCE, DEVELOPER_HOMEPAGE } from 'constants/urls';
import { withDarkTheme } from 'lib/theme';

import bg from './images/contribute-bg.png';

const useStyles = makeStyles(theme => ({
top: {
background: theme.palette.common.red1,
paddingTop: 60,
overflow: 'hidden',

[theme.breakpoints.down('sm')]: {
paddingTop: 30,
},

'& > h3': {
fontWeight: 'bold',
fontSize: 48,
Expand All @@ -37,6 +33,7 @@ const useStyles = makeStyles(theme => ({

'& > img': {
width: '100%',
verticalAlign: 'bottom', // Eliminate bottom gap between the image and section border
},
},
bottom: {
Expand Down Expand Up @@ -65,47 +62,32 @@ const useStyles = makeStyles(theme => ({
},
actions: {
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
gap: '10px',
maxWidth: 280,
margin: '0 auto',

[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
[theme.breakpoints.up('md')]: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: '20px',
maxWidth: 'unset',
},

'& > a': {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: process.env.LOCALE === 'en_US' ? 380 : 315,
margin: '0 12px',
fontSize: process.env.LOCALE === 'en_US' ? 22 : 34,
lineHeight: 1.45,
letterSpacing: 0.25,
color: 'white',
background: theme.palette.primary[500],
'& > *': {
borderRadius: 65,
padding: '16px 10px',
textAlign: 'center',

[theme.breakpoints.down('sm')]: {
width: 285,
height: 35,
fontSize: process.env.LOCALE === 'en_US' ? 16 : 18,
margin: '5px 0',
},

'&:hover': {
textDecoration: 'none',
color: '#fff',
[theme.breakpoints.up('md')]: {
fontSize: 24,
},
},
},
}));

const SectionContribute = ({ className }) => {
const classes = useStyles();
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));

const ref = useRef();
const [{ offset }, setOffset] = useSpring(() => ({
offset: 0,
Expand Down Expand Up @@ -135,14 +117,8 @@ const SectionContribute = ({ className }) => {
return (
<section className={cx(className, classes.sectionContribute)}>
<div className={classes.top} ref={ref}>
<h3>
{isSmallScreen
? c('landing page').t`Come join us
and become
a fake news terminator`
: c('landing page').t`Come join us
and become a fake news terminator`}
</h3>
<h3>{c('landing page').t`We need your help!
Join us today!`}</h3>
<animated.img
src={bg}
style={{
Expand All @@ -159,23 +135,37 @@ const SectionContribute = ({ className }) => {
is the way to transcend this program into something great.`}
</div>
<div className={classes.actions}>
<a href={TUTORIAL} target="_blank" rel="noopener noreferrer">
<Button
color="primary"
variant="contained"
href={TUTORIAL}
target="_blank"
rel="noopener noreferrer"
>
{t`I want to learn how to use Cofacts`}
</a>
<a href={EDITOR_ENTRANCE} target="_blank" rel="noopener noreferrer">
</Button>
<Button
color="primary"
variant="contained"
href={EDITOR_ENTRANCE}
target="_blank"
rel="noopener noreferrer"
>
{t`I can help bust hoaxes`}
</a>
<a
</Button>
<Button
color="primary"
variant="contained"
href={DEVELOPER_HOMEPAGE}
target="_blank"
rel="noopener noreferrer"
>
{t`I can help with coding`}
</a>
</Button>
</div>
</div>
</section>
);
};

export default SectionContribute;
export default withDarkTheme(SectionContribute);
35 changes: 17 additions & 18 deletions components/LandingPage/SectionHow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const useStyles = makeStyles(theme => ({
letterSpacing: 0.25,
color: theme.palette.secondary[500],
textAlign: 'center',
marginBottom: 26,
margin: '0 0 26px',

[theme.breakpoints.down('sm')]: {
fontWeight: 400,
Expand Down Expand Up @@ -167,44 +167,43 @@ const SectionHow = () => {
return (
<section className={classes.sectionHow}>
<div className={classes.container}>
<h3 className={cx(classes.block, 'title', 'rwd-order-2')}>
{c('landing page').t`Message is fact-checked in Cofacts`}
</h3>
<h2 className={cx(classes.block, 'title', 'rwd-order-2')}>
{c('landing page').t`How do we determine truth?`}
</h2>
<div className={cx(classes.block, classes.image, 'rwd-order-1')}>
<img className={classes.flash} src={image1Flash} />
<img src={image1} />
</div>
<div className={cx(classes.block, 'text', 'rwd-order-2')}>
{/* TODO: translate */}
<div className="smTitle">
<h3 className="smTitle">
{c('landing page').t`Crowdsourced and Diverse`}
</div>
</h3>
<div className={classes.content}>
{c('landing page')
.t`The fact checking replies are written from other contributors,
Cofacts helps you see the diversity and of the fact checking process.`}
Cofacts helps you see the diversity of the fact checking process.`}
</div>
<div className="smTitle">
<h3 className="smTitle">
{c('landing page').t`Everybody can fact-check the fact checkers`}
</div>
</h3>
<div className={classes.content}>
{c('landing page').t`We believe There is no omniscient judge,
we feel only civic collaboraing contributions works to see the truth.
You can review other's point of view and share your ideas on Cofacts platform.`}
{c('landing page').t`We believe there is no omniscient judge.
We feel that only through individuals working together can we determine truth.
You can review the others' viewpoints and share your perspective on the Cofacts platform.`}
</div>
</div>
<div className={cx(classes.block, 'text', 'rwd-order-3')}>
<div className="title">
{c('landing page').t`Here, you can Help and get help together`}
</div>
<h2 className="title">
{c('landing page').t`A Community of Mutual Support`}
</h2>
<div className={classes.content}>
{c('landing page')
.t`Cofacts encourage everyone to become a "fact checking chatbot" for the general public`}
.t`Cofacts is building a community where everyone plays a part in fact-checking.`}
<br />
<br />
{c('landing page')
.t`By actively fact-checking the suspicious messages,
you can add your discovery to the database, help people, and change the world.`}
.t`You can make a difference in others' lives through your contributions to the fact-checking repository.`}
</div>
</div>
<div className={cx(classes.block, classes.image, 'rwd-order-2')}>
Expand Down
Loading

0 comments on commit 5e5ed18

Please sign in to comment.