chore: update dependencies and configuration for Tailwind CSS

- Added "@tailwindcss/postcss" to package.json dependencies. - Updated "tailwindcss" version to "^4.3.0" in package.json. - Modified postcss.config.mjs to use "@tailwindcss/postcss" instead of "tailwindcss". - Changed darkMode configuration in tailwind.config.ts to a string format.
2026-06-02 12:46:18 +03:00
parent b6b6f4fc32
commit 01692d3958
12 changed files with 1401 additions and 1208 deletions
@@ -505,6 +505,14 @@ Notlar:
 - Modul sayfalari Faz 2'de CRUD gelistirme sirasinda Poyraz UI'a tasinir.
 - Poyraz UI rehberi: `poyraz-ui-usage-guide.md`

+Faz 1.5 repo ciktisi:
+
+- Poyraz UI paketi projeye eklendi.
+- Tailwind CSS v4 ve `@tailwindcss/postcss` gecisi yapildi.
+- Global CSS, `poyraz-ui/preset.css` ve light Poyraz tokenlariyla guncellendi.
+- Login ve register sayfalari Poyraz UI atomlariyla yeniden kuruldu.
+- Dashboard shell ve sidebar Poyraz UI organism yaklasimina tasindi.
+
 ---

 ### Faz 2: Core CRUD Modulleri
@@ -1,60 +1,74 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss";
+@import "poyraz-ui/preset.css";
+
+@source "../app/**/*.{js,ts,jsx,tsx,mdx}";
+@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
+@source "../config/**/*.{js,ts,jsx,tsx,mdx}";

@layer base {
-  :root, .dark {
-    /* Deeper premium dark mode background */
-    --background: #120D1C; 
-    --background-dark: #0A0710;
-    --foreground: #FBF9FE;
+  :root {
+    --poyraz-background: #ffffff;
+    --poyraz-foreground: #101828;
+    --poyraz-primary: #dc2626;
+    --poyraz-primary-foreground: #ffffff;
+    --poyraz-primary-hover: #b91c1c;
+    --poyraz-primary-active: #991b1b;
+    --poyraz-primary-muted: #fef2f2;
+    --poyraz-primary-muted-foreground: #b91c1c;
+    --poyraz-secondary: #f8fafc;
+    --poyraz-secondary-foreground: #101828;
+    --poyraz-muted: #f8fafc;
+    --poyraz-muted-foreground: #667085;
+    --poyraz-accent: #f1f5f9;
+    --poyraz-accent-hover: #e2e8f0;
+    --poyraz-accent-foreground: #101828;
+    --poyraz-border: #e4e7ec;
+    --poyraz-border-strong: #d0d5dd;
+    --poyraz-input: #98a2b3;
+    --poyraz-ring: #dc2626;
+    --poyraz-card: #ffffff;
+    --poyraz-card-foreground: #101828;

-    --card: #1F172B;
-    --card-foreground: #FBF9FE;
-    
-    --popover: #1F172B;
-    --popover-foreground: #FBF9FE;
-    
-    --primary: #6C5BB0;
-    --primary-foreground: #FFFFFF;
-    --primary-hover: #594D9F;
-    --primary-pressed: #493D90;
-    
-    --secondary: #2B2538;
-    --secondary-foreground: #C0B8D6;
-    
-    --muted: #3B3448;
-    --muted-foreground: #8F89A5;
-    
-    --accent: #3B3448;
-    --accent-foreground: #FBF9FE;
-    
-    --destructive: #d8644a;
-    --destructive-foreground: #FBF9FE;
-    
-    --border: #3B3448;
-    --input: #3B3448;
-    --input-bg: #1A1325;
-    --overlay: #000000;
-    
-    --ring: #6C5BB0;
-    
-    --radius: 0.75rem;
-  }
+    /* Legacy aliases kept until all prototype pages move to Poyraz UI. */
+    --background: var(--poyraz-background);
+    --background-dark: #f8fafc;
+    --foreground: var(--poyraz-foreground);
+    --card: var(--poyraz-card);
+    --card-foreground: var(--poyraz-card-foreground);
+    --popover: #ffffff;
+    --popover-foreground: var(--poyraz-foreground);
+    --primary: var(--poyraz-primary);
+    --primary-foreground: var(--poyraz-primary-foreground);
+    --primary-hover: var(--poyraz-primary-hover);
+    --primary-pressed: var(--poyraz-primary-active);
+    --secondary: var(--poyraz-secondary);
+    --secondary-foreground: var(--poyraz-secondary-foreground);
+    --muted: var(--poyraz-muted);
+    --muted-foreground: var(--poyraz-muted-foreground);
+    --accent: var(--poyraz-accent);
+    --accent-foreground: var(--poyraz-accent-foreground);
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --border: var(--poyraz-border);
+    --input: var(--poyraz-input);
+    --input-bg: #ffffff;
+    --overlay: rgba(15, 23, 42, 0.48);
+    --ring: var(--poyraz-ring);
+    --radius: 0.375rem;
  }

-@layer base {
  * {
    @apply border-border;
  }
+
+  html {
+    color-scheme: light;
+  }
+
  body {
-    @apply text-foreground;
-    background: linear-gradient(135deg, var(--background), var(--background-dark));
-    background-attachment: fixed;
-    min-height: 100vh;
+    @apply min-h-screen bg-background text-foreground antialiased;
  }

-  /* Fix for Chrome autofill turning inputs yellow/olive */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
@@ -70,15 +84,17 @@
    width: 4px;
    height: 4px;
  }
+
  .tiny-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
+
  .tiny-scrollbar::-webkit-scrollbar-thumb {
-    background: theme('colors.primary.DEFAULT' / 30%);
+    background: color-mix(in srgb, var(--poyraz-primary) 30%, transparent);
    border-radius: 4px;
  }
-  .tiny-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: theme('colors.primary.DEFAULT' / 60%);
-  }
-}

+  .tiny-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--poyraz-primary) 55%, transparent);
+  }
+}
@@ -7,8 +7,8 @@ import { Toaster } from "react-hot-toast";
 const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });

 export const metadata: Metadata = {
-  title: "Cognis - Your AI Assistant",
-  description: "Productivity Dashboard - AI-Powered Personal Life and Planning Dashboard",
+  title: "Cognis",
+  description: "Self-hosted freelancer operating dashboard",
 };

 export default function RootLayout({
@@ -19,7 +19,7 @@ export default function RootLayout({
  return (
    <html
      lang="tr"
-      className={cn("font-sans dark", geist.variable)}
+      className={cn("font-sans", geist.variable)}
      suppressHydrationWarning
    >
      <body>
@@ -1,50 +1,52 @@
-import { login } from '@/app/login/actions'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import Link from 'next/link'
-import { ErrorToaster } from '@/components/error-toaster'
-import { Icon } from '@/components/ui/icon'
-import { AuthPageShell } from '@/components/auth/auth-page-shell'
+import { login } from "@/app/login/actions";
+import { AuthPageShell } from "@/components/auth/auth-page-shell";
+import { ErrorToaster } from "@/components/error-toaster";
+import { LockKeyhole, LogIn, Mail, Search } from "lucide-react";
+import Link from "next/link";
+import { Button, Input, Label } from "poyraz-ui/atoms";

 export default async function LoginPage({
  searchParams,
 }: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  const resolvedParams = await searchParams
-  const error = resolvedParams?.error
-  const message = resolvedParams?.message
+  const resolvedParams = await searchParams;
+  const error = resolvedParams?.error;
+  const message = resolvedParams?.message;

  return (
    <>
      {error && message && <ErrorToaster message={String(message)} />}
      <AuthPageShell
-        title="Tekrar Hoş Geldiniz"
-        description="Kişisel alanınıza ulaşmak için giriş yapın"
-        imageSrc="/images/1830857_Image.png"
-        imageAlt="MindSpace Background"
-        imageSide="left"
+        title="Giriş yap"
+        description="Cognis çalışma alanına erişmek için hesabına giriş yap."
        form={
          <form className="space-y-6">
            <div className="space-y-4">
              <div className="space-y-2">
-                <Label htmlFor="email">E-posta</Label>
+                <Label htmlFor="email" className="flex items-center gap-2">
+                  <Mail className="h-4 w-4 text-muted-foreground" />
+                  E-posta
+                </Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="ornek@mail.com"
                  required
-                  className="h-11 bg-input-bg border-border"
+                  className="h-11"
                />
              </div>
+
              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="password">Şifre</Label>
+                <div className="flex items-center justify-between gap-3">
+                  <Label htmlFor="password" className="flex items-center gap-2">
+                    <LockKeyhole className="h-4 w-4 text-muted-foreground" />
+                    Şifre
+                  </Label>
                  <Link
                    href="/forgot-password"
-                    className="text-sm font-medium text-primary hover:text-primary-hover transition-colors"
+                    className="text-sm font-medium text-primary transition-colors hover:text-primary-hover"
                  >
                    Şifremi unuttum
                  </Link>
@@ -54,16 +56,14 @@ export default async function LoginPage({
                  name="password"
                  type="password"
                  required
-                  className="h-11 bg-input-bg border-border"
+                  className="h-11"
                />
              </div>
            </div>

-            <Button
-              formAction={login}
-              className="w-full h-11 text-base font-medium shadow-md transition-transform active:scale-[0.98] bg-primary hover:bg-primary-hover text-primary-foreground"
-            >
-              Giriş Yap
+            <Button formAction={login} className="h-11 w-full gap-2">
+              <LogIn className="h-4 w-4" />
+              Giriş yap
            </Button>
          </form>
        }
@@ -74,34 +74,28 @@ export default async function LoginPage({
                <span className="w-full border-t border-border" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-background px-2 text-muted-foreground">
-                  veya
-                </span>
+                <span className="bg-background px-2 text-muted-foreground">veya</span>
              </div>
            </div>

-            <Button
-              type="button"
-              variant="outline"
-              className="w-full h-11 text-base font-medium bg-card border-border hover:bg-secondary transition-colors"
-            >
-              <Icon icon="flat-color-icons:google" className="w-5 h-5 mr-2" />
-              Google ile Devam Et
+            <Button type="button" variant="outline" className="h-11 w-full gap-2">
+              <Search className="h-4 w-4" />
+              Google ile devam et
            </Button>
          </div>
        }
        footer={
          <div className="text-center text-sm">
-            Hesabınız yok mu?{' '}
+            Hesabın yok mu?{" "}
            <Link
              href="/register"
-              className="font-medium text-primary hover:text-primary-hover transition-colors"
+              className="font-medium text-primary transition-colors hover:text-primary-hover"
            >
-              Kayıt Ol
+              Kayıt ol
            </Link>
          </div>
        }
      />
    </>
-  )
+  );
 }
@@ -1,61 +1,61 @@
-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 Link from 'next/link'
-import { ErrorToaster } from '@/components/error-toaster'
-import { Icon } from '@/components/ui/icon'
-import { AuthPageShell } from '@/components/auth/auth-page-shell'
+import { signup } from "@/app/login/actions";
+import { AuthPageShell } from "@/components/auth/auth-page-shell";
+import { ErrorToaster } from "@/components/error-toaster";
+import { LockKeyhole, Mail, Search, UserPlus } from "lucide-react";
+import Link from "next/link";
+import { Button, Input, Label } from "poyraz-ui/atoms";

 export default async function RegisterPage({
  searchParams,
 }: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  const resolvedParams = await searchParams
-  const error = resolvedParams?.error
-  const message = resolvedParams?.message
+  const resolvedParams = await searchParams;
+  const error = resolvedParams?.error;
+  const message = resolvedParams?.message;

  return (
    <>
      {error && message && <ErrorToaster message={String(message)} />}
      <AuthPageShell
-        title="Aramıza Katılın"
-        description="Kişisel yaşam alanınızı oluşturmak için kayıt olun"
-        imageSrc="/images/1830837_Image.png"
-        imageAlt="MindSpace Background"
-        imageSide="right"
+        title="Kayıt ol"
+        description="Freelancer operasyon panelini kullanmak için hesabını oluştur."
        form={
          <form className="space-y-6">
            <div className="space-y-4">
              <div className="space-y-2">
-                <Label htmlFor="email">E-posta</Label>
+                <Label htmlFor="email" className="flex items-center gap-2">
+                  <Mail className="h-4 w-4 text-muted-foreground" />
+                  E-posta
+                </Label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="ornek@mail.com"
                  required
-                  className="h-11 bg-input-bg border-border"
+                  className="h-11"
                />
              </div>
+
              <div className="space-y-2">
-                <Label htmlFor="password">Şifre</Label>
+                <Label htmlFor="password" className="flex items-center gap-2">
+                  <LockKeyhole className="h-4 w-4 text-muted-foreground" />
+                  Şifre
+                </Label>
                <Input
                  id="password"
                  name="password"
                  type="password"
                  required
-                  className="h-11 bg-input-bg border-border"
+                  className="h-11"
                />
              </div>
            </div>

-            <Button
-              formAction={signup}
-              className="w-full h-11 text-base font-medium shadow-md transition-transform active:scale-[0.98] bg-primary hover:bg-primary-hover text-primary-foreground"
-            >
-              Kayıt Ol
+            <Button formAction={signup} className="h-11 w-full gap-2">
+              <UserPlus className="h-4 w-4" />
+              Hesap oluştur
            </Button>
          </form>
        }
@@ -66,34 +66,28 @@ export default async function RegisterPage({
                <span className="w-full border-t border-border" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-background px-2 text-muted-foreground">
-                  veya
-                </span>
+                <span className="bg-background px-2 text-muted-foreground">veya</span>
              </div>
            </div>

-            <Button
-              type="button"
-              variant="outline"
-              className="w-full h-11 text-base font-medium bg-card border-border hover:bg-secondary transition-colors"
-            >
-              <Icon icon="flat-color-icons:google" className="w-5 h-5 mr-2" />
-              Google ile Devam Et
+            <Button type="button" variant="outline" className="h-11 w-full gap-2">
+              <Search className="h-4 w-4" />
+              Google ile devam et
            </Button>
          </div>
        }
        footer={
          <div className="text-center text-sm">
-            Zaten hesabınız var mı?{' '}
+            Zaten hesabın var mı?{" "}
            <Link
              href="/login"
-              className="font-medium text-primary hover:text-primary-hover transition-colors"
+              className="font-medium text-primary transition-colors hover:text-primary-hover"
            >
-              Giriş Yap
+              Giriş yap
            </Link>
          </div>
        }
      />
    </>
-  )
+  );
 }
@@ -1,191 +1,185 @@
-"use client"
+"use client";

-import type { ReactNode } from "react"
-import Image from "next/image"
-import { motion, useReducedMotion } from "framer-motion"
-import { cn } from "@/lib/utils"
+import type { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { motion, useReducedMotion } from "framer-motion";
+import {
+  ArrowUpRight,
+  BarChart3,
+  CalendarDays,
+  Kanban,
+  Wallet,
+} from "lucide-react";
+import { Typography } from "poyraz-ui/atoms";

 type AuthPageShellProps = {
-  title: string
-  description: string
-  imageSrc: string
-  imageAlt: string
-  imageSide: "left" | "right"
-  form: ReactNode
-  secondaryAction?: ReactNode
-  footer: ReactNode
-}
+  title: string;
+  description: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  imageSide?: "left" | "right";
+  form: ReactNode;
+  secondaryAction?: ReactNode;
+  footer: ReactNode;
+};
+
+const highlights = [
+  { label: "Müşteriler", icon: Kanban },
+  { label: "Takvim", icon: CalendarDays },
+  { label: "Finans", icon: Wallet },
+  { label: "Raporlar", icon: BarChart3 },
+];

 export function AuthPageShell({
  title,
  description,
-  imageSrc,
-  imageAlt,
-  imageSide,
  form,
  secondaryAction,
  footer,
 }: AuthPageShellProps) {
-  const reducedMotion = useReducedMotion()
+  const reducedMotion = useReducedMotion();

-  const stackVariants = {
-    hidden: {},
-    show: {
-      transition: reducedMotion
-        ? undefined
-        : {
-            staggerChildren: 0.1,
-            delayChildren: 0.15,
-          },
-    },
-  }
-
-  const itemVariants = {
-    hidden: reducedMotion ? { opacity: 1 } : { opacity: 0, y: 24 },
-    show: {
-      opacity: 1,
-      y: 0,
+  const fadeUp = {
+    initial: reducedMotion ? false : { opacity: 0, y: 18 },
+    animate: { opacity: 1, y: 0 },
    transition: {
-        duration: reducedMotion ? 0 : 0.65,
+      duration: reducedMotion ? 0 : 0.55,
      ease: [0.22, 1, 0.36, 1] as const,
    },
-    },
-  }
-
-  const formPanel = (
-    <motion.div
-      initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? 36 : -36 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{
-        duration: reducedMotion ? 0 : 0.8,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="flex flex-1 items-center justify-center p-8 w-full lg:w-1/2"
-    >
-      <motion.div
-        variants={stackVariants}
-        initial="hidden"
-        animate="show"
-        className="w-full max-w-sm space-y-8"
-      >
-        <motion.div variants={itemVariants} className="text-center lg:text-left">
-          <h1 className="text-3xl font-bold tracking-tight text-foreground">
-            {title}
-          </h1>
-          <p className="text-sm text-muted-foreground mt-2">{description}</p>
-        </motion.div>
-
-        <motion.div variants={itemVariants}>{form}</motion.div>
-
-        {secondaryAction ? (
-          <motion.div variants={itemVariants}>{secondaryAction}</motion.div>
-        ) : null}
-
-        <motion.div variants={itemVariants}>{footer}</motion.div>
-      </motion.div>
-    </motion.div>
-  )
-
-  const imagePanel = (
-    <motion.div
-      initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? -42 : 42 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{
-        duration: reducedMotion ? 0 : 0.95,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="hidden lg:flex lg:w-1/2 p-4 relative"
-    >
-      <div className="relative w-full h-full overflow-hidden rounded-2xl">
-        <motion.div
-          initial={reducedMotion ? false : { scale: 1.08, filter: "blur(6px)" }}
-          animate={{ scale: 1, filter: "blur(0px)" }}
-          transition={{
-            duration: reducedMotion ? 0 : 1.2,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-          className="absolute inset-0"
-        >
-          <Image src={imageSrc} alt={imageAlt} fill className="object-cover" priority />
-        </motion.div>
-
-        <motion.div
-          initial={reducedMotion ? false : { opacity: 0 }}
-          animate={{ opacity: 0.9 }}
-          transition={{ duration: reducedMotion ? 0 : 0.9, delay: reducedMotion ? 0 : 0.1 }}
-          className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/30"
-        />
-
-        <motion.div
-          initial={reducedMotion ? false : { opacity: 0, scale: 0.92 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{
-            duration: reducedMotion ? 0 : 1.1,
-            delay: reducedMotion ? 0 : 0.2,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-          className="absolute inset-0 bg-[radial-gradient(circle_at_50%_18%,rgba(255,255,255,0.18),transparent_46%)]"
-        />
-
-        <motion.div
-          initial={reducedMotion ? false : { opacity: 0, y: 26 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{
-            duration: reducedMotion ? 0 : 0.85,
-            delay: reducedMotion ? 0 : 0.32,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-          className="absolute bottom-0 left-0 right-0 flex items-center justify-center pointer-events-none z-10"
-        >
-          <motion.div
-            animate={
-              reducedMotion
-                ? undefined
-                : {
-                    y: [0, -8, 0],
-                    scale: [1, 1.02, 1],
-                  }
-            }
-            transition={
-              reducedMotion
-                ? undefined
-                : {
-                    duration: 8,
-                    repeat: Infinity,
-                    ease: "easeInOut",
-                  }
-            }
-            className="relative drop-shadow-2xl flex items-center gap-4"
-          >
-            <Image
-              src="/logo/logo.png"
-              alt="MindSpace Logo"
-              width={256}
-              height={128}
-              className="object-contain w-64 h-auto"
-              priority
-            />
-          </motion.div>
-        </motion.div>
-      </div>
-    </motion.div>
-  )
+  };

  return (
-    <div className="relative isolate flex min-h-screen overflow-hidden bg-background">
-      {imageSide === "left" ? imagePanel : null}
-      {formPanel}
-      {imageSide === "right" ? imagePanel : null}
+    <main className="min-h-screen bg-background text-foreground">
+      <div className="grid min-h-screen grid-cols-1 lg:grid-cols-[minmax(0,1fr)_480px]">
+        <motion.section
+          initial={reducedMotion ? false : { opacity: 0, x: -28 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{
+            duration: reducedMotion ? 0 : 0.75,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          className="relative hidden overflow-hidden bg-primary text-primary-foreground lg:flex lg:flex-col lg:justify-between"
+        >
+          <div className="absolute inset-0 opacity-20 bg-[linear-gradient(rgba(255,255,255,.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.18)_1px,transparent_1px)] bg-size-[32px_32px]" />
+          <div className="relative z-10 flex items-center gap-4 p-10">
+            <Image
+              src="/logo/LogoWithBg.png"
+              alt="Cognis logo"
+              width={64}
+              height={64}
+              className="h-16 w-16 rounded-sm object-cover border border-red-500"
+              priority
+            />
+            <div>
+              <div className="text-lg font-bold leading-none">Cognis</div>
+              <div className="mt-1 text-sm text-primary-foreground/75">
+                Freelancer OS
+              </div>
+            </div>
+          </div>
+
+          <div className="relative z-10 px-10">
+            <motion.div {...fadeUp}>
+              <Typography
+                variant="h1"
+                className="max-w-2xl text-5xl leading-[1.02] text-primary-foreground"
+              >
+                Freelancer işlerini, müşterilerini ve finansını tek yerde yönet.
+              </Typography>
+              <Typography
+                variant="lead"
+                className="mt-6 max-w-xl text-primary-foreground/78"
+              >
+                Cognis, günlük operasyonunu, projelerini, side projectlerini ve
+                temel finans durumunu sade raporlarla takip etmen için
+                tasarlanır.
+              </Typography>
+            </motion.div>

            <motion.div
-        initial={reducedMotion ? false : { opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: reducedMotion ? 0 : 1.4 }}
-        className={cn(
-          "pointer-events-none absolute inset-0 -z-10",
-          "bg-[radial-gradient(circle_at_top,rgba(108,91,176,0.12),transparent_42%)]",
-        )}
+              initial={reducedMotion ? false : { opacity: 0, y: 18 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: reducedMotion ? 0 : 0.55, delay: 0.16 }}
+              className="mt-10 grid max-w-xl grid-cols-2 gap-3"
+            >
+              {highlights.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <div
+                    key={item.label}
+                    className="flex items-center gap-3 rounded-sm border border-white/18 bg-white/10 px-4 py-3 text-sm font-medium backdrop-blur"
+                  >
+                    <Icon className="h-4 w-4" />
+                    {item.label}
+                  </div>
+                );
+              })}
+            </motion.div>
+          </div>
+
+          <div className="w-full relative z-10 p-10 text-sm text-primary-foreground/78">
+            <span>Açık kaynak ve self-host edilebilir.</span>{" "}
+            <Link
+              href="https://github.com/poyrazavsever/cognis"
+              className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
+              target="_blank"
+            >
+              GitHub <ArrowUpRight className="h-3.5 w-3.5 inline" />
+            </Link>
+            <span> üzerinden ulaşabilirsin, </span>
+            <Link
+              href="https://ui.poyrazavsever.com"
+              className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
+              target="_blank"
+            >
+              Poyraz UI <ArrowUpRight className="h-3.5 w-3.5 inline" />
+            </Link>
+            <span> ile tasarlandı, </span>
+            <Link
+              href="https://poyrazavsever.com"
+              className="inline-flex items-center gap-1 font-semibold text-primary-foreground underline-offset-4 hover:underline"
+              target="_blank"
+            >
+              Poyraz Avsever <ArrowUpRight className="h-3.5 w-3.5 inline" />
+            </Link>
+            <span> tarafından kodlandı.</span>
+          </div>
+        </motion.section>
+
+        <section className="flex min-h-screen items-center justify-center px-6 py-8 lg:px-12">
+          <motion.div
+            initial={reducedMotion ? false : { opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: reducedMotion ? 0 : 0.6, delay: 0.08 }}
+            className="w-full max-w-sm"
+          >
+            <div className="mb-8 flex justify-center lg:hidden">
+              <Image
+                src="/logo/LogoWithBg.png"
+                alt="Cognis logo"
+                width={84}
+                height={84}
+                className="h-20 w-20 rounded-sm object-cover"
+                priority
              />
            </div>
-  )
+
+            <div className="hidden space-y-2 text-center lg:block lg:text-left">
+              <Typography variant="h2" className="text-3xl">
+                {title}
+              </Typography>
+              <Typography variant="muted">{description}</Typography>
+            </div>
+
+            <div className="mt-8 space-y-6">
+              {form}
+              {secondaryAction}
+              {footer}
+            </div>
+          </motion.div>
+        </section>
+      </div>
+    </main>
+  );
 }
@@ -1,23 +1,26 @@
 "use client";

 import { signOut } from "@/app/login/actions";
-import { Button } from "@/components/ui/button";
+import { Button } from "poyraz-ui/atoms";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+  Sidebar,
+  SidebarBranding,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarSection,
+  SidebarSeparator,
+  SidebarTrigger,
+  SidebarUserProfile,
+} from "poyraz-ui/organisms";
 import { sidebarData } from "@/config/sidebar";
 import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
-import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react";
-import Image from "next/image";
+import { LogOut, Menu } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useState } from "react";

 type DashboardShellProps = {
  children: React.ReactNode;
@@ -32,312 +35,137 @@ type DashboardShellProps = {
 export function DashboardShell({ children, user }: DashboardShellProps) {
  const pathname = usePathname();
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
-  const [isClockFullScreen, setIsClockFullScreen] = useState(false);
-
-  const closeMobileSidebar = () => setIsMobileSidebarOpen(false);

  return (
-    <div className="relative h-screen overflow-hidden bg-background text-foreground">
-      <AmbientBackdrop />
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="flex min-h-screen">
+        <aside className="hidden w-[280px] shrink-0 border-r border-border bg-background lg:block">
+          <AppSidebar pathname={pathname} user={user} />
+        </aside>

-      {/* Full Screen Clock Overlay */}
-      <AnimatePresence>
-        {isClockFullScreen && (
-          <motion.div 
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
-            className="fixed inset-0 z-[100] bg-[#0A0710] flex flex-col items-center justify-center cursor-pointer"
-            onClick={() => setIsClockFullScreen(false)}
-          >
-            <div className="absolute top-8 right-8 text-muted-foreground text-sm tracking-widest uppercase">
-              Click anywhere to close
-            </div>
-            <FullScreenClock />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      <div className="relative z-10 flex h-screen">
-        {/* Desktop Sidebar */}
-        <div className="hidden shrink-0 lg:block lg:w-[260px] h-screen border-r border-white/5 bg-[#0A0710]">
-          <SidebarPanel pathname={pathname} user={user} desktop onClockClick={() => setIsClockFullScreen(true)} />
-        </div>
-
-        {/* Mobile Sidebar */}
-        <AnimatePresence>
        {isMobileSidebarOpen ? (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 z-50 flex lg:hidden"
-            >
+          <div className="fixed inset-0 z-50 lg:hidden">
            <button
              type="button"
-                aria-label="Menüyü kapat"
-                className="absolute inset-0 bg-background/75 backdrop-blur-sm"
-                onClick={closeMobileSidebar}
+              aria-label="Menuyu kapat"
+              className="absolute inset-0 bg-overlay"
+              onClick={() => setIsMobileSidebarOpen(false)}
            />
-              <motion.div
-                initial={{ x: -48, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ x: -48, opacity: 0 }}
-                transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
-                className="relative z-10 h-full w-[min(88vw,280px)] bg-[#0A0710]"
-              >
-                <SidebarPanel
+            <aside className="relative h-full w-[min(88vw,300px)] border-r border-border bg-background">
+              <AppSidebar
                pathname={pathname}
                user={user}
-                  onNavigate={closeMobileSidebar}
-                  onClockClick={() => setIsClockFullScreen(true)}
+                onNavigate={() => setIsMobileSidebarOpen(false)}
              />
-              </motion.div>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
-
-        {/* Main Content Area (Scrollable internally) */}
-        <div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
-          {/* Mobile Menu Button */}
-          <div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
-            <div className="flex items-center gap-2">
-              <Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
-              <span className="font-semibold text-sm">Cognis</span>
+            </aside>
          </div>
+        ) : null}
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
+            <Link href="/" className="flex items-center gap-2 font-semibold">
+              <span className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-xs text-primary-foreground">
+                C
+              </span>
+              Cognis
+            </Link>
            <Button
              type="button"
              variant="outline"
-              size="icon"
-              className="rounded-lg border-border bg-white/5 h-8 w-8"
+              className="h-9 w-9 p-0"
              onClick={() => setIsMobileSidebarOpen(true)}
            >
              <Menu className="h-4 w-4" />
            </Button>
-          </div>
+          </header>

-          <main className="flex-1 p-6 lg:p-10">
-            {children}
-          </main>
+          <main className="flex-1 p-4 lg:p-8">{children}</main>
        </div>
      </div>
    </div>
  );
 }

-function SidebarPanel({
+function AppSidebar({
  pathname,
  user,
-  desktop = false,
  onNavigate,
-  onClockClick,
 }: {
  pathname: string;
  user: DashboardShellProps["user"];
-  desktop?: boolean;
  onNavigate?: () => void;
-  onClockClick: () => void;
 }) {
  return (
-    <aside className="flex h-full flex-col overflow-hidden">
-      {/* Header / Time Badge */}
-      <div className="pt-8 pb-2 px-4 flex justify-start">
-        <ClockBadge onClick={onClockClick} />
-      </div>
+    <Sidebar variant="bordered" className="h-full rounded-none border-0">
+      <SidebarHeader>
+        <SidebarBranding
+          title="Cognis"
+          subtitle="Freelancer OS"
+          logo={
+            <span className="flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-sm font-bold text-primary-foreground">
+              C
+            </span>
+          }
+        />
+      </SidebarHeader>

-      {/* Main Navigation Links */}
-      <nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
-        {sidebarData.map((group, groupIdx) => (
-          <div key={groupIdx} className="space-y-1">
-            <h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
-              {group.title}
-            </h4>
-            <div className="space-y-1">
-              {group.items.map((route) => {
+      <SidebarContent className="tiny-scrollbar">
+        {sidebarData.map((group) => (
+          <SidebarSection key={group.title} title={group.title} defaultOpen>
+            <SidebarMenu>
+              {group.items.map((item) => {
                const isActive =
-                  route.href === "/"
+                  item.href === "/"
                    ? pathname === "/"
-                    : route.href
-                      ? pathname === route.href ||
-                        pathname.startsWith(route.href + "/")
+                    : item.href
+                      ? pathname === item.href || pathname.startsWith(item.href + "/")
                      : false;
+                const Icon = item.icon;

                return (
+                  <SidebarMenuItem
+                    key={item.href || item.title}
+                    active={isActive}
+                    icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
+                    className={cn(isActive && "font-semibold")}
+                  >
                    <Link
-                    key={route.href || route.title}
-                    href={route.href || "#"}
-                    className="block w-full"
+                      href={item.href || "#"}
                      onClick={onNavigate}
+                      className="block w-full"
                    >
-                    <div
-                      className={cn(
-                        "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
-                        isActive
-                          ? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
-                          : "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
-                      )}
-                    >
-                      {route.icon && (
-                        <route.icon
-                          className={cn(
-                            "h-[18px] w-[18px] shrink-0 transition-colors",
-                            isActive
-                              ? "text-primary-foreground"
-                              : "text-muted-foreground/70",
-                          )}
-                          strokeWidth={isActive ? 2.5 : 2}
-                        />
-                      )}
-                      <span className="text-[14px]">{route.title}</span>
-                    </div>
+                      {item.title}
                    </Link>
+                  </SidebarMenuItem>
                );
              })}
-            </div>
-          </div>
+            </SidebarMenu>
+          </SidebarSection>
        ))}
-      </nav>
+      </SidebarContent>

-      {/* Bottom User Profile & Settings Section */}
-      <div className="mt-auto p-3">
-        <div className="mb-2">
-          <Link
-            href="/settings"
-            onClick={onNavigate}
-            className={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
-              pathname.startsWith("/settings")
-                ? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
-                : "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
-            )}
-          >
-            <Settings2
-              className="h-[18px] w-[18px] shrink-0"
-              strokeWidth={pathname.startsWith("/settings") ? 2.5 : 2}
+      <SidebarSeparator />
+
+      <SidebarFooter className="space-y-3">
+        <SidebarUserProfile
+          name={user.displayName}
+          role={user.email}
+          avatarUrl={user.avatarUrl || undefined}
+          initials={user.shortName}
        />
-            <span className="text-[14px]">Ayarlar</span>
-          </Link>
-        </div>
-
-        {/* Separator */}
-        <div className="h-[1px] w-full bg-white/5 mb-3" />
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              className="flex w-full items-center justify-between gap-2 rounded-md p-2 transition-all hover:bg-white/5 outline-none"
-            >
-              <div className="flex items-center gap-2 min-w-0">
-                <Avatar user={user} />
-                <div className="min-w-0 text-left">
-                  <div className="truncate text-sm font-medium text-foreground leading-tight">
-                    {user.displayName}
-                  </div>
-                </div>
-              </div>
-              <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
-            </button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent
-            side="right"
-            align="end"
-            sideOffset={16}
-            className="w-56 rounded-lg border border-white/10 bg-[#0A0710] p-1 text-foreground shadow-2xl"
-          >
-            <DropdownMenuLabel className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
-              {user.email}
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator className="bg-white/5" />
-            <DropdownMenuItem
-              className="rounded-md px-2 py-1.5 text-destructive focus:bg-destructive/10 focus:text-destructive cursor-pointer flex items-center gap-2 text-sm"
-              onClick={async () => {
-                await signOut();
-              }}
+        <form action={signOut}>
+          <Button
+            type="submit"
+            variant="outline"
+            className="h-10 w-full justify-start gap-2"
          >
            <LogOut className="h-4 w-4" />
-              Çıkış Yap
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </aside>
-  );
-}
+            Cikis yap
+          </Button>
+        </form>
+      </SidebarFooter>

-function ClockBadge({ onClick }: { onClick: () => void }) {
-  const [time, setTime] = useState<string>("");
-
-  useEffect(() => {
-    const updateTime = () => {
-      setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
-    };
-    updateTime();
-    const interval = setInterval(updateTime, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  if (!time) {
-    return <div className="h-[34px] w-[100px] bg-white/5 animate-pulse rounded-sm" />;
-  }
-
-  return (
-    <button
-      onClick={onClick}
-      className="border border-white/5 bg-[#150F1D] px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground hover:text-foreground hover:border-primary/50 transition-colors rounded-sm flex items-center gap-2 group outline-none"
-    >
-      <Clock className="h-3.5 w-3.5 text-primary/70 group-hover:text-primary transition-colors" />
-      <span suppressHydrationWarning>{time}</span>
-    </button>
-  );
-}
-
-function FullScreenClock() {
-  const [time, setTime] = useState<string>("");
-  
-  useEffect(() => {
-    const updateTime = () => {
-      setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
-    };
-    updateTime();
-    const interval = setInterval(updateTime, 1000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="text-[12vw] font-black tracking-tighter text-primary/90 drop-shadow-[0_0_60px_rgba(108,91,176,0.3)] select-none tabular-nums">
-      <span suppressHydrationWarning>{time || "..."}</span>
-    </div>
-  );
-}
-
-function Avatar({ user }: { user: DashboardShellProps["user"] }) {
-  if (user.avatarUrl) {
-    return (
-      <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary/20 bg-primary/10">
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src={user.avatarUrl}
-          alt={user.displayName}
-          className="h-full w-full object-cover"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/30 bg-primary/20 font-semibold text-primary-foreground text-sm">
-      {user.shortName}
-    </div>
-  );
-}
-
-function AmbientBackdrop() {
-  return (
-    <>
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(108,91,176,0.1),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(108,91,176,0.1),transparent_30%)]" />
-    </>
+      <SidebarTrigger className="hidden" />
+    </Sidebar>
  );
 }
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -22,6 +22,7 @@
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-toast": "^1.2.15",
    "@supabase/ssr": "^0.10.2",
+    "@tailwindcss/postcss": "^4.3.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "dexie": "^4.4.2",
@@ -30,6 +31,7 @@
    "lucide-react": "^1.14.0",
    "next": "^16.2.6",
    "next-themes": "^0.4.6",
+    "poyraz-ui": "^2.0.1",
    "radix-ui": "^1.4.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
@@ -51,7 +53,7 @@
    "eslint": "^9.18.0",
    "eslint-config-next": "^16.2.6",
    "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.3.0",
    "typescript": "^5.7.3"
  }
 }
@@ -1,6 +1,6 @@
 const config = {
  plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
 };
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";

 const config: Config = {
-  darkMode: ["class"],
+  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",