Spaces:
Running
Running
File size: 2,527 Bytes
f9bf2f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
// Sample product data (in a real app, this would come from an API)
const products = [
{
id: 1,
name: "NVIDIA RTX 4090",
price: "15,999 MAD",
image: "http://static.photos/technology/640x360/1",
specs: "24GB GDDR6X | 16,384 CUDA Cores"
},
{
id: 2,
name: "AMD RX 7900 XTX",
price: "12,499 MAD",
image: "http://static.photos/technology/640x360/2",
specs: "24GB GDDR6 | 6,144 Stream Processors"
},
{
id: 3,
name: "NVIDIA RTX 4080",
price: "11,999 MAD",
image: "http://static.photos/technology/640x360/3",
specs: "16GB GDDR6X | 9,728 CUDA Cores"
},
{
id: 4,
name: "AMD RX 7800 XT",
price: "9,999 MAD",
image: "http://static.photos/technology/640x360/4",
specs: "16GB GDDR6 | 5,120 Stream Processors"
},
{
id: 5,
name: "NVIDIA RTX 4070 Ti",
price: "8,999 MAD",
image: "http://static.photos/technology/640x360/5",
specs: "12GB GDDR6X | 7,680 CUDA Cores"
},
{
id: 6,
name: "AMD RX 7700 XT",
price: "7,499 MAD",
image: "http://static.photos/technology/640x360/6",
specs: "12GB GDDR6 | 3,456 Stream Processors"
}
];
// Load featured products
document.addEventListener('DOMContentLoaded', () => {
const productsContainer = document.getElementById('featured-products');
products.forEach(product => {
const productCard = document.createElement('div');
productCard.className = 'product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300';
productCard.innerHTML = `
<div class="h-48 overflow-hidden">
<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover">
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-2">${product.name}</h3>
<p class="text-gray-600 mb-4">${product.specs}</p>
<div class="flex justify-between items-center">
<span class="text-primary font-bold text-lg">${product.price}</span>
<button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
Add to Cart
</button>
</div>
</div>
`;
productsContainer.appendChild(productCard);
});
}); |