Replace placeholder images with placeholder.co images

Replaced placeholder images in index.html, product.html, and data.js with images from placeholder.co. Updated image dimensions to match the layout.

data.js

@@ -5,20 +5,20 @@ const products = [
     name: "Product 1",
     description: "This is the first product.",
     price: 25.00,
-    image: "https://placehold.co/600x400/png"
+    image: "https://placeholder.co/200x300"
   },
   {
     id: "2",
     name: "Product 2",
     description: "This is the second product.",
     price: 50.00,
-    image: "https://placehold.co/600x400/png"
+    image: "https://placeholder.co/200x300"
   },
   {
     id: "3",
     name: "Product 3",
     description: "This is the third product.",
     price: 75.00,
-    image: "https://placehold.co/600x400/png"
+    image: "https://placeholder.co/200x300"
   }
 ];

index.html

@@ -26,13 +26,13 @@
         
         <div class="carousel">
             <div class="carousel-item">
-                <img src="https://picsum.photos/id/237/800/300" alt="Featured Product 1" class="w-full rounded-md">
+                <img src="https://placeholder.co/800x300" alt="Featured Product 1" class="w-full rounded-md">
             </div>
             <div class="carousel-item">
-                <img src="https://picsum.photos/id/238/800/300" alt="Featured Product 2" class="w-full rounded-md">
+                <img src="https://placeholder.co/800x300" alt="Featured Product 2" class="w-full rounded-md">
             </div>
             <div class="carousel-item">
-                <img src="https://picsum.photos/id/239/800/300" alt="Featured Product 3" class="w-full rounded-md">
+                <img src="https://placeholder.co/800x300" alt="Featured Product 3" class="w-full rounded-md">
             </div>
         </div>
 
@@ -41,7 +41,7 @@
             <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
                 <!-- Product 1 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/10/200/300" alt="Product 1" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 1" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 1</h3>
                     <p class="text-gray-600">$19.99</p>
                     <div class="flex items-center">
@@ -55,7 +55,7 @@
                 </div>
                 <!-- Product 2 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/11/200/300" alt="Product 2" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 2" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 2</h3>
                     <p class="text-gray-600">$29.99</p>
                      <div class="flex items-center">
@@ -69,7 +69,7 @@
                 </div>
                 <!-- Product 3 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/12/200/300" alt="Product 3" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 3" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 3</h3>
                     <p class="text-gray-600">$39.99</p>
                     <div class="flex items-center">
@@ -83,7 +83,7 @@
                 </div>
                 <!-- Product 4 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/13/200/300" alt="Product 4" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 4" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 4</h3>
                     <p class="text-gray-600">$49.99</p>
                     <div class="flex items-center">
@@ -97,7 +97,7 @@
                 </div>
                 <!-- Product 5 -->
                  <div class="product-card">
-                    <img src="https://picsum.photos/id/14/200/300" alt="Product 5" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 5" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 5</h3>
                     <p class="text-gray-600">$59.99</p>
                     <div class="flex items-center">
@@ -111,7 +111,7 @@
                 </div>
                 <!-- Product 6 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/15/200/300" alt="Product 6" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 6" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 6</h3>
                     <p class="text-gray-600">$69.99</p>
                     <div class="flex items-center">
@@ -125,7 +125,7 @@
                 </div>
                 <!-- Product 7 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/16/200/300" alt="Product 7" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 7" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 7</h3>
                     <p class="text-gray-600">$79.99</p>
                     <div class="flex items-center">
@@ -139,7 +139,7 @@
                 </div>
                 <!-- Product 8 -->
                 <div class="product-card">
-                    <img src="https://picsum.photos/id/17/200/300" alt="Product 8" class="w-full rounded-md">
+                    <img src="https://placeholder.co/200x300" alt="Product 8" class="w-full rounded-md">
                     <h3 class="text-lg font-semibold">Product 8</h3>
                     <p class="text-gray-600">$89.99</p>
                     <div class="flex items-center">

product.html

@@ -27,12 +27,12 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
                 <div class="image-gallery">
-                    <img src="https://picsum.photos/id/101/400/400" alt="Product Image 1" class="w-full rounded-md mb-2">
+                    <img src="https://placeholder.co/400x400" alt="Product Image 1" class="w-full rounded-md mb-2">
                     <div class="grid grid-cols-4 gap-2">
-                        <img src="https://picsum.photos/id/102/100/100" alt="Product Image 2" class="w-full rounded-md">
-                        <img src="https://picsum.photos/id/103/100/100" alt="Product Image 3" class="w-full rounded-md">
-                        <img src="https://picsum.photos/id/104/100/100" alt="Product Image 4" class="w-full rounded-md">
-                        <img src="https://picsum.photos/id/105/100/100" alt="Product Image 5" class="w-full rounded-md">
+                        <img src="https://placeholder.co/100x100" alt="Product Image 2" class="w-full rounded-md">
+                        <img src="https://placeholder.co/100x100" alt="Product Image 3" class="w-full rounded-md">
+                        <img src="https://placeholder.co/100x100" alt="Product Image 4" class="w-full rounded-md">
+                        <img src="https://placeholder.co/100x100" alt="Product Image 5" class="w-full rounded-md">
                     </div>
                 </div>
             </div>