new website landingpage
This commit is contained in:
team 1
BIN
public/assets/img/logo-website-dark.png
Normal file
BIN
public/assets/img/logo-website-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
public/assets/img/logo-website.png
Normal file
BIN
public/assets/img/logo-website.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
public/assets/img/logo-white.png
Normal file
BIN
public/assets/img/logo-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
544
public/landingpage.html
Normal file
544
public/landingpage.html
Normal file
@@ -0,0 +1,544 @@
|
||||
<!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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--rx-primary: #0d6efd;
|
||||
--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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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.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="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">Aus Unternehmenswissen werden verlässliche Antworten.</h1>
|
||||
<p class="lead mb-4">
|
||||
RetrieX 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>
|
||||
<h3 class="mb-3" style="font-weight: 800; letter-spacing: -0.04em; color: var(--rx-dark);">Wissen, Steuerung und Nutzbarkeit in einem System</h3>
|
||||
<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="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>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 pt-0" 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>RetrieX macht daraus ein nutzbares 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>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 mb-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="section-kicker">Einsatzfelder</div>
|
||||
<h2>Wo RetrieX im Alltag Mehrwert stiftet.</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 Assistenz</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="difference">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-9 text-center">
|
||||
<div class="section-kicker">Differenzierung</div>
|
||||
<h2>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>
|
||||
</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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user