From 1fa194260e880a99dfb28a0aa0914b670be72aa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Wed, 31 Dec 2025 23:35:42 +0300
Subject: [PATCH] Refactor Localization in Templates: Updated various templates
 to utilize the translation function for titles and content, enhancing
 localization support. Commented out unused fallback logic in the
 PageController for header templates, streamlining the rendering process.
 Added new header and navbar components while removing the deprecated navbar
 file, improving the overall structure and maintainability of the layout.

---
 app/Http/Controllers/PageController.php       |   3 +-
 app/Traits/HasTranslations.php                |  16 +-
 .../views/components/custom/menu.blade.php    |  12 +-
 resources/views/front/products/show.blade.php |  12 +-
 resources/views/layouts/site.blade.php        |   2 +-
 resources/views/partials/header.blade.php     | 538 ++++++++++++++++++
 resources/views/partials/header2.blade.php    |  25 +
 resources/views/partials/navbar.blade.php     | 352 ------------
 resources/views/templates/home.blade.php      | 185 +++++-
 resources/views/templates/iletisim.blade.php  |   6 +-
 10 files changed, 779 insertions(+), 372 deletions(-)
 create mode 100644 resources/views/partials/header.blade.php
 create mode 100644 resources/views/partials/header2.blade.php
 delete mode 100644 resources/views/partials/navbar.blade.php

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
index 79106c8..5a4acd7 100644
--- a/app/Http/Controllers/PageController.php
+++ b/app/Http/Controllers/PageController.php
@@ -43,10 +43,11 @@ class PageController extends Controller
 
                 // Header Render
                 $headerTemplate = $page->headerTemplate;
+                /*
                 if (!$headerTemplate) {
                     $headerTemplate = HeaderTemplate::where('is_active', true)->latest('updated_at')->first();
                 }
-                
+                */
                 if ($headerTemplate) {
                     $templateDefaults = $headerTemplate->default_data ?? [];
                     $pageData = $page->header_data ?? [];
diff --git a/app/Traits/HasTranslations.php b/app/Traits/HasTranslations.php
index 0c97b24..4a112b6 100644
--- a/app/Traits/HasTranslations.php
+++ b/app/Traits/HasTranslations.php
@@ -57,7 +57,21 @@ trait HasTranslations
         }
 
         // Fallback to original field value
-        return $this->{$fieldName} ?? null;
+        $originalValue = $this->{$fieldName} ?? null;
+
+        // If the original value is an array (e.g. JSON cast), try to find translation inside it
+        if (is_array($originalValue)) {
+            if (isset($originalValue[$languageCode])) {
+                return $originalValue[$languageCode];
+            }
+            if ($fallback && isset($originalValue[$this->getDefaultLanguageCode()])) {
+                return $originalValue[$this->getDefaultLanguageCode()];
+            }
+            // Return first value if available, or empty string
+            return reset($originalValue) ?: '';
+        }
+
+        return $originalValue;
     }
 
     /**
diff --git a/resources/views/components/custom/menu.blade.php b/resources/views/components/custom/menu.blade.php
index bce39d5..17e213d 100644
--- a/resources/views/components/custom/menu.blade.php
+++ b/resources/views/components/custom/menu.blade.php
@@ -29,7 +29,7 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
 
             @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>
+                    <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') }}</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]">
@@ -78,7 +78,7 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
                         <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 }}
+                            {{ $item->translate('title') }}
                         </a>
                         <ul class="dropdown-menu">
                             @foreach($item->children as $child)
@@ -90,14 +90,14 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
                                         <a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" 
                                            href="{{ route('page.show', $child->slug) }}" 
                                            data-bs-toggle="dropdown">
-                                            {{ $child->translate('title') ?: $child->title }}
+                                            {{ $child->translate('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 }}
+                                                        {{ $grandChild->translate('title') }}
                                                     </a>
                                                 </li>
                                             @endforeach
@@ -107,7 +107,7 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
                                     <li class="nav-item">
                                         <a class="dropdown-item hover:!text-[#e31e24]" 
                                            href="{{ route('page.show', $child->slug) }}">
-                                            {{ $child->translate('title') ?: $child->title }}
+                                            {{ $child->translate('title') }}
                                         </a>
                                     </li>
                                 @endif
@@ -116,7 +116,7 @@ $menuItems = \App\Models\Page::with(['children' => function ($query) {
                     @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 }}
+                            {{ $item->translate('title') }}
                         </a>
                     @endif
                 </li>
diff --git a/resources/views/front/products/show.blade.php b/resources/views/front/products/show.blade.php
index f300a39..52e16d8 100644
--- a/resources/views/front/products/show.blade.php
+++ b/resources/views/front/products/show.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.front')
 
-@section('title', $product->title ?? 'Ürün Detayı')
-@section('meta_description', Str::limit(strip_tags($product->content), 160))
+@section('title', $product->translate('title') ?? 'Ürün Detayı')
+@section('meta_description', Str::limit(strip_tags($product->translate('content')), 160))
 
 @section('content')
 <section class="wrapper !bg-[#ffffff]">
@@ -12,22 +12,22 @@
                     <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>
+                             / <span class="hover:!text-[#3f78e0]">{{ $product->category->translate('title') }}</span>
                         @endif
                     </div>
                     <!-- /.post-category -->
-                    <h1 class="!text-[2.5rem] !leading-[1.2] !mb-4">{{ $product->title }}</h1>
+                    <h1 class="!text-[2.5rem] !leading-[1.2] !mb-4">{{ $product->translate('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 }}">
+                    <img class="!rounded-[.4rem] w-full" src="{{ Storage::url($product->hero_image) }}" alt="{{ $product->translate('title') }}">
                 </figure>
                 @endif
                 
                 <div class="post-content">
-                    {!! $product->content !!}
+                    {!! $product->translate('content') !!}
                 </div>
                 <!-- /.post-content -->
             </div>
diff --git a/resources/views/layouts/site.blade.php b/resources/views/layouts/site.blade.php
index b59fd2a..e005768 100644
--- a/resources/views/layouts/site.blade.php
+++ b/resources/views/layouts/site.blade.php
@@ -27,7 +27,7 @@ $favicon_path = setting('site_favicon');
 	@if(isset($renderedHeader) && $renderedHeader)
 		{!! $renderedHeader !!}
 	@else
-		@include('partials.navbar')
+		@include('partials.header')
 	@endif
 
 	{{-- Main Content --}}
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
new file mode 100644
index 0000000..8761e1f
--- /dev/null
+++ b/resources/views/partials/header.blade.php
@@ -0,0 +1,538 @@
+<header class="relative wrapper !bg-[#edf2fc]">
+  <nav class="navbar navbar-expand-lg center-logo transparent position-absolute navbar-dark">
+    <div class="container justify-between items-center">
+      <div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
+        <div class="navbar-brand"><a href="index.html">
+            <img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
+            <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image">
+          </a></div>
+        <div class="navbar-other !ml-auto">
+          <ul class="navbar-nav flex-row items-center">
+            <li class="nav-item xl:!hidden lg:!hidden">
+              <button class="hamburger offcanvas-nav-btn"><span></span></button>
+            </li>
+          </ul>
+          <!-- /.navbar-nav -->
+        </div>
+        <!-- /.navbar-other -->
+      </div>
+      <!-- /.flex -->
+      <div class="navbar-collapse-wrapper flex flex-row items-center w-full">
+        <div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
+          <div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
+            <a class="transition-none hidden lg:!flex xl:!flex" href="index.html"><img class="logo-dark" src="assets/img/truncgil-yatay.svg" alt="image">
+              <img class="logo-light" src="assets/img/truncgil-yatay-dark.svg" alt="image"></a>
+              
+              
+          </div>
+          <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
+            <ul class="navbar-nav lg:!ml-auto xl:!ml-auto">                  
+              <li class="nav-item dropdown dropdown-mega">
+                <a class="nav-link dropdown-toggle  font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown">Demos</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">
+                      <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>
+                      </li>
+                    </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>
+                <!--/.dropdown-menu -->
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
+                <ul class="dropdown-menu">
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="services.html">Services I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="services2.html">Services II</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="about.html">About I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="about2.html">About II</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="shop.html">Shop I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="shop2.html">Shop II</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="shop-product.html">Product Page</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="shop-cart.html">Shopping Cart</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="shop-checkout.html">Checkout</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="contact.html">Contact I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="contact2.html">Contact II</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="contact3.html">Contact III</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="career.html">Job Listing I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="career2.html">Job Listing II</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="career-job.html">Job Description</a></li>
+                    </ul>
+                  </li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="404.html">404 Not Found</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="page-loader.html">Page Loader</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="signin.html">Sign In I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="signin2.html">Sign In II</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="signup.html">Sign Up I</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="signup2.html">Sign Up II</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="terms.html">Terms</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="pricing.html">Pricing</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="onepage.html">One Page</a></li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle  font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown">Projects</a>
+                <div class="dropdown-menu dropdown-lg">
+                  <div class="dropdown-lg-content">
+                    <div>
+                      <h6 class="dropdown-header !text-[#a07cc5]">Project Pages</h6>
+                      <ul class="pl-0 list-none">
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="projects.html">Projects I</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="projects2.html">Projects II</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="projects3.html">Projects III</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="projects4.html">Projects IV</a></li>
+                      </ul>
+                    </div>
+                    <!-- /.column -->
+                    <div>
+                      <h6 class="dropdown-header !text-[#a07cc5]">Single Projects</h6>
+                      <ul class="pl-0 list-none">
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="single-project.html">Single Project I</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="single-project2.html">Single Project II</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="single-project3.html">Single Project III</a></li>
+                        <li><a class="dropdown-item hover:!text-[#a07cc5]" href="single-project4.html">Single Project IV</a></li>
+                      </ul>
+                    </div>
+                    <!-- /.column -->
+                  </div>
+                  <!-- /auto-column -->
+                </div>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body">
+            <ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
+                <ul class="dropdown-menu">
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog.html">Blog without Sidebar</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog2.html">Blog with Sidebar</a></li>
+                  <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog3.html">Blog with Left Sidebar</a></li>
+                  <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
+                    <ul class="dropdown-menu">
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog-post.html">Post without Sidebar</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog-post2.html">Post with Sidebar</a></li>
+                      <li class="nav-item"><a class="dropdown-item hover:!text-[#a07cc5]" href="blog-post3.html">Post with Left Sidebar</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item dropdown dropdown-mega">
+                <a class="nav-link dropdown-toggle font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown" aria-expanded="false">Blocks</a>
+                <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
+                  <li class="mega-menu-content">
+                    <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/about.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
+                          <span>About</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/blog.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
+                          <span>Blog</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/call-to-action.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
+                          <span>Call to Action</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/clients.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
+                          <span>Clients</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/contact.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
+                          <span>Contact</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/facts.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
+                          <span>Facts</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/faq.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
+                          <span>FAQ</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/features.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
+                          <span>Features</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/footer.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
+                          <span>Footer</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/hero.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
+                          <span>Hero</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/misc.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
+                          <span>Misc</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/navbar.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
+                          <span>Navbar</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/portfolio.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
+                          <span>Portfolio</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/pricing.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
+                          <span>Pricing</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/process.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
+                          <span>Process</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/team.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
+                          <span>Team</span>
+                        </a>
+                      </li>
+                      <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class="dropdown-item" href="docs/blocks/testimonials.html">
+                          <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
+                          <span>Testimonials</span>
+                        </a>
+                      </li>
+                    </ul>
+                    <!--/.row -->
+                  </li>
+                  <!--/.mega-menu-content-->
+                </ul>
+                <!--/.dropdown-menu -->
+              </li>
+              <li class="nav-item dropdown dropdown-mega">
+                <a class="nav-link dropdown-toggle font-bold !tracking-[normal]" href="#" data-bs-toggle="dropdown" aria-expanded="false">Documentation</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-[#a07cc5]">Usage</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-[#a07cc5]" href="docs/index.html">Get Started</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/forms.html">Forms</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/faq.html">FAQ</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/changelog.html">Changelog</a></li>
+    <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/credits.html">Credits</a></li>
+                        </ul>
+                        <h6 class="dropdown-header !text-[#a07cc5] xl:!mt-6 lg:!mt-6">Styleguide</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-[#a07cc5]" href="docs/styleguide/colors.html">Colors</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/fonts.html">Fonts</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/icons-svg.html">SVG Icons</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/icons-font.html">Font Icons</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/illustrations.html">Illustrations</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/backgrounds.html">Backgrounds</a></li>
+  <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/styleguide/misc.html">Misc</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-[#a07cc5]">Elements</h6>
+                        <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/accordion.html">Accordion</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/alerts.html">Alerts</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/animations.html">Animations</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/avatars.html">Avatars</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/background.html">Background</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/badges.html">Badges</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/buttons.html">Buttons</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/card.html">Card</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/carousel.html">Carousel</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/dividers.html">Dividers</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/form-elements.html">Form Elements</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/image-hover.html">Image Hover</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/image-mask.html">Image Mask</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/lightbox.html">Lightbox</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/player.html">Media Player</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/modal.html">Modal</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/pagination.html">Pagination</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/progressbar.html">Progressbar</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/shadows.html">Shadows</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/shapes.html">Shapes</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/tables.html">Tables</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/tabs.html">Tabs</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/text-animations.html">Text Animations</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/text-highlight.html">Text Highlight</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/tiles.html">Tiles</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/tooltips-popovers.html">Tooltips &amp; Popovers</a></li>
+                          <li><a class="dropdown-item hover:!text-[#a07cc5]" href="docs/elements/typography.html">Typography</a></li>
+                        </ul>
+                      </div>
+                      <!--/column -->
+                    </div>
+                    <!--/.row -->
+                  </li>
+                  <!--/.mega-menu-content-->
+                </ul>
+                <!--/.dropdown-menu -->
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>
+          <div class="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
+            <div class="offcanvas-footer">
+              <div>
+                <a href="mailto:first.last@email.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>
+                <!-- /.social -->
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /.navbar-collapse -->
+      </div>
+      <!-- /.navbar-collapse-wrapper -->
+    </div>
+    <!-- /.container -->
+  </nav>
+  <!-- /.navbar -->
+</header>
\ No newline at end of file
diff --git a/resources/views/partials/header2.blade.php b/resources/views/partials/header2.blade.php
new file mode 100644
index 0000000..7317a81
--- /dev/null
+++ b/resources/views/partials/header2.blade.php
@@ -0,0 +1,25 @@
+<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
+      <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="./">
+              <img src="assets/img/truncgil-yatay.svg" alt="image">
+            </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">
+              @include('components.custom.menu')
+              
+            </div>
+            <div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex  flex-col !h-full">
+              @include('components.custom.menu')
+              
+            <!-- /.navbar-nav -->
+          </div>
+          <!-- /.navbar-other -->
+          @include('components.custom.language-selector')
+        </div>
+        <!-- /.container -->
+      </nav>
+      <!-- /.navbar -->
+    </header>
\ No newline at end of file
diff --git a/resources/views/partials/navbar.blade.php b/resources/views/partials/navbar.blade.php
deleted file mode 100644
index 7eca5bc..0000000
--- a/resources/views/partials/navbar.blade.php
+++ /dev/null
@@ -1,352 +0,0 @@
-<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
-      <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='index.html'>
-              <img src="assets/img/truncgil-yatay.svg" alt="image">
-            </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">
-              
-              
-            </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">Ü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-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]">
-                            <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 -->
-                    </li>
-                    <!--/.mega-menu-content-->
-                  </ul>
-                  <!--/.dropdown-menu -->
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
-                  <ul class="dropdown-menu">
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
-                      </ul>
-                    </li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
-                      </ul>
-                    </li>
-                    <li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
-                    <li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
-                  <div class="dropdown-menu dropdown-lg">
-                    <div class="dropdown-lg-content">
-                      <div>
-                        <h6 class="dropdown-header">Project Pages</h6>
-                        <ul class="pl-0 list-none">
-                          <li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
-                          <li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
-                          <li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
-                          <li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
-                        </ul>
-                      </div>
-                      <!-- /.column -->
-                      <div>
-                        <h6 class="dropdown-header">Single Projects</h6>
-                        <ul class="pl-0 list-none">
-                          <li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
-                          <li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
-                          <li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
-                          <li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
-                        </ul>
-                      </div>
-                      <!-- /.column -->
-                    </div>
-                    <!-- /auto-column -->
-                  </div>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
-                  <ul class="dropdown-menu">
-                    <li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
-                    <li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
-                    <li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
-                    <li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
-                      <ul class="dropdown-menu">
-                        <li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
-                        <li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item dropdown dropdown-mega">
-                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
-                  <ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
-                    <li class="mega-menu-content">
-                      <ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
-                            <span>About</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
-                            <span>Blog</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
-                            <span>Call to Action</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
-                            <span>Clients</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
-                            <span>Contact</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
-                            <span>Facts</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
-                            <span>FAQ</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
-                            <span>Features</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
-                            <span>Footer</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
-                            <span>Hero</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
-                            <span>Misc</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
-                            <span>Navbar</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
-                            <span>Portfolio</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
-                            <span>Pricing</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
-                            <span>Process</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
-                            <span>Team</span>
-                          </a>
-                        </li>
-                        <li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
-                            <div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
-                            <span>Testimonials</span>
-                          </a>
-                        </li>
-                      </ul>
-                      <!--/.row -->
-                    </li>
-                    <!--/.mega-menu-content-->
-                  </ul>
-                  <!--/.dropdown-menu -->
-                </li>
-                <li class="nav-item dropdown dropdown-mega">
-                  <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</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">Usage</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' href='docs/index.html'>Get Started</a></li>
-      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
-      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
-      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
-      <li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
-                          </ul>
-                          <h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</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' href='docs/styleguide/colors.html'>Colors</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
-    <li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</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">Elements</h6>
-                          <ul class="pl-0 list-none  xl:columns-3 lg:columns-3 ">
-                            <li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
-                            <li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
-                          </ul>
-                        </div>
-                        <!--/column -->
-                      </div>
-                      <!--/.row -->
-                    </li>
-                    <!--/.mega-menu-content-->
-                  </ul>
-                  <!--/.dropdown-menu -->
-                </li>
-              </ul>
-              <!-- /.navbar-nav -->
-              <div class="offcanvas-footer xl:!hidden lg:!hidden">
-                <div>
-                  <a href="mailto:first.last@email.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>
-                  <!-- /.social -->
-                </div>
-              </div>
-              <!-- /.offcanvas-footer -->
-            </div>
-            <!-- /.offcanvas-body -->
-          </div>
-          <!-- /.navbar-collapse -->
-          <div class="navbar-other w-full !flex !ml-auto">
-            <ul class="navbar-nav !flex-row !items-center !ml-auto">
-              <li class="nav-item dropdown language-select uppercase group">
-                <a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
-                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
-                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
-                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
-                  <li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
-                </ul>
-              </li>
-              <li class="nav-item hidden xl:block lg:block md:block">
-                <a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
-              </li>
-              <li class="nav-item xl:!hidden lg:!hidden">
-                <button class="hamburger offcanvas-nav-btn"><span></span></button>
-              </li>
-            </ul>
-            <!-- /.navbar-nav -->
-          </div>
-          <!-- /.navbar-other -->
-        </div>
-        <!-- /.container -->
-      </nav>
-      <!-- /.navbar -->
-    </header>
\ No newline at end of file
diff --git a/resources/views/templates/home.blade.php b/resources/views/templates/home.blade.php
index c4a5a27..e41f000 100644
--- a/resources/views/templates/home.blade.php
+++ b/resources/views/templates/home.blade.php
@@ -3,14 +3,195 @@
 @section('title', 'Anasayfa')
 
 @section('content')
+	<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !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,.3)]" data-image-src="./assets/img/photos/bg14.png" style="background-image: url('./assets/img/photos/bg14.png');">
+		<div class="container pt-28 pb-36 xl:pt-32 lg:pt-32 md:pt-32 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
+		<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 !mx-auto" data-cues="slideInDown" data-group="page-title" data-disabled="true">
+			<h1 class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] font-semibold !leading-[1.15] !text-white !mb-4 md:!px-20 lg:!px-0 xl:!px-0" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 0ms; animation-direction: normal; animation-fill-mode: both;">Hayatı <span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block after:bg-no-repeat after:bg-bottom after:bottom-0 after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4  style-2 yellow">kolaylaştıran</span> çözümler sunuyoruz</h1>
+			<p class="lead !text-[1.2rem] !text-white !leading-[1.5] font-medium !mb-7 md:mx-[4rem] lg:mx-[2.5rem] xl:mx-[2.5rem]" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">{{ t('Hayatı kolaylaştıran uygulamaları insan odaklı, akılcı ve sade bir biçimde gerçekleştirmek için var gücümüzle çalışıyoruz.') }}</p>
+			<div data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 600ms; animation-direction: normal; animation-fill-mode: both;">
+				<a class="btn btn-white !rounded-[50rem] !mb-10 xxl:!mb-5">{{ t('Daha Fazla Oku') }}</a>
+			</div>
+			</div>
+			<!-- /column -->
+		</div>
+		<!-- /.row -->
+		</div>
+		<!-- /.container -->
+		<div class="overflow-hidden">
+		<div class="divider !text-[#fefefe] mx-[-0.5rem]">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
+			<path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"></path>
+			</svg>
+		</div>
+		</div>
+	</section>
+	<section class="wrapper !bg-[#ffffff]">
+	<div class="container pb-20 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem]">
+		<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mb-[4.5rem] !mt-[-9rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
+		<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+			<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+			<div class="card-body flex-[1_1_auto] p-[40px]">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#e668b3] text-fuchsia !mb-3"><path class="fill-primary" d="M152 0H29.33A29.32 29.32 0 000 29.33v165.33A29.32 29.32 0 0029.33 224h78.72l2.35-13.12a29.71 29.71 0 018.11-15.68l62.83-62.72V29.33A29.33 29.33 0 00152 0zM42.67 42.67h42.67a10.67 10.67 0 110 21.33H42.66a10.67 10.67 0 010-21.33zM96 149.33H42.67a10.67 10.67 0 110-21.33H96a10.67 10.67 0 110 21.33zm42.67-42.66h-96a10.67 10.67 0 010-21.34h96a10.67 10.67 0 110 21.34z"></path><path class="fill-secondary" d="M133.63 256a8 8 0 01-7.89-9.38l5.67-32.06a8 8 0 012.22-4.27l79.2-79.2c9.73-9.75 19.28-7.12 24.51-1.89l13.2 13.2a18.69 18.69 0 010 26.4l-79.2 79.2a7.83 7.83 0 01-4.27 2.22l-32 5.67a10.71 10.71 0 01-1.44.11zm32.05-13.65z"></path></svg>
+				<h4>Content Marketing</h4>
+				<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+				<a href="#" class="more hover !text-[#e668b3] focus:!text-[#e668b3] hover:!text-[#e668b3]">Learn More</a>
+			</div>
+			<!--/.card-body -->
+			</div>
+			<!--/.card -->
+		</div>
+		<!--/column -->
+		<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+			<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+			<div class="card-body flex-[1_1_auto] p-[40px]">
+				<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 !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#a07cc5] text-violet !mb-3"><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 at eget metus cras justo.</p>
+				<a href="#" class="more hover !text-[#a07cc5] focus:!text-[#a07cc5] hover:!text-[#a07cc5]">Learn More</a>
+			</div>
+			<!--/.card-body -->
+			</div>
+			<!--/.card -->
+		</div>
+		<!--/column -->
+		<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+			<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+			<div class="card-body flex-[1_1_auto] p-[40px]">
+				<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-[2.2rem] !h-[2.2rem]  solid-mono text-[#f78b77] text-orange !mb-3"><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>
+				<h4>Identity &amp; Branding</h4>
+				<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+				<a href="#" class="more hover !text-[#f78b77] focus:!text-[#f78b77] hover:!text-[#f78b77]">Learn More</a>
+			</div>
+			<!--/.card-body -->
+			</div>
+			<!--/.card -->
+		</div>
+		<!--/column -->
+		<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
+			<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
+			<div class="card-body flex-[1_1_auto] p-[40px]">
+				<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/delivery-box.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem]  solid-mono text-[#45c4a0] text-green !mb-3"><path class="fill-secondary" d="M172 20.57L55.79 80 9.6 57.32 123.71 1A9.43 9.43 0 01132 1zm74.27 36.75l-118.21 58.56-44.27-21.8-6.38-3.25L193.7 31.36l6.4 3.24z"></path><path class="fill-primary" d="M118.59 132.76L118.46 256 5.23 196.91A9.89 9.89 0 010 188.22V74.2l48 23.64v41.55a9.6 9.6 0 1019.2 0v-31.94l6.4 3.12zm137.28-58.43l-118.08 58.31-.13 123.23L256 194.08z"></path></svg>
+				<h4>Product Design</h4>
+				<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
+				<a href="#" class="more hover !text-[#45c4a0] focus:!text-[#45c4a0] hover:!text-[#45c4a0]">Learn More</a>
+			</div>
+			<!--/.card-body -->
+			</div>
+			<!--/.card -->
+		</div>
+		<!--/column -->
+		</div>
+		<!--/.row -->
+		<div class="flex flex-wrap mx-[-15px]">
+		<div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-8/12 lg:!ml-[16.66666667%] xl:w-8/12 xl:!ml-[16.66666667%] w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
+			<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">{{ t('Neden Trunçgil?') }}</h2>
+			<h3 class="xl:!text-[2.1rem] !text-[calc(1.335rem_+_1.02vw)] !leading-[1.2] font-semibold !mb-10 xl:!px-10 xxl:!px-20">{{ t('Müşterilerimizin Trunçgil\'i tercih etmesinin birkaç') }} <span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4  style-2 yellow">{{ t('nedeni') }}</span> {{ t('burada.') }}</h3>
+		</div>
+		<!-- /column -->
+		</div>
+		<!-- /.row -->        
+		<ul class="nav nav-tabs nav-tabs-bg flex justify-between nav-justified xl:!flex-row lg:!flex-row flex-col" role="tablist">
+		<li class="nav-item !mb-[20px]" role="presentation"> <a class="nav-link !flex flex-row active" data-bs-toggle="tab" href="#tab2-1" aria-selected="true" role="tab">
+			<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 icon-svg-md !w-[2.2rem] !h-[2.2rem] solid-mono text-[#fab758] text-fuchsia !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>{{ t('Fikir Toplama') }}</h4>
+				<p>{{ t('Fikirlerinizi toplar ve organize ederiz, süreçleri yönetiriz.') }}</p>
+			</div>
+			</a> </li>
+		<li class="nav-item !mb-[20px]" role="presentation"> <a class="nav-link !flex flex-row" data-bs-toggle="tab" href="#tab2-2" aria-selected="false" tabindex="-1" role="tab">
+			<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/compare.svg" class="svg-inject icon-svg icon-svg-md !w-[2.2rem] !h-[2.2rem] solid-mono text-[#45c4a0] text-violet !mr-4"><path class="fill-primary" d="M123.22 148.5A8 8 0 00116 144H19.36a8 8 0 00-8 8c0 57.34 46.94 104 104.66 104a104.67 104.67 0 0045.45-10.29 8 8 0 003.76-10.71z"></path><path class="fill-secondary" d="M152 19a8 8 0 00-8 8v95.39a7.93 7.93 0 00.8 3.49l41.73 85.95a8 8 0 0010.65 3.73c36.29-17.48 58.82-53.19 58.82-93.19C256 65.36 209.34 19 152 19z"></path><path class="fill-primary" d="M112 104V8a8 8 0 00-8-8A104.13 104.13 0 000 104a8 8 0 008 8h96a8 8 0 008-8z"></path></svg></div>
+			<div>
+				<h4>{{ t('Veri Analizi') }}</h4>
+				<p>{{ t('Verilerinizi analiz eder ve anlamlı sonuçlar çıkarırız.') }}</p>
+			</div>
+			</a> </li>
+		<li class="nav-item !mb-[20px]" role="presentation"> <a class="nav-link !flex flex-row" data-bs-toggle="tab" href="#tab2-3" aria-selected="false" tabindex="-1" role="tab">
+			<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/delivery-box.svg" class="svg-inject icon-svg icon-svg-md !w-[2.2rem] !h-[2.2rem] solid-mono text-[#e2626b] text-green !mr-4"><path class="fill-secondary" d="M172 20.57L55.79 80 9.6 57.32 123.71 1A9.43 9.43 0 01132 1zm74.27 36.75l-118.21 58.56-44.27-21.8-6.38-3.25L193.7 31.36l6.4 3.24z"></path><path class="fill-primary" d="M118.59 132.76L118.46 256 5.23 196.91A9.89 9.89 0 010 188.22V74.2l48 23.64v41.55a9.6 9.6 0 1019.2 0v-31.94l6.4 3.12zm137.28-58.43l-118.08 58.31-.13 123.23L256 194.08z"></path></svg></div>
+			<div>
+				<h4>{{ t('Ürünü Tamamla') }}</h4>
+				<p>{{ t('Ürününüzü son haline getirir ve teslim ederiz.') }}</p>
+			</div>
+			</a> </li>
+		</ul>
+		<!-- /.nav-tabs -->
+		<div class="tab-content !mt-6 xl:!mt-8 lg:!mt-8">
+		<div class="tab-pane fade show active" id="tab2-1" role="tabpanel">
+			<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+				<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se5.jpg" alt="image"></figure>
+			</div>
+			<!--/column -->
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+				<h2 class="!mb-3 !leading-[1.35]">{{ t('Fikir Toplama') }}</h2>
+				<p>{{ t('Projeleriniz için en yaratıcı fikirleri topluyor ve organize ediyoruz. Müşterilerimizle yakın iş birliği içinde çalışarak, ihtiyaçlarınızı anlıyor ve en uygun çözümleri geliştiriyoruz. Deneyimli ekibimiz, her projeye özel yaklaşımlarla süreçleri yönetiyor ve başarılı sonuçlar elde ediyor.') }}</p>
+				<ul class="pl-0 list-none bullet-bg bullet-soft-fuchsia">
+				<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-[#fbe4f1] !text-[#e668b3] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Yaratıcı fikirler toplama ve analiz etme.') }}</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-[#fbe4f1] !text-[#e668b3] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Müşteri ihtiyaçlarını anlama ve çözüm geliştirme.') }}</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-[#fbe4f1] !text-[#e668b3] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Profesyonel ekip ile süreç yönetimi ve takip.') }}</li>
+				</ul>
+				<a href="#" class="btn btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3]   active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] !mt-2">{{ t('Daha Fazla Bilgi') }}</a>
+			</div>
+			<!--/column -->
+			</div>
+			<!--/.row -->
+		</div>
+		<!--/.tab-pane -->
+		<div class="tab-pane fade" id="tab2-2" role="tabpanel">
+			<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
+				<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se6.jpg" alt="image"></figure>
+			</div>
+			<!--/column -->
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+				<h2 class="!mb-3 !leading-[1.35]">{{ t('Veri Analizi') }}</h2>
+				<p>{{ t('Kurumsal verilerinizi derinlemesine analiz ediyor ve anlamlı içgörüler çıkarıyoruz. Modern analitik araçlarımız ve uzman ekibimiz sayesinde, iş süreçlerinizi optimize edebilir ve karar verme süreçlerinizi güçlendirebilirsiniz. Verilerinizden maksimum değeri elde etmenizi sağlıyoruz.') }}</p>
+				<ul class="pl-0 list-none bullet-bg bullet-soft-violet">
+				<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-[#eee7f5] !text-[#a07cc5] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Derinlemesine veri analizi ve raporlama.') }}</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-[#eee7f5] !text-[#a07cc5] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('İş süreçlerini optimize etme ve iyileştirme.') }}</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-[#eee7f5] !text-[#a07cc5] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Stratejik karar verme için içgörü sağlama.') }}</li>
+				</ul>
+				<a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5]   active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5]  !mt-2">{{ t('Daha Fazla Bilgi') }}</a>
+			</div>
+			<!--/column -->
+			</div>
+			<!--/.row -->
+		</div>
+		<!--/.tab-pane -->
+		<div class="tab-pane fade" id="tab2-3" role="tabpanel">
+			<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+				<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se7.jpg" alt="image"></figure>
+			</div>
+			<!--/column -->
+			<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+				<h2 class="!mb-3 !leading-[1.35]">{{ t('Ürünü Tamamla') }}</h2>
+				<p>{{ t('Geliştirme sürecinin son aşamasında, ürününüzü mükemmel hale getiriyor ve teslim ediyoruz. Kalite kontrolünden kullanıcı testlerine, dokümantasyondan eğitime kadar tüm detayları eksiksiz bir şekilde tamamlıyoruz. Müşterilerimizin memnuniyeti bizim önceliğimizdir.') }}</p>
+				<ul class="pl-0 list-none bullet-bg bullet-soft-green">
+				<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-[#def4ee] !text-[#45c4a0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Kapsamlı kalite kontrolü ve test süreçleri.') }}</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-[#def4ee] !text-[#45c4a0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Detaylı dokümantasyon ve kullanıcı eğitimi.') }}</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-[#def4ee] !text-[#45c4a0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>{{ t('Zamanında teslimat ve sürekli destek hizmeti.') }}</li>
+				</ul>
+				<a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0]   active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0]  !mt-2">{{ t('Daha Fazla Bilgi') }}</a>
+			</div>
+			<!--/column -->
+			</div>
+			<!--/.row -->
+		</div>
+		<!--/.tab-pane -->
+		</div>
+		<!-- /.tab-content -->
+	</div>
+	<!-- /.container -->
+	</section>
 	<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;">{!! t('İnsan odaklı <br class="hidden md:block xl:!hidden lg:!hidden"><span class="!text-[#e31e24] ">akılcı ve sade</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;">{!! t('Hayatı kolaylaştırabilecek uygulamaları insan odaklı, akılcı, sade ve estetik  <br class="hidden md:block xl:!hidden lg:!hidden"> bir biçimde gerçekleştirmek için var gücümüzle çalışıyoruz.') !!}</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">{!! t('Ürün ve Hizmetlerimiz') !!}</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">{!! t('Neler Yapıyoruz?') !!}</a></div>
+				<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-[50rem]">{!! t('Ürün ve Hizmetlerimiz') !!}</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-[50rem]">{!! t('Neler Yapıyoruz?') !!}</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]">
diff --git a/resources/views/templates/iletisim.blade.php b/resources/views/templates/iletisim.blade.php
index fd7bc36..d2137e6 100644
--- a/resources/views/templates/iletisim.blade.php
+++ b/resources/views/templates/iletisim.blade.php
@@ -9,11 +9,11 @@
       <div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
         <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 !mx-auto">
-            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3 !text-white">Get in Touch</h1>
+            <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3 !text-white">{{ t('Bize Ulaşın') }}</h1>
             <nav class="inline-block" aria-label="breadcrumb">
               <ol class="breadcrumb  flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px]">
-                <li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-white hover:text-white" href="#">Home</a></li>
-                <li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">Contact</li>
+                <li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-white hover:text-white" href="./">{{ t('Anasayfa') }}</a></li>
+                <li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">{{ t('İletişim') }}</li>
               </ol>
             </nav>
             <!-- /nav -->