From b4f77693759b030beec3a50cb869741610a7e8bf Mon Sep 17 00:00:00 2001
From: Mona Mayrhofer <mona.mayrhofer@proton.me>
Date: Fri, 26 Dec 2025 14:12:06 +0100
Subject: [PATCH] Add example cssmodule

---
 packages/web/app/welcome/welcome.module.css | 31 +++++++++
 packages/web/app/welcome/welcome.tsx        | 73 ++++++++++-----------
 2 files changed, 66 insertions(+), 38 deletions(-)
 create mode 100644 packages/web/app/welcome/welcome.module.css

diff --git a/packages/web/app/welcome/welcome.module.css b/packages/web/app/welcome/welcome.module.css
new file mode 100644
index 0000000..960d595
--- /dev/null
+++ b/packages/web/app/welcome/welcome.module.css
@@ -0,0 +1,31 @@
+.welcome {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 500px;
+    max-width: 100vw;
+    padding: 4px;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
+.links {
+  max-width: 300px;
+  width: 100%;
+  padding: 0 4px;
+
+  nav {
+    border-radius: 48px;
+    border: 1px solid gray;
+    padding: 6px;
+  }
+}
diff --git a/packages/web/app/welcome/welcome.tsx b/packages/web/app/welcome/welcome.tsx
index f4c185f..cfb28b0 100644
--- a/packages/web/app/welcome/welcome.tsx
+++ b/packages/web/app/welcome/welcome.tsx
@@ -1,46 +1,43 @@
 import logoDark from "./logo-dark.svg";
 import logoLight from "./logo-light.svg";
+import styles from "./welcome.module.css";
 
 export function Welcome() {
   return (
-    <main className="flex items-center justify-center pt-16 pb-4">
-      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
-        <header className="flex flex-col items-center gap-9">
-          <div className="w-[500px] max-w-[100vw] p-4">
-            <img
-              src={logoLight}
-              alt="React Router"
-              className="block w-full dark:hidden"
-            />
-            <img
-              src={logoDark}
-              alt="React Router"
-              className="hidden w-full dark:block"
-            />
-          </div>
-        </header>
-        <div className="max-w-[300px] w-full space-y-6 px-4">
-          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
-            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
-              What&apos;s next?
-            </p>
-            <ul>
-              {resources.map(({ href, text, icon }) => (
-                <li key={href}>
-                  <a
-                    className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
-                    href={href}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {icon}
-                    {text}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
+    <main className={styles.welcome}>
+      <header className="flex flex-col items-center gap-9">
+        <img
+          src={logoLight}
+          alt="React Router"
+          className="block w-full dark:hidden"
+        />
+        <img
+          src={logoDark}
+          alt="React Router"
+          className="hidden w-full dark:block"
+        />
+      </header>
+      <div className={styles.links}>
+        <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
+          <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
+            What&apos;s next?
+          </p>
+          <ul>
+            {resources.map(({ href, text, icon }) => (
+              <li key={href}>
+                <a
+                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {icon}
+                  {text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
       </div>
     </main>
   );