Ümit Tunç
388 lines
18 KiB
PHP
388 lines
18 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
<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') }}</h1>
|
||
<p class="text-lg text-slate-600 leading-relaxed">{{ __('career.job_application_description') }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<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">{{ __('career.dear_developer') }}</h4>
|
||
<div class="text-blue-800 space-y-4 leading-relaxed">
|
||
<p>{!! __('career.intro_text_1') !!}</p>
|
||
<p>{!! __('career.intro_text_2') !!}</p>
|
||
<p>{{ __('career.intro_text_3') }}</p>
|
||
<p>{{ __('career.intro_text_4') }}</p>
|
||
<p>{{ __('career.thanks') }}</p>
|
||
<div class="pt-4 border-t border-blue-200 mt-4 text-sm font-medium">
|
||
{!! __('career.company_details') !!}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">{{ __('career.working_model_title') }}</h2>
|
||
<h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">{{ __('career.working_model_subtitle') }}</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">
|
||
<img src="{{ asset('assets/ik-flowchat.png') }}" alt="{{ __('career.working_model_title') }}" class="w-full h-auto rounded-xl">
|
||
</div>
|
||
</div>
|
||
<div class="w-full lg:w-2/5 space-y-8">
|
||
<h4 class="text-2xl font-bold text-slate-900">{{ __('career.terms_title') }}</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">{{ __('career.fully_remote') }}</span>
|
||
<p class="text-sm text-slate-500">{{ __('career.fully_remote_desc') }}</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">{{ __('career.independent_contractor') }}</span>
|
||
<p class="text-sm text-slate-500">{{ __('career.independent_contractor_desc') }}</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">{{ __('career.mandatory_documents') }}</span>
|
||
<p class="text-sm text-slate-500">{{ __('career.mandatory_documents_desc') }}</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> {{ __('career.nda_label') }}
|
||
</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> {{ __('career.contract_label') }}
|
||
</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">{{ __('career.form_title') }}</h2>
|
||
<p class="text-slate-500">{{ __('career.form_subtitle') }}</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') }} <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>
|
||
|
||
<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>
|
||
</div>
|
||
</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') }}</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="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') }} <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">{{ __('career.cv_description') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
|
||
<label for="nda" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.nda') }} <span class="text-[#e31e24]">*</span></label>
|
||
<div class="md:col-span-9">
|
||
<input type="file" name="nda" id="nda" 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.nda_description') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
|
||
<label for="contract" class="md:col-span-3 text-sm font-bold text-slate-700 md:text-right">{{ __('career.contract') }} <span class="text-[#e31e24]">*</span></label>
|
||
<div class="md:col-span-9">
|
||
<input type="file" name="contract" id="contract" 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.contract_description') }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||
<div class="md:col-start-4 md:col-span-9 space-y-4">
|
||
<div class="flex items-center gap-3">
|
||
<input type="checkbox" name="git_knowledge" id="git_knowledge" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24]" required>
|
||
<label for="git_knowledge" class="text-sm text-slate-700 font-medium">{{ __('career.git_confirmation') }} <span class="text-[#e31e24]">*</span></label>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<input type="checkbox" name="ai_usage" id="ai_usage" class="w-5 h-5 rounded border-slate-300 text-[#e31e24] focus:ring-[#e31e24]" required>
|
||
<label for="ai_usage" class="text-sm text-slate-700 font-medium">{{ __('career.ai_confirmation') }} <span class="text-[#e31e24]">*</span></label>
|
||
</div>
|
||
</div>
|
||
</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') }}</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="{{ __('career.message_placeholder') }}">{{ old('message') }}</textarea>
|
||
</div>
|
||
</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') }}</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>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 {
|
||
--citrus-red: #e31e24;
|
||
--citrus-red-soft: rgba(227, 30, 36, 0.05);
|
||
--citrus-red-hover: #c4191f;
|
||
}
|
||
|
||
.text-citrus { color: var(--citrus-red) !important; }
|
||
.bg-citrus { background-color: var(--citrus-red) !important; }
|
||
|
||
.btn-citrus {
|
||
color: #fff !important;
|
||
background-color: var(--citrus-red) !important;
|
||
border-color: var(--citrus-red) !important;
|
||
}
|
||
.btn-citrus:hover {
|
||
background-color: var(--citrus-red-hover) !important;
|
||
border-color: var(--citrus-red-hover) !important;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.shadow-citrus {
|
||
box-shadow: 0 0.5rem 1.5rem rgba(227, 30, 36, 0.25) !important;
|
||
}
|
||
|
||
.divider-citrus {
|
||
width: 60px;
|
||
height: 4px;
|
||
background-color: var(--citrus-red);
|
||
border-radius: 2px;
|
||
margin: 1.5rem 0;
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.divider-citrus { margin: 1.5rem auto; }
|
||
}
|
||
|
||
.career-form .custom-input {
|
||
border: 1px solid #e2e8f0;
|
||
padding: 1rem 1.5rem;
|
||
background-color: #ffffff;
|
||
border-radius: 0.75rem;
|
||
transition: all 0.25s ease-in-out;
|
||
font-size: 1.05rem;
|
||
width: 100%;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.career-form .custom-input:focus {
|
||
border-color: var(--citrus-red);
|
||
box-shadow: 0 0 0 0.2rem rgba(227, 30, 36, 0.1);
|
||
background-color: #fff;
|
||
outline: none;
|
||
}
|
||
|
||
input[type="checkbox"] {
|
||
-webkit-appearance: checkbox !important;
|
||
appearance: checkbox !important;
|
||
width: 1.25rem !important;
|
||
height: 1.25rem !important;
|
||
accent-color: var(--citrus-red);
|
||
cursor: pointer;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.bg-soft-primary {
|
||
background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%) !important;
|
||
}
|
||
|
||
.shadow-xl {
|
||
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 src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const form = document.getElementById('career-application-form');
|
||
const submitBtn = document.getElementById('submit-btn');
|
||
const btnText = submitBtn.querySelector('.btn-text');
|
||
const btnIcon = submitBtn.querySelector('.btn-icon');
|
||
const spinner = submitBtn.querySelector('.spinner-border');
|
||
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
submitBtn.disabled = true;
|
||
spinner.classList.remove('hidden');
|
||
btnIcon.classList.add('hidden');
|
||
|
||
document.querySelectorAll('.invalid-feedback').forEach(el => el.remove());
|
||
document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
|
||
|
||
const formData = new FormData(form);
|
||
|
||
fetch(form.action, {
|
||
method: 'POST',
|
||
body: formData,
|
||
headers: {
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||
'Accept': 'application/json'
|
||
}
|
||
})
|
||
.then(async response => {
|
||
const isJson = response.headers.get('content-type')?.includes('application/json');
|
||
const data = isJson ? await response.json() : null;
|
||
|
||
if (!response.ok) {
|
||
if (response.status === 422 && data) {
|
||
return { type: 'validation', errors: data.errors };
|
||
}
|
||
throw new Error(data?.message || 'Bir hata oluştu.');
|
||
}
|
||
return { type: 'success', data: data };
|
||
})
|
||
.then(result => {
|
||
if (result.type === 'success') {
|
||
Swal.fire({
|
||
icon: 'success',
|
||
title: '{{ __("career.success") ?? "Başarılı!" }}',
|
||
text: result.data.message,
|
||
confirmButtonColor: '#e31e24',
|
||
confirmButtonText: '{{ __("career.ok") ?? "Tamam" }}'
|
||
}).then(() => {
|
||
form.reset();
|
||
});
|
||
} else if (result.type === 'validation') {
|
||
Object.keys(result.errors).forEach(key => {
|
||
const input = document.getElementById(key) || document.getElementsByName(key)[0];
|
||
if (input) {
|
||
input.classList.add('is-invalid');
|
||
const errorDiv = document.createElement('div');
|
||
errorDiv.className = 'invalid-feedback text-start d-block';
|
||
errorDiv.textContent = result.errors[key][0];
|
||
|
||
// Handle different input structures
|
||
if (input.type === 'checkbox') {
|
||
input.closest('.space-y-4').appendChild(errorDiv);
|
||
} else {
|
||
input.closest('.md\\:col-span-9').appendChild(errorDiv);
|
||
}
|
||
}
|
||
});
|
||
|
||
Swal.fire({
|
||
icon: 'error',
|
||
title: '{{ __("career.error") ?? "Hata!" }}',
|
||
text: '{{ __("career.validation_error") ?? "Lütfen formdaki hataları kontrol ediniz." }}',
|
||
confirmButtonColor: '#e31e24',
|
||
});
|
||
}
|
||
|
||
submitBtn.disabled = false;
|
||
spinner.classList.add('hidden');
|
||
btnIcon.classList.remove('hidden');
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
Swal.fire({
|
||
icon: 'error',
|
||
title: '{{ __("career.error") ?? "Hata!" }}',
|
||
text: error.message || '{{ __("career.error_message") ?? "Başvuru gönderilirken bir hata oluştu. Lütfen tekrar deneyiniz." }}',
|
||
confirmButtonColor: '#e31e24',
|
||
});
|
||
submitBtn.disabled = false;
|
||
spinner.classList.add('hidden');
|
||
btnIcon.classList.remove('hidden');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|
||
@endsection
|