Updated FAQ and Intro Sections

src/app/components/nav/Nav.js

@@ -5,7 +5,7 @@ import Container from "react-bootstrap/Container";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 
-import zothacksLogo from "assets/icons/zothacks-logo.svg";
+import { ReactComponent as ZothacksLogo} from "assets/icons/zothacks-logo.svg";
 
 import "./Nav.scss";
 
@@ -17,7 +17,7 @@ function NavigationBar() {
 		<Navbar id="app-navbar" expand="md" variant="dark">
 			<Container fluid>
 				<Navbar.Brand as={NavLink} end to="/">
-					<img className="navbar-logo" src={zothacksLogo} alt="ZotHacks Logo" />
+					<ZothacksLogo className="navbar-logo" fill="white"/>
 				</Navbar.Brand>
 				<Navbar.Toggle aria-controls="inner-navbar-nav" />
 				<Navbar.Collapse id="inner-navbar-nav">

src/app/views/home/sections/Faq.scss

@@ -7,8 +7,10 @@
 		align-items: center;
 		justify-content: space-between;
 		flex-direction: column;
-		background: $black;
-		opacity: 50%;
+		background: rgba(0, 0, 0, 0.5);
+		width: 80%;
+		margin: auto;
+		border-radius: 10px;
 
 		& > h2 {
 			width: 80vw;

src/app/views/home/sections/Intro.js

@@ -1,14 +1,14 @@
 import React from "react";
 
-import zothacksLogo from "assets/icons/zothacks-logo.svg";
+import { ReactComponent as ZothacksLogo } from "assets/icons/zothacks-logo.svg";
 
 import "./Intro.scss";
 
 function Intro() {
 	return (
 		<section className="intro">
 			<div className="card">
-				<img className="zothacks-logo" src={zothacksLogo} />
+				<ZothacksLogo className="zothacks-logo" fill="#1D6C38" />
 				<h2>What is ZotHacks?</h2>
 				<p className="card-text">
 					ZotHacks is a beginner-friendly hackathon where students with minimal

src/app/views/home/sections/Intro.scss

@@ -15,6 +15,7 @@
 
 		.zothacks-logo {
 			width: 100px;
+			height: 100px;
 			margin: 0 auto 2rem auto;
 		}
 	}