feat: redesign login page — split layout, Emlak CRM + Kovak Yazılım branding
- Sol: koyu panel — logo, özellikler listesi (portföy/eşleşme/sunum/müşteri), alt imza - Sağ: temiz form — email + şifre, mobil responsive - İşletmem referansları kaldırıldı, Emlak CRM olarak güncellendi
This commit is contained in:
egecankomur
@@ -1,8 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "İşletmem — Giriş",
|
||||
description: "İşletmem KovakCRM hesabınıza giriş yapın veya yeni hesap oluşturun.",
|
||||
title: "Emlak CRM — Giriş",
|
||||
description: "Emlak CRM hesabınıza giriş yapın.",
|
||||
};
|
||||
|
||||
export default function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
@@ -2,13 +2,11 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { useActionState } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Loader2, Building2, Users, Presentation, Zap } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Logo } from "@/components/logo";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { signInAction } from "@/lib/appwrite/auth-actions";
|
||||
import { initialAuthState } from "@/lib/appwrite/auth-types";
|
||||
@@ -21,148 +19,183 @@ export function LoginForm1({
|
||||
const [state, formAction, isPending] = useActionState(signInAction, initialAuthState);
|
||||
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6", className)} {...props}>
|
||||
<Card className="overflow-hidden p-0">
|
||||
<CardContent className="grid p-0 md:grid-cols-2">
|
||||
<form action={formAction} className="p-6 md:p-10">
|
||||
{inviteCode && <input type="hidden" name="inviteCode" value={inviteCode} />}
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex justify-center">
|
||||
<Link href="/" className="flex items-center gap-2 font-medium">
|
||||
<div className="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
|
||||
<Logo size={22} />
|
||||
</div>
|
||||
<span className="text-xl font-semibold">İşletmem</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={cn("flex min-h-svh w-full", className)} {...props}>
|
||||
{/* ── Sol: Marka paneli ── */}
|
||||
<div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-slate-900 p-12 text-white lg:flex">
|
||||
{/* Arka plan dekorasyon */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 15% 15%, rgba(59,130,246,0.25) 0%, transparent 45%), radial-gradient(circle at 85% 80%, rgba(99,102,241,0.2) 0%, transparent 50%)",
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute -top-32 -right-32 size-96 rounded-full bg-blue-500/10 blur-3xl"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="pointer-events-none absolute -bottom-40 -left-24 size-[28rem] rounded-full bg-indigo-600/10 blur-3xl"
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
{inviteCode && (
|
||||
<p className="text-muted-foreground rounded-md border bg-muted/50 px-3 py-2 text-center text-xs">
|
||||
Davete katılmak için giriş yapın.
|
||||
</p>
|
||||
)}
|
||||
{/* Logo + Ürün adı */}
|
||||
<div className="relative z-10 flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-xl bg-blue-500/20 ring-1 ring-blue-400/30 backdrop-blur">
|
||||
<Building2 className="size-5 text-blue-300" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-bold tracking-tight leading-none">Emlak CRM</p>
|
||||
<p className="text-xs text-slate-400 leading-none mt-0.5">Kovak Yazılım</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Tekrar hoş geldiniz</h1>
|
||||
<p className="text-muted-foreground text-sm text-balance mt-1">
|
||||
Hesabınıza giriş yaparak işletmenizi yönetmeye devam edin
|
||||
</p>
|
||||
</div>
|
||||
{/* Orta içerik */}
|
||||
<div className="relative z-10 space-y-8">
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-3xl font-bold leading-snug tracking-tight">
|
||||
Gayrimenkul süreçlerinizi tek platformdan yönetin
|
||||
</h2>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
İlanlar, müşteriler, akıllı eşleşme ve sunumlar — ekibinizle birlikte, her yerden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="ornek@firma.com"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
<div className="flex items-center">
|
||||
<Label htmlFor="password">Şifre</Label>
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="ml-auto text-xs text-muted-foreground hover:text-foreground underline-offset-4 hover:underline"
|
||||
>
|
||||
Şifremi unuttum
|
||||
</Link>
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
{
|
||||
icon: Building2,
|
||||
title: "Portföy yönetimi",
|
||||
desc: "Tüm ilanlarınızı fotoğraflarıyla ekleyin, takip edin",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Akıllı eşleşme",
|
||||
desc: "Ağırlıklı puanlama ile müşteri × ilan eşleştirmesi",
|
||||
},
|
||||
{
|
||||
icon: Presentation,
|
||||
title: "Sunum paylaşımı",
|
||||
desc: "Müşteriye özel sunum linkleri oluşturun ve gönderin",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Müşteri & arama",
|
||||
desc: "Alıcı ve kiracıların kriterlerini saklayın",
|
||||
},
|
||||
].map(({ icon: Icon, title, desc }) => (
|
||||
<li key={title} className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-lg bg-blue-500/15 ring-1 ring-blue-400/20">
|
||||
<Icon className="size-3.5 text-blue-300" />
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium leading-none">{title}</p>
|
||||
<p className="mt-0.5 text-xs text-slate-400">{desc}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{state.error && (
|
||||
<p className="text-destructive text-sm text-center" role="alert">
|
||||
{state.error}
|
||||
</p>
|
||||
)}
|
||||
{/* Alt: Kovak Yazılım */}
|
||||
<div className="relative z-10 flex flex-col gap-0.5">
|
||||
<p className="text-xs font-semibold text-slate-300">Emlak CRM</p>
|
||||
<p className="text-xs text-slate-500">Kovak Yazılım · kovaksoft.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isPending}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Giriş yapılıyor...
|
||||
</>
|
||||
) : (
|
||||
"Giriş yap"
|
||||
)}
|
||||
</Button>
|
||||
{/* ── Sağ: Giriş formu ── */}
|
||||
<div className="flex w-full flex-col items-center justify-center bg-white px-6 py-10 lg:w-1/2 dark:bg-slate-950">
|
||||
<div className="w-full max-w-sm space-y-8">
|
||||
{/* Mobilde logo */}
|
||||
<div className="flex items-center gap-2 lg:hidden">
|
||||
<div className="flex size-8 items-center justify-center rounded-lg bg-blue-600 text-white">
|
||||
<Building2 className="size-4" />
|
||||
</div>
|
||||
<span className="font-bold">Emlak CRM</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Hesabınız yok mu?{" "}
|
||||
<div className="space-y-1.5">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Tekrar hoş geldiniz</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Hesabınıza giriş yaparak devam edin
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{inviteCode && (
|
||||
<p className="rounded-md border bg-blue-50 px-3 py-2 text-center text-xs text-blue-700 dark:bg-blue-950 dark:text-blue-300">
|
||||
Davete katılmak için giriş yapın.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form action={formAction} className="space-y-5">
|
||||
{inviteCode && <input type="hidden" name="inviteCode" value={inviteCode} />}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="ornek@firma.com"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Şifre</Label>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="text-foreground font-medium underline-offset-4 hover:underline"
|
||||
href="/forgot-password"
|
||||
className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
|
||||
>
|
||||
Hesap oluştur
|
||||
Şifremi unuttum
|
||||
</Link>
|
||||
</div>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{state.error && (
|
||||
<p className="text-destructive text-sm" role="alert">
|
||||
{state.error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isPending}>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Giriş yapılıyor...
|
||||
</>
|
||||
) : (
|
||||
"Giriş yap"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<BrandPanel />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<p className="text-muted-foreground text-center text-xs text-balance">
|
||||
Giriş yaparak{" "}
|
||||
<Link href="#" className="underline-offset-4 hover:underline">
|
||||
Kullanım Şartları
|
||||
</Link>{" "}
|
||||
ve{" "}
|
||||
<Link href="#" className="underline-offset-4 hover:underline">
|
||||
Gizlilik Politikası
|
||||
</Link>
|
||||
'nı kabul etmiş olursunuz.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BrandPanel() {
|
||||
return (
|
||||
<div className="bg-primary text-primary-foreground relative hidden md:flex md:flex-col md:justify-between overflow-hidden p-10">
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.25) 0%, transparent 45%)",
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="absolute -top-24 -right-24 size-72 rounded-full bg-white/10 blur-3xl"
|
||||
aria-hidden
|
||||
/>
|
||||
<div
|
||||
className="absolute -bottom-32 -left-20 size-80 rounded-full bg-black/10 blur-3xl"
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex items-center gap-2">
|
||||
<div className="bg-primary-foreground/15 ring-1 ring-primary-foreground/20 backdrop-blur flex size-10 items-center justify-center rounded-md">
|
||||
<Logo size={22} />
|
||||
<p className="text-muted-foreground text-center text-sm">
|
||||
Hesabınız yok mu?{" "}
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="text-foreground font-medium underline-offset-4 hover:underline"
|
||||
>
|
||||
Hesap oluştur
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-lg font-medium">İşletmem</span>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col gap-3">
|
||||
<h2 className="text-3xl font-semibold leading-tight">
|
||||
Müşteriden faturaya, tek panelden işletmenizi yönetin.
|
||||
</h2>
|
||||
<p className="text-primary-foreground/80 text-sm">
|
||||
Müşteriler, hizmetler, takvim, görevler ve finans — hepsi tek yerde, multi-tenant ve ekibinize özel.
|
||||
{/* Alt logo — sadece geniş ekranda gizli olan mobil için */}
|
||||
<p className="mt-10 text-xs text-muted-foreground lg:hidden">
|
||||
Emlak CRM · Kovak Yazılım
|
||||
</p>
|
||||
<div className="text-primary-foreground/70 mt-4 text-xs">KovakSoft tarafından</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -12,11 +12,5 @@ export default async function Page({
|
||||
const user = await getCurrentUser();
|
||||
if (user) redirect(invite ? `/d/${invite}` : "/dashboard");
|
||||
|
||||
return (
|
||||
<div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
|
||||
<div className="w-full max-w-sm md:max-w-4xl">
|
||||
<LoginForm1 inviteCode={invite} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <LoginForm1 inviteCode={invite} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user