create pages folder and Landing page component

This commit is contained in:
Ruidy Nemausat 2020-05-12 11:24:22 +02:00
parent 10ea77887b
commit fabaf35562
3 changed files with 32 additions and 41 deletions

View file

@ -1,46 +1,12 @@
import React from 'react'; import React from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import NavBar from './components/NavBar';
import {faCode} from '@fortawesome/free-solid-svg-icons'; import Landing from './pages/Landing';
const App = () => { const App = () => {
return ( return (
<> <>
<nav className="navbar bg-dark"> <NavBar />
<h1> <Landing />
<a href="dashboard.html">
<FontAwesomeIcon icon={faCode} /> {' '} DevBook
</a>
</h1>
<ul>
<li>
<a href="profiles.html">Developers</a>
</li>
<li>
<a href="register.html">Register</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
</ul>
</nav>
<section className="landing">
<div className="dark-overlay">
<div className="landing-inner">
<h1 className="x-large">DevBook</h1>
<p className="lead">
Create developer profiles, portfolio, share and get help from
other devs
</p>
<div className="buttons">
<a href="register.html" className="btn btn-primary">
Sign up
</a>
<a href="login.html" className="btn btn-light">
Login
</a>
</div>
</div>
</div>
</section>
</> </>
); );
}; };

View file

@ -1,8 +1,8 @@
import React from 'react'; import React, {FC} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faCode} from '@fortawesome/free-solid-svg-icons'; import {faCode} from '@fortawesome/free-solid-svg-icons';
const NavBar = () => ( const NavBar: FC = () => (
<nav className="navbar bg-dark"> <nav className="navbar bg-dark">
<h1> <h1>
<a href="dashboard.html"> <a href="dashboard.html">

25
src/pages/Landing.tsx Normal file
View file

@ -0,0 +1,25 @@
import React, {FC} from 'react';
const Landing: FC = () => (
<section className="landing">
<div className="dark-overlay">
<div className="landing-inner">
<h1 className="x-large">DevBook</h1>
<p className="lead">
Create developer profiles, portfolio, share and get help from other
devs
</p>
<div className="buttons">
<a href="register.html" className="btn btn-primary">
Sign up
</a>
<a href="login.html" className="btn btn-light">
Login
</a>
</div>
</div>
</div>
</section>
);
export default Landing;