kenso war das

2026-02-03 23:27:25 +01:00
parent 6bf3c603d8
commit ef2faa21fd
73 changed files with 8416 additions and 257 deletions
--- a/herosection/src/index.css
+++ b/herosection/src/index.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+
+/* Hero Section – Hintergrund-Animation */
+@keyframes gradient-shift {
+  0%, 100% { opacity: 1; background-position: 0% 50%; }
+  50% { opacity: 0.95; background-position: 100% 50%; }
+}
+
+@keyframes grid-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-gradient-bg {
+  background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(245 245 245) 50%, rgb(250 250 250) 100%);
+  background-size: 200% 200%;
+  animation: gradient-shift 8s ease infinite;
+}
+
+.dark .animate-gradient-bg {
+  background: linear-gradient(135deg, rgb(23 23 23) 0%, rgb(38 38 38) 50%, rgb(23 23 23) 100%);
+  background-size: 200% 200%;
+}
+
+.animate-grid-pulse {
+  animation: grid-pulse 4s ease-in-out infinite;
+}
+
+.hero-content-in {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+.hero-content-in:nth-child(9) { animation-delay: 0.1s; opacity: 0; }
+.hero-content-in:nth-child(10) { animation-delay: 0.3s; opacity: 0; }
+.hero-content-in:nth-child(11) { animation-delay: 0.5s; opacity: 0; }
+
+.hero-submit-btn {
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
+}
+
+.hero-submit-btn:hover {
+  box-shadow: 0px -1px 0px 0px #FFFFFF50 inset, 0px 1px 0px 0px #FFFFFF50 inset, 0 0 20px rgba(255,255,255,0.2);
+}
+
+.dark .hero-submit-btn:hover {
+  box-shadow: 0px -1px 0px 0px #00000030 inset, 0px 1px 0px 0px #00000030 inset, 0 0 20px rgba(0,0,0,0.2);
+}
+
+.hero-submit-btn:active {
+  transform: scale(0.98);
+}
+
+/* Rand-Elemente: Scroll-Animation (Marquee) */
+@keyframes marquee-scroll {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+.hero-marquee-track {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  animation: marquee-scroll 25s linear infinite;
+}
+
+.hero-marquee-track:hover {
+  animation-play-state: paused;
+}
+
+.hero-marquee-container {
+  overflow: hidden;
+  display: flex;
+  position: relative;
+  width: 100%;
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+.dark .hero-marquee-container {
+  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+}
+
+/* Rand: Testimonial-Karten – Einblend-Animation (nur opacity, Rotation bleibt per inline) */
+@keyframes hero-edge-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.hero-edge-card {
+  animation: hero-edge-in 0.6s ease-out forwards;
+}
+
+.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
+.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
+.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
+.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
+.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
+.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }
+
+@media (max-width: 1023px) {
+  .hero-edge-card { opacity: 0.2 !important; }
+}
+
+/* Base */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+}