104 lines
2.5 KiB
Svelte
104 lines
2.5 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_buy: string;
|
|
export let href_overview: string;
|
|
export let src: string;
|
|
export let alt: string;
|
|
export let empfehlung: string;
|
|
export let cta: string;
|
|
</script>
|
|
|
|
|
|
{#if empfehlung=="ja"}
|
|
<div class="empfehlung">Empfehlung</div>
|
|
{/if}
|
|
<h2 class="titel sm:mb-2">{name}</h2>
|
|
|
|
|
|
<div class="sumCent">
|
|
<div class="variante">{variant}</div>
|
|
<img
|
|
class="image"
|
|
{src}
|
|
{alt}
|
|
/>
|
|
<div class="justify-self-start">
|
|
<p class="price">
|
|
ab {price} €
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="sumCent buttoncols">
|
|
<a
|
|
href="{href_buy}"
|
|
class="buttoncol">{cta}</a
|
|
>
|
|
|
|
<a
|
|
href="{href_overview}"
|
|
class="buttoncol">Produkt-Übersicht</a
|
|
>
|
|
|
|
</div>
|
|
|
|
<div class="sumRows forServices">
|
|
|
|
{#each services as [service, check]}
|
|
<div class="services">
|
|
<span>{@html service}</span>
|
|
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
|
|
</div>
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
|
|
<style lang="postcss">
|
|
|
|
|
|
|
|
.sumCent{@apply justify-self-center col-span-2}
|
|
.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
|
|
.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
|
|
|
|
.image{@apply w-[75%] justify-self-center
|
|
md:w-[75%] md:pl-12}
|
|
|
|
.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
|
|
md:grid-cols-2 md:w-[auto]}
|
|
|
|
.buttoncol{@apply mt-2 md:mt-0 text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
|
|
hover:bg-primary hover:text-white}
|
|
|
|
|
|
.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
|
|
font-family: "Antique Olive Compact bold";}
|
|
|
|
|
|
|
|
.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
|
|
.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
|
|
.variante {
|
|
@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-primary rounded-md pl-[4px] pr-[6px] py-[0px];
|
|
}
|
|
|
|
.services {
|
|
@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center md:grid-cols-[1fr_50px]
|
|
}
|
|
.services:not(:last-child) {
|
|
@apply border-b-[1px] border-gray-200;
|
|
}
|
|
.check {
|
|
@apply justify-self-end self-center font-bold text-green-700;
|
|
}
|
|
.check-no {
|
|
@apply justify-self-end self-center font-bold text-red-700;
|
|
}
|
|
|
|
</style>
|