Refactor OAuth divider component and update README visuals

- Simplified the OAuth divider component with a cleaner layout for improved UI consistency.
- Updated README to include and organize new visuals for key sections, enhancing documentation clarity.

README.md

@@ -145,14 +145,17 @@ Full OAuth 2.0 Authorization Server for Model Context Protocol (MCP) and third-p
 ### Landing Page
 ![Landing Page](docs/images/landing.png)
 
+
+
 ### Authentication
 ![Login Page](docs/images/login.png)
 
+
+
 ### Admin Dashboard
 ![Admin Dashboard](docs/images/admin-dashboard.png)
 
-### User Settings
+
-![Settings](docs/images/settings.png)
 
 ### Design System
 ![Components](docs/images/design-system.png)

frontend/src/components/auth/OAuthButtons.tsx

@@ -144,13 +144,10 @@ function Divider() {
   const t = useTranslations('auth.oauth');
 
   return (
-    <div className="relative">
+    <div className="flex items-center gap-4">
-      <div className="absolute inset-0 flex items-center">
+      <span className="h-px flex-1 bg-border" />
-        <span className="w-full border-t" />
+      <span className="text-xs uppercase text-muted-foreground">{t('divider')}</span>
-      </div>
+      <span className="h-px flex-1 bg-border" />
-      <div className="relative flex justify-center text-xs uppercase">
-        <span className="bg-background px-2 text-muted-foreground">{t('divider')}</span>
-      </div>
     </div>
   );
 }