zwischenstand

2025-10-03 04:48:46 +00:00
parent eefa562cb1
commit 7455c2fd1b
11 changed files with 359 additions and 54 deletions
--- a/frontend/media/iphone.png
+++ b/frontend/media/iphone.png
--- a/frontend/media/iphoneexit.png
+++ b/frontend/media/iphoneexit.png
--- a/frontend/media/topRightCrinkledBrightAndEdged.svg
+++ b/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>
--- a/frontend/src/App.svelte
+++ b/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 {
--- a/frontend/src/lib/components/CrinkledSection.svelte
+++ b/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
-    export let activated = true
-    export let icon = ""
-    export let bigVersion = false
+
+    let {
+        brightBackground,
+        border,
+        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}
-                bigVersion={bigVersion}
+                {icon}
+                {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 {
--- a/frontend/src/lib/components/Footer.svelte
+++ b/frontend/src/lib/components/Footer.svelte
@@ -22,28 +22,30 @@
 </script>

 <CrinkledSection>
-    <footer class="footer">
-        <section id="legal-section">
-            <div class="wrapper">
-                <small class="">© 2025 | KontextWerk | Alle Rechte vorbehalten.</small>
-                <nav class="nav-points">
-                    <ul>
-                        {#each navigationEntries.length ? navigationEntries[0].elements : [] as link}
-                            <li>
-                                <a
-                                    class="footer-nav-point-bottom"
-                                    use:spaLink
-                                    href={link.page}
-                                >
-                                    <small>{link.name}</small>
-                                </a>
-                            </li>
-                        {/each}
-                    </ul>
-                </nav>
-            </div>
-        </section>
-    </footer>
+    {#snippet contentSnippet()}
+        <footer class="footer">
+            <section id="legal-section">
+                <div class="wrapper">
+                    <small class="">© 2025 | KontextWerk | Alle Rechte vorbehalten.</small>
+                    <nav class="nav-points">
+                        <ul>
+                            {#each navigationEntries.length ? navigationEntries[0].elements : [] as link}
+                                <li>
+                                    <a
+                                        class="footer-nav-point-bottom"
+                                        use:spaLink
+                                        href={link.page}
+                                    >
+                                        <small>{link.name}</small>
+                                    </a>
+                                </li>
+                            {/each}
+                        </ul>
+                    </nav>
+                </div>
+            </section>
+        </footer>
+    {/snippet}
 </CrinkledSection>

 <style lang="less">
--- a/frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte
+++ b/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>
--- a/frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte
+++ b/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>
--- a/frontend/src/lib/components/widgets/ProductCategoryFrame.svelte
+++ b/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>
--- a/frontend/src/lib/components/widgets/TopRightCrinkle.svelte
+++ b/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" />
@@ -22,12 +22,12 @@
                src="../../../media/{icon
                    ? icon
                    : edges
-                    ? brightColor
-                        ? ''
-                        : 'topRightCrinkledDarkAndEdged'
-                    : brightColor
-                    ? 'topRightCrinkleBrightAndUnedged'
-                    : 'topRightCrinkledDarkAndUnedged'}.svg"
+                      ? brightColor
+                          ? 'topRightCrinkledBrightAndEdged'
+                          : 'topRightCrinkledDarkAndEdged'
+                      : brightColor
+                        ? 'topRightCrinkleBrightAndUnedged'
+                        : 'topRightCrinkledDarkAndUnedged'}.svg"
                alt="crinkle"
            />
        {/if}
--- a/frontend/src/routes/StaticHomepage.svelte
+++ b/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 />