From 57bcfde2a9b8735cc98d175a1ee27592bda17d84 Mon Sep 17 00:00:00 2001
From: Sajid Mehmood <sajid@niteshift.dev>
Date: Wed, 29 Jul 2026 13:57:19 +0000
Subject: [PATCH] Give the home page a blue treatment

Adds a blue gradient background to the websites list (the page the app
root redirects to), with inverted header text, a white "Add website"
button, and a lifted white panel so the table stays readable.

Run-on: Niteshift

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../(main)/websites/WebsitesPage.module.css   | 25 +++++++++++++++++++
 src/app/(main)/websites/WebsitesPage.tsx      | 25 +++++++++++--------
 2 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/app/(main)/websites/WebsitesPage.module.css

diff --git a/src/app/(main)/websites/WebsitesPage.module.css b/src/app/(main)/websites/WebsitesPage.module.css
new file mode 100644
index 000000000..ed7d8d88d
--- /dev/null
+++ b/src/app/(main)/websites/WebsitesPage.module.css
@@ -0,0 +1,25 @@
+.page {
+  width: 100%;
+  min-height: 100%;
+  background: linear-gradient(165deg, #0a48bd 0%, #1470f0 50%, #56a8ff 100%);
+}
+
+/* Header sits directly on the blue background, so invert its colors */
+.header [class*="Heading_heading"] {
+  color: #fff !important;
+}
+
+.header > * {
+  border-color: rgb(255 255 255 / 30%) !important;
+}
+
+.header [class*="Button_variant-primary"] {
+  color: #0a48bd !important;
+  background: #fff !important;
+  border-color: #fff !important;
+}
+
+.panel {
+  border-color: rgb(255 255 255 / 50%) !important;
+  box-shadow: 0 18px 40px rgb(6 40 105 / 25%);
+}
diff --git a/src/app/(main)/websites/WebsitesPage.tsx b/src/app/(main)/websites/WebsitesPage.tsx
index 31de7047c..6476a7d86 100644
--- a/src/app/(main)/websites/WebsitesPage.tsx
+++ b/src/app/(main)/websites/WebsitesPage.tsx
@@ -6,21 +6,26 @@ import { Panel } from '@/components/common/Panel';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { WebsiteAddButton } from './WebsiteAddButton';
 import { WebsitesDataTable } from './WebsitesDataTable';
+import styles from './WebsitesPage.module.css';
 
 export function WebsitesPage() {
   const { teamId } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
   return (
-    <PageBody>
-      <Column gap="6" margin="2">
-        <PageHeader title={formatMessage(labels.websites)}>
-          <WebsiteAddButton teamId={teamId} />
-        </PageHeader>
-        <Panel>
-          <WebsitesDataTable teamId={teamId} />
-        </Panel>
-      </Column>
-    </PageBody>
+    <div className={styles.page}>
+      <PageBody>
+        <Column gap="6" margin="2">
+          <div className={styles.header}>
+            <PageHeader title={formatMessage(labels.websites)}>
+              <WebsiteAddButton teamId={teamId} />
+            </PageHeader>
+          </div>
+          <Panel className={styles.panel}>
+            <WebsitesDataTable teamId={teamId} />
+          </Panel>
+        </Column>
+      </PageBody>
+    </div>
   );
 }