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-06 15:26:28 +00:00
parent 8974ae93e1
commit c5172d2d9e
9 changed files with 415 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/config.ts
View File

@@ -28,5 +28,6 @@ export const headerLinks: HeaderLink[] = [
{ label: "Überblick", sectionId: "leistungen" },
{ label: "Voicebot", sectionId: "voicebot-demo" },
{ label: "Chatbot", sectionId: "chatbot-demo" },
{ label: "Angebote", sectionId: "angebote" },
{ label: "Kontakt", sectionId: "kontakt", type: "button" },
]

67
frontend/src/lib/components/chatbotDemo/InputRow.svelte
View File

@@ -96,6 +96,8 @@
</div>
<style lang="less">
@import "../../assets/css/variables.less";
.input-row {
width: 100%;
display: flex;
@@ -107,32 +109,56 @@
.quick-actions {
width: 100%;
display: grid;
gap: 0.65rem;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0px 0.6rem;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.9rem;
padding: 0 0.6rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
.quick-chip {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0.65rem 0.95rem;
padding: 0.9rem 1.15rem;
border-radius: 4px;
background: var(--bg-200);
color: white;
border: 1px solid var(--bg-100);
position: relative;
overflow: hidden;
background:
radial-gradient(140% 160% at 15% -10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.88) 55%),
rgba(13, 12, 12, 0.82);
color: var(--neutral-white);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 18px 36px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
cursor: pointer;
gap: 0.25rem;
gap: 0.35rem;
transition:
background 0.3s ease,
transform 0.3s ease;
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
&::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
&:hover:not(:disabled) {
background: var(--bg-100);
border: 1px solid var(--bg-200);
transform: translateY(-1px);
transform: translateY(-4px);
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
border-color: rgba(173, 81, 76, 0.55);
&::after {
opacity: 1;
}
}
&:disabled {
@@ -141,15 +167,16 @@
}
.title {
font-size: 0.8rem;
letter-spacing: 0.01em;
opacity: 0.8;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.highlight {
font-size: 0.95rem;
font-size: 1rem;
font-weight: 600;
color: var(--neutral-white);
color: var(--text-200);
text-transform: capitalize;
}
}

15
frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte
View File

@@ -34,6 +34,7 @@
color: "#EB5757",
},
]
</script>
<CrinkledSection
@@ -60,3 +61,17 @@
</ProductCategoryFrame>
{/snippet}
</CrinkledSection>
<style lang="less">
@import "../../assets/css/variables.less";
.card-wrapper {
min-width: 100%;
}
@media @mobile {
.card-wrapper {
min-width: 100%;
}
}
</style>

10
frontend/src/lib/components/staticPageRows/ContactFormRow.svelte
View File

@@ -91,10 +91,11 @@
<div class="contact-wrapper">
<div class="copy">
<small>Kontakt</small>
<h2>Kontaktieren Sie uns</h2>
<h2>Jetzt unverbindlich anfragen</h2>
<p>
Ob Fragen zu unseren Lösungen oder konkrete Projektideen – schreiben Sie uns und wir melden uns
schnellstmöglich bei Ihnen.
Sie haben Fragen oder wollen Ihr Projekt direkt besprechen? <br />
Schreiben Sie uns – wir antworten innerhalb von 24&nbsp;Stunden und zeigen Ihnen den schnellsten
Weg zum produktiven Chat- oder Voicebot.
</p>
</div>
<form
@@ -205,6 +206,7 @@
.row {
display: flex;
flex-direction: column;
padding: 0px;
gap: 0.4rem;
}
@@ -222,7 +224,7 @@
}
button {
align-self: flex-start;
align-self: flex-end;
}
}
}

4
frontend/src/lib/components/staticPageRows/CoreSellingPoints.svelte
View File

@@ -57,8 +57,8 @@
color: "#741e20",
},
{
title: "Sorglos",
alias: "Sorglos",
title: "Sorgloser",
alias: "Sorgloser",
shortDescription:
"Alles aus einer Hand: Kick-off-Workshop, Datenaufbereitung, Implementierung und Kanalintegration. Hosting im deutschen Rechenzentrum, 24/7-Monitoring, automatisierte Tests und kontinuierliche Optimierung sind für uns Standard.",
color: "#ffffff",

308
frontend/src/lib/components/staticPageRows/OfferPackages.svelte Normal file
View File

@@ -0,0 +1,308 @@
<script lang="ts">
import CrinkledSection from "../CrinkledSection.svelte"
import CardWrapper from "../widgets/CardWrapper.svelte"
import Icon from "../widgets/Icon.svelte"
import { mdiCheckCircleOutline } from "@mdi/js"
const offers: Array<{
title: string
tagline: string
badge?: string
accent?: boolean
features: string[]
note?: string
}> = [
{
title: "Kontextwerk Starter",
tagline: "„Schnell live, komplett gemanagt“",
badge: "Beliebtestes Paket",
accent: true,
features: [
"Einmalige Bot-Entwicklung inkl. Workshop &amp; Integration: <strong>ab 2 500 €</strong>",
"Hosting &amp; Monitoring im deutschen Rechenzentrum: <strong>99 €/Monat</strong>",
"Transparente Nutzungskosten: ca. <strong>2 €</strong> pro 100 Chat-Sessions bzw. <strong>5 €</strong> pro 100 Voice-Calls*",
"Optionales Optimierungspaket (Prompt- &amp; KPI-Tuning): <strong>ab 250 €/Monat</strong>",
"Vollständig DSGVO-konform, kündbar mit 30 Tagen Frist",
],
note: "*ca. 10 Minuten Dialogdauer pro Session; tatsächliche API-Preise werden 1:1 durchgereicht.",
},
{
title: "Kontextwerk Enterprise",
tagline: "„Volle Kontrolle in Ihrer Umgebung“",
badge: "Für komplexe Landschaften",
features: [
"On-Premise- oder Private-Cloud-Deployment (Kubernetes/Docker)",
"Schulung &amp; Enablement Ihres Teams: <strong>1–3 Tage</strong>, feste Tagessätze",
"Plattform-Lizenz nach Server-Knoten oder CPU/VRAM-Paketen",
"Premium-Support &amp; individuelle SLA bis <strong>24/7</strong> verfügbar",
"Gleicher Funktionsumfang wie Starter, jedoch mit eigener Datenhoheit und Möglichkeit, firmeneigene LLMs anzubinden.",
],
},
]
</script>
<CrinkledSection
brightBackground={false}
border={true}
activated={true}
>
{#snippet contentSnippet()}
<section
class="offer-row"
id="angebote"
>
<header class="intro">
<small>Pakete</small>
<h2>Unsere Angebotsmodelle</h2>
<p>
Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete
bieten den kompletten Funktionsumfang unserer KI-Plattform.
</p>
</header>
<div class="offer-cards">
{#each offers as offer}
<CardWrapper>
{#snippet contentSnippet()}
<article
class="offer-card"
class:offer-card--accented={offer.accent}
>
{#if offer.badge}
<span class="offer-card__badge">{offer.badge}</span>
{/if}
<header>
<h3>{offer.title}</h3>
<p class="tagline">{offer.tagline}</p>
</header>
<ul>
{#each offer.features as feature}
<li>
<span class="icon">
<Icon
path={mdiCheckCircleOutline}
size="1.1rem"
/>
</span>
<span>{@html feature}</span>
</li>
{/each}
</ul>
{#if offer.note}
<p class="footnote">{offer.note}</p>
{/if}
</article>
{/snippet}
</CardWrapper>
{/each}
</div>
</section>
{/snippet}
</CrinkledSection>
<style lang="less">
@import "../../assets/css/variables.less";
.offer-row {
display: flex;
flex-direction: column;
gap: 3rem;
max-width: var(--small-max-width);
margin: 0 auto;
width: 100%;
color: var(--neutral-white);
.intro {
display: flex;
flex-direction: column;
gap: 0.8rem;
max-width: 720px;
small {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-200);
font-weight: 600;
}
h2 {
margin: 0;
font-size: clamp(2rem, 3vw, 2.75rem);
color: var(--neutral-white);
}
p {
margin: 0;
color: var(--text-200);
line-height: 1.6;
}
}
}
.offer-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.4rem;
width: 100%;
.card-wrapper {
.header {
display: none;
}
.body {
border: none;
border-radius: 1.6rem;
padding: 0;
background: transparent;
}
}
}
.offer-card {
position: relative;
overflow: hidden;
padding: 2.4rem 2.2rem;
display: flex;
flex-direction: column;
gap: 1.6rem;
border-radius: 1.4rem;
color: var(--neutral-white);
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.35) 0%, rgba(13, 12, 12, 0.75) 55%),
rgba(13, 12, 12, 0.86);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
border-color 0.3s ease;
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
140deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(173, 81, 76, 0.18) 45%,
transparent 90%
);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
&:hover {
transform: translateY(-6px);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
&::after {
opacity: 1;
}
}
header {
display: flex;
flex-direction: column;
gap: 0.35rem;
h3 {
margin: 0;
font-size: 1.5rem;
letter-spacing: -0.02em;
}
.tagline {
margin: 0;
font-weight: 500;
color: var(--text-200);
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
li {
display: grid;
grid-template-columns: auto 1fr;
align-items: flex-start;
gap: 0.9rem;
line-height: 1.55;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: rgba(173, 81, 76, 0.2);
box-shadow: inset 0 0 0 1px rgba(173, 81, 76, 0.55);
svg {
filter: drop-shadow(0 0 6px rgba(173, 81, 76, 0.45));
}
}
strong {
color: var(--text-200);
font-weight: 600;
}
}
}
.footnote {
margin: 0;
font-size: 0.85rem;
color: var(--text-200);
opacity: 0.85;
}
}
.offer-card__badge {
align-self: flex-start;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(173, 81, 76, 0.95), rgba(255, 82, 82, 0.7));
color: var(--neutral-white);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(173, 81, 76, 0.35);
}
.offer-card--accented {
border-color: rgba(173, 81, 76, 0.5);
&:hover {
border-color: rgba(255, 82, 82, 0.65);
}
.icon {
background: rgba(255, 82, 82, 0.16);
box-shadow: inset 0 0 0 1px rgba(255, 82, 82, 0.4);
}
}
@media @mobile {
.offer-row {
gap: 2.4rem;
}
.offer-card {
padding: 2.1rem 1.7rem;
}
}
</style>

18
frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte
View File

@@ -28,7 +28,21 @@
color: "#EB5757",
},
]
const upperDescription = `
Klicken Sie auf den grünen Hörer
und sprechen Sie jetzt live mit unserer
KontextWerk-Expertin – direkt hier im Browser.
`
const lowerDescription = `
Die Demo liefert exakt die Gesprächsqualität, die wir später als Telefon-Bot auf
Ihrer Hotline bereitstellen: 24/7 verfügbar, auf Ihr Unternehmenswissen trainiert
und bei Bedarf mit nahtloser Übergabe an Ihr Serviceteam.<br/><br/>
Im Hintergrund steuert ein individuell von uns programmierter Workflow-Graph jeden Schritt des Dialogs –
von der Bedarfsklärung bis zur Datenerfassung – genau so, wie es ein Mitarbeiter
am Telefon tun würde. DSGVO-konformes Hosting in Deutschland, minimale Latenz und
offene Schnittstellen machen Ihren Kundenservice zuverlässig, sicher und skalierbar.
`
const controller = createVoicebotPreviewController()
const { status, statusHint, toggle, setup, teardown } = controller
@@ -54,8 +68,8 @@
properties={voiceProperties}
title="Voicebot Demo"
sectionId="voicebot-demo"
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."
{upperDescription}
{lowerDescription}
>
{#snippet primaryContent()}
<div

24
frontend/src/lib/components/widgets/ProductCategoryFrame.svelte
View File

@@ -7,12 +7,14 @@
upperDescription,
lowerDescription,
reverse = false,
large = false,
sectionId,
primaryContent,
}: {
properties: Array<{ title: string; icon: string; color: string }>
title: string
upperDescription: string
large?: boolean
reverse?: boolean
lowerDescription: string
sectionId?: string
@@ -25,7 +27,10 @@
id={sectionId}
class:reverse
>
<div class="wrapper">
<div
class="wrapper"
class:large
>
{#if !reverse}
<div class="primary">
{@render primaryContent()}
@@ -69,21 +74,24 @@
justify-content: center;
align-items: center;
gap: 2.4rem;
max-width: 100%;
height: 100%;
width: 100%;
padding-bottom: 4.8rem;
.wrapper {
width: var(--small-max-width);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 2.4rem;
max-width: var(--small-max-width);
&.large {
max-width: var(--normal-max-width);
}
.primary {
width: 400px;
min-width: 400px;
width: min(100%, 400px);
min-width: min(100%, 400px);
max-height: 100%;
height: 100%;
img {
@@ -170,6 +178,10 @@
p {
color: var(--text-100) !important;
}
.primary {
width: min(100%, 700px);
min-width: min(100%, 700px);
}
}
}
</style>

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

@@ -3,10 +3,12 @@
import ContactFormRow from "../lib/components/staticPageRows/ContactFormRow.svelte"
import CoreSellingPoints from "../lib/components/staticPageRows/CoreSellingPoints.svelte"
import VoicebotPreview from "../lib/components/staticPageRows/VoicebotPreview.svelte"
import OfferPackages from "../lib/components/staticPageRows/OfferPackages.svelte"
</script>
<CoreSellingPoints />
<VoicebotPreview />
<ChatbotPreview />
<OfferPackages />
<ContactFormRow />