camper/web/templates/public/home.gohtml

80 lines
3.4 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
{{( pgettext "Home" "title" )}}
{{- end }}
{{ define "head" -}}
{{ template "carouselStyle" }}
{{ template "alpineScript" }}
{{- end }}
{{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/home.homePage*/ -}}
<div class="hero">
<div role="marquee">
{{ range $index, $slide := .Cover -}}
<div style="--background-image:url('{{ .Media }}')">
<span>{{ .Caption }}</span>
</div>
{{- end }}
</div>
<a href="/{{ currentLocale }}/booking">{{( pgettext "Booking" "link" )}} <span>→</span></a>
</div>
<section class="nature">
<h2 class="sr-only">{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
{{ with .CampsiteTypes -}}
<div>
{{ range . -}}
<section style="--background-image:url('{{ .Media }}')">
<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>
<p class="enjoy">{{ .Slogan }}</p>
<section class="surroundings">
<h2 class="sr-only">{{( pgettext "Surroundings" "title" )}}</h2>
<div class="carousel">
<div class="spiel">
<p>{{(gettext "Located in <strong>Alta Garrotxa</strong>, between the <strong>Pyrenees</strong> and the <strong>Costa Brava</strong>.") | raw}}</p>
<p>{{(gettext "Nearby there are the <strong>gorges of Sadernes</strong>, <strong>volcanoes</strong>, <strong>La Fageda den Jordà</strong>, the Jewish quarter of <strong>Besalú</strong>, the basaltic cliff of <strong>Castellfollit de la Roca</strong>… much to see and much to do.") | raw}}</p>
<p>{{(gettext "Less than an hour from <strong>Girona</strong>, one from <strong>La Bisbal dEmpordà</strong>, and two from <strong>Barcelona</strong>.") | raw}}</p>
<p><a href="/{{currentLocale}}/surroundings">{{( gettext "Discover the surroundings" )}} <span>→</span></a></p>
</div>
{{ range .Carousel -}}
{{ if .Caption -}}
<figure>
<img src="{{ .Media }}" alt=""/>
<figcaption>{{ .Caption }}</figcaption>
</figure>
{{- else -}}
<img src="{{ .Media }}" alt=""/>
{{- end }}
{{- end }}
</div>
</section>
{{ template "carouselInit" 4 }}
<script>
jQuery(function () {
jQuery('.hero div[role="marquee"]').slick({
slidesToShow: 1,
infinite: true,
arrows: true,
prevArrow: '<button type="button" class="slick-prev">←</button>',
nextArrow: '<button type="button" class="slick-next">→</button>',
autoplay: true,
autoplaySpeed: 4000,
});
});
</script>
{{- end }}