-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
620 lines (529 loc) · 39.8 KB
/
index.html
File metadata and controls
620 lines (529 loc) · 39.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Meta -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- SEO / App Description -->
<meta
name="description"
content="WebSync360 Portfolio Project – High-converting landing pages, dashboards, and automation systems for coaches and service-based businesses."
/>
<meta name="author" content="WebSync360" />
<!-- Page Title -->
<title>WebSync360 Portfolio — Landing Pages & Dashboards</title>
<!-- Favicon -->
<!-- Replace later with real logo -->
<link
rel="icon"
href="https://via.placeholder.com/32x32.png?text=W"
type="image/png"
/>
<!-- Google Font: Inter -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Tailwind CSS (compiled) -->
<link href="./dist/output.css" rel="stylesheet" />
<!-- Optional: Animate.css for subtle effects -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Open Graph (Social Preview for sharing) -->
<meta property="og:title" content="WebSync360 Portfolio — Landing Pages & Dashboards" />
<meta
property="og:description"
content="A professional, modern system for coaches: landing pages, dashboards, and automated workflows built to convert and manage clients efficiently."
/>
<meta
property="og:image"
content="https://via.placeholder.com/1200x630.png?text=Portfolio+Preview"
/>
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="WebSync360 Portfolio — Landing Pages & Dashboards" />
<meta
name="twitter:description"
content="Modern, clean, and high-converting landing pages and dashboards designed for coaches and service-based entrepreneurs."
/>
<meta
name="twitter:image"
content="https://via.placeholder.com/1200x630.png?text=Portfolio+Preview"
/>
<!-- Normalize CSS (Optional, keeps consistency across browsers) -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
</head>
<body class="bg-white text-gray-800 font-sans">
<header class="fixed top-4 inset-x-0 z-50 flex justify-center px-4">
<nav class="container max-w-7xl bg-surface/80 backdrop-blur-md border border-brand-100 shadow-soft rounded-xl py-3 px-6 flex justify-between items-center transition-all duration-300">
<a href="/" class="flex items-center gap-3 group transition-transform duration-300 hover:scale-105">
<div class="w-10 h-10 bg-brand-100 rounded-lg flex items-center justify-center shadow-soft overflow-hidden">
<img src="https://cdn-icons-png.flaticon.com/128/2845/2845180.png" alt="Logo" class="w-full h-full object-cover">
</div>
<span class="text-xl font-bold tracking-tight text-text-primary">
WebSync<span class="text-brand-500">360</span>
</span>
</a>
<ul class="hidden md:flex items-center space-x-1">
<li>
<a href="#home" class="px-4 py-2 text-sm font-medium text-text-secondary hover:text-brand-500 hover:bg-brand-50 rounded-lg transition-all">Home</a>
</li>
<li>
<a href="#projects" class="px-4 py-2 text-sm font-medium text-text-secondary hover:text-brand-500 hover:bg-brand-50 rounded-lg transition-all">Projects</a>
</li>
<li>
<a href="#services" class="px-4 py-2 text-sm font-medium text-text-secondary hover:text-brand-500 hover:bg-brand-50 rounded-lg transition-all">Services</a>
</li>
<li>
<a href="#contact" class="px-4 py-2 text-sm font-medium text-text-secondary hover:text-brand-500 hover:bg-brand-50 rounded-lg transition-all">Contact</a>
</li>
</ul>
<div class="flex items-center gap-3">
<a href="https://wa.me/message/GMBGGAPKL6IHB1" target="_blank" rel="noopener noreferrer"
class="flex items-center justify-center w-10 h-10 bg-[#25D366]/10 text-[#25D366] rounded-lg border border-[#25D366]/20 hover:bg-[#25D366] hover:text-white hover:shadow-[0_0_15px_rgba(37,211,102,0.4)] transition-all duration-300 group"
title="Chat on WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.06 3.973L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93a7.898 7.898 0 0 0-2.327-5.607zM7.994 14.52a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
</svg>
</a>
<a href="#projects" class="hidden sm:block px-5 py-2.5 bg-brand-500 text-white text-sm font-semibold rounded-lg shadow-soft hover:bg-brand-600 hover:-translate-y-0.5 transition-all active:scale-95">
Get in Touch
</a>
</div>
<button class="md:hidden p-2 text-text-primary">
<button id="menu-btn" class="md:hidden p-2 text-text-primary hover:bg-brand-50 rounded-lg transition-colors">
<svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div id="mobile-menu" class="absolute top-20 left-0 w-full bg-white/95 backdrop-blur-xl border border-brand-100 rounded-2xl p-6 shadow-card opacity-0 scale-95 pointer-events-none transition-all duration-300 origin-top-right md:hidden">
<ul class="flex flex-col space-y-4">
<li><a href="#home" class="mobile-link block text-lg font-semibold text-text-primary py-2 border-b border-brand-50">Home</a></li>
<li><a href="#projects" class="mobile-link block text-lg font-semibold text-text-primary py-2 border-b border-brand-50">Projects</a></li>
<li><a href="#services" class="mobile-link block text-lg font-semibold text-text-primary py-2 border-b border-brand-50">Services</a></li>
<li><a href="#contact" class="mobile-link block text-lg font-semibold text-text-primary py-2">Contact</a></li>
</ul>
<a href="#projects" class="mt-6 block w-full py-4 bg-brand-500 text-white text-center font-bold rounded-xl shadow-card">Start a Project</a>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="relative min-h-screen flex items-center pt-24 pb-12 overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://avatars.mds.yandex.net/i?id=6f7ddd93b1b76101ffb8e870f32caf9cff2ba9ff-5238951-images-thumbs&n=13" alt="Background" class="w-full h-full object-cover opacity-10">
<div class="absolute inset-0 bg-gradient-to-b from-app via-transparent to-app"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-3/5 space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-100 text-brand-600 text-xs font-bold uppercase tracking-wider">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand-600"></span>
</span>
Available for New Projects
</div>
<h1 class="text-5xl md:text-7xl font-extrabold text-text-primary leading-[1.1] tracking-tight">
Turning Clicks into <span class="text-brand-500">Clients</span> for Coaches.
</h1>
<p class="text-xl text-text-secondary max-w-xl leading-relaxed">
I build high-performance web systems and automation tools that scale your service business while you sleep. Fast, clean, and conversion-focused.
</p>
<div class="flex flex-wrap gap-4">
<a href="#projects" class="px-8 py-4 bg-brand-500 text-white font-bold rounded-xl shadow-card hover:bg-brand-600 hover:-translate-y-1 transition-all">
View Case Studies
</a>
<a href="#contact" class="px-8 py-4 bg-white text-text-primary border border-brand-200 font-bold rounded-xl hover:bg-brand-50 transition-all">
Let's Talk
</a>
</div>
<div class="pt-8 border-t border-brand-100 mt-12">
<p class="text-sm font-semibold text-text-muted uppercase tracking-widest mb-4">Recent Deployments</p>
<div class="flex flex-wrap gap-6 opacity-60 grayscale hover:grayscale-0 transition-all">
<a href="https://hgbookingwebpage.vercel.app" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">Booking System</a>
<a href="https://bizedge-bice.vercel.app" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">Business Dashboard</a>
<a href="https://myndco.vercel.app" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">Mindset Coach Funnel</a>
<a href="https://edgecrm-psi.vercel.app" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">MindsetCoach_CRM</a>
<a href="https://fitnesscoachlandingpage.vercel.app" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">FitnessCoach_Funnel</a>
<a href="https://websync360.github.io/CoachFunnel-LP-WebSync360" target="_blank" class="text-text-primary font-bold hover:text-brand-500 transition-colors">BusinessCoach_Funnel</a>
</div>
</div>
</div>
<div class="lg:w-2/5 relative">
<div class="relative z-10 p-2 bg-surface rounded-2xl shadow-card border border-brand-100 transform rotate-2 hover:rotate-0 transition-transform duration-500">
<img src="./images/portfolioimage.png" alt="Project Mockup" class="rounded-xl w-full">
</div>
<div class="absolute -top-6 -right-6 z-20 bg-white p-4 rounded-xl shadow-card border border-brand-100 animate-bounce-slow">
<div class="text-brand-500 font-bold text-xl">+142%</div>
<div class="text-[10px] text-text-secondary uppercase font-bold tracking-tighter">Conversion Boost</div>
</div>
<div class="absolute -bottom-10 -left-10 z-20 bg-text-primary p-4 rounded-xl shadow-card text-white flex items-center gap-3">
<div class="w-8 h-8 bg-success rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
</div>
<div>
<div class="text-xs font-bold text-white/70 uppercase">Automation</div>
<div class="text-sm font-bold">Active & Live</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="solutions" class="py-24 bg-app-soft relative overflow-hidden">
<div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-96 h-96 bg-brand-100 rounded-full blur-[120px] opacity-50"></div>
<div class="container mx-auto px-6 relative z-10">
<div class="max-w-3xl mb-16">
<h2 class="text-brand-500 font-bold uppercase tracking-[0.2em] text-sm mb-4 flex items-center gap-2">
<span class="w-4 h-[2px] bg-brand-500"></span> Strategic Solutions
</h2>
<h3 class="text-4xl md:text-5xl font-extrabold text-text-primary leading-tight">
Engineered for the modern <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 to-brand-700">Coach & Entrepreneur.</span>
</h3>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<div class="group p-8 bg-surface border border-brand-100 rounded-2xl shadow-soft hover:shadow-card hover:-translate-y-2 transition-all duration-300">
<div class="w-12 h-12 bg-brand-50 text-brand-500 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-500 group-hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-brand-500 bg-brand-100 px-2 py-1 rounded-md">Growth & ROI</span>
<h4 class="text-2xl font-bold text-text-primary mt-4 mb-3">Business Coaches</h4>
<p class="text-text-secondary leading-relaxed mb-6">Stop losing leads to outdated forms. I build high-converting systems that turn cold traffic into discovery calls.</p>
<ul class="space-y-3">
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> Lead-Gen Dashboards</li>
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> Automated CRM Sync</li>
</ul>
</div>
<div class="group p-8 bg-surface border border-brand-100 rounded-2xl shadow-soft hover:shadow-card hover:-translate-y-2 transition-all duration-300">
<div class="w-12 h-12 bg-brand-50 text-brand-500 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-500 group-hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.364-5.636l.707.707M6.364 18.364l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-brand-500 bg-brand-100 px-2 py-1 rounded-md">Client Experience</span>
<h4 class="text-2xl font-bold text-text-primary mt-4 mb-3">Mindset Coaches</h4>
<p class="text-text-secondary leading-relaxed mb-6">Focus on the breakthrough, not the tech. I automate your client onboarding and program tracking workflows.</p>
<ul class="space-y-3">
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> 1-Click Onboarding</li>
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> Progress Tracking Hubs</li>
</ul>
</div>
<div class="group p-8 bg-surface border border-brand-100 rounded-2xl shadow-soft hover:shadow-card hover:-translate-y-2 transition-all duration-300">
<div class="w-12 h-12 bg-brand-50 text-brand-500 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-500 group-hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-brand-500 bg-brand-100 px-2 py-1 rounded-md">Efficiency</span>
<h4 class="text-2xl font-bold text-text-primary mt-4 mb-3">Fitness Coaches</h4>
<p class="text-text-secondary leading-relaxed mb-6">Scalable systems for your workouts and nutrition plans. Mobile-first landing pages that actually sign clients.</p>
<ul class="space-y-3">
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> Booking & Payments</li>
<li class="flex items-center gap-2 text-sm font-medium text-text-primary"><span class="text-success text-lg">✓</span> Automated Follow-ups</li>
</ul>
</div>
</div>
</div>
</section>
<section id="services" class="py-24 bg-white overflow-hidden">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
<div class="max-w-2xl">
<h2 class="text-brand-500 font-bold uppercase tracking-[0.2em] text-sm mb-4">Core Capabilities</h2>
<h3 class="text-4xl md:text-5xl font-extrabold text-text-primary leading-tight">
High-performance systems <br/>
<span class="text-text-secondary font-light italic">built for scale.</span>
</h3>
</div>
<p class="text-text-secondary max-w-xs text-sm leading-relaxed border-l-2 border-brand-100 pl-4">
I combine frontend excellence with backend automation to create tools that work as hard as you do.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-6 gap-6">
<div class="md:col-span-4 group relative overflow-hidden bg-brand-600 rounded-3xl p-10 text-white shadow-card transition-all duration-500 hover:shadow-2xl">
<div class="relative z-10 flex flex-col h-full">
<span class="text-6xl font-black opacity-10 absolute -top-4 -right-2 tracking-tighter">01</span>
<h4 class="text-3xl font-bold mb-4">Landing Pages & <br/>Lead Magnets</h4>
<p class="text-brand-100 max-w-sm mb-8">Conversion-optimized pages that speak directly to your coaching niche. Built with React and Tailwind for lightning speed.</p>
<div class="mt-auto flex gap-2 flex-wrap">
<span class="px-3 py-1 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-xs">Mobile-First</span>
<span class="px-3 py-1 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-xs">SEO Optimized</span>
<span class="px-3 py-1 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-xs">Copy-Focused</span>
</div>
</div>
<div class="absolute -bottom-20 -right-20 w-64 h-64 bg-brand-500 rounded-full blur-3xl opacity-50 group-hover:scale-125 transition-transform duration-700"></div>
</div>
<div class="md:col-span-2 group bg-surface border border-brand-100 rounded-3xl p-8 shadow-soft hover:border-brand-500 transition-all duration-300">
<span class="text-4xl font-black text-brand-100 block mb-4">02</span>
<h4 class="text-xl font-bold text-text-primary mb-3">Seamless <br/>Integrations</h4>
<p class="text-text-secondary text-sm mb-6">Connecting your ecosystem. Notion, Airtable, Google Sheets, and CRMs working in total harmony.</p>
<div class="grid grid-cols-3 gap-3 opacity-40 group-hover:opacity-100 transition-opacity">
<div class="aspect-square bg-app rounded-lg flex items-center justify-center p-2"><img src="https://cdn-icons-png.flaticon.com/128/5968/5968885.png" alt="Notion" class="grayscale group-hover:grayscale-0 transition-all"></div>
<div class="aspect-square bg-app rounded-lg flex items-center justify-center p-2"><img src="https://cdn-icons-png.flaticon.com/128/2504/2504953.png" alt="Zapier" class="grayscale group-hover:grayscale-0 transition-all"></div>
<div class="aspect-square bg-app rounded-lg flex items-center justify-center p-2"><img src="https://cdn-icons-png.flaticon.com/128/5968/5968763.png" alt="Airtable" class="grayscale group-hover:grayscale-0 transition-all"></div>
</div>
</div>
<div class="md:col-span-3 group bg-text-primary rounded-3xl p-10 text-white shadow-card relative overflow-hidden">
<span class="text-4xl font-black text-white/10 block mb-4">03</span>
<h4 class="text-2xl font-bold mb-3">Custom Dashboards</h4>
<p class="text-text-muted text-sm mb-6">I build private admin panels to help you track client progress, revenue, and program engagement at a glance.</p>
<div class="w-full h-2 bg-white/10 rounded-full overflow-hidden">
<div class="w-2/3 h-full bg-brand-500 group-hover:w-full transition-all duration-1000"></div>
</div>
<p class="text-[10px] mt-2 text-text-muted tracking-widest uppercase font-bold italic">Real-time Data Sync Active</p>
</div>
<div class="md:col-span-3 group bg-brand-50 border border-brand-200 rounded-3xl p-10 shadow-soft hover:shadow-card transition-all duration-300 relative">
<span class="text-4xl font-black text-brand-200 block mb-4">04</span>
<h4 class="text-2xl font-bold text-text-primary mb-3">Workflow Automation</h4>
<p class="text-text-secondary text-sm">Eliminate repetitive tasks. Automated onboarding, payment triggers, and follow-up sequences that run 24/7.</p>
<div class="absolute right-10 bottom-10 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-brand-500 animate-pulse"></div>
<div class="w-12 h-[2px] bg-brand-200"></div>
<div class="w-3 h-3 rounded-full bg-success"></div>
</div>
</div>
</div>
</div>
</section>
<section id="process" class="py-24 bg-app relative overflow-hidden">
<div class="container mx-auto px-6 mb-20 text-center">
<h2 class="text-brand-500 font-bold uppercase tracking-[0.2em] text-sm mb-4">The Workflow</h2>
<h3 class="text-4xl md:text-5xl font-extrabold text-text-primary">From Strategy to <span class="italic text-brand-600 font-light">Success.</span></h3>
</div>
<div class="container mx-auto px-6 relative">
<div class="hidden lg:block absolute top-1/2 left-0 w-full h-[2px] border-t-2 border-dashed border-brand-200 -translate-y-1/2 z-0"></div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 relative z-10">
<div class="group relative bg-surface p-8 rounded-3xl border border-brand-100 shadow-soft hover:shadow-card transition-all duration-300">
<div class="absolute -top-10 left-8 text-7xl font-black text-brand-50/50 group-hover:text-brand-100 transition-colors pointer-events-none uppercase">01</div>
<div class="w-14 h-14 bg-brand-500 text-white rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-brand-200 group-hover:-rotate-6 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.364-5.636l.707.707M6.364 18.364l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<h4 class="text-2xl font-bold text-text-primary mb-3">Discovery & Audit</h4>
<p class="text-text-secondary text-sm leading-relaxed mb-6">We map out your current coaching funnel and identify the bottlenecks where you're losing time and leads.</p>
<div class="flex flex-wrap gap-2">
<span class="text-[10px] font-bold py-1 px-2 bg-brand-50 text-brand-600 rounded uppercase">System Mapping</span>
<span class="text-[10px] font-bold py-1 px-2 bg-brand-50 text-brand-600 rounded uppercase">Tech Audit</span>
</div>
</div>
<div class="group relative bg-surface p-8 rounded-3xl border border-brand-100 shadow-soft hover:shadow-card transition-all duration-300">
<div class="absolute -top-10 left-8 text-7xl font-black text-brand-50/50 group-hover:text-brand-100 transition-colors pointer-events-none uppercase">02</div>
<div class="w-14 h-14 bg-brand-600 text-white rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-brand-200 group-hover:-rotate-6 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<h4 class="text-2xl font-bold text-text-primary mb-3">Build & Integrate</h4>
<p class="text-text-secondary text-sm leading-relaxed mb-6">I engineer your landing pages, custom dashboards, and connect them to your tools like Notion or Zapier.</p>
<div class="flex flex-wrap gap-2">
<span class="text-[10px] font-bold py-1 px-2 bg-brand-50 text-brand-600 rounded uppercase">Development</span>
<span class="text-[10px] font-bold py-1 px-2 bg-brand-50 text-brand-600 rounded uppercase">Automation Setup</span>
</div>
</div>
<div class="group relative bg-surface p-8 rounded-3xl border border-brand-100 shadow-soft hover:shadow-card transition-all duration-300">
<div class="absolute -top-10 left-8 text-7xl font-black text-brand-50/50 group-hover:text-brand-100 transition-colors pointer-events-none uppercase">03</div>
<div class="w-14 h-14 bg-success text-white rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-success/20 group-hover:-rotate-6 transition-transform">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h4 class="text-2xl font-bold text-text-primary mb-3">Launch & Scale</h4>
<p class="text-text-secondary text-sm leading-relaxed mb-6">Your systems go live. I provide a walkthrough and a month of support to ensure everything scales perfectly.</p>
<div class="flex flex-wrap gap-2">
<span class="text-[10px] font-bold py-1 px-2 bg-success/10 text-success rounded uppercase">Live Testing</span>
<span class="text-[10px] font-bold py-1 px-2 bg-success/10 text-success rounded uppercase">Handover</span>
</div>
</div>
</div>
</div>
</section>
<section id="projects" class="py-24 bg-text-primary text-white overflow-hidden">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-6">
<div>
<h2 class="text-brand-500 font-bold uppercase tracking-[0.2em] text-sm mb-4">Proof of Concept</h2>
<h3 class="text-4xl md:text-5xl font-extrabold leading-tight">
Selected <span class="text-brand-200">Deployments.</span>
</h3>
</div>
<p class="text-text-muted max-w-sm text-sm border-l border-white/20 pl-4">
A look into high-converting systems built for elite coaches and service businesses.
</p>
</div>
<div class="relative group grid grid-cols-1 lg:grid-cols-12 items-center gap-12 mb-32">
<div class="lg:col-span-7 relative">
<div class="relative rounded-3xl overflow-hidden border border-white/10 shadow-2xl transition-transform duration-500 group-hover:scale-[1.02]">
<img src="./images/portfolioimage1.png" alt="Portfolio Project" class="w-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-text-primary/80 to-transparent opacity-60"></div>
</div>
<div class="absolute -bottom-6 -right-6 md:right-10 bg-brand-500 p-6 rounded-2xl shadow-2xl animate-float">
<p class="text-[10px] font-bold uppercase tracking-widest text-brand-100">Project Impact</p>
<p class="text-2xl font-black">2.4x Leads</p>
</div>
</div>
<div class="lg:col-span-5 space-y-6 lg:pl-10">
<div class="flex items-center gap-3">
<span class="h-px bg-brand-500"></span>
<span class="text-brand-500 font-bold text-xs uppercase tracking-tighter">Web System + Automation</span>
</div>
<h4 class="text-3xl font-bold tracking-tight">The "CoachFlow" Dashboard</h4>
<p class="text-text-muted leading-relaxed">
A centralized hub for a Mindset Coach that combined a high-converting landing page with a custom CRM. It automates onboarding emails and tracks client milestones in real-time.
</p>
<ul class="grid grid-cols-2 gap-3 text-sm font-medium">
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-brand-500 rounded-full"></span> React Frontend</li>
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-brand-500 rounded-full"></span> Zapier Automation</li>
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-brand-500 rounded-full"></span> Stripe Integration</li>
<li class="flex items-center gap-2"><span class="w-1.5 h-1.5 bg-brand-500 rounded-full"></span> Notion Database</li>
</ul>
<div class="pt-6 flex gap-4">
<a href="#" class="px-6 py-3 bg-white text-text-primary font-bold rounded-xl hover:bg-brand-50 transition-all flex items-center gap-2">
View Live Site
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
</a>
<a href="#contact" class="px-6 py-3 border border-white/20 text-white font-bold rounded-xl hover:bg-white/10 transition-all">
Inquire
</a>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white/5 border border-white/10 p-8 rounded-3xl hover:bg-white/10 transition-all group">
<div class="h-48 bg-text-primary rounded-xl mb-6 overflow-hidden border border-white/10">
<img src="./images/portfolioimage2.png" alt="Project" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
</div>
<h5 class="text-xl font-bold mb-2 text-brand-200">Fitness Hub Pro</h5>
<p class="text-text-muted text-sm mb-4">Automated workout scheduling and payment system for local PTs.</p>
<div class="flex gap-2">
<span class="text-[10px] bg-white/10 px-2 py-1 rounded">Automation</span>
<span class="text-[10px] bg-white/10 px-2 py-1 rounded">Tailwind</span>
</div>
</div>
<div class="bg-white/5 border border-white/10 p-8 rounded-3xl hover:bg-white/10 transition-all group">
<div class="h-48 bg-text-primary rounded-xl mb-6 overflow-hidden border border-white/10">
<img src="./images/portfolioimage3.png" alt="Project" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
</div>
<h5 class="text-xl font-bold mb-2 text-brand-200">ScaleUp Landing Page</h5>
<p class="text-text-muted text-sm mb-4">A high-conversion sales page with integrated lead capture and email triggers.</p>
<div class="flex gap-2">
<span class="text-[10px] bg-white/10 px-2 py-1 rounded">Marketing</span>
<span class="text-[10px] bg-white/10 px-2 py-1 rounded">Next.js</span>
</div>
</div>
</div>
</div>
</section>
<section id="contact-cta" class="relative py-24 px-6 overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://avatars.mds.yandex.net/i?id=6f7ddd93b1b76101ffb8e870f32caf9cff2ba9ff-5238951-images-thumbs&n=13" alt="Launch Background" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-r from-brand-700/50 via-brand-600/40 to-text-primary/95"></div>
</div>
<div class="container mx-auto relative z-10">
<div class="max-w-4xl mx-auto bg-white/5 backdrop-blur-xl border border-white/10 p-10 md:p-16 rounded-[2.5rem] shadow-2xl text-center">
<div class="inline-flex items-center justify-center w-20 h-20 bg-brand-500 rounded-3xl mb-8 shadow-[0_0_30px_rgba(99,102,241,0.5)] rotate-12 group-hover:rotate-0 transition-transform duration-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h2 class="text-4xl md:text-6xl font-black text-white mb-6 leading-tight tracking-tighter">
Ready to automate your <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-200 to-white">coaching empire?</span>
</h2>
<p class="text-brand-100 text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed opacity-90">
Stop fighting with tech. Let’s build the system that captures leads, closes clients, and handles your workflow while you focus on coaching.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="https://wa.me/message/GMBGGAPKL6IHB1" target="_blank" class="w-full sm:w-auto px-10 py-5 bg-[#25D366] text-white font-bold rounded-2xl shadow-[0_10px_20px_rgba(37,211,102,0.3)] hover:scale-105 hover:shadow-[0_15px_25px_rgba(37,211,102,0.4)] transition-all flex items-center justify-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.06 3.973L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93a7.898 7.898 0 0 0-2.327-5.607zM7.994 14.52a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
</svg>
Send a WhatsApp
</a>
<a href="mailto:websync360o@gmail.com" class="w-full sm:w-auto px-10 py-5 bg-white/10 backdrop-blur-md text-white border border-white/20 font-bold rounded-2xl hover:bg-white/20 transition-all">
Email Inquiry
</a>
</div>
<div class="mt-8 flex items-center justify-center gap-2">
<span class="flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-success opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-success"></span>
</span>
<span class="text-xs font-bold text-brand-100 uppercase tracking-widest">Typical response: 20 minutes </span>
</div>
</div>
</div>
</section>
<footer class="bg-surface pt-20 pb-10 border-t border-brand-100">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 mb-16">
<div class="md:col-span-5 space-y-6">
<a href="/" class="flex items-center gap-3">
<div class="w-8 h-8 bg-brand-100 rounded-lg flex items-center justify-center shadow-soft">
<img src="https://cdn-icons-png.flaticon.com/128/2845/2845180.png" alt="Logo" class="w-full h-full p-1.5">
</div>
<span class="text-xl font-bold tracking-tight text-text-primary">WebSync<span class="text-brand-500">360</span></span>
</a>
<p class="text-text-secondary text-sm leading-relaxed max-w-sm">
Building high-performance web systems and automation for coaches. Scale your impact while I handle the architecture.
</p>
<div class="inline-flex items-center gap-2 px-3 py-1 bg-success/10 rounded-full">
<span class="w-1.5 h-1.5 bg-success rounded-full animate-pulse"></span>
<span class="text-[10px] font-bold text-success uppercase tracking-wider">All Systems Operational</span>
</div>
</div>
<div class="md:col-span-3">
<h5 class="text-text-primary font-bold mb-6">Sitemap</h5>
<ul class="space-y-4">
<li><a href="#home" class="text-text-secondary text-sm hover:text-brand-500 transition-colors">Home</a></li>
<li><a href="#projects" class="text-text-secondary text-sm hover:text-brand-500 transition-colors">Featured Projects</a></li>
<li><a href="#services" class="text-text-secondary text-sm hover:text-brand-500 transition-colors">My Services</a></li>
<li><a href="#contact" class="text-text-secondary text-sm hover:text-brand-500 transition-colors">Get Started</a></li>
</ul>
</div>
<div class="md:col-span-4">
<h5 class="text-text-primary font-bold mb-6">Direct Channels</h5>
<div class="space-y-4">
<a href="mailto:websync360o@gmail.com" class="flex items-center gap-3 group">
<div class="w-10 h-10 bg-app rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-text-secondary group-hover:text-brand-500" fill="none" viewBox="0 0 24 24" stroke="currentColor font-bold"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
</div>
<span class="text-text-secondary text-sm group-hover:text-text-primary transition-colors font-medium">websync360o@gmail.com</span>
</a>
<a href="https://wa.me/message/GMBGGAPKL6IHB1" target="_blank" class="flex items-center gap-3 group">
<div class="w-10 h-10 bg-app rounded-xl flex items-center justify-center group-hover:bg-[#25D366]/10 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-text-secondary group-hover:text-[#25D366]" fill="currentColor" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.06 3.973L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93a7.898 7.898 0 0 0-2.327-5.607z"/>
</svg>
</div>
<span class="text-text-secondary text-sm group-hover:text-text-primary transition-colors font-medium">WhatsApp Direct</span>
</a>
</div>
</div>
</div>
<div class="pt-8 border-t border-brand-100 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-text-muted text-xs">
© 2025 <span class="text-text-primary font-bold">WebSync360</span>. All rights reserved.
</p>
<div class="flex items-center gap-6">
<p class="text-[10px] font-black uppercase text-brand-200 tracking-widest leading-none">Design & Code by WebSync360</p>
<div class="flex gap-4">
<a href="#" class="text-text-muted hover:text-brand-500 transition-colors"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
</div>
</div>
</div>
</div>
</footer>
<script src="src/script.js"></script>
</body>
</html>