Merge pull request #19 from 1xINTERNET/feature/14-update-navigation-a…

…nd-create-sections

#14: Update Navbar links & create 'how to help' and 'about us' sections

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>

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>

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>

src/pages/index.astro

@@ -6,6 +6,8 @@ import PartnerLinks from "../components/PartnerLinks.astro";
 import PrimaryLink from "../components/PrimaryLink.astro";
 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">
@@ -27,6 +29,7 @@ import VideoPlayer from "../components/VideoPlayer.astro";
     backgroundColor="blue"
     eyebrow="Videos"
     heading="I love football because..."
+    id="videos"
   >
     <VideoPlayer />
   </Section>
@@ -46,6 +49,12 @@ import VideoPlayer from "../components/VideoPlayer.astro";
       <PrimaryLink href="mailto:[email protected]" text="Become a partner" />
     </div>
   </Section>
+  <Section backgroundColor="blue" eyebrow="How to help" id="how-to-help">
+    <HowToHelp />
+  </Section>
+  <Section backgroundColor="green" eyebrow="About us" id="about-us">
+    <AboutUs />
+  </Section>
   <Section
     backgroundColor="blue"
     contentImage="/images/goal.jpeg"

src/styles/global.css

@@ -41,6 +41,10 @@
     font-display: swap;
   }
 
+  html {
+    @apply scroll-smooth;
+  }
+
   h1 {
     @apply text-[64px] leading-[78px];
   }
@@ -55,7 +59,7 @@
 
   body,
   p {
-    @apply text-[18px] leading-6;
+    @apply text-[18px] leading-6 mb-4 last:mb-0;
   }
 
   @media only screen and (max-width: 640px) {