Hugging Face's logo

Spaces:
dickiethinking
/
chitchat
Running

App Files Community
dickiethinking commited on
Commit
e2537d6
·
verified ·
1 Parent(s): cc011fd

this image is inappropriate, replace with a faceless man - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +875 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chitchat
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: green
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: chitchat
3
+ emoji: 🐳
4
+ colorFrom: purple
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,875 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Chit Chat - Support for Men Falsely Accused</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#2563eb',
15
+ secondary: '#60a5fa',
16
+ accent: '#f59e0b',
17
+ dark: '#1e293b',
18
+ light: '#f8fafc'
19
+ },
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, #2563eb 0%, #f59e0b 100%);
36
+ -webkit-background-clip: text;
37
+ background-clip: text;
38
+ color: transparent;
39
+ }
40
+
41
+ .hero-bg {
42
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%),
43
+ url('https://images.unsplash.com/photo-1581349485608-9469926a8e5e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1964&q=80');
44
+ background-size: cover;
45
+ background-position: center;
46
+ background-attachment: fixed;
47
+ }
48
+
49
+ .service-card {
50
+ transition: all 0.3s ease;
51
+ border-left: 4px solid transparent;
52
+ }
53
+
54
+ .service-card:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
57
+ border-left-color: #f59e0b;
58
+ }
59
+
60
+ .testimonial-card {
61
+ transition: all 0.3s ease;
62
+ }
63
+
64
+ .testimonial-card:hover {
65
+ transform: translateY(-5px);
66
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
67
+ }
68
+
69
+ .nav-link {
70
+ position: relative;
71
+ }
72
+
73
+ .nav-link::after {
74
+ content: '';
75
+ position: absolute;
76
+ width: 0;
77
+ height: 2px;
78
+ bottom: -2px;
79
+ left: 0;
80
+ background-color: #f59e0b;
81
+ transition: width 0.3s ease;
82
+ }
83
+
84
+ .nav-link:hover::after {
85
+ width: 100%;
86
+ }
87
+
88
+ .animate-float {
89
+ animation: float 6s ease-in-out infinite;
90
+ }
91
+
92
+ @keyframes float {
93
+ 0% { transform: translateY(0px); }
94
+ 50% { transform: translateY(-20px); }
95
+ 100% { transform: translateY(0px); }
96
+ }
97
+
98
+ .animate-pulse-slow {
99
+ animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
100
+ }
101
+
102
+ @keyframes pulse {
103
+ 0%, 100% { opacity: 1; }
104
+ 50% { opacity: 0.8; }
105
+ }
106
+
107
+ .contact-input:focus {
108
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="bg-light text-dark">
113
+ <!-- Navigation -->
114
+ <nav class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
115
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
116
+ <div class="flex items-center space-x-2">
117
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
118
+ <i class="fas fa-comments text-xl"></i>
119
+ </div>
120
+ <a href="#" class="text-2xl font-bold text-dark">Chit<span class="text-primary">Chat</span></a>
121
+ </div>
122
+
123
+ <!-- Desktop Menu -->
124
+ <div class="hidden md:flex space-x-8 items-center">
125
+ <a href="#home" class="nav-link font-medium text-dark hover:text-primary">Home</a>
126
+ <a href="#about" class="nav-link font-medium text-dark hover:text-primary">About</a>
127
+ <a href="#services" class="nav-link font-medium text-dark hover:text-primary">Services</a>
128
+ <a href="#testimonials" class="nav-link font-medium text-dark hover:text-primary">Testimonials</a>
129
+ <a href="#contact" class="nav-link font-medium text-dark hover:text-primary">Contact</a>
130
+ <a href="#contact" class="bg-primary hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300">Get Help</a>
131
+ </div>
132
+
133
+ <!-- Mobile menu button -->
134
+ <button id="mobile-menu-button" class="md:hidden text-dark focus:outline-none">
135
+ <i class="fas fa-bars text-2xl"></i>
136
+ </button>
137
+ </div>
138
+
139
+ <!-- Mobile Menu -->
140
+ <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-6 shadow-lg">
141
+ <div class="flex flex-col space-y-4">
142
+ <a href="#home" class="nav-link font-medium text-dark hover:text-primary">Home</a>
143
+ <a href="#about" class="nav-link font-medium text-dark hover:text-primary">About</a>
144
+ <a href="#services" class="nav-link font-medium text-dark hover:text-primary">Services</a>
145
+ <a href="#testimonials" class="nav-link font-medium text-dark hover:text-primary">Testimonials</a>
146
+ <a href="#contact" class="nav-link font-medium text-dark hover:text-primary">Contact</a>
147
+ <a href="#contact" class="bg-primary hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full text-center transition duration-300 mt-2">Get Help</a>
148
+ </div>
149
+ </div>
150
+ </nav>
151
+
152
+ <!-- Hero Section -->
153
+ <section id="home" class="hero-bg text-white py-20 md:py-32">
154
+ <div class="container mx-auto px-4">
155
+ <div class="flex flex-col md:flex-row items-center gap-12">
156
+ <div class="md:w-1/2">
157
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
158
+ <span class="gradient-text">Reclaim Your Life</span><br>
159
+ After False Accusations
160
+ </h1>
161
+ <p class="text-xl mb-8 opacity-90">Professional counselling and legal support for men facing false abuse allegations. Regain your confidence, reputation, and peace of mind.</p>
162
+ <div class="flex flex-col sm:flex-row gap-4">
163
+ <a href="#" class="bg-accent hover:bg-yellow-600 text-white font-semibold py-3 px-8 rounded-full transition duration-300 text-center shadow-lg hover:shadow-xl">
164
+ <i class="fas fa-calendar-check mr-2"></i> Book a Session
165
+ </a>
166
+ <a href="#services" class="bg-white/10 hover:bg-white/20 border-2 border-white text-white font-semibold py-3 px-8 rounded-full transition duration-300 text-center">
167
+ <i class="fas fa-info-circle mr-2"></i> Learn More
168
+ </a>
169
+ </div>
170
+ </div>
171
+ <div class="md:w-1/2 hidden md:block">
172
+ <div class="relative">
173
+ <div class="w-full h-full bg-primary/20 rounded-2xl overflow-hidden backdrop-blur-sm border border-white/10">
174
+ <img src="https://cdn.midjourney.com/01866d7c-efc1-4dbc-a0ea-78b48dea6797/0_0.png" alt="Support" class="w-full h-auto object-cover rounded-2xl">
175
+ </div>
176
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-xl animate-float">
177
+ <div class="bg-primary/10 text-primary p-3 rounded-full">
178
+ <i class="fas fa-hand-holding-heart text-2xl"></i>
179
+ </div>
180
+ <p class="text-sm font-medium mt-2 text-dark">24/7 Support Available</p>
181
+ </div>
182
+ <div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-xl animate-float" style="animation-delay: 1s;">
183
+ <div class="bg-accent/10 text-accent p-3 rounded-full">
184
+ <i class="fas fa-user-shield text-2xl"></i>
185
+ </div>
186
+ <p class="text-sm font-medium mt-2 text-dark">Confidential</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Stats Section -->
195
+ <section class="py-16 bg-white">
196
+ <div class="container mx-auto px-4">
197
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
198
+ <div class="bg-light p-8 rounded-2xl shadow-sm text-center hover:shadow-md transition duration-300">
199
+ <div class="text-5xl font-bold mb-3 text-primary animate-count" id="years-count">0</div>
200
+ <h3 class="text-xl font-semibold mb-2">Years of Experience</h3>
201
+ <p class="text-gray-600">Providing specialized support for men in crisis</p>
202
+ </div>
203
+ <div class="bg-light p-8 rounded-2xl shadow-sm text-center hover:shadow-md transition duration-300">
204
+ <div class="text-5xl font-bold mb-3 text-primary animate-count" id="clients-count">0</div>
205
+ <h3 class="text-xl font-semibold mb-2">Men Supported</h3>
206
+ <p class="text-gray-600">Helping clients navigate false allegations</p>
207
+ </div>
208
+ <div class="bg-light p-8 rounded-2xl shadow-sm text-center hover:shadow-md transition duration-300">
209
+ <div class="text-5xl font-bold mb-3 text-primary animate-count" id="success-count">0</div>
210
+ <h3 class="text-xl font-semibold mb-2">Success Stories</h3>
211
+ <p class="text-gray-600">Rebuilding lives after false accusations</p>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <!-- About Section -->
218
+ <section id="about" class="py-20 bg-light">
219
+ <div class="container mx-auto px-4">
220
+ <div class="text-center mb-16">
221
+ <span class="text-primary font-semibold">ABOUT US</span>
222
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Meet John Chitty</h2>
223
+ <div class="w-20 h-1 bg-accent mx-auto"></div>
224
+ </div>
225
+
226
+ <div class="flex flex-col md:flex-row items-center gap-12">
227
+ <div class="md:w-1/2 relative">
228
+ <img src="https://cdn.midjourney.com/36d5e842-907f-42d3-a709-a5ad0d7096f0/0_0.png" alt="John Chitty" class="rounded-2xl shadow-xl w-full">
229
+ <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-lg hidden md:block">
230
+ <div class="flex items-center">
231
+ <div class="bg-primary/10 text-primary p-3 rounded-full mr-4">
232
+ <i class="fas fa-award text-2xl"></i>
233
+ </div>
234
+ <div>
235
+ <h4 class="font-bold">Certified Counselor</h4>
236
+ <p class="text-sm text-gray-600">15+ years experience</p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="md:w-1/2">
242
+ <h3 class="text-2xl font-bold mb-6">Specialized Support for False Allegations</h3>
243
+ <p class="text-gray-700 mb-4">John Chitty founded Chit Chat after recognizing the unique challenges men face when falsely accused of abuse. With a background in both counselling and legal advocacy, he provides comprehensive support that addresses both emotional and practical needs.</p>
244
+ <p class="text-gray-700 mb-6">John's approach combines evidence-based therapeutic techniques with practical guidance to help clients navigate the complex aftermath of false accusations, from legal proceedings to rebuilding personal relationships.</p>
245
+
246
+ <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-accent">
247
+ <p class="text-gray-700 italic mb-3">"False accusations can shatter lives, but they don't have to be the end of your story. With the right support, you can reclaim your dignity and move forward."</p>
248
+ <p class="font-semibold text-right">— John Chitty, Founder</p>
249
+ </div>
250
+
251
+ <div class="mt-8 grid grid-cols-2 gap-4">
252
+ <div class="flex items-center">
253
+ <div class="bg-primary/10 text-primary p-2 rounded-full mr-3">
254
+ <i class="fas fa-check"></i>
255
+ </div>
256
+ <span class="text-gray-700">Licensed Therapist</span>
257
+ </div>
258
+ <div class="flex items-center">
259
+ <div class="bg-primary/10 text-primary p-2 rounded-full mr-3">
260
+ <i class="fas fa-check"></i>
261
+ </div>
262
+ <span class="text-gray-700">Legal Advocacy</span>
263
+ </div>
264
+ <div class="flex items-center">
265
+ <div class="bg-primary/10 text-primary p-2 rounded-full mr-3">
266
+ <i class="fas fa-check"></i>
267
+ </div>
268
+ <span class="text-gray-700">24/7 Availability</span>
269
+ </div>
270
+ <div class="flex items-center">
271
+ <div class="bg-primary/10 text-primary p-2 rounded-full mr-3">
272
+ <i class="fas fa-check"></i>
273
+ </div>
274
+ <span class="text-gray-700">Confidential Support</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Services Section -->
283
+ <section id="services" class="py-20 bg-white">
284
+ <div class="container mx-auto px-4">
285
+ <div class="text-center mb-16">
286
+ <span class="text-primary font-semibold">OUR SERVICES</span>
287
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Specialized Support Programs</h2>
288
+ <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive services designed to address every aspect of your situation, from emotional healing to legal navigation.</p>
289
+ <div class="w-20 h-1 bg-accent mx-auto mt-4"></div>
290
+ </div>
291
+
292
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
293
+ <!-- Service 1 -->
294
+ <div class="service-card bg-light p-8 rounded-xl">
295
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
296
+ <i class="fas fa-heart text-2xl"></i>
297
+ </div>
298
+ <h3 class="text-xl font-bold mb-3">Emotional Recovery</h3>
299
+ <p class="text-gray-600 mb-4">Personalized counselling to process trauma, manage stress, and rebuild self-worth after false allegations.</p>
300
+ <a href="#" class="text-primary font-medium flex items-center">
301
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
302
+ </a>
303
+ </div>
304
+
305
+ <!-- Service 2 -->
306
+ <div class="service-card bg-light p-8 rounded-xl">
307
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
308
+ <i class="fas fa-gavel text-2xl"></i>
309
+ </div>
310
+ <h3 class="text-xl font-bold mb-3">Legal Navigation</h3>
311
+ <p class="text-gray-600 mb-4">Expert guidance through legal complexities with referrals to specialized attorneys and advocacy support.</p>
312
+ <a href="#" class="text-primary font-medium flex items-center">
313
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
314
+ </a>
315
+ </div>
316
+
317
+ <!-- Service 3 -->
318
+ <div class="service-card bg-light p-8 rounded-xl">
319
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
320
+ <i class="fas fa-users text-2xl"></i>
321
+ </div>
322
+ <h3 class="text-xl font-bold mb-3">Peer Support Groups</h3>
323
+ <p class="text-gray-600 mb-4">Safe spaces to connect with others facing similar challenges, share experiences, and find community.</p>
324
+ <a href="#" class="text-primary font-medium flex items-center">
325
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
326
+ </a>
327
+ </div>
328
+
329
+ <!-- Service 4 -->
330
+ <div class="service-card bg-light p-8 rounded-xl">
331
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
332
+ <i class="fas fa-child text-2xl"></i>
333
+ </div>
334
+ <h3 class="text-xl font-bold mb-3">Parental Rights</h3>
335
+ <p class="text-gray-600 mb-4">Specialized support for fathers fighting to maintain or regain relationships with their children.</p>
336
+ <a href="#" class="text-primary font-medium flex items-center">
337
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
338
+ </a>
339
+ </div>
340
+
341
+ <!-- Service 5 -->
342
+ <div class="service-card bg-light p-8 rounded-xl">
343
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
344
+ <i class="fas fa-briefcase text-2xl"></i>
345
+ </div>
346
+ <h3 class="text-xl font-bold mb-3">Career Rehabilitation</h3>
347
+ <p class="text-gray-600 mb-4">Strategies to address professional fallout and rebuild your career trajectory after reputation damage.</p>
348
+ <a href="#" class="text-primary font-medium flex items-center">
349
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
350
+ </a>
351
+ </div>
352
+
353
+ <!-- Service 6 -->
354
+ <div class="service-card bg-light p-8 rounded-xl">
355
+ <div class="bg-primary/10 text-primary w-14 h-14 rounded-full flex items-center justify-center mb-6">
356
+ <i class="fas fa-handshake text-2xl"></i>
357
+ </div>
358
+ <h3 class="text-xl font-bold mb-3">Relationship Rebuilding</h3>
359
+ <p class="text-gray-600 mb-4">Guidance on forming new connections and repairing existing relationships damaged by false allegations.</p>
360
+ <a href="#" class="text-primary font-medium flex items-center">
361
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
362
+ </a>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- Testimonials Section -->
369
+ <section id="testimonials" class="py-20 bg-primary text-white">
370
+ <div class="container mx-auto px-4">
371
+ <div class="text-center mb-16">
372
+ <span class="text-accent font-semibold">CLIENT STORIES</span>
373
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Voices of Resilience</h2>
374
+ <p class="text-white/80 max-w-2xl mx-auto">Hear from men who've walked this path and emerged stronger with our support.</p>
375
+ <div class="w-20 h-1 bg-accent mx-auto mt-4"></div>
376
+ </div>
377
+
378
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
379
+ <!-- Testimonial 1 -->
380
+ <div class="testimonial-card bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/10">
381
+ <div class="flex items-center mb-6">
382
+ <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-accent">
383
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
384
+ </div>
385
+ <div class="ml-4">
386
+ <h4 class="font-bold text-lg">Michael T.</h4>
387
+ <p class="text-white/70 text-sm">Father of two</p>
388
+ </div>
389
+ </div>
390
+ <p class="italic mb-6">"After my ex falsely accused me, I was suicidal. John's counselling gave me hope again. Today, I have joint custody and my life back. This program saved me."</p>
391
+ <div class="flex text-accent">
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ <i class="fas fa-star"></i>
395
+ <i class="fas fa-star"></i>
396
+ <i class="fas fa-star"></i>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- Testimonial 2 -->
401
+ <div class="testimonial-card bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/10">
402
+ <div class="flex items-center mb-6">
403
+ <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-accent">
404
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client" class="w-full h-full object-cover">
405
+ </div>
406
+ <div class="ml-4">
407
+ <h4 class="font-bold text-lg">David R.</h4>
408
+ <p class="text-white/70 text-sm">Business owner</p>
409
+ </div>
410
+ </div>
411
+ <p class="italic mb-6">"The legal guidance and emotional support helped me clear my name. Two years later, my business is thriving and I'm in a healthy new relationship."</p>
412
+ <div class="flex text-accent">
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star"></i>
416
+ <i class="fas fa-star"></i>
417
+ <i class="fas fa-star"></i>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Testimonial 3 -->
422
+ <div class="testimonial-card bg-white/10 backdrop-blur-sm p-8 rounded-xl border border-white/10">
423
+ <div class="flex items-center mb-6">
424
+ <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-accent">
425
+ <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Client" class="w-full h-full object-cover">
426
+ </div>
427
+ <div class="ml-4">
428
+ <h4 class="font-bold text-lg">James L.</h4>
429
+ <p class="text-white/70 text-sm">Teacher</p>
430
+ </div>
431
+ </div>
432
+ <p class="italic mb-6">"The support group connected me with others who understood. After losing my job and nearly my family, I've rebuilt everything thanks to this program."</p>
433
+ <div class="flex text-accent">
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ <i class="fas fa-star-half-alt"></i>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </section>
444
+
445
+ <!-- FAQ Section -->
446
+ <section class="py-20 bg-light">
447
+ <div class="container mx-auto px-4">
448
+ <div class="text-center mb-16">
449
+ <span class="text-primary font-semibold">HAVE QUESTIONS?</span>
450
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Frequently Asked Questions</h2>
451
+ <p class="text-gray-600 max-w-2xl mx-auto">Find answers to common questions about our services and approach.</p>
452
+ <div class="w-20 h-1 bg-accent mx-auto mt-4"></div>
453
+ </div>
454
+
455
+ <div class="max-w-3xl mx-auto">
456
+ <!-- FAQ Item 1 -->
457
+ <div class="mb-4 bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
458
+ <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-dark focus:outline-none">
459
+ <span>Is everything discussed in sessions confidential?</span>
460
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
461
+ </button>
462
+ <div class="faq-answer mt-4 text-gray-600 hidden">
463
+ <p>Yes, all counselling sessions are completely confidential, with the exception of situations where there is immediate risk of harm to yourself or others, which we are legally obligated to report. We use encrypted communication platforms and secure record-keeping to protect your privacy.</p>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- FAQ Item 2 -->
468
+ <div class="mb-4 bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
469
+ <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-dark focus:outline-none">
470
+ <span>Do you provide legal advice or representation?</span>
471
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
472
+ </button>
473
+ <div class="faq-answer mt-4 text-gray-600 hidden">
474
+ <p>While we're not a law firm, we provide critical legal navigation support. This includes explaining legal processes, helping you understand your rights, preparing you for court appearances, and connecting you with specialized attorneys in our network. We work alongside your legal team to provide comprehensive support.</p>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- FAQ Item 3 -->
479
+ <div class="mb-4 bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
480
+ <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-dark focus:outline-none">
481
+ <span>How quickly can I get an appointment?</span>
482
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
483
+ </button>
484
+ <div class="faq-answer mt-4 text-gray-600 hidden">
485
+ <p>We prioritize urgent cases, especially those with imminent court dates or crisis situations. Typically, we can schedule initial consultations within 48 hours. Emergency support is available 24/7 through our crisis line for clients in immediate distress.</p>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- FAQ Item 4 -->
490
+ <div class="mb-4 bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
491
+ <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-dark focus:outline-none">
492
+ <span>What payment options do you accept?</span>
493
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
494
+ </button>
495
+ <div class="faq-answer mt-4 text-gray-600 hidden">
496
+ <p>We accept all major credit cards, bank transfers, and some insurance plans. For clients facing financial hardship due to their situation, we offer a sliding scale fee structure and payment plans. Some legal navigation services may be eligible for legal aid funding in certain jurisdictions.</p>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- FAQ Item 5 -->
501
+ <div class="mb-4 bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
502
+ <button class="faq-question flex justify-between items-center w-full text-left font-semibold text-lg text-dark focus:outline-none">
503
+ <span>Can you help if my case is already in court?</span>
504
+ <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i>
505
+ </button>
506
+ <div class="faq-answer mt-4 text-gray-600 hidden">
507
+ <p>Absolutely. We frequently assist clients at all stages of legal proceedings. Our team can help you prepare for court appearances, understand legal strategies, manage the emotional toll of litigation, and connect you with expert witnesses if needed. The sooner you reach out, the more we can help.</p>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </section>
513
+
514
+ <!-- CTA Section -->
515
+ <section class="py-16 bg-gradient-to-r from-primary to-accent text-white">
516
+ <div class="container mx-auto px-4 text-center">
517
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Reclaim Your Life?</h2>
518
+ <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Take the first step toward healing and justice. Our team is here to support you 24/7.</p>
519
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
520
+ <a href="#" class="bg-white hover:bg-gray-100 text-primary font-semibold py-3 px-8 rounded-full transition duration-300 shadow-lg hover:shadow-xl">
521
+ <i class="fas fa-phone-alt mr-2"></i> Call Now: (555) 123-4567
522
+ </a>
523
+ <a href="#contact" class="bg-transparent hover:bg-white/10 border-2 border-white text-white font-semibold py-3 px-8 rounded-full transition duration-300">
524
+ <i class="fas fa-envelope mr-2"></i> Send a Message
525
+ </a>
526
+ </div>
527
+ </div>
528
+ </section>
529
+
530
+ <!-- Contact Section -->
531
+ <section id="contact" class="py-20 bg-white">
532
+ <div class="container mx-auto px-4">
533
+ <div class="flex flex-col md:flex-row gap-12">
534
+ <div class="md:w-1/2">
535
+ <h2 class="text-3xl font-bold text-dark mb-6">Get in Touch</h2>
536
+ <p class="text-gray-600 mb-8">Complete the form to schedule a confidential consultation. All inquiries are discreet.</p>
537
+
538
+ <div class="space-y-6">
539
+ <div class="flex items-start">
540
+ <div class="bg-primary/10 text-primary p-3 rounded-full mr-4">
541
+ <i class="fas fa-map-marker-alt"></i>
542
+ </div>
543
+ <div>
544
+ <h4 class="font-bold text-dark">Our Location</h4>
545
+ <p class="text-gray-600">123 Support Lane, Suite 456<br>London, UK</p>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="flex items-start">
550
+ <div class="bg-primary/10 text-primary p-3 rounded-full mr-4">
551
+ <i class="fas fa-phone-alt"></i>
552
+ </div>
553
+ <div>
554
+ <h4 class="font-bold text-dark">Contact Numbers</h4>
555
+ <p class="text-gray-600">Office: +44 20 1234 5678<br>24/7 Crisis: +44 20 8765 4321</p>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="flex items-start">
560
+ <div class="bg-primary/10 text-primary p-3 rounded-full mr-4">
561
+ <i class="fas fa-envelope"></i>
562
+ </div>
563
+ <div>
564
+ <h4 class="font-bold text-dark">Email Us</h4>
565
+ <p class="text-gray-600">help@chitchatsupport.com<br>legal@chitchatsupport.com</p>
566
+ </div>
567
+ </div>
568
+
569
+ <div class="flex items-start">
570
+ <div class="bg-primary/10 text-primary p-3 rounded-full mr-4">
571
+ <i class="fas fa-clock"></i>
572
+ </div>
573
+ <div>
574
+ <h4 class="font-bold text-dark">Working Hours</h4>
575
+ <p class="text-gray-600">Monday-Friday: 9am - 6pm<br>Saturday: 10am - 2pm<br>24/7 crisis support available</p>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="mt-8">
581
+ <h4 class="font-bold text-dark mb-4">Follow Us</h4>
582
+ <div class="flex space-x-4">
583
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition duration-300">
584
+ <i class="fab fa-facebook-f"></i>
585
+ </a>
586
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition duration-300">
587
+ <i class="fab fa-twitter"></i>
588
+ </a>
589
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition duration-300">
590
+ <i class="fab fa-linkedin-in"></i>
591
+ </a>
592
+ <a href="#" class="bg-gray-100 hover:bg-primary hover:text-white w-10 h-10 rounded-full flex items-center justify-center text-gray-600 transition duration-300">
593
+ <i class="fab fa-instagram"></i>
594
+ </a>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="md:w-1/2">
600
+ <form id="contact-form" class="bg-light p-8 rounded-2xl shadow-sm">
601
+ <div class="mb-6">
602
+ <label for="name" class="block text-gray-700 font-medium mb-2">Full Name *</label>
603
+ <input type="text" id="name" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" required>
604
+ </div>
605
+
606
+ <div class="mb-6">
607
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address *</label>
608
+ <input type="email" id="email" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" required>
609
+ </div>
610
+
611
+ <div class="mb-6">
612
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
613
+ <input type="tel" id="phone" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary">
614
+ </div>
615
+
616
+ <div class="mb-6">
617
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service Needed *</label>
618
+ <select id="service" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary appearance-none" required>
619
+ <option value="">Select a service</option>
620
+ <option value="emotional-support">Emotional Support</option>
621
+ <option value="legal-guidance">Legal Guidance</option>
622
+ <option value="support-groups">Support Groups</option>
623
+ <option value="parental-rights">Parental Rights Support</option>
624
+ <option value="career-recovery">Career Recovery</option>
625
+ <option value="relationship-rebuilding">Relationship Rebuilding</option>
626
+ <option value="not-sure">Not Sure - Need Consultation</option>
627
+ </select>
628
+ </div>
629
+
630
+ <div class="mb-6">
631
+ <label for="urgency" class="block text-gray-700 font-medium mb-2">Urgency Level</label>
632
+ <select id="urgency" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary appearance-none">
633
+ <option value="">Select urgency</option>
634
+ <option value="urgent">Urgent - Legal proceedings active</option>
635
+ <option value="important">Important - Need support soon</option>
636
+ <option value="standard">Standard - Exploring options</option>
637
+ </select>
638
+ </div>
639
+
640
+ <div class="mb-6">
641
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Situation *</label>
642
+ <textarea id="message" rows="5" class="contact-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-primary" required></textarea>
643
+ </div>
644
+
645
+ <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 shadow-md hover:shadow-lg">
646
+ <i class="fas fa-paper-plane mr-2"></i> Send Message
647
+ </button>
648
+
649
+ <p class="text-sm text-gray-500 mt-4">* Required fields. We respect your privacy and will never share your information.</p>
650
+ </form>
651
+
652
+ <div id="form-success" class="hidden mt-4 p-4 bg-green-100 text-green-700 rounded-lg border border-green-200">
653
+ <div class="flex items-center">
654
+ <i class="fas fa-check-circle text-xl mr-3"></i>
655
+ <div>
656
+ <h4 class="font-bold">Message Sent Successfully!</h4>
657
+ <p class="text-sm">Thank you for reaching out. Our team will contact you within 24 hours. For urgent matters, please call our crisis line.</p>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </section>
665
+
666
+ <!-- Footer -->
667
+ <footer class="bg-dark text-white pt-16 pb-8">
668
+ <div class="container mx-auto px-4">
669
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
670
+ <div>
671
+ <div class="flex items-center mb-6">
672
+ <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-3">
673
+ <i class="fas fa-comments text-xl"></i>
674
+ </div>
675
+ <span class="text-2xl font-bold">Chit<span class="text-primary">Chat</span></span>
676
+ </div>
677
+ <p class="text-gray-400 mb-6">Specialized support for men facing false abuse allegations. Rebuilding lives with compassion and expertise.</p>
678
+ <div class="flex space-x-4">
679
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
680
+ <i class="fab fa-facebook-f"></i>
681
+ </a>
682
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
683
+ <i class="fab fa-twitter"></i>
684
+ </a>
685
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
686
+ <i class="fab fa-linkedin-in"></i>
687
+ </a>
688
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
689
+ <i class="fab fa-instagram"></i>
690
+ </a>
691
+ </div>
692
+ </div>
693
+
694
+ <div>
695
+ <h4 class="text-lg font-bold mb-6">Quick Links</h4>
696
+ <ul class="space-y-3">
697
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
698
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About John</a></li>
699
+ <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Our Services</a></li>
700
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition duration-300">Success Stories</a></li>
701
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact Us</a></li>
702
+ </ul>
703
+ </div>
704
+
705
+ <div>
706
+ <h4 class="text-lg font-bold mb-6">Services</h4>
707
+ <ul class="space-y-3">
708
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Emotional Support</a></li>
709
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Legal Navigation</a></li>
710
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Support Groups</a></li>
711
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Parental Rights</a></li>
712
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Career Recovery</a></li>
713
+ </ul>
714
+ </div>
715
+
716
+ <div>
717
+ <h4 class="text-lg font-bold mb-6">Newsletter</h4>
718
+ <p class="text-gray-400 mb-4">Subscribe for resources and updates on men's rights and mental health.</p>
719
+ <div class="flex mb-4">
720
+ <input type="email" placeholder="Your email" class="px-4 py-3 bg-gray-700 text-white rounded-l-lg focus:outline-none focus:bg-gray-600 w-full">
721
+ <button class="bg-primary hover:bg-blue-700 px-4 py-3 rounded-r-lg transition duration-300">
722
+ <i class="fas fa-paper-plane"></i>
723
+ </button>
724
+ </div>
725
+ <p class="text-sm text-gray-500">We respect your privacy. Unsubscribe at any time.</p>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
730
+ <p class="text-gray-400 mb-4 md:mb-0">&copy; 2023 Chit Chat Support Services. All rights reserved.</p>
731
+ <div class="flex space-x-6">
732
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Privacy Policy</a>
733
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Terms of Service</a>
734
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Cookie Policy</a>
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </footer>
739
+
740
+ <!-- Back to Top Button -->
741
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300 hover:bg-blue-700">
742
+ <i class="fas fa-arrow-up"></i>
743
+ </button>
744
+
745
+ <script>
746
+ // Mobile Menu Toggle
747
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
748
+ const mobileMenu = document.getElementById('mobile-menu');
749
+
750
+ mobileMenuButton.addEventListener('click', () => {
751
+ mobileMenu.classList.toggle('hidden');
752
+ mobileMenuButton.innerHTML = mobileMenu.classList.contains('hidden') ?
753
+ '<i class="fas fa-bars text-2xl"></i>' :
754
+ '<i class="fas fa-times text-2xl"></i>';
755
+ });
756
+
757
+ // FAQ Accordion
758
+ const faqQuestions = document.querySelectorAll('.faq-question');
759
+
760
+ faqQuestions.forEach(question => {
761
+ question.addEventListener('click', () => {
762
+ const answer = question.nextElementSibling;
763
+ const icon = question.querySelector('i');
764
+
765
+ // Close all other answers
766
+ faqQuestions.forEach(q => {
767
+ if (q !== question) {
768
+ q.nextElementSibling.classList.add('hidden');
769
+ q.querySelector('i').classList.remove('rotate-180');
770
+ }
771
+ });
772
+
773
+ // Toggle current answer
774
+ answer.classList.toggle('hidden');
775
+ icon.classList.toggle('rotate-180');
776
+ });
777
+ });
778
+
779
+ // Back to Top Button
780
+ const backToTopButton = document.getElementById('back-to-top');
781
+
782
+ window.addEventListener('scroll', () => {
783
+ if (window.pageYOffset > 300) {
784
+ backToTopButton.classList.remove('opacity-0', 'invisible');
785
+ backToTopButton.classList.add('opacity-100', 'visible');
786
+ } else {
787
+ backToTopButton.classList.remove('opacity-100', 'visible');
788
+ backToTopButton.classList.add('opacity-0', 'invisible');
789
+ }
790
+ });
791
+
792
+ backToTopButton.addEventListener('click', () => {
793
+ window.scrollTo({
794
+ top: 0,
795
+ behavior: 'smooth'
796
+ });
797
+ });
798
+
799
+ // Animated Counter for Stats
800
+ function animateCounter(id, target, duration = 2000) {
801
+ const element = document.getElementById(id);
802
+ const start = 0;
803
+ const increment = target / (duration / 16); // 60fps
804
+
805
+ let current = start;
806
+ const timer = setInterval(() => {
807
+ current += increment;
808
+ if (current >= target) {
809
+ clearInterval(timer);
810
+ current = target;
811
+ }
812
+ element.textContent = Math.floor(current);
813
+ }, 16);
814
+ }
815
+
816
+ // Start counters when stats section comes into view
817
+ const statsSection = document.querySelector('section.bg-white');
818
+ const observer = new IntersectionObserver((entries) => {
819
+ entries.forEach(entry => {
820
+ if (entry.isIntersecting) {
821
+ animateCounter('years-count', 15);
822
+ animateCounter('clients-count', 420);
823
+ animateCounter('success-count', 380);
824
+ observer.unobserve(entry.target);
825
+ }
826
+ });
827
+ }, { threshold: 0.5 });
828
+
829
+ observer.observe(statsSection);
830
+
831
+ // Smooth scrolling for navigation links
832
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
833
+ anchor.addEventListener('click', function(e) {
834
+ e.preventDefault();
835
+
836
+ const targetId = this.getAttribute('href');
837
+ if (targetId === '#') return;
838
+
839
+ const targetElement = document.querySelector(targetId);
840
+ if (targetElement) {
841
+ window.scrollTo({
842
+ top: targetElement.offsetTop - 80,
843
+ behavior: 'smooth'
844
+ });
845
+
846
+ // Close mobile menu if open
847
+ if (!mobileMenu.classList.contains('hidden')) {
848
+ mobileMenu.classList.add('hidden');
849
+ mobileMenuButton.innerHTML = '<i class="fas fa-bars text-2xl"></i>';
850
+ }
851
+ }
852
+ });
853
+ });
854
+
855
+ // Form submission
856
+ const contactForm = document.getElementById('contact-form');
857
+ const formSuccess = document.getElementById('form-success');
858
+
859
+ contactForm.addEventListener('submit', function(e) {
860
+ e.preventDefault();
861
+
862
+ // Simulate form submission
863
+ contactForm.classList.add('hidden');
864
+ formSuccess.classList.remove('hidden');
865
+
866
+ // Reset form after 5 seconds (in a real app, this would be after actual submission)
867
+ setTimeout(() => {
868
+ contactForm.reset();
869
+ contactForm.classList.remove('hidden');
870
+ formSuccess.classList.add('hidden');
871
+ }, 5000);
872
+ });
873
+ </script>
874
+ <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=dickiethinking/chitchat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
875
+ </html>