Finish: homepage

Complete homepage contents.
Final things to do:
Font
Images

src/components/developers.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+function Developers() {
+    return(
+        <div className="w-full p-8 md:p-16 lg:p-24" id="learn">
+            <div className="md:w-[85%] m-auto md:grid md:grid-cols-2 md:gap-8">
+                <div>
+                    <h1 className="text-7xl py-4 font-bold text-center text-rhino-purple">
+                        Perfect for developers
+                    </h1>
+                    <p className="text-white text-2xl py-4">
+                        Developers will fall in love with our vast software repositories which are always up-to-date. User-repositories such as Pacstall can help provide development libraries that are critical for your project. With codium preinstalled on your system you can begin doing what you do best, instantly. 
+                    </p>
+                    <a href="download" className="inline-flex justify-center items-center py-3 px-5 text-base text-center rounded-lg bg-rhino-purple hover:scale-105 text-white transition-all text-lg">
+                            Read the wiki
+                    <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
+                    </a>
+                </div>
+                <div className="py-8 md:py-0">
+                    <img src="img/home/developers.webp" className="w-full rounded-lg" alt="Unicorn Desktop with open windows." />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Developers;

src/components/navbar.jsx

@@ -26,8 +26,8 @@ const baritems = [
         goto: "Download"
     },
     {
-        link: "/news/",
-        goto: "News"
+        link: "https://blog.rhinolinux.org",
+        goto: "Blog"
     },
     {
         link: "https://wiki.rhinolinux.org",

src/components/quote.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const quoteText = [
+    {
+        quote: "Rhino Linux's latest release makes it the Swiss Army knife of Linux distributions.",
+        author: "Jack Wallen",
+        link: "https://www.zdnet.com/article/rhino-linux-latest-release-makes-it-the-swiss-army-knife-of-linux-distributions/",
+        source: "ZDNET"
+    },
+];
+
+function Quote() {
+    return (
+        <div className="md:w-[85%] m-auto md:grid md:grid-cols-1 md:gap-4">
+            {quoteText.map((item, index) => (
+                <blockquote key={index} className="text-2xl italic text-white text-center w-full p-8 md:p-16 lg:p-24">
+                    <p>"{item.quote}"</p>
+                    <p className="text-white">- {item.author}, <a href={item.link} className="text-rhino-purple">{item.source}</a></p>
+                </blockquote>
+            ))}
+        </div>
+    );
+}
+
+export default Quote;

src/components/unicorn.jsx

@@ -1,16 +1,27 @@
 import React from "react";
 
 function Unicorn() {
-    <div className="w-full p-8 md:p-16 lg:p-24">
-        <div className="grid grid-cols-2 gap-4">
-            <div>
-                <h1 className="text-xl text-rhino-purple">
-                    Unicorn built-in
-                </h1>
-
+    return(
+        <div className="w-full p-8 md:p-16 lg:p-24" id="learn">
+            <div className="md:w-[85%] m-auto md:grid md:grid-cols-2 md:gap-8">
+                <div>
+                    <h1 className="text-7xl font-bold text-center py-4 text-rhino-purple">
+                        Unicorn built-in
+                    </h1>
+                    <p className="text-white text-2xl py-4">
+                    Rhino Linux comes preinstalled with it's own in-house desktop experience, Unicorn, a custom built XFCE desktop experience combining the best of the traditional and modern takes on the desktop experience. Unicorn is both fast as well as elegant, and perfectly adapted for your needs.
+                    </p>
+                    <a href="download" className="inline-flex justify-center items-center py-3 px-5 text-base text-center rounded-lg bg-rhino-purple hover:scale-105 text-white transition-all text-lg">
+                            Learn more
+                    <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
+                    </a>
+                </div>
+                <div className="py-8 md:py-0">
+                    <img src="img/home/image.png" className="w-full rounded-lg" alt="Unicorn Desktop with open windows." />
+                </div>
             </div>
         </div>
-    </div>
+    );
 }
 
 export default Unicorn;

src/pages/index.jsx

@@ -1,10 +1,16 @@
 import React from "react";
 import Hero from "../components/hero";
+import Unicorn from "../components/unicorn";
+import Developers from "../components/developers"
+import Quote from "../components/quote";
 
 export default function Home() {
   return (
     <main>
       <Hero />
+      <Unicorn />
+      <Developers />
+      <Quote />
     </main>
   );
 }