Hugging Face's logo

Spaces:
x2wdfvfd
/
s
Running

App Files Community
x2wdfvfd commited on
Commit
dab9be9
·
verified ·
1 Parent(s): ece2b08

сделай сайт как этот https://zakamie.com/ только используй зелённый цвет как основной - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +487 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: S
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: indigo
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: s
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,487 @@
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="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GreenGarden - Экологичные товары для дома</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
12
+ }
13
+ .product-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .nav-link::after {
18
+ content: '';
19
+ display: block;
20
+ width: 0;
21
+ height: 2px;
22
+ background: #10b981;
23
+ transition: width .3s;
24
+ }
25
+ .nav-link:hover::after {
26
+ width: 100%;
27
+ }
28
+ .dropdown:hover .dropdown-menu {
29
+ display: block;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans bg-gray-50">
34
+ <!-- Header -->
35
+ <header class="bg-white shadow-sm sticky top-0 z-50">
36
+ <div class="container mx-auto px-4 py-3">
37
+ <div class="flex justify-between items-center">
38
+ <!-- Logo -->
39
+ <div class="flex items-center">
40
+ <a href="#" class="text-2xl font-bold text-green-600 flex items-center">
41
+ <i class="fas fa-leaf mr-2"></i>
42
+ GreenGarden
43
+ </a>
44
+ </div>
45
+
46
+ <!-- Desktop Navigation -->
47
+ <nav class="hidden md:flex space-x-8">
48
+ <div class="dropdown relative">
49
+ <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium flex items-center">
50
+ Каталог <i class="fas fa-chevron-down ml-1 text-xs"></i>
51
+ </a>
52
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48">
53
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Эко-продукты</a>
54
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Бытовая химия</a>
55
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Косметика</a>
56
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Текстиль</a>
57
+ </div>
58
+ </div>
59
+ <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">О нас</a>
60
+ <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Доставка</a>
61
+ <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Контакты</a>
62
+ <a href="#" class="nav-link text-gray-700 hover:text-green-600 font-medium">Блог</a>
63
+ </nav>
64
+
65
+ <!-- Icons -->
66
+ <div class="flex items-center space-x-4">
67
+ <a href="#" class="text-gray-600 hover:text-green-600">
68
+ <i class="fas fa-search"></i>
69
+ </a>
70
+ <a href="#" class="text-gray-600 hover:text-green-600">
71
+ <i class="fas fa-user"></i>
72
+ </a>
73
+ <a href="#" class="text-gray-600 hover:text-green-600 relative">
74
+ <i class="fas fa-shopping-cart"></i>
75
+ <span class="absolute -top-2 -right-2 bg-green-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
76
+ </a>
77
+ <button class="md:hidden text-gray-600" id="mobile-menu-button">
78
+ <i class="fas fa-bars"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Mobile Menu -->
84
+ <div class="md:hidden hidden bg-white py-2" id="mobile-menu">
85
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Каталог</a>
86
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">О нас</a>
87
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Доставка</a>
88
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Контакты</a>
89
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Блог</a>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Hero Section -->
95
+ <section class="hero-gradient text-white py-16 md:py-24">
96
+ <div class="container mx-auto px-4">
97
+ <div class="flex flex-col md:flex-row items-center">
98
+ <div class="md:w-1/2 mb-8 md:mb-0">
99
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Экологичные товары для вашего дома</h1>
100
+ <p class="text-xl mb-6">Натуральные, безопасные и экологически чистые продукты для всей семьи</p>
101
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
102
+ <a href="#" class="bg-white text-green-600 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition duration-300 text-center">В каталог</a>
103
+ <a href="#" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-green-600 transition duration-300 text-center">О нас</a>
104
+ </div>
105
+ </div>
106
+ <div class="md:w-1/2 flex justify-center">
107
+ <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Экологичные продукты" class="rounded-lg shadow-xl w-full max-w-md">
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- Features -->
114
+ <section class="py-12 bg-white">
115
+ <div class="container mx-auto px-4">
116
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
117
+ <div class="flex flex-col items-center text-center p-4">
118
+ <div class="bg-green-100 rounded-full p-4 mb-3">
119
+ <i class="fas fa-leaf text-green-600 text-2xl"></i>
120
+ </div>
121
+ <h3 class="font-bold text-lg mb-2">100% Натурально</h3>
122
+ <p class="text-gray-600">Только экологически чистые материалы и ингредиенты</p>
123
+ </div>
124
+ <div class="flex flex-col items-center text-center p-4">
125
+ <div class="bg-green-100 rounded-full p-4 mb-3">
126
+ <i class="fas fa-truck text-green-600 text-2xl"></i>
127
+ </div>
128
+ <h3 class="font-bold text-lg mb-2">Быстрая доставка</h3>
129
+ <p class="text-gray-600">Доставка по всей стране за 1-3 дня</p>
130
+ </div>
131
+ <div class="flex flex-col items-center text-center p-4">
132
+ <div class="bg-green-100 rounded-full p-4 mb-3">
133
+ <i class="fas fa-recycle text-green-600 text-2xl"></i>
134
+ </div>
135
+ <h3 class="font-bold text-lg mb-2">Эко-упаковка</h3>
136
+ <p class="text-gray-600">Биоразлагаемая упаковка без пластика</p>
137
+ </div>
138
+ <div class="flex flex-col items-center text-center p-4">
139
+ <div class="bg-green-100 rounded-full p-4 mb-3">
140
+ <i class="fas fa-heart text-green-600 text-2xl"></i>
141
+ </div>
142
+ <h3 class="font-bold text-lg mb-2">Гарантия качества</h3>
143
+ <p class="text-gray-600">Все товары проходят строгий контроль</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <!-- Popular Categories -->
150
+ <section class="py-12 bg-gray-50">
151
+ <div class="container mx-auto px-4">
152
+ <h2 class="text-3xl font-bold text-center mb-8">Популярные категории</h2>
153
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
154
+ <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
155
+ <div class="h-40 bg-green-100 flex items-center justify-center">
156
+ <i class="fas fa-utensils text-4xl text-green-600"></i>
157
+ </div>
158
+ <div class="p-4">
159
+ <h3 class="font-bold text-center">Эко-продукты</h3>
160
+ </div>
161
+ </a>
162
+ <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
163
+ <div class="h-40 bg-green-100 flex items-center justify-center">
164
+ <i class="fas fa-pump-soap text-4xl text-green-600"></i>
165
+ </div>
166
+ <div class="p-4">
167
+ <h3 class="font-bold text-center">Бытовая химия</h3>
168
+ </div>
169
+ </a>
170
+ <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
171
+ <div class="h-40 bg-green-100 flex items-center justify-center">
172
+ <i class="fas fa-spa text-4xl text-green-600"></i>
173
+ </div>
174
+ <div class="p-4">
175
+ <h3 class="font-bold text-center">Косметика</h3>
176
+ </div>
177
+ </a>
178
+ <a href="#" class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition duration-300">
179
+ <div class="h-40 bg-green-100 flex items-center justify-center">
180
+ <i class="fas fa-tshirt text-4xl text-green-600"></i>
181
+ </div>
182
+ <div class="p-4">
183
+ <h3 class="font-bold text-center">Текстиль</h3>
184
+ </div>
185
+ </a>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Popular Products -->
191
+ <section class="py-12 bg-white">
192
+ <div class="container mx-auto px-4">
193
+ <div class="flex justify-between items-center mb-8">
194
+ <h2 class="text-3xl font-bold">Популярные товары</h2>
195
+ <a href="#" class="text-green-600 font-medium hover:underline">Смотреть все</a>
196
+ </div>
197
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
198
+ <!-- Product 1 -->
199
+ <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300">
200
+ <div class="relative">
201
+ <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Эко-мыло" class="w-full h-48 object-cover">
202
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">NEW</div>
203
+ </div>
204
+ <div class="p-4">
205
+ <div class="flex justify-between items-start mb-2">
206
+ <h3 class="font-bold">Натуральное мыло</h3>
207
+ <span class="text-green-600 font-bold">350 ₽</span>
208
+ </div>
209
+ <p class="text-gray-600 text-sm mb-3">Мыло ручной работы с маслом лаванды</p>
210
+ <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Product 2 -->
215
+ <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300">
216
+ <div class="relative">
217
+ <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Бамбуковая щетка" class="w-full h-48 object-cover">
218
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">ХИТ</div>
219
+ </div>
220
+ <div class="p-4">
221
+ <div class="flex justify-between items-start mb-2">
222
+ <h3 class="font-bold">Бамбуковая зубная щетка</h3>
223
+ <span class="text-green-600 font-bold">290 ₽</span>
224
+ </div>
225
+ <p class="text-gray-600 text-sm mb-3">Экологичная альтернатива пластиковым щеткам</p>
226
+ <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Product 3 -->
231
+ <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300">
232
+ <img src="https://images.unsplash.com/photo-1596755094514-c87b4cdafa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Эко-сумка" class="w-full h-48 object-cover">
233
+ <div class="p-4">
234
+ <div class="flex justify-between items-start mb-2">
235
+ <h3 class="font-bold">Хлопковая сумка</h3>
236
+ <span class="text-green-600 font-bold">590 ₽</span>
237
+ </div>
238
+ <p class="text-gray-600 text-sm mb-3">Многоразовая сумка для покупок</p>
239
+ <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Product 4 -->
244
+ <div class="bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300">
245
+ <div class="relative">
246
+ <img src="https://images.unsplash.com/photo-1625772452859-1c03015a8a9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Эко-стиральный порошок" class="w-full h-48 object-cover">
247
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded-full">-20%</div>
248
+ </div>
249
+ <div class="p-4">
250
+ <div class="flex justify-between items-start mb-2">
251
+ <h3 class="font-bold">Стиральный порошок</h3>
252
+ <div>
253
+ <span class="text-gray-400 text-sm line-through mr-2">790 ₽</span>
254
+ <span class="text-green-600 font-bold">630 ₽</span>
255
+ </div>
256
+ </div>
257
+ <p class="text-gray-600 text-sm mb-3">Экологичный порошок для стирки</p>
258
+ <button class="w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition duration-300">В корзину</button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </section>
264
+
265
+ <!-- About Us -->
266
+ <section class="py-16 bg-green-50">
267
+ <div class="container mx-auto px-4">
268
+ <div class="flex flex-col md:flex-row items-center">
269
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
270
+ <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1402&q=80" alt="О нас" class="rounded-lg shadow-lg w-full">
271
+ </div>
272
+ <div class="md:w-1/2">
273
+ <h2 class="text-3xl font-bold mb-4">О GreenGarden</h2>
274
+ <p class="text-gray-700 mb-4">Мы - команда энтузиастов, которые верят, что забота о природе начинается с малого. Наша миссия - сделать экологичный образ жизни доступным и удобным для каждого.</p>
275
+ <p class="text-gray-700 mb-6">В нашем ассортименте только проверенные товары, которые соответствуют самым строгим экологическим стандартам. Мы тщательно отбираем поставщиков и тестируем каждую позицию перед тем, как предложить ее вам.</p>
276
+ <div class="flex space-x-4">
277
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center">
278
+ <div class="text-green-600 text-3xl font-bold mb-2">5+</div>
279
+ <div class="text-gray-600">Лет на рынке</div>
280
+ </div>
281
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center">
282
+ <div class="text-green-600 text-3xl font-bold mb-2">1000+</div>
283
+ <div class="text-gray-600">Довольных клиентов</div>
284
+ </div>
285
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 text-center">
286
+ <div class="text-green-600 text-3xl font-bold mb-2">200+</div>
287
+ <div class="text-gray-600">Товаров в ассортименте</div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Testimonials -->
296
+ <section class="py-16 bg-white">
297
+ <div class="container mx-auto px-4">
298
+ <h2 class="text-3xl font-bold text-center mb-12">Отзывы наших клиентов</h2>
299
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
300
+ <!-- Testimonial 1 -->
301
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
302
+ <div class="flex items-center mb-4">
303
+ <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3">
304
+ <i class="fas fa-user"></i>
305
+ </div>
306
+ <div>
307
+ <h4 class="font-bold">Анна К.</h4>
308
+ <div class="flex text-yellow-400 text-sm">
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star"></i>
312
+ <i class="fas fa-star"></i>
313
+ <i class="fas fa-star"></i>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <p class="text-gray-600">"Перешла на экологичную бытовую химию от GreenGarden и очень довольна! Вещи стали мягче, а кожа рук перестала сохнуть. Рекомендую!"</p>
318
+ </div>
319
+
320
+ <!-- Testimonial 2 -->
321
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
322
+ <div class="flex items-center mb-4">
323
+ <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3">
324
+ <i class="fas fa-user"></i>
325
+ </div>
326
+ <div>
327
+ <h4 class="font-bold">Михаил С.</h4>
328
+ <div class="flex text-yellow-400 text-sm">
329
+ <i class="fas fa-star"></i>
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-half-alt"></i>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ <p class="text-gray-600">"Заказываю здесь уже третий год. Качество товаров на высоте, доставка быстрая, а главное - чувствую, что вношу вклад в сохранение природы."</p>
338
+ </div>
339
+
340
+ <!-- Testimonial 3 -->
341
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
342
+ <div class="flex items-center mb-4">
343
+ <div class="bg-green-100 text-green-600 rounded-full h-10 w-10 flex items-center justify-center mr-3">
344
+ <i class="fas fa-user"></i>
345
+ </div>
346
+ <div>
347
+ <h4 class="font-bold">Елена П.</h4>
348
+ <div class="flex text-yellow-400 text-sm">
349
+ <i class="fas fa-star"></i>
350
+ <i class="fas fa-star"></i>
351
+ <i class="fas fa-star"></i>
352
+ <i class="fas fa-star"></i>
353
+ <i class="fas fa-star"></i>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ <p class="text-gray-600">"Очень понравился сервис! Консультанты помогли подобрать средства для аллергика, все пришло в биоразлагаемой упаковке. Буду заказывать еще!"</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- Newsletter -->
364
+ <section class="py-16 bg-green-600 text-white">
365
+ <div class="container mx-auto px-4 text-center">
366
+ <h2 class="text-3xl font-bold mb-4">Подпишитесь на рассылку</h2>
367
+ <p class="max-w-2xl mx-auto mb-8">Получайте эксклюзивные предложения, новости об акциях и полезные советы по экологичному образу жизни</p>
368
+ <form class="max-w-md mx-auto flex">
369
+ <input type="email" placeholder="Ваш email" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800">
370
+ <button type="submit" class="bg-green-800 hover:bg-green-900 px-6 py-3 rounded-r-lg font-medium transition duration-300">Подписаться</button>
371
+ </form>
372
+ </div>
373
+ </section>
374
+
375
+ <!-- Footer -->
376
+ <footer class="bg-gray-800 text-white pt-12 pb-6">
377
+ <div class="container mx-auto px-4">
378
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
379
+ <!-- Column 1 -->
380
+ <div>
381
+ <h3 class="text-xl font-bold mb-4 flex items-center">
382
+ <i class="fas fa-leaf mr-2 text-green-400"></i>
383
+ GreenGarden
384
+ </h3>
385
+ <p class="text-gray-400 mb-4">Экологичные товары для дома и повседневной жизни</p>
386
+ <div class="flex space-x-4">
387
+ <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-vk"></i></a>
388
+ <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-telegram"></i></a>
389
+ <a href="#" class="text-gray-400 hover:text-green-400"><i class="fab fa-instagram"></i></a>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Column 2 -->
394
+ <div>
395
+ <h3 class="text-lg font-bold mb-4">Каталог</h3>
396
+ <ul class="space-y-2">
397
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Эко-продукты</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Бытовая химия</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Косметика</a></li>
400
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Текстиль</a></li>
401
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Новинки</a></li>
402
+ </ul>
403
+ </div>
404
+
405
+ <!-- Column 3 -->
406
+ <div>
407
+ <h3 class="text-lg font-bold mb-4">Компания</h3>
408
+ <ul class="space-y-2">
409
+ <li><a href="#" class="text-gray-400 hover:text-green-400">О нас</a></li>
410
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Доставка и оплата</a></li>
411
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Возврат</a></li>
412
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Контакты</a></li>
413
+ <li><a href="#" class="text-gray-400 hover:text-green-400">Блог</a></li>
414
+ </ul>
415
+ </div>
416
+
417
+ <!-- Column 4 -->
418
+ <div>
419
+ <h3 class="text-lg font-bold mb-4">Контакты</h3>
420
+ <ul class="space-y-2 text-gray-400">
421
+ <li class="flex items-start">
422
+ <i class="fas fa-map-marker-alt mr-2 mt-1 text-green-400"></i>
423
+ <span>г. Москва, ул. Экологичная, 15</span>
424
+ </li>
425
+ <li class="flex items-center">
426
+ <i class="fas fa-phone-alt mr-2 text-green-400"></i>
427
+ <span>+7 (999) 123-45-67</span>
428
+ </li>
429
+ <li class="flex items-center">
430
+ <i class="fas fa-envelope mr-2 text-green-400"></i>
431
+ <span>info@greengarden.ru</span>
432
+ </li>
433
+ <li class="flex items-center">
434
+ <i class="fas fa-clock mr-2 text-green-400"></i>
435
+ <span>Пн-Пт: 9:00-20:00</span>
436
+ </li>
437
+ </ul>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
442
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 GreenGarden. Все права защищены.</p>
443
+ <div class="flex space-x-6">
444
+ <a href="#" class="text-gray-400 hover:text-green-400 text-sm">Политика конфиденциальности</a>
445
+ <a href="#" class="text-gray-400 hover:text-green-400 text-sm">Пользовательское соглашение</a>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </footer>
450
+
451
+ <script>
452
+ // Mobile menu toggle
453
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
454
+ const menu = document.getElementById('mobile-menu');
455
+ menu.classList.toggle('hidden');
456
+ });
457
+
458
+ // Simple cart counter animation
459
+ const cartCounter = document.querySelector('.fa-shopping-cart').nextElementSibling;
460
+ if (cartCounter) {
461
+ cartCounter.addEventListener('click', function(e) {
462
+ e.preventDefault();
463
+ this.classList.add('animate-bounce');
464
+ setTimeout(() => {
465
+ this.classList.remove('animate-bounce');
466
+ }, 1000);
467
+ });
468
+ }
469
+
470
+ // Add to cart animation
471
+ const addToCartButtons = document.querySelectorAll('button:contains("В корзину")');
472
+ addToCartButtons.forEach(button => {
473
+ button.addEventListener('click', function() {
474
+ this.textContent = 'Добавлено!';
475
+ this.classList.remove('bg-green-600', 'hover:bg-green-700');
476
+ this.classList.add('bg-green-800');
477
+
478
+ setTimeout(() => {
479
+ this.textContent = 'В корзину';
480
+ this.classList.remove('bg-green-800');
481
+ this.classList.add('bg-green-600', 'hover:bg-green-700');
482
+ }, 2000);
483
+ });
484
+ });
485
+ </script>
486
+ <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=x2wdfvfd/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
487
+ </html>