Files
citrus/resources/views/partials/header.blade.php
T

538 lines
43 KiB
PHP

<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>