title = "projeler-uptade"
url = "/projeler-uptade"
layout = "master"
is_hidden = 0
contentType = "html"
force_show = 0
==
<?php
use Cms\Classes\LanguageController;

function onStart(){
    $lang                = LanguageController::GetLang();
    $slug = $this->param("slug");
    
    $this['getlang']     = $lang;
    $this['news']       = Db::table('flatart_contentmanager_')->where("status", 1)->where("lang", $lang)->where("category", "proje")->orderBy("id", "desc")->get();
    $referanslar       = Db::table('flatart_mediaroom_')->where("status", 0)->where("category_type", "fotograf")->where("slug", "referanslar-kurumsal")->first();
    $this['referanslar'] = json_decode($referanslar->photos, true);
    
    $this->page->turkishlink = "/tr/projeler/";
    $this->page->englishlink = "/en/projects/";
    
    if($this['getlang'] == 'en'){
        $this->page->meta_title = "Projects - Villa Yapı Prefabrik";
        $this->page->meta_description = "You can browse all our projects and contact us for detailed information about our professional services.";
        $this->page->canonical              = "https://villayapi.com/en/projects/";
    }else{
        $this->page->meta_title = "Projeler - Villa Yapı Prefabrik";
        $this->page->meta_description = "Yer aldığımız tüm projelerimize göz atabilir, profesyonel hizmetlerimiz hakkında detaylı bilgiler için bizimle iletişime geçerek bilgi edinebilirsiniz.";
        $this->page->canonical              = "https://villayapi.com/tr/projeler/";
    }
 
}
?>
==
<script type="application/ld+json">
{
  "@context": "https://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [{
    "@type": "ListItem", 
    "position": 1, 
    "name": "Villa Yapı Prefabrik",
    "item": "https://villayapi.com{{ "/tr"|_}}/"  
  },{
    "@type": "ListItem", 
    "position": 2, 
    "name": "{{ "Projeler"|_ }}",
    "item": "https://villayapi.com{{ "/tr/projeler"|_}}/"  
  }
  ]
}
</script>

<!-- ========================
       page title 
    =========================== -->
    <section class="page-title page-title-layout9 bg-overlay bg-parallax text-center">
      <div class="bg-img"><img src="{{ "covers/projeler sayfasi-slider.jpg"|media }}" alt="background"></div>
      <div class="container">
        <div class="row proje">
          <div class="col-sm-12 col-md-12 col-lg-12 col-xl-6 offset-xl-3">
            <h1 class="pagetitle__heading">{{ "Projeler"|_ }}</h1>
            <nav>
              <ol class="breadcrumb justify-content-center mb-0">
                <li class="breadcrumb-item"><a href="{{ "/tr"|_ }}">{{ "Ana Sayfa"|_ }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ "Projeler"|_ }}</li>
              </ol>
            </nav>
          </div><!-- /.col-xl-4 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.page-title -->

    <style>
    .page-title-layout9 .pagetitle__heading {
    margin-bottom: 0px;
}
@media screen and (min-width: 780px) {
   p.map-uptade {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
    }
}
@media screen and (max-width: 770px) {
   p.map-uptade {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    margin-top: 20px;
    
    }
}
   
    </style>
   <div class="container">
   <p class="map-uptade">
   Yurtiçi ve Yurtdışı Tüm Referanslarımız
   <p>
    {% partial 'maps' %}
  </div>
  
 <section class="clients bg-gray" style="margin-top:30px;" >
  <div class="container">
   <div class="row">
  <div class="col-12">
    <div class="heading d-flex justify-content-between align-items-center mb-40">
      <div class="heading__title">İş Ortaklarımız</div>
      <div class="fir-right ml-auto">
        <svg id="swiper-button-next" width="47" height="42" class="hovers" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg" tabIndex="0" role="button" aria-label="Previous slide">
          <rect x="0.5" y="0.5" width="46" height="41" stroke="#747474"></rect>
          <path d="M16.414 20.707L15.707 20L15 20.707L15.707 21.414L16.414 20.707ZM21.707 14L15.707 20L17.121 21.414L23.121 15.414L21.707 14ZM15.707 21.414L21.707 27.414L23.121 26L17.121 20L15.707 21.414ZM16.414 21.707H31.414V19.707H16.414V21.707Z" fill="#747474"></path>
        </svg>
        <svg id="swiper-button-prev" width="47" height="42" class="hovers" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg" tabIndex="0" role="button" aria-label="Next slide">
          <rect x="0.5" y="0.5" width="46" height="41" stroke="#747474"></rect>
          <path d="M29.586 20.293L30.293 21L31 20.293L30.293 19.586L29.586 20.293ZM24.293 27L30.293 21L28.879 19.586L22.879 25.586L24.293 27ZM30.293 19.586L24.293 13.586L22.879 15L28.879 21L30.293 19.586ZM29.586 19.293L14.586 19.293L14.586 21.293L29.586 21.293L29.586 19.293Z" fill="#747474"></path>
        </svg>
      </div>
    </div>
  </div>
</div>
    
    <div class="row align-items-center text-center">
      <div class="swiper projeler">
        <div class="swiper-wrapper">
          {% for item in referanslar %}
          <div class="swiper-slide">
            <div class="client">
              <img src="{{ item.photo|media }}" style="filter: grayscale(1);" alt="client">
              <img src="{{ item.photo|media }}" alt="client">
            </div>
          </div>
          {% endfor %}
        </div>
        <!-- Add Arrows -->
       
      </div>
    </div>
  </div>
</section> 
  
  
<div class="container mt-5 filter">
  <div class="filter-bar">
  <button class="btn btn-active" onclick="filterSelection('all', this)">TÜMÜ</button>
  <button class="btn" onclick="filterSelection('santiye', this)">Şantiye Mobilizasyon</button>
  <button class="btn" onclick="filterSelection('celik', this)">Çelik Yapılar</button>
  <button class="btn" onclick="filterSelection('kamu', this)">Kamu Projeleri</button>
  <button class="btn" onclick="filterSelection('konut', this)">Konut Projeleri</button>
  <button class="btn" onclick="filterSelection('tasarim', this)">Özel Tasarım Projeler</button>
</div>

  <div class="row">
    {% for item in news %}
        <div class="col-sm-6 col-md-6 col-lg-3 grid-item tum {{ item.filters }}">
            <div class="portfolio-item">
              <div class="portfolio-item__img">
                <a class="" href="{{ "/tr/proje"|_ }}/{{ item.slug }}/">
                  <img src="{{ item.cover|media|resize(400, 400)  }}" alt="portfolio img">
                </a>
              </div><!-- /.portfolio-img -->
              <div class="portfolio-item__content">
                <h2 class="portfolio-item__title"><a href="{{ "/tr/proje"|_ }}/{{ item.slug }}">{{ item.name }}</a></h2>
              </div><!-- /.portfolio-content -->
            </div><!-- /.portfolio-item -->
          </div>
          {% endfor %}
  
    <!-- Repeat similar blocks for other categories and items -->
  </div>
</div>

<script>
function filterSelection(category, btn) {
  var items, i;
  items = document.getElementsByClassName("grid-item");
  if (category == "all") category = "tum";
  for (i = 0; i < items.length; i++) {
    removeClass(items[i], "show");
    if (items[i].className.indexOf(category) > -1) addClass(items[i], "show");
  }

  var btns = document.getElementsByClassName("btn");
  for (i = 0; i < btns.length; i++) {
    btns[i].classList.remove("btn-active");
  }
  btn.classList.add("btn-active");
}

function addClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function removeClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Başlangıçta tüm öğeleri göstermek için
filterSelection("all", document.querySelector('.btn-active'));


</script>

<style>
.portfolio-item .portfolio-item__title a {
    font-size: 20px;
}
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
  }
  .container.mt-5.filter {
    margin-top: 60px !important;
  }
  .filter-bar .btn {
    margin: 5px;
    padding: 0px 15px;
    background-color: #009CDE;
    color: white;
    border: none;
  }
  .filter-bar .btn-active {
    background-color: #ff4c01;
  }
  button.btn.btn-active{
    background-color: #ff4c01;  
  }
 
/* Varsayılan olarak öğeleri gizle */
.grid-item {
  display: none;
}

/* "show" sınıfına sahip öğeleri göster */
.grid-item.show {
  display: block;
}
  .card {
    margin-bottom: 20px;
  }
  .btn:not(.btn__link):before {
    background-color: rgba(40, 40, 40, 0.11);
  }
  
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading__title {
  /* Gerekirse başlık için stil ekleyebilirsiniz */
}

.fir-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.fir-right svg + svg {
  margin-left: 5px;
}
</style>