From 76dd1395d521ad5a144b4c60ba427f329a227c08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Fri, 7 Aug 2026 14:32:45 +0300
Subject: [PATCH] feat: implement dark mode support for the project hero and
 progress section

---
 resources/views/projects/show.blade.php | 34 ++++++++++++-------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/views/projects/show.blade.php b/resources/views/projects/show.blade.php
index 1924307..ff66b89 100644
--- a/resources/views/projects/show.blade.php
+++ b/resources/views/projects/show.blade.php
@@ -332,37 +332,37 @@
             @endif
 
             <!-- Hero Section & Progress Banner -->
-            <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900 via-slate-800 to-orange-950 text-white p-6 sm:p-10 shadow-2xl border border-slate-800">
-                <div class="absolute -top-24 -right-24 w-96 h-96 bg-orange-600/20 rounded-full blur-3xl pointer-events-none"></div>
+            <div class="relative overflow-hidden rounded-3xl bg-white dark:bg-slate-900 text-slate-900 dark:text-white p-6 sm:p-10 shadow-xl border border-slate-200 dark:border-slate-800">
+                <div class="absolute -top-24 -right-24 w-96 h-96 bg-orange-500/10 dark:bg-orange-600/20 rounded-full blur-3xl pointer-events-none"></div>
                 
                 <div class="relative z-10 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
                     <!-- Left: Title & Info -->
                     <div class="lg:col-span-8 space-y-4">
-                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/20 border border-orange-500/30 text-orange-300 text-xs font-bold uppercase tracking-wider">
-                            <span class="w-2 h-2 rounded-full bg-orange-400 animate-ping"></span>
+                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 dark:bg-orange-500/20 border border-orange-500/20 dark:border-orange-500/30 text-orange-600 dark:text-orange-300 text-xs font-bold uppercase tracking-wider">
+                            <span class="w-2 h-2 rounded-full bg-orange-500 animate-ping"></span>
                             <span>CANLI PROJE YÖNETİM & TAKİP EKRANI</span>
                         </div>
 
-                        <h1 class="text-2xl sm:text-4xl font-extrabold font-display leading-tight text-white">
+                        <h1 class="text-2xl sm:text-4xl font-extrabold font-display leading-tight text-slate-900 dark:text-white">
                             {{ $project->title }}
                         </h1>
 
-                        <p class="text-sm sm:text-base text-slate-300 font-medium">
+                        <p class="text-sm sm:text-base text-slate-600 dark:text-slate-300 font-medium">
                             Bu ekran, <strong>{{ $project->client_name }}</strong> projesine ait iş takvimini, modül durumlarını ve canlı Kanban panosunu izleyebileceğiniz portal ekranıdır.
                         </p>
 
                         <!-- Meta Tags -->
-                        <div class="flex flex-wrap items-center gap-4 text-xs font-semibold pt-2 text-slate-300">
+                        <div class="flex flex-wrap items-center gap-4 text-xs font-semibold pt-2 text-slate-600 dark:text-slate-300">
                             @if($project->start_date)
-                                <div class="flex items-center gap-1.5 bg-slate-800/80 px-3 py-1.5 rounded-xl border border-slate-700">
-                                    <i data-lucide="calendar" class="w-3.5 h-3.5 text-orange-400"></i>
+                                <div class="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800/80 px-3.5 py-2 rounded-xl border border-slate-200 dark:border-slate-700">
+                                    <i data-lucide="calendar" class="w-3.5 h-3.5 text-orange-600 dark:text-orange-400"></i>
                                     <span>Başlangıç: {{ $project->start_date->format('d.m.Y') }}</span>
                                 </div>
                             @endif
 
                             @if($project->target_date)
-                                <div class="flex items-center gap-1.5 bg-slate-800/80 px-3 py-1.5 rounded-xl border border-slate-700">
-                                    <i data-lucide="flag" class="w-3.5 h-3.5 text-rose-400"></i>
+                                <div class="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800/80 px-3.5 py-2 rounded-xl border border-slate-200 dark:border-slate-700">
+                                    <i data-lucide="flag" class="w-3.5 h-3.5 text-rose-600 dark:text-rose-400"></i>
                                     <span>Hedef Bitiş: {{ $project->target_date->format('d.m.Y') }}</span>
                                 </div>
                             @endif
@@ -370,18 +370,18 @@
                     </div>
 
                     <!-- Right: Progress Meter -->
-                    <div class="lg:col-span-4 flex flex-col items-center justify-center p-6 bg-slate-800/60 backdrop-blur-md rounded-2xl border border-slate-700/60 shadow-inner">
-                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">GENEL PROJE İLERLEMESİ</span>
+                    <div class="lg:col-span-4 flex flex-col items-center justify-center p-6 bg-slate-50 dark:bg-slate-800/60 backdrop-blur-md rounded-2xl border border-slate-200 dark:border-slate-700/60 shadow-sm">
+                        <span class="text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest mb-2">GENEL PROJE İLERLEMESİ</span>
                         
-                        <div id="progress-percent-val" class="text-5xl font-extrabold font-display text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-rose-400 mb-3">
+                        <div id="progress-percent-val" class="text-5xl font-extrabold font-display text-orange-600 dark:text-transparent dark:bg-clip-text dark:bg-gradient-to-r dark:from-orange-400 dark:to-rose-400 mb-3">
                             %{{ $project->progress_percent }}
                         </div>
 
-                        <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden mb-3">
-                            <div id="progress-bar-fill" class="bg-gradient-to-r from-orange-500 to-rose-500 h-full rounded-full transition-all duration-700 shadow-lg shadow-orange-500/50" style="width: {{ $project->progress_percent }}%"></div>
+                        <div class="w-full bg-slate-200 dark:bg-slate-700 h-3 rounded-full overflow-hidden mb-3">
+                            <div id="progress-bar-fill" class="bg-gradient-to-r from-orange-500 to-rose-500 h-full rounded-full transition-all duration-700 shadow-md shadow-orange-500/40" style="width: {{ $project->progress_percent }}%"></div>
                         </div>
 
-                        <span id="progress-status-text" class="text-xs text-slate-300 font-medium text-center">
+                        <span id="progress-status-text" class="text-xs text-slate-700 dark:text-slate-300 font-semibold text-center">
                             @if($project->progress_percent >= 100)
                                 🎉 Proje %100 Başarıyla Tamamlandı!
                             @elseif($project->progress_percent >= 50)