diff --git a/frontend/src/app/age-restricted/page.tsx b/frontend/src/app/age-restricted/page.tsx
new file mode 100644
index 0000000..f79fedd
--- /dev/null
+++ b/frontend/src/app/age-restricted/page.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import Link from "next/link";
+
+export default function AgeRestricted() {
+ return (
+
+
diff --git a/frontend/src/components/common/age-verification-modal.tsx b/frontend/src/components/common/age-verification-modal.tsx
new file mode 100644
index 0000000..25d1066
--- /dev/null
+++ b/frontend/src/components/common/age-verification-modal.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+const AgeVerificationModal = () => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [fullName, setFullName] = useState("");
+ const [error, setError] = useState("");
+ const router = useRouter();
+
+ useEffect(() => {
+ const hasVerified = localStorage.getItem("ageVerified");
+ if (!hasVerified) {
+ setIsVisible(true);
+ }
+ }, []);
+
+ const handleVerify = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (!fullName.trim()) {
+ setError("Please enter your full name.");
+ return;
+ }
+ localStorage.setItem("ageVerified", "true");
+ setIsVisible(false);
+ };
+
+ if (!isVisible) return null;
+
+ return (
+
+
+
Age Verification
+
+
+ You must be at least 18 years old to play. Please enter your full name
+ as it appears on your ID.
+
+
+
+
+ );
+};
+
+export default AgeVerificationModal;