From 66f9e071112b970c18bcb0b5a55c275d814f775f Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Fri, 23 Aug 2024 09:11:41 +0200
Subject: [PATCH] feature: styling

---
 src/components/BannerText/bannerText.module.css | 16 ++++++++++++++++
 src/components/HomeBanner/HomeBanner.tsx        |  2 +-
 src/components/Menu/Menu.tsx                    |  4 ++--
 src/components/Menu/styles.module.css           |  2 +-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/BannerText/bannerText.module.css b/src/components/BannerText/bannerText.module.css
index 9535f09..6cf278c 100644
--- a/src/components/BannerText/bannerText.module.css
+++ b/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) {
diff --git a/src/components/HomeBanner/HomeBanner.tsx b/src/components/HomeBanner/HomeBanner.tsx
index 81c3a3f..94872f8 100644
--- a/src/components/HomeBanner/HomeBanner.tsx
+++ b/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])
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 28e9f24..3535d98 100644
--- a/src/components/Menu/Menu.tsx
+++ b/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
diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.css
index 7818452..ed6fe58 100644
--- a/src/components/Menu/styles.module.css
+++ b/src/components/Menu/styles.module.css
@@ -14,7 +14,7 @@
 
 .itemsLeft {
   display: flex;
-  gap: 20px;
+  gap: 30px;
 }
 
 .menuLink {