Merge branch 'main' into feature/8-Create-hero-component

package.json

@@ -14,6 +14,7 @@
     "@astrojs/check": "^0.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"
   },

src/assets/icons/IconChevronRight.astro

@@ -0,0 +1,12 @@
+---
+
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill="none"
+    stroke="#54F400"
+    stroke-linecap="round"
+    stroke-width="3"
+    d="m7.6 2.52 8.34 8.34a1.6 1.6 0 0 1 0 2.24L7.6 21.44"></path>
+</svg>

src/components/NavigationBar.astro

@@ -66,6 +66,7 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
   var navBar_container = document.getElementById("navbar-container");
   var hero_text = document.getElementById("hero-text");
   var footer = document.getElementById("footer");
+  var menuItems = document.querySelectorAll("#navbar li");
 
   if (navBar && openButton && closeButton) {
     openButton.addEventListener("click", () => {
@@ -92,5 +93,12 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
       hero_text?.classList.add("absolute");
       footer?.classList.remove("hidden");
     });
+    menuItems.forEach((item) =>
+      item.addEventListener("click", () => {
+        if (!navBar?.classList.contains("hidden")) {
+          navBar?.classList.add("hidden");
+        }
+      }),
+    );
   }
 </script>

src/components/Section.astro

@@ -20,9 +20,13 @@ const { backgroundColor, backgroundImage, eyebrow, heading, links } =
   class={`bg-${backgroundImage ? `[url('${backgroundImage}')]` : backgroundColor} bg-cover p-6 sm:p-12`}
 >
   <div
-    class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-green"}`}
+    class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-white"}`}
   >
-    <div class="uppercase font-bold text-sm tracking-[3px]">{eyebrow}</div>
+    <div
+      class=`uppercase font-bold text-sm ${backgroundColor === "green" ? "text-blue" : "text-green"} tracking-[3px]`
+    >
+      {eyebrow}
+    </div>
     <div class="text-3xl sm:text-5xl text-center">{heading}</div>
     <slot />
     {

src/components/VideoPlayer.astro

@@ -0,0 +1,37 @@
+---
+import IconChevronRight from "@icons/IconChevronRight.astro";
+---
+
+<iframe class="w-full" src="https://www.youtube.com/embed/LyVeknDDQCw"></iframe>
+<div>
+  <div class="flex gap-3 items-center mb-3">
+    <span>More videos</span>
+    <div class="w-3 h-3">
+      <IconChevronRight />
+    </div>
+  </div>
+  <div class="relative">
+    <div class="flex gap-3 overflow-x-scroll relative scrollbar-hide">
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/Fxb9bgPpnys"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/x2fNlaTvd60"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/wFAazFeFgOY"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/QNXl7RAOevI"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/i4Ap6hCtyug"></iframe>
+      <div class="min-w-[40%] min-h-full"></div>
+    </div>
+    <div
+      class="absolute bg-gradient-to-r from-transparent to-blue h-full ml-auto top-0 right-0 w-2/12 sm:w-1/5"
+    >
+    </div>
+  </div>
+</div>

src/pages/index.astro

@@ -2,13 +2,15 @@
 import Layout from "@layouts/Layout.astro";
 import "@styles/global.css";
 import Section from "../components/Section.astro";
+import VideoPlayer from "../components/VideoPlayer.astro";
 ---
 
 <Layout title="Welcome to Whyuluvfootball">
   <Section
     backgroundColor="green"
     eyebrow="Our goal"
     heading="Our goal is to donate 10 million balls to children around the world."
+    id="our-goal"
     links={[
       { href: "https://gofund.me/96424540", text: "GoFundMe" },
       {
@@ -17,4 +19,11 @@ import Section from "../components/Section.astro";
       },
     ]}
   />
+  <Section
+    backgroundColor="blue"
+    eyebrow="Videos"
+    heading="I love football because..."
+  >
+    <VideoPlayer />
+  </Section>
 </Layout>

src/styles/global.css

@@ -63,4 +63,8 @@
       @apply text-[36px] leading-[48px];
     }
   }
+
+  iframe {
+    @apply aspect-video;
+  }
 }

tailwind.config.mjs

@@ -22,7 +22,9 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('tailwind-scrollbar-hide')
+  ],
   safelist: [
     'bg-blue',
     'bg-green',