From 932bb89454a818d931c1276c2cb9592f6343e03d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 11 May 2026 08:05:38 +0300
Subject: [PATCH] refactor: migrate internship page layout to tailwind css
 styling

---
 .../views/front/career/internship.blade.php   | 270 +++++++++---------
 1 file changed, 135 insertions(+), 135 deletions(-)

diff --git a/resources/views/front/career/internship.blade.php b/resources/views/front/career/internship.blade.php
index 1d60e06..ae437e3 100644
--- a/resources/views/front/career/internship.blade.php
+++ b/resources/views/front/career/internship.blade.php
@@ -1,149 +1,149 @@
 @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.internship_title', ['default' => 'Staj Başvurusu']) }}</h1>
-        <p class="lead mb-0 text-muted">{{ __('career.internship_description', ['default' => 'Uzaktan staj programımız hakkında bilgi alın ve başvurunuzu yapın.']) }}</p>
-      </div>
+<section class="wrapper bg-[#f0f7ff]">
+  <div class="container pt-16 pb-8 text-center">
+    <div class="max-w-3xl mx-auto">
+      <h1 class="text-5xl font-bold mb-4 text-slate-900 tracking-tight">{{ __('career.internship_title', ['default' => 'Staj Başvurusu']) }}</h1>
+      <p class="text-lg text-slate-600 leading-relaxed">{{ __('career.internship_description', ['default' => 'Uzaktan staj programımız hakkında bilgi alın ve başvurunuzu yapın.']) }}</p>
     </div>
   </div>
 </section>
 
-<section class="wrapper bg-light">
-  <div class="container pt-10 pb-14 pb-md-16">
-    <div class="row mb-12">
-      <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
-        <h2 class="fs-15 text-uppercase text-citrus mb-3">{{ __('career.remote_work_title', ['default' => 'Süreç Nasıl İşliyor?']) }}</h2>
-        <h3 class="display-4 mb-10">{{ __('career.remote_work_title', ['default' => 'Tamamen Uzaktan Staj Deneyimi']) }}</h3>
-        
-        <div class="row align-items-center mb-10 text-start">
-          <div class="col-lg-6 mb-10 mb-lg-0">
-            <div class="mermaid-container p-6 bg-white rounded-4 shadow-xl overflow-auto d-flex justify-content-center">
-              <pre class="mermaid">
-                graph TD
-                  A[İnternet Üzerinden Başvuru] --> B{Uzaktan Çalışma Koşulları}
-                  B -- Uygun --> C[CV ve Evrakların İletilmesi]
-                  B -- Uygun Değil --> D[Süreç Sonlandırılır]
-                  C --> E[Ön Değerlendirme]
-                  E --> F[Teknik Görüşme]
-                  F --> G[Projelere Dahil Edilme]
-                  
-                  style A fill:#f9f9f9,stroke:#333,stroke-width:2px
-                  style G fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
-                  style B fill:#fff4f4,stroke:#e31e24
-              </pre>
-            </div>
-          </div>
-          <div class="col-lg-6 ps-lg-10">
-            <h4 class="display-6 mb-4">{{ __('career.application_conditions_title', ['default' => 'Başvuru Şartları ve Çalışma Modeli']) }}</h4>
-            <ul class="icon-list bullet-citrus mb-0 ps-0">
-              <li class="mb-3">
-                <span class="fw-bold text-dark">{{ __('career.daily_standup', ['default' => 'Günlük Standup:']) }}</span> 
-                {{ __('career.daily_standup_desc', ['default' => 'Her gün düzenlenen kısa toplantılarla ekip içi iletişim ve ilerleme takibi sağlanır.']) }}
-              </li>
-              <li class="mb-3">
-                <span class="fw-bold text-dark">{{ __('career.flexible_projects', ['default' => 'Esnek Projeler:']) }}</span> 
-                {{ __('career.flexible_projects_desc', ['default' => 'Projelerimizde esneklik esastır. Yeteneklerinize uygun gerçek projelerde görev alırsınız.']) }}
-              </li>
-              <li class="mb-3">
-                <span class="fw-bold text-dark">{{ __('career.focus_on_development', ['default' => 'Gelişim Odaklılık:']) }}</span> 
-                {{ __('career.condition_not_only_for_internship', ['default' => 'Yalnızca staj yapmak için yapmak isteyen kişiler alınmamaktadır.']) }}
-              </li>
-              <li>
-                <span class="fw-bold text-dark">{{ __('career.intent_letter', ['default' => 'Niyet Mektubu:']) }}</span> 
-                {{ __('career.condition_intent_letter', ['default' => 'Mesaj bölümünde nasıl bir katkı sağlayacağınızın niyet mektubu iletilmelidir.']) }}
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
+<section class="wrapper bg-white py-12 lg:py-20">
+  <div class="container px-4">
+    <div class="text-center mb-12">
+      <h2 class="text-xs uppercase font-bold tracking-widest text-[#e31e24] mb-2">{{ __('career.remote_work_title', ['default' => 'Süreç Nasıl İşliyor?']) }}</h2>
+      <h3 class="text-3xl md:text-4xl font-extrabold text-slate-900">{{ __('career.remote_work_title', ['default' => 'Tamamen Uzaktan Staj Deneyimi']) }}</h3>
     </div>
 
-    <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">Staj Başvuru Formu</h2>
-                <div class="divider-citrus"></div>
-              </div>
-            </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="internship">
+    <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[İnternet Üzerinden Başvuru] --> B{Uzaktan Çalışma Koşulları}
+              B -- Uygun --> C[CV ve Evrakların İletilmesi]
+              B -- Uygun Değil --> D[Süreç Sonlandırılır]
+              C --> E[Ön Değerlendirme]
+              E --> F[Teknik Görüşme]
+              F --> G[Projelere Dahil Edilme]
               
-              <!-- 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>
-
-              <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>
-
-              <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>
-
-              <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>
-
-              <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="Staj beklentileriniz ve çalışma alanlarınız hakkında bilgi verebilirsiniz..." 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">
-                    <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 -->
+              style A fill:#f8fafc,stroke:#cbd5e1,stroke-width:2px
+              style G fill:#e31e24,stroke:#fff,stroke-width:2px,color:#fff
+              style B 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">{{ __('career.application_conditions_title', ['default' => 'Başvuru Şartları ve Çalışma Modeli']) }}</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.daily_standup', ['default' => 'Günlük Standup:']) }}</span>
+              <p class="text-sm text-slate-500">{{ __('career.daily_standup_desc', ['default' => 'Her gün düzenlenen kısa toplantılarla ekip içi iletişim ve ilerleme takibi sağlanır.']) }}</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.flexible_projects', ['default' => 'Esnek Projeler:']) }}</span>
+              <p class="text-sm text-slate-500">{{ __('career.flexible_projects_desc', ['default' => 'Projelerimizde esneklik esastır. Yeteneklerinize uygun gerçek projelerde görev alırsı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">{{ __('career.focus_on_development', ['default' => 'Gelişim Odaklılık:']) }}</span>
+              <p class="text-sm text-slate-500">{{ __('career.condition_not_only_for_internship', ['default' => 'Yalnızca staj yapmak için yapmak isteyen kişiler alınmamaktadır.']) }}</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.intent_letter', ['default' => 'Niyet Mektubu:']) }}</span>
+              <p class="text-sm text-slate-500">{{ __('career.condition_intent_letter', ['default' => 'Mesaj bölümünde nasıl bir katkı sağlayacağınızın niyet mektubu iletilmelidir.']) }}</p>
+            </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">
+            <h2 class="text-2xl font-bold text-slate-900 mb-2">Staj Başvuru Formu</h2>
+            <div class="w-12 h-1 bg-[#e31e24] rounded-full"></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="internship">
+            
+            <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>
+
+            <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>
+            </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="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ş (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">PDF, DOC, DOCX (Maks. 5MB)</p>
+              </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', ['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="Staj beklentileriniz ve çalışma alanlarınız hakkında bilgi verebilirsiniz...">{{ 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', ['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>
+          </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 {
@@ -267,8 +267,8 @@ document.addEventListener('DOMContentLoaded', function() {
         e.preventDefault();
 
         submitBtn.disabled = true;
-        spinner.classList.remove('d-none');
-        btnIcon.classList.add('d-none');
+        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'));
@@ -328,8 +328,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);
@@ -340,8 +340,8 @@ 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');
         });
     });
 });