premier draft question
Johan Girod
Mael
parent
58a6c7f3e4
commit
61fa5bf468
|
|
@ -0,0 +1,40 @@
|
|||
.landing__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80vh;
|
||||
color: white;
|
||||
}
|
||||
.landing__header h1 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.landing__header header {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
}
|
||||
.landing__header p {
|
||||
font-size: 2rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
.landing__header a {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.landing__reassurance {
|
||||
height: 20vh;
|
||||
padding: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.landing__reassurance > * {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
.landing__reassurance img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/* @flow */
|
||||
|
||||
import React from 'react'
|
||||
import { config } from 'react-spring'
|
||||
import withColours from '../withColours'
|
||||
import * as Animate from './animate'
|
||||
import './Landing.css'
|
||||
import marianneSvg from './marianne.svg'
|
||||
import urssafSvg from './urssaf.svg'
|
||||
|
||||
const Landing = ({ colours: { colour } }) => (
|
||||
<>
|
||||
<section className="landing__header" style={{ backgroundColor: colour }}>
|
||||
<header>
|
||||
<Animate.fromBottom config={config.slow}>
|
||||
<h1>Settling a business in France</h1>
|
||||
<p> Create. Hire. Profit.</p>
|
||||
<a
|
||||
className="ui__cta-button"
|
||||
href="/steps/creating-my-company"
|
||||
alt="the first step to create a company">
|
||||
Take the step by step guide
|
||||
</a>
|
||||
</Animate.fromBottom>
|
||||
</header>
|
||||
</section>
|
||||
<section className="landing__reassurance">
|
||||
<div>
|
||||
<img alt="logo urssaf" src={urssafSvg} />
|
||||
</div>
|
||||
<div>
|
||||
<img alt="logo marianne" src={marianneSvg} />
|
||||
</div>
|
||||
</section>
|
||||
<section className="landing__explanations" />
|
||||
<section className="landing__nav" />
|
||||
</>
|
||||
)
|
||||
|
||||
export default withColours(Landing)
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/* @flow */
|
||||
import React from 'react';
|
||||
import * as Animate from '../animate';
|
||||
import {SkipButton }from '../ui/Button';
|
||||
const Create = () => (
|
||||
<Animate.fromBottom>
|
||||
<header className="ui__inverted-colors" style={{textAlign: 'center'}}>
|
||||
<h1 className="question__title">Creating the company</h1>
|
||||
<a className="ui__link-button" href="/steps/search-my-company">I already have registered my company</a>
|
||||
</header>
|
||||
<h2>1. Choosing the legal setup </h2>
|
||||
<p>
|
||||
The legal setup is the framework that allows the company to be created. An
|
||||
entrepreneur can choose between two major legal options:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Sole proprietorship: </strong>
|
||||
This is an economic activity conducted by a single natural person, in his
|
||||
own name. It's less paperwork, but bigger trouble in case of bankeroute.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Limited liability: </strong>
|
||||
A limited liability company is a corporate structure whereby the company members cannot be held personally liable for the company's debts or liabilities.
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<button className="ui__button">Sole proprietorship</button>
|
||||
<button className="ui__button">Limited liability</button>
|
||||
<SkipButton />
|
||||
</div>
|
||||
{/* this is an economic activity conducted by a single natural person, in his own name ; */}
|
||||
{/* Company : This is an economic activity conducted by a single partner - single member company with limited liability (EURL) - or several partners (limited liability company (SARL), public limited company (SA), simplified joint-stock company (SAS)...). */}
|
||||
</Animate.fromBottom>
|
||||
)
|
||||
|
||||
export default Create
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/* @flow */
|
||||
import React from 'react'
|
||||
import { animated, config as configPresets, Trail } from 'react-spring'
|
||||
import type { SpringConfig } from 'react-spring'
|
||||
|
||||
type Props = {
|
||||
children: Array<Node>,
|
||||
config?: SpringConfig,
|
||||
delay?: number
|
||||
}
|
||||
export const fromBottom = ({
|
||||
children,
|
||||
config = configPresets.default,
|
||||
delay = 0
|
||||
}: Props) => (
|
||||
<Trail
|
||||
keys={children.map((_, i) => i)}
|
||||
native={true}
|
||||
delay={delay}
|
||||
config={config}
|
||||
from={{ opacity: 0, y: 100 }}
|
||||
to={{ opacity: 1, y: 0 }}>
|
||||
{/* eslint-disable-next-line react/display-name */}
|
||||
{children.map((item, i) => ({ y, ...style }) => (
|
||||
<animated.div
|
||||
key={i}
|
||||
style={{
|
||||
transform: y.interpolate(y => `translate3d(0, ${y}px,0)`),
|
||||
...style
|
||||
}}>
|
||||
{item}
|
||||
</animated.div>
|
||||
))}
|
||||
</Trail>
|
||||
)
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React, { Component } from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
import '../../containers/reset.css'
|
||||
import withTracker from '../withTracker'
|
||||
import Landing from './Landing'
|
||||
import Create from './Steps/Create'
|
||||
import './ui/index.css'
|
||||
class Layout extends Component {
|
||||
componentDidMount() {
|
||||
this.props.tracker.push(['trackPageView'])
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Helmet>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Landing} />
|
||||
<div className="ui__container">
|
||||
<Route path="/steps/creating-my-company" component={Create} />
|
||||
<Route path="/steps/search-my-company" component={Create} />
|
||||
</div>
|
||||
</Switch>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTracker(Layout)
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1,84 @@
|
|||
.ui__cta-button:active,
|
||||
.ui__cta-button:focus,
|
||||
.ui__button:active,
|
||||
.ui__button:focus {
|
||||
animation: push-button-down 0.15s ease-out alternate-reverse 2;
|
||||
}
|
||||
|
||||
.ui__button,
|
||||
.ui__cta-button,
|
||||
.ui__skip-button {
|
||||
font-size: 1.1rem;
|
||||
padding: 0.8rem 1.6rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
border-radius: 0.6rem;
|
||||
transition: all 0.2s;
|
||||
margin: 0.8rem 0;
|
||||
margin-right: 1.6em;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.ui__button {
|
||||
border-color: rgb(41, 117, 209);
|
||||
color: rgb(41, 117, 209);
|
||||
}
|
||||
.ui__button:hover,
|
||||
.ui__button.selected {
|
||||
background-color: rgb(41, 117, 209);
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.ui__cta-button {
|
||||
color: white;
|
||||
border-color: white;
|
||||
}
|
||||
.ui__cta-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: rgb(41, 117, 209);
|
||||
border-color: rgb(41, 117, 209);
|
||||
}
|
||||
|
||||
.ui__link-button {
|
||||
border: none;
|
||||
display: inline-block;
|
||||
text-decoration: underline;
|
||||
color: rgb(41, 117, 209);
|
||||
}
|
||||
|
||||
.ui__button_next {
|
||||
color: rgb(41, 117, 209);
|
||||
}
|
||||
|
||||
.ui__skip-button {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.ui__skip-button:hover {
|
||||
opacity: 0.8;
|
||||
transform: translateX(3px);
|
||||
}
|
||||
.ui__skip-button:focus,
|
||||
.ui__skip-button:active {
|
||||
animation: push-button-right 0.15s ease-out alternate-reverse 2;
|
||||
}
|
||||
|
||||
@keyframes push-button-down {
|
||||
from {
|
||||
transform: translate3d(0, 5px, 5px);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes push-button-right {
|
||||
from {
|
||||
transform: translate3d(5px, 0, 5px);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(3px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/* @flow */
|
||||
import * as React from 'react'
|
||||
import './button.css'
|
||||
export const SkipButton = (props: React.ElementConfig<'button'>) => (
|
||||
<button className="ui__skip-button" {...props}>
|
||||
Skip ›
|
||||
</button>
|
||||
)
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
html {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.1rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
color: rgb(41, 117, 209);
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p,
|
||||
ul {
|
||||
line-height: 1.7rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@import './Button/button.css';
|
||||
@import './Typography.css';
|
||||
|
||||
.ui__container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" enable-background="new 0 0 728.504 515.906" viewBox="0 0 563.98099 181.67006" height="181.67006" width="563.98102" y="0px" x="0px" id="Calque_1" version="1.1"><metadata id="metadata4200"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs id="defs4198" /><g transform="translate(-81.992015,-168.59895)" id="g4176"><path style="fill:#005aa2" id="path4178" d="m 213.839,289.008 c -12.566,0 -19.103,-8.138 -19.103,-22.155 l 0,-29.49 7.625,0 0,29.273 c 0,9.589 3.995,14.745 11.623,14.745 7.989,0 11.767,-4.939 11.767,-14.235 l 0,-29.783 7.628,0 0,29.635 c 0,14.238 -6.902,22.01 -19.54,22.01 z" /><path style="fill:#005aa2" id="path4180" d="m 286.181,267.435 10.387,20.773 -8.788,0 -10.097,-20.121 -11.478,0 0,20.121 -7.481,0 0,-50.846 22.3,0 c 8.861,0 16.342,4.722 16.342,15.181 0.001,8.137 -4.285,13.149 -11.185,14.892 z m -5.157,-22.88 -14.819,0 0,16.342 14.819,0 c 5.084,0 8.643,-2.614 8.643,-8.134 0,-5.303 -3.486,-8.208 -8.643,-8.208 z" /><path style="fill:#005aa2" id="path4182" d="m 336.876,289.008 c -7.409,0 -13.801,-3.195 -18.086,-8.206 l 5.447,-5.305 c 3.414,3.705 8.426,6.028 13.22,6.028 7.119,0 10.533,-2.468 10.533,-7.407 0,-3.922 -2.978,-5.884 -11.478,-8.427 -10.75,-3.195 -15.906,-5.884 -15.906,-14.964 0,-8.789 7.408,-14.163 16.778,-14.163 6.9,0 12.131,2.542 16.634,6.9 l -5.375,5.448 c -3.195,-3.269 -6.828,-4.867 -11.839,-4.867 -5.956,0 -8.498,2.905 -8.498,6.319 0,3.559 2.323,5.303 11.112,7.917 10.025,3.053 16.272,6.247 16.272,15.326 0,9.152 -5.811,15.401 -18.814,15.401 z" /><path style="fill:#005aa2" id="path4184" d="m 394.834,289.008 c -7.406,0 -13.8,-3.195 -18.084,-8.206 l 5.449,-5.305 c 3.412,3.705 8.424,6.028 13.218,6.028 7.121,0 10.533,-2.468 10.533,-7.407 0,-3.922 -2.978,-5.884 -11.478,-8.427 -10.75,-3.195 -15.906,-5.884 -15.906,-14.964 0,-8.789 7.406,-14.163 16.778,-14.163 6.9,0 12.129,2.542 16.634,6.9 l -5.373,5.448 c -3.199,-3.269 -6.832,-4.867 -11.844,-4.867 -5.955,0 -8.496,2.905 -8.496,6.319 0,3.559 2.323,5.303 11.112,7.917 10.023,3.053 16.272,6.247 16.272,15.326 10e-4,9.152 -5.81,15.401 -18.815,15.401 z" /><path style="fill:#005aa2" id="path4186" d="m 471.104,288.208 -4.288,-12.057 -20.339,0 -4.212,12.057 -7.917,0 18.302,-50.846 8.065,0 18.522,50.846 -8.133,0 z M 460.422,257.63 c -1.234,-3.633 -3.268,-9.517 -3.85,-11.695 -0.579,2.178 -2.396,7.989 -3.702,11.767 l -4.07,11.623 15.692,0 -4.07,-11.695 z" /><path style="fill:#005aa2" id="path4188" d="m 509.375,244.846 0,13.291 14.601,0 0,7.482 -14.601,0 0,22.59 -7.627,0 0,-50.846 32.761,0 0,7.483 -25.134,0 z" /></g><g transform="translate(-81.992015,-168.59895)" id="g4190"><path style="fill:#005aa2" id="path4192" d="m 108.667,266.495 26.083,0 c 0,0 5.529,29.056 25.969,49.978 20.451,20.932 36.812,28.001 36.812,28.001 0,0 -30.16,0.138 -61.837,-28.521 -23.734,-21.495 -27.027,-49.458 -27.027,-49.458" /><path style="fill:#009475" id="path4194" d="m 516.638,174.464 c 0,0 54.044,-2.932 83.007,29.142 18.998,21.063 19.653,39.553 19.653,39.553 l -28.446,0.646 c 0,0 -2.074,-20.108 -14.32,-37.433 -22.032,-31.168 -59.894,-31.908 -59.894,-31.908" /></g></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -1,11 +1,4 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-size: calc(13px + 0.2vw);
|
||||
background: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
|
|
@ -13,6 +14,11 @@ html {
|
|||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
[hidden],
|
||||
.js-only {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import { I18nextProvider } from 'react-i18next'
|
|||
import { Provider } from 'react-redux'
|
||||
import { Router } from 'react-router-dom'
|
||||
import { applyMiddleware, compose, createStore } from 'redux'
|
||||
import Layout from './components/inFranceApp'
|
||||
import computeThemeColours from './components/themeColours'
|
||||
import { defaultTracker, TrackerProvider } from './components/withTracker'
|
||||
import Layout from './inFranceApp'
|
||||
import trackDomainActions from './middlewares/trackDomainActions'
|
||||
import reducers from './reducers/reducers'
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
const Landing = () => (
|
||||
<header>
|
||||
<h1>How to settle a business in France</h1>
|
||||
</header>
|
||||
)
|
||||
|
||||
export default Landing
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import React, { Component } from 'react'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
import withTracker from '../components/withTracker'
|
||||
import '../containers/reset.css'
|
||||
import Landing from './Landing'
|
||||
class Layout extends Component {
|
||||
componentDidMount() {
|
||||
this.props.tracker.push(['trackPageView'])
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Landing} />
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTracker(Layout)
|
||||
Loading…
Reference in New Issue