Meta tags!

src/components/Button/Button.js

@@ -30,8 +30,8 @@ export const Button = ({type = 'default', link, buttonText, onClick}) => {
 
     return (        
         <div className="button-component">
-            {type === 'external' && <button aria-label={`${buttonText}, opens in a new tab`}><a href={link} target="_blank" rel="noreferrer">{buttonText} →</a></button>}
-            {type === 'internal' && <button aria-label={`Navigate to ${buttonText}`}><Link to={link} onClick={smoothScroll}>{buttonText} →</Link></button>}
+            {type === 'external' && <a href={link} target="_blank" rel="noreferrer"><button aria-label={`${buttonText}, opens in a new tab`}>{buttonText} →</button></a>}
+            {type === 'internal' && <Link to={link} onClick={smoothScroll}><button aria-label={`Navigate to ${buttonText}`}>{buttonText} →</button></Link>}
             {type === 'default' && <button aria-label={buttonText} onClick={onClick}>{buttonText}</button>}
         </div>
     )

src/components/Button/Button.scss

@@ -1,20 +1,16 @@
 @import '../../variables.scss';
 
 .button-component {
-
     button {
         background-color: $TrickFireGreen;
         padding: 0.65rem 1rem;
         border: none;
-
-        a {
-            font-family: $font-heading;
-            color: $Black;
-            text-decoration: none;
-            text-transform: uppercase;
-            font-weight: 600;
-            font-size: 1.5rem;
-        }
+        font-family: $font-heading;
+        color: $Black;
+        text-decoration: none;
+        text-transform: uppercase;
+        font-weight: 600;
+        font-size: 1.5rem;
     }
 
     button:hover {

src/components/Navbar/Navbar.scss

@@ -7,7 +7,7 @@
     border-bottom: solid 1px white;
 
     position: fixed;
-    z-index: 1;
+    z-index: 2;
 
     .subpage-link {
         color: $White;

src/pages/AboutUs/AboutUs.js

@@ -68,6 +68,8 @@ export const AboutUs = () => {
 
     return (
         <main className='about-us'>
+            <meta name="description" content="Familiarize yourself with TrickFire Robotics and the competition we compete in. Learn about the majors our team supports, our student leaders, and how to get involved." />
+
             <ImageCarousel 
                 title = "Our Story"
                 images = {image_carousel_images}

src/pages/Events/Events.js

@@ -19,6 +19,8 @@ export const Events = () => {
 
     return (
         <main className='events'>
+            <meta name="description" content="Learn more about upcoming events TrickFire Robotics is involved in, both on campus and in our community." />
+
             <MaxWidthContainer>
                 <section className='page-head'>
                     <h2 className='events-header'>Events</h2>

src/pages/GetInvolved/GetInvolved.js

@@ -10,6 +10,8 @@ const disciplines = ['Software Engineering', 'Mechanical Engineering', 'Electric
 export const GetInvolved = () => {
     return (
         <main className='get-involved'>
+            <meta name="description" content="Get involved with our team! TrickFire Robotics draws a talented field of students from a variety of majors. We encourage anyone considering joining to give it a chance, and accept new members on a rolling basis." />
+
             <MaxWidthContainer>
                 <TextImage
                     imageOrder="image-left"

src/pages/Homepage/Homepage.js

@@ -9,6 +9,8 @@ import { HomeEvent } from '../../components/HomeEvent/HomeEvent'
 export const Homepage = () => {
     return (
         <main className='homepage'>
+            <meta name="description" content="TrickFire Robotics is an interdisciplinary student team at the University of Washington Bothell. We compete in the University Rover Challenge, an international competition challenging students to design and develop rovers relevant to future Mars exploration." />
+
             <Hero/>
             <MaxWidthContainer>
                 <TextImage