From 4c60eccd0c5af2f6a1d0806327b231d6b6db5c51 Mon Sep 17 00:00:00 2001
From: Alberto Ortega Garcia <a.garcia@1xinternet.de>
Date: Fri, 21 Jun 2024 13:10:45 +0200
Subject: [PATCH] #14: Update Navbar links & create 'how to help' and 'about
 us' sections

---
 src/components/AboutUs.astro       | 18 ++++++++++++++++++
 src/components/HowToHelp.astro     | 18 ++++++++++++++++++
 src/components/NavigationBar.astro |  8 +++-----
 src/pages/index.astro              | 14 ++++++++++++++
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AboutUs.astro
 create mode 100644 src/components/HowToHelp.astro

diff --git a/src/components/AboutUs.astro b/src/components/AboutUs.astro
new file mode 100644
index 0000000..885d8a9
--- /dev/null
+++ b/src/components/AboutUs.astro
@@ -0,0 +1,18 @@
+---
+
+---
+
+<div class="text-center">
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
+    reprehenderit. Iste quae molestias in, numquam reprehenderit ipsa aliquid
+    corporis assumenda vero ab necessitatibus inventore obcaecati commodi
+    placeat ipsum rem nesciunt!
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus
+    exercitationem eos dolorem fugiat deleniti atque vitae provident dolorum
+    libero perspiciatis. Adipisci fuga nostrum voluptatem nobis odio. Rerum
+    temporibus asperiores maxime.
+  </p>
+</div>
diff --git a/src/components/HowToHelp.astro b/src/components/HowToHelp.astro
new file mode 100644
index 0000000..885d8a9
--- /dev/null
+++ b/src/components/HowToHelp.astro
@@ -0,0 +1,18 @@
+---
+
+---
+
+<div class="text-center">
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
+    reprehenderit. Iste quae molestias in, numquam reprehenderit ipsa aliquid
+    corporis assumenda vero ab necessitatibus inventore obcaecati commodi
+    placeat ipsum rem nesciunt!
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus
+    exercitationem eos dolorem fugiat deleniti atque vitae provident dolorum
+    libero perspiciatis. Adipisci fuga nostrum voluptatem nobis odio. Rerum
+    temporibus asperiores maxime.
+  </p>
+</div>
diff --git a/src/components/NavigationBar.astro b/src/components/NavigationBar.astro
index ea166de..d8b4e15 100644
--- a/src/components/NavigationBar.astro
+++ b/src/components/NavigationBar.astro
@@ -40,18 +40,16 @@ import HashtagWhyULoveFootball from "@components/HashtagWhyULoveFootball.astro";
           <a href="#our-goal" class="block text-green">Our Goal</a>
         </li>
         <li>
-          <a href="#how-to-support" class="block text-green">How to Support</a>
+          <a href="#videos" class="block text-green">Videos</a>
         </li>
         <li>
           <a href="#partners" class="block text-green">Partners</a>
         </li>
         <li>
-          <a href="#social-media-news" class="block text-green"
-            >Social Media News</a
-          >
+          <a href="#how-to-help" class="block text-green">How to help</a>
         </li>
         <li>
-          <a href="/media-requests" class="block text-green">Media Requests</a>
+          <a href="#about-us" class="block text-green">About us</a>
         </li>
       </ul>
     </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5915dd4..dcbbf12 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,8 @@ import Layout from "@layouts/Layout.astro";
 import "@styles/global.css";
 import Section from "../components/Section.astro";
 import VideoPlayer from "../components/VideoPlayer.astro";
+import HowToHelp from "../components/HowToHelp.astro";
+import AboutUs from "../components/AboutUs.astro";
 ---
 
 <Layout title="Welcome to Whyuluvfootball">
@@ -23,9 +25,21 @@ import VideoPlayer from "../components/VideoPlayer.astro";
     backgroundColor="blue"
     eyebrow="Videos"
     heading="I love football because..."
+    id="videos"
   >
     <VideoPlayer />
   </Section>
+  <Section
+    backgroundColor="green"
+    eyebrow="How to help"
+    heading=""
+    id="how-to-help"
+  >
+    <HowToHelp />
+  </Section>
+  <Section backgroundColor="blue" eyebrow="About us" heading="" id="about-us">
+    <AboutUs />
+  </Section>
   <Section
     backgroundColor="green"
     contentImage="/images/goal.jpeg"