Hugging Face's logo

Spaces:
Sunatdiyar
/
suant
Running

App Files Community
Sunatdiyar commited on
Commit
5a337eb
·
verified ·
1 Parent(s): b612087

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +766 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Suant
3
- emoji: 🌍
4
- colorFrom: green
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: suant
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,766 @@
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>Greenleaf - Натуральная косметика в Шымкенте</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
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero-pattern {
22
+ background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
23
+ background-size: 20px 20px;
24
+ }
25
+
26
+ .product-card:hover .product-overlay {
27
+ opacity: 1;
28
+ transform: translateY(0);
29
+ }
30
+
31
+ .product-overlay {
32
+ transition: all 0.3s ease;
33
+ opacity: 0;
34
+ transform: translateY(20px);
35
+ }
36
+
37
+ .nav-link::after {
38
+ content: '';
39
+ display: block;
40
+ width: 0;
41
+ height: 2px;
42
+ background: #4ade80;
43
+ transition: width 0.3s;
44
+ }
45
+
46
+ .nav-link:hover::after {
47
+ width: 100%;
48
+ }
49
+
50
+ .dropdown:hover .dropdown-menu {
51
+ display: block;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-50">
56
+ <!-- Header -->
57
+ <header class="bg-white shadow-sm sticky top-0 z-50">
58
+ <div class="container mx-auto px-4 py-3">
59
+ <div class="flex justify-between items-center">
60
+ <!-- Logo -->
61
+ <div class="flex items-center">
62
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
63
+ <i class="fas fa-leaf text-green-600 text-xl"></i>
64
+ </div>
65
+ <a href="#" class="title-font text-2xl font-bold text-green-800">Greenleaf</a>
66
+ </div>
67
+
68
+ <!-- Navigation -->
69
+ <nav class="hidden md:flex space-x-8">
70
+ <a href="#home" class="nav-link text-gray-700 hover:text-green-600 font-medium">Главная</a>
71
+ <div class="dropdown relative">
72
+ <button class="nav-link text-gray-700 hover:text-green-600 font-medium flex items-center">
73
+ Каталог <i class="fas fa-chevron-down ml-1 text-xs"></i>
74
+ </button>
75
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48">
76
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Уход за лицом</a>
77
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Уход за телом</a>
78
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Уход за волосами</a>
79
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-600">Натуральная косметика</a>
80
+ </div>
81
+ </div>
82
+ <a href="#about" class="nav-link text-gray-700 hover:text-green-600 font-medium">О нас</a>
83
+ <a href="#reviews" class="nav-link text-gray-700 hover:text-green-600 font-medium">Отзывы</a>
84
+ <a href="#contacts" class="nav-link text-gray-700 hover:text-green-600 font-medium">Контакты</a>
85
+ </nav>
86
+
87
+ <!-- Mobile menu button -->
88
+ <div class="md:hidden">
89
+ <button id="mobile-menu-button" class="text-gray-700 focus:outline-none">
90
+ <i class="fas fa-bars text-xl"></i>
91
+ </button>
92
+ </div>
93
+
94
+ <!-- Cart and User -->
95
+ <div class="flex items-center space-x-4">
96
+ <a href="#" class="text-gray-700 hover:text-green-600">
97
+ <i class="fas fa-search"></i>
98
+ </a>
99
+ <a href="#" class="text-gray-700 hover:text-green-600 relative">
100
+ <i class="fas fa-shopping-cart"></i>
101
+ <span class="absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
102
+ </a>
103
+ <a href="#" class="text-gray-700 hover:text-green-600 hidden md:block">
104
+ <i class="fas fa-user"></i>
105
+ </a>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Mobile menu -->
110
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-2">
111
+ <a href="#home" class="block py-2 text-gray-700 hover:text-green-600">Главная</a>
112
+ <div class="py-2">
113
+ <button class="flex items-center justify-between w-full text-gray-700 hover:text-green-600">
114
+ Каталог <i class="fas fa-chevron-down ml-1 text-xs"></i>
115
+ </button>
116
+ <div class="mt-1 ml-4 hidden">
117
+ <a href="#" class="block py-1 text-gray-600 hover:text-green-600">Уход за лицом</a>
118
+ <a href="#" class="block py-1 text-gray-600 hover:text-green-600">Уход за телом</a>
119
+ <a href="#" class="block py-1 text-gray-600 hover:text-green-600">Уход за волосами</a>
120
+ <a href="#" class="block py-1 text-gray-600 hover:text-green-600">Натуральная косметика</a>
121
+ </div>
122
+ </div>
123
+ <a href="#about" class="block py-2 text-gray-700 hover:text-green-600">О нас</a>
124
+ <a href="#reviews" class="block py-2 text-gray-700 hover:text-green-600">Отзывы</a>
125
+ <a href="#contacts" class="block py-2 text-gray-700 hover:text-green-600">Контакты</a>
126
+ <a href="#" class="block py-2 text-gray-700 hover:text-green-600">Войти</a>
127
+ </div>
128
+ </div>
129
+ </header>
130
+
131
+ <!-- Hero Section -->
132
+ <section id="home" class="hero-pattern bg-green-50 py-16 md:py-24">
133
+ <div class="container mx-auto px-4">
134
+ <div class="flex flex-col md:flex-row items-center">
135
+ <div class="md:w-1/2 mb-10 md:mb-0">
136
+ <h1 class="title-font text-4xl md:text-5xl lg:text-6xl font-bold text-gray-800 leading-tight mb-6">
137
+ Натуральная косметика <span class="text-green-600">Greenleaf</span> в Шымкенте
138
+ </h1>
139
+ <p class="text-lg text-gray-600 mb-8">
140
+ Уход за кожей с любовью к природе. Наши продукты созданы из натуральных ингредиентов без вредных химических добавок.
141
+ </p>
142
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
143
+ <a href="#" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition duration-300 text-center">
144
+ В каталог <i class="fas fa-arrow-right ml-2"></i>
145
+ </a>
146
+ <a href="#about" class="border-2 border-green-600 text-green-600 hover:bg-green-50 font-medium py-3 px-6 rounded-lg shadow-sm transition duration-300 text-center">
147
+ О нас
148
+ </a>
149
+ </div>
150
+ </div>
151
+ <div class="md:w-1/2 flex justify-center">
152
+ <div class="relative">
153
+ <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Натуральная косметика" class="rounded-lg shadow-xl w-full max-w-md">
154
+ <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-lg shadow-lg hidden md:block">
155
+ <div class="flex items-center">
156
+ <div class="bg-green-100 p-3 rounded-full mr-3">
157
+ <i class="fas fa-award text-green-600 text-xl"></i>
158
+ </div>
159
+ <div>
160
+ <p class="font-bold text-gray-800">100% Натурально</p>
161
+ <p class="text-sm text-gray-600">Без парабенов и SLS</p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Features -->
172
+ <section class="py-12 bg-white">
173
+ <div class="container mx-auto px-4">
174
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
175
+ <div class="text-center p-4">
176
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
177
+ <i class="fas fa-leaf text-green-600 text-2xl"></i>
178
+ </div>
179
+ <h3 class="font-bold text-gray-800 mb-2">Натуральные ингредиенты</h3>
180
+ <p class="text-sm text-gray-600">Только природные компоненты</p>
181
+ </div>
182
+ <div class="text-center p-4">
183
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
184
+ <i class="fas fa-heart text-green-600 text-2xl"></i>
185
+ </div>
186
+ <h3 class="font-bold text-gray-800 mb-2">Безопасность</h3>
187
+ <p class="text-sm text-gray-600">Без вредных химикатов</p>
188
+ </div>
189
+ <div class="text-center p-4">
190
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
191
+ <i class="fas fa-truck text-green-600 text-2xl"></i>
192
+ </div>
193
+ <h3 class="font-bold text-gray-800 mb-2">Быстрая доставка</h3>
194
+ <p class="text-sm text-gray-600">По всему Шымкенту</p>
195
+ </div>
196
+ <div class="text-center p-4">
197
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
198
+ <i class="fas fa-star text-green-600 text-2xl"></i>
199
+ </div>
200
+ <h3 class="font-bold text-gray-800 mb-2">Гарантия качества</h3>
201
+ <p class="text-sm text-gray-600">Проверено экспертами</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Popular Products -->
208
+ <section class="py-16 bg-gray-50">
209
+ <div class="container mx-auto px-4">
210
+ <div class="text-center mb-12">
211
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Популярные товары</h2>
212
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Наши бестселлеры, которые уже полюбили тысячи клиентов в Шымкенте</p>
213
+ </div>
214
+
215
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
216
+ <!-- Product 1 -->
217
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 product-card">
218
+ <div class="relative">
219
+ <img src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Очищающий гель" class="w-full h-64 object-cover">
220
+ <div class="absolute top-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
221
+ ХИТ
222
+ </div>
223
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
224
+ <button class="bg-white text-green-600 font-medium py-2 px-6 rounded-full hover:bg-green-600 hover:text-white transition duration-300">
225
+ Быстрый просмотр
226
+ </button>
227
+ </div>
228
+ </div>
229
+ <div class="p-4">
230
+ <div class="flex justify-between items-start mb-2">
231
+ <h3 class="font-bold text-gray-800">Очищающий гель с алоэ</h3>
232
+ <div class="flex items-center">
233
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
234
+ <span class="text-gray-600 text-sm ml-1">4.9</span>
235
+ </div>
236
+ </div>
237
+ <p class="text-sm text-gray-600 mb-3">Мягкое очищение без пересушивания</p>
238
+ <div class="flex justify-between items-center">
239
+ <span class="font-bold text-gray-800">4 990 ₸</span>
240
+ <button class="text-green-600 hover:text-green-700">
241
+ <i class="fas fa-shopping-cart"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Product 2 -->
248
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 product-card">
249
+ <div class="relative">
250
+ <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Увлажняющий крем" class="w-full h-64 object-cover">
251
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
252
+ <button class="bg-white text-green-600 font-medium py-2 px-6 rounded-full hover:bg-green-600 hover:text-white transition duration-300">
253
+ Быстрый просмотр
254
+ </button>
255
+ </div>
256
+ </div>
257
+ <div class="p-4">
258
+ <div class="flex justify-between items-start mb-2">
259
+ <h3 class="font-bold text-gray-800">Увлажняющий крем с гиалуроном</h3>
260
+ <div class="flex items-center">
261
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
262
+ <span class="text-gray-600 text-sm ml-1">4.8</span>
263
+ </div>
264
+ </div>
265
+ <p class="text-sm text-gray-600 mb-3">Глубокое увлажнение на 24 часа</p>
266
+ <div class="flex justify-between items-center">
267
+ <span class="font-bold text-gray-800">6 490 ₸</span>
268
+ <button class="text-green-600 hover:text-green-700">
269
+ <i class="fas fa-shopping-cart"></i>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Product 3 -->
276
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 product-card">
277
+ <div class="relative">
278
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Маска для лица" class="w-full h-64 object-cover">
279
+ <div class="absolute top-2 left-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded">
280
+ NEW
281
+ </div>
282
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
283
+ <button class="bg-white text-green-600 font-medium py-2 px-6 rounded-full hover:bg-green-600 hover:text-white transition duration-300">
284
+ Быстрый просмотр
285
+ </button>
286
+ </div>
287
+ </div>
288
+ <div class="p-4">
289
+ <div class="flex justify-between items-start mb-2">
290
+ <h3 class="font-bold text-gray-800">Глиняная маска с мятой</h3>
291
+ <div class="flex items-center">
292
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
293
+ <span class="text-gray-600 text-sm ml-1">4.7</span>
294
+ </div>
295
+ </div>
296
+ <p class="text-sm text-gray-600 mb-3">Очищение и сужение пор</p>
297
+ <div class="flex justify-between items-center">
298
+ <span class="font-bold text-gray-800">3 990 ₸</span>
299
+ <button class="text-green-600 hover:text-green-700">
300
+ <i class="fas fa-shopping-cart"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Product 4 -->
307
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300 product-card">
308
+ <div class="relative">
309
+ <img src="https://images.unsplash.com/photo-1595425964073-63639bd4beb1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Сыворотка" class="w-full h-64 object-cover">
310
+ <div class="product-overlay absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
311
+ <button class="bg-white text-green-600 font-medium py-2 px-6 rounded-full hover:bg-green-600 hover:text-white transition duration-300">
312
+ Быстрый просмотр
313
+ </button>
314
+ </div>
315
+ </div>
316
+ <div class="p-4">
317
+ <div class="flex justify-between items-start mb-2">
318
+ <h3 class="font-bold text-gray-800">Витаминная сыворотка</h3>
319
+ <div class="flex items-center">
320
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
321
+ <span class="text-gray-600 text-sm ml-1">5.0</span>
322
+ </div>
323
+ </div>
324
+ <p class="text-sm text-gray-600 mb-3">Антивозрастной уход и сияние</p>
325
+ <div class="flex justify-between items-center">
326
+ <span class="font-bold text-gray-800">7 990 ₸</span>
327
+ <button class="text-green-600 hover:text-green-700">
328
+ <i class="fas fa-shopping-cart"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="text-center mt-12">
336
+ <a href="#" class="inline-block border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-medium py-3 px-8 rounded-lg transition duration-300">
337
+ Смотреть все товары
338
+ </a>
339
+ </div>
340
+ </div>
341
+ </section>
342
+
343
+ <!-- About Us -->
344
+ <section id="about" class="py-16 bg-white">
345
+ <div class="container mx-auto px-4">
346
+ <div class="flex flex-col md:flex-row items-center">
347
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
348
+ <img src="https://images.unsplash.com/photo-1556228578-8c0e7888d7e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="О Greenleaf" class="rounded-lg shadow-lg w-full">
349
+ </div>
350
+ <div class="md:w-1/2">
351
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-6">О Greenleaf</h2>
352
+ <p class="text-gray-600 mb-6">
353
+ Greenleaf - это магазин натуральной косметики в Шымкенте, основанный Жамилей в 2018 году. Наша миссия - сделать качественный уход за кожей доступным, безопасным и экологичным.
354
+ </p>
355
+ <p class="text-gray-600 mb-6">
356
+ Мы тщательно отбираем продукты, проверяя их состав и эффективность. В нашем ассортименте только те средства, которые прошли строгий отбор и получили положительные отзывы от наших клиентов.
357
+ </p>
358
+ <div class="mb-6">
359
+ <div class="flex items-start mb-4">
360
+ <div class="bg-green-100 p-2 rounded-full mr-4">
361
+ <i class="fas fa-check text-green-600"></i>
362
+ </div>
363
+ <div>
364
+ <h4 class="font-bold text-gray-800 mb-1">Натуральные ингредиенты</h4>
365
+ <p class="text-gray-600 text-sm">Без парабенов, SLS, силиконов и искусственных красителей</p>
366
+ </div>
367
+ </div>
368
+ <div class="flex items-start mb-4">
369
+ <div class="bg-green-100 p-2 rounded-full mr-4">
370
+ <i class="fas fa-check text-green-600"></i>
371
+ </div>
372
+ <div>
373
+ <h4 class="font-bold text-gray-800 mb-1">Экологичная упаковка</h4>
374
+ <p class="text-gray-600 text-sm">Перерабатываемые материалы и минимальное использование пластика</p>
375
+ </div>
376
+ </div>
377
+ <div class="flex items-start">
378
+ <div class="bg-green-100 p-2 rounded-full mr-4">
379
+ <i class="fas fa-check text-green-600"></i>
380
+ </div>
381
+ <div>
382
+ <h4 class="font-bold text-gray-800 mb-1">Доставка по Шымкенту</h4>
383
+ <p class="text-gray-600 text-sm">Быстрая и удобная доставка в любой район города</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <a href="#contacts" class="inline-block bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition duration-300">
388
+ Связаться с нами
389
+ </a>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- Testimonials -->
396
+ <section id="reviews" class="py-16 bg-gray-50">
397
+ <div class="container mx-auto px-4">
398
+ <div class="text-center mb-12">
399
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Отзывы наших клиентов</h2>
400
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Что говорят о Greenleaf жители Шымкента</p>
401
+ </div>
402
+
403
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
404
+ <!-- Testimonial 1 -->
405
+ <div class="bg-white p-6 rounded-lg shadow-md">
406
+ <div class="flex items-center mb-4">
407
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
408
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Айгерим" class="w-full h-full object-cover">
409
+ </div>
410
+ <div>
411
+ <h4 class="font-bold text-gray-800">Айгерим</h4>
412
+ <div class="flex">
413
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
414
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
415
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
416
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
417
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ <p class="text-gray-600">
422
+ "Очищающий гель с алоэ - это просто спасение для моей чувствительной кожи! После первого же применения почувствовала разницу. Кожа чистая, но не пересушенная. Буду покупать еще!"
423
+ </p>
424
+ </div>
425
+
426
+ <!-- Testimonial 2 -->
427
+ <div class="bg-white p-6 rounded-lg shadow-md">
428
+ <div class="flex items-center mb-4">
429
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
430
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Алия" class="w-full h-full object-cover">
431
+ </div>
432
+ <div>
433
+ <h4 class="font-bold text-gray-800">Алия</h4>
434
+ <div class="flex">
435
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
436
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
437
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
438
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
439
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ <p class="text-gray-600">
444
+ "Витаминная сыворотка превзошла все мои ожидания! Кожа стала более упругой, мелкие морщинки разгладились. А еще мне нравится, что состав полностью натуральный. Спасибо Greenleaf!"
445
+ </p>
446
+ </div>
447
+
448
+ <!-- Testimonial 3 -->
449
+ <div class="bg-white p-6 rounded-lg shadow-md">
450
+ <div class="flex items-center mb-4">
451
+ <div class="w-12 h-12 rounded-full bg-gray-200 overflow-hidden mr-4">
452
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Данияр" class="w-full h-full object-cover">
453
+ </div>
454
+ <div>
455
+ <h4 class="font-bold text-gray-800">Данияр</h4>
456
+ <div class="flex">
457
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
458
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
459
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
460
+ <i class="fas fa-star text-yellow-400 text-sm"></i>
461
+ <i class="fas fa-star-half-alt text-yellow-400 text-sm"></i>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ <p class="text-gray-600">
466
+ "Заказал глиняную маску для жены. Она в вост��рге! Говорит, что кожа после нее просто сияет. Доставка была быстрой, курьер позвонил заранее. Обязательно закажу еще что-нибудь из ассортимента."
467
+ </p>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </section>
472
+
473
+ <!-- Newsletter -->
474
+ <section class="py-16 bg-green-600 text-white">
475
+ <div class="container mx-auto px-4">
476
+ <div class="max-w-3xl mx-auto text-center">
477
+ <h2 class="title-font text-3xl md:text-4xl font-bold mb-6">Подпишитесь на рассылку</h2>
478
+ <p class="text-lg mb-8 opacity-90">
479
+ Получайте эксклюзивные предложения, новости о поступлении товаров и полезные советы по уходу за кожей прямо на вашу почту.
480
+ </p>
481
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
482
+ <input type="email" placeholder="Ваш email" class="flex-grow px-4 py-3 rounded-lg focus:outline-none text-gray-800">
483
+ <button type="submit" class="bg-green-800 hover:bg-green-900 font-medium px-6 py-3 rounded-lg shadow-md transition duration-300">
484
+ Подписаться
485
+ </button>
486
+ </form>
487
+ </div>
488
+ </div>
489
+ </section>
490
+
491
+ <!-- Contacts -->
492
+ <section id="contacts" class="py-16 bg-white">
493
+ <div class="container mx-auto px-4">
494
+ <div class="text-center mb-12">
495
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Контакты</h2>
496
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Мы всегда рады помочь вам с выбором и ответить на все вопросы</p>
497
+ </div>
498
+
499
+ <div class="flex flex-col md:flex-row">
500
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
501
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
502
+ <h3 class="font-bold text-xl text-gray-800 mb-6">Свяжитесь с нами</h3>
503
+
504
+ <div class="flex items-start mb-6">
505
+ <div class="bg-green-100 p-3 rounded-full mr-4">
506
+ <i class="fas fa-map-marker-alt text-green-600"></i>
507
+ </div>
508
+ <div>
509
+ <h4 class="font-bold text-gray-800 mb-1">Адрес</h4>
510
+ <p class="text-gray-600">г. Шымкент, ул. Толе би, 123</p>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="flex items-start mb-6">
515
+ <div class="bg-green-100 p-3 rounded-full mr-4">
516
+ <i class="fas fa-phone-alt text-green-600"></i>
517
+ </div>
518
+ <div>
519
+ <h4 class="font-bold text-gray-800 mb-1">Телефон</h4>
520
+ <p class="text-gray-600">+7 (777) 123-45-67</p>
521
+ <p class="text-gray-600">+7 (727) 123-45-67</p>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="flex items-start mb-6">
526
+ <div class="bg-green-100 p-3 rounded-full mr-4">
527
+ <i class="fas fa-envelope text-green-600"></i>
528
+ </div>
529
+ <div>
530
+ <h4 class="font-bold text-gray-800 mb-1">Email</h4>
531
+ <p class="text-gray-600">info@greenleaf.kz</p>
532
+ <p class="text-gray-600">jamila@greenleaf.kz</p>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="flex items-start">
537
+ <div class="bg-green-100 p-3 rounded-full mr-4">
538
+ <i class="fas fa-clock text-green-600"></i>
539
+ </div>
540
+ <div>
541
+ <h4 class="font-bold text-gray-800 mb-1">Часы работы</h4>
542
+ <p class="text-gray-600">Пн-Пт: 9:00 - 19:00</p>
543
+ <p class="text-gray-600">Сб-Вс: 10:00 - 17:00</p>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <div class="mt-8">
549
+ <h3 class="font-bold text-xl text-gray-800 mb-4">Мы в социальных сетях</h3>
550
+ <div class="flex space-x-4">
551
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 hover:text-green-600 transition duration-300">
552
+ <i class="fab fa-instagram"></i>
553
+ </a>
554
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 hover:text-green-600 transition duration-300">
555
+ <i class="fab fa-facebook-f"></i>
556
+ </a>
557
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 hover:text-green-600 transition duration-300">
558
+ <i class="fab fa-whatsapp"></i>
559
+ </a>
560
+ <a href="#" class="bg-gray-100 hover:bg-green-100 w-10 h-10 rounded-full flex items-center justify-center text-gray-700 hover:text-green-600 transition duration-300">
561
+ <i class="fab fa-telegram-plane"></i>
562
+ </a>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="md:w-1/2">
568
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm h-full">
569
+ <h3 class="font-bold text-xl text-gray-800 mb-6">Напишите нам</h3>
570
+ <form>
571
+ <div class="mb-4">
572
+ <label for="name" class="block text-gray-700 font-medium mb-2">Ваше имя</label>
573
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
574
+ </div>
575
+ <div class="mb-4">
576
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
577
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
578
+ </div>
579
+ <div class="mb-4">
580
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Телефон</label>
581
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent">
582
+ </div>
583
+ <div class="mb-4">
584
+ <label for="message" class="block text-gray-700 font-medium mb-2">Сообщение</label>
585
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"></textarea>
586
+ </div>
587
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition duration-300">
588
+ Отправить сообщение
589
+ </button>
590
+ </form>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </section>
596
+
597
+ <!-- Map -->
598
+ <div class="h-96 w-full">
599
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2906.785635616218!2d69.59003131548403!3d42.31548597913696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38a91f1a8e4a1a7d%3A0x9e8a1e1a1a1a1a1a!2z0KjQutC-0LvQsCDihJYg0YHQvNC-0LvRj9C90L7QuSDQutC-0LzQv9GM0Y7RgtC10YDQvdGL0Lkg0YPQvdC40LLQtdGA0YHQuNGC0LXRgg!5e0!3m2!1sru!2skz!4v1620000000000!5m2!1sru!2skz" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
600
+ </div>
601
+
602
+ <!-- Footer -->
603
+ <footer class="bg-gray-800 text-white py-12">
604
+ <div class="container mx-auto px-4">
605
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
606
+ <div>
607
+ <div class="flex items-center mb-4">
608
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
609
+ <i class="fas fa-leaf text-green-600 text-xl"></i>
610
+ </div>
611
+ <a href="#" class="title-font text-xl font-bold text-white">Greenleaf</a>
612
+ </div>
613
+ <p class="text-gray-400 mb-4">
614
+ Натуральная косметика для вашей красоты и здоровья. Качество, проверенное временем.
615
+ </p>
616
+ <div class="flex space-x-4">
617
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
618
+ <i class="fab fa-instagram"></i>
619
+ </a>
620
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
621
+ <i class="fab fa-facebook-f"></i>
622
+ </a>
623
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
624
+ <i class="fab fa-whatsapp"></i>
625
+ </a>
626
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
627
+ <i class="fab fa-telegram-plane"></i>
628
+ </a>
629
+ </div>
630
+ </div>
631
+
632
+ <div>
633
+ <h3 class="font-bold text-lg mb-4">Каталог</h3>
634
+ <ul class="space-y-2">
635
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Уход за лицом</a></li>
636
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Уход за телом</a></li>
637
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Уход за волосами</a></li>
638
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Натуральная косметика</a></li>
639
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Новинки</a></li>
640
+ </ul>
641
+ </div>
642
+
643
+ <div>
644
+ <h3 class="font-bold text-lg mb-4">Информация</h3>
645
+ <ul class="space-y-2">
646
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">О нас</a></li>
647
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Доставка и оплата</a></li>
648
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Возврат и обмен</a></li>
649
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Политика конфиденциальности</a></li>
650
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Частые вопросы</a></li>
651
+ </ul>
652
+ </div>
653
+
654
+ <div>
655
+ <h3 class="font-bold text-lg mb-4">Контакты</h3>
656
+ <ul class="space-y-2">
657
+ <li class="flex items-start">
658
+ <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-2"></i>
659
+ <span class="text-gray-400">г. Шымкент, ул. Толе би, 123</span>
660
+ </li>
661
+ <li class="flex items-center">
662
+ <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
663
+ <span class="text-gray-400">+7 (777) 123-45-67</span>
664
+ </li>
665
+ <li class="flex items-center">
666
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
667
+ <span class="text-gray-400">info@greenleaf.kz</span>
668
+ </li>
669
+ <li class="flex items-center">
670
+ <i class="fas fa-clock text-gray-400 mr-2"></i>
671
+ <span class="text-gray-400">Пн-Пт: 9:00 - 19:00</span>
672
+ </li>
673
+ </ul>
674
+ </div>
675
+ </div>
676
+
677
+ <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
678
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
679
+ &copy; 2023 Greenleaf. Все права защищены.
680
+ </p>
681
+ <div class="flex space-x-6">
682
+ <img src="https://via.placeholder.com/40x25" alt="Visa" class="h-6">
683
+ <img src="https://via.placeholder.com/40x25" alt="Mastercard" class="h-6">
684
+ <img src="https://via.placeholder.com/40x25" alt="Kaspi" class="h-6">
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </footer>
689
+
690
+ <!-- Back to top button -->
691
+ <button id="back-to-top" class="fixed bottom-6 right-6 bg-green-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
692
+ <i class="fas fa-arrow-up"></i>
693
+ </button>
694
+
695
+ <script>
696
+ // Mobile menu toggle
697
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
698
+ const mobileMenu = document.getElementById('mobile-menu');
699
+
700
+ mobileMenuButton.addEventListener('click', () => {
701
+ mobileMenu.classList.toggle('hidden');
702
+ });
703
+
704
+ // Dropdown menus
705
+ const dropdowns = document.querySelectorAll('.dropdown');
706
+
707
+ dropdowns.forEach(dropdown => {
708
+ const button = dropdown.querySelector('button');
709
+ const menu = dropdown.querySelector('.dropdown-menu');
710
+
711
+ button.addEventListener('click', () => {
712
+ menu.classList.toggle('hidden');
713
+ });
714
+
715
+ // Close when clicking outside
716
+ document.addEventListener('click', (e) => {
717
+ if (!dropdown.contains(e.target)) {
718
+ menu.classList.add('hidden');
719
+ }
720
+ });
721
+ });
722
+
723
+ // Back to top button
724
+ const backToTopButton = document.getElementById('back-to-top');
725
+
726
+ window.addEventListener('scroll', () => {
727
+ if (window.pageYOffset > 300) {
728
+ backToTopButton.classList.remove('opacity-0', 'invisible');
729
+ backToTopButton.classList.add('opacity-100', 'visible');
730
+ } else {
731
+ backToTopButton.classList.remove('opacity-100', 'visible');
732
+ backToTopButton.classList.add('opacity-0', 'invisible');
733
+ }
734
+ });
735
+
736
+ backToTopButton.addEventListener('click', () => {
737
+ window.scrollTo({
738
+ top: 0,
739
+ behavior: 'smooth'
740
+ });
741
+ });
742
+
743
+ // Smooth scrolling for anchor links
744
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
745
+ anchor.addEventListener('click', function(e) {
746
+ e.preventDefault();
747
+
748
+ const targetId = this.getAttribute('href');
749
+ const targetElement = document.querySelector(targetId);
750
+
751
+ if (targetElement) {
752
+ window.scrollTo({
753
+ top: targetElement.offsetTop - 80,
754
+ behavior: 'smooth'
755
+ });
756
+
757
+ // Close mobile menu if open
758
+ if (!mobileMenu.classList.contains('hidden')) {
759
+ mobileMenu.classList.add('hidden');
760
+ }
761
+ }
762
+ });
763
+ });
764
+ </script>
765
+ <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=Sunatdiyar/suant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
+ </html>