From ddbe4fa61425f6a871a23238ce15a0929e201e6e Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Mon, 17 Jul 2023 15:08:57 -0400
Subject: Modularizing certain elements; Working information section

---
 app/layout.js                               |  44 +--
 app/page.js                                 |   8 +-
 app/services/page.js                        |  14 +
 app/travel-advisory/countries.json          | 486 ++++++----------------------
 app/travel-advisory/page.js                 |  70 +---
 app/updates/[slug]/page.js                  |   5 +-
 app/updates/page.js                         |  14 +-
 components/DateFormatter.js                 |   9 -
 components/Header.js                        |  12 +
 components/Navbar.js                        |  46 +++
 components/PSA.js                           |  38 +++
 components/PostPreview.js                   |  15 -
 components/getPostMetadata.js               |  20 --
 components/psa.json                         |   5 +
 components/travel-advisory/HistoryModal.js  |  42 +++
 components/travel-advisory/ListCountries.js |  66 ++++
 components/updates/DateFormatter.js         |   9 +
 components/updates/PostPreview.js           |  15 +
 components/updates/getPostMetadata.js       |  20 ++
 posts/welcome.md                            |   8 +-
 public/countries/anatoli.webp               | Bin 0 -> 323526 bytes
 public/countries/auckland.webp              | Bin 0 -> 458952 bytes
 public/countries/auraregions.webp           | Bin 0 -> 281660 bytes
 public/countries/birchboattown.webp         | Bin 0 -> 322756 bytes
 public/countries/birchlodges.webp           | Bin 0 -> 405156 bytes
 public/countries/countrywarp.webp           | Bin 0 -> 344924 bytes
 public/countries/eaglecity.webp             | Bin 0 -> 332810 bytes
 public/countries/fegal.webp                 | Bin 0 -> 325982 bytes
 public/countries/halcandra.webp             | Bin 0 -> 201310 bytes
 public/countries/inkytown.webp              | Bin 0 -> 331034 bytes
 public/countries/kemonomimi.webp            | Bin 0 -> 420832 bytes
 public/countries/knowleregions.webp         | Bin 0 -> 459180 bytes
 public/countries/lionland.webp              | Bin 0 -> 357390 bytes
 public/countries/mess.webp                  | Bin 0 -> 572236 bytes
 public/countries/mojave.webp                | Bin 0 -> 343488 bytes
 public/countries/openrepublic.webp          | Bin 0 -> 456814 bytes
 public/countries/plc.webp                   | Bin 0 -> 521046 bytes
 public/countries/plutoniaimperium.webp      | Bin 0 -> 309850 bytes
 public/countries/sei.webp                   | Bin 0 -> 423086 bytes
 public/countries/solstice.webp              | Bin 0 -> 335702 bytes
 public/countries/sulopolis.webp             | Bin 0 -> 402188 bytes
 public/countries/tay.webp                   | Bin 0 -> 451232 bytes
 public/countries/ussr.webp                  | Bin 0 -> 594838 bytes
 public/countries/vct.webp                   | Bin 0 -> 436692 bytes
 public/countries/whalecity.webp             | Bin 0 -> 614794 bytes
 public/countries/yavno.webp                 | Bin 0 -> 474440 bytes
 public/countries/youonkazoo.webp            | Bin 0 -> 387082 bytes
 47 files changed, 388 insertions(+), 558 deletions(-)
 create mode 100644 app/services/page.js
 delete mode 100644 components/DateFormatter.js
 create mode 100644 components/Header.js
 create mode 100644 components/Navbar.js
 create mode 100644 components/PSA.js
 delete mode 100644 components/PostPreview.js
 delete mode 100644 components/getPostMetadata.js
 create mode 100644 components/psa.json
 create mode 100644 components/travel-advisory/HistoryModal.js
 create mode 100644 components/travel-advisory/ListCountries.js
 create mode 100644 components/updates/DateFormatter.js
 create mode 100644 components/updates/PostPreview.js
 create mode 100644 components/updates/getPostMetadata.js
 create mode 100644 public/countries/anatoli.webp
 create mode 100644 public/countries/auckland.webp
 create mode 100644 public/countries/auraregions.webp
 create mode 100644 public/countries/birchboattown.webp
 create mode 100644 public/countries/birchlodges.webp
 create mode 100644 public/countries/countrywarp.webp
 create mode 100644 public/countries/eaglecity.webp
 create mode 100644 public/countries/fegal.webp
 create mode 100644 public/countries/halcandra.webp
 create mode 100644 public/countries/inkytown.webp
 create mode 100644 public/countries/kemonomimi.webp
 create mode 100644 public/countries/knowleregions.webp
 create mode 100644 public/countries/lionland.webp
 create mode 100644 public/countries/mess.webp
 create mode 100644 public/countries/mojave.webp
 create mode 100644 public/countries/openrepublic.webp
 create mode 100644 public/countries/plc.webp
 create mode 100644 public/countries/plutoniaimperium.webp
 create mode 100644 public/countries/sei.webp
 create mode 100644 public/countries/solstice.webp
 create mode 100644 public/countries/sulopolis.webp
 create mode 100644 public/countries/tay.webp
 create mode 100644 public/countries/ussr.webp
 create mode 100644 public/countries/vct.webp
 create mode 100644 public/countries/whalecity.webp
 create mode 100644 public/countries/yavno.webp
 create mode 100644 public/countries/youonkazoo.webp

diff --git a/app/layout.js b/app/layout.js
index 97c14ab..fa5c790 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -1,7 +1,7 @@
 import './globals.css'
 import { Exo } from 'next/font/google'
-import Link from 'next/link'
-import Image from "next/image";
+import Navbar from "@/components/Navbar";
+import PSA from "@/components/PSA";
 
 const exo = Exo({ subsets: ['latin'] })
 
@@ -18,43 +18,11 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body className={exo.className}>
       <div className="sm:px-10 px-5 py-0.5 font-medium space-x-3 text-right">
-          <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">aircs.racing ↗</a>
-          <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">alee14.me ↗</a>
+          <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-red-500">aircs.racing ↗</a>
+          <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-green-500">alee14.me ↗</a>
       </div>
-      <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">
-                  <Image src="/alure_flag.svg" className="mr-5" alt="Alure Flag" width={70} height={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-gray-100 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">
-                  <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="hidden w-full md:block md:w-auto" id="navbar-default">
-                  <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', '#'],
-                          ['Travel Advisory', '/travel-advisory'],
-                      ].map(([title, url]) => (
-                          <li key="links">
-                              <Link 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" aria-current="page">
-                                  {title}
-                              </Link>
-                          </li>
-                      ))}
-                  </ul>
-              </div>
-          </div>
-      </nav>
+      <PSA/>
+      <Navbar/>
       {children}
       <footer className="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>
diff --git a/app/page.js b/app/page.js
index 1ff6dab..ec05d34 100644
--- a/app/page.js
+++ b/app/page.js
@@ -7,8 +7,8 @@ export default function Home() {
     <main className="flex flex-col">
         <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-500 bg-blend-multiply">
             <div className="px-4 mx-auto max-w-screen-xl text-center py-24 lg:py-56 space-y-3">
-                <h1 className="font-medium md:text-5xl text-2xl">Welcome to the Alure Regions</h1>
-                <h2 className="font-light md:text-3xl text-lg">The official website of the Government of Alure Regions</h2>
+                <h1 className="font-medium md:text-5xl text-4xl">Welcome to the Alure Regions</h1>
+                <h2 className="font-light md:text-3xl text-xl">The official website of the Government of Alure Regions</h2>
             </div>
         </div>
             <ul>
@@ -49,9 +49,11 @@ export default function Home() {
                     </div>
                 </li>
             </ul>
-        <div className="sm:px-40 px-10 py-3">
+        <div className="sm:px-40 px-10 py-3 space-y-3">
             <h1 className="text-2xl font-medium" id="about">About Alure Regions</h1>
             <p>Founded in July 2023, the goal of Alure Regions is to have more freedom on our regions.</p>
+            <p>Originally Alee Isle Regions then formed to become Southeastern Islands and then split from it.</p>
+            <p>We strife on trying to become stronger and better, as small regions.</p>
             <h1 className="text-2xl font-medium">Latest Updates</h1>
         </div>
     </main>
diff --git a/app/services/page.js b/app/services/page.js
new file mode 100644
index 0000000..3e0044d
--- /dev/null
+++ b/app/services/page.js
@@ -0,0 +1,14 @@
+import Header from "@/components/Header";
+
+export const metadata = {
+    title: 'Services',
+    description: 'Information whether its safe to travel to other countries',
+}
+
+export default function Services() {
+    return (
+        <main className="flex flex-col">
+            <Header title={metadata.title} description={metadata.description} />
+        </main>
+    )
+}
diff --git a/app/travel-advisory/countries.json b/app/travel-advisory/countries.json
index 7d031c1..b8fd936 100644
--- a/app/travel-advisory/countries.json
+++ b/app/travel-advisory/countries.json
@@ -2,507 +2,205 @@
     "countries": [
         {
             "name": "Anatoli",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Anatoli City",
-                    "status": 0
-                },
-                {
-                    "name": "Wairua",
-                    "status": 0
-                },
-                {
-                    "name": "Vremya",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/anatoli.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Auckland",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/auckland.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Aura Regions, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Baxford",
-                    "status": 0
-                },
-                {
-                    "name": "Energy Cove",
-                    "status": 0
-                },
-                {
-                    "name": "Motley Island",
-                    "status": 0
-                },
-                {
-                    "name": "Treasure Island",
-                    "status": 0
-                }
-
-            ],
+            "name": "Aura Regions",
+            "danger": 0,
+            "image": "/countries/auraregions.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Birch Boat Town",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/birchboattown.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Birch Lodges Community Town",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/birchlodges.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Country Warp",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/countrywarp.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Eagle City",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/eaglecity.webp",
             "settlements": [],
             "history": []
         },
         {
             "name": "Fegal",
-            "status": 3,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "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."
+                "May 17th, 2023: Fegal has border security issues and it has not been solved as of now."
             ]
         },
         {
             "name": "Halcandra",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/halcandra.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Inkytown",
-            "status": 0,
-            "image": "",
+            "danger": 0,
+            "image": "/countries/inkytown.webp",
             "settlements": [],
             "history": []
         },
         {
-            "name": "Kemonomimi Republic, The",
-            "status": 1,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Melanie City",
-                    "status": 0
-                },
-                {
-                    "name": "Shishiro",
-                    "status": 0
-                },
-                {
-                    "name": "Koinu",
-                    "status": 0
-                },
-                {
-                    "name": "Akiyama",
-                    "status": 0
-                },
-                {
-                    "name": "Elysia",
-                    "status": 0
-                },
-                {
-                    "name": "Sakamoto",
-                    "status": 0
-                },
-                {
-                    "name": "Tsumugi",
-                    "status": 0
-                },
-                {
-                    "name": "Inugake",
-                    "status": 0
-                },
-                {
-                    "name": "Amatsuka",
-                    "status": 0
-                },
-                {
-                    "name": "Calliope",
-                    "status": 0
-                },
-                {
-                    "name": "Rocco Town",
-                    "status": 0
-                },
-                {
-                    "name": "Imari",
-                    "status": 0
-                },
-                {
-                    "name": "Kessoku Island",
-                    "status": 0
-                }
-            ],
+            "name": "Kemonomimi Republic",
+            "danger": 1,
+            "image": "/countries/kemonomimi.webp",
+            "settlements": [],
             "history": [
-                "July 15: KR has internal power issues between the President and Govenor. Governor was trying to form a new government under \"KSSR\"."
+                "July 15th, 2023: KR has internal power issues between the President and Govenor. Governor was trying to form a new government under \"KSSR\"."
             ]
         },
         {
-            "name": "Knowle Regions, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "Knowle Regions",
+            "danger": 0,
+            "image": "/countries/knowleregions.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Lion Land",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/lionland.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Mart's Extraordinarily Sublime State",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/mess.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Mojave",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Hebrith",
-                    "status": 0
-                },
-                {
-                    "name": "Symbelton",
-                    "status": 0
-                },
-                {
-                    "name": "Wetlands",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/mojave.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Open Republic, The",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "New Clygro Town",
-                    "status": 0
-                },
-                {
-                    "name": "New Clygro City",
-                    "status": 0
-                },
-                {
-                    "name": "New Clygro Town Industrial Estate",
-                    "status": 0
-                },
-                {
-                    "name": "Westvalley",
-                    "status": 0
-                },
-                {
-                    "name": "North Coastal Town",
-                    "status": 0
-                },
-                {
-                    "name": "Old Village",
-                    "status": 0
-                },
-                {
-                    "name": "Red Island City",
-                    "status": 0
-                },
-                {
-                    "name": "Pink Island",
-                    "status": 0
-                },
-                {
-                    "name": "Blue Island",
-                    "status": 0
-                },
-                {
-                    "name": "Purple Island",
-                    "status": 0
-                },
-                {
-                    "name": "Yellowtown",
-                    "status": 0
-                },
-                {
-                    "name": "Delancy",
-                    "status": 0
-                },
-                {
-                    "name": "Bordertown",
-                    "status": 0
-                },
-                {
-                    "name": "Small Village",
-                    "status": 0
-                },
-                {
-                    "name": "Murmur Town",
-                    "status": 0
-                }
-            ],
+            "name": "Open Republic",
+            "danger": 0,
+            "image": "/countries/openrepublic.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "PLC",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/plc.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Plutonia Imperium",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/plutoniaimperium.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Solstice, The Federal Democracy of",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Firefly",
-                    "status": 0
-                },
-                {
-                    "name": "Szki Lanes",
-                    "status": 0
-                },
-                {
-                    "name": "Prehevil",
-                    "status": 0
-                }
-            ],
-            "history": []
+            "name": "The Federal Democracy of Solstice",
+            "danger": 3,
+            "image": "/countries/solstice.webp",
+            "settlements": [],
+            "history": [
+                "July 16th, 2023: There has been a plague going around SEI, and it has now affected Solstice."
+            ]
         },
         {
-            "name": "Southeastern Islands, The",
-            "status": 2,
-            "image": "",
+            "name": "Southeastern Islands",
+            "danger": 3,
+            "image": "/countries/sei.webp",
             "settlements": [
-                {
-                    "name": "Swamp Island",
-                    "status": 0
-                },
                 {
                     "name": "Forêt Québec",
-                    "status": 3
-                },
-                {
-                    "name": "Longhorn Hills",
-                    "status": 0
-                },
-                {
-                    "name": "Nexus Underground",
-                    "status": 0
+                    "danger": 3
                 }
             ],
             "history": [
-                "July 15: A disease has been going around Forêt Québec, we have decided to put border control in the exit of Alure Regions to SEI"
+                "July 16th, 2023: A nuclear program has started in SEI.",
+                "July 15th, 2023: A disease has been going around Forêt Québec, we have decided to put border control in the exit of Alure Regions to SEI"
             ]
         },
         {
             "name": "Sulópolis",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/sulopolis.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "TAY",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Victor's Interesting City",
-                    "status": 0
-                },
-                {
-                    "name": "Rogueport",
-                    "status": 0
-                },
-                {
-                    "name": "Seven Eleven Rainforest",
-                    "status": 0
-                },
-                {
-                    "name": "Palinode",
-                    "status": 0
-                },
-                {
-                    "name": "Midcity",
-                    "status": 0
-                },
-                {
-                    "name": "Scion of Linda",
-                    "status": 0
-                },
-                {
-                    "name": "Jeremy Forest",
-                    "status": 0
-                },
-                {
-                    "name": "The Eternal Canteloupe",
-                    "status": 0
-                },
-                {
-                    "name": "September Sands",
-                    "status": 0
-                },
-                {
-                    "name": "Belindan Slopes",
-                    "status": 0
-                },
-                {
-                    "name": "Turing Town",
-                    "status": 0
-                },
-                {
-                    "name": "Bell Tower",
-                    "status": 0
-                },
-                {
-                    "name": "Szloch-by-sea",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/tay.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Union of Soviet Sovereign Republics",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/ussr.webp",
+            "settlements": [],
             "history": []
         },
         {
             "name": "Veronian Controlled Territories",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "danger": 0,
+            "image": "/countries/vct.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "Whale City, The Republic of",
-            "status": 0,
-            "image": "",
+            "name": "The Republic of Whale City",
+            "danger": 0,
+            "image": "/countries/whalecity.webp",
             "settlements": [],
             "history": []
         },
         {
-            "name": "Yavno, The Federation of",
-            "status": 0,
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "The Federation of Yavno",
+            "danger": 0,
+            "image": "/countries/yavno.webp",
+            "settlements": [],
             "history": []
         },
         {
-            "name": "You on Kazoo, The Republic of",
-            "status": 0,
-            "image": "",
-            "settlements": [
-                {
-                    "name": "Settlement 1",
-                    "status": 0
-                }
-            ],
+            "name": "The Republic of You on Kazoo",
+            "danger": 0,
+            "image": "/countries/youonkazoo.webp",
+            "settlements": [],
             "history": []
         }
     ]
diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js
index f1442aa..b4d845f 100644
--- a/app/travel-advisory/page.js
+++ b/app/travel-advisory/page.js
@@ -1,66 +1,15 @@
-import countriesData from './countries.json' assert { type: 'json' };
+import ListCountries from "@/components/travel-advisory/ListCountries";
+import Header from "@/components/Header";
 
 export const metadata = {
     title: 'Travel Advisory',
     description: 'Information whether its safe to travel to other countries',
 }
 
-export async function getCountries(){
-    const countries = countriesData.countries;
-
-    return countries.map((country) => {
-        let dangerLevel;
-        switch (country.status) {
-            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;
-        }
-
-        return (
-            <div key="countries"
-                 className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
-                <div className="sm:px-40 px-10 py-10 space-y-3">
-                    <h1 className="font-medium text-5xl">{country.name}</h1>
-                    <h2 className="text-lg">{dangerLevel}</h2>
-                    <div className="flex flex-row space-x-3">
-                        <button className="bg-blue-600 px-4 py-2">Information</button>
-                        <button className="hidden bg-blue-600 px-4 py-2 settlements">View settlements</button>
-                        <div className="hidden settlements-active:visible">
-                            <h2 className="font-medium text-3xl">City 1</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 2</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 3</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                            <h2 className="font-medium text-3xl">City 4</h2>
-                            <h2 className="text-base">Take normal security precautions</h2>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    })
-}
-
 export default async function TravelAdvisory(){
-    const countries = await getCountries();
     return (
         <main className="flex flex-col">
-            <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
-                <div className="sm:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
-                    <h1 className="font-medium text-4xl">{metadata.title}</h1>
-                    <h2 className="font-light text-lg">{metadata.description}</h2>
-                </div>
-            </div>
+            <Header title={metadata.title} description={metadata.description} />
             <div>
                 <h1 className="p-5 sm:px-40 px-10 text-3xl" id="legend">Legend</h1>
                 <ul>
@@ -83,17 +32,8 @@ export default async function TravelAdvisory(){
                     </li>
                 </ul>
             </div>
-            <div className="sm:px-40 px-10 py-3 bg-blue-800"><h2 className="font-medium text-lg">This page may be inaccurate at times, refer to the <a href="https://discord.com/channels/277922530973581312/1019705091336446052"  className="text-gray-400 hover:text-gray-300">Minecraft General Announcements</a> channel for the latest updates</h2></div>
-            { /*<div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.webp')] bg-gray-600 bg-blend-multiply">
-                <div className="sm:px-40 px-10 py-10 space-y-3">
-                    <h1 className="font-medium text-5xl">Country name</h1>
-                    <h2 className="text-lg">Take normal security precautions</h2>
-                    <div className="flex flex-row space-x-3">
-                    <button className="bg-blue-600 px-4 py-2">Information</button>
-                    </div>
-                </div>
-            </div> */ }
-            {countries}
+            <div className="sm:px-40 px-10 py-3 bg-blue-800"><h2 className="font-medium text-lg"><b className="font-bold">WARNING!</b> This page may be inaccurate at times, refer to the <a href="https://discord.com/channels/277922530973581312/1019705091336446052" className="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>
+            <ListCountries />
         </main>
     )
 }
diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js
index 44c1f07..aa0ef9b 100644
--- a/app/updates/[slug]/page.js
+++ b/app/updates/[slug]/page.js
@@ -1,7 +1,8 @@
 import {readFileSync} from "fs";
 import Markdown from "markdown-to-jsx"
 import matter from "gray-matter";
-import getPostMetadata from "@/components/getPostMetadata";
+import getPostMetadata from "@/components/updates/getPostMetadata";
+import DateFormatter from "@/components/updates/DateFormatter";
 
 const getPostContent = (slug) => {
     const folder = "posts/";
@@ -25,7 +26,7 @@ export default function PostPage(props) {
             <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
                 <div className="sm:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
                     <h1 className="font-medium text-4xl">{post.data.title}</h1>
-                    <h2 className="text-sm">{post.data.author} | {post.data.date}</h2>
+                    <h2 className="text-sm">{post.data.author} | {DateFormatter(post.data.date)}</h2>
                     <h2 className="font-light text-lg">{post.data.description}</h2>
                 </div>
             </div>
diff --git a/app/updates/page.js b/app/updates/page.js
index 2055fad..04215c9 100644
--- a/app/updates/page.js
+++ b/app/updates/page.js
@@ -1,5 +1,6 @@
-import getPostMetadata from "@/components/getPostMetadata";
-import PostPreview from "@/components/PostPreview";
+import getPostMetadata from "@/components/updates/getPostMetadata";
+import PostPreview from "@/components/updates/PostPreview";
+import Header from "@/components/Header";
 
 export const metadata = {
     title: 'Updates',
@@ -13,13 +14,8 @@ export default function Updates() {
     ));
     return (
         <main className="flex flex-col">
-            <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
-                <div className="md:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
-                    <h1 className="font-medium text-4xl">{metadata.title}</h1>
-                    <h2 className="font-light text-lg">{metadata.description}</h2>
-                </div>
-            </div>
-            <div className="md:px-60 px-2 py-3">
+            <Header title={metadata.title} description={metadata.description} />
+            <div className="lg:px-60 px-2 py-3">
                 <div className="px-10 grid grid-cols-1 md:grid-cols-2 gap-4">{postPreviews}</div>
             </div>
         </main>
diff --git a/components/DateFormatter.js b/components/DateFormatter.js
deleted file mode 100644
index 11f3bf3..0000000
--- a/components/DateFormatter.js
+++ /dev/null
@@ -1,9 +0,0 @@
-
-import { parseISO, format } from 'date-fns'
-
-const DateFormatter = (dateString) => {
-  const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
-}
-
-export default DateFormatter
\ No newline at end of file
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 0000000..bd70dd0
--- /dev/null
+++ b/components/Header.js
@@ -0,0 +1,12 @@
+const Header = ({title, description}) => {
+    return (
+        <div className="bg-center bg-no-repeat bg-[url('/jumbotron.webp')] bg-gray-700 bg-blend-multiply">
+            <div className="md:px-40 px-10 max-w-screen-xl text-left py-24 lg:py-10 space-y-3">
+                <h1 className="font-medium text-4xl">{title}</h1>
+                <h2 className="font-light text-lg">{description}</h2>
+            </div>
+        </div>
+    )
+}
+
+export default Header;
diff --git a/components/Navbar.js b/components/Navbar.js
new file mode 100644
index 0000000..1555eb9
--- /dev/null
+++ b/components/Navbar.js
@@ -0,0 +1,46 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+
+const 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">
+                  <Image src="/alure_flag.svg" className="mr-5" alt="Alure Flag" width={70} height={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 key="links">
+                              <Link 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}
+                              </Link>
+                          </li>
+                      ))}
+                  </ul>
+              </div>
+          </div>
+      </nav>
+  )
+}
+
+export default Navbar;
diff --git a/components/PSA.js b/components/PSA.js
new file mode 100644
index 0000000..c259f19
--- /dev/null
+++ b/components/PSA.js
@@ -0,0 +1,38 @@
+import psaMessage from './psa.json' assert { type: 'json' };
+import Link from "next/link";
+
+const PSA = () => {
+    let defaultStyle = "flex flex-row md:px-40 px-30 py-0.5 space-x-4";
+    let styleImportant;
+    let important;
+    switch (psaMessage.important) {
+        case 0:
+            styleImportant = "hidden"
+            defaultStyle += ' ' + styleImportant
+            break;
+        case 1:
+            important = "WARNING!"
+            styleImportant = "bg-yellow-700"
+            defaultStyle += ' ' + styleImportant
+            break;
+        case 2:
+            important = "EMERGENCY!"
+            styleImportant = "bg-red-800"
+            defaultStyle += ' ' + styleImportant
+            break;
+
+    }
+
+    return (
+        <div className={defaultStyle}>
+            <p className="text-lg font-medium">{important}</p>
+            <p>{psaMessage.announcement} {psaMessage.link && (
+                <Link href={psaMessage.link}>
+                    Learn more ↗
+                </Link>
+            )}</p>
+        </div>
+    )
+}
+
+export default PSA;
diff --git a/components/PostPreview.js b/components/PostPreview.js
deleted file mode 100644
index 083bf2b..0000000
--- a/components/PostPreview.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from "next/link";
-//import DateFormatter from '@/components/DateFormatter'
-
-export default function PostPreview(props) {
- return (
-     <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3">
-         <Link href={`/updates/${props.slug}`}>
-             <h2 className="font-medium text-2xl hover:underline">{props.title}</h2>
-         </Link>
-         <span>By {props.author}</span>
-         <p>{props.description}</p>
-         <p className="font-medium text-sm">Posted on {props.date}</p>
-     </div>
- )
-}
diff --git a/components/getPostMetadata.js b/components/getPostMetadata.js
deleted file mode 100644
index 88e4566..0000000
--- a/components/getPostMetadata.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {readdirSync, readFileSync} from "fs";
-import matter from "gray-matter";
-
-export default function getPostMetadata() {
-    const folder = "posts/";
-    const files = readdirSync(folder);
-    const markdownPosts = files.filter((file) => file.endsWith(".md"));
-
-    return markdownPosts.map((fileName) => {
-        const fileContent = readFileSync(`posts/${fileName}`, "utf-8");
-        const matterResult = matter(fileContent);
-        return {
-            title: matterResult.data.title,
-            author: matterResult.data.author,
-            date: matterResult.data.date,
-            description: matterResult.data.description,
-            slug: fileName.replace(".md", "")
-        }
-    })
-}
diff --git a/components/psa.json b/components/psa.json
new file mode 100644
index 0000000..df9869f
--- /dev/null
+++ b/components/psa.json
@@ -0,0 +1,5 @@
+{
+  "important": 0,
+  "announcement": "No important announcements",
+  "link": "https://google.ca"
+}
diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js
new file mode 100644
index 0000000..ad9c039
--- /dev/null
+++ b/components/travel-advisory/HistoryModal.js
@@ -0,0 +1,42 @@
+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 tensions 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-[600px]">
+                <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/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js
new file mode 100644
index 0000000..87e01fc
--- /dev/null
+++ b/components/travel-advisory/ListCountries.js
@@ -0,0 +1,66 @@
+"use client"
+import countriesData from '@/app/travel-advisory/countries.json' assert { type: 'json' };
+import HistoryModal from "@/components/travel-advisory/HistoryModal";
+import { useState } from "react";
+
+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 default 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 text-3xl">{settlement.name}</h2>
+                    <h2 className="text-base">{getDangerLevel(settlement.danger)}</h2>
+                </div>
+            )
+        })
+
+        return (
+            <div key="countries" 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 text-5xl">{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/components/updates/DateFormatter.js b/components/updates/DateFormatter.js
new file mode 100644
index 0000000..11f3bf3
--- /dev/null
+++ b/components/updates/DateFormatter.js
@@ -0,0 +1,9 @@
+
+import { parseISO, format } from 'date-fns'
+
+const DateFormatter = (dateString) => {
+  const date = parseISO(dateString)
+  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+}
+
+export default DateFormatter
\ No newline at end of file
diff --git a/components/updates/PostPreview.js b/components/updates/PostPreview.js
new file mode 100644
index 0000000..ca261c0
--- /dev/null
+++ b/components/updates/PostPreview.js
@@ -0,0 +1,15 @@
+import Link from "next/link";
+import DateFormatter from '@/components/updates/DateFormatter'
+
+export default function PostPreview(props) {
+ return (
+     <div key="post" className="bg-zinc-800 py-3 px-5 border border-gray-600 rounded-lg space-y-3">
+         <Link href={`/updates/${props.slug}`}>
+             <h2 className="font-medium text-2xl hover:underline">{props.title}</h2>
+         </Link>
+         <span>By {props.author}</span>
+         <p>{props.description}</p>
+         <p className="font-medium text-sm">Posted on {DateFormatter(props.date)}</p>
+     </div>
+ )
+}
diff --git a/components/updates/getPostMetadata.js b/components/updates/getPostMetadata.js
new file mode 100644
index 0000000..88e4566
--- /dev/null
+++ b/components/updates/getPostMetadata.js
@@ -0,0 +1,20 @@
+import {readdirSync, readFileSync} from "fs";
+import matter from "gray-matter";
+
+export default function getPostMetadata() {
+    const folder = "posts/";
+    const files = readdirSync(folder);
+    const markdownPosts = files.filter((file) => file.endsWith(".md"));
+
+    return markdownPosts.map((fileName) => {
+        const fileContent = readFileSync(`posts/${fileName}`, "utf-8");
+        const matterResult = matter(fileContent);
+        return {
+            title: matterResult.data.title,
+            author: matterResult.data.author,
+            date: matterResult.data.date,
+            description: matterResult.data.description,
+            slug: fileName.replace(".md", "")
+        }
+    })
+}
diff --git a/posts/welcome.md b/posts/welcome.md
index b7e28be..8074672 100644
--- a/posts/welcome.md
+++ b/posts/welcome.md
@@ -3,9 +3,11 @@ title: Website Launched
 description: Our new website is now available
 author: The President of the Alure Regions
 date: '2023-07-15'
+tags: ['announcement']
 ---
-Hello,
+# Our new website has officially launched!
+As you have seen, we have been actively developing this brand new site!
 
-As you might have seen, we have created a website. What will this website become?
+You can expect updates from us, whether if its updating travel advisories or announcing a brand new service within Alure Regions.
 
-First it will be used for updates within Alure Regions, it is used for
+Of course, this site will get regularly updated overtime, so stay tuned for more updates to this site!
diff --git a/public/countries/anatoli.webp b/public/countries/anatoli.webp
new file mode 100644
index 0000000..9d49128
Binary files /dev/null and b/public/countries/anatoli.webp differ
diff --git a/public/countries/auckland.webp b/public/countries/auckland.webp
new file mode 100644
index 0000000..9c74eab
Binary files /dev/null and b/public/countries/auckland.webp differ
diff --git a/public/countries/auraregions.webp b/public/countries/auraregions.webp
new file mode 100644
index 0000000..5338de3
Binary files /dev/null and b/public/countries/auraregions.webp differ
diff --git a/public/countries/birchboattown.webp b/public/countries/birchboattown.webp
new file mode 100644
index 0000000..7613f0a
Binary files /dev/null and b/public/countries/birchboattown.webp differ
diff --git a/public/countries/birchlodges.webp b/public/countries/birchlodges.webp
new file mode 100644
index 0000000..848fc4e
Binary files /dev/null and b/public/countries/birchlodges.webp differ
diff --git a/public/countries/countrywarp.webp b/public/countries/countrywarp.webp
new file mode 100644
index 0000000..efc399c
Binary files /dev/null and b/public/countries/countrywarp.webp differ
diff --git a/public/countries/eaglecity.webp b/public/countries/eaglecity.webp
new file mode 100644
index 0000000..1a10f6a
Binary files /dev/null and b/public/countries/eaglecity.webp differ
diff --git a/public/countries/fegal.webp b/public/countries/fegal.webp
new file mode 100644
index 0000000..d2064e4
Binary files /dev/null and b/public/countries/fegal.webp differ
diff --git a/public/countries/halcandra.webp b/public/countries/halcandra.webp
new file mode 100644
index 0000000..370a72b
Binary files /dev/null and b/public/countries/halcandra.webp differ
diff --git a/public/countries/inkytown.webp b/public/countries/inkytown.webp
new file mode 100644
index 0000000..fde4a86
Binary files /dev/null and b/public/countries/inkytown.webp differ
diff --git a/public/countries/kemonomimi.webp b/public/countries/kemonomimi.webp
new file mode 100644
index 0000000..9a2bee6
Binary files /dev/null and b/public/countries/kemonomimi.webp differ
diff --git a/public/countries/knowleregions.webp b/public/countries/knowleregions.webp
new file mode 100644
index 0000000..364f014
Binary files /dev/null and b/public/countries/knowleregions.webp differ
diff --git a/public/countries/lionland.webp b/public/countries/lionland.webp
new file mode 100644
index 0000000..ed474e3
Binary files /dev/null and b/public/countries/lionland.webp differ
diff --git a/public/countries/mess.webp b/public/countries/mess.webp
new file mode 100644
index 0000000..edeb05e
Binary files /dev/null and b/public/countries/mess.webp differ
diff --git a/public/countries/mojave.webp b/public/countries/mojave.webp
new file mode 100644
index 0000000..485da91
Binary files /dev/null and b/public/countries/mojave.webp differ
diff --git a/public/countries/openrepublic.webp b/public/countries/openrepublic.webp
new file mode 100644
index 0000000..4b53425
Binary files /dev/null and b/public/countries/openrepublic.webp differ
diff --git a/public/countries/plc.webp b/public/countries/plc.webp
new file mode 100644
index 0000000..281f6d5
Binary files /dev/null and b/public/countries/plc.webp differ
diff --git a/public/countries/plutoniaimperium.webp b/public/countries/plutoniaimperium.webp
new file mode 100644
index 0000000..0c1ea9c
Binary files /dev/null and b/public/countries/plutoniaimperium.webp differ
diff --git a/public/countries/sei.webp b/public/countries/sei.webp
new file mode 100644
index 0000000..b903edc
Binary files /dev/null and b/public/countries/sei.webp differ
diff --git a/public/countries/solstice.webp b/public/countries/solstice.webp
new file mode 100644
index 0000000..e505786
Binary files /dev/null and b/public/countries/solstice.webp differ
diff --git a/public/countries/sulopolis.webp b/public/countries/sulopolis.webp
new file mode 100644
index 0000000..1447ebb
Binary files /dev/null and b/public/countries/sulopolis.webp differ
diff --git a/public/countries/tay.webp b/public/countries/tay.webp
new file mode 100644
index 0000000..d5a7172
Binary files /dev/null and b/public/countries/tay.webp differ
diff --git a/public/countries/ussr.webp b/public/countries/ussr.webp
new file mode 100644
index 0000000..d74be88
Binary files /dev/null and b/public/countries/ussr.webp differ
diff --git a/public/countries/vct.webp b/public/countries/vct.webp
new file mode 100644
index 0000000..41bd01d
Binary files /dev/null and b/public/countries/vct.webp differ
diff --git a/public/countries/whalecity.webp b/public/countries/whalecity.webp
new file mode 100644
index 0000000..67ad2e2
Binary files /dev/null and b/public/countries/whalecity.webp differ
diff --git a/public/countries/yavno.webp b/public/countries/yavno.webp
new file mode 100644
index 0000000..f52e8aa
Binary files /dev/null and b/public/countries/yavno.webp differ
diff --git a/public/countries/youonkazoo.webp b/public/countries/youonkazoo.webp
new file mode 100644
index 0000000..aa035a7
Binary files /dev/null and b/public/countries/youonkazoo.webp differ
-- 
cgit v1.2.3