feature: styling

src/components/BannerText/bannerText.module.css

@@ -4,6 +4,8 @@
   position: relative;
   bottom: -15px;
   left: 10px;
+  animation: slidein 0.3s backwards;
+  animation-delay: 0.5s;
 }
 
 .container {
@@ -16,11 +18,25 @@
   font-size: 120px;
   line-height: 105px;
   padding: 20px 0;
+  animation: slidein 0.2s backwards;
+  animation-delay: 1s;
 }
 
 .berlin {
   position: relative;
   left: 10px;
+  animation: slidein 0.3s backwards;
+  animation-delay: 1.5s;
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(-150%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
 }
 
 @media screen and (max-width: 420px) {

src/components/HomeBanner/HomeBanner.tsx

@@ -69,7 +69,7 @@ export const HomeBanner = forwardRef<HomeBannerHandle, HomeBannerProps>(
           context.shadowBlur = 10
           context.shadowColor = 'white'
 
-          drawStar(context)
+          setTimeout(() => drawStar(context), i * 100);
         }
       }
     }, [drawStar, stars])

src/components/Menu/Menu.tsx

@@ -22,10 +22,10 @@ export const Menu = (props: MenuProps) => {
           Home
         </a>
         <a className={styles.menuLink} href={''}>
-          Gemeinschaft
+          Gemeinschaft finden
         </a>
         <a className={styles.menuLink} href={''}>
-          Sakramenten
+          Glauben leben
         </a>
         <a className={styles.menuLink} href={''}>
           Kontakt

src/components/Menu/styles.module.css

@@ -14,7 +14,7 @@
 
 .itemsLeft {
   display: flex;
-  gap: 20px;
+  gap: 30px;
 }
 
 .menuLink {