بناء تخطيطات البطاقات والشبكات

بناء تخطيطات البطاقات والشبكات

أتقن فن بناء مكونات بطاقات مرنة ومتجاوبة وتخطيطات شبكية مع Tailwind CSS. تعلم أنماط المكونات، أنظمة الشبكة، وتأثيرات التمرير المتقدمة لواجهات الويب الحديثة.

مكون البطاقة الأساسي

ابدأ بهيكل بطاقة بسيط يعمل كأساس:

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="/image.jpg" alt="Card image">

  <div class="px-6 py-4">
    <h3 class="font-bold text-xl mb-2 text-gray-900">
      Card Title
    </h3>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
    </p>
  </div>

  <div class="px-6 pt-4 pb-6">
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
      Read More
    </button>
  </div>
</div>

بطاقة مع شارة ووسوم

حسّن البطاقات بالشارات والوسوم والبيانات الوصفية:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white hover:shadow-2xl transition-shadow duration-300">
  <div class="relative">
    <img class="w-full h-48 object-cover" src="/image.jpg" alt="Product">

    <!-- تراكب شارة -->
    <div class="absolute top-2 right-2">
      <span class="bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full">
        NEW
      </span>
    </div>
  </div>

  <div class="px-6 py-4">
    <!-- شارة الفئة -->
    <span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-full mb-2">
      Technology
    </span>

    <h3 class="font-bold text-xl mb-2 text-gray-900 hover:text-blue-600 cursor-pointer transition-colors">
      Ultimate Guide to Web Development
    </h3>

    <p class="text-gray-600 text-sm mb-4">
      Learn the fundamentals of modern web development with this comprehensive guide covering HTML, CSS, and JavaScript.
    </p>

    <!-- معلومات وصفية -->
    <div class="flex items-center text-xs text-gray-500 mb-4">
      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
      </svg>
      <span>March 15, 2024</span>

      <span class="mx-2">•</span>

      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path>
      </svg>
      <span>1.2k views</span>
    </div>

    <!-- الوسوم -->
    <div class="flex flex-wrap gap-2">
      <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#webdev</span>
      <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#tutorial</span>
      <span class="bg-gray-100 text-gray-700 text-xs px-2 py-1 rounded">#coding</span>
    </div>
  </div>

  <div class="px-6 pb-4 border-t border-gray-100 pt-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="/avatar.jpg" alt="Author">
        <div>
          <p class="text-sm font-semibold text-gray-900">John Doe</p>
          <p class="text-xs text-gray-500">Web Developer</p>
        </div>
      </div>

      <button class="text-blue-600 hover:text-blue-700 font-semibold text-sm">
        Read More →
      </button>
    </div>
  </div>
</div>

تخطيط بطاقة أفقية

أنشئ بطاقات تعرض المحتوى جنباً إلى جنب:

<div class="max-w-2xl bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
  <div class="md:flex">
    <!-- قسم الصورة -->
    <div class="md:w-1/3">
      <img class="w-full h-full object-cover" src="/product.jpg" alt="Product">
    </div>

    <!-- قسم المحتوى -->
    <div class="md:w-2/3 p-6">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">
          Featured
        </span>
        <span class="text-2xl font-bold text-gray-900">
          $299
        </span>
      </div>

      <h3 class="text-xl font-bold text-gray-900 mb-2">
        Premium Wireless Headphones
      </h3>

      <p class="text-gray-600 text-sm mb-4">
        Experience crystal-clear audio with our premium wireless headphones. Featuring active noise cancellation and 30-hour battery life.
      </p>

      <!-- قائمة الميزات -->
      <ul class="space-y-2 mb-4">
        <li class="flex items-center text-sm text-gray-700">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          Active Noise Cancellation
        </li>
        <li class="flex items-center text-sm text-gray-700">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          30-Hour Battery Life
        </li>
        <li class="flex items-center text-sm text-gray-700">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
          Premium Sound Quality
        </li>
      </ul>

      <div class="flex gap-2">
        <button class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
          Add to Cart
        </button>
        <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

شبكة بطاقات متجاوبة

أنشئ تخطيطات شبكية تتكيف مع أحجام شاشات مختلفة:

<div class="container mx-auto px-4 py-8">
  <h2 class="text-3xl font-bold text-gray-900 mb-8">Featured Products</h2>

  <!-- شبكة: عمود واحد على المحمول، 2 على التابلت، 3 على سطح المكتب، 4 على xl -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    <!-- بطاقة 1 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img class="w-full h-48 object-cover" src="/product1.jpg" alt="Product 1">
      <div class="p-4">
        <h3 class="font-semibold text-lg mb-2">Product Name</h3>
        <p class="text-gray-600 text-sm mb-3">Short description goes here</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900">$49.99</span>
          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- بطاقة 2 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
      <img class="w-full h-48 object-cover" src="/product2.jpg" alt="Product 2">
      <div class="p-4">
        <h3 class="font-semibold text-lg mb-2">Product Name</h3>
        <p class="text-gray-600 text-sm mb-3">Short description goes here</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900">$79.99</span>
          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- كرر البطاقات... -->
  </div>
</div>

تخطيط بنمط البناء

أنشئ شبكات بناء بنمط Pinterest مع ارتفاعات متفاوتة:

<!-- استخدام الأعمدة لتأثير البناء -->
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
  <!-- بطاقة 1 - قصيرة -->
  <div class="break-inside-avoid">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
      <img class="w-full h-auto" src="/tall-image.jpg" alt="Image">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">Short Card</h3>
        <p class="text-gray-600 text-sm">Brief description.</p>
      </div>
    </div>
  </div>

  <!-- بطاقة 2 - طويلة -->
  <div class="break-inside-avoid">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
      <img class="w-full h-auto" src="/very-tall-image.jpg" alt="Image">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">Tall Card</h3>
        <p class="text-gray-600 text-sm">
          Much longer description that takes up more vertical space in the layout...
        </p>
      </div>
    </div>
  </div>

  <!-- بطاقة 3 - متوسطة -->
  <div class="break-inside-avoid">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
      <img class="w-full h-auto" src="/medium-image.jpg" alt="Image">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">Medium Card</h3>
        <p class="text-gray-600 text-sm">
          Medium length description here.
        </p>
      </div>
    </div>
  </div>

  <!-- المزيد من البطاقات... -->
</div>

بطاقات قسم الميزات

ابنِ بطاقات ميزات لصفحات الهبوط ومواقع التسويق:

<div class="bg-gray-50 py-16">
  <div class="max-w-7xl mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Us</h2>
      <p class="text-lg text-gray-600">Discover the features that make us stand out</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- ميزة 1 -->
      <div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
        <p class="text-gray-600 leading-relaxed">
          Our platform is optimized for speed, delivering your content in milliseconds.
        </p>
      </div>

      <!-- ميزة 2 -->
      <div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-3">Secure & Private</h3>
        <p class="text-gray-600 leading-relaxed">
          Your data is encrypted and protected with industry-leading security measures.
        </p>
      </div>

      <!-- ميزة 3 -->
      <div class="bg-white rounded-xl p-8 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
          <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-900 mb-3">Affordable Pricing</h3>
        <p class="text-gray-600 leading-relaxed">
          Get enterprise features at a fraction of the cost with our flexible plans.
        </p>
      </div>
    </div>
  </div>
</div>

بطاقات التسعير

أنشئ تخطيطات بطاقات تسعير لخطط الاشتراك:

<div class="bg-gray-50 py-16">
  <div class="max-w-7xl mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold text-gray-900 mb-4">Choose Your Plan</h2>
      <p class="text-lg text-gray-600">Select the perfect plan for your needs</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- خطة أساسية -->
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
        <div class="p-8">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">Basic</h3>
          <p class="text-gray-600 mb-6">Perfect for individuals</p>

          <div class="mb-6">
            <span class="text-5xl font-bold text-gray-900">$9</span>
            <span class="text-gray-600">/month</span>
          </div>

          <ul class="space-y-4 mb-8">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">10 Projects</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">5GB Storage</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">Email Support</span>
            </li>
          </ul>

          <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold py-3 px-6 rounded-lg transition-colors">
            Get Started
          </button>
        </div>
      </div>

      <!-- خطة احترافية (مميزة) -->
      <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl shadow-2xl overflow-hidden transform scale-105 relative">
        <div class="absolute top-0 right-0 bg-yellow-400 text-gray-900 text-xs font-bold px-4 py-1 rounded-bl-lg">
          POPULAR
        </div>

        <div class="p-8 text-white">
          <h3 class="text-2xl font-bold mb-2">Pro</h3>
          <p class="text-blue-100 mb-6">Best for professionals</p>

          <div class="mb-6">
            <span class="text-5xl font-bold">$29</span>
            <span class="text-blue-100">/month</span>
          </div>

          <ul class="space-y-4 mb-8">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span>Unlimited Projects</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span>50GB Storage</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span>Priority Support</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-white mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span>Advanced Analytics</span>
            </li>
          </ul>

          <button class="w-full bg-white hover:bg-gray-100 text-blue-600 font-semibold py-3 px-6 rounded-lg transition-colors">
            Get Started
          </button>
        </div>
      </div>

      <!-- خطة المؤسسة -->
      <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
        <div class="p-8">
          <h3 class="text-2xl font-bold text-gray-900 mb-2">Enterprise</h3>
          <p class="text-gray-600 mb-6">For large organizations</p>

          <div class="mb-6">
            <span class="text-5xl font-bold text-gray-900">$99</span>
            <span class="text-gray-600">/month</span>
          </div>

          <ul class="space-y-4 mb-8">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">Unlimited Everything</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">500GB Storage</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">24/7 Phone Support</span>
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
              </svg>
              <span class="text-gray-700">Custom Integrations</span>
            </li>
          </ul>

          <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-900 font-semibold py-3 px-6 rounded-lg transition-colors">
            Contact Sales
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

بطاقات الشهادات

ابنِ تخطيطات بطاقات شهادات مع اقتباسات وتقييمات:

<div class="bg-gray-900 py-16">
  <div class="max-w-7xl mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold text-white mb-4">What Our Customers Say</h2>
      <p class="text-lg text-gray-400">Real feedback from real users</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- شهادة 1 -->
      <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition-colors">
        <!-- تقييم النجوم -->
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
          <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
          <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
          <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
          <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
          </svg>
        </div>

        <!-- اقتباس -->
        <p class="text-gray-300 mb-6 leading-relaxed">
          "This product has completely transformed the way we work. The team is responsive and the features are exactly what we needed."
        </p>

        <!-- المؤلف -->
        <div class="flex items-center">
          <img class="w-12 h-12 rounded-full mr-4" src="/avatar1.jpg" alt="Sarah Johnson">
          <div>
            <p class="font-semibold text-white">Sarah Johnson</p>
            <p class="text-sm text-gray-400">CEO, TechCorp</p>
          </div>
        </div>
      </div>

      <!-- المزيد من بطاقات الشهادات... -->
    </div>
  </div>
</div>

تأثيرات التمرير المتقدمة

أضف تأثيرات تمرير تفاعلية لجعل البطاقات أكثر جاذبية:

<div class="group relative max-w-sm rounded-xl overflow-hidden shadow-lg bg-white cursor-pointer">
  <!-- صورة مع تراكب -->
  <div class="relative overflow-hidden">
    <img
      class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
      src="/image.jpg"
      alt="Card"
    >

    <!-- تراكب يظهر عند التمرير -->
    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <div class="absolute bottom-4 left-4 right-4">
        <button class="w-full bg-white text-gray-900 font-semibold py-2 px-4 rounded-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
          View Details
        </button>
      </div>
    </div>
  </div>

  <!-- المحتوى -->
  <div class="p-6">
    <div class="flex items-center justify-between mb-2">
      <span class="text-sm font-semibold text-blue-600">FEATURED</span>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
        </svg>
        <span class="text-sm font-semibold text-gray-700">4.8</span>
      </div>
    </div>

    <h3 class="font-bold text-xl mb-2 text-gray-900 group-hover:text-blue-600 transition-colors">
      Premium Product Name
    </h3>

    <p class="text-gray-600 text-sm mb-4">
      High-quality product description that highlights the key features and benefits.
    </p>

    <div class="flex items-center justify-between">
      <span class="text-2xl font-bold text-gray-900">$199</span>
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        Add to Cart
      </button>
    </div>
  </div>
</div>