marek/MtoRagSystem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new website landingpage

Browse Source
This commit is contained in:
team 1
2026-04-15 16:08:43 +02:00
parent 5593225f5e
commit 2ef564e764
10 changed files with 347 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

766
public/retriex.html Normal file
View File

@@ -0,0 +1,766 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>RetrieX – Aus Unternehmenswissen werden verlässliche Antworten</title>
<meta name="description"
content="RetrieX macht Dokumente, Regeln und Produktwissen in einer steuerbaren KI-Oberfläche nutzbar – für schnellere Entscheidungen, bessere Beratung und produktive Wissensarbeit."/>
<link href="/assets/retriex/bootstrap.css" rel="stylesheet">
<link href="/assets/retriex/fonts.css" rel="stylesheet">
<style>
:root {
--rx-primary: #2196F3;
--rx-dark: #0f172a;
--rx-text: #334155;
--rx-muted: #64748b;
--rx-bg: #f8fafc;
--rx-card: rgba(255, 255, 255, 0.85);
--rx-border: rgba(148, 163, 184, 0.18);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background: radial-gradient(circle at top left, rgba(13, 110, 253, 0.12), transparent 32%),
radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
color: var(--rx-text);
}
h1 {
font-size: 4.5rem !important;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #2196F3;
--bs-btn-border-color: #2196F3;
}
.navbar {
backdrop-filter: blur(10px);
background: rgba(248, 250, 252, 0.75);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.navbar-brand {
font-weight: 800;
letter-spacing: -0.03em;
color: var(--rx-dark);
}
.hero {
padding: 8rem 0 5rem;
position: relative;
overflow: hidden;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.95rem;
border-radius: 999px;
background: rgba(13, 110, 253, 0.08);
color: var(--rx-primary);
font-weight: 600;
font-size: 0.92rem;
border: 1px solid rgba(13, 110, 253, 0.12);
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4.9rem);
line-height: 0.97;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--rx-dark);
max-width: 10.5em;
}
.hero p.lead {
font-size: 1.2rem;
line-height: 1.75;
color: var(--rx-muted);
max-width: 760px;
}
.hero-panel,
.glass-card {
background: var(--rx-card);
border: 1px solid var(--rx-border);
backdrop-filter: blur(12px);
box-shadow: 0 20px 70px rgba(15, 23, 42, 0.08);
border-radius: 1.75rem;
}
.hero-panel {
padding: 2rem;
}
.mini-stat {
border-radius: 1.25rem;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.14);
padding: 1rem;
height: 100%;
}
.mini-stat .label {
color: var(--rx-muted);
font-size: 0.88rem;
margin-bottom: 0.35rem;
}
.mini-stat .value {
color: var(--rx-dark);
font-size: 1.05rem;
font-weight: 700;
}
.btn-primary {
padding: 0.9rem 1.35rem;
font-weight: 600;
border-radius: 0.9rem;
box-shadow: 0 14px 30px rgba(13, 110, 253, 0.22);
}
.btn-outline-dark {
padding: 0.9rem 1.35rem;
font-weight: 600;
border-radius: 0.9rem;
}
.trust-bar {
padding: 1rem 1.25rem;
margin-top: 1.75rem;
}
.trust-item {
font-weight: 600;
color: var(--rx-dark);
letter-spacing: -0.02em;
}
.section {
padding: 5.5rem 0;
}
.section-kicker {
color: var(--rx-primary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.82rem;
margin-bottom: 0.85rem;
}
.section h2 {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--rx-dark);
margin-bottom: 1rem;
}
.section .section-text {
color: var(--rx-muted);
font-size: 1.08rem;
line-height: 1.8;
max-width: 760px;
}
.feature-card,
.use-case-card,
.diff-card {
height: 100%;
padding: 1.8rem;
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover,
.use-case-card:hover,
.diff-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
.icon-badge {
width: 3rem;
height: 3rem;
border-radius: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(13, 110, 253, 0.10);
color: var(--rx-primary);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.feature-card h3,
.diff-card h3 {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--rx-dark);
margin-bottom: 0.85rem;
}
.feature-card p,
.use-case-card p,
.diff-card p {
color: var(--rx-muted);
line-height: 1.7;
margin-bottom: 0;
}
.use-case-card {
display: flex;
align-items: center;
gap: 1rem;
min-height: 110px;
}
.use-case-bullet {
flex: 0 0 2.75rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.95rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.14), rgba(99, 102, 241, 0.12));
color: var(--rx-primary);
font-weight: 800;
}
.cta-box {
padding: 3rem;
border-radius: 2rem;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #fff;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}
.cta-box h2 {
color: #fff;
margin-bottom: 1rem;
}
.cta-box p {
color: rgba(255, 255, 255, 0.78);
font-size: 1.06rem;
line-height: 1.8;
margin-bottom: 0;
}
.cta-box .btn-light {
padding: 0.95rem 1.35rem;
border-radius: 0.95rem;
font-weight: 700;
}
footer {
padding: 2.2rem 0 3rem;
color: var(--rx-muted);
font-size: 0.95rem;
}
.gr-ci-blue {
background: linear-gradient(to right, #0f172a, #0f172a, #2196F3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
@media (max-width: 991.98px) {
.hero {
padding-top: 7rem;
}
.hero-panel {
margin-top: 2rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#top"><img src="assets/img/logo-website-blue.png"
style="max-width: 250px; padding:10px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
aria-controls="mainNav" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="#problem">Problem</a></li>
<li class="nav-item"><a class="nav-link" href="#solution">Lösung</a></li>
<li class="nav-item"><a class="nav-link" href="#benefits">Nutzen</a></li>
<li class="nav-item"><a class="nav-link" href="#usecases">Einsatzfelder</a></li>
<li class="nav-item"><a class="nav-link" href="#core">Arbeitsweise</a></li>
<li class="nav-item"><a class="nav-link" href="#compliance">DSGVO</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.mitho-media.de/impressum/" target="_blank">Impressum</a>
</li>
<li class="nav-item ms-lg-2"><a class="btn btn-primary" href="#cta">Demo anfragen</a></li>
</ul>
</div>
</div>
</nav>
<main id="top">
<section class="hero">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<div class="hero-badge mb-4">Steuerbare KI für produktive Wissensarbeit</div>
<h1 class="mb-4 gr-ci-blue">Aus Unternehmenswissen werden verlässliche KI-Antworten.</h1>
<p class="lead mb-4">
Das RetrieX RAG-System macht Dokumente, Regeln und Produktwissen in einer steuerbaren
KI-Oberfläche nutzbar –
für schnellere Entscheidungen, bessere Beratung und produktive Wissensarbeit.
</p>
<div class="d-flex flex-wrap gap-3">
<a href="#cta" class="btn btn-primary btn-lg">Demo anfragen</a>
<a href="#solution" class="btn btn-outline-dark btn-lg">Mehr erfahren</a>
</div>
<div class="glass-card trust-bar mt-4">
<div class="row text-center g-3">
<div class="col-md-4">
<div class="trust-item">Wissensbasiert</div>
</div>
<div class="col-md-4">
<div class="trust-item">Steuerbar</div>
</div>
<div class="col-md-4">
<div class="trust-item">Produktiv einsetzbar</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="hero-panel">
<div class="mb-4">
<div class="section-kicker">Plattform-Mehrwert</div>
<h2 class="mb-3" style="font-weight: 800; letter-spacing: -0.04em; color: var(--rx-dark);">
Wissen, Steuerung und Nutzbarkeit in einem KI-RAG-System</h2>
<p class="mb-0" style="color: var(--rx-muted); line-height: 1.8;">
Statt isolierter Chat-Experimente entsteht mit RetrieX eine kontrollierbare
Wissensschicht,
die Inhalte strukturiert verfügbar macht und Antworten auf belastbare Grundlagen stellt.
</p>
</div>
<div class="row g-3">
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Wissensbasis</div>
<div class="value">Dokumente, Regeln, Produktwissen</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Steuerung</div>
<div class="value">Governance, Modelle, Konfigurationen</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Nutzen</div>
<div class="value">Schnellere Entscheidungen und Beratung</div>
</div>
</div>
<div class="col-sm-6">
<div class="mini-stat">
<div class="label">Einsatz</div>
<div class="value">Produktiv im Unternehmenskontext</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-center section hero" style="background: #f5f8fa;">
<h2 class="gr-ci-blue">Unsere KI + Ihre Server = DSGVO-konform*</h2>
<div class="text-secondary"><small>* Bei DSGVO-konformem Betrieb durch Sie und Ihren Provider ist auch die Verarbeitung sensibler Daten (Kunden, Bestllungen etc.) möglich. Gerne beraten wir Sie zur passenden Infrastruktur.</small></div>
<img src="assets/img/banner-dsgvo.png" style="max-width:70%">
</section>
<section class="section" id="problem">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-9 text-center">
<div class="section-kicker">Problem</div>
<h2 class="gr-ci-blue">Wissen ist vorhanden – aber nicht wirksam organisiert.</h2>
<p class="section-text mx-auto">
Richtlinien, PDFs, Produktinformationen und Fachwissen liegen verteilt in Systemen und
Dokumenten.
Teams suchen zu lange, Antworten bleiben uneinheitlich und KI bleibt ohne saubere Wissensbasis
unscharf.
</p>
</div>
</div>
</div>
</section>
<section class="section" id="solution">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-6">
<div class="section-kicker">Lösung</div>
<h2 class="gr-ci-blue">RetrieX macht daraus ein nutzbares KI-System.</h2>
<p class="section-text">
Statt isolierter Chat-Experimente entsteht eine kontrollierbare Wissensschicht mit Retrieval,
Modellsteuerung und administrativer Governance.
</p>
</div>
<div class="col-lg-6">
<div class="diff-card">
<div class="icon-badge">✓</div>
<h3>Von verstreutem Wissen zu nutzbaren Antworten</h3>
<p>
RetrieX verbindet Wissenszugriff, Antwortlogik und Steuerung zu einer Plattform,
die nicht nur Inhalte findet, sondern sie für echte Arbeitsprozesse verfügbar macht.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="benefits">
<div class="container">
<div class="row mb-4">
<div class="col-lg-8">
<div class="section-kicker">Nutzen</div>
<h2 class="gr-ci-blue">Mehr Wirkung für Management, Fachbereiche und Betrieb.</h2>
</div>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">M</div>
<h3>Für Management</h3>
<p>
Bessere Nutzbarkeit von Unternehmenswissen und klarere Steuerbarkeit von KI.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">F</div>
<h3>Für Fachbereiche</h3>
<p>
Schneller Zugriff auf relevantes Wissen in natürlicher Sprache.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">O</div>
<h3>Für Betrieb und Organisation</h3>
<p>
Versionierbare Inhalte, konfigurierbare Modelle und ein strukturierter Admin-Rahmen.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="usecases">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-9 text-center">
<div class="section-kicker">Differenzierung / Einsatzfelder</div>
<h2 class="gr-ci-blue">Warum RetrieX nicht nur ein Chat ist</h2>
<p class="section-text mx-auto">
Weil nicht das Modell im Mittelpunkt steht, sondern die Qualität der Wissensbasis,
die Steuerung der Antworten und die betriebliche Nutzbarkeit.
</p>
</div>
<div class="container">
<div class="row g-4">
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">01</div>
<p>Internes Wissensportal</p>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">02</div>
<p>Kunden- und Serviceberatung</p>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="use-case-card">
<div class="use-case-bullet">03</div>
<p>Vertriebsunterstützung</p>
</div>
</div>
<div class="col-md-6 col-xl-6">
<div class="use-case-card">
<div class="use-case-bullet">04</div>
<p>Produktspezifische Beratung</p>
</div>
</div>
<div class="col-md-6 col-xl-6">
<div class="use-case-card">
<div class="use-case-bullet">05</div>
<p>Dokumentengestützte KI-Assistenz</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="core">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-xl-9 text-center">
<div class="section-kicker">Systemüberblick</div>
<h2 class="gr-ci-blue">Wie RetrieX im Kern arbeitet</h2>
<p class="section-text mx-auto">
RetrieX ist ein dokumentenbasiertes RAG-Assistenzsystem mit Retrieval-Augmented Generation.
Antworten entstehen nicht frei, sondern auf Basis aktivierter Wissensdokumente, strukturierter
Suchlogik und – bei Produktanfragen – optionaler Live-Shopdaten.
</p>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-lg-6 col-xl-3">
<div class="feature-card">
<div class="icon-badge">1</div>
<h3>Vorhandenes Wissen endlich nutzbar machen</h3>
<p>
RetrieX nutzt bestehende Unternehmensdokumente wie PDFs, Richtlinien, Produktunterlagen und
interne
Wissensquellen, damit wertvolles Know-how nicht in Dateien und Ordnerstrukturen verborgen
bleibt,
sondern im Arbeitsalltag sofort verfügbar wird.
</p>
</div>
</div>
<div class="col-lg-6 col-xl-3">
<div class="feature-card">
<div class="icon-badge">2</div>
<h3>Klare Prozesse statt KI-Zufall</h3>
<p>
Die Wissensaufbereitung folgt einer klaren, reproduzierbaren Logik. So entsteht keine
Blackbox, sondern
ein belastbares System, das Informationen strukturiert verarbeitet und auf einer
verlässlichen Basis
bereitstellt.
</p>
</div>
</div>
<div class="col-lg-6 col-xl-3">
<div class="feature-card">
<div class="icon-badge">3</div>
<h3>Relevante Antworten statt Datenflut</h3>
<p>
RetrieX wählt gezielt die Inhalte aus, die zur jeweiligen Frage wirklich passen. Das
verkürzt
Suchzeiten, reduziert Unsicherheit und unterstützt Mitarbeitende dabei, schneller zu
belastbaren
Ergebnissen zu kommen.
</p>
</div>
</div>
<div class="col-lg-6 col-xl-3">
<div class="feature-card">
<div class="icon-badge">4</div>
<h3>Steuerbar, nachvollziehbar, produktiv</h3>
<p>
Unternehmen behalten die Kontrolle darüber, welche Wissensgrundlagen, Regeln und Daten in
Antworten
einfließen. So wird KI nicht zum Risiko, sondern zu einem steuerbaren Werkzeug für Beratung,
Wissensarbeit und operative Prozesse.
</p>
</div>
</div>
</div>
<div class="row g-4 align-items-stretch">
<div class="col-lg-12">
<div class="diff-card h-100">
<div class="section-kicker mb-2">Ablauf</div>
<h3 style="font-size: 1.4rem;">Vom Dokument zur gestreamten Antwort</h3>
<p class="mb-4">
Der Systemfluss ist klar strukturiert und reproduzierbar aufgebaut:
</p>
<div class="row mb-4">
<div class="col-lg-8">
<div class="section-kicker">Nutzen</div>
<h2 class="gr-ci-blue">Mehr Wirkung für Management, Fachbereiche und Betrieb.</h2>
</div>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">M</div>
<h3>Für Management</h3>
<p>
Bessere Nutzbarkeit von Unternehmenswissen und klarere Steuerbarkeit von KI.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">F</div>
<h3>Für Fachbereiche</h3>
<p>
Schneller Zugriff auf relevantes Wissen in natürlicher Sprache.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">O</div>
<h3>Für Betrieb und Organisation</h3>
<p>
Versionierbare Inhalte, konfigurierbare Modelle und ein strukturierter
Admin-Rahmen.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="compliance">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-xl-9 text-center">
<div class="section-kicker">Datenschutz & Hosting</div>
<h2 class="gr-ci-blue">Für datensensible Unternehmensanwendungen nach DSGVO</h2>
<p class="section-text mx-auto">
RetrieX ist für einen datenschutzorientierten Betrieb ausgelegt: mit eigener KI-Infrastruktur,
kontrollierbarer Systemarchitektur und der Möglichkeit, Daten in einer deutschen Serverumgebung
zu verarbeiten.
So entsteht eine belastbare Grundlage für den Einsatz auch in sensiblen Unternehmenskontexten.
</p>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">DS</div>
<h3>Eigene KI statt öffentliche Blackbox</h3>
<p>
RetrieX kann mit eigener LLM-Infrastruktur betrieben werden. Dadurch bleiben Datenflüsse,
Modellzugriff und technische Kontrolle in einem klar definierten Unternehmensrahmen.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">DE</div>
<h3>Serverbetrieb in Deutschland möglich</h3>
<p>
Das System ist so aufsetzbar, dass Verarbeitung und Hosting in einer deutschen
Serverumgebung
erfolgen können. Das schafft zusätzliche Sicherheit für Unternehmen mit hohen
Datenschutzanforderungen.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="feature-card">
<div class="icon-badge">✓</div>
<h3>Geeignet für sensible Datenprozesse</h3>
<p>
Bei passender technischer und organisatorischer Umsetzung kann RetrieX auch in
datensensiblen
Szenarien eingesetzt werden – etwa dort, wo Kundeninformationen, internes Wissen oder
operative
Unternehmensdaten sicher verarbeitet werden müssen.
</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="12">
<div class="diff-card text-center">
<h3 style="font-size: 1.35rem;">Datenschutz nicht als Zusatz, sondern als Betriebsprinzip</h3>
<p>
Für mittelständische Unternehmen ist entscheidend, dass KI nicht nur leistungsfähig, sondern
auch kontrollierbar einsetzbar ist.
RetrieX unterstützt genau dieses Ziel: mit eigener Modellanbindung, klarer Systemsteuerung
und einer Infrastruktur,
die auf datenschutzorientierten Betrieb ausgelegt ist.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="section pt-0" id="cta">
<div class="container">
<div class="cta-box">
<div class="row align-items-center g-4">
<div class="col-lg-8">
<div class="section-kicker text-white-50">Nächster Schritt</div>
<h2>Unternehmenswissen endlich produktiv nutzbar machen.</h2>
<p>
Zeigen Sie, wie Wissen, Regeln und Produktinformationen in einer steuerbaren KI-Oberfläche
zusammengeführt werden können – klar, nachvollziehbar und einsatzbereit.
</p>
</div>
<div class="col-lg-4 text-lg-end">
<a href="mailto:anfrage@mitho-media.de?subject=Anfrage RetrieX" class="btn btn-light btn-lg">Demo
anfragen</a>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
<div><strong>RetrieX</strong> – Wissensbasierte, steuerbare KI für mittelständische Unternehmen.</div>
<div>© 2026 RetrieX | powered by <a href="https://www.mitho-media.de/ki-loesungen-im-ecommerce/"
target="_blank">mitho®</a> | Certified E-Commerce-Experts
</div>
</div>
</footer>
<script src="/assets/retriex/bundle.js"></script>
</body>
</html>