aboutsummaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorAndrew Lee <alee14498@protonmail.com>2023-07-17 15:08:57 -0400
committerAndrew Lee <alee14498@protonmail.com>2023-07-17 15:08:57 -0400
commitddbe4fa61425f6a871a23238ce15a0929e201e6e (patch)
treec1d5c2a0674bcbf2cf79180445d8d26518b7009d /app
parent8fbaca0d8ec9dc1323facb7f4c0029e32cfe5223 (diff)
downloadalure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.tar.gz
alure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.tar.bz2
alure-website-ddbe4fa61425f6a871a23238ce15a0929e201e6e.zip
Modularizing certain elements; Working information section
Diffstat (limited to 'app')
-rw-r--r--app/layout.js44
-rw-r--r--app/page.js8
-rw-r--r--app/services/page.js14
-rw-r--r--app/travel-advisory/countries.json486
-rw-r--r--app/travel-advisory/page.js70
-rw-r--r--app/updates/[slug]/page.js5
-rw-r--r--app/updates/page.js14
7 files changed, 130 insertions, 511 deletions
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>