feat: move mail link in contact section

src/lib/nav.html

@@ -14,6 +14,7 @@
       <a href="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
       <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
       <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
+      <a href="#contact" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--links">
       {% with class_prefix="nav-bar" %}

src/lib/social_links.html

@@ -4,7 +4,6 @@
   </a>
 {% endmacro %}
 
-{{ social_link(gettext('Mail'), 'mail-fill.svg', 'mailto:contact@frog-collective.com') }}
 {{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
 {{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@FrogCoGames') }}
 {{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}

src/pages/index.html

@@ -23,6 +23,7 @@
             {% include "pages/index/presentation.html" %}
             {% include "pages/index/games.html" %}
             {% include "pages/index/news.html" %}
+            {% include "pages/index/contact.html" %}
         </div>
         {% include "pages/index/footer.html" %}
     </body>

src/pages/index/_style.scss

@@ -2,3 +2,4 @@
 @import 'games.scss';
 @import 'news.scss';
 @import 'presentation.scss';
+@import 'contact.scss';

src/pages/index/contact.html

@@ -0,0 +1,22 @@
+{% from "lib/section.html" import section %}
+
+{% call section(
+  gettext("Contact"),
+  "contact",
+  "/img/section-collective.png",
+  title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_active = "/img/section-collective-active.png",
+  title_picture_offset = "50px"
+  ) %}
+<div class="contact--content">
+  <p>
+    {% trans %}
+      If you want to contact us about our games, for business inquiries, press or anything else please click on the button below. 
+    {% endtrans %}
+  </p>
+  <a class="contact--button" href="mailto:contact@frog-collective.com">
+    <img class="contact--button-icon" src="/img/mail-fill.svg"></img>
+    Contact Us
+  </a>
+</div>
+{% endcall %}

src/pages/index/contact.scss

@@ -0,0 +1,21 @@
+.contact {
+
+    &--content {
+        @extend %card;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &--button {
+        @extend %button;
+        align-self: center;
+        align-items: center;
+        display: flex;
+    }
+
+    &--button-icon {
+        width: 2.2em;
+        filter: invert(100%);
+        padding-right: var(--space-small);
+    }
+}