Add: news page

Finally got around to adding the news page. Still need to commit blog post porting, however will do that closer to the time of the website's release.

src/components/news/hero.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+function Hero() {
+    return(
+        <div className="lg:w-[90%] w-full m-auto">
+            <div className="text-center">
+                <h1 className="lg:text-6xl text-4xl text-rhino-purple font-bold pt-4 p-2">
+                   News Feed
+                </h1>
+                <h2 className="text-white font-lighter lg:text-3xl text-2xl p-2">
+                    Find news relating to Rhino Linux & its development
+                </h2>
+            </div>
+        </div>
+    )
+}
+
+export default Hero;

src/components/news/posts.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Hero from '../../components/news/hero';
+import posts from '../../items/posts';
+
+function Posts() {
+    return (
+        <div className="w-full p-4 m-auto">
+            <div className="p-4 md:w-[65%] m-auto bg-indigo-950 rounded-lg">
+            {posts.map((post, index) => {
+                return (
+                    <div key={index} className="p-4" id={post.date}>
+                        <h1 className="text-5xl my-2 text-center text-white">
+                            {post.title}
+                        </h1>
+                        {post.banner && <img src={post.banner} alt="Post Banner" className="w-full" />}
+                        <p className="text-white my-2 text-sm">
+                            Posted: {post.date}
+                        </p>
+                        {post.content.map((paragraph, index) => {
+                            return (
+                                <p key={index} className="text-white my-2 text-lg">
+                                    {paragraph}
+                                </p>
+                            );
+                        })}
+                        <button
+                            onClick={() => {
+                                const postLink = window.location.href + `#${post.date}`;
+                                navigator.clipboard.writeText(postLink);
+                                alert('Post link copied to clipboard!');
+                            }}
+                            className="bg-rhino-purple hover:bg-blue-700 text-white py-2 px-4 rounded-lg"
+                        >
+                            Copy post link
+                        </button>
+                    </div>
+                );
+            })}
+            </div>
+        </div>
+    );
+}
+
+export default Posts;

src/items/posts.js

@@ -1,3 +1,4 @@
+// OPTIONS: title, date, banner, content
 const posts = [
     {
         title: "Rhino Linux 2024.1 + more",

src/pages/news.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Menu from "../components/navbar";
+import Hero from '../components/news/hero';
+import Posts from "../components/news/posts";
+import Footer from "../components/footer";
+
+export default function Home() {
+  return (
+    <main>
+      <Menu />
+      <Hero />
+      <Posts />
+      <Footer />
+    </main>
+  );
+}