web-site/Projects/Frontend/Views/pisiV4/Home/main.wizard.php

<!-- === HERO ALANI === -->
<section class="hero-section">
  <div class="container">
    <div class="row align-items-center gy-5 mt-1">
      <!-- Sol: Başlık ve Butonlar -->
      <div class="col-12 col-lg-6">
        <div class="hero-badge">
          <i class="fa fa-star-of-david"></i>
          <span>Özgür & Açık Kaynak</span>
        </div>

        <h1 class="hero-title">
          <span class="gradient-text">Özgürlük</span><br>
          Şimdi Başladı.
        </h1>

        <p class="hero-desc">
          {{lang('pisiV2/mainpage','content1')}}
        </p>

        <div class="hero-buttons">
          <a href="https://download.pisilinux.og" class="btn-modern btn-modern-primary" id="hero-download-btn">
            <i class="fa fa-download"></i>
            Hemen İndir
          </a>
          <a href="https://wiki.pisilinux.og" class="btn-modern btn-modern-secondary" id="hero-wiki-btn">
            <i class="fa fa-book-open"></i>
            Belgeleri İncele
          </a>
        </div>

        <div class="hero-stats text-center">
          <div>
            <span class="hero-stat-value">12+</span>
            <span class="hero-stat-label">Yıllık Deneyim</span>
          </div>
          <div>
            <span class="hero-stat-value">15K+</span>
            <span class="hero-stat-label">Aktif Kullanıcı</span>
          </div>
          <div>
            <span class="hero-stat-value">5K+</span>
            <span class="hero-stat-label">Paket</span>
          </div>
        </div>
      </div>

      <!-- Sağ: Görsel -->
      <div class="col-12 col-lg-6">
        <div class="hero-visual">
          <div class="rhero-glow"></div>
          <div class="dhero-img-wrapper">
            <img src="{{URL::base()}}img/mainpage/download_img.png" alt="Pisi Linux Masaüstü" loading="eager" fetchpriority="high">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- === OZELLIK ALANI === -->
<section class="ozellik-alani">
  <div class="container">
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <div class="ozellik-card glass-card p-4">
          <div class="ozellik-img-wrap">
            <img src="img/BODY/ozellik-alani/img1_ozgur_kedi.jpg" alt="{{lang('pisiV2/mainpage','title1')}}" loading="lazy">
          </div>
          <h4>{{lang('pisiV2/mainpage','title1')}}</h4>
          <p>{{lang('pisiV2/mainpage','content1')}}</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="ozellik-card glass-card p-4">
          <div class="ozellik-img-wrap">
            <img src="img/BODY/ozellik-alani/img2_teknoloji.jpg" alt="{{lang('pisiV2/mainpage','title2')}}" loading="lazy">
          </div>
          <h4>{{lang('pisiV2/mainpage','title2')}}</h4>
          <p>{{lang('pisiV2/mainpage','content2')}}</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="ozellik-card glass-card p-4">
          <div class="ozellik-img-wrap">
            <img src="img/BODY/ozellik-alani/img3_hizli_pc.jpg" alt="{{lang('pisiV2/mainpage','title3')}}" loading="lazy">
          </div>
          <h4>{{lang('pisiV2/mainpage','title3')}}</h4>
          <p>{{lang('pisiV2/mainpage','content3')}}</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- === ÖZELLİK KARTLARI === -->
<section class="features-section">
  <div class="container">
    <div class="text-center mb-5">
      <span class="section-label">Neden Pisi Linux?</span>
      <h2 class="section-title">{{lang('pisiV2/mainpage','spot1')}}</h2>
      <p class="section-desc mx-auto">Topluluk gücüyle büyüyen, hızlı ve güvenli bir GNU/Linux deneyimi.</p>
    </div>

    <div class="row g-4 justify-content-center">
      <div class="col-12 col-md-6">
        <div class="feature-card">
          <div class="feature-header">
            <div class="feature-icon"><i class="fa fa-unlock-alt"></i></div>
            <h4>Evde ve Ofiste</h4>
          </div>
          <p>LibreOffice'in kapsamlı ofis paketiyle belgelerinizi yazabilir, sunumlar hazırlayabilir, çizimler yapabilir, tablolar ve veritabanları oluşturabilirsiniz.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="feature-card">
          <div class="feature-header">
            <div class="feature-icon"><i class="fa fa-bolt"></i></div>
            <h4>Eğlence Elinizin Altında</h4>
          </div>
          <p>Müziğinizin keyfini çıkarın, TV ve filmleri rahatça izleyin. Gelişmiş medya desteği sayesinde ses ve görüntü dosyalarınızı sorunsuz oynatabilirsiniz.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="feature-card">
          <div class="feature-header">
            <div class="feature-icon"><i class="fa fa-users"></i></div>
            <h4>Yaratıcılığınızı Özgürce Kullanın</h4>
          </div>
          <p>Pisi GNU/Linux'un hızlı ve kararlı yapısı sayesinde Blender ile 3D projeler geliştirin, Krita veya Gimp ile çizim yapın, Inkscape ile vektör grafikler oluşturun.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="feature-card">
          <div class="feature-header">
            <div class="feature-icon"><i class="fa fa-shield-alt"></i></div>
            <h4>Oyun Dünyası Sizinle</h4>
          </div>
          <p>Steam ve birçok özgür oyun desteğiyle Pisi GNU/Linux'unuzu bir oyun merkezine çevirin, eğlence her zaman elinizin altında.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- === SPOT BANT (CTA) === -->
<section class="spot-section">
  <div class="container">
    <p>{{lang('pisiV2/mainpage','spot2')}}</p>
  </div>
</section>

<!-- === TANITIM ALANLARI === -->
<section class="showcase-section">
  <div class="container">

    <!-- Tanitim 1 -->
    <div class="row align-items-center gy-5 mb-5">
      <div class="col-12 col-lg-6 showcase-text">
        <h2>{{lang('pisiV2/mainpage','title8')}}</h2>
        <p>{{lang('pisiV2/mainpage','content8')}}</p>
        <!-- <a href="https://wiki.pisilinux.og" class="btn-modern btn-modern-secondary mt-4 d-inline-flex">
          Daha Fazla Bilgi <i class="fa fa-arrow-right ms-2"></i>
        </a> -->
      </div>
      <div class="col-12 col-lg-6">
        <div class="showcase-img-wrapper">
          <img src="{{URL::base('img/mainpage/tanitim1.png')}}" alt="{{lang('pisiV2/mainpage','title8')}}" loading="lazy">
        </div>
      </div>
    </div>

    
    <!-- Tanitim 2 -->
    <div class="row align-items-center gy-5 mb-5">
      <div class="col-12 col-lg-6 order-lg-2 showcase-text">
        <h2>{{lang('pisiV2/mainpage','title9')}}</h2>
        <p>{{lang('pisiV2/mainpage','content9')}}</p>
        <!-- <a href="https://wiki.pisilinux.og" class="btn-modern btn-modern-secondary mt-4 d-inline-flex">
          Daha Fazla Bilgi <i class="fa fa-arrow-right ms-2"></i>
        </a> -->
      </div>
      <div class="col-12 col-lg-6 order-lg-1">
        <div class="showcase-img-wrapper">
          <img src="{{URL::base('img/mainpage/tanitim2.png')}}" alt="{{lang('pisiV2/mainpage','title9')}}" loading="lazy">
        </div>
      </div>
    </div>

    <!-- Tanitim 3 -->
    <div class="row align-items-center gy-5">
      <div class="col-12 col-lg-6 showcase-text">
        <h2>{{lang('pisiV2/mainpage','title10')}}</h2>
        <p>{{lang('pisiV2/mainpage','content10')}}</p>
        <!-- <a href="https://wiki.pisilinux.og" class="btn-modern btn-modern-secondary mt-4 d-inline-flex">
          Daha Fazla Bilgi <i class="fa fa-arrow-right ms-2"></i>
        </a> -->
      </div>
      <div class="col-12 col-lg-6">
        <div class="showcase-img-wrapper">
          <img src="{{URL::base('img/mainpage/tanitim3.png')}}" alt="{{lang('pisiV2/mainpage','title10')}}" loading="lazy">
        </div>
      </div>
    </div>

  </div>
</section>

<!-- === SON BLOG YAZILARI === -->
<section class="blog-section section-bg-alt">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="section-title">Son Blog Yazıları</h2>
    </div>
    <div class="row g-4">
      @foreach ($blogList as $key)
      <div class="col-12 col-md-6 col-lg-4 d-flex">
        <div class="blog-card w-100">
          <div class="blog-card-img">
            <img src="{{content_image($key->content)}}" alt="{{$key->title}}" loading="lazy">
            <div class="blog-date-badge">
              <span>{{date('d', strtotime($key->create_date))}}</span>
              <small>{{date('M', strtotime($key->create_date))}}</small>
            </div>
          </div>
          <div class="blog-card-body">
            <div class="blog-meta">
              <a href="#"><i class="far fa-user"></i> {{editor($key->editor)}}</a>
            </div>
            <h4>{{$key->title}}</h4>
            <p>{{mb_substr(strip_tags($key->content), 0, 120)}}...</p>
            <a href="https://blog.pisilinux.og/content/{{$key->id}}-{{$key->title_seo}}.html" class="blog-read-more">
              Devamını Oku <i class="fa fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>