Adaptation d'après les retours

Makefile

@@ -1,2 +1,2 @@
 start:
-	pnpm dlx serve src
+	pnpm dlx serve src

src/index.html

@@ -43,6 +43,7 @@
               <span class="text-lg font-semibold">Prochaine distribution</span>
             </div>
             <p class="text-2xl font-bold text-gray-900">18 décembre</p>
+            <p class="text-xs text-gray-600">18h-20h</p>
             <p class="text-gray-600 mt-2">
               <a
                 href="https://www.openstreetmap.org/#map=19/43.51294/1.32234"
@@ -181,15 +182,14 @@
               <p class="mt-2 text-base text-gray-500">
                 Découvrez les valeurs et engagements des Frouzivores.
               </p>
-              <div class="mt-4">
+              <div class="mt-4"></div>
-                <a
+              <a
-                  href="./fichiers/charte_20201127.pdf"
+                href="./fichiers/charte_20201127.pdf"
-                  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-500 hover:bg-gray-400"
+                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-green-600 bg-green-100 hover:bg-green-200"
-                >
+              >
-                  <i class="fas fa-download mr-2"></i>
+                <i class="fas fa-download mr-2"></i>
-                  Télécharger la charte
+                Télécharger la charte
-                </a>
+              </a>
-              </div>
             </div>
           </div>
         </div>
@@ -200,21 +200,26 @@
     <div class="bg-green-50 py-24">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center">
-          <i class="fas fa-heart text-4xl text-green-600"></i>
+          <div
+            class="flex items-center justify-center h-48 w-48 rounded-full bg-green-500 mx-auto mt-6"
+          >
+            <img src="./logo_spf_blanc.png" alt="Secours Populaire Frouzins" />
+          </div>
           <h2 class="mt-4 text-3xl font-bold text-gray-900">Solidarité</h2>
           <p class="mt-4 text-xl text-gray-500">
             Des produits au profit du Secours Populaire Frouzins
           </p>
         </div>
-        <div class="mt-12 max-w-3xl mx-auto text-center">
+        <div class="mt-8 max-w-3xl mx-auto text-center">
           <p class="text-lg text-gray-500">
             Faites également preuve de solidarité en commandant des produits au
             profit de l'antenne de Frouzins du Secours Populaire Français.
           </p>
+
           <p class="mt-4 text-lg text-gray-500">
-            Ajoutez un ou plusieurs produits portant la mention « au profit du
+            Ajoutez un ou plusieurs produits portant la mention « au profit du
-            secours populaire » à votre panier. Ils seront distribués aux
+            secours populaire » à votre panier. Ils seront remis aux
-            bénéficiaires dans les jours qui suivent la commande.
+            bénéficiaires dans les jours qui suivent la distribution.
           </p>
           <p class="mt-4 text-lg text-gray-600 font-bold">
             Dons possibles : yaourts, farine, steaks hachés, fromage…
@@ -245,15 +250,15 @@
           </p>
         </div>
         <div class="mt-12 grid grid-cols-2 gap-4 md:grid-cols-4">
-          <div class="bg-gray-50 rounded-lg p-4 text-center">
+          <div class="bg-gray-50 rounded-lg p-4 text-center opacity-50">
             <p class="text-lg font-medium text-gray-800">25 septembre 2024</p>
             <p class="text-sm text-gray-600 font-semibold">Passée</p>
           </div>
-          <div class="bg-gray-50 rounded-lg p-4 text-center">
+          <div class="bg-gray-50 rounded-lg p-4 text-center opacity-50">
             <p class="text-lg font-medium text-gray-800">23 octobre 2024</p>
             <p class="text-sm text-gray-600 font-semibold">Passée</p>
           </div>
-          <div class="bg-gray-50 rounded-lg p-4 text-center">
+          <div class="bg-gray-50 rounded-lg p-4 text-center opacity-50">
             <p class="text-lg font-medium text-gray-800">27 novembre 2024</p>
             <p class="text-sm text-gray-600 font-semibold">Passée</p>
           </div>
@@ -454,14 +459,16 @@
           </p>
           <p class="mt-4 text-xl text-gray-500">
             Vous pouvez adhérer lors de la distribution mensuelle, ou en ligne
-            via HelloAsso.<br />
+            via HelloAsso.
+          </p>
+          <div class="mt-8">
             <a
               href="https://www.helloasso.com/associations/les-frouzivores/adhesions/adhesions"
-              class="text-green-600 hover:underline"
+              class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700"
             >
               Je soutiens l'association en adhérant !
             </a>
-          </p>
+          </div>
         </div>
       </div>
     </div>
@@ -497,8 +504,18 @@
                 J'ai un problème avec ma commande. Que faire ?
               </dt>
               <dd class="mt-2 text-base text-gray-500">
-                Contactez-nous directement par email ou via notre page Facebook.
+                Contactez-nous directement par email ou via notre page
-                Nous vous répondrons dans les plus brefs délais.
+                <a
+                  href="https://facebook.com/lesfrouzivores"
+                  class="text-green-600 hover:underline"
+                  >Facebook</a
+                >
+                ou
+                <a
+                  href="https://www.instagram.com/les_frouzivores/"
+                  class="text-green-600 hover:underline"
+                  >Instagram</a
+                >. Nous vous répondrons dans les plus brefs délais.
               </dd>
             </div>
             <div>
@@ -524,8 +541,19 @@
                 Comment être informé des actualités de l'association ?
               </dt>
               <dd class="mt-2 text-base text-gray-500">
-                Suivez-nous sur notre page Facebook et inscrivez-vous à notre
+                Suivez-nous sur notre page
-                newsletter.
+                <a
+                  href="https://facebook.com/lesfrouzivores"
+                  class="text-green-600 hover:underline"
+                  >Facebook</a
+                >
+                ou
+                <a
+                  href="https://www.instagram.com/les_frouzivores/"
+                  class="text-green-600 hover:underline"
+                  >Instagram</a
+                >
+                et demandez à être ajouté·e à notre newsletter.
               </dd>
             </div>
           </dl>