feat(contact): update contact form and link; improve layout and styles

content/_index.md

@@ -32,7 +32,7 @@ testimonials:
     primary_button_text="Essayer la démo"
     primary_button_url="http://demo.chill.social/"
     secondary_button_text="Réserver une démo"
-    secondary_button_url="#"
+    secondary_button_url="/contact"
     custom_class="hero"
     hero_image="/images/hero-dashboard.svg"
 >}}

content/contact.md

@@ -0,0 +1,24 @@
+---
+title: Contact
+layout: "simple"
+contactForm:
+  fields:
+    - name: "name"
+      label: "Nom complet"
+      type: "text"
+      required: true
+    - name: "email"
+      label: "Adresse email"
+      type: "email"
+      required: true
+    - name: "message"
+      label: "Votre message"
+      type: "textarea"
+      required: true
+  button:
+    label: "Envoyer le message"
+    color: "primary"
+    size: "md"
+---
+
+{{< contact-form >}}

content/resources/manuals.md

@@ -3,7 +3,7 @@ title: Manuels
 layout: "simple"
 ---
 
-<h5 class="content-subtitle bord-1 mb-2">Manuels d'utilisation de Chill</h5>
+<h5 class="content-subtitle bord-1 mb-2 mt-5">Manuels d'utilisation de Chill</h5>
 
 Il existe un manuel d'utilisation à l'usage des utilisateurs et un autre à l'usage des administrateurs. 
 
@@ -17,6 +17,6 @@ https://gitea.champs-libres.be/Chill-project/manuals/releases
 
 Le manuel est également accessible via un lien dans le pied de page de l'application.
 
-<h5 class="content-subtitle bord-2 mb-2">Formation des utilisateurs</h5>
+<h5 class="content-subtitle bord-2 mb-2 mt-5">Formation des utilisateurs</h5>
 
 Renseignez-vous auprès de votre [prestataire](/get-chill/providers) Chill pour organiser une journée de formation à l'utilisation de Chill. 

hugo.toml

@@ -100,7 +100,7 @@ pagination = { pagerSize = 6, path = "page" }
   # Primary button
   [params.cta.primary_button]
     text = "Réserver une démo"
-    url = "/demo"
+    url = "/contact"
 
   # Secondary button
   [params.cta.secondary_button]

static/css/style.css

@@ -2212,6 +2212,10 @@ body {
   order: 2;
 }
 
+.float-right {
+  float: right;
+}
+
 .\!my-0 {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
@@ -2232,11 +2236,6 @@ body {
   margin-bottom: 2rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .\!mb-24 {
   margin-bottom: 6rem !important;
 }
@@ -2321,6 +2320,10 @@ body {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -2333,10 +2336,6 @@ body {
   margin-top: auto;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
-}
-
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
@@ -2508,6 +2507,10 @@ body {
   max-width: 200px;
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-none {
   max-width: none;
 }
@@ -2594,6 +2597,10 @@ body {
   align-items: baseline;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -2731,6 +2738,10 @@ body {
   border-radius: 0px !important;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-2xl {
   border-radius: 1rem;
 }
@@ -2944,6 +2955,10 @@ body {
   padding: 2rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -4429,6 +4444,11 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.focus\:border-blue-300:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
+}
+
 .focus\:border-primary-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(237 69 13 / var(--tw-border-opacity, 1));
@@ -4439,6 +4459,12 @@ body {
   outline-offset: 2px;
 }
 
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

themes/chill-theme/layouts/shortcodes/contact-form.html

@@ -0,0 +1,18 @@
+{{ $form := .Page.Params.contactForm }}
+<form class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST" action="/contact">
+	{{ range $form.fields }}
+		<div class="mb-4">
+			<label for="{{ .name }}" class="block text-gray-700 font-bold mb-2">{{ .label }}</label>
+			{{ if eq .type "textarea" }}
+				<textarea id="{{ .name }}" name="{{ .name }}" rows="5" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300"></textarea>
+			{{ else }}
+				<input type="{{ .type }}" id="{{ .name }}" name="{{ .name }}" {{ if .required }}required{{ end }} class="w-full px-3 py-2 border rounded focus:outline-none focus:ring focus:border-blue-300" />
+			{{ end }}
+		</div>
+	{{ end }}
+  <div class="flex justify-end mt-4">
+    <button type="submit" class="px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105">
+      {{ $form.button.label | default "Envoyer" }}
+    </button>
+  </div>
+</form>

themes/chill-theme/static/js/language-preference.js

@@ -36,15 +36,8 @@
             const preferredLang = getStoredLanguage();
             const currentLang = getCurrentLanguage();
 
-            console.log('Language preference check:', {
-                preferredLang: preferredLang || 'none',
-                currentLang: currentLang,
-                visitorApiConfigured: !!VISITOR_API_PID
-            });
-
             // If user has a stored preference and it matches current language, we're good
             if (preferredLang && preferredLang === currentLang) {
-                console.log('Language preference: Already on preferred language:', currentLang);
                 return;
             }