a

src/components/bytes/Welcome.astro

@@ -1,7 +1,9 @@
 ---
 import Background from '../../assets/speedline.svg';
+import BackgroundStatic from '../../assets/speedline-static.svg';
 import arrowDown from '../../assets/arrow-down-indicator.svg';
 import WelcomeTypewriter from '../bits/WelcomeTypewriter.astro';
+import BackgroundGradient from "../bits/BackgroundGradient.astro";
 
 export interface Props {
 	nextSlideAnchor: string;
@@ -11,22 +13,24 @@ const { nextSlideAnchor } = Astro.props;
 //const backgroundImage = `url(${background.src})`;
 ---
 
-<header id="welcome" role="main">
-	<Background />
-	<div id="welcome-text">
+<header id="top" role="main">
+    <Background class="motion" />
+    <BackgroundStatic class="static" />
+	<BackgroundGradient />
+	<div class="welcome-text">
 		<h1>Hallöchen!</h1>
 		<p class="subtitle">Ich bin Daniel.</p>
 		<p class="subtitle"></p>
 		<WelcomeTypewriter />
 	</div>
-	<div id="contacts">
+	<div class="contacts">
 		
 	</div>
-	<a href={"#" + (nextSlideAnchor ? "slide-" + nextSlideAnchor : "")} id="arrow-down"><img src={arrowDown.src} alt="Runterscrollen" /></a>
+	<a href={"#" + (nextSlideAnchor ? nextSlideAnchor : "")} class="arrow-down"><img src={arrowDown.src} alt="Runterscrollen" /></a>
 </header>
 
 <style>
-	#welcome {
+	header {
 		background: #000;
 		background-image: var(--backgroundImage);
         content-visibility: auto;
@@ -48,7 +52,7 @@ const { nextSlideAnchor } = Astro.props;
 		z-index: -10;
 	}
 
-	#welcome-text {
+	.welcome-text {
 		background-image: linear-gradient(
 			135deg,
 			rgb(235, 190, 244) 0%,
@@ -63,7 +67,7 @@ const { nextSlideAnchor } = Astro.props;
 		text-shadow: 0 0 2em rgba(255, 255, 255, 0.4);
 	}
 
-	#welcome-text h1 {
+	.welcome-text h1 {
 		font-size: min(19dvw, 3em);
 		font-weight: 600;
 		text-align: center;
@@ -77,7 +81,7 @@ const { nextSlideAnchor } = Astro.props;
 		margin: 0em;
 	}
 
-	#welcome-bg {
+	.welcome-bg {
 		position: absolute; 
 		top: 0; 
 		left: 0; 
@@ -87,7 +91,7 @@ const { nextSlideAnchor } = Astro.props;
 		pointer-events: none;
 	}
 
-	#arrow-down {
+	.arrow-down {
 		color: #fff;
 		opacity: 0.3;
 		font-size: 5em;
@@ -103,7 +107,7 @@ const { nextSlideAnchor } = Astro.props;
 		padding: 0.3em 0.5em;
 	}
 
-	#arrow-down:hover {
+	.arrow-down:hover {
 		animation: arrow-bounce-hover 0.3s ease-out forwards;
 	}
 
@@ -137,12 +141,21 @@ const { nextSlideAnchor } = Astro.props;
 		}
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		svg .ld.ld-speed-dash {
-			animation: none !important;
-		}
+	.motion {
+        display: block !important;
+    }
+    .static {
+		display: none !important;
+	}
 
-		#arrow-down {
+	@media (prefers-reduced-motion: reduce) {
+		.motion {
+			display: none !important;
+		}
+        .static {
+            display: block !important;
+        }
+		.arrow-down {
 			animation: none;
 		}
 	}