Spaces:

vlcsolutions
/

vlc-e-commerce-powerbridge

Running

App Files Files Community

vlcsolutions commited on 24 days ago

Commit

8104f61

verified ·

1 Parent(s): c7a6d0f

Manual changes saved

Browse files

Files changed (1) hide show

index.html +360 -396

index.html CHANGED Viewed

@@ -3,42 +3,71 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="VLC Solutions — App-Powered ERP solutions integrating Microsoft Dynamics 365 Business Central with Magento." />
-  <title>VLC Solutions - Business Central + E‑Commerce Integration</title>
    <meta name="description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency."/>
   <meta name="keywords" content="Magento Business Central Integration,VLC Magento Connector,Magento Business Central Integration"/>
-  <link rel="canonical" href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" >
-<main id="main" class="w-full">
   <!-- Alert Messages -->
-  <div id="fail_email" class="hidden fixed top-4 right-4 max-w-md bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-lg z-50">
     <div class="flex items-center">
-      <i data-feather="alert-triangle" class="w-5 h-5 mr-2"></i>
-      <div class="flex-1">
-        Could not send an email! Please try again later.
-      </div>
-      <button id="close-fail-alert" class="ml-4 text-red-700 hover:text-red-900">
-        <i data-feather="x" class="w-5 h-5"></i>
-      </button>
-</div>
   </div>
-  <div id="success_email" class="hidden fixed top-4 right-4 max-w-md bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-lg z-50">
-    <div class="flex items-center">
-      <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
-      <div class="flex-1">
-        We have sent you an email. Please check your inbox. If you cannot view it in your primary inbox, please check your Spam or Junk folder.
-      </div>
-      <button id="close-success-alert" class="ml-4 text-green-700 hover:text-green-900">
-        <i data-feather="x" class="w-5 h-5"></i>
-      </button>
 </div>
   </div>
-<!---Twitter Card data -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Magento Connector with Dynamics 365 Business Central">
     <meta name="twitter:description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency.">
-    <meta name="twitter:image:src" content="https://huggingface.co/spaces/vlcsolutions/ai-turbobiz-accelerate-with-intelligence/resolve/main/images/VLC_Logo.png">
   <!-- Tailwind + libs -->
   <script src="https://cdn.tailwindcss.com"></script>
@@ -134,7 +163,7 @@
     /* Dropdown: show on hover and keyboard focus */
     .nav-group:focus-within .nav-panel, .nav-group:hover .nav-panel{ opacity:1; visibility:visible; transform:translateY(0) }
-	<script src="https://analytics.ahrefs.com/analytics.js" data-key="jcrS4NwPF1CB1Z4lNmgDKQ" async></script>
 	<!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GH6WBJWXS8"></script>
@@ -155,7 +184,7 @@
     "url": "https://vlcsolutions.com",
     "logo": {
       "@type": "ImageObject",
-      "url": "https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png"
     }
   },
   "featureList": [
@@ -167,12 +196,12 @@
     "Real-Time Reporting and Analytics"
   ],
   "url": "https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html",
-  "image": "https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png"
 }
 </script>
   </style>
-  <script src="./js/google_js_api/jquery.min.js"></script>
     <!-- <script src="./js/custom.js"></script>-->
@@ -355,12 +384,11 @@
                 });
         });
     </script>
-<script>
 document.addEventListener("DOMContentLoaded", function () {
   const successAlert = document.getElementById("success_email");
   const failAlert = document.getElementById("fail_email");
-  const closeSuccessBtn = document.getElementById("close-success-alert");
-  const closeFailBtn = document.getElementById("close-fail-alert");
   // Hide both initially
   successAlert.classList.add("hidden");
@@ -376,19 +404,13 @@ document.addEventListener("DOMContentLoaded", function () {
   }
   // Close button logic
-  if (closeSuccessBtn) {
-    closeSuccessBtn.addEventListener("click", () => {
       successAlert.classList.add("hidden");
-      removeQuery();
-    });
-  }
-  if (closeFailBtn) {
-    closeFailBtn.addEventListener("click", () => {
       failAlert.classList.add("hidden");
       removeQuery();
     });
-  }
   // Feather icons render
   if (window.feather) {
@@ -410,102 +432,200 @@ function removeQuery() {
   window.history.replaceState({}, document.title, url);
 }
 </script>
 </head>
 <body class="font-sans antialiased bg-white">
   <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>
-  <!-- Header / Nav -->
   <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex justify-between h-16 items-center">
-        <a href="https://www.vlcsolutions.com/" class="flex items-center gap-2" aria-label="VLC Solutions home">
-          <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">
         </a>
-        <nav class="hidden md:flex items-center gap-2" aria-label="Primary">
-          <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>
-          <div class="relative nav-group">
-            <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>
-            <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">
-              <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>
             </div>
           </div>
-          <div class="relative nav-group">
-            <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>
-            <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">
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
             </div>
           </div>
-          <div class="relative nav-group">
-            <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>
-            <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">
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
             </div>
           </div>
-          <div class="relative nav-group">
-            <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>
-            <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">
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
             </div>
           </div>
           <!-- Who We Are -->
           <div class="relative group">
             <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">
-              Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1" aria-hidden="true"></i>
             </button>
             <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">
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
-              <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>
             </div>
           </div>
-          <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>
-        </nav>
-        <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">
           <i data-feather="menu"></i>
         </button>
       </div>
-    </div>
-    <div id="mobile-menu" class="md:hidden hidden border-t border-gray-200">
-      <nav class="px-4 py-3 space-y-1" aria-label="Mobile">
-        <a href="https://www.vlcsolutions.com/who-we-serve.html" class="block py-2">Who We Serve</a>
-        <a href="https://www.vlcsolutions.com/solutions.html" class="block py-2">Solutions</a>
-        <a href="https://www.vlcsolutions.com/services.html" class="block py-2">Services</a>
-        <a href="https://www.vlcsolutions.com/industries.html" class="block py-2">Industries</a>
-        <a href="https://www.vlcsolutions.com/products.html" class="block py-2">Products</a>
-        <a href="https://www.vlcsolutions.com/who-we-are.html" class="block py-2">Who We Are</a>
-        <a href="https://www.vlcsolutions.com/contactus.html" class="block py-2 font-semibold text-[var(--vlc-navy)]">Contact</a>
-      </nav>
     </div>
   </header>
   <!-- ===== VLC Brand Theme + Pattern Utilities ===== -->
 <style id="vlc-brand-theme">
   :root{
@@ -581,189 +701,13 @@ function removeQuery() {
   /* Make icon + text align nicely */
   .li-check i{ flex:0 0 auto; margin-top:.15rem; }
 </style>
- <script src="./js/google_js_api/jquery.min.js"></script>
-    <!-- <script src="./js/custom.js"></script>-->
- <script type="application/javascript">
-        $(document).ready(function(){
-            let domains = [
-                /* Default domains included */
-                "mdkm.com","1.com","2.com","3.com","4.com","5.com","6.com","7.com","8.com","9.com","10.com",  "skincareproductoffers.com", "aol.com", "att.net", "comcast.net", "facebook.com", "gmail.com", "gmx.com", "googlemail.com",
-                "google.com", "someemail.com", "hotmail.com", "hotmail.co.uk", "mac.com", "me.com", "mail.com", "msn.com",
-                "live.com", "sbcglobal.net", "verizon.net", "yahoo.com", "yahoo.co.uk","aim.com", "example.com",
-                /* Other global domains */
-                "email.com", "fastmail.fm", "games.com" /* AOL */, "gmx.net", "hush.com", "hushmail.com", "icloud.com",
-                "iname.com", "inbox.com", "lavabit.com", "love.com" /* AOL */, "outlook.com", "pobox.com", "protonmail.com",
-                "rocketmail.com" /* Yahoo */, "safe-mail.net", "wow.com" /* AOL */, "ygm.com" /* AOL */,
-                "ymail.com" /* Yahoo */, "zoho.com", "yandex.com",
-                /* United States ISP domains */
-                "bellsouth.net", "charter.net", "cox.net", "earthlink.net", "juno.com",
-                /* British ISP domains */
-                "btinternet.com", "virginmedia.com", "blueyonder.co.uk", "freeserve.co.uk", "live.co.uk",
-                "ntlworld.com", "o2.co.uk", "orange.net", "sky.com", "talktalk.co.uk", "tiscali.co.uk",
-                "virgin.net", "wanadoo.co.uk", "bt.com",
-                /* Domains used in Asia */
-                "sina.com", "sina.cn", "qq.com", "naver.com", "hanmail.net", "daum.net", "nate.com", "yahoo.co.jp", "yahoo.co.kr", "yahoo.co.id", "yahoo.co.in", "yahoo.com.sg", "yahoo.com.ph", "163.com", "126.com", "aliyun.com", "foxmail.com",
-                /* French ISP domains */
-                "hotmail.fr", "live.fr", "laposte.net", "yahoo.fr", "wanadoo.fr", "orange.fr", "gmx.fr", "sfr.fr", "neuf.fr", "free.fr",
-                /* German ISP domains */
-                "gmx.de", "hotmail.de", "live.de", "online.de", "t-online.de" /* T-Mobile */, "web.de", "yahoo.de",
-                /* Italian ISP domains */
-                "libero.it", "virgilio.it", "hotmail.it", "aol.it", "tiscali.it", "alice.it", "live.it", "yahoo.it", "email.it", "tin.it", "poste.it", "teletu.it",
-                /* Russian ISP domains */
-                "mail.ru", "rambler.ru", "yandex.ru", "ya.ru", "list.ru",
-                /* Belgian ISP domains */
-                "hotmail.be", "live.be", "skynet.be", "voo.be", "tvcablenet.be", "telenet.be",
-                /* Argentinian ISP domains */
-                "hotmail.com.ar", "live.com.ar", "yahoo.com.ar", "fibertel.com.ar", "speedy.com.ar", "arnet.com.ar",
-                /* Domains used in Mexico */
-                "yahoo.com.mx", "live.com.mx", "hotmail.es", "hotmail.com.mx", "prodigy.net.mx",
-                /* Domains used in Brazil */
-                "yahoo.com.br", "hotmail.com.br", "outlook.com.br", "uol.com.br", "bol.com.br", "terra.com.br", "ig.com.br", "itelefonica.com.br", "r7.com", "zipmail.com.br", "globo.com", "globomail.com", "oi.com.br"
-            ];
-            function isBusinessEmail(domainNameP){
-                var i;
-                for (i = 0; i < domains.length; i++) {
-                    //console.log(domains[i] + ' ' + domainNameP);
-                    if(domains[i] === domainNameP)
-                    {
-                        $('#error').show();
-                        $('#magento_connector').prop('disabled', true);
-                        return;
-                    }else {
-                        $('#error').hide();
-                        $('#magento_connector').prop('disabled', false);
-                    }
-                }
-            }
-            $('#magento_connector').prop('disabled', true);
-            $('#customer_email').keyup(function() {
-                var inputVal = $(this).val();
-                var emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;///^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
-                if (emailReg.test(inputVal)) {
-                    $('#error').hide();
-                    $('#magento_connector').prop('disabled', false);
-                }else{
-                    $('#error').show();
-                    $('#magento_connector').prop('disabled', true);
-                    return;
-                }
-                var aSplit = inputVal.split("@");
-                isBusinessEmail(aSplit[1]);
-            });
-        });
-    </script>
-<script type="application/javascript">
-        $(document).ready(function() {
-            $(window).scroll(function() {
-                if ($(this).scrollTop() > 50) {
-                    $('#toTopBtn').fadeIn();
-                } else {
-                    $('#toTopBtn').fadeOut();
-                }
-            });
-            $('#toTopBtn').click(function() {
-                $("html, body").animate({
-                    scrollTop: 0
-                }, 1000);
-                return false;
-            });
-        });
-        $(document).ready(function(){
-            function getUrlVars()
-            {
-                let vars = [], hash;
-                let hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
-                for(let i = 0; i < hashes.length; i++)
-                {
-                    hash = hashes[i].split('=');
-                    vars.push(hash[0]);
-                    vars[hash[0]] = hash[1];
-                }
-                return vars;
-            }
-            $('#fail_email').hide();
-            $('#success_email').hide();
-    let result = getUrlVars()["result"];
-    if(typeof(result) != 'undefined'){
-        if(result.includes('success')) {
-            $('#success_email').show().fadeIn(300);
-            $('#fail_email').hide();
-            setTimeout(() => {
-                $('#success_email').fadeOut(500, () => removeQuery());
-            }, 5000);
-        } else {
-            $('#fail_email').show().fadeIn(300);
-            $('#success_email').hide();
-            setTimeout(() => {
-                $('#fail_email').fadeOut(500, () => removeQuery());
-            }, 5000);
-        }
-    }
-});
-function removeQuery() {
-    let url = window.location.href;
-    if (url.includes('?')) {
-        url = url.split('?')[0];
-        history.replaceState(null, '', url);
-        $('#success_email, #fail_email').fadeOut(300);
-    }
-}
-</script>
-    <script src="https://www.google.com/recaptcha/api.js?render=6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT"></script>
-    <script>
-        grecaptcha.ready(function() {
-            // do request for recaptcha token
-            // response is promise with passed token
-            grecaptcha.execute('6LfWu2YcAAAAAPooSewjuw82sSxhAdh657M4VvzT', {action:'validate_captcha'})
-                .then(function(token) {
-                    // add token value to form
-                    document.getElementById('g-recaptcha-response').value = token;
-                });
-        });
-    </script>
 <!-- ======================== Main Content ======================== -->
 <main id="main" class="w-full">
   <!-- ====== HERO / BANNER (brand overlay + subtle grid) ====== -->
 <section class="relative text-white"
   style="
     height: 346px;
-    background: url('https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/magento%20page.png') no-repeat center center / cover;
-  ">
 <div class="max-w-7xl mx-auto h-full flex items-center px-8">
     <div class="max-w-2xl text-left" data-aos="fade-up">
       <h1 class="text-4xl md:text-4xl font-bold mb-4 text-white">
@@ -772,7 +716,7 @@ function removeQuery() {
 <p class="text-lg md:text-xl text-gray-100 mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="100">
         Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
       </p>
-      <a href="https://www.vlcsolutions.com/contactus.html"
          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"
          data-aos="fade-up" data-aos-delay="200">
         Sync Magento with Business Central
@@ -782,35 +726,6 @@ function removeQuery() {
   </div>
 </section>
-<!-- YouTube Modal -->
-<div id="youtube-modal"
-     class="fixed inset-0 z-[999] hidden"
-     role="dialog" aria-modal="true" aria-labelledby="youtube-modal-title">
-  <!-- Backdrop -->
-  <div class="absolute inset-0 bg-black/60"></div>
-  <!-- Panel -->
-  <div class="relative h-full w-full flex items-center justify-center p-4">
-    <div class="w-full max-w-4xl bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
-      <div class="bg-[var(--vlc-navy)] text-white px-5 py-4">
-        <div class="flex items-center justify-between">
-          <h4 id="youtube-modal-title" class="text-lg font-semibold">
-            VLC Magento Connector Demo
-          </h4>
-          <button type="button" id="youtube-close"
-                  class="p-1 rounded-md hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
-                  aria-label="Close">
-            <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
-      <div class="p-0 aspect-video">
-        <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>
-      </div>
-    </div>
-  </div>
-</div>
 <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
 <section class="pattern-navy text-white py-8">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -830,8 +745,8 @@ function removeQuery() {
         <span>View VLC Magento Connector on AppSource</span>
       </a>
       <!-- YouTube -->
-      <button id="youtube-open-modal"
-              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">
         <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
         <span>Watch it in action</span>
       </button>
@@ -950,37 +865,42 @@ function removeQuery() {
     border: 1px solid #d1d5db;
   }
 </style>
 <script>
-  // --- YouTube Modal controls ---
-  (function () {
-    const openBtn = document.getElementById('youtube-open-modal');
-    const modal = document.getElementById('youtube-modal');
-    const closeBtn = document.getElementById('youtube-close');
-    const iframe = document.getElementById('youtube-iframe');
-    if (!openBtn || !modal) return;
-    function openModal() {
-      modal.classList.remove('hidden');
-      document.body.style.overflow = 'hidden';
-      // Reset iframe src to ensure video loads fresh
-      iframe.src = 'https://www.youtube.com/embed/4ojpvb19Bqw?enablejsapi=1&autoplay=1';
-    }
-    function closeModal() {
-      modal.classList.add('hidden');
       document.body.style.overflow = '';
-      // Stop video when modal closes
-      iframe.src = iframe.src.replace('&autoplay=1', '');
     }
-    openBtn.addEventListener('click', openModal);
-    closeBtn && closeBtn.addEventListener('click', closeModal);
-    // Close on Esc / backdrop
-    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
-    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); });
-  })();
   // --- CTA Modal controls ---
 (function () {
@@ -1056,7 +976,7 @@ function removeQuery() {
           </p>
         </div>
         <div>
-          <img src="https://huggingface.co/spaces/vlcsolutions/vlc-e-commerce-powerbridge/resolve/main/images/leftside%20image-Magento%20page.png"
                alt="E-Commerce Integration"  loading="lazy" decoding="async">
 </div>
       </div>
@@ -1189,13 +1109,12 @@ function removeQuery() {
           <p>Make sure to have the correct product availability, quick order fulfillment, and clear communication with customers by synchronizing order and shipping information.</p>
         </div>
       </div>
-     <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>
       <p class="mt-4 prose-lg max-w-3xl mx-auto">
         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.
       </p>
     </section>
-    <!-- Additional CTA Buttons Section -->
     <section class="text-center mb-16">
       <div class="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto">
         <a href="./magento-connector-with-business-central.html"
@@ -1203,7 +1122,7 @@ function removeQuery() {
           Magento Connector Service
           <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
         </a>
-        <a href="./magento-connector-with-business-central.html"
            class="btn-accent px-8 py-4 text-lg font-bold rounded-lg inline-flex items-center">
           Frequently Asked Questions
           <i data-feather="help-circle" class="w-5 h-5 ml-2"></i>
@@ -1212,88 +1131,133 @@ function removeQuery() {
     </section>
   </div>
 </main>
 <!-- Feather icons init (place once after content) -->
 <script>
   if (window.feather) feather.replace();
 </script>
-  <!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-3 gap-10 mb-10">
         <div>
           <h3 class="font-bold mb-3">Contact Us</h3>
           <div class="text-gray-300 space-y-3">
-            <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>
-            <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>
           </div>
         </div>
         <div>
           <h3 class="font-bold mb-3">Quick Links</h3>
           <div class="grid grid-cols-2 gap-4 text-gray-300">
             <ul class="space-y-2">
-              <li><a href="https://www.vlcsolutions.com/index.html" class="hover:text-white">Home</a></li>
-              <li><a href="https://www.vlcsolutions.com/who-we-are.html" class="hover:text-white">About Us</a></li>
-              <li><a href="https://www.vlcsolutions.com/solutions.html" class="hover:text-white">Solutions</a></li>
-              <li><a href="https://www.vlcsolutions.com/services.html" class="hover:text-white">Services</a></li>
-              <li><a href="https://www.vlcsolutions.com/industries.html" class="hover:text-white">Industries</a></li>
-              <li><a href="https://www.vlcsolutions.com/products.html" class="hover:text-white">Products</a></li>
-              <li><a href="https://www.vlcsolutions.com/who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
             </ul>
             <ul class="space-y-2">
-              <li><a href="https://www.vlcsolutions.com/contactus.html" class="hover:text-white">Contact Us</a></li>
-              <li><a href="https://www.vlcsolutions.com/blog/" class="hover:text-white">Blog</a></li>
-              <li><a href="https://www.vlcsolutions.com/case-studies.html" class="hover:text-white">Case Studies</a></li>
-              <li><a href="https://www.vlcsolutions.com/privacy.html" class="hover:text-white">Privacy Policy</a></li>
-              <li><a href="https://www.vlcsolutions.com/terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
-              <li><a href="https://www.vlcsolutions.com/protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
-              <li><a href="https://www.vlcsolutions.com/faq.html" class="hover:text-white">FAQs</a></li>
             </ul>
           </div>
         </div>
         <div>
           <h3 class="font-bold mb-3">VLC Solutions</h3>
           <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
           <div class="flex gap-4">
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
           </div>
         </div>
       </div>
-      <div class="border-t border-[var(--vlc-navy-700)] pt-6 text-center text-gray-300">© 2025 VLC Solutions. All rights reserved.</div>
     </div>
   </footer>
-  <script>
-    // Init animations (respect reduced motion)
-    document.addEventListener('DOMContentLoaded', () => {
-      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      AOS.init({ duration: reduce ? 0 : 800, easing: 'ease-in-out', once: true, mirror: false, offset: 120, disable: () => window.innerWidth < 768 });
       feather.replace();
-    });
-    // Mobile menu toggle (accessible)
-    (function(){
-      const btn = document.getElementById('mobile-menu-button');
-      const panel = document.getElementById('mobile-menu');
-      if(!btn || !panel) return;
-      function setOpen(open){
-        panel.classList.toggle('hidden', !open);
-        btn.setAttribute('aria-expanded', String(open));
-        btn.innerHTML = open ? feather.icons['x'].toSvg() : feather.icons['menu'].toSvg();
       }
-      let open = false;
-      btn.addEventListener('click', () => { open = !open; setOpen(open); });
-      document.addEventListener('keydown', (e) => { if(e.key === 'Escape' && open){ open = false; setOpen(open); } });
-    })();
-    // Refresh AOS on resize (debounced)
-    (function(){ let t; window.addEventListener('resize', () => { clearTimeout(t); t = setTimeout(() => AOS.refreshHard(), 150); }); })();
-  </script>
-  <script defer src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Magento Connector with Dynamics 365 Business Central</title>
    <meta name="description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency."/>
   <meta name="keywords" content="Magento Business Central Integration,VLC Magento Connector,Magento Business Central Integration"/>
+  <link rel="canonical" href="https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html" />
+  <!-- ======================== Main Content ======================== -->
+  <main id="main" class="w-full">
   <!-- Alert Messages -->
+  <!-- FAIL ALERT -->
+<div id="fail_email"
+  class="hidden fixed top-[90px] right-6 max-w-md w-full
+         bg-white border border-red-200 rounded-lg shadow-xl
+         z-[9999] overflow-hidden">
+  <div class="flex items-center bg-red-50 px-4 py-2">
     <div class="flex items-center">
+      <i data-feather="alert-triangle" class="w-5 h-5 text-red-600 mr-2"></i>
+      <span class="font-medium text-red-800">Error</span>
+    </div>
+    <!-- CLOSE BUTTON -->
+    <button type="button"
+      class="close-alert ml-auto p-2 rounded hover:bg-red-100">
+      <i data-feather="x" class="w-4 h-4 pointer-events-none"></i>
+    </button>
   </div>
+  <div class="p-4 text-red-700">
+    <p>Could not send an email! Please try again later.</p>
+  </div>
 </div>
+<!-- SUCCESS ALERT -->
+<div id="success_email"
+  class="hidden fixed top-[90px] right-6 max-w-md w-full
+         bg-white border border-green-200 rounded-lg shadow-xl
+         z-[9999] overflow-hidden">
+  <div class="flex items-center bg-green-50 px-4 py-2">
+    <div class="flex items-center">
+      <i data-feather="check-circle" class="w-5 h-5 text-green-600 mr-2"></i>
+      <span class="font-medium text-green-800">Success</span>
+    </div>
+    <!-- CLOSE BUTTON -->
+    <button type="button"
+      class="close-alert ml-auto p-2 rounded hover:bg-green-100">
+      <i data-feather="x" class="w-4 h-4 pointer-events-none"></i>
+    </button>
   </div>
+  <div class="p-4 text-green-700">
+    <p>
+      We have sent you an email. Please check your inbox.
+      If you can't find it in your primary inbox,
+      please check your Spam or Junk folder.
+    </p>
+  </div>
+</div>
+  	<!-- Twitter Card data -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Magento Connector with Dynamics 365 Business Central">
     <meta name="twitter:description" content="Seamlessly connect Magento with Microsoft Dynamics 365 Business Central to sync data, streamline operations, and boost efficiency.">
+    <meta name="twitter:image:src" content="https://www.vlcsolutions.com/images/logo/VLC_Logo.png">
   <!-- Tailwind + libs -->
   <script src="https://cdn.tailwindcss.com"></script>
     /* Dropdown: show on hover and keyboard focus */
     .nav-group:focus-within .nav-panel, .nav-group:hover .nav-panel{ opacity:1; visibility:visible; transform:translateY(0) }
+	 <script src="https://analytics.ahrefs.com/analytics.js" data-key="jcrS4NwPF1CB1Z4lNmgDKQ" async></script>
 	<!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GH6WBJWXS8"></script>
     "url": "https://vlcsolutions.com",
     "logo": {
       "@type": "ImageObject",
+      "url": "https://www.vlcsolutions.com/images/magento_connector/magento-page.png"
     }
   },
   "featureList": [
     "Real-Time Reporting and Analytics"
   ],
   "url": "https://www.vlcsolutions.com/magento-connector-for-microsoft-dynamics-365-business-central.html",
+  "image": "https://www.vlcsolutions.com/images/magento_connector/magento-page.png"
 }
 </script>
   </style>
+     <script src="./js/google_js_api/jquery.min.js"></script>
     <!-- <script src="./js/custom.js"></script>-->
                 });
         });
     </script>
+	<script>
 document.addEventListener("DOMContentLoaded", function () {
   const successAlert = document.getElementById("success_email");
   const failAlert = document.getElementById("fail_email");
   // Hide both initially
   successAlert.classList.add("hidden");
   }
   // Close button logic
+  document.querySelectorAll(".close-alert").forEach(btn => {
+    btn.addEventListener("click", () => {
       successAlert.classList.add("hidden");
       failAlert.classList.add("hidden");
       removeQuery();
     });
+  });
   // Feather icons render
   if (window.feather) {
   window.history.replaceState({}, document.title, url);
 }
 </script>
 </head>
 <body class="font-sans antialiased bg-white">
   <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>
+       <!-- Header / Nav -->
   <header class="bg-white text-[var(--vlc-navy)] shadow-md sticky top-0 z-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between h-16">
+        <a href="./index.html" class="flex items-center gap-2">
+          <img src="./images/logo/VLC_Logo.png" alt="VLC Solutions" class="h-10">
         </a>
+        <nav class="hidden md:flex items-center gap-2">
+          <!-- Direct link per your request -->
+          <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>
+          <!-- Solutions -->
+          <div class="relative group">
+            <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">
+              Solutions <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
+            </button>
+            <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">
+              <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>
             </div>
           </div>
+          <!-- Services -->
+          <div class="relative group">
+            <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">
+              Services <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
+            </button>
+            <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">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
             </div>
           </div>
+          <!-- Industries -->
+          <div class="relative group">
+            <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">
+              Industries <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
+            </button>
+            <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">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
             </div>
           </div>
+          <!-- Products -->
+          <div class="relative group">
+            <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">
+              Products <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
+            </button>
+            <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">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
             </div>
           </div>
           <!-- Who We Are -->
           <div class="relative group">
             <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">
+              Who We Are <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i>
             </button>
             <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">
+              <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>
+              <a href="./partner.html" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Partner</a>
+              <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>
+              <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>
+              <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>
+              <a href="./blog/" class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Blog</a>
+              <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>
+              <a
+           href="./contact-us.html"
+class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 text-sm font-medium">Contact VLC</a>
             </div>
           </div>
+          <a href="./contact-us.html"
+           class="bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-sm font-medium">Let’s Connect</a>
+</nav>
+        <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">
           <i data-feather="menu"></i>
         </button>
       </div>
+      <!-- Mobile Menu -->
+      <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-white shadow-lg z-50">
+        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+          <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>
+          <!-- Solutions Dropdown -->
+          <div class="relative">
+            <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">
+              <span>Solutions</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="solutions-dropdown" class="hidden pl-4">
+              <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>
+            </div>
+          </div>
+          <!-- Services Dropdown -->
+          <div class="relative">
+            <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">
+              <span>Services</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="services-dropdown" class="hidden pl-4">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </div>
+          </div>
+          <!-- Industries Dropdown -->
+          <div class="relative">
+            <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">
+              <span>Industries</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="industries-dropdown" class="hidden pl-4">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </div>
+          </div>
+          <!-- Products Dropdown -->
+          <div class="relative">
+            <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">
+              <span>Products</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="products-dropdown" class="hidden pl-4">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </div>
+          </div>
+          <!-- Who We Are Dropdown -->
+          <div class="relative">
+            <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">
+              <span>Who We Are</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="about-dropdown" class="hidden pl-4">
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+            </div>
+          </div>
+          <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>
+        </div>
+      </div>
     </div>
   </header>
   <!-- ===== VLC Brand Theme + Pattern Utilities ===== -->
 <style id="vlc-brand-theme">
   :root{
   /* Make icon + text align nicely */
   .li-check i{ flex:0 0 auto; margin-top:.15rem; }
 </style>
 <!-- ======================== Main Content ======================== -->
 <main id="main" class="w-full">
   <!-- ====== HERO / BANNER (brand overlay + subtle grid) ====== -->
 <section class="relative text-white"
   style="
     height: 346px;
+    background: url('./images/magento_connector/magento-page.png') no-repeat center center / cover;">
 <div class="max-w-7xl mx-auto h-full flex items-center px-8">
     <div class="max-w-2xl text-left" data-aos="fade-up">
       <h1 class="text-4xl md:text-4xl font-bold mb-4 text-white">
 <p class="text-lg md:text-xl text-gray-100 mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="100">
         Microsoft Dynamics 365 Business Central: Connecting E-Commerce with Efficiency
       </p>
+      <a href="./contactus.html"
          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"
          data-aos="fade-up" data-aos-delay="200">
         Sync Magento with Business Central
   </div>
 </section>
 <!-- ====== CTA RIBBON (Brand navy with subtle pattern) ====== -->
 <section class="pattern-navy text-white py-8">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <span>View VLC Magento Connector on AppSource</span>
       </a>
       <!-- YouTube -->
+      <button id="open-youtube-modal"
+         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">
         <i data-feather="play-circle" class="w-5 h-5" aria-hidden="true"></i>
         <span>Watch it in action</span>
       </button>
     border: 1px solid #d1d5db;
   }
 </style>
+<!-- YouTube Modal -->
+<div id="youtube-modal" class="fixed inset-0 z-[999] hidden flex items-center justify-center p-4 bg-black/80" aria-hidden="true">
+  <div class="relative w-full max-w-4xl mx-auto bg-white rounded-xl overflow-hidden">
+    <button id="close-youtube-modal" class="absolute top-4 right-4 z-10 p-2 rounded-full bg-white/80 hover:bg-white text-gray-800">
+      <i data-feather="x" class="w-6 h-6"></i>
+    </button>
+    <div class="aspect-w-16 aspect-h-9">
+      <iframe id="youtube-iframe" class="w-full h-[500px]" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+  </div>
+</div>
 <script>
+  // YouTube Modal controls
+  const youtubeModal = document.getElementById('youtube-modal');
+  const youtubeIframe = document.getElementById('youtube-iframe');
+  document.getElementById('open-youtube-modal').addEventListener('click', () => {
+    youtubeIframe.src = 'https://www.youtube.com/embed/4ojpvb19Bqw?autoplay=1';
+    youtubeModal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  });
+  document.getElementById('close-youtube-modal').addEventListener('click', () => {
+    youtubeModal.classList.add('hidden');
+    youtubeIframe.src = '';
+    document.body.style.overflow = '';
+  });
+  // Close when clicking outside
+  youtubeModal.addEventListener('click', (e) => {
+    if (e.target === youtubeModal) {
+      youtubeModal.classList.add('hidden');
+      youtubeIframe.src = '';
       document.body.style.overflow = '';
     }
+  });
   // --- CTA Modal controls ---
 (function () {
           </p>
         </div>
         <div>
+          <img src="./images/magento_connector/leftside-image-magento-page.png"
                alt="E-Commerce Integration"  loading="lazy" decoding="async">
 </div>
       </div>
           <p>Make sure to have the correct product availability, quick order fulfillment, and clear communication with customers by synchronizing order and shipping information.</p>
         </div>
       </div>
+     <a href="./contactus.html" class="btn-accent px-8 py-4 text-lg font-bold rounded-lg inline-block">Integrate Today</a>
       <p class="mt-4 prose-lg max-w-3xl mx-auto">
         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.
       </p>
     </section>
+	<!-- Additional CTA Buttons Section -->
     <section class="text-center mb-16">
       <div class="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto">
         <a href="./magento-connector-with-business-central.html"
           Magento Connector Service
           <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
         </a>
+        <a href="./magento-connector-for-microsoft-dynamics-365-business-central-faq.html"
            class="btn-accent px-8 py-4 text-lg font-bold rounded-lg inline-flex items-center">
           Frequently Asked Questions
           <i data-feather="help-circle" class="w-5 h-5 ml-2"></i>
     </section>
   </div>
 </main>
 <!-- Feather icons init (place once after content) -->
 <script>
   if (window.feather) feather.replace();
 </script>
+ <!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid md:grid-cols-3 gap-10 mb-10">
         <div>
           <h3 class="font-bold mb-3">Contact Us</h3>
           <div class="text-gray-300 space-y-3">
+            <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>
+            <div class="flex items-center"><i data-feather="phone" class="w-5 h-5 mr-3"></i>+1 (224) 955-1818</div>
           </div>
         </div>
         <div>
           <h3 class="font-bold mb-3">Quick Links</h3>
           <div class="grid grid-cols-2 gap-4 text-gray-300">
             <ul class="space-y-2">
+              <li><a href="./index.html" class="hover:text-white">Home</a></li>
+              <li><a href="./who-we-are.html" class="hover:text-white">About Us</a></li>
+              <li><a href="./solutions.html" class="hover:text-white">Solutions</a></li>
+              <li><a href="./services.html" class="hover:text-white">Services</a></li>
+              <li><a href="./industries.html" class="hover:text-white">Industries</a></li>
+              <li><a href="./products.html" class="hover:text-white">Products</a></li>
+              <li><a href="./who-we-serve.html" class="hover:text-white">Who We Serve</a></li>
             </ul>
             <ul class="space-y-2">
+              <li><a href="./contact-us.html" class="hover:text-white">Contact Us</a></li>
+              <li><a href="./blog/" class="hover:text-white">Blog</a></li>
+              <li><a href="./case-studies.html" class="hover:text-white">Case Studies</a></li>
+              <li><a href="./privacy.html" class="hover:text-white">Privacy Policy</a></li>
+              <li><a href="./terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
+              <li><a href="./protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
             </ul>
           </div>
         </div>
         <div>
           <h3 class="font-bold mb-3">VLC Solutions</h3>
           <p class="text-gray-300 mb-4">Empowering Your Business through Intelligent AI-enabled IT Solutions</p>
           <div class="flex gap-4">
+            <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>
+            <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>
+            <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>
+            <a href="https://www.pinterest.com/vlcsolutions/" target="_blank" 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>
+            <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>
           </div>
         </div>
       </div>
+      <div class="border-t border-[var(--vlc-navy-700)] pt-6 text-center text-gray-300">
+        © 2025 VLC Solutions. All rights reserved.
+      </div>
     </div>
   </footer>
+<script>
+  // Init animations and handle mobile menu functionality after scripts loaded
+  document.addEventListener('DOMContentLoaded', () => {
+    // Initialize AOS (Animation On Scroll)
+    if (window.AOS) {
+      AOS.init({
+        duration: 800,
+        easing: 'ease-in-out',
+        once: true,
+        mirror: false,
+        offset: 120,
+        disable: window.innerWidth < 768
+      });
+    }
+    // Replace Feather icons
+    if (window.feather) {
       feather.replace();
+    }
+    // Mobile menu toggle functionality
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+    if (mobileMenuButton && mobileMenu) {
+      mobileMenuButton.addEventListener('click', () => {
+        // Toggle the mobile menu visibility
+        mobileMenu.classList.toggle('hidden');
+        // Change icon from menu to close (or vice versa)
+        const icon = mobileMenuButton.querySelector('i');
+        if (mobileMenu.classList.contains('hidden')) {
+          feather.icons.menu.replace(); // Show menu icon
+        } else {
+          feather.icons.x.replace(); // Show close (X) icon
+        }
+      });
+    }
+    // Function to toggle mobile dropdowns
+    window.toggleMobileDropdown = function(id) {
+      const dropdown = document.getElementById(id);
+      dropdown.classList.toggle('hidden');
+      // Update chevron icon
+      const button = dropdown.previousElementSibling;
+      const icon = button.querySelector('i');
+      if (dropdown.classList.contains('hidden')) {
+        feather.icons['chevron-down'].replace(); // Show down arrow
+      } else {
+        feather.icons['chevron-up'].replace(); // Show up arrow
       }
+    };
+  });
+  // Refresh AOS on window resize (guard if AOS is present)
+  window.addEventListener('resize', function() {
+    if (window.AOS && AOS.refreshHard) {
+      AOS.refreshHard();
+    }
+  });
+</script>
 </body>
 </html>