108 lines
2.3 KiB
Svelte
108 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
export let price: number;
|
|
export let name: string;
|
|
export let variant: string;
|
|
export let services: [string, boolean][];
|
|
export let href: string;
|
|
export let src: string;
|
|
export let alt: string;
|
|
export let empfehlung: string;
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="relative">
|
|
<h2 class="titel">{name}</h2>
|
|
{#if empfehlung=="ja"}
|
|
<div class="empfehlung bg-red-700 text-[0.75rem] text-white absolute right-12 top-1 px-2 py-1 rounded-full rotate-[5deg]">Empfelung</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<hr class="mb-2" />
|
|
|
|
<div class="titelPic grid grid-cols-[25%_1fr_25%] items-center mb-0 mt-0 w-full">
|
|
|
|
<div class="">
|
|
<img
|
|
class="w-[100%] justify-self-start"
|
|
{src}
|
|
{alt}
|
|
/>
|
|
</div>
|
|
|
|
<div class="justify-self-start">
|
|
<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
|
|
<span class="[font-family:Antique_Olive_Compact_bold]">
|
|
ab {price} €
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="variante justify-self-end">{variant}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="white grid grid-rows-subgrid row-span-6 relative">
|
|
{#each services as [service, check]}
|
|
<div class="services grid grid-cols-[content-fit_1fr] items-center">
|
|
<span>{@html service}</span>
|
|
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full grid grid-cols-2 gap-2">
|
|
<a
|
|
{href}
|
|
class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
|
|
hover:bg-primary
|
|
">jetzt online erstellen</a
|
|
>
|
|
|
|
<a
|
|
{href}
|
|
class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline
|
|
hover:bg-secondary/15
|
|
">zur Produktübersicht</a
|
|
>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
.titel {@apply [font-size:_clamp(14px,1.5vw,18px)]
|
|
pr-12 text-left
|
|
}
|
|
.variante {
|
|
@apply -mt-2 text-xl w-fit text-black justify-self-end;
|
|
}
|
|
|
|
.services {
|
|
@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
|
|
}
|
|
.services:not(:last-child) {
|
|
@apply border-b-[1px] border-gray-200;
|
|
}
|
|
.check {
|
|
@apply justify-self-end font-bold text-green-700;
|
|
}
|
|
.check-no {
|
|
@apply justify-self-end font-bold text-red-700;
|
|
}
|
|
</style>
|