Add Unicorn page

Create and add the Unicorn page
Fix quoteblock italics

src/components/content.jsx

@@ -18,23 +18,15 @@ const contentData = [
     buttonText: "Read our wiki",
     buttonLink: "https://wiki.rhinolinux.org",
   },
-  {
-    title: "Adaptive, to any workflow.",
-    description:
-      " Whether you prefer the traditional floating windows, or are a fanatic of tiling window managers, Unicorn is perfect for you. With optional auto-tiling you can easily toggle between floating and tiling at the press of a button.",
-    imgSrc: "img/home/tiling.webp",
-    buttonText: null, // No button for the third one
-    buttonLink: null, // No button link
-  },
 ];
 
 function Content() {
   return (
-    <div className="w-full p-8 md:p-16 lg:p-24" id="learn">
+    <div className="w-full px-8 md:px-16 lg:px-24" id="learn">
       {contentData.map((item, index) => (
         <div
           key={index}
-          className="md:w-[85%] m-auto md:grid md:grid-cols-2 md:gap-8 mb-12"
+          className="md:w-[85%] m-auto md:grid py-12 md:grid-cols-2 md:gap-8"
         >
           <div>
             <h1 className="text-6xl font-bold py-4 text-rhino-purple">

src/components/footer.jsx

@@ -12,7 +12,7 @@ function Footer() {
     return(
         <footer className="p-8">
             <hr className="md:w-[85%] h-1 mx-auto my-4 bg-site-300 border-0 rounded" />
-            <p className="mb-4 text-center text-off-white text-3xl">
+            <p className="mb-4 text-center text-off-white text-2xl">
                 {footerItems.map((item, index) => (
                 <span key={index}>
                     <a href={item.href} className="text-rhino-purple">

src/components/quote.jsx

@@ -13,8 +13,8 @@ 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>
+                <blockquote key={index} className="text-2xl text-white text-center w-full p-8 md:p-16 lg:p-24">
+                    <p className="italic">"{item.quote}"</p>
                     <p className="text-white">- {item.author}, <a href={item.link} className="text-rhino-purple">{item.source}</a></p>
                 </blockquote>
             ))}

src/components/unicorn/content.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+// Array holding the data for each section
+const contentData = [
+  {
+    title: "Adaptive, to any workflow.",
+    description:
+      " Whether you prefer the traditional floating windows, or are a fanatic of tiling window managers, Unicorn is perfect for you. With optional auto-tiling you can easily toggle between floating and tiling at the press of a button.",
+    imgSrc: "img/unicorn/tiling.webp",
+    buttonText: "Learn the keybinds",
+    buttonLink: "https://wiki.rhinolinux.org/user/unicorn",
+  },
+  {
+    title: "A beautiful app grid",
+    description:
+      "Our application grid, Lightpad, is a simple and powerful application launcher that is Wayland compatible. We have made modifications to the theming of Lightpad to integrate perfectly into Unicorn and Rhino Linux.",
+    imgSrc: "img/unicorn/appgrid.webp",
+    buttonText: null,
+    buttonLink: null,
+  },
+  {
+    title: "Modern desktop management",
+    description:
+      "You can switch between virtual desktops with ease. We have loaded in Xfdashboard, with many minor tweaks and improvements. Xfdashboard brings a gnome-shell like virtual desktop and èxpose built right into XFCE. ",
+    imgSrc: "img/unicorn/xfdashboard.webp",
+    buttonText: null,
+    buttonLink: null,
+  },
+];
+
+function Content() {
+  return (
+    <div className="w-full px-8 md:px-16 lg:px-24" id="learn">
+      {contentData.map((item, index) => (
+        <div
+          key={index}
+          className="md:w-[85%] m-auto md:grid py-12 md:grid-cols-2 md:gap-8"
+        >
+          <div>
+            <h1 className="text-5xl unicorn font-bold py-4 text-rhino-purple">
+              {item.title}
+            </h1>
+            <p className="text-white text-2xl py-4">{item.description}</p>
+
+            {/* Only display the button for the first two items */}
+            {item.buttonText && item.buttonLink && index < 2 && (
+              <a
+                href={item.buttonLink}
+                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"
+              >
+                {item.buttonText}
+                <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={item.imgSrc}
+              className="w-full rounded-lg"
+              alt={item.title}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default Content;

src/components/unicorn/hero.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import NavBar from '../navbar';
+
+function Hero() {
+    return(
+        <section className="bg-orb-pattern bg-no-repeat bg-center-x bg-center-y bg-cover">
+            <div className="bg-overlay w-full h-auto">
+            <NavBar />
+            <div className="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
+                <h3 className="mb-4 text-2xl tracking-tight leading-none text-white font-bold">Beautiful, Elegant, Adaptive.</h3>
+                <h1 className="mb-4 text-4xl tracking-tight leading-none text-white font-bold md:text-5xl lg:text-6xl">The Unicorn Desktop.</h1>
+                <p className="mb-8 text-lg font-normal lg:text-xl sm:px-16 xl:px-48 text-white">A desktop experienced designed to be both modern and fast.
+                </p>
+            </div>
+            </div>
+        </section>
+    );
+}
+
+export default Hero;

src/pages/unicorn.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Hero from "../components/unicorn/hero";
+import Content from "../components/unicorn/content";
+import Footer from "../components/footer";
+
+export default function Home() {
+  return (
+    <main>
+      <Hero />
+      <Content />
+      <Footer />
+    </main>
+  );
+}

src/styles/globals.css

@@ -49,4 +49,11 @@ code, kbd, samp, pre {
 
 body {
   background-color: #19142d;
+}
+
+.unicorn {
+  background: #fefefe;
+  background: linear-gradient(90deg, rgba(193,0,128,1) 0%, rgba(212,4,255,1) 33%, rgba(139,0,231,1) 67%, rgb(79, 55, 144) 100%);
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
 }

tailwind.config.js

@@ -19,6 +19,7 @@ module.exports = {
       },
       backgroundImage: {
         'hero-pattern': "url('/img/blobs.png')",
+        'orb-pattern': "url('/img/orb.png')",
       },
     },
   },