kovakmedya/kovakemlak-crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign login page — split layout, Emlak CRM + Kovak Yazılım branding

Browse Source 
- 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
2026-05-05 20:10:01 +03:00
parent d9aff26376
commit f043f4acd7
3 changed files with 164 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(auth)/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "İşletmem — Giriş", title: "Emlak CRM — Giriş",
description: "İşletmem KovakCRM hesabınıza giriş yapın veya yeni hesap oluşturun.", description: "Emlak CRM hesabınıza giriş yapın.",
}; };
export default function AuthLayout({ children }: { children: React.ReactNode }) { export default function AuthLayout({ children }: { children: React.ReactNode }) {
src/app/(auth)/sign-in/components/login-form-1.tsx
+161 -128
View File
@@ -2,13 +2,11 @@
import Link from "next/link"; import Link from "next/link";
import { useActionState } from "react"; 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 { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Logo } from "@/components/logo";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { signInAction } from "@/lib/appwrite/auth-actions"; import { signInAction } from "@/lib/appwrite/auth-actions";
import { initialAuthState } from "@/lib/appwrite/auth-types"; import { initialAuthState } from "@/lib/appwrite/auth-types";
@@ -21,148 +19,183 @@ export function LoginForm1({
const [state, formAction, isPending] = useActionState(signInAction, initialAuthState); const [state, formAction, isPending] = useActionState(signInAction, initialAuthState);
return ( return (
<div className={cn("flex flex-col gap-6", className)} {...props}> <div className={cn("flex min-h-svh w-full", className)} {...props}>
<Card className="overflow-hidden p-0"> {/* ── Sol: Marka paneli ── */}
<CardContent className="grid p-0 md:grid-cols-2"> <div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-slate-900 p-12 text-white lg:flex">
<form action={formAction} className="p-6 md:p-10"> {/* Arka plan dekorasyon */}
{inviteCode && <input type="hidden" name="inviteCode" value={inviteCode} />} <div
<div className="flex flex-col gap-6"> className="pointer-events-none absolute inset-0"
<div className="flex justify-center"> style={{
<Link href="/" className="flex items-center gap-2 font-medium"> backgroundImage:
<div className="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md"> "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%)",
<Logo size={22} /> }}
</div> aria-hidden
<span className="text-xl font-semibold">İşletmem</span> />
</Link> <div
</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 && ( {/* Logo + Ürün adı */}
<p className="text-muted-foreground rounded-md border bg-muted/50 px-3 py-2 text-center text-xs"> <div className="relative z-10 flex items-center gap-3">
Davete katılmak için giriş yapın. <div className="flex size-10 items-center justify-center rounded-xl bg-blue-500/20 ring-1 ring-blue-400/30 backdrop-blur">
</p> <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"> {/* Orta içerik */}
<h1 className="text-2xl font-bold tracking-tight">Tekrar hoş geldiniz</h1> <div className="relative z-10 space-y-8">
<p className="text-muted-foreground text-sm text-balance mt-1"> <div className="space-y-3">
Hesabınıza giriş yaparak işletmenizi yönetmeye devam edin <h2 className="text-3xl font-bold leading-snug tracking-tight">
</p> Gayrimenkul süreçlerinizi tek platformdan yönetin
</div> </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"> <ul className="space-y-4">
<Label htmlFor="email">Email</Label> {[
<Input {
id="email" icon: Building2,
name="email" title: "Portföy yönetimi",
type="email" desc: "Tüm ilanlarınızı fotoğraflarıyla ekleyin, takip edin",
placeholder="ornek@firma.com" },
autoComplete="email" {
required icon: Zap,
/> title: "Akıllı eşleşme",
</div> desc: "Ağırlıklı puanlama ile müşteri × ilan eşleştirmesi",
},
<div className="grid gap-3"> {
<div className="flex items-center"> icon: Presentation,
<Label htmlFor="password">Şifre</Label> title: "Sunum paylaşımı",
<Link desc: "Müşteriye özel sunum linkleri oluşturun ve gönderin",
href="/forgot-password" },
className="ml-auto text-xs text-muted-foreground hover:text-foreground underline-offset-4 hover:underline" {
> icon: Users,
Şifremi unuttum title: "Müşteri & arama",
</Link> 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> </div>
<Input <div>
id="password" <p className="text-sm font-medium leading-none">{title}</p>
name="password" <p className="mt-0.5 text-xs text-slate-400">{desc}</p>
type="password" </div>
autoComplete="current-password" </li>
required ))}
/> </ul>
</div> </div>
{state.error && ( {/* Alt: Kovak Yazılım */}
<p className="text-destructive text-sm text-center" role="alert"> <div className="relative z-10 flex flex-col gap-0.5">
{state.error} <p className="text-xs font-semibold text-slate-300">Emlak CRM</p>
</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}> {/* ── Sağ: Giriş formu ── */}
{isPending ? ( <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">
<Loader2 className="size-4 animate-spin" /> {/* Mobilde logo */}
Giriş yapılıyor... <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" />
"Giriş yap" </div>
)} <span className="font-bold">Emlak CRM</span>
</Button> </div>
<div className="text-center text-sm text-muted-foreground"> <div className="space-y-1.5">
Hesabınız yok mu?{" "} <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 <Link
href="/sign-up" href="/forgot-password"
className="text-foreground font-medium underline-offset-4 hover:underline" className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
> >
Hesap oluştur Şifremi unuttum
</Link> </Link>
</div> </div>
<Input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
/>
</div> </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> </form>
<BrandPanel /> <p className="text-muted-foreground text-center text-sm">
</CardContent> Hesabınız yok mu?{" "}
</Card> <Link
href="/sign-up"
<p className="text-muted-foreground text-center text-xs text-balance"> className="text-foreground font-medium underline-offset-4 hover:underline"
Giriş yaparak{" "} >
<Link href="#" className="underline-offset-4 hover:underline"> Hesap oluştur
Kullanım Şartları </Link>
</Link>{" "} </p>
ve{" "}
<Link href="#" className="underline-offset-4 hover:underline">
Gizlilik Politikası
</Link>
&apos;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} />
</div> </div>
<span className="text-lg font-medium">İşletmem</span>
</div>
<div className="relative z-10 flex flex-col gap-3"> {/* Alt logo — sadece geniş ekranda gizli olan mobil için */}
<h2 className="text-3xl font-semibold leading-tight"> <p className="mt-10 text-xs text-muted-foreground lg:hidden">
Müşteriden faturaya, tek panelden işletmenizi yönetin. Emlak CRM · Kovak Yazılım
</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.
</p> </p>
<div className="text-primary-foreground/70 mt-4 text-xs">KovakSoft tarafından</div>
</div> </div>
</div> </div>
); );
src/app/(auth)/sign-in/page.tsx
+1 -7
View File
@@ -12,11 +12,5 @@ export default async function Page({
const user = await getCurrentUser(); const user = await getCurrentUser();
if (user) redirect(invite ? `/d/${invite}` : "/dashboard"); if (user) redirect(invite ? `/d/${invite}` : "/dashboard");
return ( return <LoginForm1 inviteCode={invite} />;
<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>
);
} }