Promote version e2adc3b to main
Browse filesPromoted commit e2adc3bfd7f08beee218271ca87976185b229d52 to main branch
- index.html +925 -17
- style.css +1 -10
index.html
CHANGED
|
@@ -1,20 +1,928 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
</
|
| 9 |
-
<
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 15 |
</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
</div>
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 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" />
|
| 10 |
+
|
| 11 |
+
<!-- Twitter Card data -->
|
| 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>
|
| 19 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 20 |
+
<script defer src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 21 |
+
<script defer src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 22 |
+
|
| 23 |
+
<!-- VLC Brand Map + UI polish -->
|
| 24 |
+
<style id="vlc-brand-theme">
|
| 25 |
+
:root{
|
| 26 |
+
/* Core brand */
|
| 27 |
+
--vlc-navy:#002060; /* primary */
|
| 28 |
+
--vlc-navy-700:#001a50;
|
| 29 |
+
--vlc-sky:#00A0E9; /* secondary */
|
| 30 |
+
--vlc-leaf:#8DC63F; /* accent */
|
| 31 |
+
--vlc-ink:#1F2A44; /* body text */
|
| 32 |
+
--vlc-card:#ffffff; /* surfaces */
|
| 33 |
+
|
| 34 |
+
/* Extended palette */
|
| 35 |
+
--vlc-navy-50:#F5F7FF;
|
| 36 |
+
--vlc-navy-100:#ECF1FF;
|
| 37 |
+
--vlc-sky-50:#F0FAFF;
|
| 38 |
+
--vlc-leaf-50:#F4FAEC;
|
| 39 |
+
--vlc-sky-700:#0086C1;
|
| 40 |
+
--vlc-leaf-700:#79b32e;
|
| 41 |
+
|
| 42 |
+
/* Section tints */
|
| 43 |
+
--vlc-tint:#F5F7FF; /* old */
|
| 44 |
+
--vlc-leaf-tint:#F3FAEA; /* old */
|
| 45 |
+
--vlc-sky-tint: var(--vlc-sky-50);
|
| 46 |
+
--vlc-navy-tint: var(--vlc-navy-50);
|
| 47 |
+
}
|
| 48 |
+
html:focus-within { scroll-behavior: smooth; }
|
| 49 |
+
body{ color:#1f2937; }
|
| 50 |
+
|
| 51 |
+
.chip{ background:linear-gradient(135deg,var(--vlc-navy),#0b3b8f); color:#fff }
|
| 52 |
+
.btn-primary{ background:var(--vlc-navy); color:#fff }
|
| 53 |
+
.btn-primary:hover{ background:var(--vlc-navy-700) }
|
| 54 |
+
.btn-accent{ background:var(--vlc-leaf); color:#0b2a66 }
|
| 55 |
+
.btn-accent:hover{ background:var(--vlc-leaf-700) }
|
| 56 |
+
.btn-outline{ border:1px solid rgba(255,255,255,.6); color:#fff }
|
| 57 |
+
.btn-outline:hover{ background:rgba(255,255,255,.1) }
|
| 58 |
+
.link-brand{ color:var(--vlc-navy) }
|
| 59 |
+
.link-brand:hover{ color:var(--vlc-leaf) }
|
| 60 |
+
|
| 61 |
+
/* Accent top border like vlcsolutions.com cards */
|
| 62 |
+
.card-accent{ position:relative; }
|
| 63 |
+
.card-accent:before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--vlc-leaf),var(--vlc-sky)); }
|
| 64 |
+
.card-body{ display:flex; flex-direction:column; height:100% }
|
| 65 |
+
.card-cta{ margin-top:auto }
|
| 66 |
+
|
| 67 |
+
/* ====== Brand Patterns (NEW + refreshed) ====== */
|
| 68 |
+
.pattern-grid{ /* fine grid overlay */
|
| 69 |
+
background:
|
| 70 |
+
linear-gradient(transparent 23px, rgba(0,32,96,.06) 24px),
|
| 71 |
+
linear-gradient(90deg, transparent 23px, rgba(0,32,96,.06) 24px);
|
| 72 |
+
background-size:24px 24px;
|
| 73 |
+
}
|
| 74 |
+
.pattern-navy{ /* deep navy with soft spots */
|
| 75 |
+
background:
|
| 76 |
+
radial-gradient(24px 24px at 12% 10%, rgba(255,255,255,.06) 0 6px, transparent 7px),
|
| 77 |
+
radial-gradient(24px 24px at 64% 28%, rgba(255,255,255,.05) 0 6px, transparent 7px),
|
| 78 |
+
radial-gradient(24px 24px at 30% 72%, rgba(255,255,255,.04) 0 6px, transparent 7px),
|
| 79 |
+
linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.14));
|
| 80 |
+
background-color:var(--vlc-navy);
|
| 81 |
+
color:#fff;
|
| 82 |
+
}
|
| 83 |
+
.pattern-leaf{ /* soft diagonal blend using leaf */
|
| 84 |
+
background:
|
| 85 |
+
linear-gradient(135deg, rgba(141,198,63,.18), rgba(0,160,233,.12)),
|
| 86 |
+
radial-gradient(600px 300px at 10% -10%, rgba(141,198,63,.20), transparent 60%),
|
| 87 |
+
radial-gradient(600px 300px at 110% 110%, rgba(0,160,233,.18), transparent 60%);
|
| 88 |
+
background-color:var(--vlc-leaf-50);
|
| 89 |
+
}
|
| 90 |
+
.pattern-sky{ /* airy bubbles using sky */
|
| 91 |
+
background:
|
| 92 |
+
radial-gradient(18px 18px at 20% 30%, rgba(0,160,233,.14) 0 6px, transparent 7px),
|
| 93 |
+
radial-gradient(18px 18px at 72% 64%, rgba(141,198,63,.14) 0 6px, transparent 7px),
|
| 94 |
+
linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
|
| 95 |
+
background-color:var(--vlc-sky-50);
|
| 96 |
+
}
|
| 97 |
+
.pattern-diamond{ /* subtle diamonds */
|
| 98 |
+
--c: rgba(0,32,96,.06);
|
| 99 |
+
background:
|
| 100 |
+
conic-gradient(from 45deg, transparent 0 25%, var(--c) 0 50%, transparent 0 75%, var(--c) 0) 12px 12px/24px 24px,
|
| 101 |
+
conic-gradient(from 45deg, var(--c) 0 25%, transparent 0 50%, var(--c) 0 75%, transparent 0)/24px 24px;
|
| 102 |
+
background-color:#fff;
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
/* Footer */
|
| 106 |
+
footer a:hover{ color:var(--vlc-leaf) }
|
| 107 |
+
|
| 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>
|
| 115 |
+
|
| 116 |
+
<script type="application/ld+json">
|
| 117 |
+
{
|
| 118 |
+
"@context": "https://schema.org/",
|
| 119 |
+
"@type": "SoftwareApplication",
|
| 120 |
+
"name": "Magento Connector with Dynamics 365 Business Central",
|
| 121 |
+
"alternateName": "VLC E-Commerce Connector",
|
| 122 |
+
"description": "Seamlessly integrate Microsoft Dynamics 365 Business Central with Magento for real-time synchronization of orders, inventory, and customers.",
|
| 123 |
+
"applicationCategory": "BusinessApplication",
|
| 124 |
+
"operatingSystem": "Web, Cloud",
|
| 125 |
+
"softwareVersion": "2025",
|
| 126 |
+
"publisher": {
|
| 127 |
+
"@type": "Organization",
|
| 128 |
+
"name": "VLC Solutions",
|
| 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": [
|
| 136 |
+
"Magento and Shopify Integration",
|
| 137 |
+
"Real-Time Inventory Sync",
|
| 138 |
+
"Automated Order Management",
|
| 139 |
+
"Customer Data Synchronization",
|
| 140 |
+
"Shipping and Payment Mapping",
|
| 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{
|
| 344 |
+
--vlc-navy:#002060;
|
| 345 |
+
--vlc-navy-700:#00184b;
|
| 346 |
+
--vlc-sky:#00A0E9;
|
| 347 |
+
--vlc-leaf:#8DC63F;
|
| 348 |
+
--vlc-leaf-tint: rgba(141,198,63,.08);
|
| 349 |
+
--ink:#0f172a;
|
| 350 |
+
}
|
| 351 |
+
|
| 352 |
+
/* Accent button */
|
| 353 |
+
.btn-accent{
|
| 354 |
+
background: linear-gradient(180deg, #8DC63F, #7ab739);
|
| 355 |
+
color:#fff;
|
| 356 |
+
box-shadow: 0 6px 18px rgba(141,198,63,.35);
|
| 357 |
+
transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
|
| 358 |
+
}
|
| 359 |
+
.btn-accent:hover{
|
| 360 |
+
transform: translateY(-2px);
|
| 361 |
+
background: linear-gradient(180deg, #9ddf48, #8DC63F);
|
| 362 |
+
box-shadow: 0 10px 24px rgba(141,198,63,.45);
|
| 363 |
+
}
|
| 364 |
+
.btn-accent:focus{
|
| 365 |
+
outline:2px solid #fff;
|
| 366 |
+
outline-offset:2px;
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
|
| 370 |
+
/* Card accent border + subtle hover */
|
| 371 |
+
.card-accent{
|
| 372 |
+
border:1px solid rgba(0,32,96,.08);
|
| 373 |
+
transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
|
| 374 |
+
}
|
| 375 |
+
.card-accent:hover{
|
| 376 |
+
transform: translateY(-2px);
|
| 377 |
+
box-shadow: 0 10px 24px rgba(0,32,96,.08);
|
| 378 |
+
border-color: rgba(0,160,233,.25);
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
/* Brand patterns (pure CSS, performant) */
|
| 382 |
+
.pattern-grid{
|
| 383 |
+
background-image:
|
| 384 |
+
linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
|
| 385 |
+
linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
|
| 386 |
+
background-size:24px 24px;
|
| 387 |
+
}
|
| 388 |
+
.pattern-navy{
|
| 389 |
+
background:
|
| 390 |
+
radial-gradient(circle at 10% 10%, rgba(255,255,255,.06) 0 25%, transparent 26% 100%),
|
| 391 |
+
radial-gradient(circle at 80% 30%, rgba(255,255,255,.05) 0 20%, transparent 21% 100%),
|
| 392 |
+
var(--vlc-navy);
|
| 393 |
+
}
|
| 394 |
+
.pattern-leaf{
|
| 395 |
+
background:
|
| 396 |
+
radial-gradient(ellipse at 0 0, rgba(141,198,63,.15) 0 40%, transparent 41% 100%),
|
| 397 |
+
radial-gradient(ellipse at 100% 100%, rgba(0,160,233,.12) 0 35%, transparent 36% 100%),
|
| 398 |
+
linear-gradient(0deg, #fff, #fff);
|
| 399 |
+
}
|
| 400 |
+
.pattern-diamond{
|
| 401 |
+
background:
|
| 402 |
+
linear-gradient(135deg, rgba(0,160,233,.08) 12.5%, transparent 12.5% 37.5%, rgba(0,160,233,.08) 37.5% 62.5%, transparent 62.5% 87.5%, rgba(0,160,233,.08) 87.5%),
|
| 403 |
+
linear-gradient(45deg, rgba(141,198,63,.09) 12.5%, transparent 12.5% 37.5%, rgba(141,198,63,.09) 37.5% 62.5%, transparent 62.5% 87.5%, rgba(141,198,63,.09) 87.5%);
|
| 404 |
+
background-size:24px 24px;
|
| 405 |
+
background-position:0 0, 12px 12px;
|
| 406 |
+
}
|
| 407 |
+
|
| 408 |
+
/* Utility helpers */
|
| 409 |
+
.heading-navy{ color: var(--vlc-navy); }
|
| 410 |
+
.prose-lg{ font-size:1.125rem; line-height:1.75rem; color:#334155; }
|
| 411 |
+
.vlc-ring:focus{ outline:3px solid rgba(0,160,233,.5); outline-offset:2px; }
|
| 412 |
+
|
| 413 |
+
/* Make icon + text align nicely */
|
| 414 |
+
.li-check i{ flex:0 0 auto; margin-top:.15rem; }
|
| 415 |
+
</style>
|
| 416 |
+
|
| 417 |
+
<!-- ======================== Main Content ======================== -->
|
| 418 |
+
<main id="main" class="w-full">
|
| 419 |
+
<!-- ====== HERO / BANNER (brand overlay + subtle grid) ====== -->
|
| 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">
|
| 427 |
+
One Platform. Full Integration. All Your </br> E-Commerce Needs Met.
|
| 428 |
</h1>
|
| 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
|
| 436 |
+
<i data-feather="arrow-right" class="w-5 h-5 ml-2" aria-hidden="true"></i>
|
| 437 |
+
</a>
|
| 438 |
+
</div>
|
| 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">
|
| 445 |
+
<div class="flex flex-col md:flex-row items-stretch gap-3 md:gap-4">
|
| 446 |
+
|
| 447 |
+
<!-- Download Fact Sheet (opens modal) -->
|
| 448 |
+
<button id="cta-open-modal"
|
| 449 |
+
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">
|
| 450 |
+
<i data-feather="download" class="w-5 h-5" aria-hidden="true"></i>
|
| 451 |
+
<span>Download Fact Sheet</span>
|
| 452 |
+
</button>
|
| 453 |
+
|
| 454 |
+
<!-- AppSource -->
|
| 455 |
+
<a href="https://appsource.microsoft.com/en-us/product/dynamics-365-business-central/PUBID.vlc-solutions-llc-1263055%7CAID.vlc-magento-connector%7CPAPPID.333d2c55-7a39-4168-bc6c-8da3bab6c7a0"
|
| 456 |
+
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">
|
| 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 |
+
|
| 472 |
+
<!-- ====== DOWNLOAD FACT SHEET MODAL ====== -->
|
| 473 |
+
<form id="send_email_to_customer" action="./magentoConnector.php" method="post" novalidate>
|
| 474 |
+
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
|
| 475 |
+
<input type="hidden" name="action" value="validate_captcha">
|
| 476 |
+
|
| 477 |
+
<div id="cta-modal"
|
| 478 |
+
class="fixed inset-0 z-[999] hidden"
|
| 479 |
+
role="dialog" aria-modal="true" aria-labelledby="cta-modal-title">
|
| 480 |
+
<!-- Backdrop -->
|
| 481 |
+
<div class="absolute inset-0 bg-black/60"></div>
|
| 482 |
+
|
| 483 |
+
<!-- Panel -->
|
| 484 |
+
<div class="relative h-full w-full flex items-center justify-center p-4">
|
| 485 |
+
<div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-[rgba(0,32,96,.08)] overflow-hidden">
|
| 486 |
+
<div class="bg-[var(--vlc-navy)] text-white px-5 py-4">
|
| 487 |
+
<div class="flex items-center justify-between">
|
| 488 |
+
<h4 id="cta-modal-title" class="text-lg font-semibold">
|
| 489 |
+
Enter your business email to download
|
| 490 |
+
</h4>
|
| 491 |
+
<button type="button" id="cta-close"
|
| 492 |
+
class="p-1 rounded-md hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
|
| 493 |
+
aria-label="Close">
|
| 494 |
+
<i data-feather="x" class="w-5 h-5" aria-hidden="true"></i>
|
| 495 |
+
</button>
|
| 496 |
+
</div>
|
| 497 |
+
</div>
|
| 498 |
+
|
| 499 |
+
<div class="p-6 space-y-4">
|
| 500 |
+
<p id="cta-error" class="hidden text-sm text-red-600">
|
| 501 |
+
Please use a valid business email (not a personal domain).
|
| 502 |
+
</p>
|
| 503 |
+
|
| 504 |
+
<label for="customer_email" class="block text-sm font-medium text-[var(--vlc-navy)]">
|
| 505 |
+
Business Email
|
| 506 |
+
</label>
|
| 507 |
+
<input
|
| 508 |
+
class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--vlc-sky)]"
|
| 509 |
+
name="customer_email" id="customer_email" type="email"
|
| 510 |
+
placeholder="name@yourcompany.com" required autocomplete="email" />
|
| 511 |
+
|
| 512 |
+
<div class="flex items-center justify-end gap-3 pt-2">
|
| 513 |
+
<button type="button" id="cta-cancel"
|
| 514 |
+
class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50">
|
| 515 |
+
Cancel
|
| 516 |
+
</button>
|
| 517 |
+
<button type="submit" id="magento_connector"
|
| 518 |
+
class="px-4 py-2 rounded-md bg-[var(--vlc-leaf)] hover:bg-[#79b32e] text-white font-semibold shadow">
|
| 519 |
+
Submit & Download
|
| 520 |
+
</button>
|
| 521 |
+
</div>
|
| 522 |
+
</div>
|
| 523 |
+
</div>
|
| 524 |
+
</div>
|
| 525 |
+
</div>
|
| 526 |
+
</form>
|
| 527 |
+
|
| 528 |
+
<!-- ====== CTA BUTTON HOVER COLOR STYLES ====== -->
|
| 529 |
+
<style>
|
| 530 |
+
/* VLC Leaf Green brand color */
|
| 531 |
+
:root {
|
| 532 |
+
--vlc-leaf: #8DC63F;
|
| 533 |
+
--vlc-leaf-dark: #79b32e;
|
| 534 |
+
}
|
| 535 |
+
|
| 536 |
+
/* CTA ribbon buttons default style */
|
| 537 |
+
.cta-btn {
|
| 538 |
+
background: rgba(255, 255, 255, 0.08);
|
| 539 |
+
color: #ffffff;
|
| 540 |
+
transition: all 0.25s ease-in-out;
|
| 541 |
+
}
|
| 542 |
+
|
| 543 |
+
/* On hover: leaf green background and dark navy text */
|
| 544 |
+
.cta-btn:hover {
|
| 545 |
+
background: linear-gradient(180deg, var(--vlc-leaf), var(--vlc-leaf-dark));
|
| 546 |
+
color: #002060;
|
| 547 |
+
border-color: transparent;
|
| 548 |
+
box-shadow: 0 8px 20px rgba(141, 198, 63, 0.4);
|
| 549 |
+
transform: translateY(-2px);
|
| 550 |
+
}
|
| 551 |
+
|
| 552 |
+
/* Icon color switch on hover */
|
| 553 |
+
.cta-btn:hover i {
|
| 554 |
+
color: #002060 !important;
|
| 555 |
+
}
|
| 556 |
+
|
| 557 |
+
/* Smooth transition for icons */
|
| 558 |
+
.cta-btn i {
|
| 559 |
+
transition: color 0.25s ease-in-out;
|
| 560 |
+
}
|
| 561 |
+
|
| 562 |
+
/* Accessibility focus ring */
|
| 563 |
+
.cta-btn:focus {
|
| 564 |
+
outline: none;
|
| 565 |
+
box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.5);
|
| 566 |
+
}
|
| 567 |
+
|
| 568 |
+
/* Modal button hover (already green effect included) */
|
| 569 |
+
#cta-modal button:hover {
|
| 570 |
+
background: linear-gradient(180deg, var(--vlc-leaf), var(--vlc-leaf-dark)) !important;
|
| 571 |
+
color: #fff !important;
|
| 572 |
+
border-color: transparent !important;
|
| 573 |
+
box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.3);
|
| 574 |
+
transition: all 0.25s ease-in-out;
|
| 575 |
+
}
|
| 576 |
+
|
| 577 |
+
#cta-modal #cta-cancel {
|
| 578 |
+
background: #f8fafc;
|
| 579 |
+
color: var(--vlc-navy, #002060);
|
| 580 |
+
border: 1px solid #d1d5db;
|
| 581 |
+
}
|
| 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');
|
| 590 |
+
const cancelBtn = document.getElementById('cta-cancel');
|
| 591 |
+
const form = document.getElementById('send_email_to_customer');
|
| 592 |
+
const email = document.getElementById('customer_email');
|
| 593 |
+
const error = document.getElementById('cta-error');
|
| 594 |
+
|
| 595 |
+
if (!openBtn || !modal) return;
|
| 596 |
+
|
| 597 |
+
function openModal() {
|
| 598 |
+
modal.classList.remove('hidden');
|
| 599 |
+
document.body.style.overflow = 'hidden';
|
| 600 |
+
email && setTimeout(() => email.focus(), 50);
|
| 601 |
+
}
|
| 602 |
+
function closeModal() {
|
| 603 |
+
modal.classList.add('hidden');
|
| 604 |
+
document.body.style.overflow = '';
|
| 605 |
+
error && error.classList.add('hidden');
|
| 606 |
+
}
|
| 607 |
+
|
| 608 |
+
openBtn.addEventListener('click', openModal);
|
| 609 |
+
closeBtn && closeBtn.addEventListener('click', closeModal);
|
| 610 |
+
cancelBtn && cancelBtn.addEventListener('click', closeModal);
|
| 611 |
+
|
| 612 |
+
// Close on Esc / backdrop
|
| 613 |
+
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
|
| 614 |
+
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); });
|
| 615 |
+
|
| 616 |
+
// --- Business email validation ---
|
| 617 |
+
const personalDomains = [
|
| 618 |
+
'gmail.com','googlemail.com','yahoo.com','yahoo.co.in','outlook.com','hotmail.com','live.com',
|
| 619 |
+
'msn.com','icloud.com','me.com','aol.com','proton.me','protonmail.com','yandex.com','pm.me','mail.com','zoho.com'
|
| 620 |
+
];
|
| 621 |
+
|
| 622 |
+
form && form.addEventListener('submit', (e) => {
|
| 623 |
+
if (!email) return;
|
| 624 |
+
const value = String(email.value || '').trim().toLowerCase();
|
| 625 |
+
const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
| 626 |
+
const domain = value.split('@')[1] || '';
|
| 627 |
+
const isPersonal = personalDomains.includes(domain);
|
| 628 |
+
|
| 629 |
+
if (!isEmail || isPersonal) {
|
| 630 |
+
e.preventDefault();
|
| 631 |
+
error.classList.remove('hidden');
|
| 632 |
+
email.focus();
|
| 633 |
+
}
|
| 634 |
+
});
|
| 635 |
+
})();
|
| 636 |
+
</script>
|
| 637 |
+
|
| 638 |
+
|
| 639 |
+
|
| 640 |
+
|
| 641 |
+
|
| 642 |
+
|
| 643 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
| 644 |
+
<!-- ====== Introduction Section ====== -->
|
| 645 |
+
<section id="intro" class="mb-16">
|
| 646 |
+
<div class="grid md:grid-cols-2 gap-8 items-center">
|
| 647 |
+
<div>
|
| 648 |
+
<h2 class="text-3xl font-bold mb-6 heading-navy">
|
| 649 |
+
Seamless Integration with Magento for a Unified E-Commerce Experience
|
| 650 |
+
</h2>
|
| 651 |
+
<p class="prose-lg mb-6">
|
| 652 |
+
Microsoft Dynamics 365 Business Central offers seamless integration with Magento, creating a unified experience for businesses. By linking your e-commerce store with Business Central, you can streamline operations, ensure real-time data sync, and enhance efficiency, all from a single platform.
|
| 653 |
+
</p>
|
| 654 |
+
<p class="prose-lg">
|
| 655 |
+
This ERP solution simplifies inventory management, order processing, customer synchronization, and more, allowing businesses to focus on growth without worrying about manual data handling.
|
| 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>
|
| 663 |
+
</section>
|
| 664 |
+
|
| 665 |
+
<!-- ====== Benefits Section ====== -->
|
| 666 |
+
<section class="mb-16 pattern-leaf p-8 rounded-xl border border-[rgba(0,32,96,.08)]">
|
| 667 |
+
<h2 class="text-3xl font-bold mb-6 heading-navy">Streamline Your E-Commerce Business</h2>
|
| 668 |
+
<p class="prose-lg mb-6">
|
| 669 |
+
Operating an online store demands efficient tools with powerful features capable of integrating different functions. Business Central integrates directly with Magento and, therefore, provides real-time updates on the same platform on stock, orders and customer details etc. This comprehensive solution eliminates human error and makes the business processes run smoothly.
|
| 670 |
+
</p>
|
| 671 |
+
<p class="prose-lg">
|
| 672 |
+
The synchronization of critical data has been automated in Microsoft Dynamics 365 Business Central, and this means that your business will not have to wait longer and your customers will receive accurate and timely information.
|
| 673 |
+
</p>
|
| 674 |
+
</section>
|
| 675 |
+
|
| 676 |
+
<!-- ====== Customer Expectations ====== -->
|
| 677 |
+
<section class="mb-16">
|
| 678 |
+
<h2 class="text-3xl font-bold mb-6 heading-navy">Meets customer expectations</h2>
|
| 679 |
+
<p class="prose-lg mb-6">
|
| 680 |
+
In this current digital landscape, consumers demand timely and precise information. Business Central allows your business to handle these demands by synchronizing all important data, regardless of whether you use Magento. Your customers will be able to access updated information on products, their orders status and shipping details.
|
| 681 |
+
</p>
|
| 682 |
+
<p class="prose-lg">
|
| 683 |
+
The system is integrated and allows managing the inventory in real time, which means that your store will display the real stock position, avoiding over-selling or losing customer trust.
|
| 684 |
+
</p>
|
| 685 |
+
</section>
|
| 686 |
+
|
| 687 |
+
<!-- ====== Features Section ====== -->
|
| 688 |
+
<section class="mb-16">
|
| 689 |
+
<h2 class="text-3xl font-bold mb-8 heading-navy text-center">Key Features for a Unified E-Commerce Experience</h2>
|
| 690 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 691 |
+
<div class="bg-white p-6 rounded-lg shadow-md card-accent">
|
| 692 |
+
<h3 class="text-xl font-bold mb-4 heading-navy">Complete Customer Address Sync</h3>
|
| 693 |
+
<ul class="space-y-3">
|
| 694 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Integrate customer registrations between Magento as well as Business Central seamlessly.</li>
|
| 695 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Sync multiple address types, including billing & shipping details, across all the platforms.</li>
|
| 696 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Ensure customer information stays updated on all platforms in real-time.</li>
|
| 697 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Simplify data management by having a unified customer database across your systems.</li>
|
| 698 |
+
</ul>
|
| 699 |
+
</div>
|
| 700 |
+
<div class="bg-white p-6 rounded-lg shadow-md card-accent">
|
| 701 |
+
<h3 class="text-xl font-bold mb-4 heading-navy">Product & Inventory Updates</h3>
|
| 702 |
+
<ul class="space-y-3">
|
| 703 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Synchronize product details such as tier pricing and inventory status between your e-commerce solution and Business Central.</li>
|
| 704 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Ensure real-time visibility on product availability and prevent inventory errors.</li>
|
| 705 |
+
</ul>
|
| 706 |
+
</div>
|
| 707 |
+
<div class="bg-white p-6 rounded-lg shadow-md card-accent">
|
| 708 |
+
<h3 class="text-xl font-bold mb-4 heading-navy">Order & Payment Management</h3>
|
| 709 |
+
<ul class="space-y-3">
|
| 710 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Automatically convert online orders into Business Central sales orders.</li>
|
| 711 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Synchronize all related details such as payment, shipping and tax across both platforms for effective order processing.</li>
|
| 712 |
+
</ul>
|
| 713 |
+
</div>
|
| 714 |
+
<div class="bg-white p-6 rounded-lg shadow-md card-accent">
|
| 715 |
+
<h3 class="text-xl font-bold mb-4 heading-navy">Shipping and Payment Integration</h3>
|
| 716 |
+
<ul class="space-y-3">
|
| 717 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Map shipping methods and payment solutions between Business Central and Magento.</li>
|
| 718 |
+
<li class="flex items-start li-check"><i data-feather="check" class="w-5 h-5 mr-2 text-[var(--vlc-leaf)]" aria-hidden="true"></i> Provide smooth checkout experiences and accurate shipping charges for your customers.</li>
|
| 719 |
+
</ul>
|
| 720 |
+
</div>
|
| 721 |
+
</div>
|
| 722 |
+
</section>
|
| 723 |
+
|
| 724 |
+
<!-- ====== Simplified Customer Data Management ====== -->
|
| 725 |
+
<section class="mb-16 pattern-leaf p-8 rounded-xl border border-[rgba(0,32,96,.08)]">
|
| 726 |
+
<h3 class="text-2xl font-bold mb-6 heading-navy">Simplified Customer Data Management</h3>
|
| 727 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 728 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 729 |
+
<h4 class="font-semibold heading-navy mb-2">Complete Customer Sync</h4>
|
| 730 |
+
<p>Web customer registrations and address information are synced with Business Central in real time. This integration ensures accurate customer profiles across both platforms.</p>
|
| 731 |
+
</div>
|
| 732 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 733 |
+
<h4 class="font-semibold heading-navy mb-2">Product and Inventory Sync</h4>
|
| 734 |
+
<p>Push product updates, sales prices, and inventory levels from Business Central to Magento. Real-time synchronization ensures your customers see the most up-to-date product availability and pricing.</p>
|
| 735 |
+
</div>
|
| 736 |
+
</div>
|
| 737 |
+
</section>
|
| 738 |
+
|
| 739 |
+
<!-- ====== Real-Time Order & Payment Processing ====== -->
|
| 740 |
+
<section class="mb-16 pattern-diamond p-8 rounded-xl border border-[rgba(0,32,96,.08)]">
|
| 741 |
+
<h3 class="text-2xl font-bold mb-6 heading-navy">Real-Time Order & Payment Processing</h3>
|
| 742 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 743 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 744 |
+
<h4 class="font-semibold heading-navy mb-2">Guest Checkout Integration</h4>
|
| 745 |
+
<p>Allow guest customers to place orders, and sync their information directly with Business Central. Orders from guest users are converted into sales orders, streamlining the fulfillment process.</p>
|
| 746 |
+
</div>
|
| 747 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 748 |
+
<h4 class="font-semibold heading-navy mb-2">Order Status Sync</h4>
|
| 749 |
+
<p>Sales order shipment statuses, tracking numbers, and payment status are synced between Business Central and your e-commerce platform. Keep your customers informed throughout the order fulfillment process.</p>
|
| 750 |
+
</div>
|
| 751 |
+
</div>
|
| 752 |
+
</section>
|
| 753 |
+
|
| 754 |
+
<!-- ====== Shipping, Taxes, and Payment Integration ====== -->
|
| 755 |
+
<section class="mb-16 pattern-leaf p-8 rounded-xl border border-[rgba(0,32,96,.08)]">
|
| 756 |
+
<h3 class="text-2xl font-bold mb-6 heading-navy">Shipping, Taxes, and Payment Integration</h3>
|
| 757 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 758 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 759 |
+
<h4 class="font-semibold heading-navy mb-2">Integrated Payment Processing</h4>
|
| 760 |
+
<p>Payment data is automatically transferred between Magento and Business Central, including payment methods and statuses. This ensures a seamless transaction experience for customers and reduces manual intervention.</p>
|
| 761 |
+
</div>
|
| 762 |
+
<div class="bg-white rounded-lg p-6 shadow-sm card-accent">
|
| 763 |
+
<h4 class="font-semibold heading-navy mb-2">Shipping Data Sync</h4>
|
| 764 |
+
<p>Keep your shipping rates and tax information consistent between platforms. The integration ensures that shipping charges and tax rates are synchronized for accurate customer billing.</p>
|
| 765 |
+
</div>
|
| 766 |
+
</div>
|
| 767 |
+
</section>
|
| 768 |
+
|
| 769 |
+
<!-- ====== Why Integrate + CTA ====== -->
|
| 770 |
+
<section class="text-center mb-16">
|
| 771 |
+
<h2 class="text-3xl font-bold mb-6 heading-navy">Why Integrate Microsoft Dynamics 365 Business Central with Your E-Commerce Platform?</h2>
|
| 772 |
+
<p class="prose-lg mb-8 max-w-4xl mx-auto">
|
| 773 |
+
The potential benefits of integrating Microsoft Dynamics 365 Business Central with Magento are many, and include boosting the efficiency of the operational process, real-time syncing of data, and enhanced overall customer experience.
|
| 774 |
+
</p>
|
| 775 |
+
<div class="grid md:grid-cols-3 gap-8 mb-12">
|
| 776 |
+
<div class="bg-[var(--vlc-leaf-tint)] p-6 rounded-lg">
|
| 777 |
+
<i data-feather="activity" class="w-10 h-10 mb-4 text-[var(--vlc-leaf)]" aria-hidden="true"></i>
|
| 778 |
+
<h3 class="text-xl font-bold mb-3 heading-navy">Real-Time Data Insights</h3>
|
| 779 |
+
<p>Get full visibility of business operations with real-time updates of data to allow faster and more informed decision-making.</p>
|
| 780 |
+
</div>
|
| 781 |
+
<div class="bg-[var(--vlc-leaf-tint)] p-6 rounded-lg">
|
| 782 |
+
<i data-feather="clock" class="w-10 h-10 mb-4 text-[var(--vlc-leaf)]" aria-hidden="true"></i>
|
| 783 |
+
<h3 class="text-xl font-bold mb-3 heading-navy">Saved Human Labor</h3>
|
| 784 |
+
<p>Reduce the number of manual tasks by automatizing the process of transferring data between the platforms and allowing your team to perform more strategic work.</p>
|
| 785 |
+
</div>
|
| 786 |
+
<div class="bg-[var(--vlc-leaf-tint)] p-6 rounded-lg">
|
| 787 |
+
<i data-feather="smile" class="w-10 h-10 mb-4 text-[var(--vlc-leaf)]" aria-hidden="true"></i>
|
| 788 |
+
<h3 class="text-xl font-bold mb-3 heading-navy">Enhanced Customer Satisfaction</h3>
|
| 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>
|
| 796 |
+
</section>
|
| 797 |
+
</div>
|
| 798 |
+
</main>
|
| 799 |
+
|
| 800 |
+
<!-- Feather icons init (place once after content) -->
|
| 801 |
+
<script>
|
| 802 |
+
if (window.feather) feather.replace();
|
| 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 & 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>
|
style.css
CHANGED
|
@@ -94,17 +94,8 @@ h1, h2, h3, h4 {
|
|
| 94 |
box-shadow: 0 6px 12px rgba(0, 32, 96, 0.15);
|
| 95 |
}
|
| 96 |
|
| 97 |
-
/* YouTube modal transition */
|
| 98 |
-
#youtube-modal {
|
| 99 |
-
transition: opacity 0.3s ease;
|
| 100 |
-
}
|
| 101 |
-
#youtube-modal:not(.hidden) {
|
| 102 |
-
display: flex;
|
| 103 |
-
opacity: 1;
|
| 104 |
-
}
|
| 105 |
-
|
| 106 |
.btn-primary {
|
| 107 |
-
background: var(--vlc-navy);
|
| 108 |
color: white;
|
| 109 |
transition: background 0.2s ease;
|
| 110 |
}
|
|
|
|
| 94 |
box-shadow: 0 6px 12px rgba(0, 32, 96, 0.15);
|
| 95 |
}
|
| 96 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 97 |
.btn-primary {
|
| 98 |
+
background: var(--vlc-navy);
|
| 99 |
color: white;
|
| 100 |
transition: background 0.2s ease;
|
| 101 |
}
|