Add highlight animation for contact section

Author: thibaudgg

source/_index.erb

@@ -91,12 +91,14 @@
   <% end %>
 </div>
 
-<h2 id="contact" class="mt-20 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold scroll-mt-24">
-  <%= t("contact.title") %>
-</h2>
-<p class="mt-4 mx-auto md:w-7/12 text-pretty text-justify leading-normal text-lg">
-  <%= I18n.t("contact.text", mail: link_to(data.site.contact.email, data.site.contact.email_link, class: 'whitespace-nowrap')) %>
-</p>
+<div id="contact" class="mt-20 pt-8 pb-10 highlight-on-target scroll-mt-24 rounded-md">
+  <h2 class="mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold ">
+    <%= t("contact.title") %>
+  </h2>
+  <p class="mt-4 mx-auto md:w-7/12 text-pretty text-justify leading-normal text-lg">
+    <%= I18n.t("contact.text", mail: link_to(data.site.contact.email, data.site.contact.email_link, class: 'whitespace-nowrap')) %>
+  </p>
+</div>
 
 <span class="mt-16 mx-auto block w-52 h-1 rounded-full bg-gradient-to-r from-logo-green to-green-600"></span>