Add example cssmodule

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;
+  }
+}

packages/web/app/welcome/welcome.tsx

@@ -1,12 +1,11 @@
 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">
+    <main className={styles.welcome}>
       <header className="flex flex-col items-center gap-9">
-          <div className="w-[500px] max-w-[100vw] p-4">
         <img
           src={logoLight}
           alt="React Router"
@@ -17,9 +16,8 @@ export function Welcome() {
           alt="React Router"
           className="hidden w-full dark:block"
         />
-          </div>
       </header>
-        <div className="max-w-[300px] w-full space-y-6 px-4">
+      <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?
@@ -41,7 +39,6 @@ export function Welcome() {
           </ul>
         </nav>
       </div>
-      </div>
     </main>
   );
 }