#8: Hero component

1xINTERNET · Jun 19, 2024 · 1af6541 · 1af6541
1 parent 24dfe83
commit 1af6541
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 2 deletions.
diff --git a/public/png/localHeroImage.png b/public/png/localHeroImage.png
diff --git a/src/assets/images/HeroImage.astro b/src/assets/images/HeroImage.astro
@@ -0,0 +1,6 @@
+---
+import { Image } from "astro:assets";
+import localHeroImage from "../../../public/png/localHeroImage.png";
+---
+
+<Image class:list={"w-full"} src={localHeroImage} alt="Hero Image" />
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -0,0 +1,24 @@
+---
+import HeroImage from "../assets/images/HeroImage.astro";
+import NavigationBar from "@components/NavigationBar.astro";
+---
+
+<div class="relative w-full h-auto overflow-hidden" id="hero">
+  <div class="absolute left-0 right-0" id="navbar-container">
+    <NavigationBar />
+  </div>
+  <div
+    class="w-full max-sm:w-[200%] h-auto max-sm:right-0 max-sm:top-[50%] max-sm:-ml-[100%]"
+  >
+    <HeroImage />
+  </div>
+  <div
+    class="absolute text-[white] z-10 left-[10%] max-sm:left-[5%] bottom-[20%] max-sm:bottom-[5%] w-3/4 max-sm:w-5/6"
+    id="hero-text"
+  >
+    <h1>
+      About <span class="bg-blue">300 million</span> kids worldwide don't have a
+      football.
+    </h1>
+  </div>
+</div>
diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro
@@ -62,15 +62,35 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
   var navBar = document.getElementById("navbar");
   var openButton = document.getElementById("open-mobile-menu");
   var closeButton = document.getElementById("close-mobile-menu");
+  var hero = document.getElementById("hero");
+  var navBar_container = document.getElementById("navbar-container");
+  var hero_text = document.getElementById("hero-text");
+  var footer = document.getElementById("footer");
 
   if (navBar && openButton && closeButton) {
     openButton.addEventListener("click", () => {
       navBar?.classList.contains("hidden")
         ? navBar.classList.remove("hidden")
         : navBar?.classList.add("hidden");
+      hero?.classList.contains("relative")
+        ? hero.classList.remove("relative")
+        : hero?.classList.add("relative");
+      navBar_container?.classList.contains("absolute")
+        ? navBar_container.classList.remove("absolute", "left-0", "right-0")
+        : navBar_container?.classList.add("absolute", "left-0", "right-0");
+      hero_text?.classList.contains("absolute")
+        ? hero_text.classList.remove("absolute")
+        : hero_text?.classList.add("absolute");
+      footer?.classList.contains("hidden")
+        ? footer.classList.remove("hidden")
+        : footer?.classList.add("hidden");
     });
     closeButton.addEventListener("click", () => {
       navBar?.classList.add("hidden");
+      hero?.classList.add("relative");
+      navBar_container?.classList.add("absolute", "left-0", "right-0");
+      hero_text?.classList.add("absolute");
+      footer?.classList.remove("hidden");
     });
   }
 </script>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import Footer from "@components/Footer.astro";
-import NavigationBar from "@components/NavigationBar.astro";
+import Hero from "@components/Hero.astro";
 
 interface Props {
   title: string;
@@ -21,7 +21,7 @@ const { title } = Astro.props;
   </head>
   <body>
     <main>
-      <NavigationBar />
+      <Hero />
       <slot />
       <Footer />
     </main>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -57,4 +57,10 @@
   p {
     @apply text-[18px] leading-6;
   }
+
+  @media only screen and (max-width: 768px) {
+    h1 {
+      @apply text-[36px] leading-[48px];
+    }
+  }
 }