كروت المتاجر

<article class="card p-product">
<div class="p-product-art">
<img src="assets/products/headphones.svg" alt="سماعات نوفا" width="400" height="320">
<span class="p-badge">الأكثر مبيعًا</span>
<button class="icon-button" data-wishlist="1" aria-label="حفظ المنتج: سماعات نوفا" aria-pressed="false">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v16m0-16C8 2 4 3 2 4v15c3-1 6-1 10 2 4-3 7-3 10-2V4c-3-1-6-2-10 1Z"/>
</svg>
</button>
</div>
<div class="p-product-info">
<small>إلكترونيات</small>
<h2>سماعات نوفا</h2>
<div class="p-product-price">
<strong>‏149 US$</strong>
<span class="p-rating" aria-label="التقييم">★ 4.8 <span class="muted">(49)</span>
</span>
</div>
<button class="btn btn-primary" data-add-cart="1" >
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>أضف لسلة التجربة</button>
<div class="p-product-tools">
<a class="btn btn-secondary btn-sm" href="pages/commerce/product-edit.html?id=1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m14 5 5 5m-15 5 11-11a3.5 3.5 0 0 1 5 5L9 20l-6 1 1-6Z"/>
</svg>تعديل</a>
<button class="btn btn-outline btn-sm" data-product-detail="1">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="10.5" cy="10.5" r="6.5"/>
<path d="m16 16 5 5"/>
</svg>معاينة</button>
</div>
</div>
</article>

<div class="p-promo">
<div>
<small>HANEENWEB COLLECTION</small>
<h2>مجموعة تستحق الاختيار.</h2>
<p>أساسيات جميلة لمساحة عملك اليومية.</p>
<a class="btn btn-primary" href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>تصفح المجموعة</a>
</div>
<img src="assets/products/chair.svg" alt="كرسي فورما">
</div>