Background is constructed of 3 images

Author: samejr

apps/webapp/app/assets/images/blurred-dashboard-background-menu-bottom.jpg

@@ -1,15 +1,48 @@
 import { type ReactNode } from "react";
-import blurredDashboardBackground from "~/assets/images/blurred-dashboard-background.jpg";
+import blurredDashboardBackgroundMenuTop from "~/assets/images/blurred-dashboard-background-menu-top.jpg";
+import blurredDashboardBackgroundMenuBottom from "~/assets/images/blurred-dashboard-background-menu-bottom.jpg";
+import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-background-table.jpg";
 
 export function BackgroundWrapper({ children }: { children: ReactNode }) {
   return (
-    <div
-      className="h-full w-full bg-cover bg-left-top bg-no-repeat"
-      style={{
-        backgroundImage: `url(${blurredDashboardBackground})`,
-      }}
-    >
-      {children}
+    <div className="relative h-full w-full overflow-hidden">
+      {/* Left menu top background - fixed width 260px, maintains aspect ratio */}
+      <div
+        className="absolute left-0 top-0 w-[260px] bg-contain bg-left-top bg-no-repeat"
+        style={{
+          backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
+          aspectRatio: "auto",
+          height: "100vh",
+          backgroundSize: "260px auto",
+        }}
+      />
+
+      {/* Left menu bottom background - fixed width 260px, maintains aspect ratio */}
+      <div
+        className="absolute bottom-0 left-0 w-[260px] bg-contain bg-left-bottom bg-no-repeat"
+        style={{
+          backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
+          aspectRatio: "auto",
+          height: "100vh",
+          backgroundSize: "260px auto",
+        }}
+      />
+
+      {/* Right table background - fixed width 2000px, positioned next to menu */}
+      <div
+        className="absolute top-0 bg-left-top bg-no-repeat"
+        style={{
+          left: "260px",
+          backgroundImage: `url(${blurredDashboardBackgroundTable})`,
+          width: "100%",
+          height: "100vh",
+          backgroundSize: "1200px auto",
+          backgroundColor: "#101214",
+        }}
+      />
+
+      {/* Content layer */}
+      <div className="relative z-10 h-full w-full">{children}</div>
     </div>
   );
 }

apps/webapp/app/assets/images/blurred-dashboard-background-menu-top.jpg

@@ -1,8 +1,18 @@
 import { cn } from "~/utils/cn";
 
 /** This container is used to surround the entire app, it correctly places the nav bar */
-export function AppContainer({ children }: { children: React.ReactNode }) {
-  return <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>;
+export function AppContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden", className)}>
+      {children}
+    </div>
+  );
 }
 
 export function MainBody({ children }: { children: React.ReactNode }) {

apps/webapp/app/assets/images/blurred-dashboard-background-table.jpg

@@ -139,9 +139,9 @@ export default function Page() {
   const shouldShowConfirm = user.email !== enteredEmail || user.email === "";
 
   return (
-    <AppContainer>
+    <AppContainer className="bg-charcoal-900">
       <BackgroundWrapper>
-        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5">
+        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
           <Form method="post" {...form.props}>
             <FormTitle
               title="Welcome to Trigger.dev"