From 214b431f3d2ea07f0f305c83e4743c5782fe3b0d Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Mon, 1 Feb 2021 11:03:53 +0100
Subject: [PATCH] feat: ethical section home
---
public/main.js | 89 ++++++++++++++++---
.../software-development.js | 5 +-
public/style/style.css | 37 ++++++++
src/home-page-components/kuadrado-values.js | 58 ++++++++++++
src/homepage.js | 5 +-
src/homepage.scss | 39 ++++++++
.../components/service-section.js | 5 +-
.../software-development.js | 2 +-
src/template/components/navbar.js | 2 +-
9 files changed, 220 insertions(+), 22 deletions(-)
create mode 100644 src/home-page-components/kuadrado-values.js
diff --git a/public/main.js b/public/main.js
index 64767e3..a5ed833 100644
--- a/public/main.js
+++ b/public/main.js
@@ -87,7 +87,67 @@ class ImageCarousel {
module.exports = ImageCarousel;
-},{"../lib/object-html-renderer":9}],4:[function(require,module,exports){
+},{"../lib/object-html-renderer":10}],4:[function(require,module,exports){
+"use strict";
+
+class KuadradoValues {
+ render() {
+ return {
+ tag: "section",
+ class: "kuadrado-values",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "h2",
+ contents: "<blue>Éthique</blue>",
+ },
+ {
+ tag: "ul",
+ class: "values-list",
+ contents: [
+ [
+ "💻 <blue>Logiciels libres et open source</blue>",
+ `Toutes nos productions logicielles, web et vidéoludiques sont
+ <b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
+ <br/>
+ Kuadrado Software souhaite s'engager fortement dans un numérique ouvert et transparent.`,
+ ],
+ [
+ "🌿 <blue>Écologie</blue>",
+ `Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
+ Ã travers internet.
+ <br/>Il est primordial selon nous de construire le numérique dans une direction de légèreté et d'économie de
+ ressources.`,
+ ],
+ [
+ "📖 <blue>Partage des connaissances</blue>",
+ `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
+ pour aller plus loin ensemble, le partage du savoir est fondamental.`,
+ ],
+ ].map(v => {
+ const [title, body] = v;
+ return {
+ tag: "li",
+ contents: [
+ { tag: "h3", contents: title },
+ { tag: "p", contents: body },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = KuadradoValues;
+
+},{}],5:[function(require,module,exports){
"use strict";
const { articles_url } = require("../../constants");
@@ -232,7 +292,7 @@ class NewsArticles {
module.exports = NewsArticles;
-},{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":7,"../lib/object-html-renderer":9}],5:[function(require,module,exports){
+},{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":8,"../lib/object-html-renderer":10}],6:[function(require,module,exports){
"use strict";
const { images_url } = require("../../constants");
@@ -270,10 +330,11 @@ class ThemeCard {
module.exports = ThemeCard;
-},{"../../constants":2}],6:[function(require,module,exports){
+},{"../../constants":2}],7:[function(require,module,exports){
"use strict";
const { images_url } = require("../constants");
+const KuadradoValues = require("./home-page-components/kuadrado-values");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
const WebPage = require("./lib/web-page");
@@ -354,7 +415,7 @@ class HomePage extends WebPage {
].map(cardProps => new ThemeCard(cardProps).render()),
},
{
- tag: "div",
+ tag: "section",
class: "page-philo",
contents: [
{
@@ -372,6 +433,8 @@ class HomePage extends WebPage {
new NewsArticles().render(),
],
},
+ // WIP
+ new KuadradoValues().render(),
],
};
}
@@ -379,7 +442,7 @@ class HomePage extends WebPage {
module.exports = HomePage;
-},{"../constants":2,"./home-page-components/news-articles":4,"./home-page-components/theme-card":5,"./lib/web-page":10}],7:[function(require,module,exports){
+},{"../constants":2,"./home-page-components/kuadrado-values":4,"./home-page-components/news-articles":5,"./home-page-components/theme-card":6,"./lib/web-page":11}],8:[function(require,module,exports){
"use strict";
const { fetchjson, fetchtext } = require("./fetch");
@@ -442,7 +505,7 @@ module.exports = {
populateArticles,
};
-},{"./fetch":8}],8:[function(require,module,exports){
+},{"./fetch":9}],9:[function(require,module,exports){
"use strict";
function fetchjson(url) {
@@ -468,7 +531,7 @@ module.exports = {
fetchtext,
};
-},{}],9:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
"use strict";
module.exports = {
@@ -554,7 +617,7 @@ module.exports = {
},
};
-},{}],10:[function(require,module,exports){
+},{}],11:[function(require,module,exports){
"use strict";
class WebPage {
@@ -564,7 +627,7 @@ class WebPage {
}
module.exports = WebPage;
-},{}],11:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
"use strict";
const HomePage = require("./homepage");
@@ -572,7 +635,7 @@ const runPage = require("./run-page");
runPage(HomePage);
-},{"./homepage":6,"./run-page":12}],12:[function(require,module,exports){
+},{"./homepage":7,"./run-page":13}],13:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -584,7 +647,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":9,"./template/template":14}],13:[function(require,module,exports){
+},{"./lib/object-html-renderer":10,"./template/template":15}],14:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
@@ -702,7 +765,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],14:[function(require,module,exports){
+},{"../../../constants":2}],15:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -776,4 +839,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":13}]},{},[11]);
+},{"../../config":1,"../../constants":2,"./components/navbar":14}]},{},[12]);
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index f1e06eb..e5720cd 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -327,9 +327,8 @@ class ServiceSection {
applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
<br /><br />
- <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises locales (Ardèche, Drôme, Rhône, Loire...) en étant leur <b>partenaire
- en développement <blue>web et logiciel</blue></b>.
- `,
+ <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises et organisations locales
+ (Ardèche, Drôme, Rhône, Loire, Haute-Loire...) en étant leur <b>partenaire en développement <blue>web et logiciel</blue></b>.`,
},
{
tag: "p",
diff --git a/public/style/style.css b/public/style/style.css
index 58bb64f..d65be3e 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -608,6 +608,40 @@ main #page-container #home-page .grid-3 .theme-card .card-description p {
main #page-container #home-page .grid-3 .theme-card:hover {
transform: scale(1.03);
}
+main #page-container #home-page .kuadrado-values {
+ background-image: url("/assets/images/wallpaper_binary_light.png");
+ padding: 100px 0 120px;
+}
+main #page-container #home-page .kuadrado-values *:not(a, blue) {
+ color: #d4d9dd;
+}
+main #page-container #home-page .kuadrado-values h2 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ margin: 0 auto 60px;
+ width: 120px;
+ height: 120px;
+ background-image: url("/assets/images/wallpaper_binary.png");
+ border-radius: 100%;
+ color: #72e3f0;
+}
+main #page-container #home-page .kuadrado-values ul.values-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 30px;
+}
+main #page-container #home-page .kuadrado-values ul.values-list li {
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 30px 20px 40px;
+}
+main #page-container #home-page .kuadrado-values ul.values-list li h3 {
+ text-align: center;
+}
+main #page-container #home-page .kuadrado-values ul.values-list li p {
+ text-align: justify;
+}
@media screen and (max-width: 900px) {
main #page-container #home-page .grid-3 {
grid-template-columns: 1fr;
@@ -639,6 +673,9 @@ main #page-container #home-page .grid-3 .theme-card:hover {
main #page-container #home-page .grid-3 .theme-card:hover {
transform: none;
}
+ main #page-container #home-page .kuadrado-values ul.values-list {
+ grid-template-columns: 1fr;
+ }
}
@media screen and (max-width: 1300px) {
main #page-container #home-page .grid-3 {
diff --git a/src/home-page-components/kuadrado-values.js b/src/home-page-components/kuadrado-values.js
new file mode 100644
index 0000000..e7893c3
--- /dev/null
+++ b/src/home-page-components/kuadrado-values.js
@@ -0,0 +1,58 @@
+"use strict";
+
+class KuadradoValues {
+ render() {
+ return {
+ tag: "section",
+ class: "kuadrado-values",
+ contents: [
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "h2",
+ contents: "<blue>Éthique</blue>",
+ },
+ {
+ tag: "ul",
+ class: "values-list",
+ contents: [
+ [
+ "💻 <blue>Logiciels libres et open source</blue>",
+ `Toutes nos productions logicielles, web et vidéoludiques sont
+ <b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
+ <br/>
+ Kuadrado Software souhaite s'engager fortement dans un numérique ouvert et transparent.`,
+ ],
+ [
+ "🌿 <blue>Écologie</blue>",
+ `Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
+ Ã travers internet.
+ <br/>Il est primordial selon nous de construire le numérique dans une direction de légèreté et d'économie de
+ ressources.`,
+ ],
+ [
+ "📖 <blue>Partage des connaissances</blue>",
+ `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle,
+ pour aller plus loin ensemble, le partage du savoir est fondamental.`,
+ ],
+ ].map(v => {
+ const [title, body] = v;
+ return {
+ tag: "li",
+ contents: [
+ { tag: "h3", contents: title },
+ { tag: "p", contents: body },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = KuadradoValues;
diff --git a/src/homepage.js b/src/homepage.js
index 14d105e..351b0ef 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -1,6 +1,7 @@
"use strict";
const { images_url } = require("../constants");
+const KuadradoValues = require("./home-page-components/kuadrado-values");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
const WebPage = require("./lib/web-page");
@@ -81,7 +82,7 @@ class HomePage extends WebPage {
].map(cardProps => new ThemeCard(cardProps).render()),
},
{
- tag: "div",
+ tag: "section",
class: "page-philo",
contents: [
{
@@ -99,6 +100,8 @@ class HomePage extends WebPage {
new NewsArticles().render(),
],
},
+ // WIP
+ new KuadradoValues().render(),
],
};
}
diff --git a/src/homepage.scss b/src/homepage.scss
index cee5d25..2d2b405 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -244,6 +244,39 @@
}
}
}
+
+ .kuadrado-values {
+ background-image: url("/assets/images/wallpaper_binary_light.png");
+ padding: 100px 0 120px;
+ *:not(a, blue) {
+ color: $light_0;
+ }
+ h2 {
+ @include flex-center;
+ margin: 0 auto 60px;
+ width: 120px;
+ height: 120px;
+ background-image: url("/assets/images/wallpaper_binary.png");
+ border-radius: 100%;
+ color: $blue_3;
+ }
+ ul.values-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 30px;
+ li {
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 30px 20px 40px;
+ h3 {
+ text-align: center;
+ }
+ p {
+ text-align: justify;
+ }
+ }
+ }
+ }
+
@media screen and (max-width: $screen_l) {
.grid-3 {
grid-template-columns: 1fr;
@@ -277,6 +310,12 @@
}
}
}
+
+ .kuadrado-values {
+ ul.values-list {
+ grid-template-columns: 1fr;
+ }
+ }
}
@media screen and (max-width: $page_contents_center_width) {
.grid-3 {
diff --git a/src/pages/software-development/components/service-section.js b/src/pages/software-development/components/service-section.js
index 8e7b07f..9b06758 100644
--- a/src/pages/software-development/components/service-section.js
+++ b/src/pages/software-development/components/service-section.js
@@ -52,9 +52,8 @@ class ServiceSection {
applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
<br /><br />
- <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises locales (Ardèche, Drôme, Rhône, Loire...) en étant leur <b>partenaire
- en développement <blue>web et logiciel</blue></b>.
- `,
+ <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises et organisations locales
+ (Ardèche, Drôme, Rhône, Loire, Haute-Loire...) en étant leur <b>partenaire en développement <blue>web et logiciel</blue></b>.`,
},
{
tag: "p",
diff --git a/src/pages/software-development/software-development.js b/src/pages/software-development/software-development.js
index 321a7cc..a5325a9 100644
--- a/src/pages/software-development/software-development.js
+++ b/src/pages/software-development/software-development.js
@@ -42,7 +42,7 @@ class SoftwareDevelopment extends WebPage {
{
tag: "h2",
id: "projects", //anchor
- contents: "Nos projets",
+ contents: "Projets",
class: "page-section-title",
},
new SoftwareArticles().render(),
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
index d13bde2..44d846d 100644
--- a/src/template/components/navbar.js
+++ b/src/template/components/navbar.js
@@ -8,7 +8,7 @@ const NAV_MENU_ITEMS = [
"/software-development/",
"Software",
[
- ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#projects", "Projets"],
["/software-development/#service", "Prestation de services"],
],
],
--
GitLab