149 lines
3.7 KiB
Svelte
149 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
export let price: number;
|
|
|
|
export let price1: number;
|
|
export let price2: number;
|
|
|
|
export let name: string;
|
|
export let variant: string;
|
|
export let services: [string, boolean][];
|
|
export let href_buy1: string;
|
|
export let href_buy2: string;
|
|
export let href_buy3: string = "";
|
|
|
|
export let src: string;
|
|
export let alt: string;
|
|
export let empfehlung: string;
|
|
export let cta: string;
|
|
</script>
|
|
|
|
<div class="produktbox" transition:fade={{ duration: 0 }}>
|
|
{#if empfehlung === "ja"}
|
|
<div class="empfehlung" aria-label="Empfohlenes Produkt">
|
|
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="">
|
|
<p class="price">
|
|
ab {price} €
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr class="col-span-2 w-full md:w-[50%] md:m-auto bg-[#ffcc00] h-[2px]" />
|
|
|
|
<div class="sumRows forServices">
|
|
{#each services as [service, check]}
|
|
<div class="services">
|
|
<span>{@html service}</span>
|
|
<span class={check ? "check" : "check-no"}
|
|
>{check ? "✔" : "✘"}</span
|
|
>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<hr class="col-span-2 w-full md:w-[50%] md:m-auto bg-[#ffcc00] h-[2px]" />
|
|
|
|
<div class="sumCent buttoncols"
|
|
class:md:grid-cols-3={href_buy3}
|
|
class:md:grid-cols-2={!href_buy3}>
|
|
<a
|
|
href={href_buy1}
|
|
class="buttoncol"
|
|
aria-label="Jetzt {name} kaufen"
|
|
target="_blank"
|
|
>mach selbst (<span class="inside-price">{price}</span> €)
|
|
</a>
|
|
|
|
<a
|
|
href={href_buy2}
|
|
class="buttoncol"
|
|
aria-label="{name} Produkt-Übersicht"
|
|
target="_blank"
|
|
>wir helfen (<span class="inside-price">{price1}</span> €)
|
|
</a>
|
|
|
|
{#if href_buy3}
|
|
<a
|
|
href={href_buy3}
|
|
class="buttoncol"
|
|
aria-label="{name} Produkt-Übersicht"
|
|
target="_blank"
|
|
>wir machen (<span class="inside-price">{price2}</span> €)
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.produktbox {
|
|
@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
|
|
px-2 py-2 mt-5;
|
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
|
|
|
|
.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%] mx-auto
|
|
md:w-[75%] md:pl-0;
|
|
}
|
|
|
|
.buttoncols {
|
|
@apply grid grid-cols-1 gap-x-4 w-full my-4
|
|
md:grid-cols-3 md:w-[auto];
|
|
}
|
|
|
|
.buttoncol {
|
|
@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
|
|
hover:bg-[#222222] hover:text-white;
|
|
}
|
|
.inside-price {
|
|
@apply font-bold;
|
|
}
|
|
|
|
.price {
|
|
@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-7 text-nowrap text-left;
|
|
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 w-fit italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-[#ffcc00] 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>
|