zwischenstand

frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { mdiBookAccountOutline, mdiCreation, mdiFaceAgent, mdiHours24 } from "@mdi/js"
+    import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
+    import CrinkledSection from "../CrinkledSection.svelte"
+
+    const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
+        {
+            title: "24/7 Verfügbar",
+            icon: mdiHours24,
+            color: "#FFFFFF",
+        },
+        {
+            title: "Individuell",
+            icon: mdiFaceAgent,
+            color: "#EB5757",
+        },
+        {
+            title: "DSGVO konform",
+            icon: mdiBookAccountOutline,
+            color: "#FFFFFF",
+        },
+        {
+            title: "Intelligent",
+            icon: mdiCreation,
+            color: "#EB5757",
+        },
+    ]
+</script>
+
+<CrinkledSection brightBackground={false}>
+    {#snippet contentSnippet()}
+        <ProductCategoryFrame
+            properties={voiceProperties}
+            title="Voicebots"
+            upperDescription="Unsere Voicebots sind rund um die Uhr für Ihre Kunden da und bieten maßgeschneiderte Lösungen, die perfekt auf Ihre Bedürfnisse abgestimmt sind."
+            lowerDescription="Durch den Einsatz modernster KI-Technologien gewährleisten wir eine intelligente und effiziente Kommunikation, die den höchsten Datenschutzstandards entspricht."
+        >
+            {#snippet primaryContent()}
+                <div class="img">
+                    <img
+                        src="/media/iphone.png"
+                        alt="Kontextwerk is calling"
+                    />
+                    <div class="shadow"></div>
+                </div>
+            {/snippet}
+        </ProductCategoryFrame>
+    {/snippet}
+</CrinkledSection>
+
+<style lang="less">
+    .img {
+        width: 400px;
+        min-width: 400px;
+        max-height: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        img {
+            width: 60%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .shadow {
+            display: none;
+        }
+    }
+</style>