From ec9453aa4f91080927c0f6d4b7f576f972c6eb72 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 2 Oct 2025 10:51:48 +0200
Subject: [PATCH] feat: add background wrapper layout components

- Create BackgroundWrapper component for community, dashboard, and submit pages
- Add grid pattern background with dark mode support
- Implement radial gradient mask for visual depth
- Provide consistent layout structure across app sections
---
 web/src/app/community/layout.tsx | 23 +++++++++++++++++++++++
 web/src/app/dashboard/layout.tsx | 23 +++++++++++++++++++++++
 web/src/app/submit/layout.tsx    | 23 +++++++++++++++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 web/src/app/community/layout.tsx
 create mode 100644 web/src/app/dashboard/layout.tsx
 create mode 100644 web/src/app/submit/layout.tsx

diff --git a/web/src/app/community/layout.tsx b/web/src/app/community/layout.tsx
new file mode 100644
index 00000000..3d7dd7f5
--- /dev/null
+++ b/web/src/app/community/layout.tsx
@@ -0,0 +1,23 @@
+import type React from "react"
+import { cn } from "@/lib/utils"
+
+interface BackgroundWrapperProps {
+	children: React.ReactNode
+}
+
+export default function BackgroundWrapper({ children }: BackgroundWrapperProps) {
+	return (
+		<div className="relative min-h-screen w-full">
+			<div
+				className={cn(
+					"absolute inset-0",
+					"[background-size:40px_40px]",
+					"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+					"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				)}
+			/>
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-background" />
+			<div className="z-20 relative">{children}</div>
+		</div>
+	)
+}
diff --git a/web/src/app/dashboard/layout.tsx b/web/src/app/dashboard/layout.tsx
new file mode 100644
index 00000000..3d7dd7f5
--- /dev/null
+++ b/web/src/app/dashboard/layout.tsx
@@ -0,0 +1,23 @@
+import type React from "react"
+import { cn } from "@/lib/utils"
+
+interface BackgroundWrapperProps {
+	children: React.ReactNode
+}
+
+export default function BackgroundWrapper({ children }: BackgroundWrapperProps) {
+	return (
+		<div className="relative min-h-screen w-full">
+			<div
+				className={cn(
+					"absolute inset-0",
+					"[background-size:40px_40px]",
+					"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+					"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				)}
+			/>
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-background" />
+			<div className="z-20 relative">{children}</div>
+		</div>
+	)
+}
diff --git a/web/src/app/submit/layout.tsx b/web/src/app/submit/layout.tsx
new file mode 100644
index 00000000..3d7dd7f5
--- /dev/null
+++ b/web/src/app/submit/layout.tsx
@@ -0,0 +1,23 @@
+import type React from "react"
+import { cn } from "@/lib/utils"
+
+interface BackgroundWrapperProps {
+	children: React.ReactNode
+}
+
+export default function BackgroundWrapper({ children }: BackgroundWrapperProps) {
+	return (
+		<div className="relative min-h-screen w-full">
+			<div
+				className={cn(
+					"absolute inset-0",
+					"[background-size:40px_40px]",
+					"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
+					"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
+				)}
+			/>
+			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-background" />
+			<div className="z-20 relative">{children}</div>
+		</div>
+	)
+}