Cleaned up code and fixed some grammar

5 files changed, 364 insertions, 318 deletions

diff --git a/pages/about.js b/pages/about.js
index ac51ca2..8fe4e32 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -17,58 +17,64 @@
 
 */
 
-import Layout from '../components/Layout';
+import Layout from "../components/Layout";
 
 const About = () => (
-    <Layout>
-    <div>
-    <div className="jumbotron special-color bounceIn white-text">
-        <h2 className="display-4">About</h2>
-        <p className="lead">Alee Productions is a productions company by Andrew Lee that focuses on making videos and software.</p>
-    </div>
-    <div className="container">
-    <h1>History</h1>
-        <p>Alee Productions started in 2016. It used to be called "AleeCorp" and used to make just software but over
-            time it started branching to other things like making games and videos.
-            In late 2018, AleeCorp merged with Universe and some project merged but due to a community conflict during
-            October in that year, Universe and AleeCorp splited. In 2019 however, AleeCorp got renamed to Alee
-            Productions
-            just to make the company more professional.</p>
-        <h1>FAQ</h1>
-        <ul className="none">
-            <h4>
-                <li>Q: Why did you create Alee Productions?</li>
-                <li>A: Reason why I want to create this is because I want to make my own things as a passion also
-                    sharing
-                    it to the public and to make it as a career.</li>
-                <br/>
-                <li>Q: Why did you call this productions company Alee Productions?</li>
-                <li>A: As you know my name is Andrew Lee and my name starts with an "A" and combine it with "Lee" you get "Alee". :)</li>
-            </h4>
-        </ul>
-        <h1>Team</h1>
-        <div className="card text-white success-color-dark mb-3" style={{maxWidth: '20rem'}}>
-            <div className="card-body">
-                <h5 className="card-title">Community Team (Discord)</h5>
-                <p className="card-text text-white">
-                    <ul>
-                        <li>Travis#1777 (Admin)</li>
-                        <li>jtsshieh#6424 (Admin)</li>
-                        <li>The Pixel Polygon#2069 (Admin)</li>
-                        <li>Inkydink#9098 (Moderator)</li>
+	<Layout>
+		<div>
+			<div className="jumbotron special-color bounceIn white-text">
+				<h2 className="display-4">About</h2>
+				<p className="lead">Alee Productions is a software and video production company, founded by Andrew Lee.</p>
+
+			</div>
+			<div className="container">
+				<h1>History</h1>
+				<p>Alee Productions started in 2016. It used to be called "AleeCorp" and used to make just software but
+					over
+					time it started branching to other things like making games and videos.
+					In late 2018, AleeCorp merged with Universe and some project merged but due to a community conflict
+					during
+					October in that year, Universe and AleeCorp splited. In 2019 however, AleeCorp got renamed to Alee
+					Productions
+					just to make the company more professional.</p>
+				<h1>FAQ</h1>
+				<ul className="none">
+					<h4>
+						<li>Q: Why did you create Alee Productions?</li>
+						<li>A: Reason why I want to create this is because I want to make my own things as a passion
+							also
+							sharing
+							it to the public and to make it as a career.
+						</li>
+						<br/>
+						<li>Q: Why the name "Alee Productions?"</li>
+						<li>A: As you know my name is Andrew Lee and my name starts with an "A" and combine it with
+							"Lee" you get "Alee". :)
+						</li>
+					</h4>
+				</ul>
+				<h1>Our Teams</h1>
+				<div className="card text-white success-color-dark mb-3" style={{maxWidth: "20rem"}}>
+					<div className="card-body">
+						<h5 className="card-title">Discord</h5>
+						<p className="card-text text-white">
+							<ul>
+								<li>Travis#1777 (Admin)</li>
+								<li>jtsshieh#6424 (Admin)</li>
+								<li>The Pixel Polygon#2069 (Admin)</li>
+								<li>Inkydink#9098 (Moderator)</li>
+							</ul>
+						</p>
+					</div>
+				</div>
+				<div id="credits">
+					<h1>Credits</h1>
+					<p>This website is powered by <a href="https://nextjs.org">Next.js</a>, <a href="https://netlify.com">Netlify</a> and <a href="https://mdbootstrap.com">Material Design Bootstrap.</a></p>
+					<p>This website is open source. Contribute <a href="https://github.com/aleeproductions/website">here.</a></p>
+				</div>
+			</div>
+		</div>
+	</Layout>
+);
 
-                    </ul>
-                </p>
-            </div>
-        </div>
-        <div id="credits">
-        <h1>Credits</h1>
-        <p>Website is powered by NextJS, Netlify and Material Design Bootstrap.</p>
-        <p>This project is open source meaning that you can help <a href="https://github.com/aleeproductions/website">contribute</a> to this website.</p>
-        </div>
-        </div>
-    </div>
-    </Layout>
-  )
-  
 export default About;
\ No newline at end of file
diff --git a/pages/blog.js b/pages/blog.js
index 7933d7d..0703b3d 100644
--- a/pages/blog.js
+++ b/pages/blog.js
@@ -17,20 +17,18 @@
 
 */
 
-import Layout from '../components/Layout';
+import Layout from "../components/Layout";
 
 const Blog = () => (
-    <div>
-        <Layout>
-        <div className="jumbotron special-color bounceIn white-text">
-        <h2 className="display-4">Blog</h2>
-        <p className="lead">Where we post updates on products, this website and etc.</p>
-        </div>
-        <div className="container">
-        <h1 className="text-center mt-5">Notice: We are currently working on this page</h1>
-        </div>
-        </Layout>
-    </div>
-)
+	<Layout>
+		<div className="jumbotron special-color bounceIn white-text">
+			<h2 className="display-4">Blog</h2>
+			<p className="lead">Updates on products, this website, etc.</p>
+		</div>
+		<div className="container">
+			<h1 className="text-center mt-5">Notice: We are currently working on this page</h1>
+		</div>
+	</Layout>
+);
 
 export default Blog;
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index f77723e..96430de 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -17,89 +17,94 @@
 
 */
 
-import Layout from '../components/Layout';
+import Layout from "../components/Layout";
 
 const Index = () => (
-    <Layout>
-    <div>
-    <div className="jumbotron special-color bounceIn white-text">
-        <h2 className="display-4">Hello! Welcome to Alee Productions.</h2>
-        <p className="lead">We are a very small productions company.</p>
-        <div className="my-4">
-        <p>If you want to know more about us click the button down below.</p>
-        </div>
-        <a className="btn btn-green btn-lg animsition-link" href="/about" role="button">Learn more</a>
-    </div>
-    <div className="container">
-        {/* Jumbotron */}
-        <div className="container">
-        {/* Carousel Wrapper*/}
-        <div id="carousel-product" className="carousel slide carousel-slide" data-ride="carousel">
-            {/* Indicators*/}
-            <ol className="carousel-indicators">
-                <li data-target="#carousel-product" data-slide-to="0" className="active"></li>
-                <li data-target="#carousel-product" data-slide-to="1"></li>
-                <li data-target="#carousel-product" data-slide-to="2"></li>
-            </ol>
-            {/* Indicators */}
-             {/* Slides */}
-            <div className="carousel-inner" role="listbox">
-                <div className="carousel-item active">
-                    <div className="view">
-                        <img className="d-block w-100" src="/assets/img/carousel/unicity.png"
-                             alt="First slide"/>
-                        <div className="mask rgba-black-light"></div>
-                    </div>
-                    <div className="carousel-caption">
-                        <h3 className="h3-responsive">Unicity</h3>
-                        <p>A Sims clone written in Unity3D.</p>
-                        <a className="btn btn-green btn-lg" href="https://github.com/aleeproductions/Unicity/blob/master/README.md" role="button">Learn More</a>
-                    </div>
-                </div>
-                <div className="carousel-item">
-                    {/* Mask color */}
-                    <div className="view">
-                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg"
-                             alt="Second slide"/>
-                        <div className="mask rgba-black-light"></div>
-                    </div>
-                    <div className="carousel-caption">
-                        <h3 className="h3-responsive">QuantumNet</h3>
-                        <p>A computer "hacking" game made in C#.</p>
-                        <a className="btn btn-green btn-lg" href="https://github.com/aleeproductions/QuantumNet/blob/master/README.md" role="button">Learn More</a>
-                    </div>
-                </div>
-                <div className="carousel-item">
-                    {/* Mask color */}
-                    <div className="view">
-                        <img className="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg"
-                             alt="Third slide"/>
-                        <div className="mask rgba-black-light"></div>
-                    </div>
-                    <div className="carousel-caption">
-                        <h3 className="h3-responsive">Slight mask</h3>
-                        <p>Third text</p>
-                        <a className="btn btn-green btn-lg" href="#" role="button">Learn More</a>
-                    </div>
-                </div>
-            {/* /.Slides */}
-            {/* Controls */}
-            <a className="carousel-control-prev" href="#carousel-product" role="button" data-slide="prev">
-                <span className="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span className="sr-only">Previous</span>
-            </a>
-            <a className="carousel-control-next" href="#carousel-product" role="button" data-slide="next">
-                <span className="carousel-control-next-icon" aria-hidden="true"></span>
-                <span className="sr-only">Next</span>
-            </a>
-            {/* /.Controls */}
-        </div>
-        {/* /.Carousel Wrapper */}
-    </div>
-    </div>
-    </div>
-    </div>
-    </Layout>
-  )
-  
+	<Layout>
+		<div className="jumbotron special-color bounceIn white-text">
+			<h2 className="display-4">Hello! Welcome to Alee Productions.</h2>
+			<p className="lead">We are a very small productions company.</p>
+			<div className="my-4">
+			</div>
+			<a className="btn btn-green btn-lg animsition-link" href="/about" role="button">More about us</a>
+		</div>
+		<div className="container">
+			{/* Jumbotron */}
+			<div className="container">
+				{/* Carousel Wrapper*/}
+				<div id="carousel-product" className="carousel slide carousel-slide" data-ride="carousel">
+					{/* Indicators*/}
+					<ol className="carousel-indicators">
+						<li data-target="#carousel-product" data-slide-to="0" className="active"/>
+						<li data-target="#carousel-product" data-slide-to="1"/>
+						<li data-target="#carousel-product" data-slide-to="2"/>
+					</ol>
+					{/* Indicators */}
+					{/* Slides */}
+					<div className="carousel-inner" role="listbox">
+						<div className="carousel-item active">
+							<div className="view">
+								<img className="d-block w-100" src="/assets/img/carousel/unicity.png"
+									 alt="First slide"/>
+								<div className="mask rgba-black-light"/>
+							</div>
+							<div className="carousel-caption">
+								<h3 className="h3-responsive">Unicity</h3>
+								<p>A Sims clone written in Unity3D.</p>
+								<a className="btn btn-green btn-lg"
+								   href="https://github.com/aleeproductions/Unicity/blob/master/README.md"
+								   role="button">Learn More</a>
+							</div>
+						</div>
+						<div className="carousel-item">
+							{/* Mask color */}
+							<div className="view">
+								<img className="d-block w-100"
+									 src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg"
+									 alt="Second slide"/>
+								<div className="mask rgba-black-light"/>
+							</div>
+							<div className="carousel-caption">
+								<h3 className="h3-responsive">QuantumNet</h3>
+								<p>A computer "hacking" game made in C#.</p>
+								<a className="btn btn-green btn-lg"
+								   href="https://github.com/aleeproductions/QuantumNet/blob/master/README.md"
+								   role="button">Learn More</a>
+							</div>
+						</div>
+						<div className="carousel-item">
+							{/* Mask color */}
+							<div className="view">
+								<img className="d-block w-100"
+									 src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg"
+									 alt="Third slide"/>
+								<div className="mask rgba-black-light"/>
+							</div>
+							<div className="carousel-caption">
+								<h3 className="h3-responsive">Slight mask</h3>
+								<p>Third text</p>
+								<a className="btn btn-green btn-lg" href="#" role="button">Learn More</a>
+							</div>
+						</div>
+						{/* /.Slides */}
+						{/* Controls */}
+						<a className="carousel-control-prev" href="#carousel-product" role="button"
+						   data-slide="prev">
+							<span className="carousel-control-prev-icon" aria-hidden="true"/>
+							<span className="sr-only">Previous</span>
+						</a>
+						<a className="carousel-control-next" href="#carousel-product" role="button"
+						   data-slide="next">
+							<span className="carousel-control-next-icon" aria-hidden="true"/>
+							<span className="sr-only">Next</span>
+						</a>
+						{/* /.Controls */}
+					</div>
+					{/* /.Carousel Wrapper */}
+				</div>
+			</div>
+		</div>
+	</Layout>
+);
+
 export default Index;
\ No newline at end of file
diff --git a/pages/projects.js b/pages/projects.js
index d2a6156..16e7052 100644
--- a/pages/projects.js
+++ b/pages/projects.js
@@ -17,41 +17,45 @@
 
 */
 
-import Layout from '../components/Layout';
+import Layout from "../components/Layout";
 
 const Projects = () => (
-    <Layout>
-    <div>
-    <div className="jumbotron special-color bounceIn white-text">
-        <h2 className="display-4">Projects</h2>
-        <p className="lead">This is the projects that we are currently working on.</p>
-    </div>
-    <div className="container">
-    <h1 className="mb-5 text-center">Software/Games</h1>
-        {/*  Software Cards  */}
-        <h2 className="m-3 text-center">Current big active projects</h2>
-    <div className="row d-flex justify-content-center">
-        <div className="col-md-5">
-            <div className="card elegant-color">
-                <div className="card-body">
-                    <h5 className="card-title">Unicity</h5>
-                    <p className="card-text white-text">A Sims clone written in Unity3D.</p>
-                    <a className="card-link green-text" href="/projects/unicity">Learn more</a> <a className="card-link green-text" href="https://github.com/aleeproductions/Unicity"><i className="fab fa-github"></i> GitHub</a>
-                </div>
-            </div>
-        </div>
+	<Layout>
+		<div className="jumbotron special-color bounceIn white-text">
+			<h2 className="display-4">Projects</h2>
+			<p className="lead">These are our current projects.</p>
+		</div>
+		<div className="container">
+			<h1 className="mb-5 text-center">Software/Games</h1>
+			{/*  Software Cards  */}
+			<h2 className="m-3 text-center">Larger projects</h2>
+			<div className="row d-flex justify-content-center">
+				<div className="col-md-5">
+					<div className="card elegant-color">
+						<div className="card-body">
+							<h5 className="card-title">Unicity</h5>
+							<p className="card-text white-text">A Sims clone written in Unity3D.</p>
+							<a className="card-link green-text" href="/projects/unicity">Learn more</a>
+							<a className="card-link green-text" href="https://github.com/aleeproductions/Unicity">
+								<i className="fab fa-github"/> GitHub
+							</a>
+						</div>
+					</div>
+				</div>
 
-        <div className="col-md-5">
-            <div className="card elegant-color">
-                <div className="card-body">
-                    <h5 className="card-title">QuantumNet</h5>
-                    <p className="card-text white-text">A computer "hacking" game made in C#.</p>
-                    <a className="card-link green-text" href="https://github.com/aleeproductions/QuantumNet"><i className="fab fa-github"></i> GitHub</a>
-                </div>
-            </div>
-        </div>
-        </div>
-        {/*
+				<div className="col-md-5">
+					<div className="card elegant-color">
+						<div className="card-body">
+							<h5 className="card-title">QuantumNet</h5>
+							<p className="card-text white-text">A computer "hacking" game made in C#.</p>
+							<a className="card-link green-text"
+							   href="https://github.com/aleeproductions/QuantumNet"><i
+								className="fab fa-github"/> GitHub</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			{/*
         <h2 className="m-3">Other software/games we made...</h2>
         <button className="btn green" action="button" onclick="displayRepos();">Reload Repos</button>
         <table className="table table-borderless table-dark elegant-color mt-3">
@@ -66,12 +70,12 @@ const Projects = () => (
             </tbody>
         </table>
         </div> */}
-        {/* /.Software Cards  */}
-        {/*  Disabled for now....
+			{/* /.Software Cards  */}
+			{/*  Disabled for now....
         <h1 className="mt-3 mb-2 text-center">Videos</h1>
         <ul id="yt-results" className="yt none"></ul>
          */}
-    {/*
+			{/*
     <script type="text/javascript" data-main="/js/yt-list-videos.js" src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
     <script>
         // Code by cylex
@@ -108,9 +112,8 @@ const Projects = () => (
         xhttp.open("GET", "https://git.alee-productions.xyz/api/v1/users/aleeproductions/repos", true);
         xhttp.send();
     </script> */}
-    </div>
-    </div>
-    </Layout>
-  )
+		</div>
+	</Layout>
+);
 
 export default Projects;
\ No newline at end of file
diff --git a/pages/tos.js b/pages/tos.js
index 527798d..fbb57c5 100644
--- a/pages/tos.js
+++ b/pages/tos.js
@@ -16,139 +16,173 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 */
-import Layout from '../components/Layout';
+import Layout from "../components/Layout";
 
 const TOS = () => (
-    <Layout>
-        <div>
-        <div className="container">
-{/* TODO: Add legal stuff */}
-<div id="top"></div>
-    <h1 className="text-center display-5 mt-3">Alee Productions Terms of Service</h1>
-    <p className="text-center lead">These terms and service have been set in place so we make sure that you can have a great time using our services.</p>
-<div className="container">
-<div id="tiers">
-<h1>Tiers</h1>
-    <ul className="none">
-        <li><a className="white-text" href="#normal-tier">Normal Tier</a> - It means it is not too severe and it there’s nothing to worry about.</li>
-        <li><a className="white-text" href="#excessive-tier">Excessive Tier</a> - It means that if a rule is broken that’s severe it will be taken action immediately and will be stored in the punishment log.</li>
-    </ul>
-</div>
-<div id="normal-tier">
-<h1>Normal Tier</h1>
-<p>If these are broken, then an unofficial warning will occur. If these actions continue, an official warning will occur then excessive punishment will happen if continued once more.</p>
-    <ul>
-        <li>Use common sense. (This isn’t an against rule but you must use your common knowledge.)</li>
-        <li>No spamming (Any spam will result in an official warning.)</li>
-        <li>No any advertisements/giveaways at any channels. Unless for a specific purpose.</li>
-        <li>Respect others.</li>
-        <li>No backseat moderating (enforcing the rules to other users)</li>
-        <li>Refrain asking for staff that just lowers your chance to never getting it.</li>
-    </ul>
-</div>
-    <div id="excessive-tier">
-        <h1>Excessive Tier</h1>
-        <p>This can result in an official warning or a termination from using our services.</p>
-        <ul>
-            <li>No excessive swearing (Swearing is allowed but cursing that contains racial slur and etc will result in immediate severe punishment.)</li>
-            <li>Any accusations will never be tolerated here there will be an investigation from the staff team if it occurs and false accusation may lead a temporary termination or possibly permanently terminated from using our services.</li>
-            <li>Do not argue or threaten the staff.</li>
-            <li>Blackmailing members is also not tolerated here.</li>
-            <li>No NSFW content.</li>
-            <li>No raids to be started when using our services.</li>
-            <li>No alts are to be on any of our services.</li>
-            <li>Threatening anyone will also not be tolerated. (i.e. DDoS, trying to find you and etc)</li>
-            <li>Any malicious content will not be tolerated. (i.e. Viruses, Malware, Adware and etc)</li>
-        </ul>
-    </div>
-    <div id="policy">
-        <h1>Alee Productions Policies</h1>
-        <div id="coppa-policy">
-            <h1>COPPA Policy</h1>
-            <p>You must be at least 13 years old to be in this server due to the <a className="green-text" href="https://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act">COPPA</a> regulations…</p>
-            <p>If you don’t accept this, you have to leave our services.</p>
-            <p>An investigation or/and ban may happen if found guilty.</p>
-        </div>
-        <h2>Discord Only Policies</h2>
-        <div id="discord-nickname">
-            <h1>Nickname Policy</h1>
-            <p>We enforce this nickname policy to keep a clean, friendly community.</p>
-            <p>Our nickname system is different, using the command <code className="green-text">am:nick [your nickname]</code> so our staff team can approve it first. This system is set in place so that the community is a nice place to be for everyone.
-                To have your nickname accepted, it must comply with the following:</p>
-            <ul>
-                <li>No offensive words</li>
-                <li>No symbols</li>
-                <li>Not attention-grabbing (i.e. getting to the top of the list by using a symbol)</li>
-            </ul>
-            <p>Any display name that does not follow the guidelines above will have the following done to it:</p>
-            <ul>
-                <li>Censoring your nickname/username</li>
-                <li>Ignoring the nickname change from AstralMod</li>
-            </ul>
-        </div>
-        <div id="logging-policy">
-            <h1>Logging Policy</h1>
-            <p>Our bots log the following things, and store them in their databases:</p>
-            <ul>
-                <li>Deleted Messages</li>
-                <li>Edited Messages</li>
-                <li>Your ID</li>
-                <li>You joining and leaving</li>
-            </ul>
-            <p>If you don’t agree with the policies and wanting to opt out, you may not use our services.</p>
-        </div>
-    </div>
-    <p>We also highly recommend you to read Discord’s <a className="text-green" href="https://discordapp.com/terms">ToS</a> and <a className="text-green" href="https://discordapp.com/guidelines">Community Guidelines</a>.</p>
-    <div id="modal">
-        {/*  Modal  */}
-        <div className="modal fade down" id="instructionsModal" tabIndex="-1" role="dialog" aria-labelledby="instructions-label" aria-hidden="true">
-            <div className="modal-dialog" role="document">
-                <div className="modal-content dark">
-                    <div className="modal-header">
-                        <h5 className="modal-title" id="instructions-label">Instructions</h5>
-                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-                            <span aria-hidden="true">&times;</span>
-                        </button>
-                    </div>
-                    <div className="modal-body">
-                        <ul className="none">
-                            <li>1. Never ask for staff</li>
-                            <li>2. Be active in the Alee Productions</li>
-                            <li>3. Follow all rules without breaking them</li>
-                            <li>4. Finally, the staff will pick people that they trust</li>
-                            <li>5. The staff has to vote if they can be accepted to be part of the staff team</li>
-                        </ul>
-                    </div>
-                    <div className="modal-footer">
-                        <button type="button" className="btn green" data-dismiss="modal">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        {/*  Modal  */}
-    </div>
-    <div id="FAQ">
-        <h1>Frequent Asked Questions</h1>
-        <p>These are the frequently asked questions that you might ask the staffs.</p>
-        <ul className="none">
-            <li>Q: Can I be staff?</li>
-            <li>A: No, you can't ask for staff but you want to know how to get it, then here are the <a className="green-text" id="modalActivate" data-toggle="modal" data-target="#instructionsModal">instructions</a>.</li>
-            <li>Q: I was banned for no reason! I hate the staff…</li>
-            <li>A: Well… if you were banned for no reason you can ask our staff team and they will tell you why you were banned.</li>
-        </ul>
-    </div>
-    <div id="conclusion">
-        <p>If a rule is broken, no need to panic, it's just a heads up on what’s coming if you were to break another rule and if you got mistakenly warned please contact one of the staff immediately.</p>
-        <p>If there's staff abusing their powers please report them to Alee immediately.</p>
-        <p>Thanks for reading the ToS!</p>
-        <p>- Alee Productions Community Team</p>
-        <p>Last updated on November 26th 2019</p>
-    </div>
-    <a href="#top" className="green-text">Back to top</a>
-</div>
-        </div>
-        </div>
-    </Layout>
-)
+	<Layout>
+		<div>
+			<div className="container">
+				{/* TODO: Add legal stuff */}
+				<div id="top"/>
+				<h1 className="text-center display-5 mt-3">Alee Productions Terms of Service</h1>
+				<p className="text-center lead">These terms and service have been set in place so we make sure that you can have a great time using our services.</p>
+				<div className="container">
+					<div id="tiers">
+						<h1>Tiers</h1>
+						<ul className="none">
+							<li><a className="white-text" href="#normal-tier">Normal Tier</a> - It means it is not too
+								severe and it there’s nothing to worry about.
+							</li>
+							<li><a className="white-text" href="#excessive-tier">Excessive Tier</a> - It means that if a
+								rule is broken that’s severe it will be taken action immediately and will be stored in
+								the punishment log.
+							</li>
+						</ul>
+					</div>
+					<div id="normal-tier">
+						<h1>Normal Tier</h1>
+						<p>If these are broken, then an unofficial warning will occur. If these actions continue, an
+							official warning will occur then excessive punishment will happen if continued once
+							more.</p>
+						<ul>
+							<li>Use common sense. (This isn’t an against rule but you must use your common knowledge.)
+							</li>
+							<li>No spamming (Any spam will result in an official warning.)</li>
+							<li>No any advertisements/giveaways at any channels. Unless for a specific purpose.</li>
+							<li>Respect others.</li>
+							<li>No backseat moderating (enforcing the rules to other users)</li>
+							<li>Refrain asking for staff that just lowers your chance to never getting it.</li>
+						</ul>
+					</div>
+					<div id="excessive-tier">
+						<h1>Excessive Tier</h1>
+						<p>This can result in an official warning or a termination from using our services.</p>
+						<ul>
+							<li>No excessive swearing (Swearing is allowed but cursing that contains racial slur and etc
+								will result in immediate severe punishment.)
+							</li>
+							<li>Any accusations will never be tolerated here there will be an investigation from the
+								staff team if it occurs and false accusation may lead a temporary termination or
+								possibly permanently terminated from using our services.
+							</li>
+							<li>Do not argue or threaten the staff.</li>
+							<li>Blackmailing members is also not tolerated here.</li>
+							<li>No NSFW content.</li>
+							<li>No raids to be started when using our services.</li>
+							<li>No alts are to be on any of our services.</li>
+							<li>Threatening anyone will also not be tolerated. (i.e. DDoS, trying to find you and etc)
+							</li>
+							<li>Any malicious content will not be tolerated. (i.e. Viruses, Malware, Adware and etc)
+							</li>
+						</ul>
+					</div>
+					<div id="policy">
+						<h1>Alee Productions Policies</h1>
+						<div id="coppa-policy">
+							<h1>COPPA Policy</h1>
+							<p>You must be at least 13 years old to be in this server due to the <a
+								className="green-text"
+								href="https://en.wikipedia.org/wiki/Children's_Online_Privacy_Protection_Act">COPPA</a> regulations…
+							</p>
+							<p>If you don’t accept this, you have to leave our services.</p>
+							<p>An investigation or/and ban may happen if found guilty.</p>
+						</div>
+						<h2>Discord Only Policies</h2>
+						<div id="discord-nickname">
+							<h1>Nickname Policy</h1>
+							<p>We enforce this nickname policy to keep a clean, friendly community.</p>
+							<p>Our nickname system is different, using the command <code className="green-text">am:nick
+								[your nickname]</code> so our staff team can approve it first. This system is set in
+								place so that the community is a nice place to be for everyone.
+								To have your nickname accepted, it must comply with the following:</p>
+							<ul>
+								<li>No offensive words</li>
+								<li>No symbols</li>
+								<li>Not attention-grabbing (i.e. getting to the top of the list by using a symbol)</li>
+							</ul>
+							<p>Any display name that does not follow the guidelines above will have the following done
+								to it:</p>
+							<ul>
+								<li>Censoring your nickname/username</li>
+								<li>Ignoring the nickname change from AstralMod</li>
+							</ul>
+						</div>
+						<div id="logging-policy">
+							<h1>Logging Policy</h1>
+							<p>Our bots log the following things, and store them in their databases:</p>
+							<ul>
+								<li>Deleted Messages</li>
+								<li>Edited Messages</li>
+								<li>Your ID</li>
+								<li>You joining and leaving</li>
+							</ul>
+							<p>If you don’t agree with the policies and wanting to opt out, you may not use our
+								services.</p>
+						</div>
+					</div>
+					<p>We also highly recommend you to read Discord’s <a className="text-green"
+																		 href="https://discordapp.com/terms">ToS</a> and <a
+						className="text-green" href="https://discordapp.com/guidelines">Community Guidelines</a>.</p>
+					<div id="modal">
+						{/*  Modal  */}
+						<div className="modal fade down" id="instructionsModal" tabIndex="-1" role="dialog"
+							 aria-labelledby="instructions-label" aria-hidden="true">
+							<div className="modal-dialog" role="document">
+								<div className="modal-content dark">
+									<div className="modal-header">
+										<h5 className="modal-title" id="instructions-label">Instructions</h5>
+										<button type="button" className="close" data-dismiss="modal" aria-label="Close">
+											<span aria-hidden="true">&times;</span>
+										</button>
+									</div>
+									<div className="modal-body">
+										<ul className="none">
+											<li>1. Never ask for staff</li>
+											<li>2. Be active in the Alee Productions</li>
+											<li>3. Follow all rules without breaking them</li>
+											<li>4. Finally, the staff will pick people that they trust</li>
+											<li>5. The staff has to vote if they can be accepted to be part of the staff
+												team
+											</li>
+										</ul>
+									</div>
+									<div className="modal-footer">
+										<button type="button" className="btn green" data-dismiss="modal">Close</button>
+									</div>
+								</div>
+							</div>
+						</div>
+						{/*  Modal  */}
+					</div>
+					<div id="FAQ">
+						<h1>Frequent Asked Questions</h1>
+						<p>These are the frequently asked questions that you might ask the staffs.</p>
+						<ul className="none">
+							<li>Q: Can I be staff?</li>
+							<li>A: No, you can't ask for staff but you want to know how to get it, then here are the <a
+								className="green-text" id="modalActivate" data-toggle="modal"
+								data-target="#instructionsModal">instructions</a>.
+							</li>
+							<li>Q: I was banned for no reason! I hate the staff…</li>
+							<li>A: Well… if you were banned for no reason you can ask our staff team and they will tell
+								you why you were banned.
+							</li>
+						</ul>
+					</div>
+					<div id="conclusion">
+						<p>If a rule is broken, no need to panic, it's just a heads up on what’s coming if you were to
+							break another rule and if you got mistakenly warned please contact one of the staff
+							immediately.</p>
+						<p>If there's staff abusing their powers please report them to Alee immediately.</p>
+						<p>Thanks for reading the ToS!</p>
+						<p>- Alee Productions Community Team</p>
+						<p>Last updated on November 26th 2019</p>
+					</div>
+					<a href="#top" className="green-text">Back to top</a>
+				</div>
+			</div>
+		</div>
+	</Layout>
+);
 
 export default TOS;
\ No newline at end of file