robin/kontextwerk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zwischenstand

Browse Source
This commit is contained in:
Robin Grenzdörfer
2025-10-03 04:48:46 +00:00
parent eefa562cb1
commit 7455c2fd1b
11 changed files with 359 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/media/iphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 918 KiB

BIN
frontend/media/iphoneexit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 916 KiB

18
frontend/media/topRightCrinkledBrightAndEdged.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 849 B

14
frontend/src/App.svelte
View File

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

46
frontend/src/lib/components/CrinkledSection.svelte
View File

@@ -1,33 +1,44 @@
<script> <script lang="ts">
import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte" 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> </script>
{#if activated} {#if activated}
<section <section
id="crinkled-section" id="crinkled-section"
class={brightBackground ? 'bright' : 'dark'} class={brightBackground ? "bright" : "dark"}
> >
<div class="upper-row"> <div class="upper-row">
<div <div
class="bar" class="bar"
class:border={border} class:border
></div> ></div>
<TopRightCrinkle <TopRightCrinkle
edges={border} edges={border}
brightColor={!brightBackground} brightColor={!brightBackground}
icon={icon} {icon}
bigVersion={bigVersion} {bigVersion}
/> />
</div> </div>
<slot /> {@render contentSnippet()}
</section> </section>
{:else} {:else}
<slot /> {@render contentSnippet()}
{/if} {/if}
<style lang="less"> <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 { &.dark {
background: var(--bg-100);
.bar { .bar {
background: var(--bg-100); background: var(--bg-100);
&.border { &.border {

46
frontend/src/lib/components/Footer.svelte
View File

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

52
frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte Normal file
View File

@@ -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>

68
frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte Normal file
View File

@@ -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>

148
frontend/src/lib/components/widgets/ProductCategoryFrame.svelte Normal file
View File

@@ -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>

16
frontend/src/lib/components/widgets/TopRightCrinkle.svelte
View File

@@ -9,11 +9,11 @@
<div <div
id="crinkle" id="crinkle"
class:bigVersion={bigVersion} class:bigVersion
> >
<div <div
class="crinkle-background" class="crinkle-background"
class:brightColor={brightColor} class:brightColor
> >
{#if $$slots.icon} {#if $$slots.icon}
<slot name="icon" /> <slot name="icon" />
@@ -22,12 +22,12 @@
src="../../../media/{icon src="../../../media/{icon
? icon ? icon
: edges : edges
? brightColor ? brightColor
? '' ? 'topRightCrinkledBrightAndEdged'
: 'topRightCrinkledDarkAndEdged' : 'topRightCrinkledDarkAndEdged'
: brightColor : brightColor
? 'topRightCrinkleBrightAndUnedged' ? 'topRightCrinkleBrightAndUnedged'
: 'topRightCrinkledDarkAndUnedged'}.svg" : 'topRightCrinkledDarkAndUnedged'}.svg"
alt="crinkle" alt="crinkle"
/> />
{/if} {/if}

5
frontend/src/routes/StaticHomepage.svelte
View File

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