doc: better starting point

docs/components/sidebar-content.tsx

@@ -76,10 +76,20 @@ export const contents: Content[] = [
 				),
 			},
 			{
-				title: "Core Concepts",
-				href: "/docs/core-concepts",
+				title: "Basic Usage",
+				href: "/docs/basic-usage",
 				icon: () => (
-					<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21L3 9h18l-2 12zm5-6h4q.425 0 .713-.288T15 14t-.288-.712T14 13h-4q-.425 0-.712.288T9 14t.288.713T10 15M6 8q-.425 0-.712-.288T5 7t.288-.712T6 6h12q.425 0 .713.288T19 7t-.288.713T18 8zm2-3q-.425 0-.712-.288T7 4t.288-.712T8 3h8q.425 0 .713.288T17 4t-.288.713T16 5z"></path></svg>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="currentColor"
+							d="M21 2H3c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M10 19.4l-1.6.6C6.9 18.6 6 16.6 6 14.5s.9-4.1 2.4-5.5l1.6.6c-1.3 1.1-2 3-2 4.9s.7 3.7 2 4.9m5.6.6l-1.6-.6c1.3-1.2 2-3 2-4.9s-.7-3.7-2-4.9l1.6-.6c1.5 1.4 2.4 3.4 2.4 5.5s-.9 4.1-2.4 5.5M21 7H3V4h18z"
+						></path>
+					</svg>
 				),
 			},
 		],

docs/content/docs/core-concepts.mdx

@@ -1,59 +0,0 @@
----
-title: Core Concepts
-description: core concepts of better-auth
----
-
-## Auth Server
-
-```ts
-import { betterAuth } from "better-auth"
-
-export const auth = betterAuth({
-    //...
-})
-const api = auth.api
-const handler = auth.handler
-```
-
-The auth instance you create with betterAuth comes with two key properties:
-
-**handler**: A web standard handler that you mount on your server to handle API requests. (see installation [here](/docs/installation#mount-handler))
-
-**api**: A collection of methods you can call directly on the server to interact with the auth server, such as `getSession` to retrieve the current session.
-
-**Example: Getting the current session on the server**
-
-```ts
-/**
- * Consider this as a random route endpoint that we want to protect
- */
-export const POST  = (request: Request)=> {
-    const session = await auth.api.getSession({
-        headers: request.headers // get session requires the headers to be passed
-    })
-}
-```
-## Client
-
-The client side of the library lets you interact with the auth server and includes built-in state management for specific methods, such as useSession. 
-
-You can import the client and use it to call these methods directly or export each method individually from the client. 
-
-If you add new plugins, they may also introduce their own methods. For instance, using the twoFactor plugin will add methods like twoFactor.enable. Check out the example below to see how to use the client:
-
-```tsx
-const client = createAuthClient()
-
-export const { signIn, signUp, signOut, useSession } = client
-
-export function SignUp(){
-    async function handleSubmit(data){
-        await signUp.email({
-            name: data.name,
-            email: data.email,
-            password: data.password,
-        })
-    }
-    //...your component 
-}
-```

docs/content/docs/installation.mdx

@@ -45,6 +45,12 @@ description: Installation
             //...
         })
         ```
+
+        <Callout type="info">
+                The auth object has 2 properties: 
+            - `handler`: This is the handler that will be used to handle requests to the auth server. You'll configure this in the next step.
+            - `api`: A collection of methods you can call directly on the server to interact with the auth server, such as **getSession** to retrieve the current session.
+        </Callout>
     </Step>
     <Step>
         ### Database