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

feat: update finance page hero design, implement reusable hero buttons, and dynamic contact information

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-26 23:42:46 +03:00
parent 8c4c58e094
commit c68e95631b
1 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/products/finance.blade.php
+42 -8
View File
@@ -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>