Hugging Face's logo

Spaces:
KINGHAJI
/
test-1
Running

App Files Community
KINGHAJI commited on
Commit
f00db70
·
verified ·
1 Parent(s): 2ecfbe0

dlet the team tab - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +837 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test 1
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: pink
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: test-1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,837 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>آژانس خلاقیت نوین | راه حل های دیجیتال حرفه ای</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
+ @font-face {
11
+ font-family: 'Iran Sans';
12
+ src: url('https://cdn.fontcdn.ir/Font/Persian/IranSans/IRANSansWeb(FaNum).woff') format('woff');
13
+ }
14
+
15
+ body {
16
+ font-family: 'Iran Sans', sans-serif;
17
+ }
18
+
19
+ .hero-bg {
20
+ background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
21
+ }
22
+
23
+ .service-card:hover {
24
+ transform: translateY(-10px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+
28
+ .portfolio-item {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .portfolio-item:hover {
33
+ transform: scale(1.03);
34
+ }
35
+
36
+ .testimonial-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .testimonial-card:hover {
41
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
42
+ }
43
+
44
+ .accordion-item {
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .accordion-content {
49
+ max-height: 0;
50
+ overflow: hidden;
51
+ transition: max-height 0.3s ease;
52
+ }
53
+
54
+ .accordion-item.active .accordion-content {
55
+ max-height: 300px;
56
+ }
57
+
58
+ .input-field:focus {
59
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
60
+ }
61
+
62
+ @keyframes fadeIn {
63
+ from { opacity: 0; }
64
+ to { opacity: 1; }
65
+ }
66
+
67
+ .fade-in {
68
+ animation: fadeIn 0.5s ease-in;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-gray-50 text-gray-800">
73
+ <!-- نوار ناوبری -->
74
+ <nav class="bg-white shadow-md sticky top-0 z-50">
75
+ <div class="container mx-auto px-4 py-3">
76
+ <div class="flex justify-between items-center">
77
+ <div class="flex items-center">
78
+ <a href="#" class="text-2xl font-bold text-blue-600">نوین‌کرایتیو</a>
79
+ </div>
80
+
81
+ <div class="hidden md:flex space-x-6 space-x-reverse">
82
+ <a href="#home" class="text-blue-600 hover:text-blue-800">خانه</a>
83
+ <a href="#services" class="text-gray-600 hover:text-blue-600">خدمات</a>
84
+ <a href="#portfolio" class="text-gray-600 hover:text-blue-600">نمونه کارها</a>
85
+ <a href="#contact" class="text-gray-600 hover:text-blue-600">تماس با ما</a>
86
+ </div>
87
+
88
+ <div class="md:hidden">
89
+ <button id="mobile-menu-button" class="text-gray-600 hover:text-blue-600">
90
+ <i class="fas fa-bars text-2xl"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- منوی موبایل -->
96
+ <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4">
97
+ <a href="#home" class="block py-2 text-gray-600 hover:text-blue-600">خانه</a>
98
+ <a href="#services" class="block py-2 text-gray-600 hover:text-blue-600">خدمات</a>
99
+ <a href="#portfolio" class="block py-2 text-gray-600 hover:text-blue-600">نمونه کارها</a>
100
+ <a href="#contact" class="block py-2 text-gray-600 hover:text-blue-600">تماس با ما</a>
101
+ </div>
102
+ </div>
103
+ </nav>
104
+
105
+ <!-- بخش هیرو -->
106
+ <section id="home" class="hero-bg text-white py-20 md:py-32">
107
+ <div class="container mx-auto px-4">
108
+ <div class="flex flex-col md:flex-row items-center">
109
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
110
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">تبدیل ایده‌های شما به واقعیت دیجیتال</h1>
111
+ <p class="text-xl mb-8">ما با تیمی از متخصصان خلاق همراه شما هستیم تا کسب و کار ��ما را به سطح جدیدی برسانیم.</p>
112
+ <div class="flex space-x-4 space-x-reverse">
113
+ <a href="#contact" class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">شروع پروژه</a>
114
+ <a href="#services" class="border-2 border-white text-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-blue-600 transition duration-300">خدمات ما</a>
115
+ </div>
116
+ </div>
117
+ <div class="md:w-1/2 fade-in">
118
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?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">
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- بخش خدمات -->
125
+ <section id="services" class="py-20 bg-white">
126
+ <div class="container mx-auto px-4">
127
+ <div class="text-center mb-16">
128
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">خدمات تخصصی ما</h2>
129
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">ما راه حل‌های دیجیتال جامعی ارائه می‌دهیم که به رشد کسب و کار شما کمک می‌کند.</p>
130
+ </div>
131
+
132
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
133
+ <!-- سرویس 1 -->
134
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
135
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
136
+ <i class="fas fa-code text-blue-600 text-2xl"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-4">توسعه وب</h3>
139
+ <p class="text-gray-600">طراحی و توسعه وبسایت‌های حرفه ای، واکنشگرا و با عملکرد بالا با استفاده از آخرین تکنولوژی‌ها.</p>
140
+ </div>
141
+
142
+ <!-- سرویس 2 -->
143
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
144
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
145
+ <i class="fas fa-mobile-alt text-blue-600 text-2xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-4">توسعه اپلیکیشن موبایل</h3>
148
+ <p class="text-gray-600">ساخت اپلیکیشن‌های موبایل بومی و هیبریدی برای پلتفرم‌های iOS و Android.</p>
149
+ </div>
150
+
151
+ <!-- سرویس 3 -->
152
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
153
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
154
+ <i class="fas fa-paint-brush text-blue-600 text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-4">طراحی UI/UX</h3>
157
+ <p class="text-gray-600">طراحی رابط کاربری جذاب و تجربه کاربری عالی برای محصولات دیجیتال شما.</p>
158
+ </div>
159
+
160
+ <!-- سرویس 4 -->
161
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
162
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
163
+ <i class="fas fa-chart-line text-blue-600 text-2xl"></i>
164
+ </div>
165
+ <h3 class="text-xl font-bold mb-4">دیجیتال مارکتینگ</h3>
166
+ <p class="text-gray-600">استراتژی‌های بازاریابی دیجیتال برای افزایش حضور آنلاین و جذب مشتریان بیشتر.</p>
167
+ </div>
168
+
169
+ <!-- سرویس 5 -->
170
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
171
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
172
+ <i class="fas fa-search text-blue-600 text-2xl"></i>
173
+ </div>
174
+ <h3 class="text-xl font-bold mb-4">سئو و بهینه‌سازی</h3>
175
+ <p class="text-gray-600">بهبود رتبه سایت شما در موتورهای جستجو برای افزایش ترافیک ارگانیک.</p>
176
+ </div>
177
+
178
+ <!-- سرویس 6 -->
179
+ <div class="service-card bg-gray-50 p-8 rounded-xl transition duration-300">
180
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
181
+ <i class="fas fa-cloud text-blue-600 text-2xl"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold mb-4">مشاوره فناوری</h3>
184
+ <p class="text-gray-600">مشاوره تخصصی برای انتخاب بهترین راهکارهای فناوری برای کسب و کار شما.</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- بخش نمونه کارها -->
191
+ <section id="portfolio" class="py-20 bg-gray-50">
192
+ <div class="container mx-auto px-4">
193
+ <div class="text-center mb-16">
194
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">نمونه کارهای ما</h2>
195
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">برخی از پروژه‌های اخیر ما که با همکاری مشتریان عزیز انجام داده‌ایم.</p>
196
+ </div>
197
+
198
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
199
+ <!-- پروژه 1 -->
200
+ <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md">
201
+ <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="پروژه طراحی وب" class="w-full h-48 object-cover">
202
+ <div class="p-6">
203
+ <h3 class="text-xl font-bold mb-2">وبسایت فروشگاهی</h3>
204
+ <p class="text-gray-600 mb-4">طراحی و توسعه یک پلتفرم تجارت الکترونیک با امکانات پیشرفته.</p>
205
+ <a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- پروژه 2 -->
210
+ <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md">
211
+ <img src="https://images.unsplash.com/photo-1555774698-0f77e70f60d1?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">
212
+ <div class="p-6">
213
+ <h3 class="text-xl font-bold mb-2">اپلیکیشن سلامت</h3>
214
+ <p class="text-gray-600 mb-4">توسعه یک اپلیکیشن موبایل برای ردیابی فعالیت‌های ورزشی و سلامت.</p>
215
+ <a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- پروژه 3 -->
220
+ <div class="portfolio-item bg-white rounded-xl overflow-hidden shadow-md">
221
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8b3885?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="پروژه طراحی رابط کاربری" class="w-full h-48 object-cover">
222
+ <div class="p-6">
223
+ <h3 class="text-xl font-bold mb-2">طراحی سیستم مدیریت</h3>
224
+ <p class="text-gray-600 mb-4">طراحی رابط کاربری برای یک سیستم مدیریت محتوای سازمانی.</p>
225
+ <a href="#" class="text-blue-600 font-bold hover:text-blue-800">مشاهده جزئیات <i class="fas fa-arrow-left mr-2"></i></a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="text-center mt-12">
231
+ <a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">مشاهده همه پروژه‌ها</a>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+
237
+ <!-- بخش نظرات مشتریان -->
238
+ <section class="py-20 bg-gray-50">
239
+ <div class="container mx-auto px-4">
240
+ <div class="text-center mb-16">
241
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">نظرات مشتریان ما</h2>
242
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">آنچه مشتریان ما درباره خدمات ما می‌گویند.</p>
243
+ </div>
244
+
245
+ <div class="relative">
246
+ <div class="testimonial-carousel overflow-hidden">
247
+ <div class="flex transition-transform duration-300 ease-in-out" id="testimonial-slides">
248
+ <!-- نظر 1 -->
249
+ <div class="testimonial-card min-w-full px-4">
250
+ <div class="bg-white p-8 rounded-xl shadow-md">
251
+ <div class="flex items-center mb-6">
252
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover">
253
+ <div class="mr-4">
254
+ <h4 class="font-bold">علیرضا محمودی</h4>
255
+ <p class="text-gray-600">مدیر عامل شرکت فن‌آوران</p>
256
+ </div>
257
+ </div>
258
+ <p class="text-gray-700">"تیم نوین‌کرایتیو وبسایت شرکت ما را با بالاترین کیفیت طراحی و توسعه دادند. همکاری با آنها بسیار حرفه‌ای و نتیجه‌بخش بود. ترافیک سایت ما پس از راه‌اندازی ۳ برابر شد."</p>
259
+ <div class="flex mt-4 text-yellow-400">
260
+ <i class="fas fa-star"></i>
261
+ <i class="fas fa-star"></i>
262
+ <i class="fas fa-star"></i>
263
+ <i class="fas fa-star"></i>
264
+ <i class="fas fa-star"></i>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- نظر 2 -->
270
+ <div class="testimonial-card min-w-full px-4">
271
+ <div class="bg-white p-8 rounded-xl shadow-md">
272
+ <div class="flex items-center mb-6">
273
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover">
274
+ <div class="mr-4">
275
+ <h4 class="font-bold">فاطمه احمدی</h4>
276
+ <p class="text-gray-600">مدیر بازاریابی فروشگاه اینترنتی</p>
277
+ </div>
278
+ </div>
279
+ <p class="text-gray-700">"استراتژی‌های بازاریابی دیجیتال که تیم نوین‌کرایتیو برای ما طراحی کرد، باعث افزایش ۷۰ درصدی فروش آنلاین ما در مدت ۳ ماه شد. بسیار متخصص و قابل اعتماد هستند."</p>
280
+ <div class="flex mt-4 text-yellow-400">
281
+ <i class="fas fa-star"></i>
282
+ <i class="fas fa-star"></i>
283
+ <i class="fas fa-star"></i>
284
+ <i class="fas fa-star"></i>
285
+ <i class="fas fa-star"></i>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- نظر 3 -->
291
+ <div class="testimonial-card min-w-full px-4">
292
+ <div class="bg-white p-8 rounded-xl shadow-md">
293
+ <div class="flex items-center mb-6">
294
+ <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="مشتری" class="w-16 h-16 rounded-full object-cover">
295
+ <div class="mr-4">
296
+ <h4 class="font-bold">محمد جوادی</h4>
297
+ <p class="text-gray-600">مدیر فناوری استارتاپ</p>
298
+ </div>
299
+ </div>
300
+ <p class="text-gray-700">"اپلیکیشن موبایلی که تیم نوین‌کرایتیو برای استارتاپ ما توسعه داد، از نظر عملکرد و طراحی بی‌نظیر است. کاربران ما تجربه بسیار خوبی با اپلیکیشن دارند و این باعث رشد سریع ما شده است."</p>
301
+ <div class="flex mt-4 text-yellow-400">
302
+ <i class="fas fa-star"></i>
303
+ <i class="fas fa-star"></i>
304
+ <i class="fas fa-star"></i>
305
+ <i class="fas fa-star"></i>
306
+ <i class="fas fa-star-half-alt"></i>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+
313
+ <button id="prev-testimonial" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md text-blue-600 hover:bg-blue-50">
314
+ <i class="fas fa-chevron-right"></i>
315
+ </button>
316
+ <button id="next-testimonial" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white p-2 rounded-full shadow-md text-blue-600 hover:bg-blue-50">
317
+ <i class="fas fa-chevron-left"></i>
318
+ </button>
319
+ </div>
320
+
321
+ <div class="flex justify-center mt-8 space-x-2 space-x-reverse">
322
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="0"></button>
323
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="1"></button>
324
+ <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-200" data-index="2"></button>
325
+ </div>
326
+ </div>
327
+ </section>
328
+
329
+ <!-- بخش قیمت‌گذاری -->
330
+ <section class="py-20 bg-white">
331
+ <div class="container mx-auto px-4">
332
+ <div class="text-center mb-16">
333
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">طرح‌های قیمت‌گذاری</h2>
334
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">طرح‌های متنوعی برای نیازهای مختلف کسب و کار شما.</p>
335
+ </div>
336
+
337
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
338
+ <!-- طرح پایه -->
339
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md">
340
+ <h3 class="text-xl font-bold mb-4">پایه</h3>
341
+ <div class="mb-6">
342
+ <span class="text-4xl font-bold text-blue-600">۱,۲۰۰,۰۰۰</span>
343
+ <span class="text-gray-600">تومان</span>
344
+ </div>
345
+ <ul class="space-y-3 mb-8">
346
+ <li class="flex items-center">
347
+ <i class="fas fa-check text-green-500 mr-2"></i>
348
+ <span>طراحی وبسایت ساده</span>
349
+ </li>
350
+ <li class="flex items-center">
351
+ <i class="fas fa-check text-green-500 mr-2"></i>
352
+ <span>۵ صفحه اصلی</span>
353
+ </li>
354
+ <li class="flex items-center">
355
+ <i class="fas fa-check text-green-500 mr-2"></i>
356
+ <span>واکنشگرا (Responsive)</span>
357
+ </li>
358
+ <li class="flex items-center">
359
+ <i class="fas fa-check text-green-500 mr-2"></i>
360
+ <span>پشتیبانی ۱ ماهه</span>
361
+ </li>
362
+ <li class="flex items-center text-gray-400">
363
+ <i class="fas fa-times mr-2"></i>
364
+ <span>سئو پیشرفته</span>
365
+ </li>
366
+ <li class="flex items-center text-gray-400">
367
+ <i class="fas fa-times mr-2"></i>
368
+ <span>برندینگ</span>
369
+ </li>
370
+ </ul>
371
+ <a href="#" class="block text-center bg-blue-600 text-white py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">انتخاب طرح</a>
372
+ </div>
373
+
374
+ <!-- طرح حرفه‌ای -->
375
+ <div class="bg-blue-600 text-white rounded-xl p-8 shadow-lg transform scale-105">
376
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400 text-blue-800 px-4 py-1 rounded-full font-bold">پیشنهاد ویژه</div>
377
+ <h3 class="text-xl font-bold mb-4">حرفه‌ای</h3>
378
+ <div class="mb-6">
379
+ <span class="text-4xl font-bold">۲,۵۰۰,۰۰۰</span>
380
+ <span>تومان</span>
381
+ </div>
382
+ <ul class="space-y-3 mb-8">
383
+ <li class="flex items-center">
384
+ <i class="fas fa-check mr-2"></i>
385
+ <span>طراحی وبسایت حرفه‌ای</span>
386
+ </li>
387
+ <li class="flex items-center">
388
+ <i class="fas fa-check mr-2"></i>
389
+ <span>۱۰ صفحه اصلی + بخش بلاگ</span>
390
+ </li>
391
+ <li class="flex items-center">
392
+ <i class="fas fa-check mr-2"></i>
393
+ <span>واکنشگرا (Responsive)</span>
394
+ </li>
395
+ <li class="flex items-center">
396
+ <i class="fas fa-check mr-2"></i>
397
+ <span>پشتیبانی ۳ ماهه</span>
398
+ </li>
399
+ <li class="flex items-center">
400
+ <i class="fas fa-check mr-2"></i>
401
+ <span>بهینه‌سازی سئو پایه</span>
402
+ </li>
403
+ <li class="flex items-center">
404
+ <i class="fas fa-check mr-2"></i>
405
+ <span>لوگو و هویت بصری</span>
406
+ </li>
407
+ </ul>
408
+ <a href="#" class="block text-center bg-white text-blue-600 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300">انتخاب طرح</a>
409
+ </div>
410
+
411
+ <!-- طرح سازمانی -->
412
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md">
413
+ <h3 class="text-xl font-bold mb-4">سازمانی</h3>
414
+ <div class="mb-6">
415
+ <span class="text-4xl font-bold text-blue-600">۵,۰۰۰,۰۰۰</span>
416
+ <span class="text-gray-600">تومان</span>
417
+ </div>
418
+ <ul class="space-y-3 mb-8">
419
+ <li class="flex items-center">
420
+ <i class="fas fa-check text-green-500 mr-2"></i>
421
+ <span>طراحی وبسایت سفارشی</span>
422
+ </li>
423
+ <li class="flex items-center">
424
+ <i class="fas fa-check text-green-500 mr-2"></i>
425
+ <span>صفحات نامحدود + سیستم مدیریت محتوا</span>
426
+ </li>
427
+ <li class="flex items-center">
428
+ <i class="fas fa-check text-green-500 mr-2"></i>
429
+ <span>واکنشگرا (Responsive)</span>
430
+ </li>
431
+ <li class="flex items-center">
432
+ <i class="fas fa-check text-green-500 mr-2"></i>
433
+ <span>پشتیبانی ۶ ماهه</span>
434
+ </li>
435
+ <li class="flex items-center">
436
+ <i class="fas fa-check text-green-500 mr-2"></i>
437
+ <span>سئو پیشرفته</span>
438
+ </li>
439
+ <li class="flex items-center">
440
+ <i class="fas fa-check text-green-500 mr-2"></i>
441
+ <span>برندینگ کامل</span>
442
+ </li>
443
+ </ul>
444
+ <a href="#" class="block text-center bg-blue-600 text-white py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">انتخاب طرح</a>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </section>
449
+
450
+ <!-- بخش سوالات متداول -->
451
+ <section class="py-20 bg-gray-50">
452
+ <div class="container mx-auto px-4">
453
+ <div class="text-center mb-16">
454
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">سوالات متداول</h2>
455
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">پاسخ به رایج‌ترین سوالات شما درباره خدمات ما.</p>
456
+ </div>
457
+
458
+ <div class="max-w-3xl mx-auto">
459
+ <!-- سوال 1 -->
460
+ <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden">
461
+ <button class="accordion-header w-full flex justify-between items-center p-6 text-right">
462
+ <span class="text-lg font-bold">فرآیند همکاری با شما چگونه است؟</span>
463
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
464
+ </button>
465
+ <div class="accordion-content">
466
+ <div class="p-6 pt-0 text-gray-700">
467
+ <p>فرآیند همکاری با ما در چند مرحله انجام می‌شود:</p>
468
+ <ol class="list-decimal pr-5 mt-3 space-y-2">
469
+ <li>جلسه مشاوره اولیه برای درک نیازها و اهداف شما</li>
470
+ <li>تهیه پیشنهاد و طرح اولیه پروژه</li>
471
+ <li>امضای قرارداد و شروع رسمی پروژه</li>
472
+ <li>طراحی و ارائه نمونه اولیه</li>
473
+ <li>توسعه و پیاده‌سازی</li>
474
+ <li>تست و کنترل کیفیت</li>
475
+ <li>تحویل نهایی و آموزش</li>
476
+ <li>پشتیبانی پس از تحویل</li>
477
+ </ol>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- سوال 2 -->
483
+ <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden">
484
+ <button class="accordion-header w-full flex justify-between items-center p-6 text-right">
485
+ <span class="text-lg font-bold">مدت زمان تحویل پر��ژه چقدر است؟</span>
486
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
487
+ </button>
488
+ <div class="accordion-content">
489
+ <div class="p-6 pt-0 text-gray-700">
490
+ <p>مدت زمان تحویل بستگی به پیچیدگی و ابعاد پروژه دارد. به طور کلی:</p>
491
+ <ul class="list-disc pr-5 mt-3 space-y-2">
492
+ <li>وبسایت‌های ساده: ۲ تا ۴ هفته</li>
493
+ <li>وبسایت‌های حرفه‌ای: ۴ تا ۸ هفته</li>
494
+ <li>اپلیکیشن‌های موبایل: ۸ تا ۱۲ هفته</li>
495
+ <li>پروژه‌های سفارشی بزرگ: ۳ تا ۶ ماه</li>
496
+ </ul>
497
+ <p class="mt-3">پس از بررسی دقیق نیازهای شما، زمان‌بندی دقیق‌تری ارائه خواهیم داد.</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- سوال 3 -->
503
+ <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden">
504
+ <button class="accordion-header w-full flex justify-between items-center p-6 text-right">
505
+ <span class="text-lg font-bold">آیا امکان تغییرات پس از شروع پروژه وجود دارد؟</span>
506
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
507
+ </button>
508
+ <div class="accordion-content">
509
+ <div class="p-6 pt-0 text-gray-700">
510
+ <p>بله، اما این موضوع بستگی به مرحله پروژه دارد:</p>
511
+ <p class="mt-3">در مراحل اولیه طراحی، تغییرات معمولاً بدون هزینه اضافه قابل انجام هستند. اما پس از تایید طرح اولیه و شروع توسعه، تغییرات اساسی ممکن است نیاز به بازنگری در زمان‌بندی و هزینه داشته باشند.</p>
512
+ <p class="mt-3">ما همیشه سعی می‌کنیم انعطاف‌پذیر باشیم و تغییرات منطقی را در طول پروژه اعمال کنیم، اما برای جلوگیری از تاخیرهای غیرضروری، توصیه می‌کنیم نیازهای خود را به طور کامل در ابتدا مشخص کنید.</p>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- سوال 4 -->
518
+ <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden">
519
+ <button class="accordion-header w-full flex justify-between items-center p-6 text-right">
520
+ <span class="text-lg font-bold">آیا می‌توانم نمونه کارهای مشابه با کسب و کار خودم را ببینم؟</span>
521
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
522
+ </button>
523
+ <div class="accordion-content">
524
+ <div class="p-6 pt-0 text-gray-700">
525
+ <p>قطعاً. ما نمونه کارهای مختلفی در صنایع گوناگون داریم و می‌توانیم نمونه‌های مرتبط با حوزه فعالیت شما را ارائه دهیم.</p>
526
+ <p class="mt-3">در بخش <a href="#portfolio" class="text-blue-600 hover:underline">نمونه کارها</a> می‌توانید برخی از پروژه‌های اخیر ما را مشاهده کنید. همچنین در جلسه مشاوره اولیه، نمونه‌های بیشتری را با توجه به نیاز خاص شما نمایش خواهیم داد.</p>
527
+ <p class="mt-3">اگر پروژه خاصی مد نظر دارید که به دلایل محرمانه در سایت نمایش داده نشده، می‌توانیم در جلسه خصوصی آن را با شما به اشتراک بگذاریم.</p>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- سوال 5 -->
533
+ <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden">
534
+ <button class="accordion-header w-full flex justify-between items-center p-6 text-right">
535
+ <span class="text-lg font-bold">پشتیبانی پس از تحویل پروژه چگونه است؟</span>
536
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
537
+ </button>
538
+ <div class="accordion-content">
539
+ <div class="p-6 pt-0 text-gray-700">
540
+ <p>همه طرح‌های ما شامل دوره پشتیبانی رایگان پس از تحویل هستند (مدت زمان پشتیبانی رایگان بسته به طرح انتخابی متفاوت است).</p>
541
+ <p class="mt-3">پس از اتمام دوره پشتیبانی رایگان، می‌توانید یکی از طرح‌های پشتیبانی ماهانه یا سالانه را انتخاب کنید که شامل:</p>
542
+ <ul class="list-disc pr-5 mt-3 space-y-2">
543
+ <li>رفع باگ‌ها و مشکلات فنی</li>
544
+ <li>به‌روزرسانی‌های جزئی</li>
545
+ <li>پشتیبانی تلفنی و آنلاین</li>
546
+ <li>بک‌آپ منظم</li>
547
+ <li>مشاوره فنی</li>
548
+ </ul>
549
+ <p class="mt-3">همچنین برای پروژه‌های بزرگ، پشتیبانی اختصاصی با شرایط ویژه ارائه می‌دهیم.</p>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </section>
556
+
557
+ <!-- بخش تماس با ما -->
558
+ <section id="contact" class="py-20 bg-white">
559
+ <div class="container mx-auto px-4">
560
+ <div class="text-center mb-16">
561
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">تماس با ما</h2>
562
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">آماده پاسخگویی به سوالات و شروع پروژه جدید شما هستیم.</p>
563
+ </div>
564
+
565
+ <div class="flex flex-col lg:flex-row gap-12">
566
+ <div class="lg:w-1/2">
567
+ <form class="space-y-6">
568
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
569
+ <div>
570
+ <label for="name" class="block mb-2 font-bold">نام کامل</label>
571
+ <input type="text" id="name" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="نام و نام خانوادگی">
572
+ </div>
573
+ <div>
574
+ <label for="email" class="block mb-2 font-bold">ایمیل</label>
575
+ <input type="email" id="email" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="آدرس ایمیل">
576
+ </div>
577
+ </div>
578
+ <div>
579
+ <label for="subject" class="block mb-2 font-bold">موضوع</label>
580
+ <input type="text" id="subject" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="موضوع پیام">
581
+ </div>
582
+ <div>
583
+ <label for="message" class="block mb-2 font-bold">پیام</label>
584
+ <textarea id="message" rows="5" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="متن پیام شما"></textarea>
585
+ </div>
586
+ <button type="submit" class="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition duration-300">ارسال پیام</button>
587
+ </form>
588
+ </div>
589
+
590
+ <div class="lg:w-1/2">
591
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md h-full">
592
+ <h3 class="text-xl font-bold mb-6">اطلاعات تماس</h3>
593
+
594
+ <div class="space-y-6">
595
+ <div class="flex items-start">
596
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
597
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
598
+ </div>
599
+ <div>
600
+ <h4 class="font-bold mb-1">آدرس</h4>
601
+ <p class="text-gray-600">تهران، خیابان ولیعصر، پلاک ۱۰۰۰، طبقه ۵</p>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="flex items-start">
606
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
607
+ <i class="fas fa-phone-alt text-blue-600"></i>
608
+ </div>
609
+ <div>
610
+ <h4 class="font-bold mb-1">تلفن</h4>
611
+ <p class="text-gray-600">۰۲۱-۸۸۸۸۸۸۸۸</p>
612
+ <p class="text-gray-600">۰۹۱۲-۱۲۳۴۵۶۷</p>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="flex items-start">
617
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
618
+ <i class="fas fa-envelope text-blue-600"></i>
619
+ </div>
620
+ <div>
621
+ <h4 class="font-bold mb-1">ایمیل</h4>
622
+ <p class="text-gray-600">[email protected]</p>
623
+ <p class="text-gray-600">[email protected]</p>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="flex items-start">
628
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
629
+ <i class="fas fa-clock text-blue-600"></i>
630
+ </div>
631
+ <div>
632
+ <h4 class="font-bold mb-1">ساعات کاری</h4>
633
+ <p class="text-gray-600">شنبه تا چهارشنبه: ۹ صبح تا ۵ بعدازظهر</p>
634
+ <p class="text-gray-600">پنجشنبه: ۹ صبح تا ۱ بعدازظهر</p>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="mt-8">
640
+ <h4 class="font-bold mb-4">ما را در شبکه‌های اجتماعی دنبال کنید</h4>
641
+ <div class="flex space-x-4 space-x-reverse">
642
+ <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700">
643
+ <i class="fab fa-instagram"></i>
644
+ </a>
645
+ <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700">
646
+ <i class="fab fa-telegram"></i>
647
+ </a>
648
+ <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700">
649
+ <i class="fab fa-linkedin-in"></i>
650
+ </a>
651
+ <a href="#" class="bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700">
652
+ <i class="fab fa-twitter"></i>
653
+ </a>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+
660
+ <div class="mt-16 rounded-xl overflow-hidden shadow-md">
661
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.676001380693!2d51.38982131526684!3d35.73234398018485!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDQzJzU2LjQiTiA1McKwMjMnMjkuOSJF!5e0!3m2!1sen!2s!4v1620000000000!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- پاورقی -->
667
+ <footer class="bg-gray-900 text-white py-12">
668
+ <div class="container mx-auto px-4">
669
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
670
+ <div>
671
+ <h3 class="text-xl font-bold mb-4">نوین‌کرایتیو</h3>
672
+ <p class="text-gray-400">ما با خلاقیت و تخصص، کسب و کار شما را به سطح جدیدی می‌رسانیم. همراه شما در مسیر دیجیتال.</p>
673
+ </div>
674
+
675
+ <div>
676
+ <h3 class="text-xl font-bold mb-4">لینک‌های سریع</h3>
677
+ <ul class="space-y-2">
678
+ <li><a href="#home" class="text-gray-400 hover:text-white">خانه</a></li>
679
+ <li><a href="#services" class="text-gray-400 hover:text-white">خدمات</a></li>
680
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white">نمونه کارها</a></li>
681
+ <li><a href="#contact" class="text-gray-400 hover:text-white">تماس با ما</a></li>
682
+ </ul>
683
+ </div>
684
+
685
+ <div>
686
+ <h3 class="text-xl font-bold mb-4">خدمات</h3>
687
+ <ul class="space-y-2">
688
+ <li><a href="#" class="text-gray-400 hover:text-white">توسعه وب</a></li>
689
+ <li><a href="#" class="text-gray-400 hover:text-white">توسعه اپلیکیشن</a></li>
690
+ <li><a href="#" class="text-gray-400 hover:text-white">طراحی UI/UX</a></li>
691
+ <li><a href="#" class="text-gray-400 hover:text-white">دیجیتال مارکتینگ</a></li>
692
+ <li><a href="#" class="text-gray-400 hover:text-white">سئو</a></li>
693
+ </ul>
694
+ </div>
695
+
696
+ <div>
697
+ <h3 class="text-xl font-bold mb-4">خبرنامه</h3>
698
+ <p class="text-gray-400 mb-4">با عضویت در خبرنامه از آخرین اخبار و تخفیف‌ها مطلع شوید.</p>
699
+ <form class="flex">
700
+ <input type="email" placeholder="ایمیل شما" class="px-4 py-2 rounded-r-lg w-full focus:outline-none text-gray-800">
701
+ <button type="submit" class="bg-blue-600 px-4 py-2 rounded-l-lg hover:bg-blue-700">
702
+ <i class="fas fa-paper-plane"></i>
703
+ </button>
704
+ </form>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
709
+ <p class="text-gray-400">© ۱۴۰۲ نوین‌کرایتیو. تمام حقوق محفوظ است.</p>
710
+ <div class="flex space-x-6 space-x-reverse mt-4 md:mt-0">
711
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
712
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a>
713
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
714
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
715
+ </div>
716
+ </div>
717
+ </div>
718
+ </footer>
719
+
720
+ <script>
721
+ // منوی موبایل
722
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
723
+ const mobileMenu = document.getElementById('mobile-menu');
724
+
725
+ mobileMenuButton.addEventListener('click', () => {
726
+ mobileMenu.classList.toggle('hidden');
727
+ });
728
+
729
+ // اسلایدر نظرات
730
+ const testimonialSlides = document.getElementById('testimonial-slides');
731
+ const prevTestimonial = document.getElementById('prev-testimonial');
732
+ const nextTestimonial = document.getElementById('next-testimonial');
733
+ const testimonialDots = document.querySelectorAll('.testimonial-dot');
734
+
735
+ let currentSlide = 0;
736
+ const slideCount = document.querySelectorAll('.testimonial-card').length;
737
+
738
+ function updateSlider() {
739
+ testimonialSlides.style.transform = `translateX(${currentSlide * -100}%)`;
740
+
741
+ testimonialDots.forEach((dot, index) => {
742
+ if(index === currentSlide) {
743
+ dot.classList.add('bg-blue-600');
744
+ dot.classList.remove('bg-blue-200');
745
+ } else {
746
+ dot.classList.add('bg-blue-200');
747
+ dot.classList.remove('bg-blue-600');
748
+ }
749
+ });
750
+ }
751
+
752
+ prevTestimonial.addEventListener('click', () => {
753
+ currentSlide = (currentSlide - 1 + slideCount) % slideCount;
754
+ updateSlider();
755
+ });
756
+
757
+ nextTestimonial.addEventListener('click', () => {
758
+ currentSlide = (currentSlide + 1) % slideCount;
759
+ updateSlider();
760
+ });
761
+
762
+ testimonialDots.forEach(dot => {
763
+ dot.addEventListener('click', () => {
764
+ currentSlide = parseInt(dot.getAttribute('data-index'));
765
+ updateSlider();
766
+ });
767
+ });
768
+
769
+ // آکاردئون سوالات متداول
770
+ const accordionItems = document.querySelectorAll('.accordion-item');
771
+
772
+ accordionItems.forEach(item => {
773
+ const header = item.querySelector('.accordion-header');
774
+
775
+ header.addEventListener('click', () => {
776
+ const isActive = item.classList.contains('active');
777
+
778
+ // بستن همه آیتم‌ها
779
+ accordionItems.forEach(i => {
780
+ i.classList.remove('active');
781
+ i.querySelector('.accordion-header i').classList.remove('fa-chevron-up');
782
+ i.querySelector('.accordion-header i').classList.add('fa-chevron-down');
783
+ });
784
+
785
+ // باز کردن آیتم فعلی اگر قبلا باز نبود
786
+ if(!isActive) {
787
+ item.classList.add('active');
788
+ header.querySelector('i').classList.remove('fa-chevron-down');
789
+ header.querySelector('i').classList.add('fa-chevron-up');
790
+ }
791
+ });
792
+ });
793
+
794
+ // اسکرول نرم برای لینک‌های منو
795
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
796
+ anchor.addEventListener('click', function (e) {
797
+ e.preventDefault();
798
+
799
+ const targetId = this.getAttribute('href');
800
+ const targetElement = document.querySelector(targetId);
801
+
802
+ if(targetElement) {
803
+ window.scrollTo({
804
+ top: targetElement.offsetTop - 80,
805
+ behavior: 'smooth'
806
+ });
807
+
808
+ // بستن منوی موبایل در صورت باز بودن
809
+ if(!mobileMenu.classList.contains('hidden')) {
810
+ mobileMenu.classList.add('hidden');
811
+ }
812
+ }
813
+ });
814
+ });
815
+
816
+ // انیمیشن اسکرول
817
+ const fadeElements = document.querySelectorAll('.fade-in');
818
+
819
+ function checkScroll() {
820
+ fadeElements.forEach(element => {
821
+ const elementTop = element.getBoundingClientRect().top;
822
+ const windowHeight = window.innerHeight;
823
+
824
+ if(elementTop < windowHeight - 100) {
825
+ element.style.opacity = '1';
826
+ }
827
+ });
828
+ }
829
+
830
+ // اجرای اولیه
831
+ checkScroll();
832
+
833
+ // اجرا هنگام اسکرول
834
+ window.addEventListener('scroll', checkScroll);
835
+ </script>
836
+ <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=KINGHAJI/test-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
837
+ </html>