Add max-width and center-align layout containers

Author: AmanVarshney01

apps/web/src/app/(home)/_components/footer.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 const Footer = () => {
 	return (
 		<footer className="relative w-full border-border border-t font-mono">
-			<div className="px-4 py-12 sm:px-6">
+			<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6">
 				<div className="mb-12 grid gap-8 md:grid-cols-3">
 					<div>
 						<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">

apps/web/src/app/(home)/_components/navbar.tsx

@@ -94,7 +94,7 @@ export default function Navbar() {
 						: "border-transparent border-b bg-transparent",
 				)}
 			>
-				<div className="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
+				<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
 					<Link href="/" className="flex flex-shrink-0 items-center gap-2">
 						<Image
 							src="/logo.svg"

apps/web/src/app/(home)/page.tsx

@@ -133,7 +133,7 @@ export default function HomePage() {
 	return (
 		<div className="terminal-scanlines min-h-screen bg-background font-mono">
 			<Navbar />
-			<main className="terminal-matrix-bg p-6 pt-28">
+			<main className="terminal-matrix-bg mx-auto max-w-7xl p-6 pt-28">
 				<div className="mb-8 flex items-center justify-center">
 					<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4 md:gap-6">
 						<pre className="ascii-art terminal-glow text-primary text-xs leading-tight sm:text-sm">