refactor: overhaul career page with updated UI, NDA information, and issue-based workflow visualization

resources/views/front/career/index.blade.php

@@ -1,110 +1,169 @@
 @extends('layouts.site')
 
 @section('content')
-<section class="wrapper bg-soft-primary">
+<section class="wrapper bg-[#f0f7ff]">
-  <div class="container pt-15 pb-0 pt-md-20 pb-md-0 text-center">
+  <div class="container pt-16 pb-8 text-center">
-    <div class="row">
+    <div class="max-w-4xl mx-auto">
-      <div class="col-xl-8 col-lg-10 mx-auto">
+      <h1 class="text-5xl font-bold mb-4 text-slate-900 tracking-tight">{{ __('career.job_application_title', ['default' => 'İş Başvurusu']) }}</h1>
-        <h1 class="display-1 mb-3 text-dark">{{ __('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>
-        <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>
     </div>
   </div>
 </section>
 
-<section class="wrapper bg-light">
+<section class="wrapper bg-white py-12 lg:py-20">
-  <div class="container pt-5 pb-14 pb-md-16">
+  <div class="container px-4">
-    <div class="row">
+    <div class="max-w-5xl mx-auto mb-16">
-      <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto">
+        <div class="bg-blue-50 border-l-4 border-blue-500 p-8 rounded-r-2xl shadow-sm">
-        <div class="card shadow-xl border-0 rounded-4">
+            <h4 class="text-xl font-bold text-blue-900 mb-4">Değerli Geliştirici Adayı,</h4>
-          <div class="card-body p-8 p-md-12">
+            <div class="text-blue-800 space-y-4 leading-relaxed">
-            <div class="row mb-10 text-center text-md-start">
+                <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>
-              <div class="col-12">
+                <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>
-                <h2 class="h3 mb-2 text-dark">Başvuru Formu</h2>
+                <p>Lütfen aşağıdaki formu doldurunuz ve imzalanmış belgeleri PDF formatında tek bir dosya veya zip olarak yükleyiniz.</p>
-                <div class="divider-citrus"></div>
+                <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>
 
-@if(session('success'))
+    <div class="text-center mb-12">
-              <div class="alert alert-success mt-4 mb-10 border-0 shadow-sm rounded-3">
+      <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">Çalışma Modelimiz</h2>
-                <div class="d-flex align-items-center">
+      <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">Issue Bazlı Uzaktan Çalışma</h3>
-                  <i class="uil uil-check-circle fs-24 me-3 text-success"></i>
-                  <div class="fw-medium text-success">{{ session('success') }}</div>
     </div>
-              </div>
-            @endif
 
-            <form action="{{ route('career.store') }}" method="POST" enctype="multipart/form-data" class="career-form" id="career-application-form">
+    <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">
             
-              <!-- Personal Info Group -->
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
-              <div class="row mb-8 align-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>
-                <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="md:col-span-9">
-                <div class="col-md-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>
-                  <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>
 
-              <div class="row mb-8 align-items-center">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 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>
+              <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="col-md-9">
+              <div class="md:col-span-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>
+                <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>
-                  @error('email') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
               </div>
             </div>
 
-              <div class="row mb-8 align-items-center">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 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>
+              <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="col-md-9">
+              <div class="md:col-span-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') }}">
+                <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') }}">
-                  @error('phone') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
               </div>
             </div>
 
-              <div class="row mb-8 align-items-center">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 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>
+              <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="col-md-9">
+              <div class="md:col-span-9">
-                  <div class="input-group">
+                <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>
-                    <input type="file" name="cv" id="cv" class="form-control custom-input @error('cv') is-invalid @enderror" 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 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>
 
-              <div class="row mb-10">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
-                <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>
+              <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="col-md-9">
+              <div class="md:col-span-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>
+                <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>
-                  @error('message') <div class="invalid-feedback text-start">{{ $message }}</div> @enderror
               </div>
             </div>
 
-              <div class="row">
+            <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
-                <div class="col-md-9 offset-md-3 text-center text-md-start">
+              <div class="md:col-start-4 md:col-span-9">
-                  <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'})">
+                <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 ms-2 d-none" role="status" aria-hidden="true"></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 ms-2 fs-20 btn-icon"></i>
+                  <i class="uil uil-arrow-right text-xl btn-icon"></i>
                 </button>
               </div>
             </div>
           </form>
         </div>
-          <!--/.card-body -->
       </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');
+        spinner.classList.remove('hidden');
-        btnIcon.classList.add('d-none');
+        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];
-                        
+                        input.closest('.md\\:col-span-9').appendChild(errorDiv);
-                        if (input.type === 'file') {
-                            input.closest('.col-md-9').appendChild(errorDiv);
-                        } else {
-                            input.parentElement.appendChild(errorDiv);
-                        }
                     }
                 });
                 
@@ -272,8 +348,8 @@ document.addEventListener('DOMContentLoaded', function() {
             }
 
             submitBtn.disabled = false;
-            spinner.classList.add('d-none');
+            spinner.classList.add('hidden');
-            btnIcon.classList.remove('d-none');
+            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');
+            spinner.classList.add('hidden');
-            btnIcon.classList.remove('d-none');
+            btnIcon.classList.remove('hidden');
         });
     });
 });
 </script>
 @endpush
-
 @endsection