diff --git a/src/_includes/partials/djangokam.njk b/src/_includes/partials/djangokam.njk new file mode 100644 index 0000000..3fff11b --- /dev/null +++ b/src/_includes/partials/djangokam.njk @@ -0,0 +1,43 @@ +
+
+

{{ djangokam.surtitre }}

+

{{ djangokam.titre }} {{ djangokam.titreAccent }}

+

{{ djangokam.accroche }}

+ + {# TODO: visuel officiel DJANGOKAM (src/assets/images/) #} + +
+ {{ djangokam.message_cle }} +
+ +
+ {% for paragraphe in djangokam.histoire %} +

{{ paragraphe }}

+ {% endfor %} +
+ +
+ {% for fait in djangokam.faits %} +
+
{{ fait.icon }}
+

{{ fait.chiffre }}

+

{{ fait.texte }}

+
+ {% endfor %} +
+ +

{{ djangokam.ia_instrument }}

+ +
+ {% for bouton in djangokam.boutons %} + + {{ bouton.text }} → + + {% endfor %} +
+ +

+ {{ djangokam.presse.texte }} {{ djangokam.presse.email }} +

+
+
diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index 7d5a3d4..9b9a9cc 100644 --- a/src/assets/css/styles.css +++ b/src/assets/css/styles.css @@ -1376,3 +1376,132 @@ input[type="number"]:focus { font-size: 2rem; } } + +/* DJANGOKAM Section */ +.djangokam { + padding: 4rem 2rem; + background: + url('data:image/svg+xml;utf8,') 0 0 / 160px 160px, + linear-gradient(135deg, var(--noir-profond) 0%, var(--gris-sombre) 100%); + text-align: center; +} + +.djangokam-surtitre { + text-transform: uppercase; + letter-spacing: 0.15em; + font-size: 0.9rem; + font-weight: 600; + color: var(--vert-oki); + margin-bottom: 0.5rem; +} + +.djangokam h2 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.djangokam-highlight { + max-width: 800px; + margin: 2rem auto; + padding: 2rem; + text-align: left; + font-size: 1.1rem; + line-height: 1.8; + font-style: italic; + background: rgba(253, 184, 19, 0.1); + border-left: 4px solid var(--or-oki); + border-radius: 0 25px 25px 0; +} + +.djangokam-histoire { + max-width: 800px; + margin: 0 auto 3rem; + text-align: left; +} + +.djangokam-histoire p { + font-size: 1.1rem; + line-height: 1.8; + margin-bottom: 1.5rem; +} + +.djangokam-facts { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 2rem; + margin-bottom: 3rem; +} + +.djangokam-fact-card { + background: rgba(0, 214, 108, 0.1); + border: 3px solid var(--vert-oki); + border-radius: 30px 15px 30px 15px; /* Forme organique asymétrique */ + padding: 2rem; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: 0 8px 25px rgba(0, 214, 108, 0.15); +} + +.djangokam-fact-card:nth-child(2n) { + background: rgba(255, 22, 84, 0.1); + border-color: var(--rouge-oki); + box-shadow: 0 8px 25px rgba(255, 22, 84, 0.15); +} + +.djangokam-fact-card:hover { + transform: translateY(-5px); + border-color: var(--or-oki); +} + +.djangokam-fact-icon { + font-size: 2.5rem; + margin-bottom: 1rem; + display: inline-block; + animation: floatOrganic 4s ease-in-out infinite; +} + +.djangokam-fact-card h3 { + color: var(--or-oki); + margin-bottom: 0.5rem; + font-size: 1.3rem; +} + +.djangokam-instrument { + max-width: 800px; + margin: 0 auto 3rem; + font-size: 1.1rem; + line-height: 1.8; + opacity: 0.9; +} + +.djangokam-buttons { + justify-content: center; + margin-bottom: 2rem; +} + +.djangokam-presse { + font-size: 0.9rem; + opacity: 0.7; +} + +.djangokam-presse a { + color: var(--or-oki); + text-decoration: none; +} + +.djangokam-presse a:hover { + text-decoration: underline; +} + +@media (max-width: 768px) { + .djangokam h2 { + font-size: 2rem; + } + + .djangokam-facts { + grid-template-columns: 1fr; + } + + .djangokam-buttons { + flex-direction: column; + } +} diff --git a/src/index.njk b/src/index.njk index af2b3af..a714110 100644 --- a/src/index.njk +++ b/src/index.njk @@ -5,6 +5,7 @@ layout: layouts/base.njk {% include "partials/hero.njk" %} {% include "partials/publics.njk" %} {% include "partials/projects.njk" %} +{% include "partials/djangokam.njk" %} {% include "partials/mission.njk" %} {% include "partials/hosting.njk" %} {% include "partials/clients.njk" %}