refactor: transition finance page to single-column layout with integrated logo header and grid-based rate cards

This commit is contained in:
Ümit Tunç
2026-05-26 23:32:10 +03:00
parent 121ba7d9c0
commit b7434e12c6
@@ -26,13 +26,17 @@
after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#262b32] after:border-0 after:border-solid after:right-0">
<div class="container pt-7 xl:pt-12 lg:pt-12 md:pt-12 pb-8 relative z-10">
{{-- Main Row: Rates on the Left, Logo on the Right --}}
<div class="flex flex-wrap mx-0 !mt-[-30px] items-center">
{{-- Main Row: Single Column Layout --}}
<div class="flex flex-wrap mx-0 !mt-[-30px]">
{{-- Left Column: Live Rates Cards & Descriptions --}}
<div class="lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[30px] lg:!pr-8">
{{-- Column: Live Rates Cards & Descriptions --}}
<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">
{!! t('Trunçgil Finance ile') !!} <br>
<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;">
<span class="text-white">{!! t('ile') !!}</span>
</span>
<br>
<span class="typer !text-[#009846] whitespace-nowrap" data-delay="100" data-words="{{ t('anlık döviz kurlarına,canlı altın fiyatlarına,kripto para verilerine') }}"></span>
<span class="cursor !text-[#009846]" data-owner="typer"></span>
</h1>
@@ -46,10 +50,10 @@
<span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span>
<span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{{-- USD Card --}}
<div class="col">
<div>
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
<div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span>
@@ -70,7 +74,7 @@
</div>
{{-- EUR Card --}}
<div class="col">
<div>
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
<div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span>
@@ -91,7 +95,7 @@
</div>
{{-- GBP Card --}}
<div class="col">
<div>
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
<div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span>
@@ -112,7 +116,7 @@
</div>
{{-- GRA Card --}}
<div class="col">
<div>
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;">
<div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span>
@@ -144,13 +148,6 @@
</a>
</div>
</div>
{{-- Right Column: Logo (No borders, transparent bg, centered cleanly) --}}
<div class="lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[30px] flex justify-center lg:justify-end">
<a href="https://finance.truncgil.com/" target="_blank" class="inline-block transition-transform duration-300 hover:scale-105">
<img src="{{ asset('assets/img/finance-logo.svg') }}" alt="Trunçgil Finance Logo" class="w-full h-auto" style="max-width: 320px;">
</a>
</div>
</div>
</div>