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

function onStart(){
    
    $lang                = LanguageController::GetLang();
    
    $this->page->turkishlink = "/tr/";
    $this->page->englishlink = "/en/";
    
    $this['sliders']          = Db::table('flatart_slider_')->where("status", 1)->where("lang", $lang)->orderBy("sort", "ASC")->get();
    
    $this['news']       = Db::table('flatart_contentmanager_')->where("status", 1)->where("lang", $lang)->where("category", "bizden_haberler")->orderBy("id", "desc")->take(3)->get();
    $this['hm_projects']       = Db::table('flatart_contentmanager_')->where("status", 1)->where("lang", $lang)->where("category", "proje")->orderBy("id", "desc")->take(3)->get();
    
    if($lang == 'en'){
        $this->page->meta_title         = "Villa Yapı Prefabrik | Prefabrik Ev | Konteyner | Hangar | Prefabrik Ofis";
        $this->page->meta_description    = "Welcome to Villa Yapı, the pioneer of the sector that produces solutions for your prefabricated housing, prefabricated office, container, and hangar needs!";
        $this->page->canonical          = "https://villayapi.com/en/";
    }else{
        $this->page->meta_title         = "Villa Yapı Prefabrik | Prefabrik Ev | Konteyner | Hangar | Prefabrik Ofis";
        $this->page->meta_description    = "Prefabrik konut, prefabrik ofis, konteyner, hangar ihtiyaçlarınız için çözümler üreten sektörün öncüsü Villa Yapı&#039;ya hoş geldiniz!";
        $this->page->canonical          = "https://villayapi.com/tr/";
    }

}
?>
==
<section class="slider slider-layout1">
      <div class="slick-carousel carousel-arrows-light m-slides-0"
        data-slick='{"slidesToShow": 1, "arrows": true, "dots": true, "speed": 700,"fade": true,"cssEase": "linear"}'>
       {% for item in sliders %}
        <div class="slide-item align-v-h bg-overlay" style="    background-image: url({{ webp.get(item.cover, 70) }});">
       <!--   <div class="bg-img" ><img src="{{ webp.get(item.cover, 70) }}" alt="slide img"></div> -->
          <div class="container">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-9">
                <div class="slide-item__content">
              
                  <h1 class="slide-item__title">{{ item.header|raw }}</h1>
                  <p class="slide-item__desc">
                  {{ item.description|raw }}
                  </p>
                  {% if item.button_1_text %}
                  <a href="{{ item.button_1_url}}" class="btn btn__primary btn__lg mr-30 blue">
                    <i class="icon-arrow-right"></i><span>{{ item.button_1_text }}</span>
                  </a>
                  {% endif %}
                  {% if item.button_2_text %}
                  <a href="{{ item.button_2_url}}" class="btn btn__white blue">{{ item.button_2_text }}</a>
                  {% endif %}
                </div><!-- /.slide-content -->
              </div><!-- /.col-xl-9 -->
            </div><!-- /.row -->
          </div><!-- /.container -->
        </div><!-- /.slide-item -->
        {% endfor %}
   
      </div><!-- /.carousel -->
      
    </section><!-- /.slider -->

    <!-- ========================
    features
    =========================== -->
   
    
    <section class="features-latout1 py-0">
      <div class="container">
      
        <div class="row mx-0">
          <div class="col-sm-12 col-md-12 col-lg-12 px-0 features-wrapper d-flex flex-wrap">
            <!-- feature item #1 -->
            <div class="feature-item">
              <div class="feature-item__content">
                <div class="feature-item__title">{{ "Ürünler"|_ }}</div>
                <p class="feature-item__desc"></p>
                <a href="{{ "/tr/urun-gruplari"|_ }}/" class="btn btn__link btn__secondary"><i class="icon-arrow-right"></i></a>
              </div><!-- /.feature-content -->
            </div><!-- /.col-lg-3 -->
            <!-- feature item #2 -->
            <div class="feature-item">
              <div class="feature-item__content">
                <div class="feature-item__title">{{ "Faaliyet Alanları"|_ }}</div>
                <p class="feature-item__desc"></p>
                <a href="{{ "/tr/faaliyet-alanlari"|_ }}/" class="btn btn__link btn__secondary"><i class="icon-arrow-right"></i></a>
              </div><!-- /.feature-content -->
            </div><!-- /.col-lg-3 -->
            <!-- feature item #3 -->
            <div class="feature-item">
              <div class="feature-item__content">
                <div class="feature-item__title">{{ "Projeler"|_ }}</div>
                <p class="feature-item__desc"></p>
                <a href="{{ "/tr/projeler"|_ }}/" class="btn btn__link btn__secondary"><i class="icon-arrow-right"></i></a>
              </div><!-- /.feature-content -->
            </div><!-- /.col-lg-3 -->
            <!-- feature item #4 -->
            <div class="feature-item bg-theme">
              <div class="slick-carousel m-slides-0"
                data-slick='{"slidesToShow": 1, "arrows": false, "dots": true, "autoPlay": true}' style="    background: #009CDE;">
                <div class="feature-item__content">
                  <div class="feature-item__title color-white d-flex align-items-end mb-25">
                    <span class="counter">72</span><span>{{ "Ülke"|_ }}</span>
                  </div>
                  <p class="feature-item__desc color-white mb-0">
                  {{ "10.000'den Fazla Proje"|_ }}
                  </p>
                </div><!-- /.feature-content -->
                <div class="feature-item__content">
                  <div class="feature-item__title color-white d-flex align-items-end mb-25">
                    <span class="counter">350</span><span>{{ "Çalışan"|_ }}</span>
                  </div>
                  <p class="feature-item__desc color-white mb-0"></p>
                </div><!-- /.feature-content -->
              </div>
            </div><!-- /.col-lg-3 -->
          </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.features -->

    <!-- ========================
      About Layout 2
    =========================== -->
    
    
      <style>
        .custom-col {
            flex: 0 0 calc(18% - 10px);
            max-width: calc(18% - 10px);
            margin: 10px;
            box-sizing: border-box;
        }
        .custom-col-inner {
            background: linear-gradient(to bottom, #D9D9D9, #898B98, #747788, #737687, #181E3D);
            border: 1px solid #dee2e6;
            width: 100%;
            padding-top: 100%; /* Kare yapmak için */
            position: relative;
            box-shadow: 15px 10px 5px #D9D9D9;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .custom-col-inner div {
            position: absolute;
            top: 45%;
            transform: translateY(-50%);
            text-align: center;
        }
        .custom-col-inner p {
            position: absolute;
            bottom: 20px;
            text-align: center;
            margin: 0;
            font-size: 16px;
            width: 100%;
            color: #fff;
             font-weight: bold;
        }
       @media (max-width: 767.98px) {
    .custom-col {
        flex: 0 0 100%;
        max-width: 40%;
        margin: 10px 10px;
    }
}
    </style>
    
  <section>
        
            <div class="row justify-content-center">
                <div class="custom-col">
                    <div class="custom-col-inner">
                        <div><img class="img-fluid" src="{{ webp.get('/iconlar_şantiye mobilizasyon.png', 70) }}" alt="ŞANTİYE MOBİLİZASYON"></div>
                        <p>ŞANTİYE MOBİLİZASYON</p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="custom-col-inner">
                        <div><img class="img-fluid" src="{{ webp.get('/iconlar_çelik yapı.png', 70) }}" alt="ÇELİK YAPILAR"></div>
                        <p>ÇELİK YAPILAR</p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="custom-col-inner">
                        <div><img class="img-fluid" src="{{ webp.get('/iconlar_kamu projeler.png', 70) }}" alt="KAMU PROJELERİ"></div>
                        <p>KAMU PROJELERİ</p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="custom-col-inner">
                        <div><img class="img-fluid" src="{{ webp.get('/iconlar_konut projeleri.png', 70) }}" alt="KONUT PROJELERİ"></div>
                        <p>KONUT PROJELERİ</p>
                    </div>
                </div>
                <div class="custom-col">
                    <div class="custom-col-inner">
                        <div><img class="img-fluid" src="{{ webp.get('/iconlar_özel tasarım.png', 70) }}" alt="ÖZEL TASARIM PROJELER"></div>
                        <p>ÖZEL TASARIM<br>PROJELER</p>
                    </div>
                </div>
            </div>
       
    </section>
    
    <section class="about-layout2">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-6 lhh">
            <div class="">
              <div class="">
                <img width="600" height="400" src="{{ webp.get("/theme/hm_video_box.png", 70) }}" alt="about" class="img-fluid">
              </div><!-- /.about-img -->
            </div>
            <div class="video-boxX">
              <a class="video-btn video-btn-white popup-video" href="https://www.youtube.com/watch?v=VFkXhAPnD7Q">
                <div class="video-btn__player">
                  <i class="fa fa-play"></i>
                </div>
              </a>
            </div><!-- /.video__box -->
          </div><!-- /.col-xl-5 -->
          <div class="col-sm-12 col-md-12 col-lg-6">
            <div class="text-container heading-layout2">
              <div class="heading__title">En Modern ve En Sağlam Çözümlerle Projelerimizi Hayata Geçiriyoruz</div>
              <p class="heading__desc mt-30 mb-30">Prefabrike konutlar, şantiye binaları, sosyal tesisler, hastaneler, okullar, ofis ve yaşam konteynerleri, çelik konstrüksiyon yapıları Villa Yapı olarak en sağlam şekilde üretiyoruz.
              </p>
              <p class="heading__desc mb-30">Yurt içinde ve yurt dışında müşterilerimize, 20 yılı aşkın süredir başarıyla hizmet veriyoruz.<br>
Müşteri memnuniyetini esas alarak çalışan teknik ve idari personellerimiz, müşteri ihtiyaçları doğrultusunda hızlı ve kaliteli çözümler sunmaktadır.
</p>
              <ul class="list-items list-unstyled mb-40">
                <li>Kaliteyi standart ölçü olarak gören bir anlayışla AR-GE çalışmalarımız son teknolojilerle takip edilir.</li>
                <li>Üretimlerimizde kullanılan tüm metal aksam, tamamen galvaniz olup paslanmazlık özelliğine sahiptir.</li>
                <li>Yapılacak olan projelerde bölgenin iklim şartları göz önüne alınır. Statik hesaplamalar yapılarak projeye başlanır.</li>
              </ul>

            </div><!-- /heading -->
          </div><!-- /.col-xl-7 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.About Layout 2 -->

    <!-- ========================
        Services Layout 2
    =========================== -->
    <style>
    @media (min-width: 1200px){
.services-layout2 .slick-slider {
    width: 100%;
}
}

    @media (min-width: 1500px){
.services-layout2 .slick-slider {
    width: 125%!important;
}
}
section.references {
    padding-top: 0px;
}
.col-12.hm_tab_title.text-center.mb-3 {
    font-size: 25px;
    color: #000;
    font-weight: 700;
    padding-bottom: 20px;
    letter-spacing: 2px;
}
    </style>

    
<section class="references">
    <div class="row mb-3">
        <div class="col-12 hm_tab_title text-center mb-3">REFERANSLARIMIZ</div>
    </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <!-- Görselleri çoğaltıldı -->
                    <div class="swiper-slide">
                        <img src="{{ webp.get('/referanslar-kurumsal/63.jpg', 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ webp.get("/referanslar-kurumsal/01.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ webp.get("/referanslar-kurumsal/02.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ webp.get("/referanslar-kurumsal/08.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ webp.get("/referanslar-kurumsal/15.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ webp.get("/referanslar-kurumsal/11.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                       <img src="{{ webp.get("/referanslar-kurumsal/09.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                    <div class="swiper-slide">
                         <img src="{{ webp.get("/referanslar-kurumsal/18.png", 70) }}" height="80" width="130" alt="client">
                    </div>
                  
                    <!-- Daha fazla görsel eklenebilir -->
                </div>
            </div>
 
</section>

  <section class="services-layout2 pb-90 uptade">
    <div class="image-wrapper">
        <img class="uptade-maps" src="{{ webp.get('/harita-uptade-2.png', 70) }}" alt="banner" loading="lazy">
        <div id="counter" class="counter">1.545.000 m<sup>2</sup></div>
    </div>
    <img class="uptade-maps" src="{{ webp.get('/harita-uptade.png', 70) }}" alt="banner" loading="lazy">
</section>


<script>
document.addEventListener("DOMContentLoaded", function() {
    const counterElement = document.getElementById("counter");
    const start = 0;
    const end = 1545234;
    const duration = 2000; 
    const increment = (end - start) / (duration / 100); 

    let current = start;
    let interval;

    const startCounter = () => {
        interval = setInterval(() => {
            current += increment;
            if (current >= end) {
                current = end;
                clearInterval(interval);
            }
            const displayNumber = current.toFixed(0).padStart(7, '0');
            counterElement.textContent = `${displayNumber.slice(0, 1)}.${displayNumber.slice(1, 4)}.${displayNumber.slice(4, 7)} m²`;
        }, 100);
    };

    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
            startCounter();
            observer.unobserve(counterElement);
        }
    });

    observer.observe(counterElement);
});
</script>


<style>
section.services-layout2.pb-90.uptade {
    padding-top: 0px;
    padding-bottom: 0px !important;
}
img.uptade-maps {
    width: 100%;
    height: auto;
    max-height:820px;
}
.swiper-slide{
  text-align: center;  
}

  .bg-img.new {
    position: relative;
  }
.services-layout2 {
    position: relative;
}

.image-wrapper {
    position: relative;
    
}

.counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    font-weight: bold;
    color: #000;
}
@media screen and (max-width: 780px) {
.counter {
    font-size: 30px;
}
div.heading__title {
    font-size: 25px;
}
}

</style><!-- /.Services Layout 2 -->

    <!-- =====================
         Clients
      ======================== -->
    
    <!-- =========================
         Banner layout 1
        =========================== -->
<!-- /.Banner layout 1 -->

    <!-- =========================== 
      portfolio standard carousel
    ============================= -->
    <section class="portfolio-standard portfolio-standard-carousel pt-100 pb-60 bg-gray">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-6">
            <div class="heading mb-40">
              <div class="heading__title">Referans Projelerimiz</div>
            </div><!-- /.heading -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
       <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="slick-carousel"
              data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "arrows": true, "dots": true, "responsive": [ {"breakpoint": 992, "settings": {"slidesToShow": 2}}, {"breakpoint": 767, "settings": {"slidesToShow": 2}}, {"breakpoint": 480, "settings": {"slidesToShow": 1}}]}'>
           
           
           {% for item in hm_projects %}
              <!-- portfolio item #1 -->
              <div class="portfolio-item">
                <div class="portfolio-item__img">
                  <a class="popup-gallery-itemm" href="{{ "/tr/proje"|_ }}/{{ item.slug }}/">
                    <img height="226" width="339" src="{{ webp.get(item.cover, 70) }}" alt="portfolio img">
                  </a>
                </div><!-- /.portfolio-img -->
                <div class="portfolio-item__content">
                  <div class="portfolio-item__cat">
                  </div><!-- /.portfolio-cat -->
                  <div class="portfolio-item__title text-center"><a href="{{ "/tr/proje"|_ }}/{{ item.slug }}/">{{ item.name }}</a>
                  </div>
                  <a href="{{ "/tr/proje"|_ }}/{{ item.slug }}/" class="btn btn__loadMore blue">
                    <i class="icon-arrow-right"></i> <span>Hemen İnceleyin</span>
                  </a>
                </div><!-- /.portfolio-content -->
              </div><!-- /.portfolio-item -->
              {% endfor %}
   
     
            </div><!-- /.slick-carousel -->
          </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.portfolio standard carousel -->
<style>
section.blog-grid.pb-60.uptade {
    padding-top: 30px;
}
</style>
    <section class="blog-grid pb-60 uptade">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
            <div class="heading text-center mb-50">
              <div class="heading__title">Bizden Haberler</div>
              <span class="divider-line mx-auto"></span>
            </div><!-- /.heading -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <div class="row">
         {% for item in news %}
          <!-- Blog Item #1 -->
          <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="post-item">
              <div class="post-item__img">
                <a href="{{ "/tr/bizden-haberler"|_ }}/{{ item.slug }}/">
                  <img height="226" width="339" src="{{ webp.get(item.cover, 70) }}" alt="blog image">
                </a>
              </div><!-- /.blog-img -->
              <div class="post-item__content">
                <div class="post-item__meta d-flex flex-wrap align-items-center">
                  <span class="post-item__meta-date">{{ item.created_at }}</span>
                  <div class="post-item__meta-cat">
                    
                  </div><!-- /.blog-meta-cat -->
                </div><!-- /.blog-meta -->
                <div class="post-item__title hmcss"><a href="{{ "/tr/bizden-haberler"|_ }}/{{ item.slug }}/">{{ item.name }}</a>
                </div>
                <p class="post-item__dessc hmcsss">

                </p>
                <a href="{{ "/tr/bizden-haberler"|_ }}/{{ item.slug }}/" class="btn btn__secondary btn__link orange">
                  <i class="icon-arrow-right"></i>
                  <span>Devamını Oku</span>
                </a>
              </div><!-- /.blog-content -->
            </div><!-- /.post-item -->
          </div><!-- /.col-lg-4 -->
          {% endfor %}
        
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.blog Grid -->