feat: base travel info on product and provide date via url

This commit is contained in:
Björn Fromme
2024-11-12 15:15:53 +01:00
parent 71b23c5945
commit f46b9c31c4
9 changed files with 156 additions and 33 deletions
@@ -12,8 +12,8 @@
alt="Reiseinformationen"
class="block w-full h-full object-cover object-center" />
</div>
<div class="absolute top-16 left-1/2 -translate-x-1/2 w-full max-w-screen-sm lg:left-0 lg:-translate-x-0 lg:max-w-none px-8 lg:px-24 h-64 lg:h-128 flex flex-col justify-between">
<div class="hidden lg:block text-3xl lg:text-6xl text-white uppercase font-bold">
<div class="absolute top-8 lg:top-16 left-1/2 -translate-x-1/2 w-full max-w-screen-sm lg:left-0 lg:-translate-x-0 lg:max-w-none px-8 lg:px-24 h-64 lg:h-128 flex flex-col justify-between">
<div class="text-2xl pb-4 lg:pb-0 md:text-3xl lg:text-6xl text-ep-secondary uppercase font-bold">
Reiseinformation
</div>
<div class="grid grid-cols-2 lg:grid-cols-4">
@@ -26,18 +26,18 @@
data-controller="scroll-to"
data-scroll-to-target-value="goodtoknow"
data-action="scroll-to#scroll"
class="flex flex-col space-y-4 items-center justify-center px-8 py-8 lg:py-16 text-white {bgColors.{linksCount}}">
<div class="w-12 h-12 lg:w-24 lg:h-24">
class="flex flex-col space-y-4 items-center justify-center px-4 py-4 lg:py-16 text-white {bgColors.{linksCount}}">
<div class="w-10 h-10 lg:w-24 lg:h-24">
<f:render section="Icon" arguments="{icon: 'chat'}" />
</div>
<div class="uppercase text-lg lg:text-xl text-center leading-tight">
<div class="uppercase lg:text-xl text-center leading-tight">
Wissens&shy;wertes
</div>
</a>
</div>
</div>
</div>
<div class="pb-32 pt-52 -mt-24 bg-ep-primary-bg">
<div class="pb-32 pt-32 lg:pt-52 -mt-24 bg-ep-primary-bg">
<div class="container px-8 lg:px-24" data-rte-content>
<h1 class="headline--underlined headline--has-subline">
<span class="subline">{travelinfo.subline}</span>
@@ -60,14 +60,18 @@
</div>
</div>
<div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
<h3 class="text-white">
Adresse
</h3>
<p>
{date.hotel.name}
<br>
{date.hotel.address -> f:format.nl2br()}
</p>
<f:if condition="{travelinfo.hideAddress}">
<f:else>
<h3 class="text-white">
Adresse
</h3>
<p>
{date.hotel.name}
<br>
{date.hotel.address -> f:format.nl2br()}
</p>
</f:else>
</f:if>
<f:if condition="{date.pickups -> f:count()} > 0">
<h3 class="text-white">
Bus-Zustiege
@@ -87,7 +91,7 @@
<f:for each="{date.pickups}" as="pickup">
<tr class="odd:bg-zinc-50 align-top">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{pickup.city}<br><span class="text-xs">{pickup.street} {f:if(condition: pickup.price, then: ', Aufpreis {pickup.price -> f:format.currency(currencySign: \'€\')}')}</span>
{pickup.city}<br><span class="text-xs">{pickup.street}</span>
</td>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{pickup.date}
@@ -205,11 +209,11 @@
</f:section>
<f:section name="Link">
<f:link.typolink parameter="{item.link}" class="flex flex-col space-y-4 items-center justify-center px-8 py-8 lg:py-16 text-white {color}">
<div class="w-12 h-12 lg:w-24 lg:h-24">
<f:link.typolink parameter="{item.link}" class="flex flex-col space-y-4 items-center justify-center px-4 py-4 lg:py-16 text-white {color}">
<div class="w-10 h-10 lg:w-24 lg:h-24">
<f:render section="Icon" arguments="{icon: item.icon}" />
</div>
<div class="uppercase text-lg lg:text-xl text-center leading-tight">
<div class="uppercase lg:text-xl text-center leading-tight">
{item.title -> f:format.raw()}
</div>
</f:link.typolink>