Adiciona contacto MEPs e calendário

index.html

@@ -569,33 +569,70 @@
               </div>
           </div>
       </section>
-      <!--
+
-      <section id="campaigns" class="flex justify-center bg-lavender-600 pt-24 l:pt-28 pb-16 l:pb-24 flowing-text">
+      <section id="o-que-fazer" class="flex justify-center bg-orange text-lavender-800 pt-24 l:pt-28 pb-16 l:pb-24">
-          <div class="responsive-width l:w-3/4 bg-white text-lavender-800 shadow px-4 py-12 l:px-10 l:py-14 xl:px-24">
+          <div class="responsive-width">
               <div class="flex flex-col gap-8 l:items-center">
-                  <h1 class="h2 text-center">The Stop Scanning Me campaign is present in different countries.</h1>
+                  <h1 class="text-center pb-6 l:pb-12">Diz "não" ao controlo das conversas</h1>
                   <p class="h3 text-center">
-                      <a rel="external" href="https://chat-kontrolle.eu/"
+                    O próximo passo no processo Europeu é o voto na
-                          aria-label="Link to the German campaign site">
+                    <a rel="external" href="https://www.europarl.europa.eu/committees/pt/libe/about" aria-label="Hiperligação para o website da Comissão LIBE">
-                          The German "Chatkontrolle STOPPEN!" campaign
+                      Comissão das Liberdades Cívicas, da Justiça e dos Assuntos Internos (LIBE)</a>.
-                      </a>
                   </p>
                   <p class="h3 text-center">
-                      <a rel="external" href="https://chatcontrol.dk/en/"
+                      Contacta os membros Portugueses da Comissão a dizer-lhes que esta proposta te preocupa:
-                          aria-label="Link to the Danish campaign site">
-                          The Danish "Chat control" coalition
-                      </a>
-                  </p>
-                  <p class="h3 text-center">
-                      <a rel="external" href="https://chatcontrol.se/"
-                          aria-label="Link to the Swedish campaign site">
-                          The Swedish "Chat Control 2.0" campaign
-                      </a>
                   </p>
               </div>
+
+              <div class="responsive-width flex text-center justify-center text-white gap-8 mt-8 flex-wrap">
+                <a class="bg-lavender-800 hover:bg-lavender-600 flex flex-col gap-4 px-4 py-4" href="https://www.europarl.europa.eu/meps/en/197650/ISABEL_SANTOS/home">
+                  <img src="img/mep/isabel-santos.jpg" alt="" />
+
+                  <span>Isabel Santos</span>
+                  <span>PS</span>
+                  <div rel="external" class="button larger w-full self-center text-center">Contactar</div>
+                </a>
+
+                <a class="bg-lavender-800 hover:bg-lavender-600 flex flex-col gap-4 px-4 py-4" href="https://www.europarl.europa.eu/meps/en/96903/PAULO_RANGEL/home">
+                  <img src="img/mep/paulo-rangel.jpg" alt="" />
+                  <span>Paulo Rangel</span>
+                  <span>PSD</span>
+                  <div rel="external" class="button larger w-full self-center text-center">Contactar</div>
+                </a>
+
+                <a class="bg-lavender-800 hover:bg-lavender-600 flex flex-col gap-4 px-4 py-4" href="https://www.europarl.europa.eu/meps/en/96978/NUNO_MELO/home">
+                  <img src="img/mep/nuno-melo.jpg" alt="" />
+                  <span>Nuno Melo</span>
+                  <span>CDS-PP</span>
+                  <div rel="external" class="button larger w-full self-center text-center">Contactar</div>
+                </a>
+
+                <a class="bg-lavender-800 hover:bg-lavender-600 flex flex-col gap-4 px-4 py-4" href="https://www.europarl.europa.eu/meps/en/88715/JOSE_GUSMAO/home">
+                  <img src="img/mep/jose-gusmao.jpg" alt="" />
+                  <span>José Gusmão</span>
+                  <span>BE</span>
+                  <div rel="external" class="button larger w-full self-center text-center">Contactar</div>
+                </a>
+              </div>
+
+              <div class="responsive-width flex justify-center mt-8">
+                  <a rel="external" href="https://civicrm.edri.org/stop-scanning-me"
+                      class="button special larger w-full l:w-1/2 self-center text-center">Assina a petição europeia
+                  </a>
+              </div>
+
+              <div class="responsive-width bg-white text-lavender-800 shadow pt-16 px-4 pb-12 l:pt-12 l:px-32 l:pb-12 mt-8 l:mt-24">
+                  <h2 class='text-center'>Calendário do processo legislativo</h2>
+
+                  <ul class='flex flex-col justify-center w-full l:w-1/2 mx-auto mt-4 pl-8'>
+                    <li><strong>setembro</strong>: Voto na Comissão LIBE</li>
+                    <li><strong>28 de setembro</strong>: Deliberação de orientação geral do Conselho da União Europeia</li>
+                    <li><strong>outubro</strong>: Voto no Plenário</li>
+                    <li><strong>dezembro</strong>: Trílogos</li>
+                  </ul>
+              </div>
           </div>
       </section>
-      -->
 
       <!--
       <section id="supporters" class="bg-white text-lavender-800 py-12 l:py-16 flex justify-center">

style.css

@@ -29,3 +29,10 @@
 
 .mask-social-gitea{display:block;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}
 .mask-social-gitea{mask-image:url(../img/social/gitea.svg);-webkit-mask-image:url(../img/social/gitea.svg)}
+
+.hover\:bg-lavender-600:hover{background-color:rgb(59,37,147);}
+
+#o-que-fazer .h3 a {border-bottom: 4px solid rgb(31 189 104);}
+#o-que-fazer .h3 a:hover {background-color:rgb(31 189 104)}
+
+#o-que-fazer ul { list-style-type: disc; }