feat: enhance company history module with new font styles, improved localization functions, and optimized layout for better readability

This commit is contained in:
Ümit Tunç
2026-05-21 19:43:54 +03:00
parent 4150931ac8
commit 69710a71b9
6 changed files with 108 additions and 24 deletions
@@ -42,9 +42,7 @@ class EditCompanyHistoryItem extends EditRecord
protected function mutateFormDataBeforeFill(array $data): array
{
$data['translations'] = TranslationTabs::loadTranslations($this->record);
return $data;
return array_merge($data, TranslationTabs::fillFromRecord($this->record));
}
protected function mutateFormDataBeforeSave(array $data): array
+23
View File
@@ -384,3 +384,26 @@ if (!function_exists('t')) {
}
}
if (!function_exists('locale_upper')) {
/**
* Locale-aware uppercase (Turkish: i→İ, ı→I, etc.)
*/
function locale_upper(string $text, ?string $locale = null): string
{
$locale = $locale ?? app()->getLocale();
if (str_starts_with($locale, 'tr')) {
return mb_strtoupper(
str_replace(
['i', 'ı', 'ğ', 'ü', 'ş', 'ö', 'ç'],
['İ', 'I', 'Ğ', 'Ü', 'Ş', 'Ö', 'Ç'],
$text
),
'UTF-8'
);
}
return mb_strtoupper($text, 'UTF-8');
}
}
+3 -2
View File
@@ -3,6 +3,7 @@
namespace Database\Seeders;
use App\Models\Page;
use App\Models\User;
use Illuminate\Database\Seeder;
class PageSeeder extends Seeder
@@ -13,9 +14,9 @@ class PageSeeder extends Seeder
public function run(): void
{
// İlk kullanıcıyı bul veya oluştur
$author = \App\Models\User::first();
$author = User::query()->first();
if (!$author) {
$author = \App\Models\User::create([
$author = User::query()->create([
'name' => 'Admin',
'email' => 'admin@truncgil.com',
'password' => bcrypt('password'),
@@ -0,0 +1,35 @@
@once
@push('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Sora:wght@600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&display=swap&subset=latin,latin-ext">
<style>
.company-history-fonts {
--ch-font-year: 'Sora', 'Urbanist', system-ui, sans-serif;
--ch-font-label: 'Outfit', 'Urbanist', system-ui, sans-serif;
--ch-font-body: 'Source Sans 3', 'Urbanist', system-ui, sans-serif;
}
.company-history-fonts h1 {
font-family: var(--ch-font-year);
letter-spacing: -0.03em;
}
.company-history-fonts h1 em {
font-family: var(--ch-font-label);
font-style: italic;
font-weight: 600;
}
.company-history-fonts .lead {
font-family: var(--ch-font-body);
}
.company-history-fonts .btn {
font-family: var(--ch-font-label);
font-weight: 600;
letter-spacing: 0.02em;
}
</style>
@endpush
@endonce
@@ -19,7 +19,9 @@
$highlightClasses = "!relative z-[1] style-1 primary before:content-[''] before:z-[-1] before:absolute before:opacity-100 before:block before:-translate-x-2/4 before:-translate-y-2/4 before:-rotate-1 before:w-[111%] before:h-[110%] before:rounded-[80%] before:border-t-0 before:border-[3px] before:border-solid before:border-[#e31e24] before:left-2/4 before:!top-[52%] after:content-[''] after:z-[-1] after:absolute after:opacity-100 after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-2 after:w-[107%] after:h-[111%] after:rounded-[80%] after:border-l-0 after:border-b-0 after:border-[3px] after:border-solid after:border-[#e31e24] after:left-2/4 after:top-[52%] max-xl:before:!hidden max-xl:after:!hidden max-lg:before:!hidden max-lg:after:!hidden max-md:before:!hidden max-md:after:!hidden max-sm:before:!hidden max-sm:after:!hidden";
@endphp
<section class="wrapper !bg-[#ffffff]">
@include('components.company-history.fonts')
<section class="company-history-fonts wrapper !bg-[#ffffff]">
<div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-36 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title" data-delay="500">
@@ -13,19 +13,21 @@
})->implode(', ');
@endphp
@include('components.company-history.fonts')
@if($historyItems->isNotEmpty())
<section class="company-history-timeline-section wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
<section class="company-history-timeline-section company-history-fonts wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
<div class="container py-20 xl:py-28 lg:py-28 md:py-28">
@if($showHeader)
<div class="flex flex-wrap mx-[-15px] !mb-14 !text-center">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<span class="inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
<span class="company-history-timeline__section-badge inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
{{ __('company_history.timeline_section_badge') }}
</span>
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
<h2 class="company-history-timeline__section-title !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
{{ __('company_history.timeline_section_title') }}
</h2>
<p class="lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
<p class="company-history-timeline__section-subtitle lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
{{ __('company_history.timeline_section_subtitle') }}
</p>
</div>
@@ -43,6 +45,7 @@
$color = $item->color ?? '#17a2b8';
$position = $item->resolved_position;
$title = method_exists($item, 'translate') ? ($item->translate('title') ?: $item->title) : $item->title;
$titleUpper = $title ? locale_upper($title) : null;
$content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
@endphp
<article
@@ -62,8 +65,8 @@
<div class="company-history-timeline__side company-history-timeline__side--inner">
<div class="company-history-timeline__content">
<div class="company-history-timeline__year">{{ $item->year }}</div>
@if($title)
<h3 class="company-history-timeline__title">{{ strtoupper($title) }}</h3>
@if($titleUpper)
<h3 class="company-history-timeline__title">{{ $titleUpper }}</h3>
@endif
@if($content)
<p class="company-history-timeline__text">{{ $content }}</p>
@@ -84,9 +87,24 @@
@once
@push('styles')
<style>
.company-history-timeline__section-badge {
font-family: var(--ch-font-label);
letter-spacing: 0.14em;
}
.company-history-timeline__section-title {
font-family: var(--ch-font-year);
letter-spacing: -0.02em;
}
.company-history-timeline__section-subtitle {
font-family: var(--ch-font-body);
}
.company-history-timeline {
max-width: 960px;
margin: 0 auto;
font-family: var(--ch-font-body);
}
.company-history-timeline__start,
@@ -107,9 +125,10 @@
padding: 0.45rem 1.4rem;
border: 2px solid #cbd5e0;
border-radius: 999px;
font-family: var(--ch-font-label);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
font-weight: 600;
letter-spacing: 0.16em;
color: #4a5568;
background: #fff;
}
@@ -192,25 +211,31 @@
}
.company-history-timeline__year {
font-size: clamp(2rem, 4vw, 2.85rem);
font-family: var(--ch-font-year);
font-size: clamp(2.1rem, 4.2vw, 3rem);
font-weight: 800;
line-height: 1.05;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: var(--item-color);
margin-bottom: 0.2rem;
margin-bottom: 0.35rem;
}
.company-history-timeline__title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
font-family: var(--ch-font-label);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--item-color);
margin: 0 0 0.7rem;
margin: 0 0 0.75rem;
}
.company-history-timeline__text {
font-size: 0.93rem;
line-height: 1.65;
color: #718096;
font-family: var(--ch-font-body);
font-size: 0.98rem;
font-weight: 400;
line-height: 1.7;
color: #5c6b7a;
margin: 0;
max-width: 340px;
}