Hugging Face's logo

Spaces:
bunyaminergen
/
e-commerceui
Running

App Files Community
bunyaminergen commited on
Commit
a774d55
·
verified ·
1 Parent(s): 8edefbb

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +552 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: E Commerceui
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: e-commerceui
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,552 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modern E-Ticaret Sitesi</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .product-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .category-item:hover .category-icon {
15
+ transform: scale(1.1);
16
+ }
17
+ .dropdown:hover .dropdown-menu {
18
+ display: block;
19
+ }
20
+ .hero-section {
21
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ }
23
+ .discount-badge {
24
+ position: absolute;
25
+ top: 10px;
26
+ right: 10px;
27
+ }
28
+ .cart-notification {
29
+ position: absolute;
30
+ top: -5px;
31
+ right: -5px;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 font-sans">
36
+ <!-- Üst Bilgi Çubuğu -->
37
+ <div class="bg-gray-800 text-white py-2 px-4 text-sm">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div class="flex space-x-4">
40
+ <span><i class="fas fa-phone-alt mr-1"></i> 0850 123 45 67</span>
41
+ <span><i class="fas fa-envelope mr-1"></i> [email protected]</span>
42
+ </div>
43
+ <div class="flex space-x-4">
44
+ <a href="#" class="hover:text-blue-300">Yardım</a>
45
+ <a href="#" class="hover:text-blue-300">Takip</a>
46
+ <a href="#" class="hover:text-blue-300">Mağazalarımız</a>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Ana Navigasyon -->
52
+ <header class="bg-white shadow-sm sticky top-0 z-50">
53
+ <div class="container mx-auto px-4 py-4">
54
+ <div class="flex justify-between items-center">
55
+ <!-- Logo -->
56
+ <div class="flex items-center">
57
+ <a href="#" class="text-2xl font-bold text-indigo-600">E-Ticaret<span class="text-gray-800">Pro</span></a>
58
+ </div>
59
+
60
+ <!-- Arama Çubuğu -->
61
+ <div class="hidden md:flex flex-1 mx-8">
62
+ <div class="relative w-full">
63
+ <input type="text" placeholder="Ürün, kategori veya marka ara..."
64
+ class="w-full py-2 px-4 border border-gray-300 rounded-l-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
65
+ <button class="absolute right-0 top-0 h-full px-4 bg-indigo-600 text-white rounded-r-full hover:bg-indigo-700">
66
+ <i class="fas fa-search"></i>
67
+ </button>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Kullanıcı İşlemleri -->
72
+ <div class="flex items-center space-x-4">
73
+ <div class="relative">
74
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
75
+ <i class="fas fa-user text-xl"></i>
76
+ </a>
77
+ </div>
78
+ <div class="relative">
79
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
80
+ <i class="fas fa-heart text-xl"></i>
81
+ </a>
82
+ <span class="cart-notification bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
83
+ </div>
84
+ <div class="relative">
85
+ <a href="#" class="text-gray-700 hover:text-indigo-600">
86
+ <i class="fas fa-shopping-cart text-xl"></i>
87
+ </a>
88
+ <span class="cart-notification bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Mobil Arama Çubuğu -->
94
+ <div class="md:hidden mt-4">
95
+ <div class="relative">
96
+ <input type="text" placeholder="Ürün, kategori veya marka ara..."
97
+ class="w-full py-2 px-4 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
98
+ <button class="absolute right-0 top-0 h-full px-4 text-gray-500">
99
+ <i class="fas fa-search"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Kategori Menüsü -->
106
+ <nav class="bg-indigo-600 text-white">
107
+ <div class="container mx-auto px-4">
108
+ <div class="flex items-center justify-between">
109
+ <div class="dropdown relative">
110
+ <button class="flex items-center space-x-2 py-3 px-4 bg-indigo-700 hover:bg-indigo-800">
111
+ <i class="fas fa-bars"></i>
112
+ <span>Tüm Kategoriler</span>
113
+ <i class="fas fa-chevron-down text-xs"></i>
114
+ </button>
115
+ <div class="dropdown-menu absolute left-0 mt-0 w-56 bg-white shadow-lg rounded-b-md hidden z-50">
116
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 border-b border-gray-100">Elektronik</a>
117
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 border-b border-gray-100">Moda</a>
118
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 border-b border-gray-100">Ev & Yaşam</a>
119
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 border-b border-gray-100">Spor & Outdoor</a>
120
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 border-b border-gray-100">Kozmetik</a>
121
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Süpermarket</a>
122
+ </div>
123
+ </div>
124
+ <div class="hidden md:flex space-x-6">
125
+ <a href="#" class="py-3 hover:bg-indigo-700 px-2">Ana Sayfa</a>
126
+ <a href="#" class="py-3 hover:bg-indigo-700 px-2">Kampanyalar</a>
127
+ <a href="#" class="py-3 hover:bg-indigo-700 px-2">Yeni Ürünler</a>
128
+ <a href="#" class="py-3 hover:bg-indigo-700 px-2">Çok Satanlar</a>
129
+ <a href="#" class="py-3 hover:bg-indigo-700 px-2">Markalar</a>
130
+ </div>
131
+ <div class="flex items-center">
132
+ <a href="#" class="py-3 px-4 bg-yellow-400 text-gray-800 font-medium hover:bg-yellow-500">
133
+ <i class="fas fa-gift mr-2"></i> Hediye Kataloğu
134
+ </a>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </nav>
139
+ </header>
140
+
141
+ <!-- Hero Bölümü -->
142
+ <section class="hero-section text-white">
143
+ <div class="container mx-auto px-4 py-12 md:py-24">
144
+ <div class="flex flex-col md:flex-row items-center">
145
+ <div class="md:w-1/2 mb-8 md:mb-0">
146
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Yaz İndirimleri Başladı!</h1>
147
+ <p class="text-xl mb-6">Seçili ürünlerde %50'ye varan indirimlerle yaz tatilinizi şenlendirin.</p>
148
+ <div class="flex space-x-4">
149
+ <a href="#" class="bg-white text-indigo-600 px-6 py-3 rounded-full font-medium hover:bg-gray-100">Alışverişe Başla</a>
150
+ <a href="#" class="border border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600">Kampanyaları Gör</a>
151
+ </div>
152
+ </div>
153
+ <div class="md:w-1/2 flex justify-center">
154
+ <img src="https://via.placeholder.com/500x300" alt="Yaz İndirimleri" class="rounded-lg shadow-xl">
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Kategoriler -->
161
+ <section class="py-12 bg-white">
162
+ <div class="container mx-auto px-4">
163
+ <h2 class="text-3xl font-bold mb-8 text-center">Kategoriler</h2>
164
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
165
+ <!-- Kategori 1 -->
166
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
167
+ <div class="category-icon bg-indigo-100 text-indigo-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
168
+ <i class="fas fa-laptop text-2xl"></i>
169
+ </div>
170
+ <h3 class="font-medium">Elektronik</h3>
171
+ </div>
172
+
173
+ <!-- Kategori 2 -->
174
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
175
+ <div class="category-icon bg-pink-100 text-pink-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
176
+ <i class="fas fa-tshirt text-2xl"></i>
177
+ </div>
178
+ <h3 class="font-medium">Moda</h3>
179
+ </div>
180
+
181
+ <!-- Kategori 3 -->
182
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
183
+ <div class="category-icon bg-green-100 text-green-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
184
+ <i class="fas fa-home text-2xl"></i>
185
+ </div>
186
+ <h3 class="font-medium">Ev & Yaşam</h3>
187
+ </div>
188
+
189
+ <!-- Kategori 4 -->
190
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
191
+ <div class="category-icon bg-blue-100 text-blue-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
192
+ <i class="fas fa-running text-2xl"></i>
193
+ </div>
194
+ <h3 class="font-medium">Spor & Outdoor</h3>
195
+ </div>
196
+
197
+ <!-- Kategori 5 -->
198
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
199
+ <div class="category-icon bg-purple-100 text-purple-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
200
+ <i class="fas fa-spa text-2xl"></i>
201
+ </div>
202
+ <h3 class="font-medium">Kozmetik</h3>
203
+ </div>
204
+
205
+ <!-- Kategori 6 -->
206
+ <div class="category-item bg-gray-50 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 hover:shadow-md">
207
+ <div class="category-icon bg-yellow-100 text-yellow-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-3 transition-transform duration-300">
208
+ <i class="fas fa-shopping-basket text-2xl"></i>
209
+ </div>
210
+ <h3 class="font-medium">Süpermarket</h3>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Öne Çıkan Ürünler -->
217
+ <section class="py-12 bg-gray-50">
218
+ <div class="container mx-auto px-4">
219
+ <div class="flex justify-between items-center mb-8">
220
+ <h2 class="text-3xl font-bold">Öne Çıkan Ürünler</h2>
221
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Tümünü Gör <i class="fas fa-arrow-right ml-1"></i></a>
222
+ </div>
223
+
224
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
225
+ <!-- Ürün 1 -->
226
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300 relative">
227
+ <div class="discount-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
228
+ %25 İNDİRİM
229
+ </div>
230
+ <div class="p-4">
231
+ <img src="https://via.placeholder.com/300x200" alt="Ürün Resmi" class="w-full h-48 object-contain">
232
+ </div>
233
+ <div class="px-4 pb-4">
234
+ <div class="text-xs text-gray-500 mb-1">Apple</div>
235
+ <h3 class="font-medium text-gray-800 mb-2">iPhone 13 Pro 128GB</h3>
236
+ <div class="flex items-center mb-2">
237
+ <div class="flex text-yellow-400">
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="fas fa-star"></i>
241
+ <i class="fas fa-star"></i>
242
+ <i class="fas fa-star-half-alt"></i>
243
+ </div>
244
+ <span class="text-xs text-gray-500 ml-1">(124)</span>
245
+ </div>
246
+ <div class="flex items-center justify-between">
247
+ <div>
248
+ <span class="text-gray-500 line-through text-sm">24.999 TL</span>
249
+ <span class="text-indigo-600 font-bold text-lg ml-2">18.749 TL</span>
250
+ </div>
251
+ <button class="bg-indigo-100 text-indigo-600 p-2 rounded-full hover:bg-indigo-200">
252
+ <i class="fas fa-shopping-cart"></i>
253
+ </button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Ürün 2 -->
259
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300 relative">
260
+ <div class="p-4">
261
+ <img src="https://via.placeholder.com/300x200" alt="Ürün Resmi" class="w-full h-48 object-contain">
262
+ </div>
263
+ <div class="px-4 pb-4">
264
+ <div class="text-xs text-gray-500 mb-1">Samsung</div>
265
+ <h3 class="font-medium text-gray-800 mb-2">Galaxy Watch 4 Classic</h3>
266
+ <div class="flex items-center mb-2">
267
+ <div class="flex text-yellow-400">
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ <i class="far fa-star"></i>
273
+ </div>
274
+ <span class="text-xs text-gray-500 ml-1">(89)</span>
275
+ </div>
276
+ <div class="flex items-center justify-between">
277
+ <div>
278
+ <span class="text-indigo-600 font-bold text-lg">4.299 TL</span>
279
+ </div>
280
+ <button class="bg-indigo-100 text-indigo-600 p-2 rounded-full hover:bg-indigo-200">
281
+ <i class="fas fa-shopping-cart"></i>
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Ürün 3 -->
288
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300 relative">
289
+ <div class="discount-badge bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
290
+ %15 İNDİRİM
291
+ </div>
292
+ <div class="p-4">
293
+ <img src="https://via.placeholder.com/300x200" alt="Ürün Resmi" class="w-full h-48 object-contain">
294
+ </div>
295
+ <div class="px-4 pb-4">
296
+ <div class="text-xs text-gray-500 mb-1">Nike</div>
297
+ <h3 class="font-medium text-gray-800 mb-2">Air Max 270 Erkek Spor Ayakkabı</h3>
298
+ <div class="flex items-center mb-2">
299
+ <div class="flex text-yellow-400">
300
+ <i class="fas fa-star"></i>
301
+ <i class="fas fa-star"></i>
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ </div>
306
+ <span class="text-xs text-gray-500 ml-1">(215)</span>
307
+ </div>
308
+ <div class="flex items-center justify-between">
309
+ <div>
310
+ <span class="text-gray-500 line-through text-sm">3.499 TL</span>
311
+ <span class="text-indigo-600 font-bold text-lg ml-2">2.974 TL</span>
312
+ </div>
313
+ <button class="bg-indigo-100 text-indigo-600 p-2 rounded-full hover:bg-indigo-200">
314
+ <i class="fas fa-shopping-cart"></i>
315
+ </button>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <!-- Ürün 4 -->
321
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md transition-all duration-300 relative">
322
+ <div class="p-4">
323
+ <img src="https://via.placeholder.com/300x200" alt="Ürün Resmi" class="w-full h-48 object-contain">
324
+ </div>
325
+ <div class="px-4 pb-4">
326
+ <div class="text-xs text-gray-500 mb-1">Xiaomi</div>
327
+ <h3 class="font-medium text-gray-800 mb-2">Mi Robot Vacuum-Mop Pro</h3>
328
+ <div class="flex items-center mb-2">
329
+ <div class="flex text-yellow-400">
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star"></i>
332
+ <i class="fas fa-star"></i>
333
+ <i class="fas fa-star"></i>
334
+ <i class="fas fa-star-half-alt"></i>
335
+ </div>
336
+ <span class="text-xs text-gray-500 ml-1">(167)</span>
337
+ </div>
338
+ <div class="flex items-center justify-between">
339
+ <div>
340
+ <span class="text-indigo-600 font-bold text-lg">7.599 TL</span>
341
+ </div>
342
+ <button class="bg-indigo-100 text-indigo-600 p-2 rounded-full hover:bg-indigo-200">
343
+ <i class="fas fa-shopping-cart"></i>
344
+ </button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </section>
351
+
352
+ <!-- Kampanyalar -->
353
+ <section class="py-12 bg-white">
354
+ <div class="container mx-auto px-4">
355
+ <div class="flex justify-between items-center mb-8">
356
+ <h2 class="text-3xl font-bold">Özel Kampanyalar</h2>
357
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Tüm Kampanyalar <i class="fas fa-arrow-right ml-1"></i></a>
358
+ </div>
359
+
360
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
361
+ <!-- Kampanya 1 -->
362
+ <div class="relative rounded-lg overflow-hidden h-64">
363
+ <img src="https://via.placeholder.com/800x400" alt="Kampanya" class="w-full h-full object-cover">
364
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center p-8">
365
+ <div>
366
+ <h3 class="text-white text-2xl md:text-3xl font-bold mb-2">Yaz Tatili Fırsatları</h3>
367
+ <p class="text-white mb-4">Seçili valiz ve bavullarda %40'a varan indirimler</p>
368
+ <a href="#" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 inline-block">Hemen Al</a>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- Kampanya 2 -->
374
+ <div class="relative rounded-lg overflow-hidden h-64">
375
+ <img src="https://via.placeholder.com/800x400" alt="Kampanya" class="w-full h-full object-cover">
376
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center p-8">
377
+ <div>
378
+ <h3 class="text-white text-2xl md:text-3xl font-bold mb-2">Teknoloji Şenliği</h3>
379
+ <p class="text-white mb-4">Kulaklık, hoparlör ve aksesuarlarda büyük indirimler</p>
380
+ <a href="#" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 inline-block">Keşfet</a>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- Markalar -->
389
+ <section class="py-12 bg-gray-50">
390
+ <div class="container mx-auto px-4">
391
+ <h2 class="text-3xl font-bold mb-8 text-center">Popüler Markalar</h2>
392
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
393
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
394
+ <img src="https://via.placeholder.com/150x60" alt="Apple" class="h-10 object-contain">
395
+ </div>
396
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
397
+ <img src="https://via.placeholder.com/150x60" alt="Samsung" class="h-10 object-contain">
398
+ </div>
399
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
400
+ <img src="https://via.placeholder.com/150x60" alt="Nike" class="h-10 object-contain">
401
+ </div>
402
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
403
+ <img src="https://via.placeholder.com/150x60" alt="Adidas" class="h-10 object-contain">
404
+ </div>
405
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
406
+ <img src="https://via.placeholder.com/150x60" alt="Xiaomi" class="h-10 object-contain">
407
+ </div>
408
+ <div class="bg-white p-6 flex items-center justify-center rounded-lg shadow-sm hover:shadow-md transition-shadow">
409
+ <img src="https://via.placeholder.com/150x60" alt="Huawei" class="h-10 object-contain">
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Özellikler -->
416
+ <section class="py-12 bg-white">
417
+ <div class="container mx-auto px-4">
418
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
419
+ <div class="text-center">
420
+ <div class="bg-indigo-100 text-indigo-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-4">
421
+ <i class="fas fa-truck text-2xl"></i>
422
+ </div>
423
+ <h3 class="font-bold text-lg mb-2">Ücretsiz Kargo</h3>
424
+ <p class="text-gray-600">150 TL ve üzeri alışverişlerde ücretsiz kargo avantajı</p>
425
+ </div>
426
+ <div class="text-center">
427
+ <div class="bg-green-100 text-green-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-4">
428
+ <i class="fas fa-undo text-2xl"></i>
429
+ </div>
430
+ <h3 class="font-bold text-lg mb-2">Kolay İade</h3>
431
+ <p class="text-gray-600">14 gün içinde ücretsiz iade imkanı</p>
432
+ </div>
433
+ <div class="text-center">
434
+ <div class="bg-yellow-100 text-yellow-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-4">
435
+ <i class="fas fa-lock text-2xl"></i>
436
+ </div>
437
+ <h3 class="font-bold text-lg mb-2">Güvenli Alışveriş</h3>
438
+ <p class="text-gray-600">256-bit SSL sertifikası ile güvenli ödeme</p>
439
+ </div>
440
+ <div class="text-center">
441
+ <div class="bg-red-100 text-red-600 rounded-full h-16 w-16 flex items-center justify-center mx-auto mb-4">
442
+ <i class="fas fa-headset text-2xl"></i>
443
+ </div>
444
+ <h3 class="font-bold text-lg mb-2">7/24 Destek</h3>
445
+ <p class="text-gray-600">Müşteri hizmetleri her zaman yanınızda</p>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <!-- Footer -->
452
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
453
+ <div class="container mx-auto px-4">
454
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
455
+ <div>
456
+ <h3 class="text-xl font-bold mb-4">E-TicaretPro</h3>
457
+ <p class="text-gray-400 mb-4">Türkiye'nin en güvenilir online alışveriş sitesi. Binlerce ürün çeşidi ve uygun fiyat avantajı ile hizmetinizdeyiz.</p>
458
+ <div class="flex space-x-4">
459
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
460
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
461
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
462
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
463
+ </div>
464
+ </div>
465
+ <div>
466
+ <h3 class="text-lg font-bold mb-4">Müşteri Hizmetleri</h3>
467
+ <ul class="space-y-2">
468
+ <li><a href="#" class="text-gray-400 hover:text-white">Sipariş Takibi</a></li>
469
+ <li><a href="#" class="text-gray-400 hover:text-white">Sıkça Sorulan Sorular</a></li>
470
+ <li><a href="#" class="text-gray-400 hover:text-white">İade Politikası</a></li>
471
+ <li><a href="#" class="text-gray-400 hover:text-white">Gizlilik Politikası</a></li>
472
+ <li><a href="#" class="text-gray-400 hover:text-white">İletişim</a></li>
473
+ </ul>
474
+ </div>
475
+ <div>
476
+ <h3 class="text-lg font-bold mb-4">Hakkımızda</h3>
477
+ <ul class="space-y-2">
478
+ <li><a href="#" class="text-gray-400 hover:text-white">Biz Kimiz?</a></li>
479
+ <li><a href="#" class="text-gray-400 hover:text-white">Kariyer</a></li>
480
+ <li><a href="#" class="text-gray-400 hover:text-white">Mağazalarımız</a></li>
481
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
482
+ <li><a href="#" class="text-gray-400 hover:text-white">Basın</a></li>
483
+ </ul>
484
+ </div>
485
+ <div>
486
+ <h3 class="text-lg font-bold mb-4">Bülten Aboneliği</h3>
487
+ <p class="text-gray-400 mb-4">Kampanya ve indirimlerden haberdar olmak için e-posta listemize kaydolun.</p>
488
+ <div class="flex">
489
+ <input type="email" placeholder="E-posta adresiniz" class="px-4 py-2 w-full rounded-l text-gray-800 focus:outline-none">
490
+ <button class="bg-indigo-600 px-4 rounded-r hover:bg-indigo-700">
491
+ <i class="fas fa-paper-plane"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ <div class="border-t border-gray-700 pt-6">
497
+ <div class="flex flex-col md:flex-row justify-between items-center">
498
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 E-TicaretPro. Tüm hakları saklıdır.</p>
499
+ <div class="flex space-x-6">
500
+ <img src="https://via.placeholder.com/50x30" alt="Visa" class="h-8">
501
+ <img src="https://via.placeholder.com/50x30" alt="Mastercard" class="h-8">
502
+ <img src="https://via.placeholder.com/50x30" alt="Troy" class="h-8">
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </footer>
508
+
509
+ <!-- Mobil Bottom Nav -->
510
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg z-50">
511
+ <div class="flex justify-around py-3">
512
+ <a href="#" class="flex flex-col items-center text-indigo-600">
513
+ <i class="fas fa-home text-xl"></i>
514
+ <span class="text-xs mt-1">Ana Sayfa</span>
515
+ </a>
516
+ <a href="#" class="flex flex-col items-center text-gray-600">
517
+ <i class="fas fa-search text-xl"></i>
518
+ <span class="text-xs mt-1">Ara</span>
519
+ </a>
520
+ <a href="#" class="flex flex-col items-center text-gray-600 relative">
521
+ <i class="fas fa-shopping-cart text-xl"></i>
522
+ <span class="text-xs mt-1">Sepet</span>
523
+ <span class="absolute -top-1 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">5</span>
524
+ </a>
525
+ <a href="#" class="flex flex-col items-center text-gray-600">
526
+ <i class="fas fa-user text-xl"></i>
527
+ <span class="text-xs mt-1">Hesabım</span>
528
+ </a>
529
+ </div>
530
+ </div>
531
+
532
+ <script>
533
+ // Sepete ekle butonları için basit bir işlev
534
+ document.querySelectorAll('.product-card button').forEach(button => {
535
+ button.addEventListener('click', function() {
536
+ const productName = this.closest('.product-card').querySelector('h3').textContent;
537
+ alert(`${productName} sepete eklendi!`);
538
+ });
539
+ });
540
+
541
+ // Mobil menü toggle
542
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
543
+ const mobileMenu = document.getElementById('mobile-menu');
544
+
545
+ if(mobileMenuButton && mobileMenu) {
546
+ mobileMenuButton.addEventListener('click', function() {
547
+ mobileMenu.classList.toggle('hidden');
548
+ });
549
+ }
550
+ </script>
551
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bunyaminergen/e-commerceui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
552
+ </html>