80 lines
3.3 KiB
Plaintext
80 lines
3.3 KiB
Plaintext
<!--
|
||
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 d’en 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 d’Empordà</strong>, and two from <strong>Barcelona</strong>.") | raw}}</p>
|
||
<p><a href="/{{currentLocale}}/surroundings">{{( gettext "Discover" )}} <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 }}
|