Initial rewrite to astro

13 files changed, 619 insertions, 0 deletions

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..63b2010
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,41 @@
+import { useState } from "preact/hooks";
+export default function Navbar(){
+    const [navbar, setNavbar] = useState(false);
+    return (
+        <nav className="border-gray-200 bg-neutral-900">
+            <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+                <div className="flex items-center">
+                    <img src="/alure_flag.svg" className="mr-5" alt="Alure Flag" height="70" width="70"/>
+                    <span className="self-center text-2xl font-medium whitespace-nowrap dark:text-white"><p>Government</p><p>of Alure Regions</p></span>
+                </div>
+            <button data-collapse-toggle="navbar-default" type="button"
+                    className="transition duration-150 ease-out hover:ease-in inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                    aria-controls="navbar-default" aria-expanded="false" onClick={() => setNavbar(!navbar)}>
+                <span className="sr-only">Open main menu</span>
+                <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                     viewBox="0 0 17 14">
+                    <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                          d="M1 1h15M1 7h15M1 13h15"/>
+                </svg>
+            </button>
+            <div className={`w-full md:block md:w-auto ${navbar ? 'block' : 'hidden' }`}>
+                <ul className="font-medium text-lg flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 md:mt-0">
+                    {[
+                        ['Home', '/'],
+                        ['Updates', '/updates'],
+                        ['Services', '/services'],
+                        ['Travel Advisory', '/travel-advisory'],
+                    ].map(([title, url]) => (
+                        <li>
+                            <a href={url} className="transition duration-150 ease-out hover:ease-in block py-2 pl-3 pr-4 rounded md:border-0 md:p-0 text-white md:hover:text-blue-500 hover:bg-gray-700 hover:text-white md:hover:bg-transparent" onClick={() => setNavbar(!navbar)}>
+                                {title}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+</nav>
+
+)
+}
diff --git a/src/components/PSA.astro b/src/components/PSA.astro
new file mode 100644
index 0000000..ad2bcdf
--- /dev/null
+++ b/src/components/PSA.astro
@@ -0,0 +1,40 @@
+---
+import psaMessage from "./psa.json";
+let defaultStyle = "flex flex-row md:px-40 sm:px-30 sm:py-0.5 p-3 space-x-2";
+let styleImportant;
+let important;
+switch (psaMessage.important) {
+    case 0:
+        styleImportant = "hidden"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 1:
+        important = "Latest News:"
+        styleImportant = "bg-zinc-700"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 2:
+        important = "WARNING!"
+        styleImportant = "bg-yellow-700"
+        defaultStyle += ' ' + styleImportant
+        break;
+    case 3:
+        important = "EMERGENCY!"
+        styleImportant = "bg-red-800"
+        defaultStyle += ' ' + styleImportant
+        break;
+}
+---
+
+<div class={defaultStyle}>
+    <p class="text-lg font-medium sm:p-0">{important}</p>
+    <div class="flex sm:flex-row flex-col sm:space-x-3">
+        <p>{psaMessage.announcement}</p>
+        <p class="text-blue-200 hover:text-blue-500 active:text-blue-700">
+            {psaMessage.link && (
+                    <a href={psaMessage.link}>
+                        Learn more ↗
+                    </a>
+            )}</p>
+    </div>
+</div>
diff --git a/src/components/psa.json b/src/components/psa.json
new file mode 100644
index 0000000..d0d28ce
--- /dev/null
+++ b/src/components/psa.json
@@ -0,0 +1,5 @@
+{
+  "important": 0,
+  "announcement": "No important announcements at this time.",
+  "link": "/travel-advisory"
+}
diff --git a/src/components/travel-advisory/HistoryModal.jsx b/src/components/travel-advisory/HistoryModal.jsx
new file mode 100644
index 0000000..6449a6a
--- /dev/null
+++ b/src/components/travel-advisory/HistoryModal.jsx
@@ -0,0 +1,40 @@
+const HistoryModal = ({ isVisible, onClose, countries, dangerLevel, history }) => {
+    if (!isVisible) return null;
+    const handleClose = (e) => {
+        if(e.target.id === 'wrapper') onClose();
+    }
+
+    let historyList;
+    if (history && history.length > 0) {
+        historyList = history.map((event, index) => {
+            return (
+                <li key={index}>{event}</li>
+            )
+        })
+    } else {
+        historyList = <li>Currently no diplomatic/medical issues in this country.</li>;
+    }
+
+    return (
+        <div id="wrapper" className="fixed inset-0 bg bg-opacity-25 backdrop-blur-sm flex justify-center items-center" onClick={handleClose}>
+            <div className="w-[700px]">
+                <div className="flex flex-col">
+                    <div className="bg-zinc-800 p-5 rounded-lg border border-gray-700">
+                        <div className="divide-y space-y-3">
+                            <div>
+                                <h1 className="font-medium text-3xl">{countries}</h1>
+                                <h2 className="font-medium text-xl">{dangerLevel}</h2>
+                            </div>
+                            <div>
+                                <h1 className="font-medium text-2xl pt-3">History</h1>
+                                <ul>{historyList}</ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default HistoryModal;
diff --git a/src/components/travel-advisory/ListCountries.jsx b/src/components/travel-advisory/ListCountries.jsx
new file mode 100644
index 0000000..57817af
--- /dev/null
+++ b/src/components/travel-advisory/ListCountries.jsx
@@ -0,0 +1,65 @@
+import countriesData from './countries.json' assert { type: 'json' };
+import HistoryModal from "./HistoryModal";
+import { useState } from "preact/hooks";
+
+export function getDangerLevel(danger) {
+    let dangerLevel;
+    switch (danger) {
+        case 0:
+            dangerLevel = "Take normal security precautions"
+            break;
+        case 1:
+            dangerLevel = "Exercise a high degree of caution"
+            break;
+        case 2:
+            dangerLevel = "Avoid non-essential travel"
+            break;
+        case 3:
+            dangerLevel = "Avoid all travel"
+            break;
+        default:
+            dangerLevel = "Seems like the danger level is broken!"
+            break;
+    }
+
+    return dangerLevel;
+}
+
+export function Countries(){
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [showModal, setShowModal] = useState(false);
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [selectedDangerLevel, setSelectedDangerLevel] = useState(null);
+    const [selectedCountryHistory, setSelectedCountryHistory] = useState(null);
+    const countries = countriesData.countries;
+
+    return countries.map((country) => {
+        let dangerLevel = getDangerLevel(country.danger);
+
+        const settlementsList = country.settlements.map((settlement) => {
+            return (
+                <div key={settlement.name}>
+                    <h2 className="font-medium md:text-3xl text-xl">{settlement.name}</h2>
+                    <h2 className="text-base">{getDangerLevel(settlement.danger)}</h2>
+                </div>
+            )
+        })
+
+        return (
+            <div key="countries" id={'#' + country.url} className="bg-center bg-no-repeat bg-[image:var(--image-url)] bg-gray-500 bg-blend-multiply" style={{'--image-url': `url(${country.image})`}} >
+                <div className="sm:px-40 px-10 py-10 space-y-3">
+                    <h1 className="font-medium md:text-5xl text-3xl">{country.name}</h1>
+                    <h2 className="text-lg">{dangerLevel}</h2>
+                    <div className="space-y-3">{settlementsList}</div>
+                    <button className="transition duration-200 ease-in-out px-4 py-2 font-medium rounded-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800" onClick={()=> {
+                        setSelectedCountry(country.name);
+                        setSelectedDangerLevel(dangerLevel)
+                        setSelectedCountryHistory(country.history)
+                        setShowModal(true)
+                    }}>Information</button>
+                </div>
+                <HistoryModal isVisible={showModal} onClose={() => setShowModal(false)} countries={selectedCountry} dangerLevel={selectedDangerLevel} history={selectedCountryHistory} />
+            </div>
+        )
+    })
+}
diff --git a/src/components/travel-advisory/countries.json b/src/components/travel-advisory/countries.json
new file mode 100644
index 0000000..f50474c
--- /dev/null
+++ b/src/components/travel-advisory/countries.json
@@ -0,0 +1,253 @@
+{
+    "countries": [
+        {
+            "name": "Anatoli",
+            "url": "anatoli",
+            "danger": 0,
+            "image": "/countries/anatoli.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Auckland",
+            "url": "auckland",
+            "danger": 0,
+            "image": "/countries/auckland.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Aura Regions",
+            "url": "auraregions",
+            "danger": 0,
+            "image": "/countries/auraregions.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Birch Boat Town",
+            "url": "birchboattown",
+            "danger": 0,
+            "image": "/countries/birchboattown.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Birch Lodges Community Town",
+            "url": "birchlodges",
+            "danger": 0,
+            "image": "/countries/birchlodges.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Country Warp",
+            "url": "countrywarp",
+            "danger": 0,
+            "image": "/countries/countrywarp.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "The Federation of Doodads and Gizmos",
+            "url": "doodadsandgizmos",
+            "danger": 0,
+            "image": "/countries/doodadsandgizmos.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Eagle City",
+            "url": "eaglecity",
+            "danger": 0,
+            "image": "/countries/eaglecity.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Fegal",
+            "url": "fegal",
+            "danger": 3,
+            "image": "/countries/fegal.webp",
+            "settlements": [],
+            "history": [
+                "May 17th, 2023: Fegal has border security issues and it has not been solved as of now."
+            ]
+        },
+        {
+            "name": "Halcandra",
+            "url": "halcandra",
+            "danger": 0,
+            "image": "/countries/halcandra.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Inkytown",
+            "url": "inkytown",
+            "danger": 0,
+            "image": "/countries/inkytown.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Kemonomimi Republic",
+            "url": "kemonomimi-republic",
+            "danger": 0,
+            "image": "/countries/kemonomimi.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Knowle Regions",
+            "url": "knowle-regions",
+            "danger": 0,
+            "image": "/countries/knowleregions.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Lion Land",
+            "url": "lionland",
+            "danger": 0,
+            "image": "/countries/lionland.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "landrepeatland",
+            "url": "landrepeatland",
+            "danger": 0,
+            "image": "/countries/landrepeatland.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Mart's Extraordinarily Sublime State",
+            "url": "mess",
+            "danger": 0,
+            "image": "/countries/mess.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Mojave",
+            "url": "mojave",
+            "danger": 0,
+            "image": "/countries/mojave.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Open Republic",
+            "url": "open-republic",
+            "danger": 0,
+            "image": "/countries/openrepublic.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "PLC",
+            "url": "plc",
+            "danger": 0,
+            "image": "/countries/plc.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Plutonia Imperium",
+            "url": "plutonia-imperium",
+            "danger": 0,
+            "image": "/countries/plutoniaimperium.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "The Federal Democracy of Solstice",
+            "url": "solstice",
+            "danger": 0,
+            "image": "/countries/solstice.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Southeastern Islands",
+            "url": "southeastern-islands",
+            "danger": 1,
+            "image": "/countries/sei.webp",
+            "settlements": [
+                {
+                    "name": "Forêt Québec",
+                    "danger": 3
+                }
+            ],
+            "history": [
+                "July 15th, 2023: Frequent instances of instability have been surfacing in Forêt Québec lately."
+            ]
+        },
+        {
+            "name": "Sulópolis",
+            "url": "sulopolis",
+            "danger": 0,
+            "image": "/countries/sulopolis.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "TAY",
+            "url": "tay",
+            "danger": 0,
+            "image": "/countries/tay.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Union of Soviet Sovereign Republics",
+            "url": "ussr",
+            "danger": 0,
+            "image": "/countries/ussr.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Veronian Controlled Territories",
+            "url": "veronian-controlled-territories",
+            "danger": 0,
+            "image": "/countries/vct.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "Vyxalla",
+            "url": "vyxalla",
+            "danger": 0,
+            "image": "/countries/vyxalla.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "The Republic of Whale City",
+            "url": "whale-city",
+            "danger": 0,
+            "image": "/countries/whalecity.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "The Federation of Yavno",
+            "url": "yavno",
+            "danger": 0,
+            "image": "/countries/yavno.webp",
+            "settlements": [],
+            "history": []
+        },
+        {
+            "name": "The Republic of You on Kazoo",
+            "url": "you-on-kazoo",
+            "danger": 0,
+            "image": "/countries/youonkazoo.webp",
+            "settlements": [],
+            "history": []
+        }
+    ]
+}
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 0000000..acef35f
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
new file mode 100644
index 0000000..6aeea4e
--- /dev/null
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,31 @@
+---
+import Navbar from "../components/Navbar";
+import PSA from "../components/PSA.astro";
+
+const { title, description } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content={description}>
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<div class="sm:px-10 px-5 py-0.5 font-medium space-x-3 text-right">
+			<a href="https://aircs.racing" class="transition duration-150 ease-out hover:ease-in md:hover:text-red-500">aircs.racing ↗</a>
+			<a href="https://alee14.me" class="transition duration-150 ease-out hover:ease-in md:hover:text-green-500">alee14.me ↗</a>
+		</div>
+		<PSA/>
+		<Navbar client:load />
+		<slot />
+		<footer class="flex flex-col text-center py-3 space-y-2 bg-blue-950 text-light text-sm sm:text-base px-5 sm:px-0">
+			<p>Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</p>
+			<p>This website is proudly written using Astro and Tailwind CSS</p>
+		</footer>
+	</body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 0000000..902886e
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,62 @@
+---
+import Layout from '../layouts/Layout.astro';
+import "../styles/globals.css";
+---
+
+<Layout title="Home" description="The official website of the Government of Alure Regions">
+	<main class="flex flex-col">
+		<div class="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-500 bg-blend-multiply">
+			<div class="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56 space-y-3">
+				<h1 class="font-medium md:text-5xl text-4xl">Welcome to the Alure Regions</h1>
+				<h2 class="font-light md:text-3xl text-xl">The official website of the Government of Alure Regions</h2>
+			</div>
+		</div>
+		<ul>
+			<li>
+				<div class="bg-center bg-no-repeat bg-[url('/regions/alee-isle.webp')] bg-gray-600 bg-blend-multiply">
+					<div class="sm:px-40 px-10 py-14 space-y-2">
+						<h1 class="font-medium sm:text-5xl text-3xl">Alee Isle</h1>
+						<span>Est. 2017 - Premier: Alee</span>
+						<h2 class="text-lg">Capital of Alure Regions and the original home of MinePot</h2>
+					</div>
+				</div>
+			</li>
+			<li>
+				<div class="bg-center bg-no-repeat bg-[url('/regions/breadcroust.webp')] bg-gray-600 bg-blend-multiply">
+					<div class="sm:px-40 px-10 py-14 space-y-2">
+						<h1 class="font-medium sm:text-5xl text-3xl">BreadCroust</h1>
+						<span>Est. 2018 - Premier: Croust</span>
+						<h2 class="text-lg">Home to MinePot Barton Centre and athletics</h2>
+					</div>
+				</div>
+			</li>
+			<li>
+				<div class="bg-center bg-no-repeat bg-[url('/regions/skycity.webp')] bg-gray-600 bg-blend-multiply">
+					<div class="sm:px-40 px-10 py-14 space-y-2">
+						<h1 class="font-medium sm:text-5xl text-3xl">SkyCity</h1>
+						<span>Est. 2018 - Premier: Rahilu</span>
+						<h2 class="text-lg">A city that floats in the sky</h2>
+					</div>
+				</div>
+			</li>
+			<li>
+				<div class="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
+					<div class="sm:px-40 px-10 py-14 space-y-2">
+						<h1 class="font-medium sm:text-5xl text-3xl">Silicon Valley</h1>
+						<span>Est. 2018 - Premier: Inkydink</span>
+						<h2 class="text-lg">Where all things tech-related lie</h2>
+					</div>
+				</div>
+			</li>
+		</ul>
+		<div class="sm:px-40 px-10 py-3 space-y-3">
+			<h1 class="text-2xl font-medium" id="about">About Alure Regions</h1>
+			<p>Alure Regions was founded in July 2023 with the goal of achieving greater autonomy in our regions.</p>
+			<p>Originally known as Alee Isle Regions, we later became Southeastern Islands before branching out on our own.</p>
+			<p>We are committed to continuous improvement and growth as small regions.</p>
+			<!--<h1 class="text-2xl font-medium">Latest Updates</h1>
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">{postPreviews}</div>-->
+			<a href="/updates"><p class="text-blue-500 hover:text-blue-300 pt-2">View more</p></a>
+		</div>
+	</main>
+</Layout>
diff --git a/src/pages/travel-advisory.astro b/src/pages/travel-advisory.astro
new file mode 100644
index 0000000..693a4fe
--- /dev/null
+++ b/src/pages/travel-advisory.astro
@@ -0,0 +1,32 @@
+---
+import Countries from '../components/travel-advisory/countries.json'
+import Layout from "../layouts/Layout.astro";
+---
+<Layout>
+    <main class="flex flex-col">
+        <div>
+            <h1 class="p-5 sm:px-40 px-10 text-3xl" id="legend">Legend</h1>
+            <ul>
+                <li class="p-6 sm:px-40 px-10 bg-green-950">
+                    <p class="font-medium text-lg">Take normal security precautions</p>
+                    <p>Take similar precautions to those you would take in Alure Regions.</p>
+                </li>
+                <li class="p-6 sm:px-40 px-10 bg-yellow-700">
+                    <p class="font-medium text-lg">Exercise a high degree of caution</p>
+                    <p>There are certain safety and security concerns or the situation could change quickly. Be very cautious at all times, monitor local media and follow the instructions of local authorities.</p>
+                    <p><b class="font-semibold"> IMPORTANT:</b> The two levels below are official Government of Alure Regions Travel Advisories and are issued when the safety and security of Alurians travelling or living in the country or region may be at risk.</p>
+                </li>
+                <li class="p-6 sm:px-40 px-10 bg-orange-700">
+                    <p class="font-medium text-lg">Avoid non-essential travel</p>
+                    <p>Your safety and security could be at risk. You should think about your need to travel to this country, territory or region based on family or business requirements, knowledge of or familiarity with the region, and other factors. If you are already there, think about whether you really need to be there. If you do not need to be there, you should think about leaving.</p>
+                </li>
+                <li class="p-6 sm:px-40 px-10 bg-red-950">
+                    <p class="font-medium text-lg">Avoid all travel</p>
+                    <p>You should not travel to this country, territory or region. Your personal safety and security are at great risk. If you are already there, you should think about leaving if it is safe to do so.</p>
+                </li>
+            </ul>
+        </div>
+        <div class="sm:px-40 px-10 py-3 bg-blue-800"><h2 class="font-medium text-lg"><b class="font-bold">WARNING!</b> This page may be inaccurate at times, refer to the <a href="https://discord.com/channels/277922530973581312/1019705091336446052" class="transition ease-in-out transition-200 text-blue-300 hover:text-blue-200 active:text-blue-500">Minecraft General Announcements</a> channel for the latest updates</h2></div>
+        <Countries client:visible />
+    </main>
+</Layout>
diff --git a/src/posts/outbreak.md b/src/posts/outbreak.md
new file mode 100644
index 0000000..d3e4a40
--- /dev/null
+++ b/src/posts/outbreak.md
@@ -0,0 +1,15 @@
+---
+title: Parasite Outbreak
+description: We are advising people to be careful when travelling around the world.
+author: The President of the Alure Regions
+date: '2023-07-19'
+tags: ['announcement', 'travel']
+---
+# Parasite Outbreak
+As of recently, we were made aware about the recent outbreak. It may have appeared that it is spreading around the world, we are advising people to be careful when travelling.
+
+# Our response
+We have also made a travel advisory statement for people who are travelling around the world. You can find it [here](/travel-advisory).
+
+# What you can do
+If you are currently travelling, be sure to self-isolate for 2 weeks at a hotel. If you are currently having symptoms, be sure to contact local health authorities.
diff --git a/src/posts/website-launched.md b/src/posts/website-launched.md
new file mode 100644
index 0000000..64ca8f3
--- /dev/null
+++ b/src/posts/website-launched.md
@@ -0,0 +1,13 @@
+---
+title: Website Launched
+description: Our new website is now available!
+author: The President of the Alure Regions
+date: '2023-07-15'
+tags: ['announcement']
+---
+# Our new website has officially launched!
+As you have seen, we have been actively developing this brand new site!
+
+You can expect updates from us, whether if its updating travel advisories or announcing a brand new government service within Alure Regions.
+
+Of course, this site will get regularly updated overtime, so stay tuned for more updates to this site!
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..f8c09c8
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,20 @@
+@import '@fontsource-variable/exo';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+}
+
+body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+            to bottom,
+            transparent,
+            rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}