first commit

resources/js/components/my/Features.svelte

@@ -0,0 +1,123 @@
+<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>