Vorschau: Features-Section nach oben mit Gold-Glasmorphism, Problem-Section auf hellem Hintergrund
- Features (Was der Monitor leistet) wandert direkt unter Hero, bekommt section-dark - Problem (Warum manuelle OSINT-Auswertung nicht skaliert) rutscht eine Position nach unten, bekommt section-base - Feature-Cards im dunklen Kontext: Glasmorphism mit dezent transparentem Hintergrund, permanente Gold-Border, Gold-getoente Icon-Box, goldfarbene Icons (CSS-Filter), Hover mit kraeftigerer Gold-Border und Lift - Neuer Divider divider-gradient-base-to-alt fuer den Uebergang Problem -> Workflow Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
@@ -139,6 +139,7 @@ a { color:inherit; text-decoration:none; }
|
||||
.divider-diagonal { background:var(--base); }
|
||||
.divider-diagonal-dark { background:var(--base); }
|
||||
.divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
|
||||
.divider-gradient-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
|
||||
.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
|
||||
.divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
|
||||
|
||||
@@ -172,12 +173,20 @@ a { color:inherit; text-decoration:none; }
|
||||
.workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
|
||||
|
||||
/* ==================== FEATURES ==================== */
|
||||
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s; }
|
||||
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
|
||||
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
|
||||
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; }
|
||||
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
|
||||
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
|
||||
.feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
|
||||
|
||||
/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
|
||||
.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
|
||||
.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
|
||||
.section-dark .feature-card h3 { color:var(--white); }
|
||||
.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
|
||||
.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
|
||||
.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
|
||||
|
||||
/* ==================== DEMOS SECTION ==================== */
|
||||
#demos { padding-top:48px; }
|
||||
|
||||
@@ -193,6 +202,8 @@ a { color:inherit; text-decoration:none; }
|
||||
.feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
|
||||
.feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
|
||||
.feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
|
||||
.section-dark .feature-statement-text { color:var(--white); }
|
||||
.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
|
||||
@media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
|
||||
|
||||
/* ==================== 3D CAROUSEL ==================== */
|
||||
|
||||
@@ -174,28 +174,82 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Problem Statement (dark) -->
|
||||
<section class="section section-dark" id="problem">
|
||||
<!-- Features -->
|
||||
<section class="section section-dark" id="features">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Was der Monitor leistet</h2>
|
||||
<!-- Highlight: Faktenprüfung -->
|
||||
<div class="feature-statement">
|
||||
<p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
|
||||
<p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Echtzeit-Monitoring</h3>
|
||||
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Quellenanalyse</h3>
|
||||
<p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Geografische Verortung</h3>
|
||||
<p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Mehrsprachige Auswertung</h3>
|
||||
<p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Strukturierte Lagebilder</h3>
|
||||
<p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Features -> Problem -->
|
||||
<div class="divider divider-gradient-dark-to-base"></div>
|
||||
|
||||
<!-- Problem Statement -->
|
||||
<section class="section section-base" id="problem">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
|
||||
<p class="section-subtitle section-subtitle-light">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
|
||||
<p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
|
||||
<div class="grid-3">
|
||||
<div class="problem-card problem-card-dark">
|
||||
<div class="problem-icon problem-icon-dark">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Quellenvielfalt</h3>
|
||||
<p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
|
||||
</div>
|
||||
<div class="problem-card problem-card-dark">
|
||||
<div class="problem-icon problem-icon-dark">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Zeitdruck</h3>
|
||||
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
|
||||
</div>
|
||||
<div class="problem-card problem-card-dark">
|
||||
<div class="problem-icon problem-icon-dark">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Informationsflut</h3>
|
||||
@@ -206,7 +260,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Problem -> Workflow -->
|
||||
<div class="divider divider-gradient-dark-to-alt"></div>
|
||||
<div class="divider divider-gradient-base-to-alt"></div>
|
||||
|
||||
<!-- Solution / Workflow -->
|
||||
<section class="section section-alt" id="solution">
|
||||
@@ -311,63 +365,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Gradient: Solution -> Features -->
|
||||
<div class="divider divider-gradient-alt-to-base"></div>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="section section-base" id="features">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Was der Monitor leistet</h2>
|
||||
<!-- Highlight: Faktenprüfung -->
|
||||
<div class="feature-statement">
|
||||
<p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
|
||||
<p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Echtzeit-Monitoring</h3>
|
||||
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Quellenanalyse</h3>
|
||||
<p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Geografische Verortung</h3>
|
||||
<p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Mehrsprachige Auswertung</h3>
|
||||
<p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Strukturierte Lagebilder</h3>
|
||||
<p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section class="section section-base" id="contact">
|
||||
<div class="container cta-container">
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren