zwischenstand
This commit is contained in:
@@ -186,7 +186,6 @@
|
||||
width: 100%;
|
||||
min-height: 3.6rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 1.2rem;
|
||||
padding-bottom: 2.4rem;
|
||||
max-height: 12rem;
|
||||
line-height: 1.4rem;
|
||||
|
||||
@@ -169,7 +169,7 @@
|
||||
|
||||
.nav-link-button {
|
||||
border: 1px solid var(--primary-200);
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
padding: 0.45rem 1.4rem;
|
||||
font-weight: 600;
|
||||
color: var(--neutral-white);
|
||||
|
||||
@@ -34,7 +34,20 @@
|
||||
color: "#EB5757",
|
||||
},
|
||||
]
|
||||
const upperDescriptionChat = `
|
||||
Tippen Sie in das Chat-Fenster und testen Sie unseren KI-Chatbot – live in Ihrem Browser.
|
||||
`
|
||||
|
||||
const lowerDescriptionChat = `
|
||||
Der Bot greift auf dieselbe Wissensbasis wie sein Voice-Pendant zu
|
||||
und beantwortet Anfragen in Sekundenschnelle – rund um die Uhr und
|
||||
auf Wunsch mehrsprachig.<br/><br/>
|
||||
|
||||
Dank des zugrunde liegenden Workflow-Graphs können wir Ihre individuellen
|
||||
Prozesse, Abfragen und Eskalationsregeln detailgenau abbilden. DSGVO-konformes
|
||||
Hosting, belastbare KPIs und optionale A/B-Tests sorgen dafür, dass Ihr
|
||||
digitaler Kundenservice messbar Mehrwert liefert.
|
||||
`
|
||||
</script>
|
||||
|
||||
<CrinkledSection
|
||||
@@ -45,11 +58,12 @@
|
||||
{#snippet contentSnippet()}
|
||||
<ProductCategoryFrame
|
||||
properties={voiceProperties}
|
||||
title="Chatbot Demo"
|
||||
subtitle="Demoversion"
|
||||
title="Chatbot"
|
||||
reverse={true}
|
||||
sectionId="chatbot-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={upperDescriptionChat}
|
||||
lowerDescription={lowerDescriptionChat}
|
||||
>
|
||||
{#snippet primaryContent()}
|
||||
<CardWrapper>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import CardWrapper from "../widgets/CardWrapper.svelte"
|
||||
import Icon from "../widgets/Icon.svelte"
|
||||
import { mdiCheckCircleOutline } from "@mdi/js"
|
||||
import SectionTitle from "../widgets/SectionTitle.svelte"
|
||||
|
||||
const offers: Array<{
|
||||
title: string
|
||||
@@ -51,19 +52,14 @@
|
||||
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>
|
||||
<SectionTitle
|
||||
subtitle="Pakete"
|
||||
title="Unsere Angebotsmodelle"
|
||||
description="Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete bieten den kompletten Funktionsumfang unserer KI-Plattform."
|
||||
/>
|
||||
|
||||
<div class="offer-cards">
|
||||
{#each offers as offer}
|
||||
<CardWrapper>
|
||||
{#snippet contentSnippet()}
|
||||
<article
|
||||
class="offer-card"
|
||||
class:offer-card--accented={offer.accent}
|
||||
@@ -92,8 +88,6 @@
|
||||
<p class="footnote">{offer.note}</p>
|
||||
{/if}
|
||||
</article>
|
||||
{/snippet}
|
||||
</CardWrapper>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
@@ -111,33 +105,6 @@
|
||||
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 {
|
||||
@@ -167,7 +134,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
border-radius: 1.4rem;
|
||||
border-radius: 4px;
|
||||
color: var(--neutral-white);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background:
|
||||
|
||||
@@ -66,7 +66,8 @@
|
||||
{#snippet contentSnippet()}
|
||||
<ProductCategoryFrame
|
||||
properties={voiceProperties}
|
||||
title="Voicebot Demo"
|
||||
title="Voicebot"
|
||||
subtitle="Demoversion"
|
||||
sectionId="voicebot-demo"
|
||||
{upperDescription}
|
||||
{lowerDescription}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<script lang="ts">
|
||||
import Icon from "./Icon.svelte"
|
||||
import SectionTitle from "./SectionTitle.svelte"
|
||||
|
||||
let {
|
||||
properties,
|
||||
title,
|
||||
subtitle = "",
|
||||
upperDescription,
|
||||
lowerDescription,
|
||||
reverse = false,
|
||||
@@ -13,6 +15,7 @@
|
||||
}: {
|
||||
properties: Array<{ title: string; icon: string; color: string }>
|
||||
title: string
|
||||
subtitle?: string
|
||||
upperDescription: string
|
||||
large?: boolean
|
||||
reverse?: boolean
|
||||
@@ -38,7 +41,11 @@
|
||||
{/if}
|
||||
|
||||
<div class="content">
|
||||
<h2 class="h1">{title}</h2>
|
||||
<SectionTitle
|
||||
{title}
|
||||
{subtitle}
|
||||
brightBackground={!reverse}
|
||||
/>
|
||||
<p>{@html upperDescription}</p>
|
||||
<ul>
|
||||
{#each properties as property}
|
||||
|
||||
@@ -0,0 +1,148 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
contentSnippet,
|
||||
accent = false,
|
||||
}: {
|
||||
contentSnippet: () => any
|
||||
accent?: boolean
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="red-card-wrapper"
|
||||
class:red-card-wrapper--accent={accent}
|
||||
>
|
||||
<div class="red-card-shell">
|
||||
<div class="red-card-body">
|
||||
{@render contentSnippet()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../assets/css/variables.less";
|
||||
|
||||
.red-card-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.red-card-shell {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
width: 100%;
|
||||
border-radius: 1.4rem;
|
||||
background:
|
||||
radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.78) 55%),
|
||||
rgba(13, 12, 12, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top-color: rgba(173, 81, 76, 0.38);
|
||||
padding: 3.4rem 2.2rem 2.4rem;
|
||||
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);
|
||||
overflow: visible;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1.9rem;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
height: 2.9rem;
|
||||
border-radius: 1.4rem 1.4rem 0 0;
|
||||
clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 100%, 0% 100%);
|
||||
background:
|
||||
radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.92) 68%),
|
||||
rgba(13, 12, 12, 0.96);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
box-shadow:
|
||||
0 18px 36px rgba(0, 0, 0, 0.4),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1.9rem;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border-radius: inherit;
|
||||
clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 2.6rem, 100% 100%, 0% 100%);
|
||||
background: linear-gradient(
|
||||
140deg,
|
||||
rgba(255, 255, 255, 0.12) 0%,
|
||||
rgba(173, 81, 76, 0.2) 40%,
|
||||
transparent 90%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.red-card-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
width: 100%;
|
||||
color: var(--neutral-white);
|
||||
}
|
||||
|
||||
.red-card-wrapper:hover .red-card-shell {
|
||||
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;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom-color: rgba(219, 96, 88, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
.red-card-wrapper--accent .red-card-shell {
|
||||
border-color: rgba(173, 81, 76, 0.5);
|
||||
border-top-color: rgba(219, 96, 88, 0.65);
|
||||
background:
|
||||
radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.78) 55%),
|
||||
rgba(13, 12, 12, 0.9);
|
||||
}
|
||||
|
||||
.red-card-wrapper--accent .red-card-shell::before {
|
||||
background:
|
||||
radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.68) 0%, rgba(13, 12, 12, 0.92) 68%),
|
||||
rgba(13, 12, 12, 0.96);
|
||||
border-color: rgba(173, 81, 76, 0.5);
|
||||
border-bottom-color: rgba(219, 96, 88, 0.65);
|
||||
}
|
||||
|
||||
.red-card-wrapper--accent:hover .red-card-shell {
|
||||
border-color: rgba(255, 82, 82, 0.65);
|
||||
}
|
||||
|
||||
@media @mobile {
|
||||
.red-card-shell {
|
||||
padding: 3rem 1.8rem 2.1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
frontend/src/lib/components/widgets/SectionTitle.svelte
Normal file
61
frontend/src/lib/components/widgets/SectionTitle.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
title,
|
||||
subtitle = "",
|
||||
description = "",
|
||||
brightBackground = false,
|
||||
}: {
|
||||
title: string
|
||||
subtitle?: string
|
||||
description?: string
|
||||
brightBackground?: boolean
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="intro"
|
||||
class:brightBackground
|
||||
>
|
||||
<small>{subtitle}</small>
|
||||
<h2 class="h1">{title}</h2>
|
||||
{#if description}
|
||||
<p>{description}</p>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<style lang="less">
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
|
||||
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(--primary-100) !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--text-200);
|
||||
line-height: 1.6;
|
||||
}
|
||||
&.brightBackground {
|
||||
small {
|
||||
color: var(--text-invers-100);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-invers-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user