NextConf 2024 Community Challenge Competition

page.tsx

const boldText = "The React Framework for the Web.";
const regularText =
  "Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.";

// Use in img src
const nextjsConfHero = "/nextjs-conf-hero.svg";
const nextjsConfLogo = "/nextjs-conf-logo.svg";
const nextjsLogo = "/nextjs-logo.svg";

export default function Page() {
  return (
		<div className="size-full bg-black flex flex-col text-white">
			{/* Nav */}
			<div className="flex justify-between items-center">
				<div className="flex items-center gap-3">
					<div>
						<img src={nextjsLogo} />
					</div>
					<nav className="flex items-center gap-3 text-gray-500">
						<div>Showcase</div>
						<div>Docs</div>
						<div>Blog</div>
						<div>Templates</div>
						<div>Enterprise</div>
					</nav>
				</div>
				<div className="flex gap-3 items-center">
					<input className="bg-gray-700 text-gray-500 border-gray-500 rounded" placeholder="Search documentation..." />
					<button className="bg-black text-white border-gray-500 border">Deploy</button>
					<button className="bg-white text-black">Learn</button>
				</div>
			</div>
			{/* Body */}
			<div className="flex flex-col gap-3 max-w-5xl mx-auto grow justify-center items-center">
				{/* FIRST */}
				<div className="flex justify-between items-center">
					<
					<div className="flex items-center">
						<div className="bg-blue-500 size-6" />
						<div>24TH OCTOBER 2024</div>
					</div>
					<div>IN PERSON & VIRTUAL</div>
						
					<div className="flex items-center justify-between">
						<img src={nextjsConfLogo} />
						<button className="rounded bg-blue-500 py-3 px-5">
							GET TICKETS
						</button>
					</div>
				</div>
				{/* SECOND */}
				<div>
					<img src={nextJsConfHero} className="w-full" />
				</div>
				<div>
					<b>{boldText}</b>{' '}<span>{regularText}</span>
				</div>
				<div className="flex gap-3 items-center">
					<button className="text-black bg-white py-2 px-3">Get Started</button>
					<button className="text-white bg-black py-2 px-3 border-gray-500 border">Learn Next.js</button>
				</div>
			</div>
		</div>
	);
}