website/contact.html at main · IcaliaLabs/website · GitHub

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
---
title: "Contact — Icalia Labs"
description: "Get in touch with Icalia Labs. Book a call to discuss your staff augmentation needs or email us at sales@icalialabs.com."
twitterDescription: "Get in touch with Icalia Labs. Book a call to discuss your staff augmentation needs."
canonicalPath: "/contact.html"
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "head.html" %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What services does Icalia Labs offer?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Icalia Labs provides nearshore staff augmentation and software development services. We specialize in fintech, healthtech, eCommerce & retail, and logistics & supply chain solutions. Our senior engineers work within your team to deliver high-quality software."
        }
      },
      {
        "@type": "Question",
        "name": "How does nearshore staffing augmentation work?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We match you with senior product-minded engineers who work in your timezone. They integrate directly into your team, participate in standups and planning, and contribute as if they were in-house. We handle all HR, payroll, and management overhead."
        }
      },
      {
        "@type": "Question",
        "name": "What industries do you specialize in?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We specialize in four key industries: Fintech (compliance, transaction flows, ledgers), Healthtech (HIPAA, patient data, EHR integration), eCommerce & Retail (peak traffic, conversion, integrations), and Logistics & Supply Chain (real-time data, route optimization, uptime-critical systems)."
        }
      },
      {
        "@type": "Question",
        "name": "How can I get started with Icalia Labs?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Book a call with our team to discuss your staffing needs. We'll assess your requirements, match you with the right engineers, and get them integrated into your team. You can book a call or email us at sales@icalialabs.com."
        }
      },
      {
        "@type": "Question",
        "name": "What makes Icalia Labs different from other staff augmentation companies?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "We focus on product-minded engineers who stay. We've been trusted by Fortune 500 companies and startups since 2011. Our engineers are senior, committed to long-term partnerships, and integrated into your team culture."
        }
      }
    ]
  }
  </script>
  <style>
    input:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(238, 58, 67, 0.08); }
    .btn-loading { opacity: 0.7; cursor: not-allowed !important; }
    .btn-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
    .btn-success { background-color: #E8453C !important; cursor: default; }
    .btn-success:hover { background-color: #C53B33 !important; }
    .success-message { animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
  </style>
</head>
<body class="font-body text-icalia-dark antialiased bg-icalia-warm">

  <!-- Navigation -->
{% include "nav.html" %}

  <!-- Hero -->
  <section class="pt-36 pb-8 md:pt-48 md:pb-12 px-6 lg:px-10">
    <div class="max-w-7xl mx-auto reveal">
      <p class="text-sm font-semibold text-icalia-red tracking-wide uppercase mb-4">Contact</p>
      <h1 class="font-display text-5xl md:text-7xl leading-[0.95] tracking-tight max-w-3xl">
        Let's talk about<br>
        <span class="italic text-icalia-red">your team.</span>
      </h1>
      <p class="mt-6 text-lg text-icalia-navy/50 max-w-lg">
        Whether you need one senior developer or an entire squad, we're here to help you scale.
      </p>
    </div>
  </section>

  <!-- Contact Content -->
  <section id="book" class="py-16 md:py-24 px-6 lg:px-10">
    <div class="max-w-7xl mx-auto">
      <div class="grid md:grid-cols-12 gap-16">

        <!-- Left: Book a call -->
        <div class="md:col-span-5 reveal">
          <h2 class="font-display text-3xl italic mb-6">Book a discovery call</h2>
          <p class="text-icalia-navy/50 leading-relaxed mb-8">
            The fastest way to get started. We'll discuss your tech stack, team needs, and timeline. No commitment, no pitch deck — just a conversation.
          </p>
          <div class="space-y-5 mb-10">
            <div class="flex items-start gap-4">
              <span class="w-6 h-6 bg-icalia-red/10 rounded-full flex items-center justify-center shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-icalia-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              </span>
              <span class="text-icalia-navy/60 text-sm">30-minute call with a solutions lead</span>
            </div>
            <div class="flex items-start gap-4">
              <span class="w-6 h-6 bg-icalia-red/10 rounded-full flex items-center justify-center shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-icalia-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              </span>
              <span class="text-icalia-navy/60 text-sm">Understand your needs and team dynamics</span>
            </div>
            <div class="flex items-start gap-4">
              <span class="w-6 h-6 bg-icalia-red/10 rounded-full flex items-center justify-center shrink-0 mt-0.5">
                <svg class="w-3.5 h-3.5 text-icalia-red" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              </span>
              <span class="text-icalia-navy/60 text-sm">Get matched with candidate profiles within days</span>
            </div>
          </div>
          <a href="https://calendar.app.google/ejgn1fDcKT9wabuZ7" class="inline-block bg-icalia-red text-white px-8 py-4 rounded-full text-sm font-semibold hover:bg-icalia-red-dark transition-all hover:shadow-lg hover:shadow-icalia-red/20">
            Schedule a Call
          </a>

          <!-- Direct contact -->
          <div class="mt-14 pt-10 border-t border-icalia-sand/50">
            <h3 class="text-sm font-semibold text-icalia-navy/30 uppercase tracking-widest mb-5">Or reach us directly</h3>
            <div class="space-y-3">
              <a href="mailto:sales@icalialabs.com" class="block text-icalia-red hover:text-icalia-red-dark transition-colors font-medium">sales@icalialabs.com</a>
              <div class="flex gap-6">
                <a href="tel:+15124814113" class="text-sm text-icalia-navy/40 hover:text-icalia-dark transition-colors">US: +1 512 481 4113</a>
                <a href="tel:+528120898857" class="text-sm text-icalia-navy/40 hover:text-icalia-dark transition-colors">MX: +52 81 2089 8857</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Form -->
        <div class="md:col-span-7 reveal reveal-delay-1">
          <div class="bg-icalia-warm-2 border border-icalia-sand/50 rounded-2xl p-8 md:p-12">
            <h2 class="font-display text-2xl italic mb-8">Send us a message</h2>
            <form id="contact-form" class="space-y-6" action="https://formspree.io/f/xnjlbelp" method="POST">
              <div class="grid md:grid-cols-2 gap-6">
                <div>
                  <label for="name" class="block text-xs font-semibold text-icalia-navy/40 uppercase tracking-wider mb-2">Name</label>
                  <input type="text" id="name" name="name" required class="w-full px-4 py-3.5 rounded-xl border border-icalia-sand bg-icalia-warm text-icalia-dark focus:outline-none focus:border-icalia-red transition-colors text-sm" placeholder="Your name">
                </div>
                <div>
                  <label for="email" class="block text-xs font-semibold text-icalia-navy/40 uppercase tracking-wider mb-2">Email</label>
                  <input type="email" id="email" name="email" required class="w-full px-4 py-3.5 rounded-xl border border-icalia-sand bg-icalia-warm text-icalia-dark focus:outline-none focus:border-icalia-red transition-colors text-sm" placeholder="you@company.com">
                </div>
              </div>
              <div>
                <label for="company" class="block text-xs font-semibold text-icalia-navy/40 uppercase tracking-wider mb-2">Company</label>
                <input type="text" id="company" name="company" class="w-full px-4 py-3.5 rounded-xl border border-icalia-sand bg-icalia-warm text-icalia-dark focus:outline-none focus:border-icalia-red transition-colors text-sm" placeholder="Your company">
              </div>
              <div>
                <label for="message" class="block text-xs font-semibold text-icalia-navy/40 uppercase tracking-wider mb-2">How can we help?</label>
                <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3.5 rounded-xl border border-icalia-sand bg-icalia-warm text-icalia-dark focus:outline-none focus:border-icalia-red transition-colors resize-none text-sm" placeholder="Tell us about your project and what you are exploring."></textarea>
              </div>
              <button id="contact-submit-btn" type="submit" class="bg-icalia-dark text-icalia-warm px-8 py-3.5 rounded-full text-sm font-semibold hover:bg-icalia-navy transition-colors" data-original-text="Send Message">
                Send Message
              </button>
            </form>
          </div>
        </div>

      </div>
    </div>
  </section>

  {% include "footer.html" %}

  <script>
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      document.getElementById('mobile-menu').classList.toggle('hidden');
    });
    const miToggle = document.getElementById('mobile-industries-toggle');
    if (miToggle) {
      miToggle.addEventListener('click', function() {
        document.getElementById('mobile-industries').classList.toggle('hidden');
        document.getElementById('mobile-industries-chevron').classList.toggle('rotate-180');
      });
    }
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // Contact form submission handler
    const contactForm = document.getElementById('contact-form');
    const submitBtn = document.getElementById('contact-submit-btn');

    if (contactForm && submitBtn) {
      contactForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        // Get form data
        const formData = new FormData(contactForm);
        const submitBtnOriginalText = submitBtn.getAttribute('data-original-text');

        // Update button to loading state
        submitBtn.textContent = 'Sending...';
        submitBtn.classList.add('btn-loading');
        submitBtn.disabled = true;

        // Disable form inputs during submission
        const inputs = contactForm.querySelectorAll('input, textarea');
        inputs.forEach(input => input.disabled = true);

        try {
          // Submit to Formspree
          const response = await fetch(contactForm.action, {
            method: 'POST',
            body: formData,
            headers: { 'Accept': 'application/json' }
          });

          if (response.ok) {
            // Success state
            submitBtn.classList.remove('btn-loading');
            submitBtn.classList.add('btn-success');
            submitBtn.textContent = 'Message Sent ✓';

            // Reset form after 3 seconds
            setTimeout(() => {
              contactForm.reset();
              submitBtn.textContent = submitBtnOriginalText;
              submitBtn.classList.remove('btn-success');
              submitBtn.disabled = false;
              inputs.forEach(input => input.disabled = false);
            }, 3000);
          } else {
            // Error state
            throw new Error('Form submission failed');
          }
        } catch (error) {
          // Error handling
          submitBtn.classList.remove('btn-loading');
          submitBtn.textContent = 'Error - Try Again';
          submitBtn.style.backgroundColor = '#C53B33';
          submitBtn.disabled = false;
          inputs.forEach(input => input.disabled = false);

          // Reset error state after 4 seconds
          setTimeout(() => {
            submitBtn.textContent = submitBtnOriginalText;
            submitBtn.style.backgroundColor = '';
            submitBtn.classList.remove('btn-success');
          }, 4000);
        }
      });
    }
  </script>
</body>
</html>