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.

ROADMAP.md

@@ -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

app/globals.css

@@ -1,67 +1,81 @@
-@import "tailwindcss/base";
+@import "tailwindcss";
-@import "tailwindcss/components";
+@import "poyraz-ui/preset.css";
-@import "tailwindcss/utilities";
+
+@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 {
+  :root {
-    /* Deeper premium dark mode background */
+    --poyraz-background: #ffffff;
-    --background: #120D1C; 
+    --poyraz-foreground: #101828;
-    --background-dark: #0A0710;
+    --poyraz-primary: #dc2626;
-    --foreground: #FBF9FE;
+    --poyraz-primary-foreground: #ffffff;
-    
+    --poyraz-primary-hover: #b91c1c;
-    --card: #1F172B;
+    --poyraz-primary-active: #991b1b;
-    --card-foreground: #FBF9FE;
+    --poyraz-primary-muted: #fef2f2;
-    
+    --poyraz-primary-muted-foreground: #b91c1c;
-    --popover: #1F172B;
+    --poyraz-secondary: #f8fafc;
-    --popover-foreground: #FBF9FE;
+    --poyraz-secondary-foreground: #101828;
-    
+    --poyraz-muted: #f8fafc;
-    --primary: #6C5BB0;
+    --poyraz-muted-foreground: #667085;
-    --primary-foreground: #FFFFFF;
+    --poyraz-accent: #f1f5f9;
-    --primary-hover: #594D9F;
+    --poyraz-accent-hover: #e2e8f0;
-    --primary-pressed: #493D90;
+    --poyraz-accent-foreground: #101828;
-    
+    --poyraz-border: #e4e7ec;
-    --secondary: #2B2538;
+    --poyraz-border-strong: #d0d5dd;
-    --secondary-foreground: #C0B8D6;
+    --poyraz-input: #98a2b3;
-    
+    --poyraz-ring: #dc2626;
-    --muted: #3B3448;
+    --poyraz-card: #ffffff;
-    --muted-foreground: #8F89A5;
+    --poyraz-card-foreground: #101828;
-    
+
-    --accent: #3B3448;
+    /* Legacy aliases kept until all prototype pages move to Poyraz UI. */
-    --accent-foreground: #FBF9FE;
+    --background: var(--poyraz-background);
-    
+    --background-dark: #f8fafc;
-    --destructive: #d8644a;
+    --foreground: var(--poyraz-foreground);
-    --destructive-foreground: #FBF9FE;
+    --card: var(--poyraz-card);
-    
+    --card-foreground: var(--poyraz-card-foreground);
-    --border: #3B3448;
+    --popover: #ffffff;
-    --input: #3B3448;
+    --popover-foreground: var(--poyraz-foreground);
-    --input-bg: #1A1325;
+    --primary: var(--poyraz-primary);
-    --overlay: #000000;
+    --primary-foreground: var(--poyraz-primary-foreground);
-    
+    --primary-hover: var(--poyraz-primary-hover);
-    --ring: #6C5BB0;
+    --primary-pressed: var(--poyraz-primary-active);
-    
+    --secondary: var(--poyraz-secondary);
-    --radius: 0.75rem;
+    --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;
   }
-  body {
+
-    @apply text-foreground;
+  html {
-    background: linear-gradient(135deg, var(--background), var(--background-dark));
+    color-scheme: light;
-    background-attachment: fixed;
-    min-height: 100vh;
   }
-  
+
-  /* Fix for Chrome autofill turning inputs yellow/olive */
+  body {
+    @apply min-h-screen bg-background text-foreground antialiased;
+  }
+
   input:-webkit-autofill,
-  input:-webkit-autofill:hover, 
+  input:-webkit-autofill:hover,
-  input:-webkit-autofill:focus, 
+  input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
-      -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
+    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
-      -webkit-text-fill-color: var(--foreground) !important;
+    -webkit-text-fill-color: var(--foreground) !important;
-      transition: background-color 5000s ease-in-out 0s;
+    transition: background-color 5000s ease-in-out 0s;
   }
 }
 
@@ -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%);
+    background: color-mix(in srgb, var(--poyraz-primary) 55%, transparent);
   }
 }
-

app/layout.tsx

@@ -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",
+  title: "Cognis",
-  description: "Productivity Dashboard - AI-Powered Personal Life and Planning Dashboard",
+  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>

app/login/page.tsx

@@ -1,50 +1,52 @@
-import { login } from '@/app/login/actions'
+import { login } from "@/app/login/actions";
-import { Button } from '@/components/ui/button'
+import { AuthPageShell } from "@/components/auth/auth-page-shell";
-import { Input } from '@/components/ui/input'
+import { ErrorToaster } from "@/components/error-toaster";
-import { Label } from '@/components/ui/label'
+import { LockKeyhole, LogIn, Mail, Search } from "lucide-react";
-import Link from 'next/link'
+import Link from "next/link";
-import { ErrorToaster } from '@/components/error-toaster'
+import { Button, Input, Label } from "poyraz-ui/atoms";
-import { Icon } from '@/components/ui/icon'
-import { AuthPageShell } from '@/components/auth/auth-page-shell'
 
 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 resolvedParams = await searchParams;
-  const error = resolvedParams?.error
+  const error = resolvedParams?.error;
-  const message = resolvedParams?.message
+  const message = resolvedParams?.message;
 
   return (
     <>
       {error && message && <ErrorToaster message={String(message)} />}
       <AuthPageShell
-        title="Tekrar Hoş Geldiniz"
+        title="Giriş yap"
-        description="Kişisel alanınıza ulaşmak için giriş yapın"
+        description="Cognis çalışma alanına erişmek için hesabına giriş yap."
-        imageSrc="/images/1830857_Image.png"
-        imageAlt="MindSpace Background"
-        imageSide="left"
         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">
+                <div className="flex items-center justify-between gap-3">
-                  <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>
                   <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
+            <Button formAction={login} className="h-11 w-full gap-2">
-              formAction={login}
+              <LogIn className="h-4 w-4" />
-              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
-            >
-              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">
+                <span className="bg-background px-2 text-muted-foreground">veya</span>
-                  veya
-                </span>
               </div>
             </div>
 
-            <Button
+            <Button type="button" variant="outline" className="h-11 w-full gap-2">
-              type="button"
+              <Search className="h-4 w-4" />
-              variant="outline"
+              Google ile devam et
-              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>
           </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>
         }
       />
     </>
-  )
+  );
 }

app/register/page.tsx

@@ -1,61 +1,61 @@
-import { signup } from '@/app/login/actions'
+import { signup } from "@/app/login/actions";
-import { Button } from '@/components/ui/button'
+import { AuthPageShell } from "@/components/auth/auth-page-shell";
-import { Input } from '@/components/ui/input'
+import { ErrorToaster } from "@/components/error-toaster";
-import { Label } from '@/components/ui/label'
+import { LockKeyhole, Mail, Search, UserPlus } from "lucide-react";
-import Link from 'next/link'
+import Link from "next/link";
-import { ErrorToaster } from '@/components/error-toaster'
+import { Button, Input, Label } from "poyraz-ui/atoms";
-import { Icon } from '@/components/ui/icon'
-import { AuthPageShell } from '@/components/auth/auth-page-shell'
 
 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 resolvedParams = await searchParams;
-  const error = resolvedParams?.error
+  const error = resolvedParams?.error;
-  const message = resolvedParams?.message
+  const message = resolvedParams?.message;
 
   return (
     <>
       {error && message && <ErrorToaster message={String(message)} />}
       <AuthPageShell
-        title="Aramıza Katılın"
+        title="Kayıt ol"
-        description="Kişisel yaşam alanınızı oluşturmak için kayıt olun"
+        description="Freelancer operasyon panelini kullanmak için hesabını oluştur."
-        imageSrc="/images/1830837_Image.png"
-        imageAlt="MindSpace Background"
-        imageSide="right"
         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
+            <Button formAction={signup} className="h-11 w-full gap-2">
-              formAction={signup}
+              <UserPlus className="h-4 w-4" />
-              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"
+              Hesap oluştur
-            >
-              Kayıt Ol
             </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">
+                <span className="bg-background px-2 text-muted-foreground">veya</span>
-                  veya
-                </span>
               </div>
             </div>
 
-            <Button
+            <Button type="button" variant="outline" className="h-11 w-full gap-2">
-              type="button"
+              <Search className="h-4 w-4" />
-              variant="outline"
+              Google ile devam et
-              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>
           </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>
         }
       />
     </>
-  )
+  );
 }

components/auth/auth-page-shell.tsx

@@ -1,191 +1,185 @@
-"use client"
+"use client";
 
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
-import Image from "next/image"
+import Image from "next/image";
-import { motion, useReducedMotion } from "framer-motion"
+import Link from "next/link";
-import { cn } from "@/lib/utils"
+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
+  title: string;
-  description: string
+  description: string;
-  imageSrc: string
+  imageSrc?: string;
-  imageAlt: string
+  imageAlt?: string;
-  imageSide: "left" | "right"
+  imageSide?: "left" | "right";
-  form: ReactNode
+  form: ReactNode;
-  secondaryAction?: ReactNode
+  secondaryAction?: ReactNode;
-  footer: 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 = {
+  const fadeUp = {
-    hidden: {},
+    initial: reducedMotion ? false : { opacity: 0, y: 18 },
-    show: {
+    animate: { opacity: 1, y: 0 },
-      transition: reducedMotion
+    transition: {
-        ? undefined
+      duration: reducedMotion ? 0 : 0.55,
-        : {
+      ease: [0.22, 1, 0.36, 1] as const,
-            staggerChildren: 0.1,
-            delayChildren: 0.15,
-          },
     },
-  }
+  };
-
-  const itemVariants = {
-    hidden: reducedMotion ? { opacity: 1 } : { opacity: 0, y: 24 },
-    show: {
-      opacity: 1,
-      y: 0,
-      transition: {
-        duration: reducedMotion ? 0 : 0.65,
-        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">
+    <main className="min-h-screen bg-background text-foreground">
-      {imageSide === "left" ? imagePanel : null}
+      <div className="grid min-h-screen grid-cols-1 lg:grid-cols-[minmax(0,1fr)_480px]">
-      {formPanel}
+        <motion.section
-      {imageSide === "right" ? imagePanel : null}
+          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>
 
-      <motion.div
+          <div className="relative z-10 px-10">
-        initial={reducedMotion ? false : { opacity: 0 }}
+            <motion.div {...fadeUp}>
-        animate={{ opacity: 1 }}
+              <Typography
-        transition={{ duration: reducedMotion ? 0 : 1.4 }}
+                variant="h1"
-        className={cn(
+                className="max-w-2xl text-5xl leading-[1.02] text-primary-foreground"
-          "pointer-events-none absolute inset-0 -z-10",
+              >
-          "bg-[radial-gradient(circle_at_top,rgba(108,91,176,0.12),transparent_42%)]",
+                Freelancer işlerini, müşterilerini ve finansını tek yerde yönet.
-        )}
+              </Typography>
-      />
+              <Typography
-    </div>
+                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, 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>
+  );
 }

components/layout/dashboard-shell.tsx

@@ -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,
+  Sidebar,
-  DropdownMenuContent,
+  SidebarBranding,
-  DropdownMenuItem,
+  SidebarContent,
-  DropdownMenuLabel,
+  SidebarFooter,
-  DropdownMenuSeparator,
+  SidebarHeader,
-  DropdownMenuTrigger,
+  SidebarMenu,
-} from "@/components/ui/dropdown-menu";
+  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 { LogOut, Menu } from "lucide-react";
-import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react";
-import Image from "next/image";
 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">
+    <div className="min-h-screen bg-background text-foreground">
-      <AmbientBackdrop />
+      <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 */}
+        {isMobileSidebarOpen ? (
-      <AnimatePresence>
+          <div className="fixed inset-0 z-50 lg:hidden">
-        {isClockFullScreen && (
+            <button
-          <motion.div 
+              type="button"
-            initial={{ opacity: 0, scale: 0.95 }}
+              aria-label="Menuyu kapat"
-            animate={{ opacity: 1, scale: 1 }}
+              className="absolute inset-0 bg-overlay"
-            exit={{ opacity: 0, scale: 0.95 }}
+              onClick={() => setIsMobileSidebarOpen(false)}
-            transition={{ duration: 0.3, ease: "easeOut" }}
+            />
-            className="fixed inset-0 z-[100] bg-[#0A0710] flex flex-col items-center justify-center cursor-pointer"
+            <aside className="relative h-full w-[min(88vw,300px)] border-r border-border bg-background">
-            onClick={() => setIsClockFullScreen(false)}
+              <AppSidebar
-          >
+                pathname={pathname}
-            <div className="absolute top-8 right-8 text-muted-foreground text-sm tracking-widest uppercase">
+                user={user}
-              Click anywhere to close
+                onNavigate={() => setIsMobileSidebarOpen(false)}
-            </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"
-            >
-              <button
-                type="button"
-                aria-label="Menüyü kapat"
-                className="absolute inset-0 bg-background/75 backdrop-blur-sm"
-                onClick={closeMobileSidebar}
               />
-              <motion.div
+            </aside>
-                initial={{ x: -48, opacity: 0 }}
+          </div>
-                animate={{ x: 0, opacity: 1 }}
+        ) : null}
-                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
-                  pathname={pathname}
-                  user={user}
-                  onNavigate={closeMobileSidebar}
-                  onClockClick={() => setIsClockFullScreen(true)}
-                />
-              </motion.div>
-            </motion.div>
-          ) : null}
-        </AnimatePresence>
 
-        {/* Main Content Area (Scrollable internally) */}
+        <div className="flex min-w-0 flex-1 flex-col">
-        <div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
+          <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">
-          {/* Mobile Menu Button */}
+            <Link href="/" className="flex items-center gap-2 font-semibold">
-          <div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
+              <span className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-xs text-primary-foreground">
-            <div className="flex items-center gap-2">
+                C
-              <Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
+              </span>
-              <span className="font-semibold text-sm">Cognis</span>
+              Cognis
-            </div>
+            </Link>
             <Button
               type="button"
               variant="outline"
-              size="icon"
+              className="h-9 w-9 p-0"
-              className="rounded-lg border-border bg-white/5 h-8 w-8"
               onClick={() => setIsMobileSidebarOpen(true)}
             >
               <Menu className="h-4 w-4" />
             </Button>
-          </div>
+          </header>
 
-          <main className="flex-1 p-6 lg:p-10">
+          <main className="flex-1 p-4 lg:p-8">{children}</main>
-            {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">
+    <Sidebar variant="bordered" className="h-full rounded-none border-0">
-      {/* Header / Time Badge */}
+      <SidebarHeader>
-      <div className="pt-8 pb-2 px-4 flex justify-start">
+        <SidebarBranding
-        <ClockBadge onClick={onClockClick} />
+          title="Cognis"
-      </div>
+          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 */}
+      <SidebarContent className="tiny-scrollbar">
-      <nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
+        {sidebarData.map((group) => (
-        {sidebarData.map((group, groupIdx) => (
+          <SidebarSection key={group.title} title={group.title} defaultOpen>
-          <div key={groupIdx} className="space-y-1">
+            <SidebarMenu>
-            <h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
+              {group.items.map((item) => {
-              {group.title}
-            </h4>
-            <div className="space-y-1">
-              {group.items.map((route) => {
                 const isActive =
-                  route.href === "/"
+                  item.href === "/"
                     ? pathname === "/"
-                    : route.href
+                    : item.href
-                      ? pathname === route.href ||
+                      ? pathname === item.href || pathname.startsWith(item.href + "/")
-                        pathname.startsWith(route.href + "/")
                       : false;
+                const Icon = item.icon;
 
                 return (
-                  <Link
+                  <SidebarMenuItem
-                    key={route.href || route.title}
+                    key={item.href || item.title}
-                    href={route.href || "#"}
+                    active={isActive}
-                    className="block w-full"
+                    icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
-                    onClick={onNavigate}
+                    className={cn(isActive && "font-semibold")}
                   >
-                    <div
+                    <Link
-                      className={cn(
+                      href={item.href || "#"}
-                        "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
+                      onClick={onNavigate}
-                        isActive
+                      className="block w-full"
-                          ? "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 && (
+                      {item.title}
-                        <route.icon
+                    </Link>
-                          className={cn(
+                  </SidebarMenuItem>
-                            "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>
-                  </Link>
                 );
               })}
-            </div>
+            </SidebarMenu>
-          </div>
+          </SidebarSection>
         ))}
-      </nav>
+      </SidebarContent>
 
-      {/* Bottom User Profile & Settings Section */}
+      <SidebarSeparator />
-      <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}
-            />
-            <span className="text-[14px]">Ayarlar</span>
-          </Link>
-        </div>
 
-        {/* Separator */}
+      <SidebarFooter className="space-y-3">
-        <div className="h-[1px] w-full bg-white/5 mb-3" />
+        <SidebarUserProfile
-
+          name={user.displayName}
-        <DropdownMenu>
+          role={user.email}
-          <DropdownMenuTrigger asChild>
+          avatarUrl={user.avatarUrl || undefined}
-            <button
+          initials={user.shortName}
-              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();
-              }}
-            >
-              <LogOut className="h-4 w-4" />
-              Çıkış Yap
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </aside>
-  );
-}
-
-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>
+        <form action={signOut}>
-    );
+          <Button
-  }
+            type="submit"
+            variant="outline"
+            className="h-10 w-full justify-start gap-2"
+          >
+            <LogOut className="h-4 w-4" />
+            Cikis yap
+          </Button>
+        </form>
+      </SidebarFooter>
 
-  return (
+      <SidebarTrigger className="hidden" />
-    <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">
+    </Sidebar>
-      {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%)]" />
-    </>
   );
 }

next-env.d.ts

@@ -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.

package.json

@@ -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"
   }
 }

postcss.config.mjs

@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
     autoprefixer: {},
   },
 };

tailwind.config.ts

@@ -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}",