Add some Pug-based example templates.

.gitignore

@@ -0,0 +1 @@
+.*.swp

README.md

@@ -23,6 +23,13 @@ system](https://github.com/hypered/design).
 $ scripts/serve.sh
 ```
 
+For the Pug-based files:
+
+```
+$ cd struct/
+$ ./serve.sh
+```
+
 
 ## Deploying
 

struct/.gitignore

@@ -0,0 +1,3 @@
+dist/
+scss
+static

struct/README.md

@@ -0,0 +1,13 @@
+This is a setup to prototype pages with Pug similar to `design/struct`. Like
+design/struct, it reuses the Gulpfile from `design/struct`. The `scss/` and
+`static/` directories are symlinks to the ones in design/struct.
+
+Finally, this subdirectory is called `struct` too because the Gulpfile expects
+that to not use the `design/itcss` files.
+
+This allows to work on the example templates exactly like in `design/struct`,
+but without polluting it with specific content for `hypered.be`.
+
+```
+$ ./serve.sh
+```

struct/serve.sh

@@ -0,0 +1,4 @@
+#! /usr/bin/env nix-shell
+#! nix-shell -i bash ../../design/itcss/shell.nix
+
+gulp --gulpfile ../../design/itcss/gulpfile.js --cwd .

struct/templates/contact.pug

@@ -0,0 +1,83 @@
+include ../../../design/struct/templates/includes/mixins/icons.pug
+doctype html
+html(dir="ltr", lang="fr")
+    head
+        meta(charset="utf-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        link(rel="stylesheet", href="/static/css/struct.css")
+        block Hypered SRL
+    body.u-container-vertical
+        header
+            .u-container
+                .u-bar
+                    .u-bar__left
+                        style.
+                          .a-logo { color: black; text-decoration: none; }
+                        a.a-logo(href="/")
+                            div
+                                span.logo hypered
+                    .u-bar__right
+                        ul
+                            li
+                                .menu-item
+                                    a(href="/#projects").menu-link Projets
+                            li
+                                .menu-item
+                                    a(href="/#services").menu-link Services
+                            li
+                                .menu-item
+                                    a(href="/contact.html").menu-link Contact
+
+        main
+            .u-container.flow-all.u-flow-c-4
+                .switcher
+                    .flow
+                        p Hypered est une société de consultance belge, spécialisée dans le développement informatique et le conseil. Vous pouvez nous contacter par email à l'adresse <a href="mailto:[email protected]">[email protected]</a>.
+
+                    .c-content.flow
+                        // empty
+
+                .c-content.flow-all.u-flow-c-4
+                .switcher
+                    .c-content.flow
+                        p Hypered SRL est enregistrée en Belgique:
+                        p
+                            | VAT:  BE652 849 986<br>
+                            | IBAN: BE12 3631 6046 2692<br>
+                            | BIC:  BBRUBEBB
+                    .c-content.flow
+                        p Notre adresse officielle est:
+                        p
+                            | Hypered SRL<br>
+                            | Rue Hugo d'Oignies 10<br>
+                            | 5100 Jambes (Namur)<br>
+                            | Belgique
+                    .c-content.flow
+                        // empty
+
+        footer
+            .u-container
+                hr
+                .switcher
+                    .c-content.flow
+                        h4 Hypered
+                        ul.no-disc
+                            li
+                                a(href="/#about") A propos
+                            li
+                                a(href="/#projects") Projets
+                            li
+                                a(href="/#services") Services
+                            li
+                                a(href="https://github.com/hypered") Open source
+                            li
+                                a(href="/contact.html") Contact
+                    .c-content.flow
+                        // empty
+                    .c-content.flow
+                        // empty
+
+                .flow.u-flow-c-4
+                    img(src="/static/images/belgium-flag.svg" alt="The flag of Belgium" width="15px" height="13px")
+                    span &nbsp; &nbsp; &nbsp; © Hypered SRL, 2019-2024.&nbsp; &nbsp; &nbsp;
+                    span Get it done. Get it Hypered.

struct/templates/index.pug

@@ -0,0 +1,126 @@
+include ../../../design/struct/templates/includes/mixins/icons.pug
+doctype html
+html(dir="ltr", lang="fr")
+    head
+        meta(charset="utf-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1")
+        link(rel="stylesheet", href="/static/css/struct.css")
+        block Hypered SRL
+    body.u-container-vertical
+        header
+            .u-container
+                .u-bar
+                    .u-bar__left
+                        style.
+                          .a-logo { color: black; text-decoration: none; }
+                        a.a-logo(href="/")
+                            div
+                                span.logo hypered
+                    .u-bar__right
+                        ul
+                            li
+                                .menu-item
+                                    a(href="/#projects").menu-link Projets
+                            li
+                                .menu-item
+                                    a(href="/#services").menu-link Services
+                            li
+                                .menu-item
+                                    a(href="/contact.html").menu-link Contact
+
+        main
+            .u-container
+                style.
+                  .u-step-d-3 {
+                    letter-spacing: 0;
+                  }
+                .flow-all
+                    h1.u-step-d-3 Le développement logiciel, défini
+                .switcher
+                    .flow
+                        p Hypered est une société de consultance belge, spécialisée dans le développement informatique et le conseil. Nous vous offrons des solutions sur mesure pouvant répondre aux spécificités de vos besoins.
+
+                    .c-content.flow
+                        p Avec notre large expertise, nous guidons nos clients dans la définition et la mise en œuvre de leur vision technique. En partageant notre culture du développement, nous collaborons étroitement avec vos équipes pour optimiser vos projets et processus informatiques.
+
+                        p Nous comprenons que les systèmes informatiques vieillissants peuvent freiner votre croissance et compliquer vos opérations quotidiennes. Nous pouvons vous aider à reprendre en main et revitaliser vos applications existantes, les modernisant pour répondre aux exigences actuelles du marché.
+
+                        p Nous pouvons également réaliser vos projets de développements et nous proposons des formations ciblées sur Git et Nix, tout en vous accompagnant dans l’automatisation de vos environnements de tests et de vos processus de déploiement.
+
+
+
+                .c-content.flow-all.u-flow-c-4.limit-42em
+                    h2(id="projects") Projets
+                    p Outre notre expertise en consultance déployée auprès des équipes de nos clients, Hypered se distingue également par le développement de ses propres logiciels. Ces projets démontrent notre engagement envers la qualité — de la rédaction du code à la mise en œuvre des déploiements — tout en facilitant l'intégration des développeurs et développeuses qui nous rejoignent.
+
+                .c-content.flow-all.u-flow-c-4
+                    .switcher.u-flow-c-4
+                        img.adapt.blog-post-details(src="/static/images/curiosity-screenshot-2560x1440.png" alt="The homepage of Curiosity, a prototype for Smart Coop")
+                        .c-content.flow
+                            p <b>Curiosity</b> est un prototype fonctionnel et open source développé pour la coopérative Smart. Ce projet a été conçu pour faciliter l'élaboration, la discussion et la communication des exigences d'une future plateforme destinée aux membres de Smart.
+                            p Ce projet est en constante évolution et illustre clairement la philosophie de développement d'Hypered. Il met en avant des pratiques telles que la documentation vivante, les scénarios de tests, l'analyse détaillée de l'état du système, la couverture de code, la création simplifiée d'environnements de développement ou de tests, ainsi que l'intégration et le déploiement continus.
+                            a.c-button.c-button--secondary(href='https://cty-1.hypered.systems')
+                                span Visiter Curiosity
+                                +arrow-right
+
+                    .switcher.u-flow-c-4
+                        img.adapt.blog-post-details(src="/static/images/refli-screenshot-2560x1440.png" alt="The homepage of Refli, an online platform for payroll")
+                        .c-content.flow
+                            p <b>Refli</b> est une plateforme développée par Hypered, conçue pour simplifier et optimiser le domaine du payroll. Ce projet marque l'entrée d'Hypered dans le marché des produits SaaS (Software-as-a-Service). Il nous permet de transcender une approche souvent passive de la veille technologique, en intégrant activement des technologies avancées telles que le langage de programmation Haskell, le moteur de production Nix ou encore l'IA.
+                            p Malgré les défis posés par un système de production déployé dans le cloud, Refli conserve l'approche de prototypage rapide adoptée par Curiosity. Par exemple, elle permet de créer et d'initialiser dynamiquement une base de données relationnelle pour chaque scénario de test.
+                            a.c-button.c-button--secondary(href='https://refli.be')
+                                span Visiter Refli
+                                +arrow-right
+
+                    .switcher.u-flow-c-4
+                        img.adapt.blog-post-details(src="/static/images/lex-iterata-screenshot-2560x1440.png" alt="The homepage of Lex Iterata, a new rendition of the Belgian legislative texts")
+                        .c-content.flow
+                            p <b>Lex Iterata</b> est un nouveau site web qui transforme la présentation des textes consolidés du Moniteur Belge. Grâce à cette initiative, les textes sont désormais plus clairs et plus faciles à lire, particulièrement sur les appareils mobiles. Pour en savoir plus sur Lex Iterata, nous vous invitons à consulter <a href="https://refli.be/fr/blog/2024/01/19/introducing-refli">notre article de blog</a> dédié.
+                            a.c-button.c-button--secondary(href='https://refli.be/fr/lex')
+                                span Visiter Lex Iterata
+                                +arrow-right
+
+                .c-content.flow-all.u-flow-c-4
+                    h2(id="services") Services
+                .switcher
+                    .c-content.flow
+                        h3 Consultance
+                        p Chez Hypered, nous offrons bien plus que de simples conseils. Nous nous engageons à être leaders en matière de techniques informatiques et à fournir des formations spécialisées pour élever les compétences de vos équipes. Notre expertise vous aide à définir et à implémenter des stratégies efficaces, tout en vous guidant à travers les complexités du développement moderne. Nos formations sur mesure sont conçues pour renforcer l'expertise de vos équipes dans des domaines clés, assurant ainsi une amélioration continue de vos opérations.
+                    .c-content.flow
+                        h3 Développement
+                        p Nous sommes spécialisés dans la réalisation de logiciels personnalisés, capables de s'intégrer harmonieusement avec les procédures de votre entreprise. Que ce soit en collaborant étroitement avec vos équipes ou en prenant en charge l'ensemble du projet, nous nous assurons que chaque solution logicielle reflète parfaitement vos attentes et répond à vos besoins spécifiques. De la conception à la livraison, nous mettons l'accent sur la qualité et l'efficacité pour garantir des résultats qui non seulement répondent, mais aussi surpassent les standards de l'industrie.
+                    .c-content.flow
+                        h3 Archéologie
+                        p Le service de revitalisation de logiciels d'Hypered est dédié à la modernisation et à la reprise en main d'applications legacy. Face à des systèmes obsolètes ou mal maîtrisés par vos équipes, nous intervenons pour rafraîchir votre infrastructure logicielle. Notre approche inclut une évaluation minutieuse des systèmes en place, l'identification des potentialités d'amélioration, et l'implémentation de solutions modernes. Ces interventions visent à accroître la robustesse et la performance de vos applications, assurant ainsi leur conformité aux normes actuelles et futures.
+
+                .c-content.flow-all.u-flow-c-4.limit-42em
+                    h2(id="about") A propos
+                    p Hypered est dirigée par Võ Minh Thu, spécialiste du développement informatique avec plus de 15 années d'expérience professionnelle.
+                    p Avec un Master en informatique de l'Université de Namur, Thu a mené divers rôles techniques de haut niveau, allant de coach technique et lead technique à CTO, en se concentrant sur les pratiques modernes de développement et l'intégration de solutions open source. En tant que propriétaire d'Hypered, il offre des services de développement full-stack, des conseils en DevOps, et des solutions d'automatisation, avec une expertise approfondie en programmation fonctionnelle et technologies cloud. Hypered se dédie à l'excellence technique, proposant des formations spécialisées et l'automatisation des processus pour accroître votre efficacité.
+
+        footer
+            .u-container
+                hr
+                .switcher
+                    .c-content.flow
+                        h4 Hypered
+                        ul.no-disc
+                            li
+                                a(href="/#about") A propos
+                            li
+                                a(href="/#projects") Projets
+                            li
+                                a(href="/#services") Services
+                            li
+                                a(href="https://github.com/hypered") Open source
+                            li
+                                a(href="/contact.html") Contact
+                    .c-content.flow
+                        // empty
+                    .c-content.flow
+                        // empty
+
+                .flow.u-flow-c-4
+                    img(src="/static/images/belgium-flag.svg" alt="The flag of Belgium" width="15px" height="13px")
+                    span &nbsp; &nbsp; &nbsp; © Hypered SRL, 2019-2024.&nbsp; &nbsp; &nbsp;
+                    span Get it done. Get it Hypered.