diff --git a/source/components/inFranceApp/Landing.css b/source/components/inFranceApp/Landing.css new file mode 100644 index 000000000..a5038e781 --- /dev/null +++ b/source/components/inFranceApp/Landing.css @@ -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%; +} diff --git a/source/components/inFranceApp/Landing.js b/source/components/inFranceApp/Landing.js new file mode 100644 index 000000000..4df62d901 --- /dev/null +++ b/source/components/inFranceApp/Landing.js @@ -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 } }) => ( + <> +
+
+ +

Settling a business in France

+

Create. Hire. Profit.

+ + Take the step by step guide + + +
+
+
+
+ logo urssaf +
+
+ logo marianne +
+
+
+
+ +) + +export default withColours(Landing) diff --git a/source/components/inFranceApp/Steps/Create.js b/source/components/inFranceApp/Steps/Create.js new file mode 100644 index 000000000..022a40485 --- /dev/null +++ b/source/components/inFranceApp/Steps/Create.js @@ -0,0 +1,36 @@ +/* @flow */ +import React from 'react'; +import * as Animate from '../animate'; +import {SkipButton }from '../ui/Button'; +const Create = () => ( + +
+

Creating the company

+ I already have registered my company +
+

1. Choosing the legal setup

+

+ The legal setup is the framework that allows the company to be created. An + entrepreneur can choose between two major legal options: +

+
    +
  • Sole proprietorship: + 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. +
    • +
  • + Limited liability: + A limited liability company is a corporate structure whereby the company members cannot be held personally liable for the company's debts or liabilities. +
    • +
+
+ + + +
+ {/* 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)...). */} + +) + +export default Create diff --git a/source/components/inFranceApp/animate.js b/source/components/inFranceApp/animate.js new file mode 100644 index 000000000..035a8eee0 --- /dev/null +++ b/source/components/inFranceApp/animate.js @@ -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, + config?: SpringConfig, + delay?: number +} +export const fromBottom = ({ + children, + config = configPresets.default, + delay = 0 +}: Props) => ( + 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 }) => ( + `translate3d(0, ${y}px,0)`), + ...style + }}> + {item} + + ))} + +) diff --git a/source/components/inFranceApp/index.js b/source/components/inFranceApp/index.js new file mode 100644 index 000000000..39848bb2c --- /dev/null +++ b/source/components/inFranceApp/index.js @@ -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 ( + <> + + + + + +
+ + +
+ + + ) + } +} + +export default withTracker(Layout) diff --git a/source/components/inFranceApp/marianne.svg b/source/components/inFranceApp/marianne.svg new file mode 100644 index 000000000..400953253 --- /dev/null +++ b/source/components/inFranceApp/marianne.svg @@ -0,0 +1,19 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + \ No newline at end of file diff --git a/source/components/inFranceApp/ui/Button/button.css b/source/components/inFranceApp/ui/Button/button.css new file mode 100644 index 000000000..bab126b21 --- /dev/null +++ b/source/components/inFranceApp/ui/Button/button.css @@ -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); + } +} diff --git a/source/components/inFranceApp/ui/Button/index.js b/source/components/inFranceApp/ui/Button/index.js new file mode 100644 index 000000000..d098934be --- /dev/null +++ b/source/components/inFranceApp/ui/Button/index.js @@ -0,0 +1,8 @@ +/* @flow */ +import * as React from 'react' +import './button.css' +export const SkipButton = (props: React.ElementConfig<'button'>) => ( + +) diff --git a/source/components/inFranceApp/ui/Typography.css b/source/components/inFranceApp/ui/Typography.css new file mode 100644 index 000000000..576f3e220 --- /dev/null +++ b/source/components/inFranceApp/ui/Typography.css @@ -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; +} diff --git a/source/components/inFranceApp/ui/index.css b/source/components/inFranceApp/ui/index.css new file mode 100644 index 000000000..3056e1eab --- /dev/null +++ b/source/components/inFranceApp/ui/index.css @@ -0,0 +1,8 @@ +@import './Button/button.css'; +@import './Typography.css'; + +.ui__container { + max-width: 800px; + margin: 0 auto; + padding: 2rem; +} diff --git a/source/components/inFranceApp/urssaf.svg b/source/components/inFranceApp/urssaf.svg new file mode 100644 index 000000000..36882ca4a --- /dev/null +++ b/source/components/inFranceApp/urssaf.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/source/containers/Layout.css b/source/containers/Layout.css index 54bc2542e..7832d03bd 100644 --- a/source/containers/Layout.css +++ b/source/containers/Layout.css @@ -1,11 +1,4 @@ -html { - height: 100%; -} - body { - font-family: 'Open Sans'; - margin: 0; - height: 100%; font-size: calc(13px + 0.2vw); background: white; } diff --git a/source/containers/reset.css b/source/containers/reset.css index 290ce1ab0..1a199ea24 100644 --- a/source/containers/reset.css +++ b/source/containers/reset.css @@ -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; diff --git a/source/entry.js b/source/entry.js index fe6268e1f..72f2458b0 100644 --- a/source/entry.js +++ b/source/entry.js @@ -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 { diff --git a/source/inFranceApp/Landing.js b/source/inFranceApp/Landing.js deleted file mode 100644 index 40ccc11ff..000000000 --- a/source/inFranceApp/Landing.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Landing = () => ( -
-

How to settle a business in France

-
-) - -export default Landing diff --git a/source/inFranceApp/index.js b/source/inFranceApp/index.js deleted file mode 100644 index c73b7f282..000000000 --- a/source/inFranceApp/index.js +++ /dev/null @@ -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 ( - - - - ) - } -} - -export default withTracker(Layout)