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

14
frontend/src/App.svelte
View File

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

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

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

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

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

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

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

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