Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 61x 61x 30x 30x 61x 15x 61x 30x 30x | import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import { GetStartedCard, NavButton, TitleSection } from '../../components';
import NotableUsersSection from './sections/NotableUsersSection';
import TrendingTopicsSection from './sections/TrendingTopicsSection';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles((theme) => ({
marketingPointContainerStyle: {
alignItems: 'center',
fontSize: '18px',
paddingTop: '8px',
'& p': {
width: '33.3%',
},
[theme.breakpoints.down('md')]: {
fontSize: '16px',
},
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
width: '100%',
height: '161.5px',
marginBottom: '29.42px',
justifyContent: 'space-between',
'& p': {
width: '80%',
},
'& br': {
display: 'none',
},
},
},
localTitleSectionStyle: {
paddingTop: '120px',
[theme.breakpoints.down('md')]: {
paddingTop: '72px',
},
},
}));
const MarketingSection = () => {
const classes = useStyles();
return (
<Grid
container
align='center'
className={classes.marketingPointContainerStyle}>
<Typography variant='body1' color='textSecondary'>
Requires no coding
</Typography>
<Typography variant='body1' color='textSecondary'>
{' '}
Make your project more <br /> visible with GitHub’s open-source
communities
</Typography>
<Typography variant='body1' color='textSecondary'>
{' '}
The Index is owned by <br />
all who use it
</Typography>
</Grid>
);
};
const CallToActionSection = () => {
return (
<Grid container style={{ paddingTop: '35px' }} justify='center'>
<Grid container justify='space-between' style={{ width: '392px' }}>
<NavButton href='/join-index' color='primary'>
Tag your project
</NavButton>
<NavButton href='/about' variant='outlined'>
Learn more
</NavButton>
</Grid>
</Grid>
);
};
const Home = () => {
const classes = useStyles();
return (
<Box className='boxBackground'>
<div className='containerWorld'>
<Container>
<Box
component='div'
className={classes.localTitleSectionStyle}>
<TitleSection>
Join a worldwide movement to catalog every open
source civic tech project.
</TitleSection>
</Box>
<MarketingSection />
<CallToActionSection />
<NotableUsersSection />
<TrendingTopicsSection />
</Container>
</div>
<GetStartedCard
headerTitle='Ready to get started?'
buttonText='Tag your Project'
buttonHref='/join-index'
/>
</Box>
);
};
export default Home;
|