v2
This commit is contained in:
Flatlogic Bot
parent
bfa16bead3
commit
bc953966cb
@ -581,68 +581,133 @@ body {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.hero-visual-stack {
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 400px;
|
||||
transform-style: preserve-3d;
|
||||
animation: stack-sway 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes stack-sway {
|
||||
from { transform: rotateX(10deg) rotateY(-15deg); }
|
||||
to { transform: rotateX(10deg) rotateY(15deg); }
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: var(--space-3);
|
||||
background: rgba(26, 32, 53, 0.7);
|
||||
border: 1px solid rgba(0, 245, 255, 0.2);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
|
||||
height: 600px;
|
||||
animation: fade-in-up 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hero-visual {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hero-visual {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
font-size: 24px;
|
||||
color: #00F5FF;
|
||||
animation: bounce-arrow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0,245,255,0.2);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||||
animation: float-gentle 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.flow-card.card-2 {
|
||||
animation-delay: -2s;
|
||||
}
|
||||
.flow-card.card-3 {
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
will-change: transform;
|
||||
animation: card-float 8s ease-in-out infinite;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 245, 255, 0.1);
|
||||
color: #00F5FF;
|
||||
}
|
||||
.card-text {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-gray);
|
||||
line-height: var(--leading-normal);
|
||||
margin: 0;
|
||||
}
|
||||
.card-text strong {
|
||||
color: var(--text-white);
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
.card-2 {
|
||||
animation-delay: -2.66s;
|
||||
}
|
||||
.card-3 {
|
||||
animation-delay: -5.33s;
|
||||
.card-content .progress-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@keyframes card-float {
|
||||
0%, 100% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(0px); }
|
||||
50% { transform: translateY(var(--y-pos)) translateZ(var(--z-pos)) rotate(var(--rot)) translateY(-20px); }
|
||||
.card-content .progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-1 { --y-pos: 0px; --z-pos: 0px; --rot: -5deg; }
|
||||
.card-2 { --y-pos: 120px; --z-pos: -40px; --rot: 3deg; }
|
||||
.card-3 { --y-pos: 240px; --z-pos: -80px; --rot: -2deg; }
|
||||
.card-content .progress-fill {
|
||||
width: 30%; /* Example progress */
|
||||
height: 100%;
|
||||
background: var(--cyan);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card-content p {
|
||||
color: var(--text-gray);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce-arrow {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(10px); }
|
||||
}
|
||||
|
||||
@keyframes float-gentle {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
|
||||
/* Scroll Indicator */
|
||||
|
||||
42
index.php
42
index.php
@ -161,18 +161,40 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<div class="hero-visual-stack">
|
||||
<div class="hero-card card-1">
|
||||
<span class="card-icon">🎯</span>
|
||||
<p class="card-text"><strong>Zielgerichtete Strategie</strong><br>Personalisierte KI-Roadmap</p>
|
||||
<div class="hero-visual">
|
||||
<div class="card-stack">
|
||||
<div class="flow-card card-1">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📋</span>
|
||||
<span class="card-title">Fragebogen</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="progress-label">25 Fragen</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-arrow">↓</div>
|
||||
<div class="flow-card card-2">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">🤖</span>
|
||||
<span class="card-title">AI Processing</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Ihre Daten werden verarbeitet...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-arrow">↓</div>
|
||||
<div class="flow-card card-3">
|
||||
<div class="card-header">
|
||||
<span class="card-icon">📄</span>
|
||||
<span class="card-title">Report</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Ihr persönlicher Report ist fertig.</p>
|
||||
</div>
|
||||
<div class="hero-card card-2">
|
||||
<span class="card-icon">⚙️</span>
|
||||
<p class="card-text"><strong>Effiziente Prozesse</strong><br>Automatisierungspotenziale aufdecken</p>
|
||||
</div>
|
||||
<div class="hero-card card-3">
|
||||
<span class="card-icon">📈</span>
|
||||
<p class="card-text"><strong>Nachhaltiges Wachstum</strong><br>Wettbewerbsvorteile sichern</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user