From 6a7e977330f3b6e8d261d05a1f1df41ceaeaa678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 11 May 2026 09:13:08 +0300
Subject: [PATCH] refactor: overhaul career page with updated UI, NDA
 information, and issue-based workflow visualization

---
 resources/views/front/career/index.blade.php | 307 ++++++++++++-------
 1 file changed, 191 insertions(+), 116 deletions(-)

diff --git a/resources/views/front/career/index.blade.php b/resources/views/front/career/index.blade.php
index 307deaa..a070702 100644
--- a/resources/views/front/career/index.blade.php
+++ b/resources/views/front/career/index.blade.php
@@ -1,110 +1,169 @@
 @extends('layouts.site')
 
 @section('content')
-<section class="wrapper bg-soft-primary">
-  <div class="container pt-15 pb-0 pt-md-20 pb-md-0 text-center">
-    <div class="row">
-      <div class="col-xl-8 col-lg-10 mx-auto">
-        <h1 class="display-1 mb-3 text-dark">{{ __('career.job_application_title', ['default' => 'İş Başvurusu']) }}</h1>
-        <p class="lead mb-0 text-muted">{{ __('career.job_application_description', ['default' => 'Ekibimize katılmak için aşağıdaki formu doldurarak CV\'nizi iletebilirsiniz.']) }}</p>
-      </div>
+<section class="wrapper bg-[#f0f7ff]">
+  <div class="container pt-16 pb-8 text-center">
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-5xl font-bold mb-4 text-slate-900 tracking-tight">{{ __('career.job_application_title', ['default' => 'İş Başvurusu']) }}</h1>
+      <p class="text-lg text-slate-600 leading-relaxed">{{ __('career.job_application_description', ['default' => 'Ekibimize katılmak için aşağıdaki formu doldurarak CV\'nizi iletebilirsiniz.']) }}</p>
     </div>
   </div>
 </section>
 
-<section class="wrapper bg-light">
-  <div class="container pt-5 pb-14 pb-md-16">
-    <div class="row">
-      <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto">
-        <div class="card shadow-xl border-0 rounded-4">
-          <div class="card-body p-8 p-md-12">
-            <div class="row mb-10 text-center text-md-start">
-              <div class="col-12">
-                <h2 class="h3 mb-2 text-dark">Başvuru Formu</h2>
-                <div class="divider-citrus"></div>
+<section class="wrapper bg-white py-12 lg:py-20">
+  <div class="container px-4">
+    <div class="max-w-5xl mx-auto mb-16">
+        <div class="bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-2xl shadow-sm">
+            <h4 class="text-xl font-bold text-blue-900 mb-4">Değerli Geliştirici Adayı,</h4>
+            <div class="text-blue-800 space-y-4 leading-relaxed">
+                <p>Trunçgil Teknoloji olarak geliştirmekte olduğumuz Laravel tabanlı yazılım projemiz için her seviyeden freelance geliştiricilerle çalışıyoruz. İş modeli olarak <strong>issue/task bazlı ödeme sistemi</strong> uygulanmakta olup, görevler önceden belirlenmiş ücretlerle adaylara sunulmaktadır.</p>
+                <p>Aşağıdaki bilgileri sizden istememizin temel sebebi, başvurunuzun değerlendirilmesi sürecinde projemizin kaynak kodlarına sınırlı da olsa erişim sağlamamız gerektiğidir. Bu nedenle, hem yasal güvenliği sağlamak hem de tarafların haklarını korumak adına, aşağıdaki <strong>Gizlilik Sözleşmesi (NDA)</strong> ve <strong>Bağımsız Sözleşmeli Sözleşmesi</strong> belgelerinin incelenmesi ve imzalanmış hallerinin başvuru esnasında iletilmesi gerekmektedir.</p>
+                <p>Lütfen aşağıdaki formu doldurunuz ve imzalanmış belgeleri PDF formatında tek bir dosya veya zip olarak yükleyiniz.</p>
+                <p>Bilgileriniz gizlilik içerisinde yalnızca başvuru süreci ve taraflar arası yasal koruma amacıyla kullanılacaktır.</p>
+                <p>Teşekkür ederiz.</p>
+                <div class="pt-4 border-t border-blue-200 mt-4 text-sm font-medium">
+                    TRUNÇGİL TEKNOLOJİ SANAYİ VE TİCARET LİMİTED ŞİRKETİ<br>
+                    Adres: Çamtepe Mah. Mahmut Tevfik Atay Bul. Gaziantep Teknopark No: 4A İç Kapı No: 1 Şahinbey / Gaziantep<br>
+                    E-posta: info@truncgil.com.tr<br>
+                    Vergi No: 8591492435 – Şahinbey V.D. | MERSİS: 0859149243500001
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="text-center mb-12">
+      <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">Çalışma Modelimiz</h2>
+      <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">Issue Bazlı Uzaktan Çalışma</h3>
+    </div>
+
+    <div class="flex flex-col lg:flex-row items-center gap-12 mb-20 max-w-6xl mx-auto">
+      <div class="w-full lg:w-3/5">
+        <div class="bg-white p-4 md:p-8 rounded-3xl shadow-2xl border border-slate-100 overflow-hidden flex justify-center">
+          <pre class="mermaid">
+            graph TD
+              A[Başvuru Formunun Doldurulması] --> B[Ön Değerlendirme]
+              B --> C[Teknik Mülakat / Tanışma]
+              C --> D[Sözleşmelerin Onaylanması]
+              D --> E[Sisteme Kayıt ve Erişim]
+              E --> F[Görev Atanması (Issue/Task)]
+              F --> G[Görevin Tamamlanması]
+              G --> H[Kontrol ve Ödeme]
+              
+              style A fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
+              style H fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
+              style D fill:#fff1f2,stroke:#fecdd3
+          </pre>
+        </div>
+      </div>
+      <div class="w-full lg:w-2/5 space-y-8">
+        <h4 class="text-2xl font-bold text-slate-900">Şartlar ve Koşullar</h4>
+        <div class="space-y-6">
+          <div class="flex items-start gap-4">
+            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
+              <i class="uil uil-check-circle text-xl"></i>
+            </div>
+            <div>
+              <span class="font-bold text-slate-800 block text-sm">Tamamen Uzaktan:</span>
+              <p class="text-sm text-slate-500">Dünyanın her yerinden, kendi çalışma ortamınızda görev alabilirsiniz.</p>
+            </div>
+          </div>
+          <div class="flex items-start gap-4">
+            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
+              <i class="uil uil-check-circle text-xl"></i>
+            </div>
+            <div>
+              <span class="font-bold text-slate-800 block text-sm">Bağımsız Sözleşmeli:</span>
+              <p class="text-sm text-slate-500">Freelance çalışma modeli ile projelerimize katkı sağlarsınız.</p>
+            </div>
+          </div>
+          <div class="flex items-start gap-4">
+            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-50 flex items-center justify-center text-[#e31e24]">
+              <i class="uil uil-check-circle text-xl"></i>
+            </div>
+            <div>
+              <span class="font-bold text-slate-800 block text-sm">Zorunlu Belgeler:</span>
+              <p class="text-sm text-slate-500">Güvenlik gereği NDA ve Bağımsız Sözleşmeli belgelerinin imzalanması zorunludur.</p>
+              <div class="mt-2 flex flex-wrap gap-3">
+                <a href="https://docs.google.com/document/d/1WwDo_zgx4KjdnX6ohJaCfPQSS0-eRN41OB1HYvAmDO4/edit?usp=sharing" target="_blank" class="text-xs font-bold text-blue-600 hover:underline flex items-center gap-1">
+                    <i class="uil uil-file-download"></i> Gizlilik Sözleşmesi (NDA)
+                </a>
+                <a href="https://docs.google.com/document/d/1VofpJIxmQmxSLk6OxsDjCtrMte0UkAFCSaQfZCS2DP8/edit?usp=sharing" target="_blank" class="text-xs font-bold text-blue-600 hover:underline flex items-center gap-1">
+                    <i class="uil uil-file-download"></i> Bağımsız Sözleşmeli Sözleşmesi
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="max-w-4xl mx-auto">
+      <div class="bg-white rounded-[2rem] shadow-2xl overflow-hidden border border-slate-100">
+        <div class="p-8 md:p-12">
+          <div class="mb-10 text-center">
+            <h2 class="text-3xl font-bold text-slate-900 mb-2">Başvuru Formu</h2>
+            <p class="text-slate-500">Lütfen tüm alanları eksiksiz doldurunuz.</p>
+            <div class="w-12 h-1 bg-[#e31e24] rounded-full mx-auto mt-4"></div>
+          </div>
+
+          <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6" id="career-application-form">
+            @csrf
+            <input type="hidden" name="type" value="job">
+            
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
+              <label for="name" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.name', ['default' => 'Ad Soyad']) }} <span class="text-[#e31e24]">*</span></label>
+              <div class="md:col-span-9">
+                <input type="text" name="name" id="name" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="Örn: Ahmet Yılmaz" value="{{ old('name') }}" required>
               </div>
             </div>
 
-@if(session('success'))
-              <div class="alert alert-success mt-4 mb-10 border-0 shadow-sm rounded-3">
-                <div class="d-flex align-items-center">
-                  <i class="uil uil-check-circle fs-24 me-3 text-success"></i>
-                  <div class="fw-medium text-success">{{ session('success') }}</div>
-                </div>
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
+              <label for="email" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.email', ['default' => 'E-posta']) }} <span class="text-[#e31e24]">*</span></label>
+              <div class="md:col-span-9">
+                <input type="email" name="email" id="email" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="Örn: ahmet@example.com" value="{{ old('email') }}" required>
               </div>
-            @endif
+            </div>
 
-            <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="career-form" id="career-application-form">
-              @csrf
-              <input type="hidden" name="type" value="job">
-              
-              <!-- Personal Info Group -->
-              <div class="row mb-8 align-items-center">
-                <label for="name" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.name', ['default' => 'Ad Soyad']) }} <span class="text-citrus">*</span></label>
-                <div class="col-md-9">
-                  <input type="text" name="name" id="name" class="form-control custom-input @error('name') is-invalid @enderror" placeholder="Örn: Ahmet Yılmaz" value="{{ old('name') }}" required>
-                  @error('name') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
-                </div>
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
+              <label for="phone" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.phone', ['default' => 'Telefon']) }}</label>
+              <div class="md:col-span-9">
+                <input type="text" name="phone" id="phone" class="w-full px-5 py-3 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300" placeholder="Örn: 05XX XXX XX XX" value="{{ old('phone') }}">
               </div>
+            </div>
 
-              <div class="row mb-8 align-items-center">
-                <label for="email" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.email', ['default' => 'E-posta']) }} <span class="text-citrus">*</span></label>
-                <div class="col-md-9">
-                  <input type="email" name="email" id="email" class="form-control custom-input @error('email') is-invalid @enderror" placeholder="Örn: ahmet@example.com" value="{{ old('email') }}" required>
-                  @error('email') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
-                </div>
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
+              <label for="cv" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.cv', ['default' => 'Özgeçmiş ve İmzalı Belgeler']) }} <span class="text-[#e31e24]">*</span></label>
+              <div class="md:col-span-9">
+                <input type="file" name="cv" id="cv" class="w-full px-5 py-2.5 rounded-xl border border-slate-200 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-red-50 file:text-[#e31e24] hover:file:bg-red-100 transition-all" required>
+                <p class="mt-2 text-xs text-slate-400">PDF veya ZIP (Maks. 5MB). Lütfen CV ve imzalı NDA/Sözleşme belgelerini yükleyiniz.</p>
               </div>
+            </div>
 
-              <div class="row mb-8 align-items-center">
-                <label for="phone" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.phone', ['default' => 'Telefon']) }}</label>
-                <div class="col-md-9">
-                  <input type="text" name="phone" id="phone" class="form-control custom-input @error('phone') is-invalid @enderror" placeholder="Örn: 05XX XXX XX XX" value="{{ old('phone') }}">
-                  @error('phone') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
-                </div>
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
+              <label for="message" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right pt-3">{{ __('career.message', ['default' => 'Mesajınız']) }}</label>
+              <div class="md:col-span-9">
+                <textarea name="message" id="message" class="w-full px-5 py-4 rounded-xl border border-slate-200 focus:ring-4 focus:ring-red-500/10 focus:border-[#e31e24] outline-none transition-all placeholder-slate-300 min-h-[150px]" placeholder="Yetenekleriniz, deneyimleriniz ve eklemek istedikleriniz...">{{ old('message') }}</textarea>
               </div>
+            </div>
 
-              <div class="row mb-8 align-items-center">
-                <label for="cv" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0">{{ __('career.cv', ['default' => 'Özgeçmiş (CV)']) }} <span class="text-citrus">*</span></label>
-                <div class="col-md-9">
-                  <div class="input-group">
-                    <input type="file" name="cv" id="cv" class="form-control custom-input @error('cv') is-invalid @enderror" required>
-                  </div>
-                  <div class="form-text text-start text-muted mt-2">PDF, DOC, DOCX dosyaları kabul edilir. (Maks. 5MB)</div>
-                  @error('cv') <div class="invalid-feedback d-block text-start">{{ $message }}</div> @enderror
-                </div>
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+              <div class="md:col-start-4 md:col-span-9">
+                <button type="submit" id="submit-btn" class="w-full md:w-auto px-10 py-4 bg-[#e31e24] hover:bg-[#c4191f] text-white font-bold rounded-full transition-all shadow-lg shadow-red-500/30 flex items-center justify-center gap-3">
+                  <span class="btn-text">{{ __('career.submit', ['default' => 'Başvuruyu Gönder']) }}</span>
+                  <span class="spinner-border spinner-border-sm hidden animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" role="status"></span>
+                  <i class="uil uil-arrow-right text-xl btn-icon"></i>
+                </button>
               </div>
-
-              <div class="row mb-10">
-                <label for="message" class="col-md-3 col-form-label fw-bold text-md-end text-dark mb-2 mb-md-0 pt-md-3">{{ __('career.message', ['default' => 'Mesajınız']) }}</label>
-                <div class="col-md-9">
-                  <textarea name="message" id="message" class="form-control custom-input @error('message') is-invalid @enderror" placeholder="Başvurunuzla ilgili iletmek istediklerinizi yazabilirsiniz..." style="height: 180px">{{ old('message') }}</textarea>
-                  @error('message') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
-                </div>
-              </div>
-
-              <div class="row">
-                <div class="col-md-9 offset-md-3 text-center text-md-start">
-                  <button type="submit" id="submit-btn" class="btn btn-citrus btn-lg rounded-pill px-12 transition-all shadow-citrus d-inline-flex align-items-center justify-content-center" onclick="if(typeof trackEvent === 'function') trackEvent('career_form_submit_attempt', {form_name: 'career_application'})">
-                    <span class="btn-text">{{ __('career.submit', ['default' => 'Başvuruyu Gönder']) }}</span>
-                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
-                    <i class="uil uil-arrow-right ms-2 fs-20 btn-icon"></i>
-                  </button>
-                </div>
-              </div>
-            </form>
-          </div>
-          <!--/.card-body -->
+            </div>
+          </form>
         </div>
-        <!--/.card -->
       </div>
-      <!-- /column -->
     </div>
-    <!-- /.row -->
   </div>
-  <!-- /.container -->
 </section>
 
 @push('styles')
+<script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
 <style>
   :root {
@@ -154,13 +213,6 @@
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   }
 
-  @media (max-width: 767.98px) {
-    .career-form .custom-input {
-      width: 100%;
-      min-width: 100%;
-    }
-  }
-
   .career-form .custom-input:focus {
     border-color: var(--citrus-red);
     box-shadow: 0 0 0 0.2rem rgba(227, 30, 36, 0.1);
@@ -168,12 +220,6 @@
     outline: none;
   }
 
-  .career-form .custom-input::placeholder {
-    color: #94a3b8;
-    font-style: normal;
-    opacity: 0.7;
-  }
-
   .bg-soft-primary {
     background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%) !important;
   }
@@ -182,9 +228,52 @@
     box-shadow: 0 1.5rem 4rem rgba(30, 41, 59, 0.1) !important;
   }
 
+  .mermaid-container {
+      min-width: 300px;
+  }
+
+  .btn-soft-citrus {
+    background-color: var(--citrus-red-soft);
+    color: var(--citrus-red);
+    border: none;
+  }
+
+  .text-mutedSmall {
+    font-size: 0.9rem;
+    color: #6c757d;
+  }
+
+  .icon-list.bullet-citrus li::before {
+    color: var(--citrus-red);
+    content: "\e9dd"; /* UIL Check Circle icon */
+    font-family: 'unicons';
+    font-size: 1.2rem;
+    left: 0;
+    position: absolute;
+    top: 0.1rem;
+  }
+
+  .icon-list li {
+    list-style: none;
+    padding-left: 2rem;
+    position: relative;
+  }
 </style>
 @endpush
+
 @push('scripts')
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ 
+    startOnLoad: true,
+    theme: 'default',
+    flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis'
+    }
+  });
+</script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
@@ -197,12 +286,10 @@ document.addEventListener('DOMContentLoaded', function() {
     form.addEventListener('submit', function(e) {
         e.preventDefault();
 
-        // Loading state
         submitBtn.disabled = true;
-        spinner.classList.remove('d-none');
-        btnIcon.classList.add('d-none');
+        spinner.classList.remove('hidden');
+        btnIcon.classList.add('hidden');
         
-        // Clear previous errors
         document.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
         document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
 
@@ -213,7 +300,7 @@ document.addEventListener('DOMContentLoaded', function() {
             body: formData,
             headers: {
                 'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
+                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                 'Accept': 'application/json'
             }
         })
@@ -239,13 +326,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     confirmButtonText: 'Tamam'
                 }).then(() => {
                     form.reset();
-                    // Optional: redirect or hide form
-                    // window.location.reload();
                 });
-                
-                if (typeof trackEvent === 'function') {
-                    trackEvent('career_form_success', {form_name: 'career_application'});
-                }
             } else if (result.type === 'validation') {
                 Object.keys(result.errors).forEach(key => {
                     const input = document.getElementById(key) || document.getElementsByName(key)[0];
@@ -254,12 +335,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         const errorDiv = document.createElement('div');
                         errorDiv.className = 'invalid-feedback text-start d-block';
                         errorDiv.textContent = result.errors[key][0];
-                        
-                        if (input.type === 'file') {
-                            input.closest('.col-md-9').appendChild(errorDiv);
-                        } else {
-                            input.parentElement.appendChild(errorDiv);
-                        }
+                        input.closest('.md\\:col-span-9').appendChild(errorDiv);
                     }
                 });
                 
@@ -272,8 +348,8 @@ document.addEventListener('DOMContentLoaded', function() {
             }
 
             submitBtn.disabled = false;
-            spinner.classList.add('d-none');
-            btnIcon.classList.remove('d-none');
+            spinner.classList.add('hidden');
+            btnIcon.classList.remove('hidden');
         })
         .catch(error => {
             console.error('Error:', error);
@@ -284,12 +360,11 @@ document.addEventListener('DOMContentLoaded', function() {
                 confirmButtonColor: '#e31e24',
             });
             submitBtn.disabled = false;
-            spinner.classList.add('d-none');
-            btnIcon.classList.remove('d-none');
+            spinner.classList.add('hidden');
+            btnIcon.classList.remove('hidden');
         });
     });
 });
 </script>
 @endpush
-
 @endsection