feat: add wip page and dialog popup

app/routes/_index.tsx

@@ -5,7 +5,8 @@ import { ExperienceSection } from "@/components/experience-section";
 import { ProjectsSection } from "@/components/projects-section";
 import { ContactSection } from "@/components/contact-section";
 import { portfolioData } from "@/data/portfolio";
-import { BusinessSection } from "~/components/business-section";
+import { BusinessSection } from "@/components/business-section";
+import { ViewPopup } from "@/components/view-popup";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -26,6 +27,7 @@ export default function Index() {
 			<ProjectsSection projects={portfolioData.projects} />
 			<BusinessSection businesses={portfolioData.businesses} />
 			<ContactSection profile={portfolioData.profile} />
+			<ViewPopup />
 		</div>
 	);
 }

app/routes/fun.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from "react-router-dom";
+
+export default function WipPage() {
+	const navigate = useNavigate();
+
+	return (
+		<div
+			style={{
+				minHeight: "100vh",
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "#f5f5f5",
+			}}
+		>
+			<h1 style={{ fontSize: "3rem", color: "#333" }}>
+				🚧 Work In Progress 🚧
+			</h1>
+			<p style={{ fontSize: "1.25rem", color: "#666" }}>
+				This page is currently under construction. Please check back soon!
+			</p>
+			<button
+				style={{
+					marginTop: "2rem",
+					padding: "0.75rem 1.5rem",
+					fontSize: "1rem",
+					borderRadius: "5px",
+					border: "none",
+					background: "#333",
+					color: "#fff",
+					cursor: "pointer",
+				}}
+				onClick={() => navigate(-1)}
+			>
+				Go Back
+			</button>
+		</div>
+	);
+}