<!-- 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 }}