Advanced, Colorful & Animated Card UI Component

<!--
Bileşen Başlığı: Gelişmiş, Renkli ve Animasyonlu UI Kart Bileşenleri (Görsellerle)
Açıklama: Bu bileşen, Bootstrap ve Iconify kullanılarak oluşturulmuş; zengin renk paleti, gradient arka planlar ve animasyon efektleriyle desteklenmiş gelişmiş UI kart bileşenlerini içerir. Kartlarda demo lorem ipsum metinleri ile birlikte belirtilen görseller kullanılmıştır.
-->

<!-- CDN Linkleri -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Özel Bileşen Stilleri -->
<style>
  #impressive-ui-cards {
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  }
  #impressive-ui-cards .card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: fadeIn 0.5s ease forwards;
  }
  #impressive-ui-cards .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  }
  #impressive-ui-cards .card-img-top {
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  #impressive-ui-cards .card:hover .card-img-top {
    transform: scale(1.05);
  }
  #impressive-ui-cards .card-header {
    background: linear-gradient(90deg, #4e73df, #1cc88a);
    color: #fff;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    transition: background 0.3s ease;
  }
  #impressive-ui-cards .card-body {
    padding: 1.5rem;
  }
  #impressive-ui-cards .card-title {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }
  #impressive-ui-cards .card-title .iconify {
    margin-right: 0.5rem;
    font-size: 1.75rem;
    transition: transform 0.3s ease;
  }
  #impressive-ui-cards .card-title:hover .iconify {
    transform: rotate(360deg);
  }
  #impressive-ui-cards .card-text {
    color: #6c757d;
  }
  #impressive-ui-cards .btn {
    transition: background 0.3s ease, transform 0.3s ease;
  }
  #impressive-ui-cards .btn:hover {
    transform: scale(1.05);
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<!-- Bileşen HTML -->
<div id="impressive-ui-cards">
  <div class="container">
    <div class="row g-4">
      <!-- Kart 1 -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <span class="iconify me-2" data-icon="mdi:account-circle" data-inline="false"></span>
            Lorem ipsum
          </div>
          <img src="https://terralogic.com/wp-content/uploads/2023/10/Banner1-1024x440.webp" class="card-img-top" alt="Lorem ipsum">
          <div class="card-body">
            <h5 class="card-title">
              <span class="iconify" data-icon="mdi:chart-line" data-inline="false"></span>
              Lorem ipsum dolor sit amet
            </h5>
            <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <a href="#" class="btn btn-primary">
              <span class="iconify me-1" data-icon="mdi:arrow-right-bold" data-inline="false"></span>
              Lorem ipsum
            </a>
          </div>
        </div>
      </div>
      <!-- Kart 2 -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <span class="iconify me-2" data-icon="mdi:chart-bar" data-inline="false"></span>
            Lorem ipsum
          </div>
          <img src="https://images.ctfassets.net/aq13lwl6616q/75XmCBS35kqsky2S2mtuoP/6938210a367b1e151bcd9edb69b842a5/image.png" class="card-img-top" alt="Lorem ipsum">
          <div class="card-body">
            <h5 class="card-title">
              <span class="iconify" data-icon="mdi:email-outline" data-inline="false"></span>
              Lorem ipsum dolor
            </h5>
            <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.
            </p>
            <a href="#" class="btn btn-success">
              <span class="iconify me-1" data-icon="mdi:arrow-right-bold" data-inline="false"></span>
              Lorem ipsum
            </a>
          </div>
        </div>
      </div>
      <!-- Kart 3 -->
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            <span class="iconify me-2" data-icon="mdi:phone" data-inline="false"></span>
            Lorem ipsum
          </div>
          <img src="https://www.salesforce.com/blog/wp-content/uploads/sites/2/2024/01/ux_design_principles_2024-1.png?w=889" class="card-img-top" alt="Lorem ipsum">
          <div class="card-body">
            <h5 class="card-title">
              <span class="iconify" data-icon="mdi:send" data-inline="false"></span>
              Lorem ipsum dolor sit
            </h5>
            <p class="card-text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.
            </p>
            <a href="#" class="btn btn-danger">
              <span class="iconify me-1" data-icon="mdi:arrow-right-bold" data-inline="false"></span>
              Lorem ipsum
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>