feat(homepage): started colouring and layout

src/Footer/Ender.css

@@ -4,7 +4,8 @@
 	padding-top: 10px;
 	padding-bottom: 10px;
 	justify-content: center;
-	background-color: lightgrey;
+	background-color: #a80029;
+	color: white;
 }
 
 #pointerCursor {
@@ -15,6 +16,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
+	column-gap: 2svw;
 }
 #ender p {
 	padding-left: 2%;
@@ -33,5 +35,5 @@
 }
 
 #ender a img {
-	height: 7svh;
+	height: 3svh;
 }

src/Footer/Ender.js

@@ -1,7 +1,6 @@
 import "./Ender.css";
 import linkedInLogo from "./InBug-White.png";
 import instagramLogo from "./instagram-white-icon.png";
-import emailLogo from "./email-white.png";
 import authors from "./humans.txt";
 /**
  * @param {null} null - requires onthing
@@ -36,21 +35,18 @@ export default function Ender() {
 						alt="Intragram Logo"
 					/>
 				</a>
-				<a href={authors}>
-					<img
-						src="https://humanstxt.org/img/oficial-logos/humanstxt-transparent-1ink.png"
-						alt="humans txt"
-					/>
-				</a>
+
 				<a href="mailto:uofcbaja@gmail.com?subject=Lets start something great">
 					<img
-						src={emailLogo}
+						style={{ filter: `invert()` }}
+						src="https://www.svgrepo.com/show/390657/email-envelope-letter-mail-message-communication.svg"
 						alt="email us logo"
 					/>
 				</a>
 				<a href="https://www.facebook.com/schulich.offroad/">
 					<img
-						src="https://img.icons8.com/ios-filled/50/FFFFFF/facebook--v1.png"
+						style={{ filter: `invert()`, height: `3.25svh` }}
+						src="https://www.svgrepo.com/show/521654/facebook.svg"
 						alt="Facebook Logo"
 					/>
 				</a>

src/Header/Header.css

@@ -164,7 +164,7 @@ nav ul {
 	background: linear-gradient(
 		to bottom,
 		rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%),
-		whitesmoke 100%
+		#1f1f1f 100%
 	);
 	pointer-events: none;
 	z-index: 1;
@@ -193,7 +193,10 @@ nav ul {
 /* used to postiion title and sub title */
 #BannerHeader div {
 	margin-top: 40svh;
-	padding-left: 60svw;
+	margin-left: auto;
+	margin-right: 8svw;
+	/* padding-left: 60svw; */
+	/* text-align: end; */
 }
 
 #BannerHeader h1 {

src/Header/Header.js

@@ -139,7 +139,11 @@ export default function Header() {
 						style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
 						<div>
 							<h1>{bannerInfo.titleText}</h1>
-							<h2>{bannerInfo.subtitleText}</h2>
+							{bannerInfo.subtitleText === "" ? (
+								<></>
+							) : (
+								<h2>{bannerInfo.subtitleText}</h2>
+							)}
 						</div>
 					</div>
 				</>

src/Home/Home.css

@@ -1,45 +1,11 @@
-#HomeTop {
-	display: flex;
-	position: relative;
-
-	justify-content: flex-end;
-	align-items: center;
-}
-
-#HomeTop img {
-	height: 76svh;
-	width: 100%;
-	background-image: url(https://picsum.photos/200);
-	background-size: cover;
-	background-position: center;
-
-	position: relative;
-	z-index: 0;
-}
-
-#HomeTop div {
-	display: flex;
-	flex-direction: column;
-
-	position: absolute;
-	z-index: 1;
-
-	margin-right: 25svw;
-	margin-bottom: 25svh;
-}
-
-#HomeTop div h1 {
-	margin: 0px;
-}
-
-/* #HomeTop div h2 {
-} */
-
 .HomePageLayout {
 	margin-left: auto;
 	margin-right: auto;
-	width: 70svw;
-	margin-top: 2svh;
+	padding: 0svh 15svw;
+	/* width: 70svw; */
+	padding-top: 2svh;
+	background-color: #1f1f1f;
+	color: white;
 }
 
 .HomePageLayout div {
@@ -64,7 +30,7 @@
 	/* text-decoration: none; */
 	color: inherit;
 
-	border: solid 2px black;
+	/* border: solid 2px white; */
 	border-radius: 1rem;
 	padding: 10px;
 	margin: 0svh 8svw;
@@ -72,14 +38,15 @@
 	text-decoration: none;
 	text-align: center;
 	margin-top: 2svh;
+	background-color: #a80029;
 }
 
 .HomePageLayout a:hover {
-	background-color: grey;
+	background-color: rgba(128, 128, 128, 0.4);
 }
 
 .HomePageLayout h2 {
-	border-bottom: solid 3px black;
+	border-bottom: solid 3px white;
 	/* padding-left: 2svw; */
 	padding-bottom: 0.5svh;
 	font-size: 36px;
@@ -115,7 +82,7 @@
 	flex-direction: column;
 
 	border-radius: 15px;
-	border: solid 2px black;
+	border: solid 2px white;
 
 	padding: 30px;
 	margin-top: 4svh;
@@ -160,6 +127,10 @@
 	margin: 1svh 0svw;
 }
 
+.HomePageLayout > div:nth-child(4) > img {
+	height: 40svh;
+}
+
 #HomeSponsorLinks {
 	display: flex;
 	flex-direction: row;
@@ -179,3 +150,8 @@
 	text-wrap: nowrap;
 	text-align: center;
 }
+
+#HomeBottomGallery img {
+	width: 100%;
+	height: 100%;
+}

src/Home/Home.jsx

@@ -108,11 +108,12 @@ export default function Home() {
 					<div>
 						<h2>Sponsor Us</h2>
 						<p>
-							UCalgary Baja is a student organization responsible for designing,
-							building, and racing an off-road vehicle in the Baja SAE
-							intercollegiate competition organized by the Society of Automotive
-							Engineers (SAE) every year. Schulich Off-Road's cars are tough,
-							dependable, competitive, and extremely fun to drive.
+							We appreciate all the help we get from sponsors because it helps
+							fund our Baja team with essential parts, materials, manufacturing
+							support, and ability to go to competitions. Their contributions
+							make it possible for us to design, build, and compete at a high
+							level. From donated components to financial backing, our sponsors
+							are a key part of what drives our team forward.
 						</p>
 						<Link to={"/OurSponsors"}>Learn More</Link>
 					</div>

src/index.js

@@ -12,7 +12,6 @@ import Gallery from "./Gallery/Gallery";
 import "./index.css";
 import MockPage from "./MockDB/MockPage";
 import Home from "./Home/Home";
-import Home from "./Home/Home";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(