gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: improve landing page (#36826)

Browse Source 
* feat/ add smooth scroll from landing to map

* feat: scroll to currentChallengeId if it exist

* fix: update tests

* refactor: migrate from componentWillMount

* fix: update Map and Block's tests and mocks


Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Ahmad Abdolsaheb
2019-10-04 18:32:35 +03:00
committed by mrugesh
parent f9a112b43e
commit 203ca92a20
21 changed files with 565 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
client/src/components/landing/index.js
View File

@@ -1,28 +1,36 @@
import React, { Fragment } from 'react';
import { Grid, Row, Col, Image } from '@freecodecamp/react-bootstrap';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Helmet from 'react-helmet';
import Login from '../Header/components/Login';
import PropTypes from 'prop-types';
import { Link } from 'gatsby';
import { uniq } from 'lodash';
import { Spacer } from '../helpers';
import Login from '../Header/components/Login';
import './landing.css';
import '../Map/map.css';
const propTypes = {
edges: PropTypes.array
};
const BigCallToAction = () => (
<Row>
<Col sm={10} smOffset={1} xs={12}>
<Login block={true}>Sign in and get started.</Login>
<Login block={true}>Sign in and get started (it's free)</Login>
</Col>
</Row>
);
function Landing() {
export const Landing = ({ edges }) => {
const superBlocks = uniq(edges.map(element => element.node.superBlock));
return (
<Fragment>
<Helmet>
<title>Learn to code | freeCodeCamp.org</title>
</Helmet>
<main className='index-page'>
<Spacer size={2} />
<main className='landing-page'>
<Spacer />
<Grid>
<Row>
<Col sm={10} smOffset={1} xs={12}>
@@ -31,33 +39,36 @@ function Landing() {
</h1>
<Spacer />
<h2 className='medium-heading'>Learn to code.</h2>
<h2 className='medium-heading'>Build projects.</h2>
<h2 className='medium-heading'>Earn certifications.</h2>
<h2 className='medium-heading'>
Build projects and earn certifications.
</h2>
<h2 className='medium-heading'>
Grow your portfolio and get a developer job.
</h2>
<h2 className='medium-heading'>
It's all 100% free thanks to our nonprofit's donors.
Since 2014, more than 40,000 freeCodeCamp.org graduates have
gotten jobs at tech companies including:
</h2>
<div className='logo-row'>
<h2 className='medium-heading'>Apple</h2>
<h2 className='medium-heading'>Google</h2>
<h2 className='medium-heading'>Amazon</h2>
<h2 className='medium-heading'>Microsoft</h2>
<h2 className='medium-heading'>Spotify</h2>
</div>
</Col>
</Row>
<Spacer />
<BigCallToAction />
<Spacer size={2} />
<Image
alt='companies featuring freeCodeCamp.org'
className='img-center'
responsive={true}
src='https://cdn-media-1.freecodecamp.org/learn/as-seen-on.png'
/>
<Spacer />
<Row>
<Col sm={10} smOffset={1} xs={12}>
<h2 className='medium-heading'>
Since 2014, more than 40,000 freeCodeCamp.org graduates have
gotten jobs in tech.
</h2>
<h2 className='medium-heading'>Certifications:</h2>
<ul>
{superBlocks.map((superBlock, i) => (
<li className={'superblock'} key={i}>
<Link state={{ superBlock: superBlock }} to={`/learn`}>
<h2 className='medium-heading'>{superBlock}</h2>
</Link>
</li>
))}
</ul>
</Col>
</Row>
<Spacer />
@@ -65,8 +76,8 @@ function Landing() {
</main>
</Fragment>
);
}
};
Landing.displayName = 'Landing';
Landing.propTypes = propTypes;
export default Landing;