feat: update index.html template for improved layout and accessibility

This commit is contained in:
2025-05-02 09:04:48 +01:00
parent 5e97381c8f
commit 1f3e60efde

View File

@@ -39,6 +39,35 @@
animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards; animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
} }
/* Marker-Animation für den Text */
@keyframes markerAnimation {
0% { width: 0; opacity: 0; }
20% { width: 100%; opacity: 0.7; }
80% { width: 100%; opacity: 0.7; }
100% { width: 0; opacity: 0; }
}
.marker-animation {
position: relative;
}
.marker-animation::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 6px;
width: 0;
background: linear-gradient(to right, rgba(109, 40, 217, 0.3), rgba(139, 92, 246, 0.6), rgba(109, 40, 217, 0.3));
border-radius: 3px;
opacity: 0;
animation: markerAnimation 2.5s ease-in-out forwards;
}
.marker-animation-delay::after {
animation-delay: 1.5s;
}
.delay-1 { animation-delay: 0.2s; } .delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; } .delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; } .delay-3 { animation-delay: 0.6s; }
@@ -131,16 +160,9 @@
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h1 class="hero-heading mb-8 text-gray-900 dark:text-white"> <h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
<div class="overflow-hidden"> <div class="overflow-hidden flex justify-center gap-6">
<span class="gradient-text inline-block text-reveal">Wissen</span> <span class="relative inline-block text-reveal marker-animation">Wissen.</span>
</div> <span class="relative inline-block text-reveal delay-1 marker-animation marker-animation-delay">Vernetzen.</span>
<div class="overflow-hidden mt-2">
<span class="inline-block text-reveal delay-1">neu</span>
</div>
<div class="mt-2 relative overflow-hidden">
<span class="relative inline-block text-reveal delay-2">vernetzen
<div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
</span>
</div> </div>
</h1> </h1>
<div class="overflow-hidden"> <div class="overflow-hidden">