feat: enhance company history module with new font styles, improved localization functions, and optimized layout for better readability
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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,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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user