better footer layout

Author: Fector101

docs/website/src/assets/css/quick-styles.css

@@ -182,4 +182,7 @@ span.code.green-shade {
 
 .text-align-center {
     text-align: center;
+}
+.gap-10{
+    gap: 10px;
 }

docs/website/src/ui/Footer/Footer.tsx

@@ -11,25 +11,28 @@ export default function Footer(): JSX.Element {
     const [date, setDate] = useState('');
 
     useEffect(() => {
-      fetch('/last-updated.txt')
-        .then(res => res.text())
-        .then(text => setDate(text));
+        fetch('/last-updated.txt')
+            .then(res => res.text())
+            .then(text => setDate(text));
     }, []);
     return (
-        <footer className='flex fd-column justify-content-cen text-align-center footer'>
+        <footer className='flex justify-content-cen text-align-center align-items-cen'>
             {/* <h2 className='footer-title'>Laner Documentation</h2>
             <p className='footer-subtitle'>A comprehensive guide to using Laner</p> */}
             {/* <p>Made with ❤️ using <Link to='https://react.dev/'>React</Link> and <Link to='https://vitejs.dev/'>Vite</Link></p> */}
             {/* <p>Documentation hosted on <Link to='https://vercel.com/'>Vercel</Link></p> */}
+            <div className="flex fd-column gap-10">
+                <p>Thoroughly Tested and supported by <Link to='https://github.com/Fector101/laner'>Laner</Link> </p>
+                <p>Last Updated: {date}, © 2023 Fector101</p>
+            </div>
 
-            <p>Thoroughly Tested and supported by <Link to='https://github.com/Fector101/laner'>Laner</Link> </p>
             <div className='support-links-box flex fd-column justify-content-cen text-align-center'>
-            <p>Find this project helpful?</p>
-            <p> consider buying me a <Link to='https://www.buymeacoffee.com/fector101' className="buy-me-a-coffee">Coffee ☕️</Link></p>
-            <p> Or a star on 🌟 <Link to='https://github.com/Fector101/android_notify'>GitHub.</Link></p>
-            <p>Your support helps maintain and improve the project.</p>
+                <p>Find this project helpful?</p>
+                <p> consider buying me a <Link to='https://www.buymeacoffee.com/fector101' className="buy-me-a-coffee">Coffee ☕️</Link></p>
+                <p> Or a star on 🌟 <Link to='https://github.com/Fector101/android_notify'>GitHub.</Link></p>
+                <p>Your support helps maintain and improve the project.</p>
             </div>
-            <p>Last Updated: {date}, © 2023 Fector101</p>
+
         </footer>
     )
 }

docs/website/src/ui/Footer/footer.css

@@ -2,9 +2,12 @@ footer{
     padding: 2rem 15px;
     background-color: #171716;
     font-size: 13px;
-    gap: 5px;
+    /* gap: 5px; */
     color: white;
     width: 100%;
+    gap: 50px;
+    flex-wrap: wrap;
+
 }
 footer .support-links-box{
     align-self: center;