diff --git a/app/globals.css b/app/globals.css index 56e1232..4df6b9e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -4,22 +4,23 @@ @layer base { :root, .dark { - --background: #676278; - --background-dark: #605C71; + /* Deeper premium dark mode background */ + --background: #120D1C; + --background-dark: #0A0710; --foreground: #FBF9FE; - --card: #2B2538; + --card: #1F172B; --card-foreground: #FBF9FE; - --popover: #2B2538; + --popover: #1F172B; --popover-foreground: #FBF9FE; --primary: #6C5BB0; - --primary-foreground: #FBF9FE; + --primary-foreground: #FFFFFF; --primary-hover: #594D9F; --primary-pressed: #493D90; - --secondary: #1F172B; + --secondary: #2B2538; --secondary-foreground: #C0B8D6; --muted: #3B3448; @@ -31,14 +32,14 @@ --destructive: #d8644a; --destructive-foreground: #FBF9FE; - --border: #473F55; - --input: #473F55; - --input-bg: #150E21; - --overlay: #150E21; + --border: #3B3448; + --input: #3B3448; + --input-bg: #1A1325; + --overlay: #000000; - --ring: #594D9F; + --ring: #6C5BB0; - --radius: 0.625rem; + --radius: 0.75rem; } } @@ -48,8 +49,18 @@ } body { @apply text-foreground; - background: linear-gradient(to bottom right, var(--background), var(--background-dark)); + background: linear-gradient(135deg, var(--background), var(--background-dark)); background-attachment: fixed; min-height: 100vh; } + + /* Fix for Chrome autofill turning inputs yellow/olive */ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important; + -webkit-text-fill-color: var(--foreground) !important; + transition: background-color 5000s ease-in-out 0s; + } } diff --git a/app/login/page.tsx b/app/login/page.tsx index 7fa691e..be69ac6 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -2,9 +2,10 @@ import { login } from './actions' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import Link from 'next/link' import { ErrorToaster } from '@/components/error-toaster' +import Image from 'next/image' +import { Icon } from '@/components/ui/icon' export default async function LoginPage({ searchParams, @@ -16,41 +17,117 @@ export default async function LoginPage({ const message = resolvedParams?.message; return ( -
+
{error && message && } - - - MindSpace - - Hesabınıza giriş yapın - - - -
+ + {/* Sol Taraf - Resim Alanı */} +
+
+ MindSpace Background +
+ {/* Logo */} +
+
+ MindSpace Logo +
+
+
+
+ + {/* Sağ Taraf - Form Alanı */} +
+
+
+

+ Tekrar Hoş Geldiniz +

+

+ Kişisel alanınıza ulaşmak için giriş yapın +

+
+ +
- +
- - -
-
-
- -
- Hesabınız yok mu?{' '} - - Kayıt Ol - +
+ + + Şifremi unuttum + +
+
+ + - - + +
+
+ +
+
+ + veya + +
+
+ + + +
+ Hesabınız yok mu?{" "} + + Kayıt Ol + +
+
+
- ) + ); } diff --git a/app/register/page.tsx b/app/register/page.tsx index f6c63f2..a0633a0 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -2,9 +2,10 @@ import { signup } from '@/app/login/actions' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' -import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import Link from 'next/link' import { ErrorToaster } from '@/components/error-toaster' +import Image from 'next/image' +import { Icon } from '@/components/ui/icon' export default async function RegisterPage({ searchParams, @@ -16,41 +17,99 @@ export default async function RegisterPage({ const message = resolvedParams?.message; return ( -
+
{error && message && } - - - MindSpace - - Yeni bir hesap oluşturun - - - -
+ + {/* Sol Taraf - Resim Alanı */} +
+
+ MindSpace Background +
+ {/* Logo */} +
+
+ MindSpace Logo +
+
+
+
+ + {/* Sağ Taraf - Form Alanı */} +
+
+
+

Aramıza Katılın

+

+ Kişisel yaşam alanınızı oluşturmak için kayıt olun +

+
+ +
- +
- -
-
-
- -
- Zaten hesabınız var mı?{' '} - - Giriş Yap - +
+ + - - + +
+
+ +
+
+ + veya + +
+
+ + + +
+ Zaten hesabınız var mı?{' '} + + Giriş Yap + +
+
+
) } diff --git a/components/ui/icon.tsx b/components/ui/icon.tsx new file mode 100644 index 0000000..c4edb34 --- /dev/null +++ b/components/ui/icon.tsx @@ -0,0 +1,7 @@ +'use client'; + +import { Icon as IconifyIcon } from '@iconify/react'; + +export function Icon({ icon, className }: { icon: string; className?: string }) { + return ; +} diff --git a/package.json b/package.json index 78811ca..eb90035 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@base-ui/react": "^1.4.1", "@hookform/resolvers": "^5.2.2", + "@iconify/react": "^6.0.2", "@radix-ui/react-alert-dialog": "^1.1.15", "@radix-ui/react-checkbox": "^1.3.3", "@radix-ui/react-dialog": "^1.1.15", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bea4d75..ea1a170 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@hookform/resolvers': specifier: ^5.2.2 version: 5.2.2(react-hook-form@7.75.0(react@19.2.6)) + '@iconify/react': + specifier: ^6.0.2 + version: 6.0.2(react@19.2.6) '@radix-ui/react-alert-dialog': specifier: ^1.1.15 version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) @@ -402,6 +405,14 @@ packages: resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} engines: {node: '>=18.18'} + '@iconify/react@6.0.2': + resolution: {integrity: sha512-SMmC2sactfpJD427WJEDN6PMyznTFMhByK9yLW0gOTtnjzzbsi/Ke/XqsumsavFPwNiXs8jSiYeZTmLCLwO+Fg==} + peerDependencies: + react: '>=16' + + '@iconify/types@2.0.0': + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + '@img/colour@1.1.0': resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==} engines: {node: '>=18'} @@ -4380,6 +4391,13 @@ snapshots: '@humanwhocodes/retry@0.4.3': {} + '@iconify/react@6.0.2(react@19.2.6)': + dependencies: + '@iconify/types': 2.0.0 + react: 19.2.6 + + '@iconify/types@2.0.0': {} + '@img/colour@1.1.0': optional: true