Hugging Face's logo

Spaces:
Jaafarsa
/
undefined
Running

App Files Community
Jaafarsa commited on
Commit
d22a69c
·
verified ·
1 Parent(s): 3a9eaf2

add products features, we can choose which product the buyer like and add to my cart for buyer

Browse files
Files changed (2) hide show
  1. cart.html +116 -176
  2. index.html +63 -21
cart.html CHANGED
@@ -6,77 +6,75 @@
6
  <title>Your Cart - YourHand.co</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
- <script src="https://checkout.stripe.com/checkout.js"></script>
 
 
 
 
 
 
 
10
  </head>
11
  <body class="bg-gray-900 text-gray-100 min-h-screen">
12
- <!-- Navigation -->
13
  <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
14
  <div class="max-w-7xl mx-auto flex items-center justify-between">
15
  <div class="flex items-center space-x-2">
16
  <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
17
  <span class="text-2xl font-bold gradient-text">YourHand.co</span>
18
  </div>
19
- <div class="flex items-center space-x-4">
20
- <a href="cart.html" class="p-2 rounded-full hover:bg-gray-700 transition relative">
21
- <i data-feather="shopping-cart" class="w-5 h-5"></i>
22
- <span id="cartCounter" class="absolute -top-1 -right-1 bg-primary-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
23
- </a>
24
- <a href="login.html" class="p-2 rounded-full hover:bg-gray-700 transition">
25
- <i data-feather="user" class="w-5 h-5"></i>
26
- </a>
27
- </div>
28
  </div>
29
  </nav>
30
 
31
- <!-- Cart Section -->
32
- <section class="max-w-7xl mx-auto py-12 px-4">
33
  <h1 class="text-3xl font-bold mb-8">Your Shopping Cart</h1>
34
 
35
- <div class="flex flex-col lg:flex-row gap-8">
36
- <!-- Cart Items -->
37
- <div class="lg:w-2/3">
38
- <div id="cartItems" class="space-y-4">
39
- <!-- Cart items will be loaded here -->
40
- </div>
41
-
42
- <div class="mt-6">
43
- <a href="index.html" class="text-primary-500 hover:text-primary-400 flex items-center">
44
- <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i>
45
- Continue Shopping
46
- </a>
 
 
47
  </div>
48
  </div>
49
 
50
- <!-- Order Summary -->
51
- <div class="lg:w-1/3">
52
- <div class="bg-gray-800 rounded-xl p-6 sticky top-4">
53
- <h2 class="text-xl font-bold mb-6">Order Summary</h2>
54
 
55
  <div class="space-y-4 mb-6">
56
  <div class="flex justify-between">
57
  <span class="text-gray-400">Subtotal</span>
58
- <span id="subtotal">$0.00</span>
59
  </div>
60
  <div class="flex justify-between">
61
  <span class="text-gray-400">Shipping</span>
62
- <span id="shipping">$0.00</span>
63
- </div>
64
- <div class="flex justify-between">
65
- <span class="text-gray-400">Tax</span>
66
- <span id="tax">$0.00</span>
67
  </div>
68
- <div class="border-t border-gray-700 pt-4 flex justify-between font-bold text-lg">
69
- <span>Total</span>
70
- <span id="total">$0.00</span>
71
  </div>
72
  </div>
73
 
74
- <button id="checkoutBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition">
 
 
75
  Proceed to Checkout
76
  </button>
77
 
78
- <div class="mt-4 text-center text-sm text-gray-400">
79
- or <a href="index.html" class="text-primary-500 hover:text-primary-400">continue shopping</a>
80
  </div>
81
  </div>
82
  </div>
@@ -84,178 +82,120 @@
84
  </section>
85
 
86
  <script>
87
- // Initialize feather icons
88
  feather.replace();
89
-
90
  // Load cart from localStorage
91
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
 
 
92
  const cartItemsContainer = document.getElementById('cartItems');
93
- const cartCounter = document.getElementById('cartCounter');
 
 
 
94
 
95
- function renderCart() {
 
 
 
96
  if (cart.length === 0) {
97
  cartItemsContainer.innerHTML = `
98
- <div class="bg-gray-800 rounded-xl p-8 text-center">
99
- <i data-feather="shopping-cart" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
100
- <h3 class="text-xl font-bold mb-2">Your cart is empty</h3>
101
- <p class="text-gray-400 mb-4">Looks like you haven't added any items to your cart yet.</p>
102
- <a href="index.html" class="inline-block bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-6 rounded-lg transition">
103
- Start Shopping
104
- </a>
105
  </div>
106
  `;
107
- document.getElementById('checkoutBtn').disabled = true;
108
- updateTotals(0);
 
 
 
109
  return;
110
  }
111
 
112
- let html = '';
113
  let subtotal = 0;
114
 
115
  cart.forEach((item, index) => {
116
  const itemTotal = item.price * item.quantity;
117
  subtotal += itemTotal;
118
 
119
- html += `
120
- <div class="bg-gray-800 rounded-xl p-4 flex flex-col sm:flex-row">
121
- <div class="w-full sm:w-32 h-32 rounded-lg overflow-hidden mb-4 sm:mb-0 sm:mr-4">
 
 
122
  <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
123
  </div>
124
- <div class="flex-1 flex flex-col sm:flex-row">
125
- <div class="flex-1">
126
- <h3 class="font-bold mb-1">${item.name}</h3>
127
- <div class="flex items-center text-yellow-400 mb-2">
128
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
129
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
130
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
131
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
132
- <i data-feather="star" class="w-4 h-4"></i>
133
- <span class="text-gray-400 text-sm ml-1">(24)</span>
134
- </div>
135
- <div class="text-primary-500 font-bold">$${item.price.toFixed(2)}</div>
136
- </div>
137
- <div class="flex sm:flex-col sm:items-end justify-between sm:justify-start mt-4 sm:mt-0">
138
- <div class="flex items-center">
139
- <button class="quantity-btn bg-gray-700 hover:bg-gray-600 w-8 h-8 rounded-l-lg flex items-center justify-center" data-index="${index}" data-change="-1">
140
- <i data-feather="minus" class="w-4 h-4"></i>
141
- </button>
142
- <input type="number" value="${item.quantity}" min="1" class="quantity-input bg-gray-700 w-12 h-8 text-center border-t border-b border-gray-600">
143
- <button class="quantity-btn bg-gray-700 hover:bg-gray-600 w-8 h-8 rounded-r-lg flex items-center justify-center" data-index="${index}" data-change="1">
144
- <i data-feather="plus" class="w-4 h-4"></i>
145
- </button>
146
- </div>
147
- <button class="remove-btn text-red-500 hover:text-red-400 flex items-center sm:mt-4" data-index="${index}">
148
- <i data-feather="trash-2" class="w-4 h-4 mr-1"></i>
149
- Remove
150
  </button>
151
  </div>
152
  </div>
153
  </div>
154
  `;
 
155
  });
156
 
157
- cartItemsContainer.innerHTML = html;
158
- updateTotals(subtotal);
 
 
159
  feather.replace();
 
 
 
 
 
 
160
 
161
- // Add event listeners to all quantity buttons
162
- document.querySelectorAll('.quantity-btn').forEach(button => {
163
- button.addEventListener('click', function() {
164
- const index = parseInt(this.dataset.index);
165
- const change = parseInt(this.dataset.change);
166
- const input = this.parentNode.querySelector('.quantity-input');
167
-
168
- let newQuantity = cart[index].quantity + change;
169
- if (newQuantity < 1) newQuantity = 1;
170
-
171
- input.value = newQuantity;
172
- cart[index].quantity = newQuantity;
173
- saveCart();
174
- });
175
- });
176
 
177
- // Add event listeners to all remove buttons
178
- document.querySelectorAll('.remove-btn').forEach(button => {
179
- button.addEventListener('click', function() {
180
- const index = parseInt(this.dataset.index);
 
 
181
  cart.splice(index, 1);
182
- saveCart();
183
- });
184
- });
185
-
186
- // Add event listeners to all quantity inputs
187
- document.querySelectorAll('.quantity-input').forEach(input => {
188
- input.addEventListener('change', function() {
189
- const index = parseInt(this.closest('.quantity-btn').dataset.index);
190
- let newQuantity = parseInt(this.value);
191
- if (isNaN(newQuantity) || newQuantity < 1) newQuantity = 1;
192
-
193
- this.value = newQuantity;
194
- cart[index].quantity = newQuantity;
195
- saveCart();
196
- });
197
- });
198
- }
199
-
200
- function updateTotals(subtotal) {
201
- const shipping = subtotal > 50 ? 0 : 5.99;
202
- const tax = subtotal * 0.08; // 8% tax
203
 
204
- document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
205
- document.getElementById('shipping').textContent = shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`;
206
- document.getElementById('tax').textContent = `$${tax.toFixed(2)}`;
207
- document.getElementById('total').textContent = `$${(subtotal + shipping + tax).toFixed(2)}`;
208
- }
209
-
210
- function saveCart() {
211
  localStorage.setItem('cart', JSON.stringify(cart));
212
- renderCart();
213
- updateCartCounter();
214
-
215
- // Update cart counter on other pages
216
- const event = new Event('cartUpdated');
217
- window.dispatchEvent(event);
218
- }
219
-
220
- function updateCartCounter() {
221
- const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
222
- cartCounter.textContent = totalItems;
223
- totalItems > 0 ? cartCounter.classList.remove('hidden') : cartCounter.classList.add('hidden');
224
- }
225
 
226
  // Checkout button
227
- document.getElementById('checkoutBtn').addEventListener('click', function() {
228
- const handler = StripeCheckout.configure({
229
- key: 'pk_test_your_stripe_key',
230
- image: 'https://yourhand.co/logo.png',
231
- locale: 'auto',
232
- currency: 'USD',
233
- token: function(token) {
234
- // In a real app, you would send this token to your backend
235
- console.log(token);
236
- alert('Payment successful! Redirecting to order confirmation...');
237
-
238
- // Clear cart after successful payment
239
- localStorage.removeItem('cart');
240
- window.location.href = 'order-confirmation.html';
241
- }
242
- });
243
-
244
- const subtotal = parseFloat(document.getElementById('subtotal').textContent.replace('$', ''));
245
- const shipping = document.getElementById('shipping').textContent === 'FREE' ? 0 :
246
- parseFloat(document.getElementById('shipping').textContent.replace('$', ''));
247
- const tax = parseFloat(document.getElementById('tax').textContent.replace('$', ''));
248
- const total = subtotal + shipping + tax;
249
-
250
- handler.open({
251
- name: 'YourHand.co',
252
- description: `${cart.length} item${cart.length > 1 ? 's' : ''}`,
253
- amount: total * 100
254
- });
255
  });
256
 
257
- // Initial render
258
- renderCart();
 
 
 
 
 
 
 
 
 
 
259
  </script>
260
  </body>
261
  </html>
 
6
  <title>Your Cart - YourHand.co</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <style>
10
+ .gradient-text {
11
+ background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%);
12
+ -webkit-background-clip: text;
13
+ background-clip: text;
14
+ color: transparent;
15
+ }
16
+ </style>
17
  </head>
18
  <body class="bg-gray-900 text-gray-100 min-h-screen">
 
19
  <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3">
20
  <div class="max-w-7xl mx-auto flex items-center justify-between">
21
  <div class="flex items-center space-x-2">
22
  <i data-feather="hand" class="text-primary-500 w-8 h-8"></i>
23
  <span class="text-2xl font-bold gradient-text">YourHand.co</span>
24
  </div>
25
+ <a href="index.html" class="text-primary-500 hover:text-primary-400 transition">
26
+ Back to Shopping
27
+ </a>
 
 
 
 
 
 
28
  </div>
29
  </nav>
30
 
31
+ <section class="max-w-6xl mx-auto py-10 px-4">
 
32
  <h1 class="text-3xl font-bold mb-8">Your Shopping Cart</h1>
33
 
34
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
35
+ <div class="lg:col-span-2">
36
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
37
+ <div class="p-4 border-b border-gray-700">
38
+ <h2 class="text-xl font-bold">Items (<span id="itemCount">0</span>)</h2>
39
+ </div>
40
+
41
+ <div id="cartItems" class="divide-y divide-gray-700">
42
+ <!-- Cart items will be populated by JavaScript -->
43
+ <div class="p-6 text-center text-gray-400">
44
+ <i data-feather="shopping-cart" class="w-10 h-10 mx-auto mb-4"></i>
45
+ <p>Your cart is empty</p>
46
+ </div>
47
+ </div>
48
  </div>
49
  </div>
50
 
51
+ <div>
52
+ <div class="bg-gray-800 rounded-xl shadow-lg p-6 sticky top-4">
53
+ <h2 class="text-xl font-bold mb-4">Order Summary</h2>
 
54
 
55
  <div class="space-y-4 mb-6">
56
  <div class="flex justify-between">
57
  <span class="text-gray-400">Subtotal</span>
58
+ <span id="subtotal" class="font-bold">$0.00</span>
59
  </div>
60
  <div class="flex justify-between">
61
  <span class="text-gray-400">Shipping</span>
62
+ <span class="font-bold">Free</span>
 
 
 
 
63
  </div>
64
+ <div class="flex justify-between border-t border-gray-700 pt-4">
65
+ <span class="text-lg font-bold">Total</span>
66
+ <span id="total" class="text-lg font-bold gradient-text">$0.00</span>
67
  </div>
68
  </div>
69
 
70
+ <button id="checkoutBtn"
71
+ class="w-full bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
72
+ disabled>
73
  Proceed to Checkout
74
  </button>
75
 
76
+ <div class="mt-4 text-sm text-gray-400">
77
+ <p>By completing your purchase, you agree to our <a href="#" class="text-primary-500 hover:text-primary-400">Terms of Service</a>.</p>
78
  </div>
79
  </div>
80
  </div>
 
82
  </section>
83
 
84
  <script>
 
85
  feather.replace();
86
+
87
  // Load cart from localStorage
88
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
89
+
90
+ // Display cart items
91
  const cartItemsContainer = document.getElementById('cartItems');
92
+ const itemCountElement = document.getElementById('itemCount');
93
+ const subtotalElement = document.getElementById('subtotal');
94
+ const totalElement = document.getElementById('total');
95
+ const checkoutBtn = document.getElementById('checkoutBtn');
96
 
97
+ function updateCartDisplay() {
98
+ // Clear existing items
99
+ cartItemsContainer.innerHTML = '';
100
+
101
  if (cart.length === 0) {
102
  cartItemsContainer.innerHTML = `
103
+ <div class="p-6 text-center text-gray-400">
104
+ <i data-feather="shopping-cart" class="w-10 h-10 mx-auto mb-4"></i>
105
+ <p>Your cart is empty</p>
 
 
 
 
106
  </div>
107
  `;
108
+ itemCountElement.textContent = '0';
109
+ subtotalElement.textContent = '$0.00';
110
+ totalElement.textContent = '$0.00';
111
+ checkoutBtn.disabled = true;
112
+ feather.replace();
113
  return;
114
  }
115
 
 
116
  let subtotal = 0;
117
 
118
  cart.forEach((item, index) => {
119
  const itemTotal = item.price * item.quantity;
120
  subtotal += itemTotal;
121
 
122
+ const cartItemElement = document.createElement('div');
123
+ cartItemElement.className = 'p-4';
124
+ cartItemElement.innerHTML = `
125
+ <div class="flex items-start">
126
+ <div class="w-24 h-24 rounded-lg overflow-hidden mr-4">
127
  <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
128
  </div>
129
+ <div class="flex-1">
130
+ <h3 class="font-bold">${item.name}</h3>
131
+ <p class="text-gray-400 text-sm mb-2">$${item.price.toFixed(2)}</p>
132
+ <div class="flex items-center">
133
+ <button class="quantity-btn" data-index="${index}" data-action="decrease">
134
+ <i data-feather="minus" class="w-4 h-4"></i>
135
+ </button>
136
+ <span class="mx-3">${item.quantity}</span>
137
+ <button class="quantity-btn" data-index="${index}" data-action="increase">
138
+ <i data-feather="plus" class="w-4 h-4"></i>
139
+ </button>
140
+ <button class="ml-auto text-red-500 hover:text-red-400" data-index="${index}" data-action="remove">
141
+ <i data-feather="trash-2" class="w-5 h-5"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  </button>
143
  </div>
144
  </div>
145
  </div>
146
  `;
147
+ cartItemsContainer.appendChild(cartItemElement);
148
  });
149
 
150
+ itemCountElement.textContent = cart.reduce((total, item) => total + item.quantity, 0);
151
+ subtotalElement.textContent = `$${subtotal.toFixed(2)}`;
152
+ totalElement.textContent = `$${subtotal.toFixed(2)}`;
153
+ checkoutBtn.disabled = false;
154
  feather.replace();
155
+ }
156
+
157
+ // Handle quantity adjustments and removal
158
+ cartItemsContainer.addEventListener('click', (e) => {
159
+ const btn = e.target.closest('[data-index]');
160
+ if (!btn) return;
161
 
162
+ const index = parseInt(btn.dataset.index);
163
+ const action = btn.dataset.action;
 
 
 
 
 
 
 
 
 
 
 
 
 
164
 
165
+ if (action === 'increase') {
166
+ cart[index].quantity += 1;
167
+ } else if (action === 'decrease') {
168
+ if (cart[index].quantity > 1) {
169
+ cart[index].quantity -= 1;
170
+ } else {
171
  cart.splice(index, 1);
172
+ }
173
+ } else if (action === 'remove') {
174
+ cart.splice(index, 1);
175
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
176
 
 
 
 
 
 
 
 
177
  localStorage.setItem('cart', JSON.stringify(cart));
178
+ updateCartDisplay();
179
+ updateCartCounter(); // Update counter in other pages
180
+ });
 
 
 
 
 
 
 
 
 
 
181
 
182
  // Checkout button
183
+ checkoutBtn.addEventListener('click', () => {
184
+ alert('Proceeding to checkout - this would redirect to a payment page in a real application');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
185
  });
186
 
187
+ // Initialize cart display
188
+ updateCartDisplay();
189
+
190
+ // Function to update cart counter (shared with other pages)
191
+ window.updateCartCounter = function() {
192
+ const count = cart.reduce((total, item) => total + item.quantity, 0);
193
+ const counters = document.querySelectorAll('.cart-counter');
194
+ counters.forEach(counter => {
195
+ counter.textContent = count;
196
+ count > 0 ? counter.classList.remove('hidden') : counter.classList.add('hidden');
197
+ });
198
+ };
199
  </script>
200
  </body>
201
  </html>
index.html CHANGED
@@ -140,10 +140,16 @@
140
  <i data-feather="star" class="w-4 h-4"></i>
141
  <span class="text-gray-400 text-sm ml-1">(24)</span>
142
  </div>
143
- <button class="text-primary-500 hover:text-primary-400 transition">
144
- <i data-feather="heart" class="w-5 h-5"></i>
 
 
 
 
 
 
145
  </button>
146
- </div>
147
  </div>
148
  </div>
149
 
@@ -172,10 +178,16 @@
172
  <i data-feather="star" class="w-4 h-4 fill-current"></i>
173
  <span class="text-gray-400 text-sm ml-1">(56)</span>
174
  </div>
175
- <button class="text-primary-500 hover:text-primary-400 transition">
176
- <i data-feather="heart" class="w-5 h-5"></i>
 
 
 
 
 
 
177
  </button>
178
- </div>
179
  </div>
180
  </div>
181
 
@@ -204,10 +216,16 @@
204
  <i data-feather="star" class="w-4 h-4"></i>
205
  <span class="text-gray-400 text-sm ml-1">(18)</span>
206
  </div>
207
- <button class="text-primary-500 hover:text-primary-400 transition">
208
- <i data-feather="heart" class="w-5 h-5"></i>
 
 
 
 
 
 
209
  </button>
210
- </div>
211
  </div>
212
  </div>
213
 
@@ -236,10 +254,16 @@
236
  <i data-feather="star" class="w-4 h-4"></i>
237
  <span class="text-gray-400 text-sm ml-1">(32)</span>
238
  </div>
239
- <button class="text-primary-500 hover:text-primary-400 transition">
240
- <i data-feather="heart" class="w-5 h-5"></i>
 
 
 
 
 
 
241
  </button>
242
- </div>
243
  </div>
244
  </div>
245
  </div>
@@ -280,10 +304,16 @@
280
  <span>Pickup: 4-5 PM</span>
281
  </div>
282
  </div>
283
- <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
284
- Reserve Now
 
 
 
 
 
 
285
  </button>
286
- </div>
287
  </div>
288
 
289
  <!-- Food Rescue Card 2 -->
@@ -307,10 +337,16 @@
307
  <span>Pickup: 1-2 PM</span>
308
  </div>
309
  </div>
310
- <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
311
- Reserve Now
 
 
 
 
 
 
312
  </button>
313
- </div>
314
  </div>
315
 
316
  <!-- Food Rescue Card 3 -->
@@ -334,10 +370,16 @@
334
  <span>Pickup: 8-9 PM</span>
335
  </div>
336
  </div>
337
- <button class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition">
338
- Reserve Now
 
 
 
 
 
 
339
  </button>
340
- </div>
341
  </div>
342
  </div>
343
  </div>
 
140
  <i data-feather="star" class="w-4 h-4"></i>
141
  <span class="text-gray-400 text-sm ml-1">(24)</span>
142
  </div>
143
+ <button
144
+ class="text-primary-500 hover:text-primary-400 transition"
145
+ data-add-to-cart
146
+ data-product-id="macrame-wall-hanging"
147
+ data-product-name="Handwoven Macrame Wall Hanging"
148
+ data-product-price="45"
149
+ data-product-image="http://static.photos/craft/640x360/1">
150
+ <i data-feather="shopping-cart" class="w-5 h-5"></i>
151
  </button>
152
+ </div>
153
  </div>
154
  </div>
155
 
 
178
  <i data-feather="star" class="w-4 h-4 fill-current"></i>
179
  <span class="text-gray-400 text-sm ml-1">(56)</span>
180
  </div>
181
+ <button
182
+ class="text-primary-500 hover:text-primary-400 transition"
183
+ data-add-to-cart
184
+ data-product-id="ceramic-mug-set"
185
+ data-product-name="Hand-thrown Ceramic Mug Set"
186
+ data-product-price="28"
187
+ data-product-image="http://static.photos/craft/640x360/2">
188
+ <i data-feather="shopping-cart" class="w-5 h-5"></i>
189
  </button>
190
+ </div>
191
  </div>
192
  </div>
193
 
 
216
  <i data-feather="star" class="w-4 h-4"></i>
217
  <span class="text-gray-400 text-sm ml-1">(18)</span>
218
  </div>
219
+ <button
220
+ class="text-primary-500 hover:text-primary-400 transition"
221
+ data-add-to-cart
222
+ data-product-id="leather-wallet"
223
+ data-product-name="Hand-stitched Leather Wallet"
224
+ data-product-price="75"
225
+ data-product-image="http://static.photos/craft/640x360/3">
226
+ <i data-feather="shopping-cart" class="w-5 h-5"></i>
227
  </button>
228
+ </div>
229
  </div>
230
  </div>
231
 
 
254
  <i data-feather="star" class="w-4 h-4"></i>
255
  <span class="text-gray-400 text-sm ml-1">(32)</span>
256
  </div>
257
+ <button
258
+ class="text-primary-500 hover:text-primary-400 transition"
259
+ data-add-to-cart
260
+ data-product-id="wooden-spoon-set"
261
+ data-product-name="Hand-carved Wooden Spoon Set"
262
+ data-product-price="32"
263
+ data-product-image="http://static.photos/craft/640x360/4">
264
+ <i data-feather="shopping-cart" class="w-5 h-5"></i>
265
  </button>
266
+ </div>
267
  </div>
268
  </div>
269
  </div>
 
304
  <span>Pickup: 4-5 PM</span>
305
  </div>
306
  </div>
307
+ <button
308
+ class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition"
309
+ data-add-to-cart
310
+ data-product-id="bakery-surprise"
311
+ data-product-name="Fresh Bakery Surprise Bag"
312
+ data-product-price="3.99"
313
+ data-product-image="http://static.photos/food/640x360/1">
314
+ Add to Cart - $3.99
315
  </button>
316
+ </div>
317
  </div>
318
 
319
  <!-- Food Rescue Card 2 -->
 
337
  <span>Pickup: 1-2 PM</span>
338
  </div>
339
  </div>
340
+ <button
341
+ class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition"
342
+ data-add-to-cart
343
+ data-product-id="vegetarian-lunch"
344
+ data-product-name="Vegetarian Lunch Box"
345
+ data-product-price="4.80"
346
+ data-product-image="http://static.photos/food/640x360/2">
347
+ Add to Cart - $4.80
348
  </button>
349
+ </div>
350
  </div>
351
 
352
  <!-- Food Rescue Card 3 -->
 
370
  <span>Pickup: 8-9 PM</span>
371
  </div>
372
  </div>
373
+ <button
374
+ class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-lg transition"
375
+ data-add-to-cart
376
+ data-product-id="sushi-pack"
377
+ data-product-name="Sushi Surprise Pack"
378
+ data-product-price="6.00"
379
+ data-product-image="http://static.photos/food/640x360/3">
380
+ Add to Cart - $6.00
381
  </button>
382
+ </div>
383
  </div>
384
  </div>
385
  </div>