diff --git a/frontend/src/lib/components/chatbotDemo/InputRow.svelte b/frontend/src/lib/components/chatbotDemo/InputRow.svelte index 4d9740b..6dc2bbc 100644 --- a/frontend/src/lib/components/chatbotDemo/InputRow.svelte +++ b/frontend/src/lib/components/chatbotDemo/InputRow.svelte @@ -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; diff --git a/frontend/src/lib/components/header/Header.svelte b/frontend/src/lib/components/header/Header.svelte index a5a6abc..83ab9f4 100644 --- a/frontend/src/lib/components/header/Header.svelte +++ b/frontend/src/lib/components/header/Header.svelte @@ -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); diff --git a/frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte b/frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte index 711df2e..7eaca70 100644 --- a/frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte +++ b/frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte @@ -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.

+ + 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. + ` {#snippet primaryContent()} diff --git a/frontend/src/lib/components/staticPageRows/OfferPackages.svelte b/frontend/src/lib/components/staticPageRows/OfferPackages.svelte index 1e94dd8..6456df5 100644 --- a/frontend/src/lib/components/staticPageRows/OfferPackages.svelte +++ b/frontend/src/lib/components/staticPageRows/OfferPackages.svelte @@ -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,49 +52,42 @@ class="offer-row" id="angebote" > -
- Pakete -

Unsere Angebotsmodelle

-

- Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete - bieten den kompletten Funktionsumfang unserer KI-Plattform. -

-
+
{#each offers as offer} - - {#snippet contentSnippet()} -
- {#if offer.badge} - {offer.badge} - {/if} -
-

{offer.title}

-

{offer.tagline}

-
-
    - {#each offer.features as feature} -
  • - - - - {@html feature} -
  • - {/each} -
- {#if offer.note} -

{offer.note}

- {/if} -
- {/snippet} -
+
+ {#if offer.badge} + {offer.badge} + {/if} +
+

{offer.title}

+

{offer.tagline}

+
+
    + {#each offer.features as feature} +
  • + + + + {@html feature} +
  • + {/each} +
+ {#if offer.note} +

{offer.note}

+ {/if} +
{/each}
@@ -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: diff --git a/frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte b/frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte index dacf2ea..87859d6 100644 --- a/frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte +++ b/frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte @@ -66,7 +66,8 @@ {#snippet contentSnippet()} 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}
-

{title}

+

{@html upperDescription}

    {#each properties as property} diff --git a/frontend/src/lib/components/widgets/RedBackgroundCardWrapper.svelte b/frontend/src/lib/components/widgets/RedBackgroundCardWrapper.svelte new file mode 100644 index 0000000..e067570 --- /dev/null +++ b/frontend/src/lib/components/widgets/RedBackgroundCardWrapper.svelte @@ -0,0 +1,148 @@ + + +
    +
    +
    + {@render contentSnippet()} +
    +
    +
    + + diff --git a/frontend/src/lib/components/widgets/SectionTitle.svelte b/frontend/src/lib/components/widgets/SectionTitle.svelte new file mode 100644 index 0000000..12eb7c8 --- /dev/null +++ b/frontend/src/lib/components/widgets/SectionTitle.svelte @@ -0,0 +1,61 @@ + + +
    + {subtitle} +

    {title}

    + {#if description} +

    {description}

    + {/if} +
    + +