67 lines
2.0 KiB
Plaintext
67 lines
2.0 KiB
Plaintext
---import { Button } from "../components/partials/Button";
|
|
|
|
export type Product = { title: string; icon: string; text: string };
|
|
|
|
|
|
const products: Product[] = [
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
},
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
},
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
},
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
},
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
},
|
|
{
|
|
icon: "/img/layers.svg",
|
|
title: "ColrJS",
|
|
text: "Farbpaletten aus Bildern extrahieren."
|
|
}
|
|
];
|
|
---
|
|
|
|
<section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
|
|
<div class="w-5/6 flex flex-col p-4 gap-4">
|
|
<p class="text-xl text-center">Willkommen an der Bar! 🍸</p>
|
|
<p class="text-sm text-center">Was darfs denn heute sein?</p>
|
|
<div class="gap-3 grid grid-cols-1 grid-rows-2 rounded-xl b flex-1 mt-3 sm:grid-cols-3">
|
|
{
|
|
products.slice(0, 4).map((product, i) => {
|
|
return (
|
|
<div
|
|
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
|
|
i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
|
|
}`}
|
|
>
|
|
<img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
|
|
<div class="flex-1">
|
|
<p class="text-lg sm:text-center">{product.title}</p>
|
|
<p class="sm:text-center">{product.text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
<div class="w-52 mx-auto">
|
|
<Button link="/projects" text="Mehr" />
|
|
</div>
|
|
</div>
|
|
</section> |