diff options
| -rw-r--r-- | public/alure-post.svg | 99 | ||||
| -rw-r--r-- | public/file.svg | 1 | ||||
| -rw-r--r-- | public/globe.svg | 1 | ||||
| -rw-r--r-- | public/next.svg | 1 | ||||
| -rw-r--r-- | public/vercel.svg | 1 | ||||
| -rw-r--r-- | public/window.svg | 1 | ||||
| -rw-r--r-- | src/app/components/Navbar.tsx | 46 | ||||
| -rw-r--r-- | src/app/globals.css | 31 | ||||
| -rw-r--r-- | src/app/layout.tsx | 26 | ||||
| -rw-r--r-- | src/app/page.tsx | 104 |
10 files changed, 176 insertions, 135 deletions
diff --git a/public/alure-post.svg b/public/alure-post.svg new file mode 100644 index 0000000..a1fb4b0 --- /dev/null +++ b/public/alure-post.svg @@ -0,0 +1,99 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="50.006001" + height="50.006001" + viewBox="0 0 13.230754 13.230754" + version="1.1" + id="svg5" + xml:space="preserve" + inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)" + sodipodi:docname="alure-post.svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview + id="namedview7" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showgrid="false" + inkscape:zoom="5.4306397" + inkscape:cx="52.387935" + inkscape:cy="61.502883" + inkscape:window-width="1920" + inkscape:window-height="1043" + inkscape:window-x="0" + inkscape:window-y="0" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /><defs + id="defs2"><linearGradient + inkscape:collect="always" + id="linearGradient1827"><stop + style="stop-color:#004d77;stop-opacity:1;" + offset="0" + id="stop1823" /><stop + style="stop-color:#005c80;stop-opacity:1;" + offset="1" + id="stop1825" /></linearGradient><linearGradient + inkscape:collect="always" + xlink:href="#linearGradient1827" + id="linearGradient1829" + x1="36.028454" + y1="43.225571" + x2="63.695782" + y2="68.180161" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-18.505406,-37.818124)" /><filter + inkscape:collect="always" + style="color-interpolation-filters:sRGB" + id="filter1924" + x="-0.07495232" + y="-0.093690401" + width="1.1499046" + height="1.1873808"><feGaussianBlur + inkscape:collect="always" + stdDeviation="0.207936" + id="feGaussianBlur1926" /></filter></defs><g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"><g + id="g1761" + transform="matrix(0.50706456,0,0,0.50706456,-7.6351405,-2.4551636)"><path + style="fill:url(#linearGradient1829);fill-opacity:1;stroke-width:0;stop-color:#000000" + id="path1201" + sodipodi:type="arc" + sodipodi:cx="28.104073" + sodipodi:cy="17.888456" + sodipodi:rx="13.046541" + sodipodi:ry="13.046541" + sodipodi:start="0" + sodipodi:end="6.2630301" + sodipodi:open="true" + sodipodi:arc-type="arc" + d="M 41.150614,17.888456 A 13.046541,13.046541 0 0 1 28.169811,30.934832 13.046541,13.046541 0 0 1 15.058194,18.019932 13.046541,13.046541 0 0 1 27.906863,4.8434057 13.046541,13.046541 0 0 1 41.147964,17.625518" /><g + style="mix-blend-mode:normal;fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;filter:url(#filter1924)" + id="g1922" + transform="matrix(0.73041374,0,0,0.73041374,19.339107,9.1234916)"><path + d="m 4,4 h 16 c 1.1,0 2,0.9 2,2 v 12 c 0,1.1 -0.9,2 -2,2 H 4 C 2.9,20 2,19.1 2,18 V 6 C 2,4.9 2.9,4 4,4 Z" + id="path1918" + style="fill:none;stroke:#000000;stroke-opacity:1" /><polyline + points="22,6 12,13 2,6" + id="polyline1920" + style="fill:none;stroke:#000000;stroke-opacity:1" /></g><g + style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" + id="g1095" + transform="matrix(0.73041374,0,0,0.73041374,19.339107,9.1234916)"><path + d="m 4,4 h 16 c 1.1,0 2,0.9 2,2 v 12 c 0,1.1 -0.9,2 -2,2 H 4 C 2.9,20 2,19.1 2,18 V 6 C 2,4.9 2.9,4 4,4 Z" + id="path1083" + style="fill:none;stroke:#ffffff;stroke-opacity:1" /><polyline + points="22,6 12,13 2,6" + id="polyline1085" + style="fill:none;stroke:#ffffff;stroke-opacity:1" /></g></g></g></svg> diff --git a/public/file.svg b/public/file.svg deleted file mode 100644 index 004145c..0000000 --- a/public/file.svg +++ /dev/null @@ -1 +0,0 @@ -<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg deleted file mode 100644 index 567f17b..0000000 --- a/public/globe.svg +++ /dev/null @@ -1 +0,0 @@ -<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index 7705396..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ -<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/public/window.svg b/public/window.svg deleted file mode 100644 index b2b2a44..0000000 --- a/public/window.svg +++ /dev/null @@ -1 +0,0 @@ -<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx new file mode 100644 index 0000000..ca9591e --- /dev/null +++ b/src/app/components/Navbar.tsx @@ -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-3"> + <div className="flex items-center"> + <Image src="/alure-post.svg" className="mr-5" alt="Alure Flag" width={50} height={50}/> + <span className="self-center text-2xl font-medium whitespace-nowrap dark:text-white"><p>Alure Post</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', '/'], + ['Track', '/updates'], + ['Send', '/enterprises'], + + ].map(([title, url]) => ( + <li key={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" onClick={() => setNavbar(!navbar)}> + {title} + </Link> + </li> + ))} + </ul> + </div> + </div> + </nav> + ) +} + +export default Navbar; diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..e29be92 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,17 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; } body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +}
\ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..70fa805 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,19 +1,12 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import Navbar from "./components/Navbar"; +import { Exo_2 } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +const exo = Exo_2({ subsets: ['latin'] }) export const metadata: Metadata = { - title: "Create Next App", + title: "Alure Post", description: "Generated by create next app", }; @@ -25,9 +18,18 @@ export default function RootLayout({ return ( <html lang="en"> <body - className={`${geistSans.variable} ${geistMono.variable} antialiased`} + className={`${exo.className} antialiased`} > + <div className="sm:px-10 px-5 py-0.5 font-medium space-x-3 text-right"> + <a href="https://bnbmc.net" className="transition duration-150 ease-out hover:ease-in md:hover:text-red-500">bnbmc.net ↗</a> + <a href="https://alee14.me" className="transition duration-150 ease-out hover:ease-in md:hover:text-green-500">alee14.me ↗</a> + </div> + <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 Post is a fictional company made for the bits & Bytes Minecraft Server</p> + <p>This website is proudly written using Next.JS and Tailwind CSS</p> + </footer> </body> </html> ); diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..e0733a5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,11 @@ -import Image from "next/image"; - export default function Home() { return ( - <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> - <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> - <Image - className="dark:invert" - src="/next.svg" - alt="Next.js logo" - width={180} - height={38} - priority - /> - <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> - <li className="mb-2 tracking-[-.01em]"> - Get started by editing{" "} - <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold"> - src/app/page.tsx - </code> - . - </li> - <li className="tracking-[-.01em]"> - Save and see your changes instantly. - </li> - </ol> - - <div className="flex gap-4 items-center flex-col sm:flex-row"> - <a - className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto" - href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - className="dark:invert" - src="/vercel.svg" - alt="Vercel logomark" - width={20} - height={20} - /> - Deploy now - </a> - <a - className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]" - href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - Read our docs - </a> - </div> - </main> - <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center"> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="/file.svg" - alt="File icon" - width={16} - height={16} - /> - Learn - </a> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="/window.svg" - alt="Window icon" - width={16} - height={16} - /> - Examples - </a> - <a - className="flex items-center gap-2 hover:underline hover:underline-offset-4" - href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" - target="_blank" - rel="noopener noreferrer" - > - <Image - aria-hidden - src="/globe.svg" - alt="Globe icon" - width={16} - height={16} - /> - Go to nextjs.org → - </a> - </footer> + <div className=""> + <h1>Track a post</h1> + <form> + <input type="text" placeholder="Tracking Number" /> + <button type="button">Track</button> + </form> </div> ); } |
