diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/explorealure/page.js | 7 | ||||
| -rw-r--r-- | app/globals.css | 14 | ||||
| -rw-r--r-- | app/layout.js | 21 | ||||
| -rw-r--r-- | app/not-found.js | 11 | ||||
| -rw-r--r-- | app/page.js | 43 |
5 files changed, 76 insertions, 20 deletions
diff --git a/app/explorealure/page.js b/app/explorealure/page.js new file mode 100644 index 0000000..d377674 --- /dev/null +++ b/app/explorealure/page.js @@ -0,0 +1,7 @@ +export default function ExploreAlure(){ + return ( + <main> + <p>Hello world</p> + </main> + ) +} diff --git a/app/globals.css b/app/globals.css index fd81e88..e76e819 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,17 +3,9 @@ @tailwind utilities; :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; } body { diff --git a/app/layout.js b/app/layout.js index 15b8fcd..e28fca1 100644 --- a/app/layout.js +++ b/app/layout.js @@ -14,12 +14,15 @@ export default function RootLayout({ children }) { return ( <html lang="en"> <body className={exo.className}> + <div className="px-2 mx-10 text-right font-medium"> + <a href="https://aircs.racing" className="transition duration-150 ease-out hover:ease-in md:hover:text-blue-500">aircs.racing</a> + </div> <nav className="border-gray-200"> <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> - <Link href="/" className="flex items-center"> + <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-semibold whitespace-nowrap dark:text-white">Alure Regions</span> - </Link> + <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"><p>Government of</p><p>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"> @@ -34,14 +37,14 @@ export default function RootLayout({ children }) { <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 rounded-lg md:flex-row md:space-x-8 md:mt-0"> {[ ['Home', '/'], - ['About', '#'], + ['Updates', '#'], ['Services', '#'], - ['ExploreAlure', '#'], + ['ExploreAlure', 'explorealure'], ].map(([title, url]) => ( // eslint-disable-next-line react/jsx-key <li> - <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">{title} + <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"> + {title} </Link> </li> ))} @@ -56,6 +59,10 @@ export default function RootLayout({ children }) { </div> </nav> {children} + <footer className="flex flex-col text-center py-3 space-y-2 bg-red-950 text-light"> + <p>Alure Regions is a fictional country made for the bits & Bytes Minecraft Server</p> + <p>Website is proudly written in Next.JS and Tailwind CSS</p> + </footer> </body> </html> ) diff --git a/app/not-found.js b/app/not-found.js new file mode 100644 index 0000000..a3a3571 --- /dev/null +++ b/app/not-found.js @@ -0,0 +1,11 @@ +import Link from "next/link"; + +export default function NotFound() { + return ( + <main className="flex flex-col justify-center context-center text-center p-2"> + <h1 className="text-2xl font-bold">404</h1> + <h1 className="text-2xl font-bold">The page you are looking for does not exist.</h1> + <Link href='/'><p className="text-cyan-600 hover:text-cyan-500">Head back to the home page</p></Link> + </main> + ) +} diff --git a/app/page.js b/app/page.js index b53f48a..f57a332 100644 --- a/app/page.js +++ b/app/page.js @@ -1,7 +1,46 @@ export default function Home() { return ( - <main className="flex flex-col justify-between p-2"> - <h1 className="text-2xl font-bold">Welcome to Alure Regions</h1> + <main className="flex flex-col justify-between"> + <div className="bg-center bg-no-repeat bg-[url('/jumbotron.png')] 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 text-5xl">Welcome to the Alure Regions</h1> + <h2 className="font-light text-3xl">The official website of the Government of Alure Regions</h2> + </div> + </div> + <ul> + <li> + <div className="bg-center bg-no-repeat bg-[url('/regions/alee-isle.png')] bg-gray-600 bg-blend-multiply"> + <div className="px-4 mx-3 max-w-screen-xl text-left py-10 space-y-2"> + <h1 className="font-medium text-5xl">Alee Isle</h1> + <h2 className="text-lg">Capital of Alure Regions and the original home of MinePot</h2> + </div> + </div> + </li> + <li> + <div className="bg-center bg-no-repeat bg-[url('/regions/breadcroust.png')] bg-gray-600 bg-blend-multiply"> + <div className="px-4 mx-3 max-w-screen-xl text-left py-10 space-y-2"> + <h1 className="font-medium text-5xl">BreadCroust</h1> + <h2 className="text-lg">Home to MinePot Barton Centre</h2> + </div> + </div> + </li> + <li> + <div className="bg-center bg-no-repeat bg-[url('/regions/skycity.png')] bg-gray-600 bg-blend-multiply"> + <div className="px-4 mx-3 max-w-screen-xl text-left py-10 space-y-2"> + <h1 className="font-medium text-5xl">SkyCity</h1> + <h2 className="text-lg">A city that floats in the sky</h2> + </div> + </div> + </li> + <li> + <div className="bg-center bg-no-repeat bg-[url('/regions/silicon-valley.png')] bg-gray-600 bg-blend-multiply"> + <div className="px-4 mx-3 max-w-screen-xl text-left py-10 space-y-2"> + <h1 className="font-medium text-5xl">Silicon Valley</h1> + <h2 className="text-lg">Where all tech-related things goes here</h2> + </div> + </div> + </li> + </ul> </main> ) } |