Browse Source

page status: travail en cours

Lou 3 years ago
parent
commit
3341566a80

+ 12
- 0
gatsby-config.js View File

@@ -13,6 +13,18 @@ module.exports = {
13 13
 				path: "./src/pages/"
14 14
 			},
15 15
 			__key: "pages"
16
+		},
17
+		{
18
+			resolve: `gatsby-plugin-manifest`,
19
+			options: {
20
+				name: "CLI",
21
+				short_name: "CLI",
22
+				start_url: "/",
23
+				background_color: "#f7f0eb",
24
+				theme_color: "#a2466c",
25
+				display: "standalone",
26
+				icon: "src/images/favicon.png"
27
+			}
16 28
 		}
17 29
 	]
18 30
 };

+ 3
- 0
package.json View File

@@ -22,5 +22,8 @@
22 22
 		"react": "^17.0.1",
23 23
 		"react-dom": "^17.0.1",
24 24
 		"sass": "^1.37.5"
25
+	},
26
+	"devDependencies": {
27
+		"gatsby-plugin-manifest": "^3.11.0"
25 28
 	}
26 29
 }

+ 9
- 6
src/components/header/index.jsx View File

@@ -15,16 +15,19 @@ const Header = () => {
15 15
 			<div className="container">
16 16
 				<ul className="menu">
17 17
 					<li>
18
-						<Link to="/cooperative">La coopérative</Link>
18
+						<Link to="/services" className="menu-btn">
19
+							Nos prestations
20
+						</Link>
19 21
 					</li>
20 22
 					<li>
21
-						<Link to="/services">Nos prestations</Link>
23
+						<Link to="/contact" className="menu-btn">
24
+							Nous contacter
25
+						</Link>
22 26
 					</li>
23 27
 					<li>
24
-						<Link to="/contact">Nous contacter</Link>
25
-					</li>
26
-					<li>
27
-						<Link to="/status">Nos statuts</Link>
28
+						<Link to="/status" className="menu-btn">
29
+							Nos statuts
30
+						</Link>
28 31
 					</li>
29 32
 				</ul>
30 33
 			</div>

+ 10
- 11
src/components/header/index.scss View File

@@ -2,19 +2,20 @@
2 2
 	display: flex;
3 3
 	flex-direction: column;
4 4
 	text-align: center;
5
-	margin-top: 100px;
5
+	margin-top: 70px;
6
+	margin-bottom: 30px;
6 7
 	font-family: "Cutive Mono";
7 8
 
8 9
 	.headers-title {
9 10
 		margin: 0;
10
-		font-size: 2.5rem;
11
+		font-size: 3rem;
11 12
 		font-weight: normal;
12 13
 	}
13 14
 
14 15
 	.headers-subtitle {
15 16
 		margin-top: 15px;
16
-		margin-bottom: 100px;
17
-		font-size: 1.5rem;
17
+		margin-bottom: 70px;
18
+		font-size: 1.7rem;
18 19
 		font-weight: normal;
19 20
 	}
20 21
 }
@@ -25,17 +26,15 @@
25 26
 
26 27
 	.menu {
27 28
 		margin: 0;
28
-		padding: 0 10px;
29
+		padding: 0;
29 30
 		list-style: none;
30 31
 		display: flex;
31 32
 		justify-content: space-between;
32 33
 		align-items: center;
33
-		width: 70vw;
34
+		min-width: 600px;
34 35
 		height: 2.5rem;
35 36
 
36
-		// border: 1px solid black;
37
-
38
-		.menu-button {
37
+		.menu-btn {
39 38
 			height: 2.5em;
40 39
 			padding: 0.5rem;
41 40
 			text-decoration: none;
@@ -43,8 +42,8 @@
43 42
 			background: white;
44 43
 			border: none;
45 44
 			z-index: auto;
46
-			font-family: "Raleway", "sans-serif";
47
-			font-size: 1rem;
45
+			font-family: "Cutive Mono", "sans-serif";
46
+			font-size: 1.2rem;
48 47
 
49 48
 			&:hover {
50 49
 				cursor: pointer;

BIN
src/images/favicon.png View File


+ 4
- 0
src/images/favicon.svg View File

@@ -0,0 +1,4 @@
1
+<svg width="1622" height="1601" viewBox="0 0 1622 1601" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<circle cx="811" cy="801" r="780" fill="#F2DBFF"/>
3
+<path d="M31 801C31 370.218 380.218 21 811 21C920.777 21 1025.26 43.678 1120.01 84.6047V386.093C1096.51 367.355 1069.94 350.646 1040.31 335.967C981.692 306.929 910.82 292.41 827.691 292.41C728.044 292.41 643.317 314.415 573.51 358.426C503.704 402.437 450.416 463.235 413.648 540.821C377.413 617.954 359.295 706.656 359.295 806.928C359.295 906.746 377.413 995.448 413.648 1073.03C450.416 1150.62 503.704 1211.65 573.51 1256.11C643.317 1300.12 728.044 1322.13 827.691 1322.13C900.162 1322.13 963.308 1311.01 1017.13 1288.78C1070.95 1266.55 1115.44 1237.51 1150.61 1201.66C1186.32 1165.37 1212.96 1126.12 1230.54 1083.92C1248.13 1041.27 1256.92 999.758 1256.92 959.377H1120.24C1120.24 1001.57 1108.78 1042.41 1085.87 1081.88C1063.49 1121.36 1030.45 1153.8 986.754 1179.2C943.591 1204.61 890.571 1217.32 827.691 1217.32C728.577 1217.32 648.912 1182.38 588.697 1112.51C528.482 1042.63 498.375 940.775 498.375 806.928C498.375 672.627 528.482 570.994 588.697 502.028C648.912 432.609 728.577 397.9 827.691 397.9C884.176 397.9 932.668 407.882 973.166 427.845C1013.66 447.355 1045.9 473.444 1069.88 506.112C1094.39 538.326 1109.85 573.489 1116.24 611.601C1118.27 623.692 1119.53 634.731 1120.01 644.718V653.967H1256.92V160.953C1458.88 301.92 1591 536.031 1591 801C1591 1231.78 1241.78 1581 811 1581C380.218 1581 31 1231.78 31 801Z" fill="#3C096C"/>
4
+</svg>

+ 0
- 17
src/pages/cooperative.jsx View File

@@ -1,17 +0,0 @@
1
-import * as React from "react";
2
-
3
-import Header from "../components/header";
4
-
5
-const Cooperative = () => {
6
-	return (
7
-		<main>
8
-			<title>La coopérative</title>
9
-			<Header />
10
-			<div>
11
-				<p>La coopérative</p>
12
-			</div>
13
-		</main>
14
-	);
15
-};
16
-
17
-export default Cooperative;

+ 21
- 8
src/pages/index.jsx View File

@@ -1,4 +1,5 @@
1 1
 import React from "react";
2
+import { Link } from "gatsby";
2 3
 
3 4
 import Header from "../components/header";
4 5
 import RealisationCard from "../components/realisationCard";
@@ -10,16 +11,28 @@ const IndexPage = () => {
10 11
 		<main>
11 12
 			<title>CLI: Association du numérique</title>
12 13
 			<Header />
13
-			<div>
14
-				<section>
15
-					<p>
16
-						La CLI est une association fournissant une multitude de services
17
-						liés au numérique.
14
+			<div className="pages-content">
15
+				<section className="pages-sections">
16
+					<p className="sections-paragraphs">
17
+						La CLI est une association de travailleuses et travailleurs du
18
+						numériques basée à Strasbourg. Notre catalogue de prestations se
19
+						compose d'un large éventail de services comme le développement de
20
+						sites web, leur mise en production et leur maintenance. Nous
21
+						effectuons aussi la conception de solutions logiciels, l'assisstance
22
+						informatique, et la formation à divers outils informatiques.
18 23
 					</p>
19
-					<p>Accompagnement local dans vos projets</p>
20
-					<p>ajouter du blabla</p>
24
+					<p className="sections-paragraphs">
25
+						Nous proposons un accompagnement local et personnalisé pour tous vos
26
+						projets numériques.{" "}
27
+						<span className="paragraph-highlight">
28
+							Demandez nous un devis, nous vous répondrons au plus vite.
29
+						</span>
30
+					</p>
31
+					<Link to="/contact" className="btn cta">
32
+						Contactez nous !
33
+					</Link>
21 34
 				</section>
22
-				<section className="made-by-us">
35
+				<section className="pages-sections made-by-us">
23 36
 					<h3 className="section-title">Nos réalisations</h3>
24 37
 					<div className="list-card">
25 38
 						<RealisationCard

+ 241
- 3
src/pages/status.jsx View File

@@ -1,5 +1,5 @@
1 1
 import * as React from "react";
2
-
2
+import "../scss/index.scss";
3 3
 import Header from "../components/header";
4 4
 
5 5
 const Status = () => {
@@ -7,8 +7,246 @@ const Status = () => {
7 7
 		<main>
8 8
 			<title>Nos statuts</title>
9 9
 			<Header />
10
-			<div>
11
-				<p>Les status de la coopérative</p>
10
+			<div className="pages-content">
11
+				<section className="pages-sections">
12
+					<h3 className="section-title">Les status de la coopérative</h3>
13
+					<h4 className="status-title">Constitution de l'association</h4>
14
+					<p className="status-paragraph">
15
+						Il est créé une association dénommée « CLI ». Elle est inscrite au
16
+						Registre des Associations du Tribunal d’Instance de Strasbourg, et
17
+						est régie par les articles 21 à 79 du Code Civil local, maintenus en
18
+						vigueur par la loi d’introduction de la législation civile française
19
+						du 1 er juin 1924. L’association sera inscrite au Registre des
20
+						Associations du Tribunal Judiciaire de Strasbourg, la publication
21
+						apparaîtra dans l’Ami du Peuple.
22
+					</p>
23
+					<p className="status-paragraph">
24
+						Les présents statuts font références à des personnes et à leurs
25
+						différents rôles. Par défaut, ces rôles et les accords sont au
26
+						féminin.
27
+					</p>
28
+
29
+					<h4 className="status-title">Objet</h4>
30
+					<p className="status-paragraph">
31
+						L’objet social de l'association est de développer une production
32
+						numérique solidaire, émancipée et émancipatrice, telle que définie
33
+						par les concernées dans l'article « Orientation » de la charte,
34
+						régulièrement amendée par l'assemblée générale.
35
+					</p>
36
+					<p className="status-paragraph">
37
+						Pour ce faire, l'association vise à devenir une coopérative
38
+						d'activité et d'emploi et s'autorise toutes opérations commerciales,
39
+						financières ou juridiques se rattachant à l’objet indiqué ci-dessus
40
+						et visant à favoriser son activité dans un but non-lucratif.
41
+					</p>
42
+
43
+					<h4 className="status-title">Siège social</h4>
44
+					<p className="status-paragraph">
45
+						Le siège social de l'association est établi au *** 67000 STRASBOURG.
46
+						Il pourra être transféré en un autre lieu sur décision des membres
47
+						réunies en assemblée générale.
48
+					</p>
49
+
50
+					<h4 className="status-title">Durée</h4>
51
+					<p className="status-paragraph">
52
+						L'association est créée pour une durée illimitée, ou jusqu’à ce
53
+						qu’une procédure de dissolution à l’unanimité des membres réunies en
54
+						assemblée générale soit prononcée.
55
+					</p>
56
+
57
+					<h4 className="status-title">Procédue d'adhésion des membres</h4>
58
+					<p className="status-paragraph">
59
+						Peut devenir membre toute personne physique en ayant fait la demande
60
+						écrite, précisant qu’elle est d’accord avec la charte et les statuts
61
+						de l’association, par papier ou par voie électronique, auprès de
62
+						l’assemblée générale et après l’acceptation de cette dernière. La
63
+						nouvelle adhérente devra indiquer dans sa demande le mode de
64
+						communication à employer, par exemple son adresse e-mail ou son
65
+						adresse postale. Il n’y a aucune contribution financière devant être
66
+						fournie afin d’acquérir la qualité de membre.
67
+					</p>
68
+
69
+					<h4 className="status-title">Perte de la qualité de membre</h4>
70
+					<p className="status-paragraph">
71
+						Renonce à sa qualité de membre toute membre qui :
72
+						<ul className="status-list">
73
+							<li>démissione de son statut de membre</li>
74
+							<li>
75
+								fait l'objet d'une exclusion pour le non-respect de la charte
76
+							</li>
77
+							<li>décède</li>
78
+						</ul>
79
+					</p>
80
+					<p className="status-paragraph">
81
+						En dehors de ces cas, l'AG ne peut exclure directement une membre
82
+						qu'en la suspendant lors d'une AG, et après avoir confirmé son
83
+						exclusion lors de l'assemblée suivante.
84
+					</p>
85
+
86
+					<h4 className="status-title">Mode d'administration</h4>
87
+					<p className="status-paragraph">
88
+						L’association fonctionne selon un mode d’administration dit
89
+						'autogéré'. Les membres sont par conséquent collectivement
90
+						responsables du bon fonctionnement de l’association et ont pour
91
+						charge de s’impliquer dans la mesure de leurs disponibilités et
92
+						compétences.
93
+					</p>
94
+					<p className="status-paragraph">
95
+						<span className="bold">L’Assemblée Générale (AG)</span> regroupe
96
+						l’ensemble des membres et est souveraine sur l'ensemble des
97
+						décisions liées à l'association, à l'exception des décisions
98
+						d'exclusion des membres, conformément à l'article 6 des présents
99
+						statuts.
100
+					</p>
101
+					<p className="status-paragraph">
102
+						<span className="bold">Le Collège Solidaire (CS)</span> a pour
103
+						responsabilité d’administrer l’association et de la représenter dans
104
+						les actes de la vie civile. Il n’exerce aucun pouvoir décisionnaire
105
+						au sein de l’association. Il représente légalement l’association
106
+						devant la justice. Sont membres du CS l’ensemble des membres
107
+						dépositaires d’un mandat.
108
+					</p>
109
+
110
+					<h4 className="status-title">Assemblée Générale</h4>
111
+					<p className="status-paragraph">
112
+						L’AG se rassemble sur décision, par ordre d’importance :
113
+					</p>
114
+					<ul className="status-list">
115
+						<li>d'une précédente AG,</li>
116
+						<li>de la personne mandatée à cet effet,</li>
117
+						<li>ou a défaut par une membre du CS.</li>
118
+					</ul>
119
+					<p className="status-paragraph">
120
+						Les convocations se feront au moins une semaine à l’avance par voies
121
+						écrites papier ou numérique et mentionneront un ordre du jour
122
+						proposé, préalablement choisi par l’ensemble des membres de
123
+						l’association, une date et un lieu de convocation.
124
+					</p>
125
+					<p className="status-paragraph">
126
+						La première décision de l'AG consiste à décider de ses modalités de
127
+						tenue. Les modalités de tenue des AG seront consignées dans un
128
+						compte-rendu. Par exemple, peuvent-être créés un mandat destiné à
129
+						répartir le temps de parole, et un mandat destiné à rédiger le
130
+						compte-rendu.
131
+					</p>
132
+					<p className="status-paragraph">
133
+						Lors des AG, les délibérations et les résolutions doivent être
134
+						consignées dans un procès-verbal qui est approuvé par les membres
135
+						présentes et par les représentantes des membres absentes.
136
+					</p>
137
+					<p className="status-paragraph">
138
+						Les modalités d'approbation sont définies dans la charte.
139
+					</p>
140
+
141
+					<h4 className="status-title">Quorum et majorité</h4>
142
+					<p className="status-paragraph">
143
+						Pour que l’assemblée puisse délibérer valablement, plus de la moitié
144
+						des membres doivent être présentes ou représentées.
145
+					</p>
146
+					<p className="status-paragraph">
147
+						Les décisions par consensus sont privilégiées, cependant des
148
+						décisions peuvent être prises à la majorité absolue des membres
149
+						présentes, si aucun consensus n’est trouvé.
150
+					</p>
151
+
152
+					<h4 className="status-title">Mandats</h4>
153
+					<p className="status-paragraph">
154
+						L’AG peut émettre des mandats pour faire appliquer des décisions
155
+						prises par celle-ci. Les mandats émis par l'AG sont impératifs (ils
156
+						ne s'appliquent que pour la tâche explicitement définie) et
157
+						révocables (par l'AG ou tout autre mandat le permettant
158
+						explicitement). Le mandat expire de facto lorsque la tâche est
159
+						exécutée ou quand la durée du mandat fixée par l'assemblée générale
160
+						est atteinte.
161
+					</p>
162
+
163
+					<h4 className="status-title">
164
+						Tenue des comptes et information des membres
165
+					</h4>
166
+					<p className="status-paragraph">
167
+						Les personnes dépositaires d’un mandat de trésorerie doivent tenir
168
+						une comptabilité conforme aux lois en vigueur. Il doit établir le
169
+						bilan, le compte de résultats, les annexes et le rapport de gestion
170
+						dans le mois qui suit la clôture de chaque exercice.
171
+					</p>
172
+					<p className="status-paragraph">
173
+						Ces documents ainsi que le rapport de gestion devront être
174
+						consultables par l'ensemble des membres. L'exercice comptable
175
+						prendra comme repère la date anniversaire de l'association ; cette
176
+						date sera précisée dans la charte.
177
+					</p>
178
+
179
+					<h4 className="status-title">
180
+						Rémunération et défraiements des membres
181
+					</h4>
182
+					<p className="status-paragraph">
183
+						L’AG vote le montant de la rémunération des membres en contrepartie
184
+						de l'exercice de leurs fonctions de dirigeantes.
185
+					</p>
186
+					<p className="status-paragraph">
187
+						L’AG a l'obligation de revoter ce montant au minimum une fois par
188
+						an.
189
+					</p>
190
+					<p className="status-paragraph">
191
+						L’AG peut également prévoir le versement d'une somme forfaitaire
192
+						mensuelle aux dirigeantes, calculée en fonction de leurs frais fixes
193
+						liés à l'exercice de leurs fonctions.
194
+					</p>
195
+					<p className="status-paragraph">
196
+						L’AG se garde le droit de répartir équitablement entre les membres,
197
+						les bénéfices de l'exercice comptable, dans le respect des lois en
198
+						vigueurs.
199
+					</p>
200
+
201
+					<h4 className="status-title">Dissolution</h4>
202
+					<p className="status-paragraph">
203
+						La présente association pourra être dissoute par anticipation dans
204
+						l’un des cas suivants :
205
+					</p>
206
+					<ul className="status-list">
207
+						<li>décision collective des membres</li>
208
+						<li>décision de justice</li>
209
+					</ul>
210
+
211
+					<h4 className="status-title">Liquidation</h4>
212
+					<p className="status-paragraph">
213
+						En cas de dissolution, l'association est placée d’office en
214
+						liquidation. Dans ce cas, sa dénomination sociale doit être suivie
215
+						des mots « association en liquidation » sur tous les documents
216
+						destinés aux tiers.{" "}
217
+					</p>
218
+					<p className="status-paragraph">
219
+						Un comité de liquidation est désigné et ses pouvoirs sont fixés lors
220
+						de l’assemblée qui décide la dissolution.
221
+					</p>
222
+					<p className="status-paragraph">
223
+						Les bénéficiaires de l'ensemble des possessions (trésorerie, compte
224
+						bancaire, biens mobiliers et immobiliers) de l'association dissoute
225
+						peuvent-être des organisations ou des personnes physiques, précisées
226
+						dans la charte.
227
+					</p>
228
+
229
+					<h4 className="status-title">Contestations</h4>
230
+					<p className="status-paragraph">
231
+						En cas de litige entre les membres de l'association, une
232
+						conciliation devra avoir lieu. La personne médiatrice sera choisie
233
+						au consensus par les parties concernées.
234
+					</p>
235
+					<p className="status-paragraph">
236
+						Si aucune personne médiatrice n'est désignée au bout de trois
237
+						tentatives consignées, ou si la conciliation ne permet pas de régler
238
+						le litige, celui-ci relèvera en dernier recours du Tribunal
239
+						d’Instance dont dépend le siège social.
240
+					</p>
241
+					<h4 className="status-title">Modification des statuts</h4>
242
+					<p className="status-paragraph">
243
+						La modification des présents statuts ne peut être effectuée que sur
244
+						la décision de l’ AG, par le vote d’au moins trois quarts des
245
+						membres présentes, tel que le prévoit le Code Civil local (art. 33),
246
+						et doit être confirmée lors de l'assemblée générale suivante. À
247
+						défaut et en cas de refus, la modification est annulée.
248
+					</p>
249
+				</section>
12 250
 			</div>
13 251
 		</main>
14 252
 	);

+ 51
- 7
src/scss/index.scss View File

@@ -1,12 +1,56 @@
1
-@import url(./main.scss);
1
+@import "./main.scss";
2 2
 
3
-.section-title {
4
-	font-size: 1.5rem;
5
-	font-weight: bold;
6
-	text-align: center;
7
-}
3
+.pages-content {
4
+	padding-left: 40px;
5
+	padding-right: 40px;
6
+	> section {
7
+		margin-top: 40px;
8
+		width: 100%;
9
+		margin-left: auto;
10
+		margin-right: auto;
8 11
 
9
-.list-card {
12
+		&:first-child {
13
+			margin-top: 0;
14
+		}
15
+	}
16
+}
17
+.pages-sections {
10 18
 	display: flex;
11 19
 	flex-direction: column;
20
+	align-items: center;
21
+	max-width: 1200px;
22
+
23
+	.section-title {
24
+		font-size: 1.5rem;
25
+		font-weight: bold;
26
+		text-align: center;
27
+	}
28
+
29
+	.sections-paragraphs {
30
+		line-height: 1.7rem;
31
+		text-align: center;
32
+
33
+		.paragraph-highlight {
34
+			color: $primary;
35
+			font-weight: bold;
36
+		}
37
+	}
38
+}
39
+
40
+.index-made-by-us {
41
+	.list-card {
42
+		display: flex;
43
+		flex-direction: column;
44
+	}
45
+}
46
+
47
+.status-title {
48
+	font-size: 1.2rem;
49
+	margin-right: auto;
50
+}
51
+
52
+.status-paragraph {
53
+	text-align: justify;
54
+	text-justify: newspaper;
55
+	line-height: 1.3rem;
12 56
 }

+ 18
- 0
src/scss/main.scss View File

@@ -1,6 +1,8 @@
1 1
 @import url("https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap");
2 2
 @import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
3 3
 
4
+$primary: #ad73d2;
5
+
4 6
 :root {
5 7
 	background: white;
6 8
 	color: black;
@@ -16,8 +18,24 @@ a {
16 18
 *::before {
17 19
 	box-sizing: border-box;
18 20
 }
21
+
22
+body {
23
+	margin: 0;
24
+}
25
+
19 26
 input:focus,
20 27
 textarea:focus,
21 28
 button:focus {
22 29
 	outline: none;
23 30
 }
31
+
32
+.btn {
33
+	border: 1px solid lightgray;
34
+	padding: 0.5rem 1rem;
35
+
36
+	&:hover {
37
+		cursor: pointer;
38
+		background: lightgray;
39
+		border: 1px solid darkgrey;
40
+	}
41
+}

+ 11756
- 0
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save