refactor: update finance page styles and layout and add finance logo asset

This commit is contained in:
Ümit Tunç
2026-05-26 23:25:36 +03:00
parent 8a08a0a89a
commit bd1ccb29c0
+492 -382
View File
@@ -1,472 +1,584 @@
@extends('layouts.site')
@php
use Illuminate\Support\Facades\Storage;
$header = 'front.products.finance_header';
@endphp
@section('title', $product->translate('title') ?? 'Trunçgil Finance')
@php
$landingData = $product->landing_page_data ?? [];
$hero = $landingData['hero'] ?? [];
$features = $landingData['features'] ?? [];
$howItWorks = $landingData['how_it_works'] ?? [];
$steps = $howItWorks['steps'] ?? [];
$faqs = $landingData['faqs'] ?? [];
$currentLang = app()->getLocale();
// Helper function for translations
$getTranslated = function($item, $key, $default = '') use ($currentLang) {
if (isset($item["{$key}_{$currentLang}"])) {
return $item["{$key}_{$currentLang}"];
}
return $item[$key] ?? $default;
};
@endphp
@push('styles')
<style>
/* Green-Tuned Premium Dark Theme Core Styles */
:root {
--primary: #00e676 !important;
--primary-rgb: 0, 230, 118 !important;
}
body {
background-color: #0b0f0d !important;
color: #e2e8f0 !important;
font-family: 'Space Grotesk', 'Urbanist', sans-serif !important;
}
.btn-primary {
background-color: #00e676 !important;
border-color: #00e676 !important;
color: #0b0f0d !important;
font-weight: 600 !important;
}
.btn-primary:hover {
background-color: #00b359 !important;
border-color: #00b359 !important;
color: #0b0f0d !important;
}
.finance-dark-page {
background: radial-gradient(circle at 50% 0%, rgba(0, 230, 118, 0.08) 0%, rgba(11, 15, 13, 0) 50%),
radial-gradient(circle at 100% 50%, rgba(0, 230, 118, 0.04) 0%, rgba(11, 15, 13, 0) 40%),
#0b0f0d;
overflow-x: hidden;
}
/* Glow Gradients matching Emerald/Green */
.text-glow-gradient {
background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 50%, #34d399 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-green-glow {
color: #00e676 !important;
text-shadow: 0 0 12px rgba(0, 230, 118, 0.35);
}
/* Elegant Glassmorphism Cards */
.glass-card {
background: rgba(18, 26, 22, 0.55);
backdrop-filter: blur(16px);
border: 1px solid rgba(0, 230, 118, 0.08) !important;
border-radius: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 230, 118, 0.25) !important;
box-shadow: 0 12px 35px rgba(0, 230, 118, 0.1);
}
/* Active dynamic pulse */
.pulse-dot-green {
width: 8px;
height: 8px;
background-color: #00e676;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
animation: pulse-green 1.8s infinite;
}
@keyframes pulse-green {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(0, 230, 118, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
}
}
/* Code editor tab styles matching Green Theme */
.code-editor-header {
background: #0f1411;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid rgba(0, 230, 118, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
}
.code-editor-body {
background: #050807;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
padding: 1.5rem;
font-family: 'Fira Code', 'Courier New', Courier, monospace;
font-size: 0.85rem;
color: #cbd5e1;
overflow-x: auto;
}
.nav-tabs-code .nav-link {
color: #8892b0;
border: none;
padding: 0.4rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.nav-tabs-code .nav-link.active {
color: #00e676 !important;
background: rgba(0, 230, 118, 0.1) !important;
}
/* Accordions inside dark theme */
.accordion-dark .accordion-item {
background: rgba(18, 26, 22, 0.3) !important;
border: 1px solid rgba(0, 230, 118, 0.05) !important;
border-radius: 0.75rem !important;
overflow: hidden;
margin-bottom: 1rem;
}
.accordion-dark .accordion-button {
background: transparent !important;
color: #e2e8f0 !important;
box-shadow: none !important;
font-weight: 600;
}
.accordion-dark .accordion-button:not(.collapsed) {
color: #00e676 !important;
}
.accordion-dark .accordion-button::after {
filter: brightness(0) invert(1);
}
.accordion-dark .accordion-body {
color: #94a3b8 !important;
border-top: 1px solid rgba(0, 230, 118, 0.05);
/* Premium visual helpers matching theme */
.typer-custom {
color: #54a8c7 !important;
}
</style>
@endpush
@section('content')
<div class="finance-dark-page">
<div class="grow shrink-0">
{{-- Hero Section designed exactly like demo3.html --}}
<section class="wrapper bg-[#0c120f] opacity-100 angled lower-start relative border-0
before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-[#0c120f] before:border-0 before:border-solid before:right-0
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-[#0c120f] after:border-0 after:border-solid after:right-0">
{{-- Section 1: Hero --}}
<section class="wrapper bg-[#262b32] opacity-100 angled lower-start relative border-0
before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-[#262b32] before:border-0 before:border-solid before:right-0
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">
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
{{-- LEFT COLUMN: Title & Rates (Döviz, Altın, Kripto tek yerde şeklinde) --}}
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[50px]">
<div class="d-flex align-items-center gap-2 mb-3">
<span class="pulse-dot-green" aria-hidden="true"></span>
<span class="text-green-glow fs-13 font-bold uppercase tracking-wider">{!! t('Canlı Finansal Veri Servisi') !!}</span>
</div>
<h1 class="display-3 font-bold !leading-[1.15] text-white !mb-4 text-glow-gradient">
{!! t('Altın, Döviz ve Kripto Paralar') !!} <br>
<span class="text-green-glow">{!! t('Tek Bir API Uç Noktasında!') !!}</span>
<h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !text-white !mb-4">
{!! t('Trunçgil Finance ile') !!} <br>
<span class="typer !text-[#54a8c7] 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-[#54a8c7]" data-owner="typer"></span>
</h1>
<p class="lead !text-[1.15rem] !leading-[1.5] text-slate-300 !mb-6 pr-lg-12">
{!! t('Trunçgil Finance ile gecikmesiz, anlık ve yüksek frekanslı tüm altın fiyatlarını, serbest piyasa döviz kurlarını ve popüler kripto para birimlerini tek bir noktadan entegre edin.') !!}
<p class="lead !text-[1.2rem] !leading-[1.5] !text-white !mb-7 md:!pr-32 xl:!pr-0 lg:!pr-0 xxl:!pr-20">
{!! t('Gecikmesiz, anlık ve yüksek frekanslı tüm finansal piyasa verilerini tek bir JSON/RESTful API uç noktasından saniyeler içinde sistemlerinize entegre edin.') !!}
</p>
{{-- Rates Showcase (Tek Yerde) --}}
<div class="glass-card p-5 !mb-7" style="background: rgba(12, 18, 15, 0.7); max-width: 490px;">
<div class="row g-4">
<div class="col-6">
<div class="d-flex align-items-center gap-2">
<span class="w-2.5 h-2.5 rounded-circle bg-warning d-inline-block"></span>
<div>
<div class="text-slate-400 fs-11 uppercase font-bold">{!! t('Gram Altın') !!}</div>
<div class="text-white font-bold fs-15 font-mono" id="gold-try">₺3.142,45</div>
</div>
{{-- Live Rates Widget (Wow Factor Integration inside Hero) --}}
<div class="bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.1)] rounded-lg p-5 !mb-7" style="max-width: 480px; backdrop-filter: blur(10px);">
<div class="flex items-center gap-2 mb-3">
<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 (Simüle)') !!}</span>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center gap-3">
<div class="w-2.5 h-2.5 rounded-full bg-warning"></div>
<div>
<div class="text-[#cacaca] text-[0.65rem] uppercase font-bold">{!! t('Gram Altın') !!}</div>
<div class="text-white font-bold text-[0.9rem] font-mono" id="gold-try">₺3,142.45</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center gap-2">
<span class="w-2.5 h-2.5 rounded-circle bg-info d-inline-block"></span>
<div>
<div class="text-slate-400 fs-11 uppercase font-bold">USD / TRY</div>
<div class="text-white font-bold fs-15 font-mono" id="usd-try">₺34.8250</div>
</div>
<div class="flex items-center gap-3">
<div class="w-2.5 h-2.5 rounded-full bg-info"></div>
<div>
<div class="text-[#cacaca] text-[0.65rem] uppercase font-bold">USD / TRY</div>
<div class="text-white font-bold text-[0.9rem] font-mono" id="usd-try">₺34.8250</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center gap-2">
<span class="w-2.5 h-2.5 rounded-circle bg-primary d-inline-block"></span>
<div>
<div class="text-slate-400 fs-11 uppercase font-bold">EUR / TRY</div>
<div class="text-white font-bold fs-15 font-mono" id="eur-try">₺37.2480</div>
</div>
<div class="flex items-center gap-3">
<div class="w-2.5 h-2.5 rounded-full bg-success"></div>
<div>
<div class="text-[#cacaca] text-[0.65rem] uppercase font-bold">EUR / TRY</div>
<div class="text-white font-bold text-[0.9rem] font-mono" id="eur-try">₺37.2480</div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center gap-2">
<span class="w-2.5 h-2.5 rounded-circle d-inline-block" style="background-color: #00e676;"></span>
<div>
<div class="text-slate-400 fs-11 uppercase font-bold">BTC / USD</div>
<div class="text-white font-bold fs-15 font-mono" id="btc-usd">$98,425.00</div>
</div>
<div class="flex items-center gap-3">
<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
<div>
<div class="text-[#cacaca] text-[0.65rem] uppercase font-bold">BTC / USD</div>
<div class="text-white font-bold text-[0.9rem] font-mono" id="btc-usd">$98,425.00</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-wrap gap-3">
<a href="https://finance.truncgil.com/docs" target="_blank" class="btn btn-primary px-6 py-3 rounded">
<i class="uil uil-code-branch me-1"></i> {!! t('API Entegrasyonu') !!}
<div>
<a href="https://finance.truncgil.com/docs" target="_blank" class="btn btn-lg btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] rounded mr-3">
{!! t('Dokümantasyon') !!}
</a>
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-outline-glow px-6 py-3 rounded">
{!! t('Özel Teklif Alın') !!}
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-lg btn-outline-white text-white border-white hover:bg-white hover:text-[#262b32] rounded">
{!! t('Teklif Alın') !!}
</a>
</div>
</div>
{{-- RIGHT COLUMN: Floating Fetched Logo --}}
<div class="lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[50px] lg:!ml-[8.33333333%] xl:!ml-[8.33333333%] !mb-[-8rem] relative z-[3]">
<div class="!relative">
<figure class="!rounded-[1rem] !shadow-[0_0.25rem_2.5rem_rgba(0,230,118,0.15)] overflow-hidden" style="background: rgba(18, 26, 22, 0.6); border: 1px solid rgba(0, 230, 118, 0.15);">
<div class="p-12 text-center">
@if(!empty($hero['featured_image']))
<img class="img-fluid drop-shadow-lg mx-auto" src="{{ Storage::url($hero['featured_image']) }}" alt="Trunçgil Finance Logo" style="max-height: 140px;">
@else
<img class="img-fluid drop-shadow-lg mx-auto" src="https://finance.truncgil.com/img/logo.svg" alt="Trunçgil Finance Logo" style="max-height: 140px;">
@endif
<div class="mt-8 text-center">
<span class="badge bg-soft-success text-success rounded-pill px-4 py-2 fs-12 border border-success-20">API v4 STABLE</span>
</div>
</div>
<a href="https://finance.truncgil.com/" target="_blank"
class="btn btn-circle btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-6 !absolute !text-[calc(1.355rem_+_1.26vw)] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]"
style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;"><i
class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<img class="!rounded-[.4rem]" src="{{ asset('assets/img/photos/about13.jpg') }}" alt="Trunçgil Finance Preview">
</figure>
</div>
</div>
</div>
</div>
</section>
{{-- Advantages and API Benefits Section --}}
<section class="wrapper bg-[#0b0f0d] pt-36 pb-24 xl:pb-32 lg:pb-32 md:pb-32 relative z-10">
<div class="container">
{{-- Section 2: What We Do? --}}
<section class="wrapper !bg-[#ffffff]">
<div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Ne Yapıyoruz?') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">
{!! t('İhtiyaçlarınıza özel olarak tasarlanmış yüksek hızlı finansal veri çözümleri.') !!}
</h3>
</div>
</div>
<div class="row text-center mb-16">
<div class="col-lg-8 mx-auto">
<h2 class="text-green-glow uppercase tracking-wider fs-13 font-bold mb-3">{!! t('API Avantajları & Sıfır Kesinti') !!}</h2>
<h3 class="display-4 font-bold text-glow-gradient">{!! t('Geliştiriciler İçin Sınırsız Özgürlük') !!}</h3>
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6">
<i class="uil uil-wind-moon"></i>
</div>
<h4 class="!text-[1rem] !leading-[1.45]">{!! t('7/24 Kesintisiz Destek') !!}</h4>
<p class="!mb-3">{!! t('Canlı veri hatlarımız ve uzman teknik ekibimiz, sistemlerinizin kesintisiz çalışması için her an hazır durumdadır.') !!}</p>
<a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">{!! t('Detaylar') !!}</a>
</div>
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6">
<i class="uil uil-shield-exclamation before:content-['\ecb3']"></i>
</div>
<h4 class="!text-[1rem] !leading-[1.45]">{!! t('Güvenli Entegrasyon') !!}</h4>
<p class="!mb-3">{!! t('SSL/TLS korumalı, son derece güvenli RESTful API uç noktalarımız ile verilerinizi projelerinize güvenle çekin.') !!}</p>
<a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">{!! t('Detaylar') !!}</a>
</div>
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6">
<i class="uil uil-laptop-cloud before:content-['\ebb2']"></i>
</div>
<h4 class="!text-[1rem] !leading-[1.45]">{!! t('Anlık Güncellemeler') !!}</h4>
<p class="!mb-3">{!! t('Altın fiyatları, serbest piyasa döviz kurları ve kripto paralar milisaniyeler bazında sürekli güncellenir.') !!}</p>
<a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">{!! t('Detaylar') !!}</a>
</div>
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6">
<i class="uil uil-phone-volume before:content-['\ec50']"></i>
</div>
<h4 class="!text-[1rem] !leading-[1.45]">{!! t('Piyasa Analizleri') !!}</h4>
<p class="!mb-3">{!! t('Gelişmiş geçmiş veri havuzumuzla piyasa trendlerini kolayca analiz edin, raporlayın ve tahminler üretin.') !!}</p>
<a href="https://finance.truncgil.com/docs" target="_blank" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">{!! t('Detaylar') !!}</a>
</div>
</div>
<div class="row g-6 text-center">
{{-- Advantage 1: No Auth Required --}}
<div class="col-md-4">
<div class="glass-card p-8 h-100 flex flex-col justify-between">
{{-- Section 3: How It Works? --}}
<div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] !mb-24 md:!mb-[8rem] items-center">
<div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
<div class="shape bg-dot rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 !bg-[radial-gradient(#54a8c7_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
<div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%;"></div>
<figure class="!rounded-[.4rem] relative z-[2]">
<img class="!rounded-[.4rem]" src="{{ asset('assets/img/photos/about7.jpg') }}" alt="How Trunçgil Finance Works">
</figure>
</div>
<div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !mt-[80px]">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Nasıl Çalışır?') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">
{!! t('3 Kolay Adımda Entegrasyon Başarısı') !!}
</h3>
<div class="flex flex-row !mb-6">
<div>
<div class="w-12 h-12 rounded-circle bg-success-soft flex items-center justify-center mx-auto mb-5 text-success fs-24">
<i class="uil uil-unlock"></i>
</div>
<h4 class="fs-18 font-bold text-white mb-3">{!! t('No Auth Required (Sıfır Kurulum)') !!}</h4>
<p class="text-slate-400 fs-14 mb-0">
{!! t('Başlamak için karmaşık kayıt süreçlerine, token/key yönetimlerine gerek yok. Standart JSON uç noktalarımıza doğrudan istek atarak saniyeler içinde çalışın.') !!}
</p>
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span class="number !text-[0.9rem]">1</span></span>
</div>
<div>
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Uç Noktayı Seçin') !!}</h4>
<p class="!mb-0">{!! t('Projenizin ihtiyaç duyduğu veriyi (Döviz, Altın veya Kripto) sağlayan JSON uç noktasını seçin.') !!}</p>
</div>
</div>
</div>
{{-- Advantage 2: Totally Free --}}
<div class="col-md-4">
<div class="glass-card p-8 h-100 flex flex-col justify-between">
<div class="flex flex-row !mb-6">
<div>
<div class="w-12 h-12 rounded-circle bg-success-soft flex items-center justify-center mx-auto mb-5 text-success fs-24">
<i class="uil uil-gift"></i>
</div>
<h4 class="fs-18 font-bold text-white mb-3">{!! t('%100 Ücretsiz Kullanım') !!}</h4>
<p class="text-slate-400 fs-14 mb-0">
{!! t('Geliştirici dostu yapımız gereği, tüm kişisel ve prototip projelerinizde altın döviz verilerimizi hiçbir kullanım ücreti ödemeden özgürce çekebilirsiniz.') !!}
</p>
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span class="number !text-[0.9rem]">2</span></span>
</div>
<div>
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Kodunuza Ekleyin') !!}</h4>
<p class="!mb-0">{!! t('No-Auth özelliğimiz sayesinde herhangi bir key yönetimi gerekmeden doğrudan API çağrısını başlatın.') !!}</p>
</div>
</div>
</div>
{{-- Advantage 3: Dockerized Private Deployments --}}
<div class="col-md-4">
<div class="glass-card p-8 h-100 flex flex-col justify-between">
<div class="flex flex-row">
<div>
<div class="w-12 h-12 rounded-circle bg-success-soft flex items-center justify-center mx-auto mb-5 text-success fs-24">
<i class="uil uil-layer-group"></i>
</div>
<h4 class="fs-18 font-bold text-white mb-3">{!! t('Özel Dockerize Kurulum') !!}</h4>
<p class="text-slate-400 fs-14 mb-0">
{!! t('Kurumsal işletmeniz için yüksek hacimli istek, sıfır ağ gecikmesi ve izole veri akışı gerekiyorsa, size özel Docker paketimizle sistemi kendi sunucularınıza kurabiliriz.') !!}
</p>
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span class="number !text-[0.9rem]">3</span></span>
</div>
<div>
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">{!! t('Canlı Veriyi İşleyin') !!}</h4>
<p class="!mb-0">{!! t('Milisaniyeler içinde gelen temiz ve yapılandırılmış çıktıyı uygulamanızda hemen kullanın.') !!}</p>
</div>
</div>
</div>
</div>
{{-- Section 4: Why Choose Us? --}}
<div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
<div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 !relative">
<div class="shape !rounded-[50%] bg-line aqua rellax !w-[8rem] !h-[8rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
<div class="shape rounded !bg-[#edf2fc] rellax xl:block lg:block md:block absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; left: -1.5rem; width: 85%; height: 90%;"></div>
<figure class="rounded-[0.4rem] relative z-[2]">
<img class="rounded-[.4rem]" src="{{ asset('assets/img/photos/about9.jpg') }}" alt="Why Choose Trunçgil Finance">
</figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Neden Biz?') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">
{!! t('Değerli geliştiricilerimizin bizi tercih etmesinin birkaç önemli nedeni.') !!}
</h3>
<div class="accordion accordion-wrapper" id="accordionExample">
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
<button class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{!! t('Sıfır Kurulum Maliyeti (No-Auth)') !!}
</button>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<p>{!! t('API anahtarları almakla, üyelik adımlarıyla uğraşmayın. Doğrudan açık API endpointlerimize bağlanıp saniyeler içinde geliştirme yapmaya başlayın.') !!}</p>
</div>
</div>
</div>
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
<button class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
{!! t('Milisaniyeler Hızında JSON Yanıtları') !!}
</button>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<p>{!! t('Ultra hızlı sunucu altyapımız ve optimize edilmiş önbellek katmanlarımız sayesinde isteklerinize anında ve sıfır gecikmeyle cevap alın.') !!}</p>
</div>
</div>
</div>
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
<button class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
{!! t('Dockerize Bağımsız Altyapı İmkanı') !!}
</button>
</div>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
<p>{!! t('Kurumsal işletmeler için geliştirdiğimiz özel Docker paketiyle, sistemi kendi iç ağınıza kurup bağımsız olarak anlık veri çekebilirsiniz.') !!}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Interactive Code Playground --}}
<section class="wrapper bg-[#0c120f] py-20 relative z-10 border-top border-white-5">
<div class="container">
<div class="row align-items-center g-10">
<div class="col-lg-5">
<h2 class="text-green-glow uppercase tracking-wider fs-13 font-bold mb-3">{!! t('Geliştirici Dostu Yapı') !!}</h2>
<h3 class="display-4 font-bold text-glow-gradient mb-5">{!! t('Kodunuza Saniyeler İçinde Bağlayın') !!}</h3>
<p class="text-slate-300 fs-16 mb-6">
{!! t('Modern RESTful JSON standartlarında sunulan temiz çıktı modelimiz sayesinde, en sevdiğiniz programlama dilinde anında istek atın ve verileri işleyin.') !!}
</p>
<ul class="list-unstyled space-y-3 mb-8">
<li class="d-flex align-items-center gap-3">
<i class="uil uil-check-circle text-green-glow fs-18"></i>
<span>{!! t('Kimlik Doğrulama Gerekmez (No-Auth)') !!}</span>
</li>
<li class="d-flex align-items-center gap-3">
<i class="uil uil-check-circle text-green-glow fs-18"></i>
<span>{!! t('Milisaniyeler Hızında JSON Çıktısı') !!}</span>
</li>
</ul>
<a href="https://finance.truncgil.com/docs" target="_blank" class="btn btn-primary px-6 py-3 rounded">
{!! t('API Dokümantasyonunu İncele') !!} <i class="uil uil-arrow-right ms-1"></i>
{{-- Section 5: Join Our Community Banner --}}
<section class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]" style="background-image: url('{{ asset('assets/img/photos/bg1.jpg') }}');">
<div class="container py-[8rem]">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative z-[2]">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#ffffff] !text-white !mb-3">
{!! t('Topluluğumuza Katılın') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-6 !text-white xxl:!pr-32">
{!! t("5000'den fazla aktif geliştirici ve kurum tarafından tercih ediliyoruz. Siz de projenizi hemen güçlendirin.") !!}
</h3>
<a href="https://finance.truncgil.com/" target="_blank" class="btn btn-white !rounded-[.4rem] !text-[.85rem] !mb-0 whitespace-nowrap">{!! t('Şimdi Başlayın') !!}</a>
</div>
</div>
</div>
</section>
{{-- Section 6: Case Studies (Kullanım Alanları) --}}
<section class="wrapper !bg-[#ffffff] angled upper-end relative border-0
before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:content-[''] after:block after:absolute after:z-0 after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0">
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Uygulama Alanları') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">
{!! t('Piyasa verilerimizle zenginleştirilmiş bazı mükemmel kullanım senaryoları.') !!}
</h3>
</div>
</div>
<div class="swiper-container blog grid-view !mb-10 relative z-10" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
<a href="#">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b4.jpg') }}" alt="Use Case 1">
</a>
</figure>
<div class="post-header">
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='#'>{!! t('E-Ticaret & Otomatik Döviz Dönüşümleri') !!}</a></h2>
</div>
<div class="post-footer">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Canlı Kur') !!}</span></li>
</ul>
</div>
</article>
</div>
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
<a href="#">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b5.jpg') }}" alt="Use Case 2">
</a>
</figure>
<div class="post-header">
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='#'>{!! t('ERP & Otomatik Şirket İçi Kur Değerlemeleri') !!}</a></h2>
</div>
<div class="post-footer">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Kurumsal ERP') !!}</span></li>
</ul>
</div>
</article>
</div>
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group">
<a href="#">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ asset('assets/img/photos/b6.jpg') }}" alt="Use Case 3">
</a>
</figure>
<div class="post-header">
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='#'>{!! t('Mobil Finans & Canlı Altın Takip Portalları') !!}</a></h2>
</div>
<div class="post-footer">
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
<li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{!! t('Mobil Entegrasyon') !!}</span></li>
</ul>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Section 7: Company Facts (Counters) --}}
<section class="wrapper !bg-[#edf2fc]">
<div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem]">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-2 items-end">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Şirket Rakamlarımız') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-0 xxl:!pr-20">
{!! t('Altyapımızın gücünü gösteren bazı önemli rakamlar.') !!}
</h3>
</div>
<div class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!mt-2 lg:!mt-2">
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">10M+</h3>
<p class="font-medium !mb-0">{!! t('Günlük API İstek Hacmi') !!}</p>
</div>
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">5000+</h3>
<p class="font-medium !mb-0">{!! t('Aktif Geliştirici ve Kurum') !!}</p>
</div>
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
<h3 class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem]">%99.99</h3>
<p class="font-medium !mb-0">{!! t('Sunucu Uptime Garantisi') !!}</p>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Section 8: Testimonial & Pricing Plan Integration --}}
<section class="wrapper !bg-[#ffffff] angled upper-end lower-start relative border-0
before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 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-[#fefefe] after:border-0 after:border-solid after:right-0">
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !relative">
{{-- Testimonial Slider --}}
<div class="relative !mt-[-8rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-17.5rem] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
<div class="shape !rounded-[50%] bg-line aqua rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
<div class="shape !rounded-[50%] !bg-[#eff7fa] 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="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">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top !text-[1.05rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>{!! t('Trunçgil Finance API altyapısını mobil cüzdan projemizde kullanıyoruz. Aylardır bir kere bile kesinti yaşamadık, performansı gerçekten harika!') !!}</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 !text-[.95rem] !leading-[1.5]">{!! t('Can Özkan') !!}</h5>
<p class="!mb-0 !text-[.85rem]">{!! t('Kıdemli Mobil Geliştirici') !!}</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top !text-[1.05rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
<p>{!! t('Sıfır kurulum (No-Auth) olması sayesinde entegrasyonu tam 5 dakikada tamamladık. Hız ve kullanım kolaylığı mükemmel.') !!}</p>
<div class="flex items-center justify-center !text-center">
<div class="info !pl-0">
<h5 class="!mb-1 !text-[.95rem] !leading-[1.5]">{!! t('Elif Yılmaz') !!}</h5>
<p class="!mb-0 !text-[.85rem]">{!! t('Fullstack Yazılım Uzmanı') !!}</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- Pricing and Plans --}}
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] lg:!mt-32 xl:!mt-32 !mb-3">
{!! t('Fiyatlandırma') !!}
</h2>
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-3">
{!! t('Geliştirici dostu ve son derece adil planlar.') !!}
</h3>
<p>{!! t('Hemen ücretsiz deneme planıyla başlayın ve API gücünü kendiniz deneyimleyin. Kredi kartı gerekmez!') !!}</p>
<a href="https://finance.truncgil.com/" target="_blank" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !text-[.85rem] rounded !mt-2">
{!! t('Tüm Planları Gör') !!}
</a>
</div>
{{-- Interactive Tabs and Code Code Editor --}}
<div class="col-lg-7">
<div class="nav nav-tabs nav-tabs-code mb-4 gap-2" id="code-tabs" role="tablist">
<button class="nav-link active" id="tab-js-btn" data-bs-toggle="tab" data-bs-target="#tab-js" type="button" role="tab" aria-selected="true">JavaScript</button>
<button class="nav-link" id="tab-php-btn" data-bs-toggle="tab" data-bs-target="#tab-php" type="button" role="tab" aria-selected="false">PHP (cURL)</button>
<button class="nav-link" id="tab-python-btn" data-bs-toggle="tab" data-bs-target="#tab-python" type="button" role="tab" aria-selected="false">Python</button>
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]">
<div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end">
<p class="!mb-0 !pr-[.75rem]">{!! t('Aylık') !!}</p>
<div class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
<div class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white"></div>
<div class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase"></div>
<div class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(84,168,199)] opacity-100 switcher-button"></div>
</div>
<p class="!mb-0 !pl-3 !relative">{!! t('Yıllık') !!} <span class="!text-[#e2626b]">({!! t('%30 Tasarruf') !!})</span></p>
</div>
<div class="tab-content">
{{-- JavaScript --}}
<div class="tab-pane fade show active" id="tab-js" role="tabpanel" aria-labelledby="tab-js-btn">
<div class="code-editor-header">
<div>
<span class="code-dot code-dot-red" aria-hidden="true"></span>
<span class="code-dot code-dot-yellow" aria-hidden="true"></span>
<span class="code-dot code-dot-green" aria-hidden="true"></span>
<span class="text-slate-400 fs-12">finance.js</span>
<div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
<div class="shape bg-dot aqua rellax !w-[6rem] !h-[8rem] absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
<div class="shape !rounded-[50%] !bg-[#edf2fc] rellax !w-[8rem] !h-[8rem] absolute z-[1]" data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body pb-14">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">0</span> <span class="price-duration">/{!! t('ay') !!}</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">0</span> <span class="price-duration">/{!! t('yıl') !!}</span></div>
</div>
<h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">{!! t('Geliştirici Planı') !!}</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> {!! t('API İstek / Ay') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Kimlik Doğrulama Gerekmez (No-Auth)') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Standart HTTP Önbellekleme') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span>{!! t('Özel Docker Kurulum Desteği') !!}</span></li>
</ul>
<a href="https://finance.truncgil.com/" target="_blank" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">{!! t('Ücretsiz Başla') !!}</a>
</div>
<button class="btn btn-sm btn-outline-glow rounded px-3 py-1 fs-12" onclick="navigator.clipboard.writeText(document.getElementById('code-js').innerText); alert('Copied!');">
<i class="uil uil-copy me-1"></i> {!! t('Kopyala') !!}
</button>
</div>
<pre class="code-editor-body m-0" id="code-js"><code><span class="text-warning">fetch</span>(<span class="text-success">'https://finance.truncgil.com/v4/today.json'</span>)
.<span class="text-warning">then</span>(response => response.<span class="text-warning">json</span>())
.<span class="text-warning">then</span>(data => {
<span class="text-info">console</span>.<span class="text-warning">log</span>(<span class="text-success">'Dolar/TRY:'</span>, data.USD.Buying);
<span class="text-info">console</span>.<span class="text-warning">log</span>(<span class="text-success">'Gram Altın:'</span>, data.Gold_Gram.Selling);
})
.<span class="text-warning">catch</span>(error => <span class="text-info">console</span>.<span class="text-warning">error</span>(<span class="text-success">'Hata:'</span>, error));</code></pre>
</div>
{{-- PHP --}}
<div class="tab-pane fade" id="tab-php" role="tabpanel" aria-labelledby="tab-php-btn">
<div class="code-editor-header">
<div>
<span class="code-dot code-dot-red" aria-hidden="true"></span>
<span class="code-dot code-dot-yellow" aria-hidden="true"></span>
<span class="code-dot code-dot-green" aria-hidden="true"></span>
<span class="text-slate-400 fs-12">finance.php</span>
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-body pb-14">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-value">{!! t('Özel') !!}</span></div>
</div>
<h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">{!! t('Kurumsal Plan') !!}</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>{!! t('Sınırsız') !!}</strong> {!! t('API İstek Hacmi') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>{!! t('Özel Sunucu & Docker') !!}</strong> {!! t('Kurulumları') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Yüksek Öncelikli Özel Destek Hattı') !!}</span></li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e0eff5] !text-[#54a8c7] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>{!! t('Milisaniyelik Ultra Düşük Gecikme') !!}</span></li>
</ul>
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">{!! t('Bizimle İletişime Geçin') !!}</a>
</div>
<button class="btn btn-sm btn-outline-glow rounded px-3 py-1 fs-12" onclick="navigator.clipboard.writeText(document.getElementById('code-php').innerText); alert('Copied!');">
<i class="uil uil-copy me-1"></i> {!! t('Kopyala') !!}
</button>
</div>
<pre class="code-editor-body m-0" id="code-php"><code><span class="text-info">&lt;?php</span>
<span class="text-warning">$ch</span> = <span class="text-warning">curl_init</span>(<span class="text-success">'https://finance.truncgil.com/v4/today.json'</span>);
<span class="text-warning">curl_setopt</span>(<span class="text-warning">$ch</span>, CURLOPT_RETURNTRANSFER, <span class="text-info">true</span>);
<span class="text-warning">$response</span> = <span class="text-warning">curl_exec</span>(<span class="text-warning">$ch</span>);
<span class="text-warning">$data</span> = <span class="text-warning">json_decode</span>(<span class="text-warning">$response</span>, <span class="text-info">true</span>);
<span class="text-info">echo</span> <span class="text-success">"Altın Satış: "</span> . <span class="text-warning">$data</span>[<span class="text-success">'Gold_Gram'</span>][<span class="text-success">'Selling'</span>];
<span class="text-warning">curl_close</span>(<span class="text-warning">$ch</span>);</code></pre>
</div>
{{-- Python --}}
<div class="tab-pane fade" id="tab-python" role="tabpanel" aria-labelledby="tab-python-btn">
<div class="code-editor-header">
<div>
<span class="code-dot code-dot-red" aria-hidden="true"></span>
<span class="code-dot code-dot-yellow" aria-hidden="true"></span>
<span class="code-dot code-dot-green" aria-hidden="true"></span>
<span class="text-slate-400 fs-12">finance.py</span>
</div>
<button class="btn btn-sm btn-outline-glow rounded px-3 py-1 fs-12" onclick="navigator.clipboard.writeText(document.getElementById('code-python').innerText); alert('Copied!');">
<i class="uil uil-copy me-1"></i> {!! t('Kopyala') !!}
</button>
</div>
<pre class="code-editor-body m-0" id="code-python"><code><span class="text-warning">import</span> requests
response = requests.<span class="text-warning">get</span>(<span class="text-success">'https://finance.truncgil.com/v4/today.json'</span>)
data = response.<span class="text-warning">json</span>()
<span class="text-warning">print</span>(<span class="text-success">f"Dolar Alış: {data['USD']['Buying']}"</span>)
<span class="text-warning">print</span>(<span class="text-success">f"Gram Altın Satış: {data['Gold_Gram']['Selling']}"</span>)</code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Bottom CTA Section targeting Docker deployments --}}
<section class="wrapper bg-[#0b0f0d] py-20 relative z-10 border-top border-white-5 text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="display-3 font-bold text-white mb-4">{!! t('Özel & Dockerize Çözümler') !!}</h2>
<p class="lead fs-18 text-slate-300 mb-8 max-w-xl mx-auto">
{!! t('Yüksek performanslı veri havuzu, sınırsız sorgulama hacmi ve sıfır dış sunucu bağımlılığı için Trunçgil Finance altyapısını Dockerize olarak kendi yerel mimarinize kuralım.') !!}
</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-primary px-8 py-3 rounded">
{!! t('Docker Kurulumu İçin İletişime Geçin') !!} <i class="uil uil-comment-alt-dots ms-1"></i>
</a>
<a href="https://finance.truncgil.com/" target="_blank" class="btn btn-outline-glow px-8 py-3 rounded">
{!! t('Detayları Gör') !!}
</a>
{{-- Section 9: Get In Touch (Contact Info) --}}
<div class="flex flex-wrap mx-[-15px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
<div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative">
<div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
<div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%;"></div>
<figure class="rounded-[0.4rem] relative z-[2]">
<img class="rounded-[.4rem]" src="{{ asset('assets/img/photos/about14.jpg') }}" alt="Contact Trunçgil Finance">
</figure>
</div>
<div class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
{!! t('Bize Ulaşın') !!}
</h2>
<h2 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-8">
{!! t('Hala ikna olmadınız mı? Gelin birlikte harika bir entegrasyon yapalım.') !!}
</h2>
<div class="flex flex-row">
<div>
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]">
<i class="uil uil-location-pin-alt before:content-['\ebd8']"></i>
</div>
</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>
</div>
</div>
<div class="flex flex-row">
<div>
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]">
<i class="uil uil-phone-volume before:content-['\ec50']"></i>
</div>
</div>
<div>
<h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">{!! t('Telefon') !!}</h5>
<p>+90 (212) 123 45 67</p>
</div>
</div>
<div class="flex flex-row">
<div>
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]">
<i class="uil uil-envelope before:content-['\eac8']"></i>
</div>
</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>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Live rates simulation matching green vibes
// Switcher logic for Pricing Table
const switcherWrapper = document.querySelector('.pricing-switchers');
if (switcherWrapper) {
switcherWrapper.addEventListener('click', function() {
const button = this.querySelector('.switcher-button');
const pricesShow = document.querySelectorAll('.price-show');
const pricesHide = document.querySelectorAll('.price-hide');
if (button.style.left === '16px') {
button.style.left = '0px';
pricesShow.forEach(el => el.classList.remove('price-hidden'));
pricesHide.forEach(el => el.classList.add('price-hidden'));
} else {
button.style.left = '16px';
pricesShow.forEach(el => el.classList.add('price-hidden'));
pricesHide.forEach(el => el.classList.remove('price-hidden'));
}
});
}
// Live rates dynamic simulator
function startRateDynamics() {
const goldTryEl = document.getElementById('gold-try');
const usdTryEl = document.getElementById('usd-try');
@@ -475,7 +587,7 @@ data = response.<span class="text-warning">json</span>()
setInterval(() => {
if (goldTryEl) {
const current = parseFloat(goldTryEl.innerText.replace('₺', '').replace('.', '').replace(',', '.'));
const current = parseFloat(goldTryEl.innerText.replace('₺', '').replace(',', '').replace('.', '').replace(',', '.'));
const osc = (Math.random() - 0.48) * 0.75;
const next = current + osc;
goldTryEl.innerText = '₺' + next.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
@@ -505,5 +617,3 @@ data = response.<span class="text-warning">json</span>()
});
</script>
@endpush
@endsection