base

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

@@ -8,6 +8,9 @@
         mdiPoll,
     } from "@mdi/js"
     import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
+    import CrinkledSection from "../CrinkledSection.svelte"
+    import CardWrapper from "../widgets/CardWrapper.svelte"
+    import Chatbot from "../chatbotDemo/Chatbot.svelte"
 
     const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
         {
@@ -33,17 +36,29 @@
     ]
 </script>
 
-<section>
-    <ProductCategoryFrame
-        properties={voiceProperties}
-        title="Chatbots"
-        reverse={true}
-        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()}{/snippet}
-    </ProductCategoryFrame>
-</section>
+<CrinkledSection
+    brightBackground={false}
+    border={true}
+    activated={true}
+>
+    {#snippet contentSnippet()}
+        <ProductCategoryFrame
+            properties={voiceProperties}
+            title="Chatbot Demo"
+            reverse={true}
+            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()}
+                <CardWrapper>
+                    {#snippet contentSnippet()}
+                        <Chatbot />
+                    {/snippet}
+                </CardWrapper>
+            {/snippet}
+        </ProductCategoryFrame>
+    {/snippet}
+</CrinkledSection>
 
 <style lang="less">
     section {