From c68e95631b6569923dd0799ec7f7783c9623c116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 26 May 2026 23:42:46 +0300
Subject: [PATCH] feat: update finance page hero design, implement reusable
 hero buttons, and dynamic contact information

---
 .../views/front/products/finance.blade.php    | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/resources/views/front/products/finance.blade.php b/resources/views/front/products/finance.blade.php
index a8362de..1073a1b 100644
--- a/resources/views/front/products/finance.blade.php
+++ b/resources/views/front/products/finance.blade.php
@@ -11,9 +11,41 @@
 @push('styles')
 <style>
     /* Premium visual helpers matching theme */
-    .typer-custom {
+    .typer-custom, .typer, .cursor {
         color: #009846 !important;
     }
+    .hero-btn-primary {
+        background-color: #009846 !important;
+        color: #ffffff !important;
+        border: 1px solid #009846 !important;
+        transition: all 0.3s ease !important;
+        display: inline-block !important;
+        padding: 12px 28px !important;
+        font-weight: 600 !important;
+    }
+    .hero-btn-primary:hover {
+        background-color: #007f3a !important;
+        color: #ffffff !important;
+        border-color: #007f3a !important;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 152, 70, 0.3) !important;
+    }
+    .hero-btn-secondary {
+        background-color: transparent !important;
+        color: #ffffff !important;
+        border: 1px solid #ffffff !important;
+        transition: all 0.3s ease !important;
+        display: inline-block !important;
+        padding: 12px 28px !important;
+        font-weight: 600 !important;
+    }
+    .hero-btn-secondary:hover {
+        background-color: #ffffff !important;
+        color: #262b32 !important;
+        border-color: #ffffff !important;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
+    }
 </style>
 @endpush
 
@@ -33,7 +65,7 @@
                 <div class="w-full flex-[0_0_auto] max-w-full px-0 !mt-[30px]">
                     <h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.3rem] !text-white !mb-4">
                         <span class="inline-flex items-center gap-2 mb-2">
-                            <img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance" class="h-10 w-auto inline-block" style="max-height: 44px;">
+                            <img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance" class="h-20 w-auto inline-block" >
                             <span class="text-white">{!! t('ile') !!}</span>
                         </span>
                         <br>
@@ -140,10 +172,10 @@
                     </div>
                     
                     <div>
-                        <a href="https://finance.truncgil.com/docs" target="_blank" class="btn btn-green !text-white !bg-[#009846] border-[#009846] hover:text-white hover:bg-[#007f3a] hover:!border-[#007f3a] focus:shadow-[rgba(0,152,70,0.5)] active:!text-white active:bg-[#007f3a] active:border-[#007f3a] disabled:bg-[#009846] disabled:border-[#009846] rounded mr-3">
+                        <a href="https://finance.truncgil.com/docs" target="_blank" class="btn hero-btn-primary rounded mr-3">
                             {!! t('Dokümantasyon') !!}
                         </a>
-                        <a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-outline-white text-white border-white hover:bg-white hover:text-[#262b32] rounded">
+                        <a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn hero-btn-secondary rounded">
                             {!! t('Teklif Alın') !!}
                         </a>
                     </div>
@@ -444,7 +476,9 @@
                 <div class="shape !rounded-[50%] !bg-[#edfbf2] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
                 <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                     <div class="flex flex-wrap mx-0">
-                        <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]" style="background-image: url('{{ asset('assets/img/photos/tm1.jpg') }}');"></div>
+                        <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full rounded-t-[0.4rem] xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] bg-[#f8f9fa] flex items-center justify-center p-8 md:min-h-[25rem] max-md:min-h-[20rem]">
+                            <img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance Logo" style="max-width: 260px; width: 75%; height: auto; filter: invert(1) hue-rotate(180deg);">
+                        </div>
                         <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
                             <div class="!p-10 xl:!p-[4rem] lg:!p-[4rem] md:!p-12">
                                 <div class="swiper-container dots-closer !mb-4 relative z-10" data-margin="30" data-dots="true">
@@ -576,7 +610,7 @@
                         </div>
                         <div>
                             <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('Adres') !!}</h5>
-                            <address class="not-italic !leading-[inherit] !mb-4">{!! t('Merkez Ofis, Teknoloji Vadisi, İstanbul, Türkiye') !!}</address>
+                            <address class="not-italic !leading-[inherit] !mb-4">{{ setting('contact_address') }}</address>
                         </div>
                     </div>
                     <div class="flex flex-row">
@@ -587,7 +621,7 @@
                         </div>
                         <div>
                             <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('Telefon') !!}</h5>
-                            <p>+90 (212) 123 45 67</p>
+                            <p>{{ setting('contact_phone') }}</p>
                         </div>
                     </div>
                     <div class="flex flex-row">
@@ -598,7 +632,7 @@
                         </div>
                         <div>
                             <h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('E-posta') !!}</h5>
-                            <p class="!mb-0"><a href="mailto:info@truncgil.com" class="!text-[#60697b]">info@truncgil.com</a></p>
+                            <p class="!mb-0"><a href="mailto:{{ setting('contact_email') }}" class="!text-[#60697b]">{{ setting('contact_email') }}</a></p>
                         </div>
                     </div>
                 </div>