import { MetaFunction } from "@remix-run/react";

export const meta: MetaFunction = () => {
	return [
		{ title: "My first Post" },
		{ name: "description", content: "This is my first post?" },
		{
			name: "keywords",
			content: "Paul W, Paul W Portfolio, Paul W Profile, Paul W Remix",
		},
	];
};

export default function myfirstpost() {
	return (
		<div className="relative flex min-h-screen flex-col items-center justify-center p-8 overflow-hidden">
			<div className="absolute inset-0 z-0">
				<div className="h-full w-full bg-black">
					<div
						className="absolute inset-0"
						style={{
							backgroundImage:
								"linear-gradient(#ffffff15 1px, transparent 1px), linear-gradient(90deg, #ffffff15 1px, transparent 1px)",
							backgroundSize: "20px 20px",
						}}
					/>
				</div>
			</div>

			<div className="relative z-10 flex flex-col items-center gap-8 max-w-6xl w-full">
				{/* Hero */}
				<div className="text-center">
					<div className="flex items-center justify-center gap-3 mb-3">
						<h1 className="text-6xl font-bold text-gray-100">
							My First (useless) Blog Post
						</h1>
					</div>
					<p className="text-xl text-gray-300 mt-4">
						Somehow have to fill the empty space 🤷
					</p>
				</div>

				<hr className="w-full border-t border-gray-700" />

				{/* Content */}
				<div className="flex flex-col gap-4">
					<p className="text-lg text-gray-300">Sorry, no content to see!</p>
				</div>
			</div>
		</div>
	);
}