124 lines
4.1 KiB
Svelte
124 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import {
|
|
Paintbrush,
|
|
MessageCircle,
|
|
TabletSmartphone,
|
|
BadgeCheck,
|
|
Goal,
|
|
PictureInPicture,
|
|
MousePointerClick,
|
|
Newspaper,
|
|
} from 'lucide-svelte';
|
|
|
|
interface FeaturesProps {
|
|
icon:
|
|
| 'tabletSmartphone'
|
|
| 'badgeCheck'
|
|
| 'goal'
|
|
| 'pictureInPicture'
|
|
| 'paintbrush'
|
|
| 'mousePointerClick'
|
|
| 'messageCircle'
|
|
| 'newspaper';
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const featureList: FeaturesProps[] = [
|
|
{
|
|
icon: 'tabletSmartphone',
|
|
title: 'Handy Freundlich',
|
|
description:
|
|
'Wir sind eine Website die auf Smartphones und Tablets gut lesbar, bedienbar und korrekt dargestellt wird, ohne dass Nutzer zoomen oder seitlich scrollen müssen.',
|
|
},
|
|
{
|
|
icon: 'badgeCheck',
|
|
title: 'Social Proof',
|
|
description:
|
|
'Bei ist die Möglicheit sich am Verhalten anderer zu orientieren unwahrscheinllich, du bist alleine und must lernen deine Entscheidungen selbstständig zu treffen.',
|
|
},
|
|
{
|
|
icon: 'goal',
|
|
title: 'Targeted Content',
|
|
description:
|
|
'Lorem ipsum dolor sit amet consectetur adipisicing elit. odio ea accusamus aperiam.',
|
|
},
|
|
{
|
|
icon: 'pictureInPicture',
|
|
title: 'Strong Visuals',
|
|
description:
|
|
'Lorem elit. A odio velit cum aliquam. Natus consectetur dolores, odio ea accusamus aperiam.',
|
|
},
|
|
{
|
|
icon: 'mousePointerClick',
|
|
title: 'Clear CTA',
|
|
description:
|
|
'Lorem ipsum dolor sit amet consectetur adipisicing. odio ea accusamus consectetur.',
|
|
},
|
|
{
|
|
icon: 'newspaper',
|
|
title: 'Clear Headline',
|
|
description:
|
|
'Lorem ipsum dolor sit amet consectetur adipisicing elit. A odio velit cum aliquam. Natus consectetur.',
|
|
},
|
|
];
|
|
|
|
const iconMap = {
|
|
tabletSmartphone: TabletSmartphone,
|
|
badgeCheck: BadgeCheck,
|
|
goal: Goal,
|
|
pictureInPicture: PictureInPicture,
|
|
paintbrush: Paintbrush,
|
|
mousePointerClick: MousePointerClick,
|
|
messageCircle: MessageCircle,
|
|
newspaper: Newspaper,
|
|
};
|
|
</script>
|
|
|
|
<section id="features" class="container py-24 sm:py-32">
|
|
<h2 class="text-lg text-primary text-center mb-2 tracking-wider">
|
|
Features
|
|
</h2>
|
|
|
|
<h2 class="text-3xl md:text-4xl text-center font-bold mb-4">
|
|
Was macht uns so besonderes
|
|
</h2>
|
|
|
|
<h3 class="md:w-1/2 mx-auto text-xl text-center text-muted-foreground mb-8">
|
|
Der Überlieferung nach ist das Spiel in der heutigen Form in der Zeit
|
|
der napoleonischen Kriege in den Gefangenenlagern um Mantua entstanden.
|
|
Damals verbrachten die miteinander verbündeten Franzosen und Italienern
|
|
ihre Freizeit mit den in den dortigen Feldlagern festgehalenen Tirolern.
|
|
Der Name entstand aus dem französischen Begriff va tout (letzter
|
|
Trumpf).
|
|
</h3>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{#each featureList as { icon, title, description }}
|
|
<Card class="h-full bg-background border-0 shadow-none">
|
|
<CardHeader class="flex justify-center items-center">
|
|
<div
|
|
class="bg-primary/20 p-2 rounded-full ring-8 ring-primary/10 mb-4"
|
|
>
|
|
<svelte:component
|
|
this={iconMap[icon]}
|
|
class="size-6 text-primary"
|
|
/>
|
|
</div>
|
|
<CardTitle>{title}</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent class="text-muted-foreground text-center">
|
|
{description}
|
|
</CardContent>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
</section>
|