Implement Product and ProductCategory Resources: Created new Filament resources for managing products and product categories, including pages for listing, creating, and editing. Added schemas for forms and tables, integrated translation support, and established relationships between products and categories. Enhanced the navigation structure to include product and service links in the frontend menu, improving overall site organization and user experience.

This commit is contained in:
Ümit Tunç
2025-12-30 22:16:45 +03:00
parent a5a3248c69
commit a85e6eebe0
33 changed files with 1919 additions and 549 deletions
@@ -24,54 +24,103 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
@foreach($menuItems as $item)
@php
$hasChildren = $item->children->isNotEmpty();
$isMegaMenu = $item->slug === 'urunlerimiz';
@endphp
<li class="nav-item {{ $hasChildren ? 'dropdown' : '' }}">
@if($hasChildren)
<a class="nav-link dropdown-toggle font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]"
href="{{ route('page.show', $item->slug) }}"
data-bs-toggle="dropdown">
{{ $item->translate('title') ?: $item->title }}
</a>
<ul class="dropdown-menu">
@foreach($item->children as $child)
@php
$childHasChildren = $child->children->isNotEmpty();
@endphp
@if($childHasChildren)
<li class="dropdown dropdown-submenu dropend">
<a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle"
href="{{ route('page.show', $child->slug) }}"
data-bs-toggle="dropdown">
{{ $child->translate('title') ?: $child->title }}
</a>
<ul class="dropdown-menu">
@foreach($child->children as $grandChild)
<li class="nav-item">
<a class="dropdown-item hover:!text-[#e31e24]"
href="{{ route('page.show', $grandChild->slug) }}">
{{ $grandChild->translate('title') ?: $grandChild->title }}
</a>
</li>
@endforeach
@if($isMegaMenu)
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="{{ route('page.show', $item->slug) }}" data-bs-toggle="dropdown">{{ $item->translate('title') ?: $item->title }}</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
<h6 class="dropdown-header !text-[#e31e24]">Kategoriler</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Yazılım Çözümleri</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Donanım</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Danışmanlık</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Entegrasyon</a></li>
</ul>
</li>
@else
<li class="nav-item">
<a class="dropdown-item hover:!text-[#e31e24]"
href="{{ route('page.show', $child->slug) }}">
{{ $child->translate('title') ?: $child->title }}
</a>
</li>
@endif
@endforeach
<h6 class="dropdown-header !text-[#e31e24] xl:!mt-6 lg:!mt-6">Sektörler</h6>
<ul class="pl-0 list-none xl:columns-2 lg:columns-2">
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Finans</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Sağlık</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Eğitim</a></li>
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Perakende</a></li>
</ul>
</div>
<!--/column -->
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
<h6 class="dropdown-header !text-[#e31e24]">Öne Çıkan Ürünler</h6>
<ul class="pl-0 list-none xl:columns-3 lg:columns-3">
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>ERP Sistemi</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>CRM Modülü</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Mobil App</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Web Sitesi</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>E-Ticaret</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>SEO Paketi</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Hosting</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Bulut Yedekleme</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='#'>Siber Güvenlik</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
@else
<a class="nav-link font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]"
href="{{ route('page.show', $item->slug) }}">
{{ $item->translate('title') ?: $item->title }}
</a>
@endif
</li>
<!--/.dropdown-menu -->
</li>
@else
<li class="nav-item {{ $hasChildren ? 'dropdown' : '' }}">
@if($hasChildren)
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]"
href="{{ route('page.show', $item->slug) }}"
data-bs-toggle="dropdown">
{{ $item->translate('title') ?: $item->title }}
</a>
<ul class="dropdown-menu">
@foreach($item->children as $child)
@php
$childHasChildren = $child->children->isNotEmpty();
@endphp
@if($childHasChildren)
<li class="dropdown dropdown-submenu dropend">
<a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle"
href="{{ route('page.show', $child->slug) }}"
data-bs-toggle="dropdown">
{{ $child->translate('title') ?: $child->title }}
</a>
<ul class="dropdown-menu">
@foreach($child->children as $grandChild)
<li class="nav-item">
<a class="dropdown-item hover:!text-[#e31e24]"
href="{{ route('page.show', $grandChild->slug) }}">
{{ $grandChild->translate('title') ?: $grandChild->title }}
</a>
</li>
@endforeach
</ul>
</li>
@else
<li class="nav-item">
<a class="dropdown-item hover:!text-[#e31e24]"
href="{{ route('page.show', $child->slug) }}">
{{ $child->translate('title') ?: $child->title }}
</a>
</li>
@endif
@endforeach
</ul>
@else
<a class="nav-link font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]"
href="{{ route('page.show', $item->slug) }}">
{{ $item->translate('title') ?: $item->title }}
</a>
@endif
</li>
@endif
@endforeach
</ul>
@endif
@endif
@@ -0,0 +1,54 @@
<footer class="bg-[rgba(255,255,255)] opacity-100">
<div class="container pt-8 xl:pt-10 lg:pt-10 md:pt-10 pb-7">
<div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-30px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
<div class="widget">
<img class="!mb-4" src="{{ asset('html/assets/img/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji">
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">5000+ mutlu müşteri ile güvenilir teknoloji ortağınız.</p>
</div>
</div>
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] xl:px-0 lg:px-0 !mt-[30px]">
<div class="widget">
<div class="flex flex-row">
<div>
<div class="icon !text-[#e31e24] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
</div>
<div>
<h5 class="!mb-1">Telefon</h5>
<p class="!mb-0">00 (123) 456 78 90 <br>00 (987) 654 32 10</p>
</div>
</div>
</div>
</div>
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
<div class="widget">
<div class="flex flex-row">
<div>
<div class="icon !text-[#e31e24] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
</div>
<div class="!self-start !justify-start">
<h5 class="!mb-1">Adres</h5>
<address class=" not-italic !leading-[inherit] !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
</div>
</div>
</div>
</div>
</div>
<hr class="!mt-13 xl:!mt-[4.5rem] lg:!mt-[4.5rem] md:!mt-[4.5rem] !mb-7">
<div class="xl:!flex lg:!flex md:!flex items-center justify-between">
<p class="!mb-2 xl:!mb-0 lg:!mb-0">© 2025 Trunçgil Teknoloji. Tüm hakları saklıdır.</p>
<nav class="nav social social-muted !mb-0 xl:!text-right lg:!text-right md:!text-right">
<a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
<a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
<a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
<a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
<a class="m-[0_0_0_.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
</nav>
</div>
</div>
</footer>
@@ -0,0 +1,46 @@
<header class="relative wrapper !bg-[#f0f0f8]">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href='{{ url('/') }}'>
<img src="{{ asset('html/assets/img/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
<h3 class="text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">Trunçgil</h3>
<button type="button" class="btn-close btn-close-white mr-[-0.75rem] m-0 p-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<x-custom.menu />
<div class="offcanvas-footer xl:!hidden lg:!hidden">
<div>
<a href="mailto:info@truncgil.com" class="link-inverse">info@truncgil.com</a>
<br> 00 (123) 456 78 90 <br>
<nav class="nav social social-white !mt-4">
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
</nav>
</div>
</div>
</div>
</div>
<div class="navbar-other w-full !flex !ml-auto">
<ul class="navbar-nav !flex-row !items-center !ml-auto">
<li class="nav-item hidden xl:block lg:block md:block">
<a href="#" class="btn btn-sm btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Hemen Teklif Al</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
</div>
</div>
</nav>
</header>
+245
View File
@@ -0,0 +1,245 @@
@extends('layouts.front')
@section('title', 'Anasayfa - Trunçgil Teknoloji')
@section('content')
<section class="wrapper !bg-[#f0f0f8]">
<div class="container pt-10 lg:pt-14 xl:!pt-14 xxl:!pt-10 lg:pb-10 xl:pb-10 xxl:pb-0">
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="900">
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !leading-[1.15] font-semibold !mb-4 xl:!mr-5 xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]">İşinizi Büyütün <br class="hidden md:block xl:!hidden lg:!hidden"><span class="!text-[#e31e24]">Pazarlama Çözümlerimizle</span></h1>
<p class="lead !text-[1.2rem] !leading-[1.5] !mb-7 xxl:!pr-20">Müşterilerimizin web sitesi trafiğini, sıralamasını ve görünürlüğünü artırmalarına yardımcı oluyoruz.</p>
<div class="inline-flex !mr-2"><a href="#" class="btn btn-lg btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Ücretsiz Dene</a></div>
<div class="inline-flex"><a href="#" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">Keşfet</a></div>
</div>
<!--/column -->
<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="{{ asset('html/assets/img/illustrations/3d11.png') }}" data-cue="fadeIn" data-delay="300" alt="image">
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="{{ asset('html/assets/img/photos/clouds.png') }}" alt="image"></figure>
</section>
<!-- /section -->
<section class="wrapper bg-[rgba(255,255,255)] opacity-100">
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] xl:w-10/12 xl:!ml-[8.33333333%] xxl:w-8/12 xxl:!ml-[16.66666667%] flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Ne Yapıyoruz?</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-9">Sunduğumuz tam hizmet, işletmenizin ihtiyaçlarını karşılamak için özel olarak tasarlanmıştır.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] !text-center">
<!-- Hizmet 1 -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<img src="{{ asset('html/assets/img/icons/solid/globe-2.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]" alt="" />
<h4>SEO Hizmetleri</h4>
<p class="!mb-2">Web sitenizin görünürlüğünü artırmak için profesyonel SEO hizmetleri sunuyoruz.</p>
<a href="#" class="more hover !text-[#e31e24]">Daha Fazla</a>
</div>
</div>
<!-- Hizmet 2 -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<img src="{{ asset('html/assets/img/icons/solid/code.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]" alt="" />
<h4>Web Tasarım</h4>
<p class="!mb-2">Modern ve kullanıcı dostu web tasarımları ile markanızı öne çıkarın.</p>
<a href="#" class="more hover !text-[#e31e24]">Daha Fazla</a>
</div>
</div>
<!-- Hizmet 3 -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<img src="{{ asset('html/assets/img/icons/solid/team.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]" alt="" />
<h4>Sosyal Medya</h4>
<p class="!mb-2">Sosyal medya yönetimi ile hedef kitlenizle etkileşimi artırın.</p>
<a href="#" class="more hover !text-[#e31e24]">Daha Fazla</a>
</div>
</div>
<!-- Hizmet 4 -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<img src="{{ asset('html/assets/img/icons/solid/devices.svg') }}" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]" alt="" />
<h4>Uygulama Geliştirme</h4>
<p class="!mb-2">iOS ve Android için özel mobil uygulamalar geliştiriyoruz.</p>
<a href="#" class="more hover !text-[#e31e24]">Daha Fazla</a>
</div>
</div>
</div>
<!-- /.row -->
<!-- Features/Why Choose Us Section -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full px-[7.5px] !mt-[50px]">
<figure class="m-0 p-0"><img class="w-auto" src="{{ asset('html/assets/img/illustrations/3d8.png') }}" alt="image"></figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !ml-auto px-[7.5px] !mt-[50px]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Neden Bizi Seçmelisiniz?</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-8">Değerli müşterilerimizin bizi tercih etmesinin birkaç nedeni.</h3>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
<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="flex flex-row">
<div>
<img src="{{ asset('html/assets/img/icons/solid/lamp.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4" alt="" />
</div>
<div>
<h4 class="!mb-1">Yaratıcılık</h4>
<p class="!mb-0">Özgün ve yaratıcı çözümler.</p>
</div>
</div>
</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="flex flex-row">
<div>
<img src="{{ asset('html/assets/img/icons/solid/bulb.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4" alt="" />
</div>
<div>
<h4 class="!mb-1">Yenilikçi Düşünce</h4>
<p class="!mb-0">Geleceği şekillendiren fikirler.</p>
</div>
</div>
</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="flex flex-row">
<div>
<img src="{{ asset('html/assets/img/icons/solid/puzzle.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4" alt="" />
</div>
<div>
<h4 class="!mb-1">Hızlı Çözümler</h4>
<p class="!mb-0">Zamanında teslimat ve hızlı destek.</p>
</div>
</div>
</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="flex flex-row">
<div>
<img src="{{ asset('html/assets/img/icons/solid/headphone.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4" alt="" />
</div>
<div>
<h4 class="!mb-1">Üstün Destek</h4>
<p class="!mb-0">7/24 müşteri memnuniyeti odaklı destek.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Solutions & Pricing Section (NEW) -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mx-auto xl:!order-2 lg:!order-2 px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
<figure class="m-0 p-0"><img class="w-auto" src="{{ asset('html/assets/img/illustrations/3d5.png') }}" alt="image"></figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mr-auto px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem] !mb-3">Çözümlerimiz</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-5 xxl:!pr-5">Siz arkanıza yaslanın, ihtiyaçlarınızı biz halledelim.</h3>
<p class="!mb-6">Yaratıcı ve yenilikçi çözümlerimizle işletmenizi dijital dünyada öne çıkarıyoruz. Sektördeki deneyimimiz ve uzman ekibimizle, hedeflerinize ulaşmanız için yanınızdayız.</p>
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px]">
<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]">
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1">99.7%</h3>
<h6 class="!text-[0.85rem] !mb-1">Müşteri Memnuniyeti</h6>
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
</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]">
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1">4x</h3>
<h6 class="!text-[0.85rem] !mb-1">Yeni Ziyaretçi</h6>
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem] xl:!mt-[8rem] lg:!mt-[8rem]">Fiyatlandırma</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">Harika ve premium fiyatlar sunuyoruz.</h3>
<p>30 günlük <a href="#" class="hover !text-[#e31e24]">ücretsiz deneme</a> ile tam hizmeti deneyimleyin. Kredi kartı gerekmez!</p>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mt-2">Tüm Fiyatları Gör</a>
</div>
<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 mx-[-15px] !mt-[25px] !relative">
<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)] !border-[#cfceea] after:border-b-[calc(0.4rem_-_6px)] after:border-t-[6px] after:content-[''] after:absolute after:rounded-t-[0.4rem] after:border-t-inherit after:border-b-transparent after:top-0 after:inset-x-0">
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency"></span><span class="price-value">499</span> <span class="price-duration">ay</span></div>
</div>
<h4 class="card-title !mt-2">Premium Paket</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-[1.25rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Proje </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Erişimi </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Depolama </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Haftalık <strong>Raporlar</strong></span></li>
</ul>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !text-[.85rem] !rounded-[.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Seç</a>
</div>
</div>
</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 popular !mt-[30px]">
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !border-[#cfceea] after:border-b-[calc(0.4rem_-_6px)] after:border-t-[6px] after:content-[''] after:absolute after:rounded-t-[0.4rem] after:border-t-inherit after:border-b-transparent after:top-0 after:inset-x-0">
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency"></span><span class="price-value">1499</span> <span class="price-duration">ay</span></div>
</div>
<h4 class="card-title !mt-2">Kurumsal Paket</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Proje </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Erişimi </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Depolama </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Destek</strong></span></li>
</ul>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !text-[.85rem] !rounded-[.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Seç</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full">
<figure class="m-0 p-0"><img class="w-auto" src="{{ asset('html/assets/img/illustrations/3d3.png') }}" alt="image"></figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full !ml-auto">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Tanışalım</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">Birlikte harika işler başaralım. 5000+ müşterimiz bize güveniyor.</h3>
<p>Projelerinizi hayata geçirmek, dijital dönüşümünüze katkıda bulunmak ve işinizi büyütmek için buradayız. Hemen bizimle iletişime geçin.</p>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mt-2">Bize Katılın</a>
</div>
</div>
</div>
</section>
<section class="wrapper !bg-[#f0f0f8]">
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
<div class="flex flex-wrap mx-[-15px] !mb-8">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Şimdi Analiz Edin</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-0">Web sitenizin ne kadar hızlı olabileceğini merak ediyor musunuz? SEO Skorunuzu hemen kontrol edin.</h3>
</div>
</div>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<form action="#">
<div class="form-floating input-group relative">
<input type="url" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="analyze">
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="analyze">Web Sitesi URL Girin</label>
<button class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)] hover:!translate-none" type="button">Analiz Et</button>
</div>
</form>
</div>
</div>
</div>
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="{{ asset('html/assets/img/photos/clouds.png') }}" alt="image"></figure>
</section>
@endsection
@@ -0,0 +1,41 @@
@extends('layouts.front')
@section('title', $product->title ?? 'Ürün Detayı')
@section('meta_description', Str::limit(strip_tags($product->content), 160))
@section('content')
<section class="wrapper !bg-[#ffffff]">
<div class="container py-14 xl:py-16 lg:py-16 md:py-16">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] px-[15px] max-w-full !mx-auto">
<div class="post-header !mb-[.9rem]">
<div class="post-category text-line text-[#aab0bc] !mb-3">
<span class="hover:!text-[#3f78e0]">{{ $product->type == 'product' ? 'Ürün' : 'Hizmet' }}</span>
@if($product->category)
/ <span class="hover:!text-[#3f78e0]">{{ $product->category->title }}</span>
@endif
</div>
<!-- /.post-category -->
<h1 class="!text-[2.5rem] !leading-[1.2] !mb-4">{{ $product->title }}</h1>
</div>
<!-- /.post-header -->
@if($product->hero_image)
<figure class="!mb-[2rem] !rounded-[.4rem]">
<img class="!rounded-[.4rem] w-full" src="{{ Storage::url($product->hero_image) }}" alt="{{ $product->title }}">
</figure>
@endif
<div class="post-content">
{!! $product->content !!}
</div>
<!-- /.post-content -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
@endsection
+52
View File
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="@yield('meta_description', 'Trunçgil Teknoloji')">
<meta name="author" content="Trunçgil Teknoloji">
<title>@yield('title', 'Trunçgil Teknoloji')</title>
<link rel="shortcut icon" href="{{ asset('html/assets/img/favicon.png') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('html/assets/fonts/unicons/unicons.css') }}">
<link rel="stylesheet" href="{{ asset('html/assets/css/plugins.css') }}">
<link rel="stylesheet" href="{{ asset('html/style.css') }}">
<link rel="stylesheet" href="{{ asset('html/assets/css/colors/grape.css') }}">
<link rel="preload" href="{{ asset('html/assets/css/fonts/urbanist.css') }}" as="style" onload="this.rel='stylesheet'">
@stack('styles')
<style>
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
background: #e31e24 !important;
border-color: #e31e24 !important;
color: #ffffff !important;
}
@media (max-width: 991.98px){
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
color: #ffffff !important;
}
}
</style>
</head>
<body>
<div class="grow shrink-0">
<x-front.header />
@yield('content')
</div>
<!-- /.content-wrapper -->
<x-front.footer />
<!-- progress wrapper -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="{{ asset('html/assets/js/plugins.js') }}"></script>
<script src="{{ asset('html/assets/js/theme.js') }}"></script>
@stack('scripts')
</body>
</html>
+20 -205
View File
@@ -13,218 +13,33 @@
</div>
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
<ul class="navbar-nav">
@php
$productCategories = \App\Models\ProductCategory::with(['products' => fn($q) => $q->where('is_active', true)->orderBy('sort_order')])
->where('is_active', true)
->orderBy('sort_order')
->get();
@endphp
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Ürün ve Hizmetler</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content mega-menu-scroll">
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
<ul class="grid grid-cols-1 xl:grid-cols-5 lg:grid-cols-5 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
@foreach($productCategories as $category)
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo1.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi1.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 1</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo2.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi2.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 2</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo3.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi3.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 3</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo4.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi4.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 4</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo5.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi5.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 5</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo6.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi6.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 6</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo7.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi7.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 7</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo8.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi8.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 8</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo9.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi9.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 9</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo10.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi10.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 10</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo11.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi11.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 11</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo12.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi12.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 12</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo13.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi13.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 13</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo14.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi14.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 14</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo15.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi15.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 15</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo16.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi16.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 16</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo17.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi17.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 17</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo18.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi18.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 18</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo19.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi19.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 19</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo20.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi20.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 20</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo21.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi21.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 21</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo22.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi22.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 22</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo23.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi23.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 23</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo24.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi24.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 24</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo25.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi25.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 25</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo26.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi26.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 26</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo27.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi27.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 27</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo28.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi28.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 28</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo29.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi29.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 29</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo30.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi30.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 30</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo31.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi31.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 31</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo32.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi32.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 32</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo33.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi33.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 33</span>
</a>
</li>
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
<a class='dropdown-item' href='demo34.html'>
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="assets/img/demos/mi34.jpg" alt="image"></figure>
<span class="xl:!hidden lg:!hidden">Demo 34</span>
</a>
<h6 class="dropdown-header !text-white !mb-2">{{ $category->title }}</h6>
<ul class="list-none pl-0">
@foreach($category->products as $product)
<li>
<a class="dropdown-item !text-[#cacaca] hover:!text-white" href="{{ route('products.show', $product->slug) }}">
{{ $product->title }}
</a>
</li>
@endforeach
</ul>
</li>
@endforeach
</ul>
<!--/.row -->
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
+349 -49
View File
@@ -1,53 +1,353 @@
@extends('layouts.site')
@section('title', 'Anasayfa')
@section('content')
@php
// Yeni dinamik template sistemi - Öncelik verilir
$hasTemplatedSections = isset($templatedSections) && $templatedSections->isNotEmpty();
// Eski section builder sistemi
$blocks = $sections ?? [];
$hasBlocks = is_array($blocks) && count($blocks) > 0;
@endphp
@if($hasTemplatedSections)
{{-- Yeni dinamik template sisteminden gelen sections --}}
@foreach($templatedSections as $section)
@if($section['template'] ?? null)
{!! \App\Services\TemplateService::replacePlaceholders(
$section['template']->html_content,
$section['data'] ?? [],
$page ?? null
) !!}
@endif
@endforeach
@elseif($hasBlocks)
{{-- Eski blok bazlı dinamik render --}}
@foreach($blocks as $block)
@php $type = $block['type'] ?? null; @endphp
@if($type && view()->exists("components.blocks.$type"))
<x-dynamic-component :component="'blocks.'.$type" :data="$block['data'] ?? $block" />
@endif
@endforeach
@else
{{-- Statik fallback: public/html/index.html içeriğinin <body> bölümü --}}
@php
$indexPath = public_path('html/index.html');
$bodyHtml = '';
if (file_exists($indexPath) && is_readable($indexPath)) {
$html = file_get_contents($indexPath);
// Body içeriğini çıkar
if (preg_match('/<body[^>]*>(.*?)<\/body>/is', $html, $m)) {
$bodyHtml = $m[1];
}
}
// Eğer body boşsa placeholder göster
if (empty(trim($bodyHtml))) {
$bodyHtml = '<div class="container py-20"><h1>Admin panelinden anasayfa içeriği ekleyin veya index.html kontrol edin.</h1></div>';
}
@endphp
{!! $bodyHtml !!}
@endif
<section class="wrapper !bg-[#f0f0f8]">
<div class="container pt-10 lg:pt-14 xl:!pt-14 xxl:!pt-10 lg:pb-10 xl:pb-10 xxl:pb-0">
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="900" data-disabled="true">
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !leading-[1.15] font-semibold !mb-4 xl:!mr-5 xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 900ms; animation-direction: normal; animation-fill-mode: both;">Grow Your Business with <br class="hidden md:block xl:!hidden lg:!hidden"><span class="!text-[#e31e24] ">Our Marketing Solutions</span></h1>
<p class="lead !text-[1.2rem] !leading-[1.5] !mb-7 xxl:!pr-20" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1200ms; animation-direction: normal; animation-fill-mode: both;">We help our clients to increase their website <br class="hidden md:block xl:!hidden lg:!hidden"> traffic, rankings and visibility in search results.</p>
<div class="inline-flex !mr-2" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1500ms; animation-direction: normal; animation-fill-mode: both;"><a href="#" class="btn btn-lg btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Try it for Free</a></div>
<div class="inline-flex" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1800ms; animation-direction: normal; animation-fill-mode: both;"><a href="#" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">Explore Now</a></div>
</div>
<!--/column -->
<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="assets/img/illustrations/3d11.png" data-cue="fadeIn" data-delay="300" alt="image" data-show="true" style="animation-name: fadeIn; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/clouds.png" alt="image"></figure>
</section>
<section class="wrapper bg-[rgba(255,255,255)] opacity-100">
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] xl:w-10/12 xl:!ml-[8.33333333%] xxl:w-8/12 xxl:!ml-[16.66666667%] flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35 !tracking-[0.02rem]">What We Do?</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-9">The full service we are offering is specifically designed to meet your business needs.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] !text-center">
<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="md:!px-3 lg:!px-0 xl:!px-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.01 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/globe-2.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><path class="fill-secondary" d="M128.11 256h-.24a126.37 126.37 0 01-22-1.84 8 8 0 112.72-15.76A114.68 114.68 0 00128 240a8.06 8.06 0 018.07 8 8 8 0 01-7.94 8zm33.52-12.5a8 8 0 014.77-10.25 112.18 112.18 0 0017.66-8.25 8 8 0 018 13.85 128.36 128.36 0 01-20.19 9.46 8 8 0 01-10.26-4.79zm-97.5-4.56a128.83 128.83 0 01-18.27-12.78 8 8 0 1110.25-12.27 114.33 114.33 0 0016 11.2 8 8 0 11-8 13.85zm150.69-27.71a8 8 0 01-1-11.26A112.91 112.91 0 00225 184a8 8 0 0113.86 8 130.3 130.3 0 01-12.78 18.26 8 8 0 01-11.28 1zm-197.59-19A128.41 128.41 0 017.76 172a8 8 0 1115-5.49 112.8 112.8 0 008.29 17.67 8 8 0 11-13.84 8zM244.8 156.7a8 8 0 01-6.5-9.26A112.3 112.3 0 00240 128a8.23 8.23 0 018-8.26 7.81 7.81 0 018 8.76 124.89 124.89 0 01-1.92 21.72 8 8 0 01-9.26 6.48zM8 136.13a7.89 7.89 0 01-8-7.87s.61-15 1.86-22.18a8 8 0 1115.76 2.7A114.47 114.47 0 0016 128a8.09 8.09 0 01-8 8.13zm225.1-46.88a110.41 110.41 0 00-8.32-17.63 8 8 0 0113.83-8.08 129 129 0 019.52 20.17 8 8 0 01-15 5.54zM19.9 75.18A8 8 0 0117 64.26 126.41 126.41 0 0129.73 46 8 8 0 1142 56.21a112.72 112.72 0 00-11.17 16 8 8 0 01-10.93 3zm179.76-33.24a113.17 113.17 0 00-16-11.16 8 8 0 117.95-13.87 127.39 127.39 0 0118.3 12.75 8 8 0 01-10.24 12.28zM60.78 28.26a8 8 0 012.88-11 128 128 0 0120.18-9.44 8 8 0 115.52 15 112.17 112.17 0 00-17.63 8.31 8 8 0 01-11-2.88zm86.29-10.64A112.4 112.4 0 00128 16a8.17 8.17 0 01-8.19-8 7.84 7.84 0 017.81-8h.38a127.72 127.72 0 0121.8 1.86 8 8 0 01-2.71 15.76z"></path><path class="fill-primary" d="M128 32a96 96 0 1096 96 96.11 96.11 0 00-96-96zm62.61 145.66a103 103 0 00-14.49-7.76 160.22 160.22 0 005-33.9h26.48a79.47 79.47 0 01-17.01 41.66zM48.4 136h26.48a161.6 161.6 0 005 33.9 104.11 104.11 0 00-14.5 7.76A79.47 79.47 0 0148.4 136zm17-57.66a103.14 103.14 0 0014.5 7.76 160.2 160.2 0 00-5 33.9H48.4a79.47 79.47 0 0117-41.66zM120 79.7a106.49 106.49 0 01-20-3.43c5.41-13 12.6-22.11 20-26zm0 16V120H90.86A145.12 145.12 0 0195 91.49a122.72 122.72 0 0025 4.21zm0 40.3v24.3a121.26 121.26 0 00-25 4.23A144.37 144.37 0 0190.86 136H120zm0 40.3v29.48c-7.4-3.94-14.59-13-20-26a104.12 104.12 0 0120-3.44zm16 0a106.21 106.21 0 0120 3.43c-5.4 13-12.59 22.11-20 26zm0-16V136h29.1a144.37 144.37 0 01-4.16 28.51 122.49 122.49 0 00-25-4.21zm0-40.3V95.7a121.14 121.14 0 0025-4.23 142.91 142.91 0 014.1 28.53H136zm0-40.3V50.24c7.41 3.94 14.6 13 20 26a104.36 104.36 0 01-20 3.46zm27.94-23.08a80.19 80.19 0 0115.25 10 88.15 88.15 0 01-8.19 4.21 98.1 98.1 0 00-7.12-14.21zm-79 14.21a86.72 86.72 0 01-8.12-4.25 80.12 80.12 0 0115.24-10 95.14 95.14 0 00-7.12 14.25zm0 114.34a98.11 98.11 0 007.12 14.21 80.12 80.12 0 01-15.24-10 86.72 86.72 0 018.12-4.21zm86.1 0a88.15 88.15 0 018.13 4.25 80.19 80.19 0 01-15.25 10 99.14 99.14 0 007.08-14.25zM181.1 120a161 161 0 00-5-33.9 104.57 104.57 0 0014.49-7.76 79.47 79.47 0 0117 41.66z"></path></svg>
<h4>SEO Services</h4>
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida eget metus cras justo.</p>
<a href="#" class="more hover !text-[#e31e24]">Learn More</a>
</div>
</div>
<!--/column -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 213.34" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/code.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><path class="fill-secondary" d="M104 213.34a11 11 0 01-2.59-.32 10.64 10.64 0 01-7.76-12.93l48-192a10.66 10.66 0 0120.68 5.17l-48 192a10.66 10.66 0 01-10.33 8.08z"></path><path class="fill-primary" d="M74.66 181.34a10.57 10.57 0 01-7.54-3.12l-64-64a10.67 10.67 0 010-15.08l64-64a10.67 10.67 0 0115.09 15.08l-56.46 56.47 56.46 56.46a10.65 10.65 0 01-7.55 18.19zm106.65 0a10.55 10.55 0 01-7.53-3.12 10.67 10.67 0 010-15.08l56.46-56.47-56.46-56.46a10.67 10.67 0 1115.08-15.09l64 64a10.68 10.68 0 010 15.09l-64 64a10.58 10.58 0 01-7.55 3.13z"></path></svg>
<h4>Web Design</h4>
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida eget metus cras justo.</p>
<a href="#" class="more hover !text-[#e31e24]">Learn More</a>
</div>
</div>
<!--/column -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/team.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><circle class="fill-primary" cx="128" cy="26.67" r="26.67"></circle><circle class="fill-primary" cx="202.67" cy="176" r="26.67"></circle><circle class="fill-primary" cx="53.33" cy="176" r="26.67"></circle><path class="fill-primary" d="M173.33 106.67H82.66a8 8 0 01-8-8v-5.33A29.35 29.35 0 01104 64h48a29.35 29.35 0 0129.33 29.32v5.33a8 8 0 01-8 8.02zM248 256h-90.67a8 8 0 01-8-8v-5.33a29.36 29.36 0 0129.33-29.33h48A29.36 29.36 0 01256 242.67V248a8 8 0 01-8 8zm-149.33 0H8a8 8 0 01-8-8v-5.33a29.36 29.36 0 0129.33-29.33h48a29.37 29.37 0 0129.33 29.33V248a8 8 0 01-8 8z"></path><path class="fill-secondary" d="M29.33 136.13a8 8 0 01-8-8 107.1 107.1 0 0161.73-96.77 8 8 0 116.73 14.51 91 91 0 00-52.48 82.26 8 8 0 01-7.98 8zm197.34 0a8 8 0 01-8-8 91 91 0 00-52.48-82.26 8 8 0 116.74-14.51 107.09 107.09 0 0161.73 96.77 8 8 0 01-8 8zM128 234.8a105.08 105.08 0 01-11.15-.58 8 8 0 011.66-15.9 93.73 93.73 0 0019.6-.06 8 8 0 011.76 15.9 110.68 110.68 0 01-11.87.64z"></path></svg>
<h4>Social Engagement</h4>
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida eget metus cras justo.</p>
<a href="#" class="more hover !text-[#e31e24]">Learn More</a>
</div>
</div>
<!--/column -->
<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="md:!px-3 lg:!px-0 xl:!px-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/devices.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] solid-mono text-[#e31e24] text-grape !mb-5 m-[0_auto]"><path class="fill-primary" d="M226.67 0H80a29.35 29.35 0 00-29.33 29.33v13.33H72v-8a13.34 13.34 0 0113.33-13.33h136a13.34 13.34 0 0113.33 13.33v186.67a13.35 13.35 0 01-13.33 13.33h-82.74A44.07 44.07 0 01132.7 256h94a29.33 29.33 0 0029.3-29.33V29.33A29.35 29.35 0 00226.67 0z"></path><path class="fill-secondary" d="M97.17 64h-77C9 64 0 73.87 0 86v148c0 12.13 9 22 20.16 22h77c11.12 0 20.16-9.87 20.16-22V86c.01-12.13-9.03-22-20.15-22zm5.5 168c0 4.42-3.28 8-7.33 8H22c-4.05 0-7.33-3.58-7.33-8V85.33c0-4.42 3.28-8 7.33-8h3.66c4.05 0 7.33 3.58 7.33 8s3.28 8 7.33 8H77c4.05 0 7.33-3.59 7.33-8s3.28-8 7.33-8h3.66c4 0 7.33 3.58 7.33 8V232z"></path><path class="fill-primary" d="M154.67 186.67A13.33 13.33 0 10168 200a13.35 13.35 0 00-13.33-13.33z"></path></svg>
<h4>App Development</h4>
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida eget metus cras justo.</p>
<a href="#" class="more hover !text-[#e31e24]">Learn More</a>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full px-[7.5px] !mt-[50px]">
<figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d8.png" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !ml-auto px-[7.5px] !mt-[50px]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35 !tracking-[0.02rem]">Why Choose Us?</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-8">So here a few reasons why our valued customers choose us.</h3>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
<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="flex flex-row">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/lamp.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4"><path class="fill-secondary" d="M128 36.86a8 8 0 01-8-8V8a8 8 0 0116 0v20.86a8 8 0 01-8 8zm70.1 29.04a8 8 0 01-5.67-13.64l14.77-14.77a8 8 0 1111.31 11.31l-14.77 14.77a8 8 0 01-5.64 2.33zM248 136h-20.86a8 8 0 010-16H248a8 8 0 010 16zm-35.15 84.85a8.06 8.06 0 01-5.67-2.34l-14.76-14.77a8 8 0 0111.31-11.31l14.77 14.77a8 8 0 010 11.31 7.92 7.92 0 01-5.65 2.34zm-169.7 0a8 8 0 01-5.66-13.65l14.77-14.77a8 8 0 0111.31 11.31L48.8 218.51a7.93 7.93 0 01-5.65 2.34zM28.86 136H8a8 8 0 010-16h20.86a8 8 0 110 16zM57.9 65.9a8 8 0 01-5.66-2.33L37.47 48.8a8 8 0 1111.31-11.31l14.77 14.77A8 8 0 0157.9 65.9z"></path><path class="fill-primary" d="M160 224v13.33A18.76 18.76 0 01141.33 256h-26.67c-9 0-18.66-6.83-18.66-21.76V224zm15-154a74.93 74.93 0 00-63-15c-28.27 5.91-51.2 29-57.07 57.21a74.74 74.74 0 0028.16 75.41A32.19 32.19 0 0195.25 208v.12A2 2 0 0196 208h64a.93.93 0 01.53.11V208c1.49-8.11 6.29-15.57 13.65-21.33A74.72 74.72 0 00175 70zm-7 63.36a8.06 8.06 0 01-8-8A29.32 29.32 0 00130.67 96a8 8 0 110-16A45.43 45.43 0 01176 125.33a8.06 8.06 0 01-8 8z"></path><path class="fill-secondary" d="M95.25 208H96a1.8 1.8 0 00-.75.11z"></path><path class="fill-primary" d="M160.53 208v.11a.93.93 0 00-.53-.11z"></path></svg>
</div>
<div>
<h4 class="!mb-1">Creativity</h4>
<p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<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="flex flex-row">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 255.98" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/bulb.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4"><circle class="fill-primary" cx="58.67" cy="149.31" r="32"></circle><path class="fill-primary" d="M88 202.65H29.33A29.36 29.36 0 000 232v16a8 8 0 008 8h101.33a8 8 0 008-8v-16A29.36 29.36 0 0088 202.65z"></path><circle class="fill-primary" cx="197.33" cy="149.31" r="32"></circle><path class="fill-primary" d="M226.67 202.65H168A29.36 29.36 0 00138.67 232v16a8 8 0 008 8H248a8 8 0 008-8v-16a29.36 29.36 0 00-29.33-29.35z"></path><path class="fill-secondary" d="M149.76 108.48v7.68A11.9 11.9 0 01137.81 128h-19.63c-5.76 0-12-4.27-12-13.76v-5.76zM176 47.68a47.26 47.26 0 01-17.6 36.91 22.89 22.89 0 00-8.32 13.23H106a20 20 0 00-7.79-12.69A47.13 47.13 0 0180 46.73C80.53 21.34 101.76.33 127.25 0a47.34 47.34 0 0134.56 13.88A46.82 46.82 0 01176 47.68z"></path></svg>
</div>
<div>
<h4 class="!mb-1">Innovative Thinking</h4>
<p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<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="flex flex-row">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.97 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/puzzle.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4"><path class="fill-secondary" d="M221.86 91a33.65 33.65 0 01-22.72-8.75v40.21h-27.2a43.26 43.26 0 003.73-17.71 44.8 44.8 0 10-86 17.71H56.85v-111A11.42 11.42 0 0168.26 0h119.47a11.42 11.42 0 0111.41 11.41v20.05A34.1 34.1 0 11221.86 91z"></path><path class="fill-primary" d="M142.79 181.25a34.13 34.13 0 0033.55 40.62 33.66 33.66 0 0022.75-8.77v31.52A11.41 11.41 0 01187.72 256H68.28a11.41 11.41 0 01-11.38-11.38V213.1a34.12 34.12 0 11-22.75-59.5 33.71 33.71 0 0122.75 8.77v-29.2H112a34.12 34.12 0 1137.76 0h49.37v29.2a34.09 34.09 0 00-56.3 18.88z"></path></svg>
</div>
<div>
<h4 class="!mb-1">Rapid Solutions</h4>
<p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<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="flex flex-row">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 244.09" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/headphone.svg" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-mono text-[#e31e24] text-grape !mr-4"><path class="fill-secondary" d="M35.72 92.28a92.28 92.28 0 01184.56 0v47.63a8.93 8.93 0 01-17.86 0V92.28a74.42 74.42 0 10-148.84 0v47.63a8.93 8.93 0 11-17.86 0zm175.63 62.51a8.93 8.93 0 018.93 8.93v35.72a32.75 32.75 0 01-32.75 32.75h-35.72a8.94 8.94 0 010-17.87h35.72a14.88 14.88 0 0014.89-14.88v-35.72a8.93 8.93 0 018.93-8.93z"></path><path class="fill-secondary" d="M107.16 223.26A20.84 20.84 0 01128 202.42h11.91a20.84 20.84 0 010 41.67H128a20.84 20.84 0 01-20.84-20.83zm20.84-3a3 3 0 100 5.95h11.91a3 3 0 000-5.95z"></path><path class="fill-primary" d="M32.74 107.16A32.74 32.74 0 000 139.91v23.81a32.75 32.75 0 0032.74 32.75h11.91a8.93 8.93 0 008.93-8.94v-71.44a8.93 8.93 0 00-8.93-8.93zm190.52 0A32.74 32.74 0 01256 139.91v23.81a32.75 32.75 0 01-32.74 32.75h-11.91a8.93 8.93 0 01-8.93-8.94v-71.44a8.93 8.93 0 018.93-8.93z"></path></svg>
</div>
<div>
<h4 class="!mb-1">Top-Notch Support</h4>
<p class="!mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mx-auto xl:!order-2 lg:!order-2 px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
<figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d5.png" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mr-auto px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35 !tracking-[0.02rem] !mb-3">Our Solutions</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-5 xxl:!pr-5">Just sit &amp; relax while we take care of your business needs.</h3>
<p class="!mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna.</p>
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px]">
<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]">
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1" style="visibility: visible;">99.7%</h3>
<h6 class="!text-[0.85rem] !mb-1">Customer Satisfaction</h6>
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
</div>
<!--/column -->
<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]">
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none xl:!text-[2.2rem] !mb-1" style="visibility: visible;">4x</h3>
<h6 class="!text-[0.85rem] !mb-1">New Visitors</h6>
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="card !bg-[#f0f0f8] !rounded-[0.8rem] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
<div class="card-body py-[4.5rem] xl:!px-0 lg:!px-0 px-[40px]">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Happy Customers</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-10 xxl:!px-10">Don't take our word for it. See what customers are saying about us.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
<div class="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
<div class="img-mask mask-3"><img src="assets/img/photos/about28.jpg" alt="image"></div>
</div>
<!--/column -->
<div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
<div class="swiper-container dots-start dots-closer !mb-6 relative z-10 swiper-container-0" data-margin="30" data-dots="true">
<div class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
<div class="swiper-wrapper" style="cursor: grab; transform: translate3d(0px, 0px, 0px);" id="swiper-wrapper-be8eb8710216613c3" aria-live="off">
<div class="swiper-slide swiper-slide-active" style="width: 497px; margin-right: 30px;" role="group" aria-label="1 / 3">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="pl-0 text-[1.05rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide swiper-slide-next" style="width: 497px; margin-right: 30px;" role="group" aria-label="2 / 3">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="pl-0 text-[1.05rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide" role="group" aria-label="3 / 3" style="width: 497px; margin-right: 30px;">
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
<blockquote class="pl-0 text-[1.05rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur nulla dapibus curabitur blandit faucibus.</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
<!-- /.swiper -->
<div class="swiper-controls"><div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div></div></div>
<!-- /.swiper-container -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem] xl:!mt-[8rem] lg:!mt-[8rem]">Our Pricing</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">We offer great and premium prices.</h3>
<p>Enjoy a <a href="#" class="hover !text-[#e31e24]">free 30-day trial</a> and experience the full service. No credit card required!</p>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mt-2">See All Prices</a>
</div>
<!--/column -->
<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]">Monthly</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-[#e31e24] opacity-100 switcher-button"></div>
</div>
<p class="!mb-0 !pl-3 !relative">Yearly <span class="!text-[#e2626b]">(Save 30%)</span></p>
</div>
<div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
<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)] !border-[#cfceea] after:border-b-[calc(0.4rem_-_6px)] after:border-t-[6px] after:content-[''] after:absolute after:rounded-t-[0.4rem] after:border-t-inherit after:border-b-transparent after:top-0 after:inset-x-0">
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<h4 class="card-title !mt-2">Premium Plan</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-[1.25rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Projects </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Storage </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !text-[.85rem] !rounded-[.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
<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)] !border-[#cfceea] after:border-b-[calc(0.4rem_-_6px)] after:border-t-[6px] after:content-[''] after:absolute after:rounded-t-[0.4rem] after:border-t-inherit after:border-b-transparent after:top-0 after:inset-x-0">
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
<div class="prices !text-[#343f52]">
<div class="price price-show !justify-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
<div class="price price-hide price-hidden !justify-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
</div>
<!--/.prices -->
<h4 class="card-title !mt-2">Corporate Plan</h4>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Projects </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Access </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Storage </span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 text-[1.05rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
</ul>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !text-[.85rem] !rounded-[.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose Plan</a>
</div>
<!--/.card-body -->
</div>
<!--/.pricing -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full">
<figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d3.png" alt="image"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full !ml-auto">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Lets Talk</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">Let's make something great together. We are trusted by over 5000+ clients.</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mt-2">Join Us</a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<section class="wrapper !bg-[#f0f0f8]">
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
<div class="flex flex-wrap mx-[-15px] !mb-8">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">Analyze Now</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-0">Wonder how much faster your website can go? Easily check your SEO Score now.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<form action="#">
<div class="form-floating input-group relative">
<input type="url" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="analyze">
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="analyze">Enter Website URL</label>
<button class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)] hover:!translate-none" type="button">Analyze</button>
</div>
</form>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="assets/img/photos/clouds.png" alt="image"></figure>
</section>
@endsection