Clerk example updates

examples/with-clerk/README.md

@@ -4,13 +4,13 @@ This example shows how to use [Clerk](https://www.clerk.dev/?utm_source=github&u
 
 ## Demo
 
-A hosted demo of this example is available at [clerk-nextjs-example.vercel.app](https://clerk-nextjs-example.vercel.app)
+A hosted demo of this example is available at [clerk-app-router.clerkpreview.com](https://clerk-app-router.clerkpreview.com/).
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/clerkinc/clerk-nextjs-starter&integration-ids=oac_7uYNbc9CdDAZmNqbt3LEkO3a)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/clerkinc/clerk-next-app-router-starter&integration-ids=oac_7uYNbc9CdDAZmNqbt3LEkO3a)
 
 ## How to use
 

examples/with-clerk/app/layout.tsx

@@ -9,8 +9,8 @@ import Link from 'next/link'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Clerk with App Router',
+  description: 'Power your Next.js application with Clerk ',
 }
 
 const Header = () => (
@@ -26,7 +26,7 @@ const Header = () => (
         <Link href="/sign-in">Sign in</Link>
       </SignedOut>
       <SignedIn>
-        <UserButton />
+        <UserButton afterSignOutUrl="/" />
       </SignedIn>
     </div>
   </header>

examples/with-clerk/app/sign-in/[[...sign-in]]/page.tsx

@@ -1,5 +1,10 @@
 import { SignIn } from '@clerk/nextjs'
+import styles from '../../../styles/Auth.module.css'
 
 export default function Page() {
-  return <SignIn />
+  return (
+    <div className={styles.auth}>
+      <SignIn />
+    </div>
+  )
 }

examples/with-clerk/app/sign-up/[[...sign-up]]/page.tsx

@@ -1,5 +1,10 @@
 import { SignUp } from '@clerk/nextjs'
+import styles from '../../../styles/Auth.module.css'
 
 export default function Page() {
-  return <SignUp />
+  return (
+    <div className={styles.auth}>
+      <SignUp />
+    </div>
+  )
 }

examples/with-clerk/app/user/[[...index]]/page.tsx

@@ -1,5 +1,10 @@
 import { UserProfile } from '@clerk/nextjs'
+import styles from '../../../styles/User.module.css'
 
-const UserProfilePage = () => <UserProfile />
-
-export default UserProfilePage
+export default function Page() {
+  return (
+    <div className={styles.user}>
+      <UserProfile />
+    </div>
+  )
+}

examples/with-clerk/styles/Auth.module.css

@@ -0,0 +1,7 @@
+.auth {
+  width: 100vw;
+  height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

examples/with-clerk/styles/Home.module.css

@@ -9,6 +9,7 @@
 }
 
 .main {
+  width: 100%;
   max-width: 540px;
   padding-top: 2rem;
   flex: 1;
@@ -59,7 +60,7 @@
 }
 
 .cards {
-  margin: 2rem;
+  margin: 0;
 }
 
 .card {

examples/with-clerk/styles/User.module.css

@@ -0,0 +1,5 @@
+.user {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+}