KIRA - Banking Chatbot Case Study
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #24292f;
background: #ffffff;
}
.kira-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.kira-hero {
background: linear-gradient(135deg, #f6f8fa 0%, #ffffff 100%);
padding: 6rem 0;
min-height: 80vh;
display: flex;
align-items: center;
}
.kira-hero-content {
display: grid;
grid-template-columns: 1fr 300px;
gap: 4rem;
align-items: center;
width: 100%;
}
.kira-service-subtitle {
font-size: 1rem;
color: #238636;
font-weight: 600;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kira-hero h1 {
font-size: 3.5rem;
font-weight: 800;
color: #24292f;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.kira-hero h1 .highlight {
color: #238636;
}
.kira-hero-text p {
font-size: 1.3rem;
color: #656d76;
margin-bottom: 2.5rem;
max-width: 600px;
line-height: 1.7;
}
.kira-hero-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.kira-btn {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: inline-block;
text-align: center;
min-width: 160px;
}
.kira-btn-primary {
background: #238636;
color: white;
box-shadow: 0 4px 12px rgba(35, 134, 54, 0.3);
}
.kira-btn-primary:hover {
background: #2da44e;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(35, 134, 54, 0.4);
}
.kira-btn-secondary {
background: transparent;
color: #24292f;
border: 2px solid #d1d9e0;
}
.kira-btn-secondary:hover {
background: #f6f8fa;
border-color: #238636;
color: #238636;
transform: translateY(-2px);
}
.kira-hero-image {
display: flex;
justify-content: center;
align-items: center;
}
.kira-logo-circle {
width: 280px;
height: 280px;
border-radius: 50%;
background: linear-gradient(135deg, #238636 0%, #2da44e 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3.5rem;
font-weight: 800;
box-shadow: 0 20px 40px rgba(35, 134, 54, 0.3);
position: relative;
}
.kira-logo-circle::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: linear-gradient(135deg, #238636, #2da44e);
opacity: 0.3;
z-index: -1;
}
/* Sections */
.kira-section {
padding: 6rem 0;
}
.kira-section-alt {
padding: 6rem 0;
background: #f6f8fa;
}
.kira-section-dark {
padding: 6rem 0;
background: #24292f;
color: white;
}
.kira-section h2 {
font-size: 2.8rem;
font-weight: 700;
color: #24292f;
margin-bottom: 2rem;
line-height: 1.2;
}
.kira-section-title {
text-align: center;
font-size: 3rem;
font-weight: 700;
color: #24292f;
margin-bottom: 4rem;
line-height: 1.2;
}
.kira-section-dark h2,
.kira-section-dark .kira-section-title {
color: white;
}
/* Grids */
.kira-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: start;
}
.kira-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
}
.kira-grid-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
margin-bottom: 5rem;
}
/* Cards */
.kira-feature-card {
background: white;
padding: 2.5rem;
border-radius: 16px;
border: 1px solid #d1d9e0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.kira-feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #238636, #2da44e);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.kira-feature-card:hover::before {
transform: scaleX(1);
}
.kira-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-color: #238636;
}
.kira-feature-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
}
.kira-feature-card h3 {
font-size: 1.4rem;
font-weight: 600;
color: #24292f;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.kira-feature-card p {
color: #656d76;
font-size: 1rem;
line-height: 1.6;
}
.kira-stat-card {
text-align: center;
background: white;
padding: 3rem 2rem;
border-radius: 16px;
border: 1px solid #d1d9e0;
transition: all 0.3s ease;
position: relative;
}
.kira-stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.kira-stat-number {
font-size: 3.5rem;
font-weight: 800;
color: #238636;
margin-bottom: 1rem;
line-height: 1;
}
.kira-stat-label {
color: #656d76;
font-weight: 600;
font-size: 1.1rem;
}
/* Lists */
.kira-bullet-list {
list-style: none;
}
.kira-bullet-item {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.kira-bullet-dot {
width: 12px;
height: 12px;
background: #238636;
border-radius: 50%;
margin-right: 1.5rem;
margin-top: 0.4rem;
flex-shrink: 0;
}
.kira-bullet-item span {
color: #656d76;
line-height: 1.6;
}
/* Demo Section */
.kira-demo-interface {
background: #f6f8fa;
padding: 4rem;
border-radius: 16px;
color: #24292f;
max-width: 700px;
margin: 0 auto;
border: 1px solid #d1d9e0;
}
.kira-demo-box {
background: white;
border-radius: 12px;
padding: 3rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.kira-demo-box h4 {
color: #238636;
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 600;
}
.kira-demo-box p {
color: #656d76;
margin-bottom: 2rem;
font-size: 1.1rem;
line-height: 1.6;
}
.kira-demo-box ul {
text-align: left;
color: #656d76;
padding-left: 2rem;
}
.kira-demo-box li {
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.5;
}
/* Testimonials */
.kira-testimonials {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 3rem;
border-radius: 16px;
border: 1px solid #d1d9e0;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.kira-testimonials h3 {
color: #24292f;
margin-bottom: 2.5rem;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
}
.kira-testimonial {
border-left: 4px solid #238636;
padding: 2rem;
background: #f6f8fa;
margin-bottom: 2rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.kira-testimonial:hover {
background: #ffffff;
box-shadow: 0 5px 15px rgba(35, 134, 54, 0.1);
}
.kira-testimonial:last-child {
margin-bottom: 0;
}
.kira-testimonial p {
color: #656d76;
font-style: italic;
margin-bottom: 1rem;
font-size: 1.1rem;
line-height: 1.6;
}
.kira-testimonial footer {
color: #24292f;
font-weight: 600;
font-size: 0.95rem;
}
/* CTA */
.kira-cta {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.kira-cta p {
color: #656d76;
margin-bottom: 3rem;
font-size: 1.2rem;
line-height: 1.7;
}
.kira-cta-buttons {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
/* Problem/Solution specific styling */
.kira-problem-solution {
position: relative;
}
.kira-problem-solution::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, #d1d9e0 20%, #d1d9e0 80%, transparent);
transform: translateX(-50%);
}
.kira-problem-solution > div:first-child {
padding-right: 2rem;
}
.kira-problem-solution > div:last-child {
padding-left: 2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.kira-hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.kira-grid-2 {
grid-template-columns: 1fr;
gap: 3rem;
}
.kira-problem-solution::before {
display: none;
}
.kira-problem-solution > div:first-child,
.kira-problem-solution > div:last-child {
padding: 0;
}
}
@media (max-width: 768px) {
.kira-hero {
padding: 4rem 0;
}
.kira-hero h1 {
font-size: 2.5rem;
}
.kira-section,
.kira-section-alt,
.kira-section-dark {
padding: 4rem 0;
}
.kira-section-title {
font-size: 2.2rem;
margin-bottom: 3rem;
}
.kira-grid-4 {
grid-template-columns: 1fr;
}
.kira-grid-stats {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.kira-logo-circle {
width: 220px;
height: 220px;
font-size: 2.5rem;
}
.kira-hero-buttons {
justify-content: center;
}
.kira-demo-interface {
padding: 2rem;
}
.kira-demo-box {
padding: 2rem;
}
.kira-cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.kira-container {
padding: 0 15px;
}
.kira-hero h1 {
font-size: 2rem;
}
.kira-hero-text p {
font-size: 1.1rem;
}
.kira-grid-stats {
grid-template-columns: 1fr;
}
.kira-logo-circle {
width: 180px;
height: 180px;
font-size: 2rem;
}
.kira-btn {
padding: 12px 24px;
font-size: 1rem;
min-width: 140px;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.kira-feature-card,
.kira-stat-card {
animation: fadeInUp 0.6s ease-out;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
Case Study • RAG-Chatbot • 2023
KIRA Banking-Chatbot
Intelligenter RAG-Chatbot für die PSD Bank Karlsruhe-Neustadt. Revolutioniert den Kundensupport durch ChatGPT-3.5-turbo und maßgeschneiderte Wissensdatenbank.
KIRA
Das Problem
Bankkunden haben komplexe Fragen zu Produkten, Konditionen und Prozessen. Der Support war überlastet mit repetitiven Anfragen, die 80% der Arbeitszeit beanspruchten.
- Lange Wartezeiten für Kunden
- Repetitive Fragen beanspruchten 80% der Support-Zeit
- Mitarbeiter hatten keine Zeit für komplexe Beratung
Die Lösung
KIRA (Knowledge-based Intelligent Response Assistant) nutzt RAG-Technologie, um präzise Antworten aus der Bank-Wissensdatenbank zu generieren.
- 24/7 verfügbare Sofort-Antworten
- 85% Reduktion repetitiver Anfragen
- Mitarbeiter fokussieren sich auf Beratung
Kernfunktionen
RAG-Technologie
Retrieval-Augmented Generation kombiniert ChatGPT-3.5-turbo mit bankspezifischer Wissensdatenbank für präzise Antworten.
Wissensdatenbank
Über 500 Dokumente zu Produkten, Konditionen und Prozessen der PSD Bank, kontinuierlich aktualisiert.
Sofort-Antworten
Durchschnittliche Antwortzeit unter 3 Sekunden. Kunden erhalten sofort präzise Informationen.
Datenschutz
DSGVO-konform, keine Speicherung persönlicher Daten, sichere API-Kommunikation mit OpenAI.
Ergebnisse & Impact
85%
Reduktion repetitiver Anfragen
3s
Durchschnittliche Antwortzeit
24/7
Verfügbarkeit
92%
Kundenzufriedenheit
Kundenrückmeldungen
"KIRA gibt mir sofort die Antworten, die ich brauche. Keine Warteschleife mehr!"
"Endlich können wir uns auf die komplexen Beratungsgespräche konzentrieren."
Live Demo
Erlebe KIRA in Aktion. Teste den Chatbot mit echten Banking-Fragen und erlebe die Kraft der RAG-Technologie.
KIRA Demo-Interface
Hier würde normalerweise der Live-Chatbot eingebettet werden. Teste Fragen wie:
- "Wie hoch sind die Zinsen für einen Privatkredit?"
- "Welche Unterlagen brauche ich für eine Kontoeröffnung?"
- "Was kostet eine Überweisung ins Ausland?"
Interessiert an einem ähnlichen Projekt?
KIRA zeigt, wie RAG-Technologie komplexe Wissensdatenbanken in intelligente, benutzerfreundliche Assistenten verwandelt. Lass uns über dein Projekt sprechen.