feat: add career application wizard and HR process documentation strings and dynamic views

This commit is contained in:
Ümit Tunç
2026-06-01 23:36:16 +03:00
parent e23ac8c346
commit 3235a700c9
7 changed files with 401 additions and 43 deletions
+43 -43
View File
@@ -25,7 +25,7 @@
<div id="step-dot-1" class="w-12 h-12 rounded-full bg-[#e31e24] text-white flex items-center justify-center font-extrabold shadow-lg shadow-red-500/20 transition-all duration-500 ring-4 ring-red-100">
<i class="uil uil-info-circle text-xl"></i>
</div>
<span id="step-label-1" class="text-xs md:text-sm font-bold text-slate-800 mt-3 transition-all duration-300">1. Şartlar & Koşullar</span>
<span id="step-label-1" class="text-xs md:text-sm font-bold text-slate-800 mt-3 transition-all duration-300">{{ __('career.step_1_title') }}</span>
</div>
<!-- Step 2 Dot -->
@@ -33,7 +33,7 @@
<div id="step-dot-2" class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-extrabold transition-all duration-500 ring-4 ring-transparent">
<i class="uil uil-file-download text-xl"></i>
</div>
<span id="step-label-2" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">2. Formları İndir</span>
<span id="step-label-2" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">{{ __('career.step_2_title') }}</span>
</div>
<!-- Step 3 Dot -->
@@ -41,7 +41,7 @@
<div id="step-dot-3" class="w-12 h-12 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center font-extrabold transition-all duration-500 ring-4 ring-transparent">
<i class="uil uil-check-circle text-xl"></i>
</div>
<span id="step-label-3" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">3. Başvuruyu Tamamla</span>
<span id="step-label-3" class="text-xs md:text-sm font-medium text-slate-400 mt-3 transition-all duration-300">{{ __('career.step_3_title') }}</span>
</div>
</div>
</div>
@@ -60,19 +60,19 @@
<p>{!! __('career.intro_text_1') !!}</p>
<p>{!! __('career.intro_text_2') !!}</p>
<div class="bg-white/80 p-6 rounded-2xl border border-blue-100 my-6 space-y-4 text-sm shadow-sm">
<span class="font-extrabold text-blue-950 block text-base"><i class="uil uil-shield-check text-lg mr-1 text-[#e31e24]"></i> Belgelerin Toplanma Amacı (KVKK Bilgilendirmesi)</span>
<span class="font-extrabold text-blue-950 block text-base"><i class="uil uil-shield-check text-lg mr-1 text-[#e31e24]"></i> {{ __('career.kvkk_title') }}</span>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-lock text-[#e31e24] mr-1"></i> 1. Gizlilik Sözleşmesi (NDA)</span>
<p class="text-xs text-slate-600 leading-relaxed">Projelerimize ait kaynak kodları, veritabanı şemaları ve ticari sırlarımızın güvenliğini sağlamak amacıyla istenir.</p>
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-lock text-[#e31e24] mr-1"></i> {{ __('career.kvkk_nda_title') }}</span>
<p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_nda_desc') }}</p>
</div>
<div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-file-contract-sign text-blue-500 mr-1"></i> 2. Bağımsız Sözleşmeli Sözleşmesi</span>
<p class="text-xs text-slate-600 leading-relaxed">Issue/task bazlı esnek çalışma modelinin koşullarını ve haklarınızı yasal olarak güvence altına almak için gereklidir.</p>
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-file-contract-sign text-blue-500 mr-1"></i> {{ __('career.kvkk_contract_title') }}</span>
<p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_contract_desc') }}</p>
</div>
<div class="p-4 bg-slate-50/50 rounded-xl border border-slate-100">
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-card-atm text-emerald-500 mr-1"></i> 3. Kimlik Fotokopisi</span>
<p class="text-xs text-slate-600 leading-relaxed">Yasal kimlik doğrulama, imza yetkilisi tespiti ve sahte başvuruların önlenmesi amacıyla talep edilmektedir.</p>
<span class="font-bold text-slate-800 block mb-2"><i class="uil uil-card-atm text-emerald-500 mr-1"></i> {{ __('career.kvkk_id_title') }}</span>
<p class="text-xs text-slate-600 leading-relaxed">{{ __('career.kvkk_id_desc') }}</p>
</div>
</div>
</div>
@@ -94,7 +94,7 @@
<!-- Mermaid Flowchart Canvas -->
<div class="w-full lg:w-3/5">
<div class="bg-white p-6 md:p-8 rounded-3xl shadow-xl border border-slate-100 overflow-x-auto flex flex-col items-center">
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"><i class="uil uil-presentation-play mr-1"></i> İK İlerleme Diyagramı</span>
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4"><i class="uil uil-presentation-play mr-1"></i> {{ __('career.hr_flow_diagram') }}</span>
<div class="mermaid w-full flex justify-center" style="min-height: 500px;">
graph TD
%% Styles
@@ -104,22 +104,22 @@
classDef rejectNode fill:#ef4444,stroke:#b91c1c,stroke-width:2px,color:#fff,font-weight:bold,rx:5px,ry:5px;
classDef actionNode fill:#8b5cf6,stroke:#6d28d9,stroke-width:2px,color:#fff,font-weight:bold,rx:5px,ry:5px;
Start["Başvuru ve Gizlilik Sözleşmesi"]:::startNode
Dec1{"Aday Onaylandı mı?"}:::decisionNode
Red1["Red - Süreç Sonlanır"]:::rejectNode
GitAccess["GitHub Repo Erişimi Sağlanır"]:::processNode
SampleTask["Aday Projeyi Kurar ve Örnek Görev Üzerinde Çalışır"]:::processNode
Dec2{"Örnek Görev Başarıyla Tamamlandı mı?"}:::decisionNode
Red2["Red - Süreç Sonlanır"]:::rejectNode
Issues["Diğer Issue'lara Devam"]:::processNode
Dec3{"Aday Issue Seçti mi?"}:::decisionNode
WaitTask["Aday Beklemede veya Başka Görev Seçer"]:::actionNode
Assign["Issue Ataması Yapılır"]:::processNode
WorkStart["Çalışma Başlar"]:::processNode
Review["Teslim ve İnceleme"]:::processNode
Dec4{"Görev Onaylandı mı?"}:::decisionNode
Feedback["Düzeltme Talebi ve Geri Bildirim"]:::actionNode
Payment["Ücret Ödemesi Yapılır"]:::processNode
Start["{{ __('career.mermaid_start') }}"]:::startNode
Dec1{"{{ __('career.mermaid_dec1') }}"}:::decisionNode
Red1["{{ __('career.mermaid_red1') }}"]:::rejectNode
GitAccess["{{ __('career.mermaid_git') }}"]:::processNode
SampleTask["{{ __('career.mermaid_sample') }}"]:::processNode
Dec2{"{{ __('career.mermaid_dec2') }}"}:::decisionNode
Red2["{{ __('career.mermaid_red2') }}"]:::rejectNode
Issues["{{ __('career.mermaid_issues') }}"]:::processNode
Dec3{"{{ __('career.mermaid_dec3') }}"}:::decisionNode
WaitTask["{{ __('career.mermaid_wait') }}"]:::actionNode
Assign["{{ __('career.mermaid_assign') }}"]:::processNode
WorkStart["{{ __('career.mermaid_work') }}"]:::processNode
Review["{{ __('career.mermaid_review') }}"]:::processNode
Dec4{"{{ __('career.mermaid_dec4') }}"}:::decisionNode
Feedback["{{ __('career.mermaid_feedback') }}"]:::actionNode
Payment["{{ __('career.mermaid_payment') }}"]:::processNode
Start --> Dec1
Dec1 -- "Hayır" --> Red1
@@ -180,11 +180,11 @@
<div class="flex items-start gap-3">
<input type="checkbox" id="terms-accept-checkbox" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24] mt-1 cursor-pointer">
<label for="terms-accept-checkbox" class="text-sm text-slate-700 font-semibold cursor-pointer">
Çalışma modelini, başvuru şartlarını ve İK süreç akış şemasını okudum, kabul ediyorum. <span class="text-[#e31e24]">*</span>
{{ __('career.terms_accept_label') }} <span class="text-[#e31e24]">*</span>
</label>
</div>
<button type="button" onclick="nextStep(2)" id="step-1-next-btn" class="w-full py-4 bg-slate-300 text-slate-500 font-bold rounded-xl transition-all flex items-center justify-center gap-2 cursor-not-allowed" disabled>
<span>Şartları Kabul Et ve İlerle</span>
<span>{{ __('career.accept_terms_btn') }}</span>
<i class="uil uil-arrow-right text-lg"></i>
</button>
</div>
@@ -197,8 +197,8 @@
<div id="step-content-2" class="wizard-step transition-all duration-500 opacity-0 hidden">
<div class="max-w-4xl mx-auto mb-12">
<div class="text-center mb-10">
<h2 class="text-3xl font-extrabold text-slate-900 mb-2">Gerekli Belgeleri İndirin</h2>
<p class="text-slate-500 max-w-xl mx-auto">Başvurunuzu tamamlayabilmek için aşağıdaki yasal sözleşmeleri indirip, dikkatlice okuyup imzalayarak bir sonraki adımda sisteme yüklemeniz gerekmektedir.</p>
<h2 class="text-3xl font-extrabold text-slate-900 mb-2">{{ __('career.download_required_documents') }}</h2>
<p class="text-slate-500 max-w-xl mx-auto">{{ __('career.download_required_documents_desc') }}</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
@@ -209,10 +209,10 @@
<i class="uil uil-shield-check text-3xl"></i>
</div>
<h4 class="text-xl font-bold text-slate-900 mb-3">{{ __('career.nda_label') }}</h4>
<p class="text-sm text-slate-500 leading-relaxed mb-6">Trunçgil Teknoloji projelerine ait kaynak kodlarının, verilerin ve süreçlerin gizliliğini korumak amacıyla imzalanması zorunlu olan Gizlilik Sözleşmesi'dir.</p>
<p class="text-sm text-slate-500 leading-relaxed mb-6">{{ __('career.nda_card_desc') }}</p>
</div>
<a href="https://docs.google.com/document/d/1WwDo_zgx4KjdnX6ohJaCfPQSS0-eRN41OB1HYvAmDO4/edit?usp=sharing" target="_blank" class="w-full py-3.5 bg-slate-50 hover:bg-red-50 hover:text-[#e31e24] text-slate-700 font-bold rounded-xl transition-all border border-slate-100 hover:border-red-100 flex items-center justify-center gap-2">
<i class="uil uil-file-download"></i> Sözleşmeyi İncele & İndir
<i class="uil uil-file-download"></i> {{ __('career.review_download_document') }}
</a>
</div>
@@ -223,10 +223,10 @@
<i class="uil uil-file-contract-sign text-3xl"></i>
</div>
<h4 class="text-xl font-bold text-slate-900 mb-3">{{ __('career.contract_label') }}</h4>
<p class="text-sm text-slate-500 leading-relaxed mb-6">İş/Issue bazlı uzaktan çalışma koşullarını, ödeme şartlarını ve tarafların haklarını tanımlayan Bağımsız Sözleşmeli Hizmet Sözleşmesi'dir.</p>
<p class="text-sm text-slate-500 leading-relaxed mb-6">{{ __('career.contract_card_desc') }}</p>
</div>
<a href="https://docs.google.com/document/d/1VofpJIxmQmxSLk6OxsDjCtrMte0UkAFCSaQfZCS2DP8/edit?usp=sharing" target="_blank" class="w-full py-3.5 bg-slate-50 hover:bg-red-50 hover:text-[#e31e24] text-slate-700 font-bold rounded-xl transition-all border border-slate-100 hover:border-red-100 flex items-center justify-center gap-2">
<i class="uil uil-file-download"></i> Sözleşmeyi İncele & İndir
<i class="uil uil-file-download"></i> {{ __('career.review_download_document') }}
</a>
</div>
</div>
@@ -235,10 +235,10 @@
<div class="flex items-center justify-between border-t border-slate-100 pt-8">
<button type="button" onclick="prevStep(1)" class="px-6 py-3.5 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition-all flex items-center gap-2">
<i class="uil uil-arrow-left text-lg"></i>
<span>Geri Dön</span>
<span>{{ __('career.go_back') }}</span>
</button>
<button type="button" onclick="nextStep(3)" class="px-8 py-3.5 bg-[#e31e24] hover:bg-[#c4191f] text-white font-bold rounded-xl transition-all shadow-lg shadow-red-500/20 flex items-center gap-2">
<span>Sözleşmeleri İndirdim, Son Adıma Geç</span>
<span>{{ __('career.downloaded_next_btn') }}</span>
<i class="uil uil-arrow-right text-lg"></i>
</button>
</div>
@@ -261,7 +261,7 @@
<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') }} <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>
<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="{{ __('career.name_placeholder') }}" value="{{ old('name') }}" required>
</div>
</div>
@@ -269,7 +269,7 @@
<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') }} <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>
<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="{{ __('career.email_placeholder') }}" value="{{ old('email') }}" required>
</div>
</div>
@@ -277,7 +277,7 @@
<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') }}</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') }}">
<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="{{ __('career.phone_placeholder') }}" value="{{ old('phone') }}">
</div>
</div>
@@ -310,10 +310,10 @@
<!-- ID Photocopy Upload -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
<label for="id_photocopy" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.id_photocopy', ['default' => 'Kimlik Fotokopisi']) }} <span class="text-[#e31e24]">*</span></label>
<label for="id_photocopy" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.id_photocopy') }} <span class="text-[#e31e24]">*</span></label>
<div class="md:col-span-9">
<input type="file" name="id_photocopy" id="id_photocopy" 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">{{ __('career.id_photocopy_description', ['default' => 'Önlü arkalı nüfus cüzdanı, yeni kimlik kartı veya ehliyet fotokopisi (PDF, JPG, PNG - Maks. 5MB)']) }}</p>
<p class="mt-2 text-xs text-slate-400">{{ __('career.id_photocopy_description') }}</p>
</div>
</div>
@@ -344,7 +344,7 @@
<div class="md:col-start-4 md:col-span-9 flex items-center justify-between gap-4">
<button type="button" onclick="prevStep(2)" class="px-6 py-4 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition-all flex items-center gap-2">
<i class="uil uil-arrow-left text-lg"></i>
<span>Geri Dön</span>
<span>{{ __('career.go_back') }}</span>
</button>
<button type="submit" id="submit-btn" class="flex-1 md:flex-none 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">