You are on page 1of 2

Crie o component da Página home

mkdir src/screens/home
touch src/screens/home/index.js

Inclua no arquivo criado:

import React, { Fragment } from 'react';

const Home = () => (


<Fragment>

</Fragment>
)

export default Home;

Importe a imagem da Home:

import PresentationImage from '../../assets/images/presentation.png';

Importe o Header:

import Header from "../../components/header";

Importe os component do Bulma:

import { Column, Section, Title, Container } from "rbx";

Inclua o Header no component:

<Fragment>
...
<Header/>
...
</Fragment>

Inclua a estrutura no component:

<Section size="medium" className="home">


<Container>
<Column.Group>
<Column size={5}>

</Column>
<Column size={6} offset={1}>

</Column>
</Column.Group>
</Container>
</Section>

Na primeira coluna coloque:

<Title size={2} spaced className="has-text-white">


Create notes easily and access when you wants on the cloud
</Title>
<Title size={5} spaced className="has-text-light" subtitle>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying
out print, graphic or web designs.<br/><br/>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying
out print.
</Title>
<a className="button is-outlined is-white is-large">
<strong>Register for free Now</strong>
</a>

Na segunda coluna coloque:

<img src={PresentationImage} />

Crie na pasta styles o arquivo home.scss e coloque:

@import "./custom_colors";

.home{
background-color: $custom-purple;
height: calc(100% - 70px);
}

Importe o estilo na screen Home:

import "../../styles/home.scss";

Atualize o APP.js colocando

import React from 'react';


import "./App.scss";
import Home from "./screens/home";

const App = () => (


<div>
<Home />
</div>
)

export default App;

You might also like