From 7ad1be29e80273429408ca1df0803498f8f64cd4 Mon Sep 17 00:00:00 2001
From: Graphictoria <support@gtoria.net>
Date: Sun, 24 Oct 2021 15:39:28 -0400
Subject: [PATCH] Fix social link alignment

---
 web/resources/js/components/Footer.js         |  2 +-
 .../js/components/Landing/SocialCard.js       | 17 +++++++++++++
 web/resources/js/pages/Home.js                | 25 +++++--------------
 3 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 web/resources/js/components/Landing/SocialCard.js

diff --git a/web/resources/js/components/Footer.js b/web/resources/js/components/Footer.js
index 28576e7..b7a691c 100644
--- a/web/resources/js/components/Footer.js
+++ b/web/resources/js/components/Footer.js
@@ -21,7 +21,7 @@ const Footer = () => {
 				<p className="text-muted fw-bold mb-0 mt-1"><FooterLink label="About Us" href="/legal/about-us"/> | <FooterLink label="Terms of Service" href="/legal/terms-of-service"/> | <FooterLink label="Privacy Policy" href="/legal/privacy-policy"/> | <FooterLink label="DMCA" href="/legal/dmca"/> | <FooterLink label="Support" href="/support"/> | <FooterLink label="Blog" href="/blog"/></p>
 				<hr className="mx-auto my-2 w-25"/>
 				<p className="text-muted fw-light m-0">Copyright © {CurrentDate.getFullYear()} Graphictoria. All rights reserved.</p>
-				<p className="text-muted fw-light m-0">Graphictoria is not affiliated with or sponsored by Roblox Corporation. The usage of this website signifies your acceptance of the <FooterLink label="Terms of Service" href="/legal/terms-of-service"/> and our <FooterLink label="Privacy Policy" href="/legal/privacy-policy"/>.</p>
+				<p className="text-muted fw-light m-0">Graphictoria is not affiliated with, endorsed by, or sponsored by Roblox Corporation. The usage of this website signifies your acceptance of the <FooterLink label="Terms of Service" href="/legal/terms-of-service"/> and our <FooterLink label="Privacy Policy" href="/legal/privacy-policy"/>.</p>
 				<div className="my-1">
 					<a className="mx-1" href="https://twitter.com/gtoriadotnet" rel="noreferrer" target="_blank"><img src="/images/Twitter.svg" alt="Twitter" height="28" width="28"></img></a>
 					<a className="mx-1" href="https://discord.gg/q666a2sF6d" rel="noreferrer" target="_blank"><img src="/images/Discord.svg" alt="Discord" height="28" width="28"></img></a>
diff --git a/web/resources/js/components/Landing/SocialCard.js b/web/resources/js/components/Landing/SocialCard.js
new file mode 100644
index 0000000..3f68df5
--- /dev/null
+++ b/web/resources/js/components/Landing/SocialCard.js
@@ -0,0 +1,17 @@
+// © XlXi 2021
+// Graphictoria 5
+
+import React from 'react';
+
+const SocialCard = (props) => {
+	return (
+		<div className="col-lg-4 mb-4 d-flex flex-column align-items-center">
+			<svg className="rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label={ props.title }><image width="100%" height="100%" href={ '/images/social/' + props.title.toLowerCase() + '.png' }></image></svg>
+			<h2 className="mt-3">{ props.title }</h2>
+			<p>{ props.description }</p>
+			<a className="btn btn-primary mt-auto" href={ props.link } rel="noreferrer" target="_blank" role="button">View »</a>
+		</div>
+	);
+};
+
+export default SocialCard;
\ No newline at end of file
diff --git a/web/resources/js/pages/Home.js b/web/resources/js/pages/Home.js
index 202d1bd..4641684 100644
--- a/web/resources/js/pages/Home.js
+++ b/web/resources/js/pages/Home.js
@@ -6,6 +6,8 @@ import { Link } from "react-router-dom";
 
 import SetTitle from "../Helpers/Title.js";
 
+import SocialCard from "../Components/Landing/SocialCard.js";
+
 class Home extends React.Component {
 	componentDidMount()
 	{
@@ -21,7 +23,7 @@ class Home extends React.Component {
 						<div className="mb-4 graphictoria-home-shadow">
 							<h1 className="graphictoria-homepage-header">Graphictoria</h1>
 							<h5 className="mb-0">Graphictoria aims to revive the classic Roblox experience. Join <b>5k+</b> other users and relive your childhood!</h5>
-							<p className="graphictoria-homepage-fine-print fst-italic">* Graphictoria is not affiliated with or sponsored by Roblox Corporation.</p>
+							<p className="graphictoria-homepage-fine-print fst-italic">* Graphictoria is not affiliated with, endorsed by, or sponsored by Roblox Corporation.</p>
 						</div>
 						<Link to="/register" className="btn btn-success">Create your account<i className="ps-2 graphictoria-small-aligned-text fas fa-chevron-right"></i></Link>
 					</div>
@@ -33,24 +35,9 @@ class Home extends React.Component {
 				<div className="container text-center">
 					<h1 className="mb-5 fw-bold">Social Links</h1>
 					<div className="row mb-5">
-						<div className="col-lg-4 mb-4">
-							<svg className="rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><image width="100%" height="100%" href="/images/social/youtube.png"></image></svg>
-							<h2 className="mt-3">YouTube</h2>
-							<p>Subscribe to our YouTube channel, where we upload trailers for future events and Graphictoria gameplay videos.</p>
-							<a className="btn btn-primary" href="https://www.youtube.com/rbxXlXi" rel="noreferrer" target="_blank" role="button">View »</a>
-						</div>
-						<div className="col-lg-4 mb-4">
-							<svg className="rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><image width="100%" height="100%" href="/images/social/twitter.png"></image></svg>
-							<h2 className="mt-3">Twitter</h2>
-							<p>Follow us on Twitter. Here you can recieve important updates about Graphictoria and receive announcements for events, downtime, etc.</p>
-							<a className="btn btn-primary" href="https://www.twitter.com/gtoriadotnet" rel="noreferrer" target="_blank" role="button">View »</a>
-						</div>
-						<div className="col-lg-4 mb-4">
-							<svg className="rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><image width="100%" height="100%" href="/images/social/discord.png"></image></svg>
-							<h2 className="mt-3">Discord</h2>
-							<p>Join our Discord server. This is the place where you can engage with the rest of our community, or just hang out with friends.</p>
-							<a className="btn btn-primary" href="https://www.discord.gg/jBRHAyp" rel="noreferrer" target="_blank" role="button">View »</a>
-						</div>
+						<SocialCard title="YouTube" description="Subscribe to our YouTube channel, where we upload trailers for future events and Graphictoria gameplay videos." link="https://www.youtube.com/channel/UCIXSiSX13i_etDjRJzcKnLQ" />
+						<SocialCard title="Twitter" description="Follow us on Twitter. Here you can recieve important updates about Graphictoria and receive announcements for events, downtime, etc." link="https://www.twitter.com/gtoriadotnet" />
+						<SocialCard title="Discord" description="Join our Discord server. This is the place where you can engage with the rest of our community, or just hang out with friends." link="https://www.discord.gg/jBRHAyp" />
 					</div>
 				</div>
 			</>