Add pricing section, demo links, and refine layout

- Add pricing section with fair, usage-based pricing details
- Replace "Request a demo" CTAs with direct demo exploration links
- Extract `_hero`, `_features`, `_about`, `_contact`, `_organizations`,
  and `_pricing` partials from `_index.erb`
- Bump header responsive breakpoint from `md` to `lg` to prevent
  menu overflow on tablet-sized screens

Author: thibaudgg

locales/de.yml

@@ -1,14 +1,15 @@
 de:
   skip_to_content: Zum Hauptinhalt springen
   about:
-    application: Source-Available-Webanwendung
+    application: quelloffene Webanwendung
     other_orgs: zahlreichen anderen Organisationen
-    text: Ursprünglich entwickelt, um die Verwaltung von %{ragedevert} in Neuchâtel (CH) zu vereinfachen, entwickelt sich CSA Admin stetig weiter, um den vielfältigen Anforderungen von %{other_orgs} in der Schweiz und Deutschland gerecht zu werden. CSA Admin ist eine %{application}. Es soll einfach, effizient und intuitiv sein. Mit Leidenschaft entwickelt %{author} CSA Admin seit über 10 Jahren, um den Alltag in CSAs zu erleichtern.
+    text: Ursprünglich entwickelt, um die Verwaltung von %{ragedevert} zu vereinfachen, entwickelt sich CSA Admin stetig weiter, um den vielfältigen Anforderungen von %{other_orgs} gerecht zu werden. CSA Admin ist eine %{application}. Es soll einfach, effizient und intuitiv sein. Mit Leidenschaft entwickelt %{author} CSA Admin seit über 10 Jahren, um den Alltag in CSAs zu erleichtern.
     title: Über CSA Admin
-  call_to_action: Demo anfordern
+  call_to_action: Die Demo entdecken
   contact:
-    text: Möchten Sie mehr über CSA Admin erfahren? Haben Sie Fragen? Zögern Sie nicht, mich für weitere Informationen und/oder zur Vereinbarung einer Demo zu kontaktieren. Sie können mich per E-Mail unter %{mail} erreichen. Ich beantworte gerne alle Ihre Fragen.
-    title: Interessiert? Fordern Sie eine Demo an!
+    text: Sie können eine Demo-Installation selbst erkunden, um sich einen Eindruck zu verschaffen. Bei Fragen oder wenn Sie eine geführte Tour bevorzugen, schreiben Sie mir einfach an %{mail}.
+    title: Interessiert? Entdecken Sie die Demo!
+  demo_url: https://admin.solawi-admin.org/demo/new
   email: E-Mail
   features:
     activity:
@@ -32,8 +33,8 @@ de:
     opencode:
       description: Verfügbar in Französisch, Deutsch, Italienisch, Niederländisch und Englisch – CSA Admin ist zudem als %{opencode_link} unter der %{license_link} erhältlich. So können Sie aktiv mitgestalten.
       license: O'Saasy-Lizenz
-      opencode: Open-Code-Anwendung
-      title: Mehrsprachig und Open Code
+      opencode: Quelloffene Anwendung
+      title: Mehrsprachig und quelloffen
     renewal:
       description: Senden Sie mit einem Klick eine <strong>Verlängerungsanfrage</strong> an alle Abonnenten. Eine <strong>Bieterunde</strong> ermöglicht danach solidarische Preisgestaltung.
       title: Vereinfachte Verlängerung
@@ -50,6 +51,7 @@ de:
     about: Über
     demo: Demo
     features: Funktionen
+    pricing: Preis
   logo_alt: "CSA Admin Logo"
   org_name: "Solawi"
   org_name_definition: "Solidarische Landwirtschaft"
@@ -58,8 +60,19 @@ de:
     subtitle: Ob Sie ein Verein, eine Genossenschaft, ein Unternehmen oder eine Einzelperson sind, CSA Admin passt sich Ihren Bedürfnissen an.
     title: Sie nutzen CSA Admin
   phone: Telefon
+  pricing:
+    title: Einfache, faire Preisgestaltung
+    subtitle: des über CSA Admin fakturierten Betrags, einmal jährlich zu bezahlen.
+    hosting: Vollständig verwaltetes Hosting, DSGVO/nDSG-konform
+    security: Sicherheitsupdates, Backups und Wartung
+    features_included: Alle Funktionen und kontinuierliche Verbesserung
+    emails: E-Mail-Versand inklusive (Newsletter und Benachrichtigungen)
+    support: Direkter und persönlicher E-Mail-Support
+    opencode: Quellcode verfügbar, keine Abhängigkeit
+    description: Die Kosten wachsen mit Ihnen. Kleine Solawis zahlen wenig, grosse sind bei 2'400 CHF/EUR/Jahr gedeckelt.
+    description_bold: Kein Aufpreis, keine Einrichtungskosten, alles ist inklusive.
   site:
-    description: Source-Available-Webanwendung für effiziente Solawi-Verwaltung (Solidarische Landwirtschaft). Vereinfachen Sie Ihre Abläufe – Demo jetzt anfordern!
+    description: Quelloffene Webanwendung für effiziente Solawi-Verwaltung (Solidarische Landwirtschaft). Entdecken Sie die Demo!
     title: "CSA Admin - Effizientere Verwaltung Ihrer Solawi"
     path: /solawi/
   subtitle: Seit 2014 nutzen %{orgs_link} CSA Admin, um ihre täglichen Aufgaben zu erleichtern und die jährliche Verteilung von über <span class='font-semibold'>%{baskets_count} Anteilen</span> zu verwalten. Schließen Sie sich ihnen an!

locales/en.yml

@@ -3,12 +3,13 @@ en:
   about:
     application: source-available web application
     other_orgs: many other organizations
-    text: Initially created to simplify the management of %{ragedevert} in Neuchâtel (CH), CSA Admin has continuously improved and expanded over the years to meet the diverse needs of %{other_orgs} in Switzerland and Germany. CSA Admin is an %{application}. It aims to be simple, efficient, and intuitive. It is developed with passion by %{author}, who has been dedicated for over 10 years to making CSA administration easier.
+    text: Initially created to simplify the management of %{ragedevert}, CSA Admin has continuously improved and expanded over the years to meet the diverse needs of %{other_orgs}. CSA Admin is a %{application}. It aims to be simple, efficient, and intuitive. It is developed with passion by %{author}, who has been dedicated for over 10 years to making CSA administration easier.
     title: About CSA Admin
-  call_to_action: Request a demo
+  call_to_action: Explore the demo
   contact:
-    text: Would you like to know more about CSA Admin? Do you have any questions? Feel free to contact me for more information and/or to schedule a demo. You can reach me by email at %{mail}. I'm happy to answer any questions.
-    title: Interested? Request a demo!
+    text: You can explore a demo setup on your own to get a feel for how it works. If you have questions or prefer a guided tour, just write me at %{mail}.
+    title: Interested? Explore the demo!
+  demo_url: https://admin.csa-admin.org/demo/new
   email: Email
   features:
     activity:
@@ -32,8 +33,8 @@ en:
     opencode:
       description: Fully translated into English, French, German, Italian, and Dutch, CSA Admin is also developed as %{opencode_link} under the %{license_link}, so you can participate and propose improvements.
       license: O'Saasy license
-      opencode: open code
-      title: Multilingual and Open Code
+      opencode: source-available code
+      title: Multilingual and Source Available
     renewal:
       description: Is it the end of the year? With one click, quickly send a renewal request to all your subscribers. A <strong>renewal form</strong> and optional <strong>bidding round</strong> are available on their member account.
       title: Simplified Renewal
@@ -50,6 +51,7 @@ en:
     about: About
     demo: Demo
     features: Features
+    pricing: Pricing
   logo_alt: "CSA Admin Logo"
   org_name: "CSA"
   org_name_definition: "Community Supported Agriculture"
@@ -58,8 +60,19 @@ en:
     subtitle: CSA Admin works for associations, cooperatives, businesses, and individuals alike.
     title: They use CSA Admin
   phone: Phone
+  pricing:
+    title: Simple, fair pricing
+    subtitle: of the amount invoiced through CSA Admin, billed once a year.
+    hosting: Fully managed hosting, GDPR/nDSG compliant
+    security: Security updates, backups, and maintenance
+    features_included: All features and continuous improvement
+    emails: Email sending included (newsletters and notifications)
+    support: Direct and personalized email support
+    opencode: Source code available, no lock-in
+    description: The cost grows with your size. Small CSAs pay little, larger ones are capped at 2,400 CHF/EUR per year.
+    description_bold: No add-on, no extra setup cost, everything is included.
   site:
-    description: Source-available web app to efficiently manage your CSA (Community Supported Agriculture). Simplify your operations — request a free demo.
+    description: Source-available web app to efficiently manage your CSA (Community Supported Agriculture). Explore the demo freely!
     title: "CSA Admin - Streamline your CSA management"
     path: /
   subtitle: "Since 2014, %{orgs_link} have been using CSA Admin to facilitate their daily tasks and manage the annual distribution of over <span class='font-semibold'>%{baskets_count} baskets</span>. Join them!"

locales/fr.yml

@@ -1,14 +1,15 @@
 fr:
   skip_to_content: Aller au contenu principal
   about:
-    application: application web source-available
+    application: application web en code ouvert
     other_orgs: de nombreuses autres organisations
-    text: Initialement créée pour simplifier la gestion de %{ragedevert} à Neuchâtel (CH), CSA Admin n'a cessé de s'améliorer et de s'agrandir au fil des années pour répondre aux besoins divers et variés %{other_orgs} en Suisse et en Allemagne. CSA Admin est une %{application}. Elle se veut simple, efficace et intuitive. Elle est développée avec passion par %{author}, qui s'engage depuis plus de 10 ans à simplifier la vie des ACP pour les aider à prospérer.
+    text: Initialement créée pour simplifier la gestion de %{ragedevert}, CSA Admin n'a cessé de s'améliorer et de s'agrandir au fil des années pour répondre aux besoins divers et variés %{other_orgs}. CSA Admin est une %{application}. Elle se veut simple, efficace et intuitive. Elle est développée avec passion par %{author}, qui s'engage depuis plus de 10 ans à simplifier la vie des ACP pour les aider à prospérer.
     title: À propos de CSA Admin
-  call_to_action: Demander une démo
+  call_to_action: Explorer la démo
   contact:
-    text: Vous souhaitez en savoir plus sur CSA Admin? Vous avez des questions? N'hésitez pas à me contacter pour plus d'informations et/ou pour planifier une démo. Vous pouvez me joindre par e-mail à l'adresse %{mail}. Je me ferai un plaisir de répondre à toutes vos questions.
-    title: Intéressé·e? Demandez une démo!
+    text: Vous pouvez explorer une installation démo par vous-même pour vous faire une idée du fonctionnement. Si vous avez des questions ou préférez une visite guidée, écrivez-moi simplement à %{mail}.
+    title: Intéressé·e? Explorez la démo!
+  demo_url: https://admin.acp-admin.ch/demo/new
   email: E-mail
   features:
     activity:
@@ -32,8 +33,8 @@ fr:
     opencode:
       description: Entièrement traduite en français, allemand, italien, néerlandais et anglais, CSA Admin est aussi développée en %{opencode_link} sous la %{license_link}, vous pouvez donc participer et proposer des améliorations.
       license: licence O'Saasy
-      opencode: open code
-      title: Multilingue et open code
+      opencode: code ouvert
+      title: Multilingue et code ouvert
     renewal:
       description: C'est la fin de l'année? En un clic, envoyez rapidement une demande de renouvellement à tous vos abonné·e·s. Un formulaire de <strong>renouvellement/résiliation</strong> les attend sur leur compte de membre.
       title: Renouvellement simplifié
@@ -50,6 +51,7 @@ fr:
     about: À propos
     demo: Démo
     features: Fonctionnalités
+    pricing: Prix
   logo_alt: Logo de CSA Admin
   org_name: ACP
   org_name_definition: Agriculture Contractuelle de Proximité
@@ -58,8 +60,19 @@ fr:
     subtitle: Que vous soyez une association, une coopérative, une entreprise ou un particulier, CSA Admin s'adapte à vos besoins.
     title: Ils·Elles utilisent CSA Admin
   phone: Téléphone
+  pricing:
+    title: Un prix simple et juste
+    subtitle: du montant facturé par CSA Admin, à payer une fois par an.
+    hosting: Hébergement entièrement géré, conforme RGPD/nLPD
+    security: Mises à jour de sécurité, backup, et maintenance
+    features_included: Toutes les fonctionnalités et amélioration continue
+    emails: Envoi d'emails inclus (newsletters et notifications)
+    support: Support direct et personnalisé par email
+    opencode: Code source disponible, aucune dépendance
+    description: Le coût grandit avec vous. Les petites ACP paient peu, les grandes sont plafonnées à 2'400 CHF/EUR par an.
+    description_bold: Pas de supplément, pas de frais de mise en place, tout est inclus.
   site:
-    description: Application web source-available pour gérer efficacement votre ACP (Agriculture Contractuelle de Proximité). Simplifiez vos opérations, demandez une démo!
+    description: Application web en code ouvert pour gérer efficacement votre ACP (Agriculture Contractuelle de Proximité). Explorez la démo librement!
     title: CSA Admin - Simplifiez la gestion de votre ACP
     path: /acp/
   subtitle: Depuis 2014, %{orgs_link} utilisent CSA Admin pour faciliter leurs tâches quotidiennes et gérer la distribution annuelle de plus de <span class='font-semibold'>%{baskets_count} paniers</span>. Rejoignez-les !

source/_about.erb

@@ -0,0 +1,11 @@
+<h2 id="about" class="section-anchor section-heading-sm">
+  <%= t("about.title") %>
+</h2>
+<p class="section-body mt-4 text-justify">
+  <%= I18n.t("about.text", \
+    ragedevert: link_to('Rage de Vert', 'https://www.ragedevert.ch', class: 'whitespace-nowrap'), \
+    other_orgs: link_to(t('about.other_orgs'), '#organizations'), \
+    application: link_to(t('about.application'), data.site.repository), \
+    author: link_to(data.site.author.name, data.site.author.website, class: 'whitespace-nowrap') \
+  ) %>
+</p>

source/_contact.erb

@@ -0,0 +1,11 @@
+<div id="contact" class="section-anchor pb-10 highlight-on-target rounded-md">
+  <h2 class="section-heading-sm">
+    <%= t("contact.title") %>
+  </h2>
+  <p class="section-body mt-4 text-center">
+    <%= I18n.t("contact.text", mail: link_to(data.site.contact.email, data.site.contact.email_link, class: 'whitespace-nowrap')) %>
+  </p>
+  <div class="mt-8 text-center">
+    <%= link_to t('call_to_action'), t('demo_url'), class: 'btn-cta' %>
+  </div>
+</div>

source/_feature.erb

@@ -7,7 +7,7 @@
       <%= title %>
     </h3>
   </dt>
-  <dd class="mt-2 text-center text font-light">
+  <dd class="mt-2 text-center text-pretty font-light">
     <%= description %>
   </dd>
 </dl>

source/_features.erb

@@ -0,0 +1,67 @@
+<h2 id="features" class="section-anchor section-heading">
+  <%= t("features.title") %>
+</h2>
+<p class="section-subtitle">
+  <%= t("features.subtitle") %>
+</p>
+
+<div class="mt-10 md:grid md:grid-cols-3 md:gap-6">
+  <%= partial 'feature', locals: { \
+      logo: 'user-group', \
+      title: t('features.memberships.title'), \
+      description: t('features.memberships.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'calendar-days', \
+      title: t('features.deliveries.title'), \
+      description: t('features.deliveries.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'banknotes', \
+      title: t('features.billing.title'), \
+      description: t('features.billing.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'arrow-path', \
+      title: t('features.renewal.title'), \
+      description: t('features.renewal.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'chat-bubble-left-right', \
+      title: t('features.communication.title'), \
+      description: t('features.communication.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'globe-europe-africa', \
+      title: t('features.opencode.title'), \
+      description: I18n.t('features.opencode.description',
+        opencode_link: link_to(t('features.opencode.opencode'), data.site.repository), \
+        license_link: link_to(t('features.opencode.license'), 'https://osaasy.dev') \
+      ) \
+    } %>
+</div>
+
+<h3 class="mt-16 section-heading">
+  <%= t("features.title2") %>
+</h3>
+<p class="section-subtitle">
+  <%= t("features.subtitle2") %>
+</p>
+
+<div class="mt-10 md:grid md:grid-cols-3 md:gap-4 lg:gap-6">
+  <%= partial 'feature', locals: { \
+      logo: 'building-storefront', \
+      title: t('features.shop.title'), \
+      description: t('features.shop.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'shopping-bag', \
+      title: t('features.basket_content.title'), \
+      description: t('features.basket_content.description') \
+    } %>
+  <%= partial 'feature', locals: { \
+      logo: 'wrench-screwdriver', \
+      title: t('features.activity.title'), \
+      description: t('features.activity.description') \
+    } %>
+</div>

source/_header.erb

@@ -1,5 +1,5 @@
-<header class="my-6 md:my-12 flex flex-wrap md:flex-nowrap justify-between">
-  <div class="flex items-center grow w-full md:w-fit justify-center md:justify-start">
+<header class="my-6 md:my-12 flex flex-wrap lg:flex-nowrap justify-between">
+  <div class="flex items-center grow w-full lg:w-fit justify-center lg:justify-start">
     <%= inline_svg 'logo.svg', class: 'fill-current w-10 h-10 md:w-12 md:h-12', alt: t("logo_alt") %>
     <nav class="text-logo-green ml-3 font-bold text-2xl tracking-tight flex items-center">
       <span>
@@ -23,13 +23,14 @@
     </nav>
   </div>
 
-  <div class="flex items-center gap-4 w-full md:text-base md:w-fit mt-6 md:mt-0 justify-center md:justify-end">
+  <div class="flex items-center gap-4 w-full lg:text-base lg:w-fit mt-6 lg:mt-0 justify-center lg:justify-end">
     <%= link_to t('header.features'), '#features', class: 'text-gray-800 text-lg font-medium' %>
+    <%= link_to t('header.pricing'), '#pricing', class: 'text-gray-800 text-lg font-medium' %>
     <%= link_to t('header.demo'), '#contact', class: 'text-gray-800 text-lg font-medium' %>
     <%= link_to t('header.about'), '#about', class: 'text-gray-800 text-lg font-medium' %>
   </div>
 
-  <div class="flex items-center gap-4 w-full md:text-base md:w-fit mt-6 md:mt-0 md:ml-16 justify-center md:justify-end">
-    <%= link_to (inline_svg('envelope.svg', class: 'w-6 h-6 md:order-2 mr-2 md:mr-0 md:ml-2 mt-0.5', alt: t('email')) + content_tag(:strong, data.site.contact.email, class: 'font-semibold md:order-1')).html_safe, data.site.contact.email_link, class: 'flex items-center no-underline text-gray-800', title: t('email') %>
+  <div class="flex items-center gap-4 w-full lg:text-base lg:w-fit mt-6 lg:mt-0 lg:ml-16 justify-center lg:justify-end">
+    <%= link_to (inline_svg('envelope.svg', class: 'w-6 h-6 lg:order-2 mr-2 lg:mr-0 lg:ml-2 mt-0.5', alt: t('email')) + content_tag(:strong, data.site.contact.email, class: 'font-semibold lg:order-1')).html_safe, data.site.contact.email_link, class: 'flex items-center no-underline text-gray-800', title: t('email') %>
   </div>
 </header>

source/_hero.erb

@@ -0,0 +1,11 @@
+<h1 class="mt-24 md:mt-32 mx-2 md:mx-auto md:w-5/6 text-center tracking-tight text-4xl md:text-6xl font-extrabold">
+  <%= I18n.t 'title', org_name: content_tag(:span, t("org_name"), class: "text-logo-green drop-shadow-sm", title: t("org_name_definition")) %>
+</h1>
+
+<p class="mt-4 mx-auto md:w-4/6 text-center text-pretty md:leading-normal text-xl font-light">
+  <%= I18n.t 'subtitle', orgs_link: link_to(t('subtitle_orgs_link'), '#organizations'), baskets_count: format_number(data.site.baskets_count) %>
+</p>
+
+<div class="mt-12 md:mt-8 text-center">
+  <%= link_to t('call_to_action'), t('demo_url'), class: 'btn-cta' %>
+</div>