Added mobile support, invite banner, polished up

src/assets/home/invite-banner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 15"><path fill="#04083d" d="M0 0H48V20H0"/><g style="filter:blur(3px);fill:none;stroke-width:5"><path stroke="#005a9c" d="M2-5 13 25 31-14 43 21"/><path stroke="#1e7ebf" d="M-5 13 28-4M18 21 49-6"/></g></svg>

src/pages/home.tmpl

@@ -12,24 +12,25 @@
         <p>MBot is a new Discord bot that allows you do powerful moderation, play music with your friends, and is built to do way more in the future! This project is currentaly in alpha and MBot is very limited, please wait paintely for new updates comming your way! 😎</p>
       </div>
       <div id="header-wrapped-profile">
-        <img src="/src/assets/home/bot-profile-compressed.png"/>
+        <img src="/src/assets/home/bot-profile-compressed.png" alt="Bot Profile"/>
       </div>
     </div>
   </header>
+
   <ul id="what-about">
     <li>
       <div>
         <h2>Powerful Moderation!</h2>
-        <p>Moderate your server with ban or kick commands, this will get rid of any naughty people that break your server rules! You can also manage messages using the clear command, this will get rid of big chunk messages that you may not want on your server.</p>
+        <p>Moderate your server with ban or kick commands – this will get rid of any naughty people that break your server rules! You can also manage messages using the clear command – this will get rid of a big chunk of messages that you may not want on your server.</p>
       </div>
-      <img src="/src/assets/home/bot-moderation.png">
+      <img src="/src/assets/home/bot-moderation.png" alt="Bot Moderation">
     </li>
-    <li>
+    <li class="row-reverse"> 
-      <img src="/src/assets/home/bot-music.png">
       <div>
         <h2>Music!</h2>
-        <p>Play music from youtube with our bot for free! Control your music how youd like by skipping, pausing, or stopping the queue entirely to play what you want on your server! You may also look at what the queue is storing for your server.</p>
+        <p>Play music from YouTube with our bot for free! Control your music how youd like by skipping, pausing, or stopping the queue entirely, to play what you want on your server! You may also look at what the queue is storing for your server.</p>
       </div>
+      <img src="/src/assets/home/bot-music.png" alt="Bot Music">
     </li>
     <li>
       <div class="shift-center">
@@ -37,5 +38,14 @@
       </div>
     </li>
   </ul>
+
+  <div id="invite-banner">
+    <h2>Invite our bot!</h2>
+    <p>Invite our bot to your server today!</p>
+    <div>
+      <a href="https://discord.com/oauth2/authorize?client_id=1201602013142712431">Invite now!</a>
+      <a href="https://git.keyemail.dev/MBot/mbot">Our Git!</a>
+    </div>
+  </div>
   {{ end }}
 </body>

src/styles/home.css

@@ -7,7 +7,7 @@ header {
   margin-bottom: 0;
   width: calc(100% + 2 * var(--pad));
   height: 600px;
-  background: #103161 no-repeat center / cover url(/src/assets/home/background.svg);
+  background: #103161 no-repeat center / cover url(/src/assets/home/header-background.svg);
 
   #header-wrapped-content {
     display: flex;
@@ -46,7 +46,6 @@ header {
       height: 100%;
       object-fit: cover;
       image-rendering: pixelated;
-      user-select: none;
     }
   }
 }
@@ -61,7 +60,7 @@ header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-top: 180px;
+    margin: 90px 0;
     gap: 200px; 
 
     div {
@@ -75,12 +74,51 @@ header {
     img {
       border-radius: 20px;
       border: #fff solid 3px;
-      user-select: none;
+      max-width: 100%;
-      width: 400px;
+      height: auto;
     }
   }
 }
 
+#invite-banner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 350px;
+  background: #1e7ebf no-repeat center / cover url(/src/assets/home/invite-banner.svg);
+  border-radius: 20px;
+  text-align: center;
+
+  h2 {
+    font-size: 3rem;
+  }
+  p {
+    font-size: 1.3rem;
+    margin-bottom: 20px;
+  }
+  div {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #0f2952;
+    border-radius: 10px;
+    min-width: 110px;
+    min-height: 50px;
+    cursor: pointer;
+    transition: border 0.3s;
+  }
+  a:hover {
+    border: #fff solid 2px;
+  }
+}
+
 .shift-right {
   margin-left: auto; 
 }
@@ -89,6 +127,10 @@ header {
   margin: auto;
 }
 
+.row-reverse {
+  flex-direction: row-reverse;
+}
+
 @media only screen and (max-width: 1100px) {
   header {
     height: 750px;
@@ -100,4 +142,38 @@ header {
   #header-wrapped-profile {
     margin-bottom: 30px;
   }
+  #what-about {
+    li {
+      gap: 100px;
+    }
+  }
+}
+
+@media only screen and (max-width: 815px) {
+  #what-about {
+    li {
+      flex-direction: column;
+      text-align: center;
+      margin: 50px 0;
+      gap: 50px;
+    }
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  header {
+    height: 900px;
+    
+    #header-wrapped-content {
+      padding: 20px 50px;
+    }
+  }
+}
+
+@media only screen and (max-width: 420px) {
+  header {
+    #header-wrapped-content {
+      padding: 20px 20px;
+    }
+  }
 }

src/styles/main.css

@@ -46,6 +46,11 @@ a {
   text-decoration: none;
 }
 
+img {
+   pointer-events: none;
+   user-select: none;
+}
+
 nav {
   position: absolute;
   display: flex;