Hugging Face's logo

Spaces:
vlcsolutions
/
vlc-e-commerce-powerbridge
Running

App Files Community
vlcsolutions commited on
Commit
e2adc3b
·
verified ·
1 Parent(s): e663182

Manual changes saved

Browse files
Files changed (1) hide show
  1. index.html +269 -188
index.html CHANGED
@@ -3,8 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <meta name="description" content="VLC Solutions — App-Powered ERP solutions integrating Microsoft Dynamics 365 Business Central with Magento." />
7
- <title>VLC Solutions - Business Central + E‑Commerce Integration</title>
8
  <meta name="description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency."/>
9
  <meta name="keywords" content="Magento Business Central Integration,VLC Magento Connector,Magento Business Central Integration"/>
10
  <link rel="canonical" href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" />
@@ -13,7 +12,7 @@
13
  <meta name="twitter:card" content="summary_large_image">
14
  <meta name="twitter:title" content="Magento Connector with Dynamics 365 Business Central">
15
  <meta name="twitter:description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency.">
16
- <meta name="twitter:image:src" content="https://huggingface.co/spaces/vlcsolutions/ai-turbobiz-accelerate-with-intelligence/resolve/main/images/VLC_Logo.png">
17
 
18
  <!-- Tailwind + libs -->
19
  <script src="https://cdn.tailwindcss.com"></script>
@@ -109,7 +108,7 @@
109
  /* Dropdown: show on hover and keyboard focus */
110
  .nav-group:focus-within .nav-panel, .nav-group:hover .nav-panel{ opacity:1; visibility:visible; transform:translateY(0) }
111
 
112
- <script src="https://analytics.ahrefs.com/analytics.js" data-key="jcrS4NwPF1CB1Z4lNmgDKQ" async></script>
113
 
114
  <!-- Google tag (gtag.js) -->
115
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GH6WBJWXS8"></script>
@@ -130,7 +129,7 @@
130
  "url": "https://vlcsolutions.com",
131
  "logo": {
132
  "@type": "ImageObject",
133
- "url": "https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png"
134
  }
135
  },
136
  "featureList": [
@@ -142,107 +141,203 @@
142
  "Real-Time Reporting and Analytics"
143
  ],
144
  "url": "https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html",
145
- "image": "https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png"
146
  }
147
  </script>
148
-
149
  </style>
150
  </head>
151
 
152
  <body class="font-sans antialiased bg-white">
153
  <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:bg-white focus:text-[var(--vlc-navy)] focus:px-3 focus:py-2 focus:rounded">Skip to content</a>
154
 
155
- <!-- Header / Nav -->
156
  <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
157
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
158
- <div class="flex justify-between h-16 items-center">
159
- <a href="https://www.vlcsolutions.com/" class="flex items-center gap-2" aria-label="VLC Solutions home">
160
- <img src="https://huggingface.co/spaces/vlcsolutions/ai-turbobiz-accelerate-with-intelligence/resolve/main/images/VLC_Logo.png" alt="VLC Solutions" class="h-10 w-auto" loading="eager" decoding="async">
161
  </a>
162
 
163
- <nav class="hidden md:flex items-center gap-2" aria-label="Primary">
164
- <a href="https://www.vlcsolutions.com/who-we-serve.html" class="inline-flex items-center px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]">Who We Serve</a>
165
- <div class="relative nav-group">
166
- <button class="inline-flex items-center px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" aria-haspopup="true" aria-expanded="false">Solutions <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i></button>
167
- <div class="nav-panel 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">
168
- <a href="https://www.vlcsolutions.com/solutions.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]">Business Central Apps</a>
 
 
 
 
 
169
  </div>
170
  </div>
171
- <div class="relative nav-group">
172
- <button class="inline-flex items-center px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" aria-haspopup="true" aria-expanded="false">Services <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i></button>
173
- <div class="nav-panel 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" role="menu">
174
- <a href="https://www.vlcsolutions.com/services.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Services Overview</a>
175
- <a href="https://www.vlcsolutions.com/choosing-advisory-services-for-your-business.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Advisory Services</a>
176
- <a href="https://www.vlcsolutions.com/software-implementation-partner.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Implementation Services</a>
177
- <a href="https://www.vlcsolutions.com/managed-application-services.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Managed Application Services</a>
178
- <a href="https://www.vlcsolutions.com/managed-it-services.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Managed IT Services</a>
179
- <a href="https://www.vlcsolutions.com/compliance-services.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Compliance Services</a>
180
- <a href="https://www.vlcsolutions.com/cloud-services-for-microsoft-dynamics.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Cloud Services</a>
181
- <a href="https://www.vlcsolutions.com/marketing-solutions-strategic-growth.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Marketing Services</a>
182
- <a href="https://www.vlcsolutions.com/data-and-ai-transformation.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">AI and Analytics</a>
 
 
 
 
183
  </div>
184
  </div>
185
- <div class="relative nav-group">
186
- <button class="inline-flex items-center px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" aria-haspopup="true" aria-expanded="false">Industries <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i></button>
187
- <div class="nav-panel 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" role="menu">
188
- <a href="https://www.vlcsolutions.com/industries.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Industries Overview</a>
189
- <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-business-central-for-distribution.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Distribution</a>
190
- <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>
191
- <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>
192
- <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-for-manufacturing.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Manufacturing</a>
 
 
 
 
193
  </div>
194
  </div>
195
- <div class="relative nav-group">
196
- <button class="inline-flex items-center px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" aria-haspopup="true" aria-expanded="false">Products <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i></button>
197
- <div class="nav-panel 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" role="menu">
198
- <a href="https://www.vlcsolutions.com/products.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Products Overview</a>
199
- <a href="https://www.vlcsolutions.com/microsoft-dynamics-365.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Dynamics 365</a>
200
- <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-business-central.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Business Central</a>
201
- <a href="https://www.vlcsolutions.com/power-platform.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Power Platform</a>
202
- <a href="https://www.vlcsolutions.com/microsoft-365.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Microsoft 365</a>
203
- <a href="https://www.vlcsolutions.com/microsoft-dynamics-365-commerce.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Dynamics Commerce</a>
204
- <a href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" class="block px-3 py-2 text-sm font-medium hover:text-[var(--vlc-leaf)]" role="menuitem">Magento Connector</a>
 
 
 
 
205
  </div>
206
  </div>
 
207
  <!-- Who We Are -->
208
  <div class="relative group">
209
  <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">
210
- Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
211
  </button>
212
  <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">
213
- <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>
214
- <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>
215
- <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>
216
- <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>
217
- <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>
218
- <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>
219
- <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>
220
- <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>
 
 
221
  </div>
222
  </div>
223
 
224
- <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>
225
- </nav>
226
-
227
- <button id="mobile-menu-button" class="md:hidden inline-flex items-center p-2 rounded-md text-gray-600 hover:bg-gray-100" aria-label="Open menu" aria-controls="mobile-menu" aria-expanded="false">
228
  <i data-feather="menu"></i>
229
  </button>
230
  </div>
231
- </div>
232
 
233
- <div id="mobile-menu" class="md:hidden hidden border-t border-gray-200">
234
- <nav class="px-4 py-3 space-y-1" aria-label="Mobile">
235
- <a href="https://www.vlcsolutions.com/who-we-serve.html" class="block py-2">Who We Serve</a>
236
- <a href="https://www.vlcsolutions.com/solutions.html" class="block py-2">Solutions</a>
237
- <a href="https://www.vlcsolutions.com/services.html" class="block py-2">Services</a>
238
- <a href="https://www.vlcsolutions.com/industries.html" class="block py-2">Industries</a>
239
- <a href="https://www.vlcsolutions.com/products.html" class="block py-2">Products</a>
240
- <a href="https://www.vlcsolutions.com/who-we-are.html" class="block py-2">Who We Are</a>
241
- <a href="https://www.vlcsolutions.com/contactus.html" class="block py-2 font-semibold text-[var(--vlc-navy)]">Contact</a>
242
- </nav>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  </div>
244
  </header>
245
-
246
  <!-- ===== VLC Brand Theme + Pattern Utilities ===== -->
247
  <style id="vlc-brand-theme">
248
  :root{
@@ -325,8 +420,7 @@
325
  <section class="relative text-white"
326
  style="
327
  height: 346px;
328
- background: url('https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png') no-repeat center center / cover;
329
- ">
330
  <div class="max-w-7xl mx-auto h-full flex items-center px-8">
331
  <div class="max-w-2xl text-left" data-aos="fade-up">
332
  <h1 class="text-4xl md:text-4xl font-bold mb-4 text-white">
@@ -335,7 +429,7 @@
335
  <p class="text-lg md:text-xl text-gray-100 mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="100">
336
  Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
337
  </p>
338
- <a href="https://www.vlcsolutions.com/contactus.html"
339
  class="bg-[#9BE14E] hover:bg-[#8AD03E] text-[#002060] rounded-lg px-6 py-3 text-lg font-semibold inline-flex items-center shadow-lg transition-all duration-300"
340
  data-aos="fade-up" data-aos-delay="200">
341
  Sync Magento with Business Central
@@ -345,35 +439,6 @@
345
  </div>
346
  </section>
347
 
348
- <!-- YouTube Modal -->
349
- <div id="youtube-modal"
350
- class="fixed inset-0 z-[999] hidden"
351
- role="dialog" aria-modal="true" aria-labelledby="youtube-modal-title">
352
- <!-- Backdrop -->
353
- <div class="absolute inset-0 bg-black/60"></div>
354
-
355
- <!-- Panel -->
356
- <div class="relative h-full w-full flex items-center justify-center p-4">
357
- <div class="w-full max-w-4xl bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
358
- <div class="bg-[var(--vlc-navy)] text-white px-5 py-4">
359
- <div class="flex items-center justify-between">
360
- <h4 id="youtube-modal-title" class="text-lg font-semibold">
361
- VLC Magento Connector Demo
362
- </h4>
363
- <button type="button" id="youtube-close"
364
- class="p-1 rounded-md hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
365
- aria-label="Close">
366
- <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
367
- </button>
368
- </div>
369
- </div>
370
-
371
- <div class="p-0 aspect-video">
372
- <iframe id="youtube-iframe" class="w-full h-full" src="https://www.youtube.com/embed/4ojpvb19Bqw?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
373
- </div>
374
- </div>
375
- </div>
376
- </div>
377
  <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
378
  <section class="pattern-navy text-white py-8">
379
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -392,13 +457,15 @@
392
  <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
393
  <span>View VLC Magento Connector on AppSource</span>
394
  </a>
 
395
  <!-- YouTube -->
396
- <button id="youtube-open-modal"
397
- 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">
398
  <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
399
  <span>Watch it in action</span>
400
- </button>
401
- </div>
 
402
  </div>
403
  </section>
404
 
@@ -515,38 +582,8 @@
515
  </style>
516
 
517
  <script>
518
- // --- YouTube Modal controls ---
519
- (function () {
520
- const openBtn = document.getElementById('youtube-open-modal');
521
- const modal = document.getElementById('youtube-modal');
522
- const closeBtn = document.getElementById('youtube-close');
523
- const iframe = document.getElementById('youtube-iframe');
524
-
525
- if (!openBtn || !modal) return;
526
-
527
- function openModal() {
528
- modal.classList.remove('hidden');
529
- document.body.style.overflow = 'hidden';
530
- // Reset iframe src to ensure video loads fresh
531
- iframe.src = 'https://www.youtube.com/embed/4ojpvb19Bqw?enablejsapi=1&autoplay=1';
532
- }
533
- function closeModal() {
534
- modal.classList.add('hidden');
535
- document.body.style.overflow = '';
536
- // Stop video when modal closes
537
- iframe.src = iframe.src.replace('&autoplay=1', '');
538
- }
539
-
540
- openBtn.addEventListener('click', openModal);
541
- closeBtn && closeBtn.addEventListener('click', closeModal);
542
-
543
- // Close on Esc / backdrop
544
- modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
545
- document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); });
546
- })();
547
-
548
  // --- CTA Modal controls ---
549
- (function () {
550
  const openBtn = document.getElementById('cta-open-modal');
551
  const modal = document.getElementById('cta-modal');
552
  const closeBtn = document.getElementById('cta-close');
@@ -619,7 +656,7 @@
619
  </p>
620
  </div>
621
  <div>
622
- <img src="https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/leftside%20image-Magento%20page.png"
623
  alt="E-Commerce Integration" loading="lazy" decoding="async">
624
  </div>
625
  </div>
@@ -752,7 +789,7 @@
752
  <p>Make sure to have the correct product availability, quick order fulfillment, and clear communication with customers by synchronizing order and shipping information.</p>
753
  </div>
754
  </div>
755
- <a href="https://www.vlcsolutions.com/contactus.html" class="btn-accent px-8 py-4 text-lg font-bold rounded-lg inline-block">Integrate Today</a>
756
  <p class="mt-4 prose-lg max-w-3xl mx-auto">
757
  Connect Microsoft Dynamics 365 Business Central with Magento to enhance your e-commerce processes. Discover how our VLC Magento Connector and Business Central integration can help you increase efficiency and streamline your workflows.
758
  </p>
@@ -766,82 +803,126 @@
766
  </script>
767
 
768
 
769
- <!-- FOOTER -->
770
  <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
771
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
772
  <div class="grid md:grid-cols-3 gap-10 mb-10">
773
  <div>
774
  <h3 class="font-bold mb-3">Contact Us</h3>
775
  <div class="text-gray-300 space-y-3">
776
- <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>
777
- <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>
778
  </div>
779
  </div>
 
780
  <div>
781
  <h3 class="font-bold mb-3">Quick Links</h3>
782
  <div class="grid grid-cols-2 gap-4 text-gray-300">
783
  <ul class="space-y-2">
784
- <li><a href="https://www.vlcsolutions.com/index.html" class="hover:text-white">Home</a></li>
785
- <li><a href="https://www.vlcsolutions.com/who-we-are.html" class="hover:text-white">About Us</a></li>
786
- <li><a href="https://www.vlcsolutions.com/solutions.html" class="hover:text-white">Solutions</a></li>
787
- <li><a href="https://www.vlcsolutions.com/services.html" class="hover:text-white">Services</a></li>
788
- <li><a href="https://www.vlcsolutions.com/industries.html" class="hover:text-white">Industries</a></li>
789
- <li><a href="https://www.vlcsolutions.com/products.html" class="hover:text-white">Products</a></li>
790
- <li><a href="https://www.vlcsolutions.com/who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
791
  </ul>
792
  <ul class="space-y-2">
793
- <li><a href="https://www.vlcsolutions.com/contactus.html" class="hover:text-white">Contact Us</a></li>
794
- <li><a href="https://www.vlcsolutions.com/blog/" class="hover:text-white">Blog</a></li>
795
- <li><a href="https://www.vlcsolutions.com/case-studies.html" class="hover:text-white">Case Studies</a></li>
796
- <li><a href="https://www.vlcsolutions.com/privacy.html" class="hover:text-white">Privacy Policy</a></li>
797
- <li><a href="https://www.vlcsolutions.com/terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
798
- <li><a href="https://www.vlcsolutions.com/protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
799
- <li><a href="https://www.vlcsolutions.com/faq.html" class="hover:text-white">FAQs</a></li>
800
  </ul>
801
  </div>
802
  </div>
 
803
  <div>
804
  <h3 class="font-bold mb-3">VLC Solutions</h3>
805
  <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
806
  <div class="flex gap-4">
807
- <a href="https://www.linkedin.com/company/vlc-solutions-llc" target="_blank" rel="noopener" class="text-gray-300 hover:text-white" aria-label="LinkedIn"><i data-feather="linkedin" class="w-5 h-5" aria-hidden="true"></i></a>
808
- <a href="https://www.instagram.com/vlcsolutionsllc/" target="_blank" rel="noopener" class="text-gray-300 hover:text-white" aria-label="Instagram"><i data-feather="instagram" class="w-5 h-5" aria-hidden="true"></i></a>
809
- <a href="https://x.com/vlcsolutions" target="_blank" rel="noopener" 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>
810
- <a href="https://www.pinterest.com/vlcsolutions/" target="_blank" rel="noopener" class="group" aria-label="Pinterest"><img src="https://cdn.simpleicons.org/pinterest/9ca3af" class="w-5 h-5 transition group-hover:invert" alt="Pinterest"></a>
811
- <a href="https://www.youtube.com/@vlcsolutions/" target="_blank" rel="noopener" class="text-gray-300 hover:text-white" aria-label="YouTube"><i data-feather="youtube" class="w-5 h-5" aria-hidden="true"></i></a>
 
 
812
  </div>
813
  </div>
814
  </div>
815
- <div class="border-t border-[var(--vlc-navy-700)] pt-6 text-center text-gray-300">© 2025 VLC Solutions. All rights reserved.</div>
 
 
 
816
  </div>
817
  </footer>
818
 
819
- <script>
820
- // Init animations (respect reduced motion)
821
- document.addEventListener('DOMContentLoaded', () => {
822
- const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
823
- AOS.init({ duration: reduce ? 0 : 800, easing: 'ease-in-out', once: true, mirror: false, offset: 120, disable: () => window.innerWidth < 768 });
 
 
 
 
 
 
 
 
 
 
 
 
 
824
  feather.replace();
825
- });
826
 
827
- // Mobile menu toggle (accessible)
828
- (function(){
829
- const btn = document.getElementById('mobile-menu-button');
830
- const panel = document.getElementById('mobile-menu');
831
- if(!btn || !panel) return;
832
- function setOpen(open){
833
- panel.classList.toggle('hidden', !open);
834
- btn.setAttribute('aria-expanded', String(open));
835
- btn.innerHTML = open ? feather.icons['x'].toSvg() : feather.icons['menu'].toSvg();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
836
  }
837
- let open = false;
838
- btn.addEventListener('click', () => { open = !open; setOpen(open); });
839
- document.addEventListener('keydown', (e) => { if(e.key === 'Escape' && open){ open = false; setOpen(open); } });
840
- })();
841
-
842
- // Refresh AOS on resize (debounced)
843
- (function(){ let t; window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(() => AOS.refreshHard(), 150); }); })();
844
- </script>
845
- <script defer src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 
 
846
  </body>
847
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Magento Connector with Dynamics 365 Business Central</title>
 
7
  <meta name="description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency."/>
8
  <meta name="keywords" content="Magento Business Central Integration,VLC Magento Connector,Magento Business Central Integration"/>
9
  <link rel="canonical" href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" />
 
12
  <meta name="twitter:card" content="summary_large_image">
13
  <meta name="twitter:title" content="Magento Connector with Dynamics 365 Business Central">
14
  <meta name="twitter:description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency.">
15
+ <meta name="twitter:image:src" content="https://www.vlcsolutions.com/images/logo/VLC_Logo.png">
16
 
17
  <!-- Tailwind + libs -->
18
  <script src="https://cdn.tailwindcss.com"></script>
 
108
  /* Dropdown: show on hover and keyboard focus */
109
  .nav-group:focus-within .nav-panel, .nav-group:hover .nav-panel{ opacity:1; visibility:visible; transform:translateY(0) }
110
 
111
+ <script src="https://analytics.ahrefs.com/analytics.js" data-key="jcrS4NwPF1CB1Z4lNmgDKQ" async></script>
112
 
113
  <!-- Google tag (gtag.js) -->
114
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-GH6WBJWXS8"></script>
 
129
  "url": "https://vlcsolutions.com",
130
  "logo": {
131
  "@type": "ImageObject",
132
+ "url": "https://www.vlcsolutions.com/images/magento_connector/magento-page.png"
133
  }
134
  },
135
  "featureList": [
 
141
  "Real-Time Reporting and Analytics"
142
  ],
143
  "url": "https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html",
144
+ "image": "https://www.vlcsolutions.com/images/magento_connector/magento-page.png"
145
  }
146
  </script>
147
+
148
  </style>
149
  </head>
150
 
151
  <body class="font-sans antialiased bg-white">
152
  <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:bg-white focus:text-[var(--vlc-navy)] focus:px-3 focus:py-2 focus:rounded">Skip to content</a>
153
 
154
+ <!-- Header / Nav -->
155
  <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
156
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
+ <div class="flex justify-between h-16">
158
+ <a href="./index.html" class="flex items-center gap-2">
159
+ <img src="./images/logo/VLC_Logo.png" alt="VLC Solutions" class="h-10">
160
  </a>
161
 
162
+ <nav class="hidden md:flex items-center gap-2">
163
+ <!-- Direct link per your request -->
164
+ <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>
165
+
166
+ <!-- Solutions -->
167
+ <div class="relative group">
168
+ <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">
169
+ Solutions <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
170
+ </button>
171
+ <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">
172
+ <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>
173
  </div>
174
  </div>
175
+
176
+ <!-- Services -->
177
+ <div class="relative group">
178
+ <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">
179
+ Services <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
180
+ </button>
181
+ <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">
182
+ <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>
183
+ <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>
184
+ <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>
185
+ <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>
186
+ <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>
187
+ <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>
188
+ <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>
189
+ <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>
190
+ <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>
191
  </div>
192
  </div>
193
+
194
+ <!-- Industries -->
195
+ <div class="relative group">
196
+ <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">
197
+ Industries <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
198
+ </button>
199
+ <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">
200
+ <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>
201
+ <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>
202
+ <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>
203
+ <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>
204
+ <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>
205
  </div>
206
  </div>
207
+
208
+ <!-- Products -->
209
+ <div class="relative group">
210
+ <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">
211
+ Products <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
212
+ </button>
213
+ <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">
214
+ <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>
215
+ <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>
216
+ <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>
217
+ <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>
218
+ <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>
219
+ <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>
220
+ <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>
221
  </div>
222
  </div>
223
+
224
  <!-- Who We Are -->
225
  <div class="relative group">
226
  <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">
227
+ Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
228
  </button>
229
  <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">
230
+ <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>
231
+ <a href="./partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Partner</a>
232
+ <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>
233
+ <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>
234
+ <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>
235
+ <a href="./blog/" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Blog</a>
236
+ <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>
237
+ <a
238
+ href="./contact-us.html"
239
+ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Contact VLC</a>
240
  </div>
241
  </div>
242
 
243
+ <a href="./contact-us.html"
244
+ class="bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-sm font-medium">Let’s Connect</a>
245
+ </nav>
246
+ <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">
247
  <i data-feather="menu"></i>
248
  </button>
249
  </div>
 
250
 
251
+ <!-- Mobile Menu -->
252
+ <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-white shadow-lg z-50">
253
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
254
+ <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>
255
+
256
+ <!-- Solutions Dropdown -->
257
+ <div class="relative">
258
+ <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">
259
+ <span>Solutions</span>
260
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
261
+ </button>
262
+ <div id="solutions-dropdown" class="hidden pl-4">
263
+ <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>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Services Dropdown -->
268
+ <div class="relative">
269
+ <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">
270
+ <span>Services</span>
271
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
272
+ </button>
273
+ <div id="services-dropdown" class="hidden pl-4">
274
+ <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>
275
+ <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>
276
+ <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>
277
+ <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>
278
+ <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>
279
+ <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>
280
+ <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>
281
+ <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>
282
+ <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>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Industries Dropdown -->
287
+ <div class="relative">
288
+ <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">
289
+ <span>Industries</span>
290
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
291
+ </button>
292
+ <div id="industries-dropdown" class="hidden pl-4">
293
+ <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>
294
+ <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>
295
+ <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>
296
+ <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>
297
+ <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>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Products Dropdown -->
302
+ <div class="relative">
303
+ <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">
304
+ <span>Products</span>
305
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
306
+ </button>
307
+ <div id="products-dropdown" class="hidden pl-4">
308
+ <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>
309
+ <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>
310
+ <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>
311
+ <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>
312
+ <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>
313
+ <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>
314
+ <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>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Who We Are Dropdown -->
319
+ <div class="relative">
320
+ <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">
321
+ <span>Who We Are</span>
322
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
323
+ </button>
324
+ <div id="about-dropdown" class="hidden pl-4">
325
+ <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>
326
+ <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>
327
+ <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>
328
+ <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>
329
+ <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>
330
+ <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>
331
+ <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>
332
+ <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>
333
+ </div>
334
+ </div>
335
+
336
+ <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>
337
+ </div>
338
+ </div>
339
  </div>
340
  </header>
 
341
  <!-- ===== VLC Brand Theme + Pattern Utilities ===== -->
342
  <style id="vlc-brand-theme">
343
  :root{
 
420
  <section class="relative text-white"
421
  style="
422
  height: 346px;
423
+ background: url('./images/magento_connector/magento-page.png') no-repeat center center / cover;">
 
424
  <div class="max-w-7xl mx-auto h-full flex items-center px-8">
425
  <div class="max-w-2xl text-left" data-aos="fade-up">
426
  <h1 class="text-4xl md:text-4xl font-bold mb-4 text-white">
 
429
  <p class="text-lg md:text-xl text-gray-100 mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="100">
430
  Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
431
  </p>
432
+ <a href="./contactus.html"
433
  class="bg-[#9BE14E] hover:bg-[#8AD03E] text-[#002060] rounded-lg px-6 py-3 text-lg font-semibold inline-flex items-center shadow-lg transition-all duration-300"
434
  data-aos="fade-up" data-aos-delay="200">
435
  Sync Magento with Business Central
 
439
  </div>
440
  </section>
441
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
442
  <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
443
  <section class="pattern-navy text-white py-8">
444
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 
457
  <i data-feather="shopping-bag" class="w-5 h-5" aria-hidden="true"></i>
458
  <span>View VLC Magento Connector on AppSource</span>
459
  </a>
460
+
461
  <!-- YouTube -->
462
+ <a href="https://www.youtube.com/watch?v=4ojpvb19Bqw" rel="noopener"
463
+ 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">
464
  <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
465
  <span>Watch it in action</span>
466
+ </a>
467
+
468
+ </div>
469
  </div>
470
  </section>
471
 
 
582
  </style>
583
 
584
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
585
  // --- CTA Modal controls ---
586
+ (function () {
587
  const openBtn = document.getElementById('cta-open-modal');
588
  const modal = document.getElementById('cta-modal');
589
  const closeBtn = document.getElementById('cta-close');
 
656
  </p>
657
  </div>
658
  <div>
659
+ <img src="./images/magento_connector/leftside-image-magento-page.png"
660
  alt="E-Commerce Integration" loading="lazy" decoding="async">
661
  </div>
662
  </div>
 
789
  <p>Make sure to have the correct product availability, quick order fulfillment, and clear communication with customers by synchronizing order and shipping information.</p>
790
  </div>
791
  </div>
792
+ <a href="./contactus.html" class="btn-accent px-8 py-4 text-lg font-bold rounded-lg inline-block">Integrate Today</a>
793
  <p class="mt-4 prose-lg max-w-3xl mx-auto">
794
  Connect Microsoft Dynamics 365 Business Central with Magento to enhance your e-commerce processes. Discover how our VLC Magento Connector and Business Central integration can help you increase efficiency and streamline your workflows.
795
  </p>
 
803
  </script>
804
 
805
 
806
+ <!-- FOOTER -->
807
  <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
808
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
809
  <div class="grid md:grid-cols-3 gap-10 mb-10">
810
  <div>
811
  <h3 class="font-bold mb-3">Contact Us</h3>
812
  <div class="text-gray-300 space-y-3">
813
+ <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>
814
+ <div class="flex items-center"><i data-feather="phone" class="w-5 h-5 mr-3"></i>+1 (224) 955-1818</div>
815
  </div>
816
  </div>
817
+
818
  <div>
819
  <h3 class="font-bold mb-3">Quick Links</h3>
820
  <div class="grid grid-cols-2 gap-4 text-gray-300">
821
  <ul class="space-y-2">
822
+ <li><a href="./index.html" class="hover:text-white">Home</a></li>
823
+ <li><a href="./who-we-are.html" class="hover:text-white">About Us</a></li>
824
+ <li><a href="./solutions.html" class="hover:text-white">Solutions</a></li>
825
+ <li><a href="./services.html" class="hover:text-white">Services</a></li>
826
+ <li><a href="./industries.html" class="hover:text-white">Industries</a></li>
827
+ <li><a href="./products.html" class="hover:text-white">Products</a></li>
828
+ <li><a href="./who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
829
  </ul>
830
  <ul class="space-y-2">
831
+ <li><a href="./contact-us.html" class="hover:text-white">Contact Us</a></li>
832
+ <li><a href="./blog/" class="hover:text-white">Blog</a></li>
833
+ <li><a href="./case-studies.html" class="hover:text-white">Case Studies</a></li>
834
+ <li><a href="./privacy.html" class="hover:text-white">Privacy Policy</a></li>
835
+ <li><a href="./terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
836
+ <li><a href="./protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
837
+
838
  </ul>
839
  </div>
840
  </div>
841
+
842
  <div>
843
  <h3 class="font-bold mb-3">VLC Solutions</h3>
844
  <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
845
  <div class="flex gap-4">
846
+ <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>
847
+ <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>
848
+ <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>
849
+ <a href="https://www.pinterest.com/vlcsolutions/" target="_blank" class="group" aria-label="Pinterest">
850
+ <img src="https://cdn.simpleicons.org/pinterest/9ca3af" class="w-5 h-5 transition group-hover:invert" alt="Pinterest">
851
+ </a>
852
+ <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>
853
  </div>
854
  </div>
855
  </div>
856
+
857
+ <div class="border-t border-[var(--vlc-navy-700)] pt-6 text-center text-gray-300">
858
+ © 2025 VLC Solutions. All rights reserved.
859
+ </div>
860
  </div>
861
  </footer>
862
 
863
+
864
+ <script>
865
+ // Init animations and handle mobile menu functionality after scripts loaded
866
+ document.addEventListener('DOMContentLoaded', () => {
867
+ // Initialize AOS (Animation On Scroll)
868
+ if (window.AOS) {
869
+ AOS.init({
870
+ duration: 800,
871
+ easing: 'ease-in-out',
872
+ once: true,
873
+ mirror: false,
874
+ offset: 120,
875
+ disable: window.innerWidth < 768
876
+ });
877
+ }
878
+
879
+ // Replace Feather icons
880
+ if (window.feather) {
881
  feather.replace();
882
+ }
883
 
884
+ // Mobile menu toggle functionality
885
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
886
+ const mobileMenu = document.getElementById('mobile-menu');
887
+
888
+ if (mobileMenuButton && mobileMenu) {
889
+ mobileMenuButton.addEventListener('click', () => {
890
+ // Toggle the mobile menu visibility
891
+ mobileMenu.classList.toggle('hidden');
892
+
893
+ // Change icon from menu to close (or vice versa)
894
+ const icon = mobileMenuButton.querySelector('i');
895
+ if (mobileMenu.classList.contains('hidden')) {
896
+ feather.icons.menu.replace(); // Show menu icon
897
+ } else {
898
+ feather.icons.x.replace(); // Show close (X) icon
899
+ }
900
+ });
901
+ }
902
+
903
+ // Function to toggle mobile dropdowns
904
+ window.toggleMobileDropdown = function(id) {
905
+ const dropdown = document.getElementById(id);
906
+ dropdown.classList.toggle('hidden');
907
+
908
+ // Update chevron icon
909
+ const button = dropdown.previousElementSibling;
910
+ const icon = button.querySelector('i');
911
+ if (dropdown.classList.contains('hidden')) {
912
+ feather.icons['chevron-down'].replace(); // Show down arrow
913
+ } else {
914
+ feather.icons['chevron-up'].replace(); // Show up arrow
915
  }
916
+ };
917
+
918
+ });
919
+
920
+ // Refresh AOS on window resize (guard if AOS is present)
921
+ window.addEventListener('resize', function() {
922
+ if (window.AOS && AOS.refreshHard) {
923
+ AOS.refreshHard();
924
+ }
925
+ });
926
+ </script>
927
  </body>
928
  </html>