Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Idée de schéma page d'accueil #2

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Idée de schéma page d'accueil #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4a9c182
Ajout d'une page action
laem Jun 5, 2020
e5abac5
Itération sur la page d'accueil - tableau collectivité [commun]
laem Jun 5, 2020
8462e13
Adhérer à Fabmob france
laem Jun 5, 2020
537e64d
Complétion des outils
laem Jul 2, 2020
b8dd6e1
Pas besoin du titre "nos outils"
laem Jul 2, 2020
3f93a0d
Itération design des tableaux
laem Jul 2, 2020
485a0b0
Changement bidon2
laem Jul 2, 2020
de23431
Amélioration du design "collectivités communs entreprises"
laem Jul 2, 2020
7c5c417
Amélioration finale pour aujourd'hui
laem Jul 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 187 additions & 10 deletions Accueil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { useLocation, Link as OriginalLink } from 'react-router-dom'
import { Link } from './Lang'
import Emoji from './Emoji'

export default () => {
return (
Expand All @@ -10,27 +11,203 @@ export default () => {
css="height: 5rem"
src="http://lafabriquedesmobilites.fr/wp-content/themes/fabmob/images/bg-communs.svg"
/>
<h1>Révolutionner la mobilité via les communs</h1>
<h1>Accélerons votre projet de mobilité durable</h1>
<p>
L'association pour construire les nouvelles mobilités en réunissant
tous les acteurs autour de <mark>communs open source</mark>
La radicalité des GAFA, mais partagée dans une direction collective.
</p>
<br />
<p>
<a href="./mvp.html" target="_blank">
<a href="#découvrir">
<i>Découvrir</i>
</a>
<a href="#" target="_blank">
<b>Nous rejoindre</b>
<a href="/action">
<b>Passer à l'action</b>
</a>
</p>
</header>
<Présentation />
<Découvrir />
<Fabriques />
</div>
)
}

let Présentation = () => (
let Découvrir = () => (
<main>
<section
css={`
img {
max-height: 12rem;
max-width: initial;
margin: 2rem auto;
display: block;
border-radius: 0.6rem;
}
`}
>
<header id="découvrir">
<div
css={`
> ul {
display: flex;
list-style-type: none;
justify-content: space-around;
padding: 0;
width: 90%;
margin: 0 auto;
}
> ul > li {
width: 40%; /*oversized*/
}
> ul > li > ul {
border-radius: 1rem;
padding: 0.6rem 2rem;
list-style-type: none;
height: 12rem;
}
> ul > li > ul > li {
display: flex;
align-items: center;
height: 2rem;
}
`}
>
<ul>
<li>
<ul
css={`
background: #9dcdd780;
margin-right: -1rem;
li {
justify-content: end;
}
`}
>
<li>
<h3>Collectivité</h3>
</li>
<li>Moderniser</li>
<li>Inciter le covoiturage</li>
<li>Comprendre les déplacements</li>
</ul>
</li>
<li css="">
<ul
css={`
background: #97b83780;
li {
display: flex;
justify-content: start;
align-items: center;
padding-left: 1rem;
}

img {
margin: 0 0.1rem;
background: white;
padding: 0.3rem;
border-radius: 1rem;
margin-left: -0.7rem;
}
li > span {
margin-right: 1rem;
}
`}
>
<li>
<h3>Communs</h3>
</li>
<li>
<Emoji emoji="🏛️⚙️" />
Territoires Open Source
</li>
<li>
<Emoji emoji="🚗👥" /> Registre de covoiturage
</li>
<li>
<Emoji emoji="📱🗺" /> Compte Mobilité
</li>
</ul>
</li>
<li>
<ul
css={`
background: #ffe00080;

margin-left: -1rem;
li {
justify-content: start;
}
`}
>
<li>
<h3>Entreprise</h3>
</li>
<li>Innovations</li>
<li>Réseaux de covoiturage en silo</li>
<li>Collecte des données utilisateur</li>
</ul>
</li>
</ul>

<p>
{' '}
Notes: [On peut intégrer ces éléments dans le tableau ci-dessus. A
gauche, le point de vue de la collectivité, à droite, de
l'entreprise; au centre (reste à inventer), le commun, notre
périmètre d'action.] Aller + vite au marché grâce à l’Open Source &
Coopétition grâce à notre réseau international d’acteurs hétérogènes
des retours d’utilisateurs d’une nouvelle solution de mobilité mieux
compris mes problèmes, fait un diagnostic lister et détailler mes
ressources (territoire open source) produire des données nouvelles
(traceur, open data cam) rassembler une communauté d’intérêt et
identifier ses besoins (covoit, autop, …) rassembler des acteurs en
coopétition pour identifi
</p>
</div>
<br />
<br />

<h2>Comment ?</h2>
<ul
css={`
display: flex;
justify-content: center;
list-style-type: none;
li {
margin: 1rem;
padding: 0.6rem 1rem;
border: 1px solid black;
}
`}
>
<li>De l'expertise métier</li>
<li>Des territoires d'expérimentation</li>
<li>Des composants utilisables</li>
<li>Financer un nouveau projet</li>
</ul>
<ul
css={`
color: green;
display: flex;
justify-content: center;
list-style-type: none;
li {
margin: 1rem;
padding: 0.6rem 1rem;
border: 1px solid green;
}
`}
>
<li>Exemple 1</li>
<li>Exemple 2</li>
<li>3</li>
<li>4</li>
</ul>
</header>
</section>
</main>
)
let Fabriques = () => (
<main>
<section
css={`
Expand All @@ -46,8 +223,8 @@ let Présentation = () => (
<header>
<h2>Un concept, des fabriques</h2>
<p>
Le modèle de la fabrique, initié en France, se répliquer dans d'autres
pays et domaines
Le modèle de la fabrique, initié en France, s'est répliqué dans
d'autres pays et domaines
</p>
</header>
<aside>
Expand Down
113 changes: 113 additions & 0 deletions Action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React from 'react'
import { Link } from './Lang'

export default () => (
<div>
<header>
<h1>Passer à l'action</h1>
<p>La Fabrique est une assoctiation 1901.</p>
<a
href="https://www.helloasso.com/associations/la-fabrique-des-mobilites/adhesions/adhesions-2019-2020"
target="_blank"
>
<i>Adhérer à FabMob France</i>
</a>
</header>
<Présentation />
</div>
)

let Présentation = () => (
<main>
<section
css={`
img {
width: 8rem;
margin-top: 1rem;
}
aside {
width: 13rem;
}
aside h3 {
margin: 0 0.3rem;
}
aside p {
margin: 0.3rem;
}
`}
>
<header>
<p>
En 2 minutes, accédez à la galaxie FabMob en créant un compte unique
galaxie FabMob
</p>

<a
href="https://id.indie.host/auth/realms/fabmob-io/protocol/openid-connect/auth?response_type=code&redirect_uri=https%3A%2F%2Fwiki.lafabriquedesmobilites.fr%2Fwiki%2FSp%25C3%25A9cial%3AConnexion&client_id=wiki&scope=openid"
target="_blank"
>
<i>Créer un compte FabMobId</i>
</a>
</header>
<aside>
{/* <img src={require('./images/vélo.svg').default}></img>*/}
<h3>Le chat</h3>
<p>Discutez en direct avec toutes nos communautés</p>
<a href="https://chat.fabmob.io">chat.fabmob.io</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/55/RocketChat_Logo_1024x1024.png" />
<p>
<a href="https://chat.fabmob.io">
<em>Discuter↗</em>
</a>
</p>
</aside>
<aside>
{/* <img src={require('./images/appli.svg').default}></img>*/}
<h3>Le pad</h3>
<p>Prenez de notes collaboratives</p>
<a href="https://pad.fabmob.io">pad.fabmob.io</a>
<img src="https://d33wubrfki0l68.cloudfront.net/5a26e2c8eafa7e50df52260b0f912f53a4c52efe/002dd/assets/images/tool-icons/codimd.png" />
<p>
<a href="#">
<em>Prenez des notes↗</em>
</a>
</p>
</aside>
<aside>
{/* <img src={require('./images/appli.svg').default}></img>*/}
<h3>Le Wiki</h3>
<p>Plongez dans le contenu et participez à sa construction</p>
<a href="https://wiki.fabmob.io">wiki.fabmob.io</a>
<img src="https://www.mediawiki.org/static/images/project-logos/mediawikiwiki.png" />
<p>
<a href="#">
<em>Documenter↗</em>
</a>
</p>
</aside>
<aside>
<h3>Le forum</h3>
<p>Discutez de façon posée</p>
<a href="https://forum.fabmob.io">forum.fabmob.io</a>
<img src="https://www.discourse.org/a/img/favicon.png" />
<p>
<a href="https://forum.fabmob.io">
<em>Discuter posément↗</em>
</a>
</p>
</aside>
<aside>
{/* <img src={require('./images/appli.svg').default}></img>*/}
<h3>Le cloud</h3>
<p>Téléchargez et partagez des fichiers</p>
<a href="https://cloud.fabmob.io">cloud.fabmob.io</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Nextcloud_Logo.svg/2560px-Nextcloud_Logo.svg.png" />
<p>
<a href="https://cloud.fabmob.io">
<em>Télécharger↗</em>
</a>
</p>
</aside>
</section>
</main>
)
4 changes: 4 additions & 0 deletions App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Québec from './Québec'
import QuébecEn from './Québec.en'
import Accueil from './Accueil'
import AccueilEn from './Accueil.en'
import Action from './Action'
import Blog from './Blog'
import Article from './Article'

Expand Down Expand Up @@ -46,6 +47,9 @@ const Container = () => (
<Route path="/blog">
<Blog />
</Route>
<Route path="/action">
<Action />
</Route>
<Route path="/">
<Accueil />
</Route>
Expand Down