truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update company history components with improved font loading, responsive styles, and enhanced visual consistency for better user experience

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-22 07:20:39 +03:00
parent 474882ba7c
commit c195ff79d2
3 changed files with 76 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/company-history/fonts.blade.php
+16 -5
View File
@@ -1,13 +1,24 @@
@once
@push('styles')
@php
$companyHistoryFontsUrl = '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';
@endphp
@push('head')
<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">
<link rel="preload" as="style" href="{{ $companyHistoryFontsUrl }}">
<link rel="stylesheet" href="{{ $companyHistoryFontsUrl }}">
@endpush
@push('styles')
<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;
--ch-font-year: 'Sora', system-ui, sans-serif;
--ch-font-label: 'Outfit', system-ui, sans-serif;
--ch-font-body: 'Source Sans 3', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
}
.company-history-fonts h1 {
resources/views/components/company-history/hero.blade.php
+26 -4
View File
@@ -41,15 +41,15 @@
</div>
<div class="md:w-10/12 lg:w-5/12 xl:w-5/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:!text-left xl:!text-left">
<h1 class="company-history-hero__title !text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">
{{ $titleBefore }}@if($highlight)<span class="!text-[#fab758]"> {{ $highlight }}</span>@endif{{ $titleAfter }}
<h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0">
{{ $titleBefore }}@if($highlight)<span class="company-history-hero__highlight"> {{ $highlight }}</span>@endif{{ $titleAfter }}
</h1>
@if($ctaLabel)
<span>
<a
href="{{ $ctaUrl }}"
class="company-history-hero__cta btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
class="company-history-hero__cta btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
>{{ $ctaLabel }}</a>
</span>
@endif
@@ -68,15 +68,37 @@
.company-history-hero__title {
font-family: var(--ch-font-year);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
@media (min-width: 768px) {
.company-history-hero__title {
font-size: 2rem;
}
}
@media (min-width: 1280px) {
.company-history-hero__title {
font-size: 2.5rem;
}
}
.company-history-hero__highlight {
color: #fab758;
}
.company-history-hero__lead {
font-family: var(--ch-font-body);
font-size: 1.05rem;
line-height: 1.6;
}
.company-history-hero__cta {
font-family: var(--ch-font-label);
font-size: 0.85rem;
font-weight: 600;
}
</style>
resources/views/components/company-history/timeline.blade.php
+34 -5
View File
@@ -21,13 +21,13 @@
@if($showHeader)
<div class="flex flex-wrap mx-[-15px] !mb-14 !text-center company-history-timeline__header">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
<span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block !mb-3">
{{ __('company_history.timeline_section_badge') }}
</span>
<h2 class="company-history-timeline__section-title company-history-timeline__reveal !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
<h2 class="company-history-timeline__section-title company-history-timeline__reveal !mb-3">
{{ __('company_history.timeline_section_title') }}
</h2>
<p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
<p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead max-w-[42rem] !mx-auto">
{{ __('company_history.timeline_section_subtitle') }}
</p>
</div>
@@ -96,16 +96,33 @@
<style>
.company-history-timeline__section-badge {
font-family: var(--ch-font-label);
letter-spacing: 0.14em;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #e31e24;
}
.company-history-timeline__section-title {
font-family: var(--ch-font-year);
font-size: 1.85rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
@media (min-width: 1280px) {
.company-history-timeline__section-title {
font-size: 2.2rem;
}
}
.company-history-timeline__section-subtitle {
font-family: var(--ch-font-body);
font-size: 1.05rem;
font-weight: 400;
line-height: 1.6;
color: #60697b;
}
.company-history-timeline {
@@ -227,7 +244,7 @@
}
.company-history-timeline__year-value {
font-size: clamp(2.1rem, 4.2vw, 3rem);
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
@@ -235,6 +252,18 @@
color: var(--item-color);
}
@media (min-width: 768px) {
.company-history-timeline__year-value {
font-size: 2.65rem;
}
}
@media (min-width: 1280px) {
.company-history-timeline__year-value {
font-size: 3rem;
}
}
.company-history-timeline__quarter {
font-family: var(--ch-font-label);
font-size: 0.95rem;