Hugging Face's logo

Spaces:
vlcsolutions
/
toolmaster-pro-erp-integrator
Running

App Files Community
vlcsolutions commited on
Commit
729a709
·
verified ·
1 Parent(s): 9639d67

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +144 -289
index.html CHANGED
@@ -95,7 +95,7 @@
95
  "@type":"Organization",
96
  "name":"VLC Solutions",
97
  "url":"https://www.vlcsolutions.com",
98
- "logo":{"@type":"ImageObject","url":"https://www.vlcsolutions.com/images/logo/VLC_Logo.png"}
99
  },
100
  "mainEntity":{
101
  "@type":"ItemList",
@@ -126,219 +126,146 @@
126
 
127
  <body class="font-sans antialiased">
128
  <!-- Header / Nav -->
129
- <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
 
130
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
131
  <div class="flex justify-between h-16">
132
- <a href="./index.html" class="flex items-center gap-2">
133
- <img src="./images/logo/VLC_Logo.png" alt="VLC Solutions" class="h-10">
134
  </a>
135
 
136
- <nav class="hidden md:flex items-center gap-2">
137
  <!-- Direct link per your request -->
138
- <a href="./who-we-serve.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Who We Serve</a>
139
 
140
  <!-- Solutions -->
141
  <div class="relative group">
142
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
143
- Solutions <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
144
  </button>
145
  <div class="absolute left-0 top-full mt-2 min-w-[220px] bg-white border border-gray-200 rounded-md shadow-md p-2 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
146
- <a href="./solutions.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Business Central Apps</a>
147
  </div>
148
  </div>
149
 
150
  <!-- Services -->
151
  <div class="relative group">
152
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
153
- Services <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
154
  </button>
155
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
156
- <a href="./services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Services Overview</a>
157
- <a href="./choosing-advisory-services-for-your-business.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Advisory Services</a>
158
- <a href="./software-implementation-partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Implementation Services</a>
159
- <a href="./managed-application-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Managed Application Services</a>
160
- <a href="./managed-it-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Managed IT Services</a>
161
- <a href="./compliance-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Compliance Services</a>
162
- <a href="./cloud-services-for-microsoft-dynamics.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Cloud Services</a>
163
- <a href="./marketing-solutions-strategic-growth.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Marketing Services</a>
164
- <a href="./data-and-ai-transformation.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">AI and Analytics</a>
165
  </div>
166
  </div>
167
 
168
  <!-- Industries -->
169
  <div class="relative group">
170
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
171
- Industries <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
172
  </button>
173
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
174
- <a href="./industries.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Industries Overview</a>
175
- <a href="./microsoft-dynamics-365-business-central-for-distribution.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Distribution</a>
176
- <a href="./ecommerce-development-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">E-Commerce</a>
177
- <a href="./government-contractors.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Government Contractors</a>
178
- <a href="./microsoft-dynamics-365-for-manufacturing.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Manufacturing</a>
179
  </div>
180
  </div>
181
 
182
  <!-- Products -->
183
  <div class="relative group">
184
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
185
- Products <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
186
  </button>
187
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
188
- <a href="./products.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Products Overview</a>
189
- <a href="./microsoft-dynamics-365.html" class="pinline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Dynamics 365</a>
190
- <a href="./microsoft-dynamics-365-business-central.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Business Central</a>
191
- <a href="./power-platform.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Power Platform</a>
192
- <a href="./microsoft-365.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Microsoft 365</a>
193
- <a href="./microsoft-dynamics-365-commerce.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Dynamics Commerce</a>
194
- <a href="./magento-commerce.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Magento Commerce</a>
195
  </div>
196
  </div>
197
 
198
  <!-- Who We Are -->
199
  <div class="relative group">
200
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
201
- Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
202
  </button>
203
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
204
- <a href="./who-we-are.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Overview</a>
205
- <a href="./partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Partner</a>
206
- <a href="./terms-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Terms</a>
207
- <a href="./privacy.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Privacy Policy</a>
208
- <a href="./protecting-our-clients.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Client Protection</a>
209
- <a href="./blog/" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Blog</a>
210
- <a href="./case-studies.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Case Studies</a>
211
- <a
212
- href="./contact-us.html"
213
- class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Contact VLC</a>
214
  </div>
215
  </div>
216
 
217
- <a href="./contact-us.html"
218
- class="bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-sm font-medium">Let’s Connect</a>
219
- </nav>
220
  <button id="mobile-menu-button" class="md:hidden inline-flex items-center p-2 rounded-md text-gray-500 hover:bg-gray-100" aria-label="Open menu">
221
- <i data-feather="menu"></i>
222
  </button>
223
  </div>
224
-
225
- <!-- Mobile Menu -->
226
- <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-white shadow-lg z-50">
227
- <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
228
- <a href="./who-we-serve.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Who We Serve</a>
229
-
230
- <!-- Solutions Dropdown -->
231
- <div class="relative">
232
- <button onclick="toggleMobileDropdown('solutions-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
233
- <span>Solutions</span>
234
- <i data-feather="chevron-down" class="w-4 h-4"></i>
235
- </button>
236
- <div id="solutions-dropdown" class="hidden pl-4">
237
- <a href="./solutions.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Business Central Apps</a>
238
- </div>
239
- </div>
240
-
241
- <!-- Services Dropdown -->
242
- <div class="relative">
243
- <button onclick="toggleMobileDropdown('services-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
244
- <span>Services</span>
245
- <i data-feather="chevron-down" class="w-4 h-4"></i>
246
- </button>
247
- <div id="services-dropdown" class="hidden pl-4">
248
- <a href="./services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Services Overview</a>
249
- <a href="./choosing-advisory-services-for-your-business.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Advisory Services</a>
250
- <a href="./software-implementation-partner.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Implementation Services</a>
251
- <a href="./managed-application-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Managed Application Services</a>
252
- <a href="./managed-it-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Managed IT Services</a>
253
- <a href="./compliance-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Compliance Services</a>
254
- <a href="./cloud-services-for-microsoft-dynamics.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Cloud Services</a>
255
- <a href="./marketing-solutions-strategic-growth.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Marketing Services</a>
256
- <a href="./data-and-ai-transformation.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">AI and Analytics</a>
257
- </div>
258
- </div>
259
-
260
- <!-- Industries Dropdown -->
261
- <div class="relative">
262
- <button onclick="toggleMobileDropdown('industries-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
263
- <span>Industries</span>
264
- <i data-feather="chevron-down" class="w-4 h-4"></i>
265
- </button>
266
- <div id="industries-dropdown" class="hidden pl-4">
267
- <a href="./industries.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Industries Overview</a>
268
- <a href="./microsoft-dynamics-365-business-central-for-distribution.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Distribution</a>
269
- <a href="./ecommerce-development-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">E-Commerce</a>
270
- <a href="./government-contractors.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Government Contractors</a>
271
- <a href="./microsoft-dynamics-365-for-manufacturing.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Manufacturing</a>
272
- </div>
273
- </div>
274
-
275
- <!-- Products Dropdown -->
276
- <div class="relative">
277
- <button onclick="toggleMobileDropdown('products-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
278
- <span>Products</span>
279
- <i data-feather="chevron-down" class="w-4 h-4"></i>
280
- </button>
281
- <div id="products-dropdown" class="hidden pl-4">
282
- <a href="./products.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Products Overview</a>
283
- <a href="./microsoft-dynamics-365.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Dynamics 365</a>
284
- <a href="./microsoft-dynamics-365-business-central.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Business Central</a>
285
- <a href="./power-platform.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Power Platform</a>
286
- <a href="./microsoft-365.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Microsoft 365</a>
287
- <a href="./microsoft-dynamics-365-commerce.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Dynamics Commerce</a>
288
- <a href="./magento-commerce.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Magento Commerce</a>
289
- </div>
290
- </div>
291
-
292
- <!-- Who We Are Dropdown -->
293
- <div class="relative">
294
- <button onclick="toggleMobileDropdown('about-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
295
- <span>Who We Are</span>
296
- <i data-feather="chevron-down" class="w-4 h-4"></i>
297
- </button>
298
- <div id="about-dropdown" class="hidden pl-4">
299
- <a href="./who-we-are.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Overview</a>
300
- <a href="./partner.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Partner</a>
301
- <a href="./terms-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Terms</a>
302
- <a href="./privacy.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Privacy Policy</a>
303
- <a href="./protecting-our-clients.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Client Protection</a>
304
- <a href="./blog/" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Blog</a>
305
- <a href="./case-studies.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Case Studies</a>
306
- <a href="./contact-us.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Contact VLC</a>
307
- </div>
308
- </div>
309
-
310
- <a href="./contact-us.html" class="block w-full text-center bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-base font-medium">Let's Connect</a>
311
- </div>
312
- </div>
313
  </div>
314
  </header>
315
  <!-- ======= HERO / BANNER ======= -->
316
  <!-- ====== HERO SECTION (Compact with Background Banner Image) ====== -->
317
- <section class="relative text-white py-12 md:py-16 overflow-hidden"
318
- style="background-color:#002060;">
319
  <!-- Banner Background Image -->
320
  <div class="absolute inset-0">
321
- <img src="./images/tool_mgmt/tool-management-banner-Nov-2025.png"
322
- alt="Tool Management Banner"
323
- class="w-full h-full object-cover object-right">
 
 
324
  </div>
325
- <!-- Content -->
326
- <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-right">
327
- <h1 class="text-3xl md:text-4xl font-bold mb-2">
328
- Bridge Production and Planning <br>with Real-Time Tool Insights
 
 
 
 
 
 
 
329
  </h1>
330
- <p class="text-lg md:text-xl font-medium mb-6">
 
 
331
  Optimize Every Tool, Maximize Every Minute
332
  </p>
333
- <a href="./contactus.html"
334
- class="inline-block bg-[var(--vlc-leaf)] hover:bg-[var(--vlc-leaf-dark)] text-[var(--vlc-navy)] font-bold py-3 px-8 rounded-full text-xl md:text-2xl mb-8 transition-colors duration-200">
 
 
 
 
335
  Solve Your Downtime Problem
336
  </a>
 
 
337
  </section>
338
 
 
339
  <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
340
- <section class="pattern-navy text-white py-8">
341
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
342
  <div class="flex flex-col md:flex-row items-stretch gap-3 md:gap-4">
343
 
344
  <!-- Download Fact Sheet (opens modal) -->
@@ -354,13 +281,15 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
354
  <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
355
  <span>View VLC TM ON APP SOURCE</span>
356
  </a>
 
357
  <!-- YouTube -->
358
- <button id="youtube-open-modal"
359
- class="cta-btn flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm md:text-base font-semibold border border-white/20 bg-white/10 transition focus:outline-none focus:ring-2 focus:ring-white/50">
360
  <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
361
  <span>Watch it in action</span>
362
- </button>
363
- </div>
 
364
  </div>
365
  </section>
366
 
@@ -377,9 +306,9 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
377
 
378
  <!-- Panel -->
379
  <div class="relative h-full w-full flex items-center justify-center p-4">
380
- <div class="w-[500px] h-[500px] bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden flex flex-col">
381
- <div class="bg-[var(--vlc-navy)] text-white px-5 py-4 flex-shrink-0">
382
- <div class="flex items-center justify-between">
383
  <h4 id="cta-modal-title" class="text-lg font-semibold">
384
  Enter your business email to download
385
  </h4>
@@ -390,8 +319,9 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
390
  </button>
391
  </div>
392
  </div>
393
- <div class="p-8 space-y-6 flex-grow flex flex-col justify-center">
394
- <p id="cta-error" class="hidden text-sm text-red-600">
 
395
  Please use a valid business email (not a personal domain).
396
  </p>
397
 
@@ -476,52 +406,8 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
476
  </style>
477
 
478
  <script>
479
- // --- YouTube Video Modal ---
480
- (function() {
481
- const youtubeModal = document.createElement('div');
482
- youtubeModal.id = 'youtube-modal';
483
- youtubeModal.className = 'fixed inset-0 z-[1000] hidden items-center justify-center bg-black/80 p-4';
484
- youtubeModal.innerHTML = `
485
- <div class="relative w-full max-w-4xl">
486
- <button id="youtube-close" class="absolute -top-10 right-0 text-white hover:text-[var(--vlc-leaf)]">
487
- <i data-feather="x" class="w-8 h-8"></i>
488
- </button>
489
- <div class="aspect-w-16 aspect-h-9 bg-black">
490
- <iframe id="youtube-iframe" class="w-full h-full" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
491
- </div>
492
- </div>
493
- `;
494
- document.body.appendChild(youtubeModal);
495
-
496
- const openBtn = document.getElementById('youtube-open-modal');
497
- const closeBtn = document.getElementById('youtube-close');
498
-
499
- function openModal() {
500
- youtubeModal.classList.remove('hidden');
501
- document.getElementById('youtube-iframe').src = 'https://www.youtube.com/embed/zAiME9H0EVQ?autoplay=1';
502
- document.body.style.overflow = 'hidden';
503
- }
504
-
505
- function closeModal() {
506
- youtubeModal.classList.add('hidden');
507
- document.getElementById('youtube-iframe').src = '';
508
- document.body.style.overflow = '';
509
- }
510
-
511
- openBtn.addEventListener('click', openModal);
512
- closeBtn.addEventListener('click', closeModal);
513
- youtubeModal.addEventListener('click', (e) => {
514
- if (e.target === youtubeModal) closeModal();
515
- });
516
- document.addEventListener('keydown', (e) => {
517
- if (e.key === 'Escape' && !youtubeModal.classList.contains('hidden')) {
518
- closeModal();
519
- }
520
- });
521
- })();
522
-
523
  // --- CTA Modal controls ---
524
- (function () {
525
  const openBtn = document.getElementById('cta-open-modal');
526
  const modal = document.getElementById('cta-modal');
527
  const closeBtn = document.getElementById('cta-close');
@@ -736,7 +622,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
736
  <!-- Image Content -->
737
  <div class="w-full md:w-1/2 lg:w-2/5">
738
  <div class="relative rounded-xl overflow-hidden">
739
- <img src="./images/tool_mgmt/tm-left.png"
740
  alt="Modern manufacturing facility with tool management system"
741
  class="w-full h-auto object-cover">
742
  </div>
@@ -787,7 +673,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
787
  <!-- Image Content -->
788
  <div class="w-full md:w-1/2 lg:w-2/5">
789
  <div class="relative rounded-xl overflow-hidden">
790
- <img src="./images/tool_mgmt/tm-left-1.png"
791
  alt="Modern manufacturing facility with tool management system"
792
  class="w-full h-auto object-cover">
793
  </div>
@@ -847,7 +733,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
847
  <p class="text-gray-700 mb-4">
848
  Whether you're a small-scale manufacturer or a large enterprise, VLC's Tool Management System for Microsoft Dynamics 365 Business Central helps you scale, optimize, and sustain operations. With AI and Analytics in Microsoft Business Central, you gain actionable insights, reduce costs, and stay ahead of the competition.
849
  </p>
850
- <a href="./contactus.html"
851
  class="inline-flex items-center px-6 py-3 bg-[var(--vlc-navy)] hover:bg-[var(--vlc-navy-700)] text-white rounded-lg">
852
  Discover Smart Factory Solutions
853
  </a>
@@ -858,14 +744,14 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
858
 
859
 
860
  <!-- FOOTER -->
861
- <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
862
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
863
  <div class="grid md:grid-cols-3 gap-10 mb-10">
864
  <div>
865
  <h3 class="font-bold mb-3">Contact Us</h3>
866
  <div class="text-gray-300 space-y-3">
867
- <div class="flex items-start"><i data-feather="map-pin" class="w-5 h-5 mr-3"></i>1900 E Golf Rd, Suite 950<br>Schaumburg, IL 60173</div>
868
- <div class="flex items-center"><i data-feather="phone" class="w-5 h-5 mr-3"></i>+1 (224) 955-1818</div>
869
  </div>
870
  </div>
871
 
@@ -873,22 +759,22 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
873
  <h3 class="font-bold mb-3">Quick Links</h3>
874
  <div class="grid grid-cols-2 gap-4 text-gray-300">
875
  <ul class="space-y-2">
876
- <li><a href="./index.html" class="hover:text-white">Home</a></li>
877
- <li><a href="./who-we-are.html" class="hover:text-white">About Us</a></li>
878
- <li><a href="./solutions.html" class="hover:text-white">Solutions</a></li>
879
- <li><a href="./services.html" class="hover:text-white">Services</a></li>
880
- <li><a href="./industries.html" class="hover:text-white">Industries</a></li>
881
- <li><a href="./products.html" class="hover:text-white">Products</a></li>
882
- <li><a href="./who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
883
  </ul>
884
  <ul class="space-y-2">
885
- <li><a href="./contact-us.html" class="hover:text-white">Contact Us</a></li>
886
- <li><a href="./blog/" class="hover:text-white">Blog</a></li>
887
- <li><a href="./case-studies.html" class="hover:text-white">Case Studies</a></li>
888
- <li><a href="./privacy.html" class="hover:text-white">Privacy Policy</a></li>
889
- <li><a href="./terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
890
- <li><a href="./protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
891
-
892
  </ul>
893
  </div>
894
  </div>
@@ -897,13 +783,13 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
897
  <h3 class="font-bold mb-3">VLC Solutions</h3>
898
  <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
899
  <div class="flex gap-4">
900
- <a href="https://www.linkedin.com/company/vlc-solutions-llc" target="_blank" class="text-gray-300 hover:text-white" aria-label="LinkedIn"><i data-feather="linkedin" class="w-5 h-5"></i></a>
901
- <a href="https://www.instagram.com/vlcsolutionsllc/" target="_blank" class="text-gray-300 hover:text-white" aria-label="Instagram"><i data-feather="instagram" class="w-5 h-5"></i></a>
902
- <a href="https://x.com/vlcsolutions" target="_blank" class="text-gray-300 hover:text-white" aria-label="Twitter / X"><i data-feather="twitter" class="w-5 h-5"></i></a>
903
  <a href="https://www.pinterest.com/vlcsolutions/" target="_blank" class="group" aria-label="Pinterest">
904
  <img src="https://cdn.simpleicons.org/pinterest/9ca3af" class="w-5 h-5 transition group-hover:invert" alt="Pinterest">
905
  </a>
906
- <a href="https://www.youtube.com/@vlcsolutions/" target="_blank" class="text-gray-300 hover:text-white" aria-label="YouTube"><i data-feather="youtube" class="w-5 h-5"></i></a>
907
  </div>
908
  </div>
909
  </div>
@@ -914,69 +800,38 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
914
  </div>
915
  </footer>
916
 
917
-
918
- <script>
919
- // Init animations and handle mobile menu functionality after scripts loaded
920
- document.addEventListener('DOMContentLoaded', () => {
921
- // Initialize AOS (Animation On Scroll)
922
- if (window.AOS) {
923
- AOS.init({
924
- duration: 800,
925
- easing: 'ease-in-out',
926
- once: true,
927
- mirror: false,
928
- offset: 120,
929
- disable: window.innerWidth < 768
930
- });
931
- }
932
-
933
- // Replace Feather icons
934
- if (window.feather) {
935
- feather.replace();
936
- }
937
-
938
- // Mobile menu toggle functionality
939
- const mobileMenuButton = document.getElementById('mobile-menu-button');
940
- const mobileMenu = document.getElementById('mobile-menu');
941
-
942
- if (mobileMenuButton && mobileMenu) {
943
- mobileMenuButton.addEventListener('click', () => {
944
- // Toggle the mobile menu visibility
945
- mobileMenu.classList.toggle('hidden');
946
-
947
- // Change icon from menu to close (or vice versa)
948
- const icon = mobileMenuButton.querySelector('i');
949
- if (mobileMenu.classList.contains('hidden')) {
950
- feather.icons.menu.replace(); // Show menu icon
951
- } else {
952
- feather.icons.x.replace(); // Show close (X) icon
953
- }
954
- });
955
- }
956
-
957
- // Function to toggle mobile dropdowns
958
- window.toggleMobileDropdown = function(id) {
959
- const dropdown = document.getElementById(id);
960
- dropdown.classList.toggle('hidden');
961
-
962
- // Update chevron icon
963
- const button = dropdown.previousElementSibling;
964
- const icon = button.querySelector('i');
965
- if (dropdown.classList.contains('hidden')) {
966
- feather.icons['chevron-down'].replace(); // Show down arrow
967
- } else {
968
- feather.icons['chevron-up'].replace(); // Show up arrow
969
  }
970
- };
971
 
972
- });
 
 
 
 
 
 
 
973
 
974
- // Refresh AOS on window resize (guard if AOS is present)
975
- window.addEventListener('resize', function() {
976
- if (window.AOS && AOS.refreshHard) {
977
- AOS.refreshHard();
978
- }
979
- });
980
- </script>
981
  </body>
982
  </html>
 
95
  "@type":"Organization",
96
  "name":"VLC Solutions",
97
  "url":"https://www.vlcsolutions.com",
98
+ "logo":{"@type":"ImageObject","url":"https://huggingface.co/spaces/vlcsolutions/ai-turbobiz-accelerate-with-intelligence/resolve/main/images/VLC_Logo.png"}
99
  },
100
  "mainEntity":{
101
  "@type":"ItemList",
 
126
 
127
  <body class="font-sans antialiased">
128
  <!-- Header / Nav -->
129
+
130
+ <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
131
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
132
  <div class="flex justify-between h-16">
133
+ <a href="https://www.vlcsolutions.com/" class="flex items-center gap-2">
134
+ <img src="https://huggingface.co/spaces/vlcsolutions/ai-turbobiz-accelerate-with-intelligence/resolve/main/images/VLC_Logo.png" alt="VLC Solutions" class="h-10" loading="lazy">
135
  </a>
136
 
137
+ <nav class="hidden md:flex items-center gap-2" aria-label="Primary">
138
  <!-- Direct link per your request -->
139
+ <a href="https://www.vlcsolutions.com/who-we-serve.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Who We Serve</a>
140
 
141
  <!-- Solutions -->
142
  <div class="relative group">
143
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
144
+ Solutions <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
145
  </button>
146
  <div class="absolute left-0 top-full mt-2 min-w-[220px] bg-white border border-gray-200 rounded-md shadow-md p-2 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
147
+ <a href="https://www.vlcsolutions.com/solutions.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Business Central Apps</a>
148
  </div>
149
  </div>
150
 
151
  <!-- Services -->
152
  <div class="relative group">
153
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
154
+ Services <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
155
  </button>
156
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
157
+ <a href="https://www.vlcsolutions.com/services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Services Overview</a>
158
+ <a href="https://www.vlcsolutions.com/choosing-advisory-services-for-your-business.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Advisory Services</a>
159
+ <a href="https://www.vlcsolutions.com/software-implementation-partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Implementation Services</a>
160
+ <a href="https://www.vlcsolutions.com/managed-application-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Managed Application Services</a>
161
+ <a href="https://www.vlcsolutions.com/managed-it-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Managed IT Services</a>
162
+ <a href="https://www.vlcsolutions.com/compliance-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Compliance Services</a>
163
+ <a href="https://www.vlcsolutions.com/cloud-services-for-microsoft-dynamics.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Cloud Services</a>
164
+ <a href="https://www.vlcsolutions.com/marketing-solutions-strategic-growth.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Marketing Services</a>
165
+ <a href="https://www.vlcsolutions.com/data-and-ai-transformation.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">AI and Analytics</a>
166
  </div>
167
  </div>
168
 
169
  <!-- Industries -->
170
  <div class="relative group">
171
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
172
+ Industries <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
173
  </button>
174
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
175
+ <a href="https://www.vlcsolutions.com/industries.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Industries Overview</a>
176
+ <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-business-central-for-distribution.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Distribution</a>
177
+ <a href="https://www.vlcsolutions.com/ecommerce-development-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">E-Commerce</a>
178
+ <a href="https://www.vlcsolutions.com/government-contractors.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Government Contractors</a>
179
+ <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-for-manufacturing.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Manufacturing</a>
180
  </div>
181
  </div>
182
 
183
  <!-- Products -->
184
  <div class="relative group">
185
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
186
+ Products <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
187
  </button>
188
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
189
+ <a href="https://www.vlcsolutions.com/products.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Products Overview</a>
190
+ <a href="https://www.vlcsolutions.com/microsoft-dynamics-365.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Dynamics 365</a>
191
+ <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-business-central.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Business Central</a>
192
+ <a href="https://www.vlcsolutions.com/power-platform.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Power Platform</a>
193
+ <a href="https://www.vlcsolutions.com/microsoft-365.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Microsoft 365</a>
194
+ <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-commerce.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Dynamics Commerce</a>
195
+ <a href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Magento Connector</a>
196
  </div>
197
  </div>
198
 
199
  <!-- Who We Are -->
200
  <div class="relative group">
201
  <button class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium" aria-haspopup="true" aria-expanded="false">
202
+ Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
203
  </button>
204
  <div class="absolute left-0 top-full mt-2 min-w-[240px] bg-white border border-gray-200 rounded-md shadow-md p-2 grid gap-1 opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0">
205
+ <a href="https://www.vlcsolutions.com/who-we-are.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Overview</a>
206
+ <a href="https://www.vlcsolutions.com/partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Partner</a>
207
+ <a href="https://www.vlcsolutions.com/terms-services.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Terms</a>
208
+ <a href="https://www.vlcsolutions.com/privacy.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Privacy Policy</a>
209
+ <a href="https://www.vlcsolutions.com/protecting-our-clients.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Client Protection</a>
210
+ <a href="https://www.vlcsolutions.com/blog/" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Blog</a>
211
+ <a href="https://www.vlcsolutions.com/case-studies.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Case Studies</a>
212
+ <a href="https://www.vlcsolutions.com/contactus.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Contact VLC</a>
 
 
213
  </div>
214
  </div>
215
 
216
+ <a href="https://www.vlcsolutions.com/contactus.html" class="bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-sm font-medium">Let’s Connect</a>
217
+ </nav>
218
+
219
  <button id="mobile-menu-button" class="md:hidden inline-flex items-center p-2 rounded-md text-gray-500 hover:bg-gray-100" aria-label="Open menu">
220
+ <i data-feather="menu" aria-hidden="true"></i>
221
  </button>
222
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
223
  </div>
224
  </header>
225
  <!-- ======= HERO / BANNER ======= -->
226
  <!-- ====== HERO SECTION (Compact with Background Banner Image) ====== -->
227
+ <section class="relative py-12 md:py-16 overflow-hidden" style="background-color:#002060;">
 
228
  <!-- Banner Background Image -->
229
  <div class="absolute inset-0">
230
+ <img
231
+ src="https://huggingface.co/spaces/vlcsolutions/toolmaster-pro-erp-integrator/resolve/main/images/ToolManagement-Banner-Nov2025.png"
232
+ alt="Tool Management Banner"
233
+ class="w-full h-full object-cover object-right"
234
+ >
235
  </div>
236
+
237
+ <!-- Light Overlay for Better Text Contrast (keeps image same) -->
238
+ <div class="absolute inset-0 bg-black/20"></div>
239
+
240
+ <!-- Content -->
241
+ <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
242
+
243
+ <!-- Title -->
244
+ <h1 class="text-3xl md:text-4xl font-bold mb-2 text-white drop-shadow-[0_4px_6px_rgba(0,0,0,0.6)]">
245
+ Bridge Production & Planning with<br>
246
+ Real-Time Tool Insights
247
  </h1>
248
+
249
+ <!-- Subtitle -->
250
+ <p class="text-lg md:text-xl font-medium mb-6 text-white/90 drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)]">
251
  Optimize Every Tool, Maximize Every Minute
252
  </p>
253
+
254
+ <!-- Button -->
255
+ <a href="https://www.vlcsolutions.com/contactus.html"
256
+ class="mx-auto inline-block bg-[var(--vlc-leaf)] hover:bg-[var(--vlc-leaf-dark)]
257
+ text-[var(--vlc-navy)] font-bold py-3 px-8 rounded-full
258
+ text-xl md:text-2xl mb-8 transition-colors duration-200 shadow-lg hover:shadow-xl">
259
  Solve Your Downtime Problem
260
  </a>
261
+
262
+ </div>
263
  </section>
264
 
265
+
266
  <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
267
+ <section class="pattern-navy text-white py-8 bg-[var(--vlc-navy-700)]">
268
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
269
  <div class="flex flex-col md:flex-row items-stretch gap-3 md:gap-4">
270
 
271
  <!-- Download Fact Sheet (opens modal) -->
 
281
  <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
282
  <span>View VLC TM ON APP SOURCE</span>
283
  </a>
284
+
285
  <!-- YouTube -->
286
+ <a href="https://www.youtube.com/watch?v=zAiME9H0EVQ" rel="noopener"
287
+ class="cta-btn flex-1 inline-flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm md:text-base font-semibold border border-white/20 bg-white/10 transition focus:outline-none focus:ring-2 focus:ring-white/50">
288
  <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
289
  <span>Watch it in action</span>
290
+ </a>
291
+
292
+ </div>
293
  </div>
294
  </section>
295
 
 
306
 
307
  <!-- Panel -->
308
  <div class="relative h-full w-full flex items-center justify-center p-4">
309
+ <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
310
+ <div class="bg-[var(--vlc-navy)] text-white px-5 py-4">
311
+ <div class="flex items-center justify-between">
312
  <h4 id="cta-modal-title" class="text-lg font-semibold">
313
  Enter your business email to download
314
  </h4>
 
319
  </button>
320
  </div>
321
  </div>
322
+
323
+ <div class="p-6 space-y-4">
324
+ <p id="cta-error" class="hidden text-sm text-red-600">
325
  Please use a valid business email (not a personal domain).
326
  </p>
327
 
 
406
  </style>
407
 
408
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
  // --- CTA Modal controls ---
410
+ (function () {
411
  const openBtn = document.getElementById('cta-open-modal');
412
  const modal = document.getElementById('cta-modal');
413
  const closeBtn = document.getElementById('cta-close');
 
622
  <!-- Image Content -->
623
  <div class="w-full md:w-1/2 lg:w-2/5">
624
  <div class="relative rounded-xl overflow-hidden">
625
+ <img src="https://huggingface.co/spaces/vlcsolutions/toolmaster-pro-erp-integrator/resolve/main/images/TM-left.png"
626
  alt="Modern manufacturing facility with tool management system"
627
  class="w-full h-auto object-cover">
628
  </div>
 
673
  <!-- Image Content -->
674
  <div class="w-full md:w-1/2 lg:w-2/5">
675
  <div class="relative rounded-xl overflow-hidden">
676
+ <img src="https://huggingface.co/spaces/vlcsolutions/toolmaster-pro-erp-integrator/resolve/main/images/TM-left-1.png"
677
  alt="Modern manufacturing facility with tool management system"
678
  class="w-full h-auto object-cover">
679
  </div>
 
733
  <p class="text-gray-700 mb-4">
734
  Whether you're a small-scale manufacturer or a large enterprise, VLC's Tool Management System for Microsoft Dynamics 365 Business Central helps you scale, optimize, and sustain operations. With AI and Analytics in Microsoft Business Central, you gain actionable insights, reduce costs, and stay ahead of the competition.
735
  </p>
736
+ <a href="https://www.vlcsolutions.com/contactus.html"
737
  class="inline-flex items-center px-6 py-3 bg-[var(--vlc-navy)] hover:bg-[var(--vlc-navy-700)] text-white rounded-lg">
738
  Discover Smart Factory Solutions
739
  </a>
 
744
 
745
 
746
  <!-- FOOTER -->
747
+ <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
748
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
749
  <div class="grid md:grid-cols-3 gap-10 mb-10">
750
  <div>
751
  <h3 class="font-bold mb-3">Contact Us</h3>
752
  <div class="text-gray-300 space-y-3">
753
+ <div class="flex items-start"><i data-feather="map-pin" class="w-5 h-5 mr-3" aria-hidden="true"></i>1900 E Golf Rd, Suite 950<br>Schaumburg, IL 60173</div>
754
+ <div class="flex items-center"><i data-feather="phone" class="w-5 h-5 mr-3" aria-hidden="true"></i>+1 (224) 955-1818</div>
755
  </div>
756
  </div>
757
 
 
759
  <h3 class="font-bold mb-3">Quick Links</h3>
760
  <div class="grid grid-cols-2 gap-4 text-gray-300">
761
  <ul class="space-y-2">
762
+ <li><a href="https://www.vlcsolutions.com/index.html" class="hover:text-white">Home</a></li>
763
+ <li><a href="https://www.vlcsolutions.com/who-we-are.html" class="hover:text-white">About Us</a></li>
764
+ <li><a href="https://www.vlcsolutions.com/solutions.html" class="hover:text-white">Solutions</a></li>
765
+ <li><a href="https://www.vlcsolutions.com/services.html" class="hover:text-white">Services</a></li>
766
+ <li><a href="https://www.vlcsolutions.com/industries.html" class="hover:text-white">Industries</a></li>
767
+ <li><a href="https://www.vlcsolutions.com/products.html" class="hover:text-white">Products</a></li>
768
+ <li><a href="https://www.vlcsolutions.com/who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
769
  </ul>
770
  <ul class="space-y-2">
771
+ <li><a href="https://www.vlcsolutions.com/contactus.html" class="hover:text-white">Contact Us</a></li>
772
+ <li><a href="https://www.vlcsolutions.com/blog/" class="hover:text-white">Blog</a></li>
773
+ <li><a href="https://www.vlcsolutions.com/case-studies.html" class="hover:text-white">Case Studies</a></li>
774
+ <li><a href="https://www.vlcsolutions.com/privacy.html" class="hover:text-white">Privacy Policy</a></li>
775
+ <li><a href="https://www.vlcsolutions.com/terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
776
+ <li><a href="https://www.vlcsolutions.com/protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
777
+ <li><a href="https://www.vlcsolutions.com/faq.html" class="hover:text-white">FAQs</a></li>
778
  </ul>
779
  </div>
780
  </div>
 
783
  <h3 class="font-bold mb-3">VLC Solutions</h3>
784
  <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
785
  <div class="flex gap-4">
786
+ <a href="https://www.linkedin.com/company/vlc-solutions-llc" target="_blank" class="text-gray-300 hover:text-white" aria-label="LinkedIn"><i data-feather="linkedin" class="w-5 h-5" aria-hidden="true"></i></a>
787
+ <a href="https://www.instagram.com/vlcsolutionsllc/" target="_blank" class="text-gray-300 hover:text-white" aria-label="Instagram"><i data-feather="instagram" class="w-5 h-5" aria-hidden="true"></i></a>
788
+ <a href="https://x.com/vlcsolutions" target="_blank" class="text-gray-300 hover:text-white" aria-label="Twitter / X"><i data-feather="twitter" class="w-5 h-5" aria-hidden="true"></i></a>
789
  <a href="https://www.pinterest.com/vlcsolutions/" target="_blank" class="group" aria-label="Pinterest">
790
  <img src="https://cdn.simpleicons.org/pinterest/9ca3af" class="w-5 h-5 transition group-hover:invert" alt="Pinterest">
791
  </a>
792
+ <a href="https://www.youtube.com/@vlcsolutions/" target="_blank" class="text-gray-300 hover:text-white" aria-label="YouTube"><i data-feather="youtube" class="w-5 h-5" aria-hidden="true"></i></a>
793
  </div>
794
  </div>
795
  </div>
 
800
  </div>
801
  </footer>
802
 
803
+ <script>
804
+ // Init animations (after scripts loaded)
805
+ document.addEventListener('DOMContentLoaded', () => {
806
+ if (window.AOS) {
807
+ AOS.init({
808
+ duration: 800,
809
+ easing: 'ease-in-out',
810
+ once: true,
811
+ mirror: false,
812
+ offset: 120,
813
+ disable: window.innerWidth < 768
814
+ });
815
+ }
816
+ if (window.feather) {
817
+ feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
818
  }
 
819
 
820
+ // Mobile menu placeholder
821
+ const mobileBtn = document.getElementById('mobile-menu-button');
822
+ if (mobileBtn) {
823
+ mobileBtn.addEventListener('click', () => {
824
+ console.log('Mobile menu clicked');
825
+ });
826
+ }
827
+ });
828
 
829
+ // Refresh AOS on resize (guard if AOS present)
830
+ window.addEventListener('resize', function() {
831
+ if (window.AOS && AOS.refreshHard) {
832
+ AOS.refreshHard();
833
+ }
834
+ });
835
+ </script>
836
  </body>
837
  </html>