Add the first test for the front end design

As previously stated, web made the design with an external tool and
had to “convert” it to proper CSS and HTML markup.

Unfortunately, the original design uses slick, that requires jQuery;
i can’t do anything about it now.

Disabled most of the menu and language switcher because it is not in the
design yet.

po/ca.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-08-16 20:03+0200\n"
+"POT-Creation-Date: 2023-09-05 04:34+0200\n"
 "PO-Revision-Date: 2023-07-22 23:45+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -18,20 +18,50 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: web/templates/public/home.gohtml:6
+#: web/templates/public/home.gohtml:6 web/templates/public/layout.gohtml:39
 msgctxt "title"
 msgid "Home"
 msgstr "Inici"
 
-#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:21
+#: web/templates/public/home.gohtml:16
+msgid "The pleasure of camping in the middle of nature…"
+msgstr "El plaer d’acampar en plena natura…"
+
+#: web/templates/public/home.gohtml:17
+msgctxt "link"
+msgid "Booking"
+msgstr "Reserva"
+
+#: web/templates/public/home.gohtml:30
+msgid "Our services"
+msgstr "Els nostres serveis"
+
+#: web/templates/public/home.gohtml:33
+msgid "Environment"
+msgstr "Entorn"
+
+#: web/templates/public/home.gohtml:48 web/templates/public/home.gohtml:52
+#: web/templates/public/home.gohtml:56 web/templates/public/home.gohtml:60
+#: web/templates/public/home.gohtml:64 web/templates/public/home.gohtml:68
+#: web/templates/public/home.gohtml:72 web/templates/public/home.gohtml:76
+#: web/templates/public/home.gohtml:80
+msgid "Legend"
+msgstr "Llegenda"
+
+#: web/templates/public/home.gohtml:84
+msgid "Come and enjoy!"
+msgstr "Vine a gaudir!"
+
+#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
+#: web/templates/public/layout.gohtml:60
 msgid "Campsite Montagut"
 msgstr "Càmping Montagut"
 
-#: web/templates/public/layout.gohtml:20 web/templates/admin/layout.gohtml:18
+#: web/templates/public/layout.gohtml:21 web/templates/admin/layout.gohtml:18
 msgid "Skip to main content"
 msgstr "Salta al contingut principal"
 
-#: web/templates/public/layout.gohtml:38
+#: web/templates/public/layout.gohtml:44
 msgid "Singular Lodges"
 msgstr "Allotjaments singulars"
 

po/es.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-08-16 20:03+0200\n"
+"POT-Creation-Date: 2023-09-05 04:34+0200\n"
 "PO-Revision-Date: 2023-07-22 23:46+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -18,20 +18,50 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: web/templates/public/home.gohtml:6
+#: web/templates/public/home.gohtml:6 web/templates/public/layout.gohtml:39
 msgctxt "title"
 msgid "Home"
 msgstr "Inicio"
 
-#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:21
+#: web/templates/public/home.gohtml:16
+msgid "The pleasure of camping in the middle of nature…"
+msgstr "El placer de acampar en plena naturaleza…"
+
+#: web/templates/public/home.gohtml:17
+msgctxt "link"
+msgid "Booking"
+msgstr "Reservar"
+
+#: web/templates/public/home.gohtml:30
+msgid "Our services"
+msgstr "Nuestros servicios"
+
+#: web/templates/public/home.gohtml:33
+msgid "Environment"
+msgstr "Entorno"
+
+#: web/templates/public/home.gohtml:48 web/templates/public/home.gohtml:52
+#: web/templates/public/home.gohtml:56 web/templates/public/home.gohtml:60
+#: web/templates/public/home.gohtml:64 web/templates/public/home.gohtml:68
+#: web/templates/public/home.gohtml:72 web/templates/public/home.gohtml:76
+#: web/templates/public/home.gohtml:80
+msgid "Legend"
+msgstr "Leyenda"
+
+#: web/templates/public/home.gohtml:84
+msgid "Come and enjoy!"
+msgstr "¡Ven a disfrutar!"
+
+#: web/templates/public/layout.gohtml:11 web/templates/public/layout.gohtml:23
+#: web/templates/public/layout.gohtml:60
 msgid "Campsite Montagut"
 msgstr "Camping Montagut"
 
-#: web/templates/public/layout.gohtml:20 web/templates/admin/layout.gohtml:18
+#: web/templates/public/layout.gohtml:21 web/templates/admin/layout.gohtml:18
 msgid "Skip to main content"
 msgstr "Saltar al contenido principal"
 
-#: web/templates/public/layout.gohtml:38
+#: web/templates/public/layout.gohtml:44
 msgid "Singular Lodges"
 msgstr "Alojamientos singulares"
 

web/static/public.css

@@ -2,29 +2,120 @@
  * SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Bold'), local('MabryPro-Bold'), url('fonts/MabryPro-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Medium'), local('MabryPro-Medium'), url('fonts/MabryPro-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Black'), local('MabryPro-Black'), url('fonts/MabryPro-Black.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Light Italic'), local('MabryPro-LightItalic'), url('fonts/MabryPro-LightItalic.woff2') format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Bold Italic'), local('MabryPro-BoldItalic'), url('fonts/MabryPro-BoldItalic.woff2') format('woff2');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Light'), local('MabryPro-Light'), url('fonts/MabryPro-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Black Italic'), local('MabryPro-BlackItalic'), url('fonts/MabryPro-BlackItalic.woff2') format('woff2');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Medium Italic'), local('MabryPro-MediumItalic'), url('fonts/MabryPro-MediumItalic.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro Italic'), local('MabryPro-Italic'), url('fonts/MabryPro-Italic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mabry Pro';
+    src: local('Mabry Pro'), local('MabryPro-Regular'), url('fonts/MabryPro-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
 
 *, *::before, *::after {
-    box-sizing: border-box;
+    box-sizing: inherit;
 }
 
 * {
     margin: 0;
 }
 
-html, body {
-    height: 100%;
-}
-
 html {
+    box-sizing: border-box;
     font-size: 62.5%;
+    --contrast: #303334;
+    --contrast-2: #5f6158;
+    --contrast-3: #b2b2be;
+    --base: #f0f0f0;
+    --base-2: #f7f8f9;
+    --base-3: #ffffff;
+    --accent: #00aa7d;
+    --accent-2: #FFE37F;
+    --accent-3: #9adff4;
+    --clar-rgb: 239, 237, 236;
+    --clar: rgb(var(--clar-rgb));
 }
 
 body {
+    font-family: 'Mabry Pro', sans-serif;
     font-size: 1.6rem;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
-    background-color: white;
+    background-color: var(--clar);
-    color: #3f3b37;
+    color: var(--contrast);
+    max-width: 200rem;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 img, picture, video, canvas, svg {
@@ -39,3 +130,282 @@ input, button, textarea, select {
 p, h1, h2, h3, h4, h5, h6 {
     overflow-wrap: break-word;
 }
+
+a {
+    color: var(--contrast);
+    text-decoration: none;
+}
+
+body > a[href="#content"], .sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
+body > a[href="#content"]:focus {
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
+    clip: auto !important;
+    clip-path: none;
+    color: #21759b;
+    display: block;
+    font-size: 1.4rem;
+    font-weight: 700;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000;
+}
+
+body > header {
+    position: sticky;
+    top: 0;
+    background-color: rgba(var(--clar-rgb), 0.7);
+    z-index: 999;
+    padding: 1rem 2.5rem;
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+h1 a span {
+    display: inline-block;
+}
+
+h1 a .logo {
+    width: 5rem;
+    height: 4.33rem;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98.72705 85.5'%3E%3Cpath d='m49.36377,0L0,85.5h98.72705L49.36377,0Zm18.61945,46.25l18.61945,32.25h-37.23914l18.61969-32.25Z' fill='%23303234'/%3E%3C/svg%3E") top left no-repeat;
+    background-size: 100%;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 1.7rem;
+}
+
+h1 a .name {
+    font-size: 2.5rem;
+    line-height: 1em;
+    text-indent: -.4em;
+    word-wrap: break-word;
+    font-weight: 700;
+    width: 50%;
+}
+
+nav ul {
+    list-style: none;
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+nav a {
+    font-size: 1.8rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 0 2rem;
+    line-height: 6rem;
+}
+
+#content {
+    padding: 2.5rem;
+}
+
+.nature div, .nature section a {
+    background: var(--background-image) center center no-repeat;
+    background-size: cover;
+}
+
+.nature div, .services {
+    margin-bottom: 5rem;
+}
+
+.nature div:first-child, .nature section, .services {
+    border-radius: 5px;
+}
+
+.nature div:first-child, .services {
+    min-height: 6rem;
+    display: flex;
+    align-items: flex-end;
+    column-gap: 5rem;
+    padding: 5rem;
+}
+
+.nature div:first-child {
+    justify-content: space-between;
+}
+
+.nature h2, .nature div:first-child a, .services a, .environment .spiel a {
+    font-weight: bold;
+    line-height: .9em;
+}
+
+.nature h2, .nature div:first-child a {
+    border-radius: 5px;
+    background-color: var(--clar);
+}
+
+.nature h2 {
+    width: 50%;
+    min-height: 100%;
+    margin-bottom: 0;
+    font-size: calc(2rem + 4vw);
+    display: block;
+    padding: 3rem;
+}
+
+.nature div:first-child a, .services a, .environment .spiel a {
+    font-size: calc(1.8rem + 1.7vw);
+}
+
+.nature div:first-child a, .services a {
+    padding: 1.5rem 2rem;
+}
+
+.nature div:first-child a span, .services a span, .environment .spiel a:hover span {
+    display: inline-block;
+    transition: transform 0.5s ease;
+}
+
+.nature div:first-child a:hover span, .services a:hover span, .spiel a:hover span {
+    transform: translateX(1.3rem);
+}
+
+.nature div + div {
+    display: flex;
+    column-gap: 5rem;
+}
+
+.nature section {
+    flex: 1;
+    max-width: 25%;
+}
+
+.nature section h3 {
+    font-size: 2.4rem;
+}
+
+.nature section a {
+    display: block;
+    width: 100%;
+    height: 20rem;
+}
+
+.nature section a span {
+    z-index: 2;
+    padding: 1rem 1.5rem;
+    background-color: var(--clar);
+    border-bottom-right-radius: 5px;
+}
+
+.services {
+    justify-content: end;
+    background-color: var(--accent);
+}
+
+.environment .spiel {
+    font-size: 2.4rem;
+    padding-right: 4rem;
+}
+
+.environment .spiel p {
+    margin-bottom: 2rem;
+}
+
+.environment figure {
+    margin-right: 5rem;
+    position: relative;
+}
+
+.environment figure img {
+    height: 40rem;
+    width: 100%;
+    border-radius: 5px;
+    object-fit: cover;
+}
+
+.environment figcaption {
+    padding: 10px 15px;
+    background: var(--clar);
+    width: fit-content;
+    float: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-top-left-radius: 5px;
+    font-size: 1.7rem;
+}
+
+.environment .slick-list {
+    order: 1;
+    padding: 0 20% 0 0 !important;
+}
+
+.environment .slick-track {
+    display: flex;
+    align-items: start;
+}
+
+.environment .slick-slider {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+}
+
+.environment .slick-arrow {
+    font-size: 6rem;
+    width: 5rem;
+    height: 5rem;
+    border: none !important;
+    background: none;
+    cursor: pointer;
+    transition: transform 0.5s ease;
+    margin-right: 4rem;
+}
+
+.environment .slick-prev.slick-arrow, .environment .slick-next.slick-arrow {
+    opacity: 1;
+}
+
+.environment .slick-prev {
+    order: 2;
+}
+
+.environment .slick-prev:hover {
+    transform: translateX(-1.3rem);
+}
+
+.environment .slick-next {
+    order: 3;
+}
+
+.environment .slick-next:hover {
+    transform: translateX(1.3rem);
+}
+
+.enjoy {
+    font-weight: 900;
+    font-size: calc(1.8rem + 8vw);
+    line-height: 1.2em;
+}
+
+footer {
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 2.5rem;
+}

web/static/slick@1.8.1.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

web/templates/public/home.gohtml

@@ -6,5 +6,103 @@
     {{( pgettext "Home" "title" )}}
 {{- end }}
 
-{{ define "content" -}}
+{{ define "head" -}}
+    <link rel="stylesheet" media="screen" href="/static/slick@1.8.1.css">
+{{- end }}
+
+{{ define "content" -}}
+    <section class="nature">
+        <div style="--background-image:url('/static/images/todd-trapani-5LHzBpiTuzQ-unsplash.jpg')">
+            <h2>{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
+            <a href="/{{ currentLocale }}/reservation">{{( pgettext "Booking" "link" )}} <span>→</span></a>
+        </div>
+        {{ with .Menu.CampsiteTypes -}}
+            <div>
+                {{ range . -}}
+                    <section style="--background-image:url('/static/images/camping_montagut_acampada_tenda.jpg')">
+                        <h3><a href="{{ .HRef }}"><span>{{ .Label }}</span></a></h3>
+                    </section>
+                {{- end }}
+            </div>
+        {{- end }}
+    </section>
+    <section class="services">
+        <h2><a href="/{{ currentLocale }}/services">{{( gettext "Our services")}} <span>→</span></a></h2>
+    </section>
+    <section class="environment">
+        <h2 class="sr-only">{{ (gettext "Environment")}}</h2>
+        <div>
+            <div class="spiel">
+                <p>Situats a l’<strong>Alta Garrotxa</strong>, entre els <strong>Pirineus</strong> i la <strong>Costa
+                        Brava</strong>.</p>
+                <p>A prop teniu els <strong>gorgs de Sadernes</strong>, <strong>volcans</strong>, <strong>La Fageda d’en
+                        Jordà</strong>, el call jueu de <strong>Besalú</strong>, la cinglera basàltica de <strong>Castellfollit
+                        de la Roca</strong>… molt per veure i molt per fer.</p>
+                <p>A menys d’una hora de <strong>Girona</strong>, a una de <strong>La Bisbal d’Empordà</strong> i a dues
+                    de
+                    <strong>Barcelona</strong>.</p>
+                <p><a href="/{{currentLocale}}/environment/">Descobreix l’entorn <span>→</span></a></p>
+            </div>
+            <figure>
+                <img src="/static/images/Volca_de_Santa_Margarida.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/Gorga_fosca_Sadernes.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/castellfolit_de_la_roca.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/besalu.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/santa_pau.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/banyoles.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/girn-a.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/costa_brava.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+            <figure>
+                <img src="/static/images/barcelona-1.jpg" alt=""/>
+                <figcaption>{{( gettext "Legend" )}}</figcaption>
+            </figure>
+        </div>
+    </section>
+    <p class="enjoy">{{( gettext "Come and enjoy!")}}</p>
+
+    <script src="/static/jquery@3.7.1.min.js"></script>
+    <script src="/static/slick@1.8.1.min.js"></script>
+    <script>
+        jQuery(function () {
+            jQuery('.environment > div').slick({
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                infinite: false,
+                arrows: true,
+                prevArrow: '<button type="button" class="slick-prev">←</button>',
+                nextArrow: '<button type="button" class="slick-next">→</button>',
+                responsive: [
+                    {
+                        breakpoint: 768,
+                        settings: {
+                            slidesToShow: 1,
+                        }
+                    },
+                ]
+            });
+        });
+    </script>
 {{- end }}

web/templates/public/layout.gohtml

@@ -9,6 +9,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ template "title" . }} — {{( gettext "Campsite Montagut" )}}</title>
+    <link rel="preload" href="/static/fonts/MabryPro-Regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/static/fonts/MabryPro-Bold.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" media="screen" href="/static/public.css">
     {{ range .LocalizedAlternates -}}
         <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .HRef }}"/>
@@ -16,9 +18,10 @@
     {{- block "head" . }}{{ end }}
 </head>
 <body>
+<a href="#content">{{( gettext "Skip to main content" )}}</a>
 <header>
-    <a href="#content">{{( gettext "Skip to main content" )}}</a>
+    <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
-    <h1>{{( gettext "Campsite Montagut" )}}</h1>
+    {{/*
     {{ if .LocalizedAlternates -}}
         <nav>
             <ul>
@@ -29,9 +32,12 @@
             </ul>
         </nav>
     {{- end }}
+    */}}
     {{ with .Menu -}}
         <nav>
             <ul>
+                <li><a href="/{{ currentLocale }}/">{{( pgettext "Home" "title" )}}</a></li>
+                {{/*
                 {{ if .CampsiteTypes -}}
                     <li>
                         <button type="button" aria-expanded="false" aria-controls="campsite-types-menu"
@@ -43,6 +49,7 @@
                         </ul>
                     </li>
                 {{- end }}
+                */}}
             </ul>
         </nav>
     {{- end }}
@@ -50,5 +57,6 @@
 <main id="content">
     {{- template "content" . }}
 </main>
+<footer>© {{( gettext "Campsite Montagut" )}} | 1984–2023</footer>
 </body>
 </html>