zwischenstand

frontend/media/topRightCrinkledBrightAndEdged.svg

@@ -0,0 +1,18 @@
+<svg viewBox="176.213 124.901 61.875 61.016" width="63.875" height="61.016" xmlns="http://www.w3.org/2000/svg">
+  <!-- Definition des Clipping-Pfads -->
+  <defs>
+    <clipPath id="clip-path">
+      <!-- Clipping-Pfad definiert die Fläche links von der schrägen Linie -->
+      <path d="M 178.213 124.901 L 240.088 185.917 L 178.213 185.917 Z" />
+    </clipPath>
+  </defs>
+
+  <!-- Fülle den Bereich links von der Linie mit Weiß -->
+  <rect x="178.213" y="124.901" width="61.875" height="61.016" fill="#0D0C0C" clip-path="url(#clip-path)" />
+
+  <!-- Zusätzliches Rechteck für den nahtlosen Übergang -->
+  <rect x="176.213" y="124.901" width="2" height="61.016" fill="#0D0C0C"/>
+
+  <!-- Zeichne den ursprünglichen Pfad -->
+  <path d="M 240.088 185.917 L 178.213 124.901 L 240.088 185.917 Z" fill="none" stroke="white" stroke-width="2"/>
+</svg>

frontend/src/App.svelte

@@ -81,17 +81,6 @@
     {/if}
 </svelte:head>
 
-<div class="app-shell">
-    <Header />
-    <main>
-        <StaticHomepage />
-    </main>
-    <Footer />
-</div>
-
-<Notifications />
-<SSRSkip />
-
 <style
     lang="less"
     global
@@ -104,7 +93,7 @@
     html,
     body {
         font-family: "Outfit", sans-serif;
-        background-color: var(--bg-100);
+        background-color: #ffffff;
         min-height: 100vh;
 
         button {
@@ -122,6 +111,7 @@
             display: flex;
             flex-direction: column;
             min-height: 100vh;
+            background-color: #ffffff;
         }
 
         main {

frontend/src/lib/components/CrinkledSection.svelte

@@ -1,33 +1,44 @@
-<script>
+<script lang="ts">
     import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte"
-    export let brightBackground = true
+
-    export let border = true
+    let {
-    export let activated = true
+        brightBackground,
-    export let icon = ""
+        border,
-    export let bigVersion = false
+        activated,
+        icon,
+        bigVersion,
+        contentSnippet,
+    }: {
+        brightBackground?: boolean
+        border?: boolean
+        activated?: boolean
+        icon?: string
+        bigVersion?: boolean
+        contentSnippet: () => any
+    } = $props()
 </script>
 
 {#if activated}
     <section
         id="crinkled-section"
-        class={brightBackground ? 'bright' : 'dark'}
+        class={brightBackground ? "bright" : "dark"}
     >
         <div class="upper-row">
             <div
                 class="bar"
-                class:border={border}
+                class:border
             ></div>
             <TopRightCrinkle
                 edges={border}
                 brightColor={!brightBackground}
-                icon={icon}
+                {icon}
-                bigVersion={bigVersion}
+                {bigVersion}
             />
         </div>
-        <slot />
+        {@render contentSnippet()}
     </section>
 {:else}
-    <slot />
+    {@render contentSnippet()}
 {/if}
 
 <style lang="less">
@@ -57,7 +68,18 @@
                 }
             }
         }
+
+        &.bright {
+            background: var(--neutral-white);
+            .bar {
+                background: var(--neutral-white);
+                &.border {
+                    border-top: 2px solid var(--bg-100);
+                }
+            }
+        }
         &.dark {
+            background: var(--bg-100);
             .bar {
                 background: var(--bg-100);
                 &.border {

frontend/src/lib/components/Footer.svelte

@@ -22,6 +22,7 @@
 </script>
 
 <CrinkledSection>
+    {#snippet contentSnippet()}
         <footer class="footer">
             <section id="legal-section">
                 <div class="wrapper">
@@ -44,6 +45,7 @@
                 </div>
             </section>
         </footer>
+    {/snippet}
 </CrinkledSection>
 
 <style lang="less">

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import {
+        mdiBookAccountOutline,
+        mdiCalendarCursor,
+        mdiCompareHorizontal,
+        mdiCreation,
+        mdiDatabaseCheckOutline,
+        mdiPoll,
+    } from "@mdi/js"
+    import ProductCategoryFrame from "../widgets/ProductCategoryFrame.svelte"
+
+    const voiceProperties: Array<{ title: string; icon: string; color: string }> = [
+        {
+            title: "Trackbar",
+            icon: mdiPoll,
+            color: "#FFFFFF",
+        },
+        {
+            title: "Up To Date",
+            icon: mdiDatabaseCheckOutline,
+            color: "#EB5757",
+        },
+        {
+            title: "End To End",
+            icon: mdiCompareHorizontal,
+            color: "#FFFFFF",
+        },
+        {
+            title: "Wochen statt Monate",
+            icon: mdiCalendarCursor,
+            color: "#EB5757",
+        },
+    ]
+</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>
+
+<style lang="less">
+    section {
+        max-width: var(--small-max-width);
+    }
+</style>

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>

frontend/src/lib/components/widgets/ProductCategoryFrame.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import Icon from "./Icon.svelte"
+
+    let {
+        properties,
+        title,
+        upperDescription,
+        lowerDescription,
+        reverse = false,
+        primaryContent,
+    }: {
+        properties: Array<{ title: string; icon: string; color: string }>
+        title: string
+        upperDescription: string
+        reverse?: boolean
+        lowerDescription: string
+        primaryContent: () => any
+    } = $props()
+</script>
+
+<section class="improveYourselfDescription">
+    {#if !reverse}
+        <div class="primary">
+            {@render primaryContent()}
+        </div>
+    {/if}
+
+    <div class="content">
+        <h2 class="h1">{title}</h2>
+        <p>{@html upperDescription}</p>
+        <ul>
+            {#each properties as property}
+                <li>
+                    <span style="color: {property.color};"
+                        ><Icon
+                            path={property.icon}
+                            size="2.4rem"
+                        />
+                    </span>
+                    <span style="color: {property.color};">{property.title}</span>
+                </li>
+            {/each}
+        </ul>
+        <p>{@html lowerDescription}</p>
+    </div>
+    {#if reverse}
+        <div class="primary">
+            {@render primaryContent()}
+        </div>
+    {/if}
+</section>
+
+<style
+    lang="less"
+    global
+>
+    @import "../../assets/css/variables.less";
+    .improveYourselfDescription {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2.4rem;
+        max-width: 100%;
+        height: 100%;
+
+        .primary {
+            width: 400px;
+            min-width: 400px;
+            max-height: 100%;
+            height: 100%;
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+            }
+            .shadow {
+                display: none;
+            }
+        }
+        .content {
+            height: 100%;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            gap: 2.4rem;
+            z-index: 99;
+            p {
+                color: var(--text-100);
+            }
+            ul {
+                display: flex;
+                width: 100%;
+                justify-content: space-between;
+                li {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 0.6rem;
+                    span {
+                        font-size: 0.8rem;
+                        font-weight: 700;
+                        text-transform: uppercase;
+                    }
+                }
+            }
+        }
+        @media @mobile {
+            flex-direction: column;
+            padding: 0px;
+            .content {
+                ul {
+                    flex-direction: column;
+                    gap: 1.2rem;
+                    li {
+                        flex-direction: row;
+                        span:first-child {
+                            width: 100px;
+                            display: flex;
+                            justify-content: center;
+                        }
+                    }
+                }
+            }
+            .img {
+                max-width: 100%;
+                position: absolute;
+                bottom: 0px;
+                width: 100%;
+                height: 100%;
+                z-index: 1;
+                .shadow {
+                    display: block;
+                    position: absolute;
+                    bottom: 0px;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(13, 12, 12, 0.5);
+                    z-index: 2;
+                }
+            }
+        }
+        h2 {
+            color: var(--primary-200);
+            font-weight: 700;
+        }
+    }
+</style>

frontend/src/lib/components/widgets/TopRightCrinkle.svelte

@@ -9,11 +9,11 @@
 
 <div
     id="crinkle"
-    class:bigVersion={bigVersion}
+    class:bigVersion
 >
     <div
         class="crinkle-background"
-        class:brightColor={brightColor}
+        class:brightColor
     >
         {#if $$slots.icon}
             <slot name="icon" />
@@ -23,7 +23,7 @@
                     ? icon
                     : edges
                       ? brightColor
-                        ? ''
+                          ? 'topRightCrinkledBrightAndEdged'
                           : 'topRightCrinkledDarkAndEdged'
                       : brightColor
                         ? 'topRightCrinkleBrightAndUnedged'

frontend/src/routes/StaticHomepage.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
+    import ChatbotPreview from "../lib/components/staticPageRows/ChatbotPreview.svelte"
     import CoreSellingPoints from "../lib/components/staticPageRows/CoreSellingPoints.svelte"
+    import VoicebotPreview from "../lib/components/staticPageRows/VoicebotPreview.svelte"
 </script>
 
 <CoreSellingPoints />
+
+<VoicebotPreview />
+<ChatbotPreview />