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

resources/views/components/company-history/fonts.blade.php

@@ -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-year: 'Sora', system-ui, sans-serif;
-            --ch-font-label: 'Outfit', 'Urbanist', system-ui, sans-serif;
+            --ch-font-label: 'Outfit', system-ui, sans-serif;
-            --ch-font-body: 'Source Sans 3', 'Urbanist', 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

@@ -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">
+                <h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0">
-                    {{ $titleBefore }}@if($highlight)<span class="!text-[#fab758]"> {{ $highlight }}</span>@endif{{ $titleAfter }}
+                    {{ $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

@@ -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;