-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
692 lines (644 loc) · 34.7 KB
/
index.html
File metadata and controls
692 lines (644 loc) · 34.7 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
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Contact Solutions LLC | Enterprise Outsourcing</title>
<meta name="description"
content="Enterprise-grade BPO solutions with 24/7 operations. Headquartered in Texas, operating from the Philippines. Cut costs by 35% while scaling your team.">
<meta name="theme-color" content="#0f172a">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Infinite Contact Solutions LLC — Enterprise Outsourcing">
<meta property="og:description" content="24/7 BPO operations from Texas + Philippines. Cut costs 35%, scale teams in 3 weeks.">
<meta property="og:url" content="https://infinitecs.example.com">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Infinite Contact Solutions LLC — Enterprise Outsourcing">
<meta name="twitter:description" content="24/7 BPO operations from Texas + Philippines. Cut costs 35%, scale teams in 3 weeks.">
<!-- Favicon (inline SVG — no asset round-trip) -->
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306b6d4'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3Ctext x='32' y='44' font-family='Inter,sans-serif' font-size='40' font-weight='800' fill='white' text-anchor='middle'%3EI%3C/text%3E%3C/svg%3E">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800&display=swap"
rel="stylesheet">
<!-- Icons — pinned to 0.469.0 for reproducibility -->
<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
<!-- GSAP — pinned to 3.12.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<!-- Structured data (Organization) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Infinite Contact Solutions LLC",
"alternateName": "InfiniteCS",
"url": "https://infinitecs.example.com",
"description": "Enterprise-grade BPO with 24/7 operations from Texas HQ and Philippines hubs.",
"address": {
"@type": "PostalAddress",
"addressLocality": "Carrollton",
"addressRegion": "TX",
"addressCountry": "US"
}
}
</script>
<!-- Styles -->
<link rel="stylesheet" href="/src/styles/variables.css">
<link rel="stylesheet" href="/src/styles/layout.css">
<link rel="stylesheet" href="/src/styles/nav.css">
<link rel="stylesheet" href="/src/styles/hero.css">
<link rel="stylesheet" href="/src/styles/sections.css">
<link rel="stylesheet" href="/src/styles/contact.css">
<link rel="stylesheet" href="/src/styles/animations.css">
</head>
<body>
<!-- ────────────── LOADER ────────────── -->
<div id="loader">
<div class="loader-brand">Infinite<span>CS</span></div>
<div class="loader-subtitle">Establishing Connection</div>
<div class="loader-bar-wrap">
<div class="loader-bar" id="loaderBar"></div>
</div>
<div class="loader-pct" id="loaderPct">0%</div>
</div>
<!-- ────────────── SCROLL PROGRESS ────────────── -->
<div id="scroll-progress" aria-hidden="true"><div id="scroll-progress-fill"></div></div>
<!-- ────────────── NAVIGATION ────────────── -->
<nav id="navbar">
<div class="nav-inner">
<div class="nav-logo" onclick="window.scrollTo({top:0,behavior:'smooth'})">
<div class="nav-logo-icon"><span>I</span></div>
<span class="nav-logo-text">Infinite<em>CS</em></span>
</div>
<div class="nav-links" id="navLinks">
<a href="#home" class="nav-link active">Home</a>
<a href="#about" class="nav-link">About</a>
<a href="#services" class="nav-link">Services</a>
<a href="#strategy" class="nav-link">Strategy</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<div class="nav-cta-group">
<a href="#contact" class="nav-cta">Get Started</a>
<button class="nav-hamburger" id="hamburgerBtn" aria-label="Toggle menu">
<i data-lucide="menu"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobileMenu">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#strategy">Strategy</a>
<a href="#contact" class="mobile-cta">Contact Us</a>
</div>
</nav>
<!-- ────────────── HERO ────────────── -->
<section id="home" class="hero">
<div class="hero-bg">
<div class="hero-blob blob-1"></div>
<div class="hero-blob blob-2"></div>
<div class="hero-blob blob-3"></div>
</div>
<div class="hero-content">
<div class="hero-badge gsap-hero">
<span class="badge-dot"></span>
<span>The Future of Outsourcing</span>
</div>
<h1 class="hero-heading gsap-hero">
Integrity.<br>
<span class="gradient-text">Collaboration.</span><br>
Service.
</h1>
<p class="hero-sub gsap-hero">
Transform the way you do business with <strong>ultra-efficient</strong> work processes.
From implementing new strategies to tackling complex challenges, we put you on the path to success.
</p>
<div class="hero-buttons gsap-hero">
<a href="#contact" class="btn-primary">
Schedule Consultation <i data-lucide="arrow-right"></i>
</a>
<a href="#services" class="btn-secondary">
Explore Services
</a>
</div>
<div class="hero-stats gsap-hero">
<div class="stat-pill">
<div class="stat-value blue">24/7</div>
<div class="stat-label">Support</div>
</div>
<div class="stat-pill">
<div class="stat-value teal">100M+</div>
<div class="stat-label">Talent Pool</div>
</div>
<div class="stat-pill">
<div class="stat-value cyan">USA</div>
<div class="stat-label">Based HQ</div>
</div>
<div class="stat-pill">
<div class="stat-value indigo">100%</div>
<div class="stat-label">Customized</div>
</div>
</div>
</div>
</section>
<!-- ────────────── MARQUEE ────────────── -->
<section class="marquee-section">
<div class="marquee-fade-l"></div>
<div class="marquee-fade-r"></div>
<div class="marquee-track">
<div class="marquee-items">
<span class="marquee-text light">Infinite CS</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">Operational Excellence</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Strategy</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">24/7 Support</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Scalability</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">Cost Efficiency</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Global Reach</span>
<span class="marquee-dot">•</span>
<!-- Repeat -->
<span class="marquee-text light">Infinite CS</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">Operational Excellence</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Strategy</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">24/7 Support</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Scalability</span>
<span class="marquee-dot">•</span>
<span class="marquee-text gradient">Cost Efficiency</span>
<span class="marquee-dot">•</span>
<span class="marquee-text light">Global Reach</span>
<span class="marquee-dot">•</span>
</div>
</div>
</section>
<!-- ────────────── ABOUT ────────────── -->
<section id="about" class="section about-section">
<div class="container grid-2col">
<div class="about-visuals">
<div class="glass-panel about-card-main">
<div class="icon-row">
<div class="icon-box blue"><i data-lucide="globe"></i></div>
<div>
<h3>Global Operations</h3>
<p class="icon-sub">Texas HQ • Philippines Ops</p>
</div>
</div>
<p>Infinite Contact Solutions was established in <strong>Carrollton, Texas USA</strong>, with main
operations in the Philippines — leveraging over 100 million employable people to provide
world-class service.</p>
</div>
<div class="about-card-bg"></div>
<div class="glass-panel about-card-secondary">
<h4>Decades of Experience</h4>
<p>Our management team brings decades of field experience, ensuring the best customer experience for
your consumers while maintaining cost efficiency.</p>
</div>
</div>
<div class="about-text">
<span class="section-tag">Who We Are</span>
<h2 class="section-heading">Creative Solutions for<br><span class="gradient-text">Modern
Enterprises</span></h2>
<p class="section-sub">We recognize that every client and customer is unique. We don't just offer
services; we offer partnerships that strategically align with your purpose.</p>
<ul class="check-list">
<li>
<div class="check-icon"><i data-lucide="check"></i></div> Tailored plans to fit your specific
needs
</li>
<li>
<div class="check-icon"><i data-lucide="check"></i></div> Ultra-efficient work processes
</li>
<li>
<div class="check-icon"><i data-lucide="check"></i></div> Cost-efficient delivery without
compromising quality
</li>
</ul>
</div>
</div>
</section>
<!-- ────────────── IMPACT ────────────── -->
<section id="impact" class="section impact-section">
<div class="container">
<div class="section-header centered">
<div class="pill-badge"><span class="badge-dot"></span> Our Impact</div>
<h2 class="section-heading">Results You Can Measure</h2>
<p class="section-sub">We deliver tangible improvements in efficiency, cost savings, and customer
satisfaction.</p>
</div>
<div class="impact-grid">
<!-- Card 1 -->
<div class="glass-card impact-card">
<div class="impact-top">
<div class="icon-box green"><i data-lucide="trending-up"></i></div>
<span class="impact-number">+45%</span>
</div>
<h4>Cost Efficiency</h4>
<p>Average savings compared to domestic in-house teams.</p>
<div class="mini-chart">
<div class="bar" style="--h:30%"></div>
<div class="bar" style="--h:45%"></div>
<div class="bar" style="--h:60%"></div>
<div class="bar" style="--h:50%"></div>
<div class="bar" style="--h:80%"></div>
<div class="bar" style="--h:75%"></div>
</div>
</div>
<!-- Card 2 -->
<div class="glass-card impact-card">
<div class="impact-top">
<div class="icon-box cyan"><i data-lucide="award"></i></div>
<span class="impact-number">4.8/5</span>
</div>
<h4>Customer Satisfaction</h4>
<p>Consistent high-quality interactions across all channels.</p>
<div class="ring-chart">
<svg viewBox="0 0 96 96">
<circle cx="48" cy="48" r="30" class="ring-bg" />
<circle cx="48" cy="48" r="30" class="ring-fill" data-pct="96" />
</svg>
<span class="ring-label">96%</span>
</div>
</div>
<!-- Card 3 -->
<div class="glass-card impact-card">
<div class="impact-top">
<div class="icon-box blue"><i data-lucide="clock"></i></div>
<span class="impact-number">-60%</span>
</div>
<h4>Response Time</h4>
<p>Drastic reduction in average hold and resolution times.</p>
<div class="before-after">
<div>
<div class="ba-label"><span>Before</span><span>5m 30s</span></div>
<div class="ba-bar">
<div class="ba-fill full"></div>
</div>
</div>
<div>
<div class="ba-label"><span>After ICS</span><span>1m 45s</span></div>
<div class="ba-bar">
<div class="ba-fill short"></div>
</div>
</div>
</div>
</div>
<!-- Full-width card -->
<div class="glass-card-dark impact-card-wide">
<div class="impact-wide-head"><i data-lucide="rocket"></i>
<h4>Rapid Scaling</h4>
</div>
<p>Ramp up teams of 50+ agents in under 3 weeks.</p>
<div class="impact-big-num">3 Weeks</div>
</div>
</div>
</div>
</section>
<!-- ────────────── SERVICES ────────────── -->
<section id="services" class="section services-section">
<div class="container">
<div class="section-header centered">
<span class="section-tag">Our Capabilities</span>
<h2 class="section-heading">Scale Your Business With<br><span class="gradient-text">Confidence</span>
</h2>
<p class="section-sub">We help you run your business 24x7. We continue the work even after your
employees go home.</p>
</div>
<div class="services-grid">
<div class="glass-card service-card">
<div class="service-blob blue"></div>
<div class="service-icon blue"><i data-lucide="clock"></i></div>
<h3>24x7 Operations</h3>
<p>Extend your business hours without burning out your core team. Our operations run round-the-clock
to ensure you never miss an opportunity.</p>
</div>
<div class="glass-card service-card">
<div class="service-blob cyan"></div>
<div class="service-icon cyan"><i data-lucide="bar-chart-2"></i></div>
<h3>Staffing Flexibility</h3>
<p>Scale up and down comfortably when your company has cyclical demands. We provide the agility you
need to adapt to market changes instantly.</p>
</div>
<div class="glass-card service-card">
<div class="service-blob teal"></div>
<div class="service-icon teal"><i data-lucide="target"></i></div>
<h3>Strategy & Plans</h3>
<p>Whether it's a small strategy or comprehensive effort, we prepare tailored plans aligned with
your unique business objectives.</p>
</div>
</div>
</div>
</section>
<!-- ────────────── STRATEGY ────────────── -->
<section id="strategy" class="section strategy-section">
<div class="strategy-glow glow-1"></div>
<div class="strategy-glow glow-2"></div>
<div class="container">
<div class="strategy-header">
<div>
<span class="section-tag light">Our Approach</span>
<h2 class="section-heading white">Aligned With Your<br><span
class="gradient-text-light">Purpose</span></h2>
</div>
<p class="strategy-desc">We don't just work for you; we work <em>with</em> you. Our collaborative effort
ensures your objectives are met with precision and integrity.</p>
</div>
<div class="strategy-grid">
<div class="strategy-card">
<span class="strategy-num">01</span>
<h4>Discover</h4>
<p>Deep-dive into your business model, culture, and goals to build a complete picture before we
write a single line of process.</p>
</div>
<div class="strategy-card">
<span class="strategy-num">02</span>
<h4>Design</h4>
<p>We architect a bespoke solution — from staffing matrices to technology stack — approved by your
leadership before launch.</p>
</div>
<div class="strategy-card">
<span class="strategy-num">03</span>
<h4>Deploy</h4>
<p>Our rapid ramp-up engine delivers trained, production-ready teams in under three weeks.</p>
</div>
<div class="strategy-card">
<span class="strategy-num">04</span>
<h4>Optimize</h4>
<p>Continuous improvement loops powered by analytics dashboards that surface bottlenecks and
next-best-actions.</p>
</div>
</div>
</div>
</section>
<!-- ────────────── GLOBAL OPS ────────────── -->
<section id="global" class="section global-section">
<div class="container">
<div class="global-header">
<div>
<div class="live-indicator"><span class="live-dot"></span> Live Operations</div>
<h2 class="section-heading">Global Command Center</h2>
<p class="section-sub">Headquartered in Texas with strategic operational hubs in the Philippines. We
bridge time zones to provide true 24/7 coverage.</p>
</div>
<div class="global-counters">
<div class="counter-item"><span class="counter" data-target="100">0</span>
<div>Talent Pool (M)</div>
</div>
<div class="counter-item"><span class="counter" data-target="15">0</span>
<div>Years Active</div>
</div>
<div class="counter-item"><span class="counter" data-target="35">0</span>
<div>Cost Reduction %</div>
</div>
</div>
</div>
<div class="global-grid">
<div class="glass-card-dark global-card">
<i data-lucide="map-pin"></i>
<h4>Carrollton, Texas</h4>
<p>Strategic Management & Client Relations Hub.</p>
<div class="status-dot"><span></span> Management Active</div>
</div>
<div class="glass-card-dark global-card">
<i data-lucide="globe"></i>
<h4>Manila, Philippines</h4>
<p>Primary Operations Center & Talent Acquisition.</p>
<div class="status-dot"><span></span> Operations Active (24/7)</div>
</div>
<div class="glass-card-dark global-card">
<i data-lucide="server"></i>
<h4>Cloud Infrastructure</h4>
<p>Secure, redundant systems ensuring 99.99% uptime.</p>
<div class="status-dot"><span></span> Systems Nominal</div>
</div>
</div>
</div>
</section>
<!-- ────────────── TESTIMONIALS ────────────── -->
<section id="testimonials" class="section testimonials-section">
<div class="container">
<div class="section-header centered">
<span class="section-tag">What Clients Say</span>
<h2 class="section-heading">Trusted By Teams<br><span class="gradient-text">Like Yours</span></h2>
<p class="section-sub">Operations leaders, customer-experience VPs, and founders — the people who actually live with our work.</p>
</div>
<div class="testimonials-grid">
<figure class="glass-card testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">
<i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i>
</div>
<blockquote>Our after-hours response times collapsed from 5+ minutes to under 2. The handoff to ICS was the smoothest BPO transition we've run in eight years.</blockquote>
<figcaption>
<div class="testimonial-avatar"><span>SR</span></div>
<div>
<strong>Sarah Reinhardt</strong>
<span>VP Customer Experience · Sample Co.</span>
</div>
</figcaption>
</figure>
<figure class="glass-card testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">
<i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i>
</div>
<blockquote>We scaled from 12 agents to 64 in under a month. The Manila team felt embedded in our culture by week three — that's almost unheard of.</blockquote>
<figcaption>
<div class="testimonial-avatar"><span>DM</span></div>
<div>
<strong>Daniel Marquez</strong>
<span>Director of Operations · Demo Corp.</span>
</div>
</figcaption>
</figure>
<figure class="glass-card testimonial-card">
<div class="testimonial-stars" aria-label="5 out of 5 stars">
<i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i><i data-lucide="star"></i>
</div>
<blockquote>The dashboards alone justified the contract. We catch SLA drift hours earlier than we did with our last vendor, and the cost line dropped 38%.</blockquote>
<figcaption>
<div class="testimonial-avatar"><span>AJ</span></div>
<div>
<strong>Aliyah Johnson</strong>
<span>Head of Support · Example Inc.</span>
</div>
</figcaption>
</figure>
</div>
<p class="testimonials-disclaimer">
<i data-lucide="info"></i>
These testimonials are placeholders for the portfolio demo. In a live build they'd be replaced with real, attributed quotes.
</p>
</div>
</section>
<!-- ────────────── FAQ ────────────── -->
<section id="faq" class="section faq-section">
<div class="container faq-container">
<div class="section-header centered">
<span class="section-tag">Questions</span>
<h2 class="section-heading">Answers Before<br><span class="gradient-text">You Even Ask</span></h2>
</div>
<div class="faq-list">
<details class="faq-item">
<summary>
<span>How fast can you actually ramp up a new team?</span>
<i data-lucide="plus" class="faq-icon"></i>
</summary>
<p>50-agent teams reach production-ready in 18–21 days. That includes recruiting from our Manila talent pool, three weeks of role-specific training, and a 5-day shadowing handoff with your internal leads.</p>
</details>
<details class="faq-item">
<summary>
<span>How do you handle data security and compliance?</span>
<i data-lucide="plus" class="faq-icon"></i>
</summary>
<p>SOC 2 Type II controls across all hubs, ISO 27001 alignment, and per-client data isolation. We sign DPAs and BAAs and stand up dedicated VLANs for regulated workloads.</p>
</details>
<details class="faq-item">
<summary>
<span>What does pricing look like?</span>
<i data-lucide="plus" class="faq-icon"></i>
</summary>
<p>Per-agent FTE pricing with volume bands. Typical clients see 35–45% reduction vs. domestic in-house headcount, fully loaded. We don't do per-minute or per-ticket pricing — that's how vendors over-bill.</p>
</details>
<details class="faq-item">
<summary>
<span>Do you handle non-English support?</span>
<i data-lucide="plus" class="faq-icon"></i>
</summary>
<p>English-first by default. Spanish and Tagalog at scale. Other languages on a case-by-case basis — we'll be honest with you up front about agent availability and ramp time.</p>
</details>
<details class="faq-item">
<summary>
<span>What happens if we want to wind down?</span>
<i data-lucide="plus" class="faq-icon"></i>
</summary>
<p>30-day notice, no clawback, full data return. We help you cut over to in-house or another vendor — your operation, your timeline. The relationship is built to be cancellable; that's how we keep ourselves honest.</p>
</details>
</div>
</div>
</section>
<!-- ────────────── CONTACT ────────────── -->
<section id="contact" class="section contact-section">
<div class="container grid-2col contact-grid">
<div class="contact-info">
<span class="section-tag">Let's Talk</span>
<h2 class="section-heading">Start Your<br><span class="gradient-text">Transformation</span></h2>
<p class="section-sub">Ready to elevate your operations? Get in touch with our team for a free
consultation.</p>
<div class="contact-details">
<div class="contact-item">
<div class="icon-box cyan"><i data-lucide="mail"></i></div>
<div><strong>Email</strong><span>hello@example.com</span></div>
</div>
<div class="contact-item">
<div class="icon-box blue"><i data-lucide="phone"></i></div>
<div><strong>Phone</strong><span>+1 (555) 010-0000</span></div>
</div>
<div class="contact-item">
<div class="icon-box teal"><i data-lucide="map-pin"></i></div>
<div><strong>Headquarters</strong><span>Carrollton, Texas, USA</span></div>
</div>
</div>
</div>
<form class="contact-form glass-card" id="contactForm" method="POST">
<div class="form-demo-banner">
<i data-lucide="info"></i>
<span>Portfolio demo — the form doesn't submit anywhere. For a real build, wire to Formspree, Resend, or your own endpoint.</span>
</div>
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" required placeholder="John">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" required placeholder="Smith">
</div>
</div>
<div class="form-group">
<label for="email">Business Email</label>
<input type="email" id="email" name="email" required placeholder="john@company.com">
</div>
<div class="form-group">
<label for="company">Company</label>
<input type="text" id="company" name="company" placeholder="Acme Corp">
</div>
<div class="form-group">
<label for="message">How can we help?</label>
<textarea id="message" name="message" rows="4"
placeholder="Tell us about your project..."></textarea>
</div>
<button type="submit" class="btn-primary full-width">
Send Message <i data-lucide="send"></i>
</button>
</form>
</div>
</section>
<!-- ────────────── PRE-FOOTER CTA ────────────── -->
<section class="cta-strip">
<div class="container cta-strip-inner glass-card-dark">
<div>
<h3>Ready to transform your operations?</h3>
<p>A 30-minute call. No deck. We talk about your bottleneck and tell you whether we can fix it. If we can't, we'll point you to someone who can.</p>
</div>
<a href="#contact" class="btn-primary cta-strip-btn">
Book a discovery call <i data-lucide="arrow-right"></i>
</a>
</div>
</section>
<!-- Demo-form toast (controlled inline on the form submit handler) -->
<div id="form-demo-toast" class="form-demo-toast" role="status" aria-live="polite">
<i data-lucide="check-circle"></i>
<div>
<strong>Thanks!</strong> This is a portfolio demo — nothing was actually sent.
</div>
</div>
<!-- ────────────── FOOTER ────────────── -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-brand">
<div class="nav-logo">
<div class="nav-logo-icon"><span>I</span></div>
<span class="nav-logo-text">Infinite<em>CS</em></span>
</div>
<p>Enterprise-grade outsourcing solutions that transform your operational efficiency.</p>
</div>
<div class="footer-links">
<div>
<h5>Company</h5>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#strategy">Strategy</a>
<a href="#contact">Contact</a>
</div>
<div>
<h5>Solutions</h5>
<a href="#services">24x7 Operations</a>
<a href="#services">Staffing Flexibility</a>
<a href="#services">Strategy & Plans</a>
</div>
<div>
<h5>Contact</h5>
<a href="mailto:hello@example.com">Email Us</a>
<a href="tel:+15550100000">+1 (555) 010-0000</a>
<a href="#global">Our Locations</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Infinite Contact Solutions LLC. All rights reserved.</p>
</div>
</footer>
<script type="module" src="/src/main.js"></script>
</body>
</html>