refactor: transition finance page to single-column layout with integrated logo header and grid-based rate cards
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user