src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/honeycore_edge.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  2. {% include '@HoneybeeWeb/inc/_web_design_system.html.twig' %}
  4. {# ─── HONEYCORE EDGE+ — Energy & Site Intelligence (business-first) ─────────── #}
  5. <style>
  6. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  7. :root {
  8.     --n-cream:      #F7F5F0;
  9.     --n-cream-2:    #F0EDE5;
  10.     --n-cream-3:    #E8E3D9;
  11.     --n-white:      #FFFFFF;
  12.     --n-dark:       #1A1D2E;
  13.     --n-dark-2:     #252840;
  14.     --n-navy:       #1E3A6E;
  15.     --n-amber:      #C07D2A;
  16.     --n-amber-lt:   #D4954A;
  17.     --n-amber-dim:  rgba(192,125,42,.10);
  18.     --n-sage:       #3D6B52;
  19.     --n-sage-dim:   rgba(61,107,82,.09);
  20.     --n-slate:      #3D4F72;
  21.     --n-slate-dim:  rgba(61,79,114,.08);
  22.     --n-muted:      #6B6E7F;
  23.     --n-muted-2:    #9395A5;
  24.     --n-border:     rgba(26,29,46,.07);
  25.     --n-border-md:  rgba(26,29,46,.12);
  26.     --n-shadow-xs:  0 1px 4px rgba(26,29,46,.05);
  27.     --n-shadow-sm:  0 2px 12px rgba(26,29,46,.07);
  28.     --n-shadow-md:  0 8px 32px rgba(26,29,46,.09);
  29.     --n-shadow-lg:  0 20px 64px rgba(26,29,46,.10);
  30.     --n-radius-sm:  8px;
  31.     --n-radius:     12px;
  32.     --n-radius-lg:  20px;
  33.     --n-font:       'DM Sans', 'Poppins', system-ui, sans-serif;
  34. }
  36. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  37. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  38. a { text-decoration: none; }
  40. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  41. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  42. .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  43. .n-sec     { padding: 100px 0; }
  44. .n-sec-sm  { padding: 64px 0; }
  45. .n-label   {
  46.     display: inline-flex; align-items: center; gap: 8px;
  47.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  48.     color: var(--n-amber); margin-bottom: 16px;
  49. }
  50. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  51. .n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  52. .n-h3      { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
  53. .n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  54. .n-body-sm { font-size: 14px; line-height: 1.7;  color: var(--n-muted); }
  55. .n-center  { text-align: center; }
  56. .n-center .n-label { justify-content: center; }
  57. .n-center .n-body  { max-width: 600px; margin: 0 auto; }
  58. .n-mt-4    { margin-top: 16px; }
  59. .n-mt-6    { margin-top: 24px; }
  60. .n-mt-8    { margin-top: 32px; }
  61. .n-mt-12   { margin-top: 48px; }
  62. em.n-em    { font-style: normal; color: var(--n-amber); }
  64. /* ── Buttons ────────────────────────────────────────────────────────────────── */
  65. .n-btn {
  66.     display: inline-flex; align-items: center; gap: 8px;
  67.     padding: 13px 26px; border-radius: var(--n-radius-sm);
  68.     font-size: 14px; font-weight: 600; letter-spacing: .01em;
  69.     border: none; cursor: pointer; text-decoration: none; transition: all .18s;
  70.     white-space: nowrap; font-family: var(--n-font);
  71. }
  72. .n-btn-primary { background: var(--n-dark);  color: #fff; }
  73. .n-btn-primary:hover  { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
  74. .n-btn-amber   { background: var(--n-amber); color: #fff; }
  75. .n-btn-amber:hover    { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,125,42,.3); }
  76. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  77. .n-btn-outline:hover  { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
  78. .n-btn-ghost-light    { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  79. .n-btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }
  80. .n-btn-light   { background: #fff; color: var(--n-dark); }
  81. .n-btn-light:hover    { background: var(--n-cream-2); color: var(--n-dark); }
  82. .n-btn i, .n-btn .fa  { font-size: 15px; }
  84. /* ── Navbar overrides ───────────────────────────────────────────────────────── */
  85. .navbar {
  86.     background: rgba(247,245,240,.96) !important;
  87.     backdrop-filter: blur(16px) saturate(180%);
  88.     border-bottom: 1px solid var(--n-border) !important;
  89.     box-shadow: none !important;
  90. }
  91. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; transition: opacity .15s; }
  92. .navbar .nav-link:hover,
  93. .navbar .nav-link.active { opacity: 1; color: var(--n-dark) !important; }
  94. .navbar .login-btn {
  95.     background: var(--n-dark) !important; color: #fff !important;
  96.     border: none !important; border-radius: var(--n-radius-sm) !important;
  97.     padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important;
  98. }
  99. .navbar .login-btn:hover { background: var(--n-dark-2) !important; }
  101. /* ── HERO ───────────────────────────────────────────────────────────────────── */
  102. .n-hero {
  103.     background: var(--n-cream);
  104.     padding: 130px 0 84px;
  105.     position: relative; overflow: hidden;
  106. }
  107. .n-hero::before {
  108.     content: '';
  109.     position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  110.     background: radial-gradient(ellipse 80% 70% at 80% 30%, rgba(192,125,42,.08) 0%, transparent 65%),
  111.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  112.     pointer-events: none;
  113. }
  114. .n-hero::after {
  115.     content: '';
  116.     position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  117.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  118. }
  119. .n-hero-inner { position: relative; max-width: 760px; }
  120. .n-hero-tag {
  121.     display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  122.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  123.     color: var(--n-amber); font-size: 11px; font-weight: 700;
  124.     letter-spacing: .16em; text-transform: uppercase;
  125.     padding: 6px 14px 6px 10px; border-radius: 4px; margin-bottom: 26px;
  126. }
  127. .n-hero-tag span:first-child { width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%; display: block; flex-shrink: 0; }
  128. .n-hero-h1 {
  129.     font-family: 'Montserrat', sans-serif;
  130.     font-size: clamp(36px, 5vw, 60px);
  131.     font-weight: 900; line-height: 1.06; letter-spacing: -.025em;
  132.     color: var(--n-dark); margin-bottom: 24px;
  133. }
  134. .n-hero-h1 em { font-style: normal; color: var(--n-amber); }
  135. .n-hero-desc {
  136.     font-size: 17px; line-height: 1.75; color: var(--n-muted);
  137.     max-width: 620px; margin-bottom: 32px;
  138. }
  139. .n-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  141. /* ── Pain / outcome split ───────────────────────────────────────────────────── */
  142. .n-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
  143. .n-split-card {
  144.     background: var(--n-white); border: 1px solid var(--n-border);
  145.     border-radius: var(--n-radius); padding: 36px;
  146. }
  147. .n-split-card.pain { border-left: 3px solid var(--n-amber); }
  148. .n-split-card.outcome { border-left: 3px solid var(--n-sage); }
  149. .n-split-card .n-split-tag {
  150.     font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  151.     font-family: monospace; margin-bottom: 12px; display: block;
  152. }
  153. .n-split-card.pain .n-split-tag { color: var(--n-amber); }
  154. .n-split-card.outcome .n-split-tag { color: var(--n-sage); }
  155. .n-split-card h3 { font-family:'Montserrat',sans-serif; font-size: 19px; font-weight: 800; color: var(--n-dark); margin-bottom: 12px; }
  156. .n-split-card p  { font-size: 15px; color: var(--n-muted); line-height: 1.75; }
  158. /* ── Design path band ───────────────────────────────────────────────────────── */
  159. .n-band { background: var(--n-white); border-top: 1px solid var(--n-border); border-bottom: 1px solid var(--n-border); }
  160. .n-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
  161. .n-design-chip {
  162.     font-size: 13px; color: var(--n-dark); padding: 12px 16px;
  163.     background: var(--n-cream); border: 1px solid var(--n-border-md);
  164.     border-radius: var(--n-radius-sm); display: flex; align-items: flex-start; gap: 10px;
  165. }
  166. .n-design-chip::before { content: '→'; color: var(--n-amber); font-family: monospace; flex-shrink: 0; margin-top: 1px; }
  168. /* ── Two-list (does / connects) ─────────────────────────────────────────────── */
  169. .n-twolist { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
  170. .n-list-card { background: var(--n-white); border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 32px; }
  171. .n-list-card h3 { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; color: var(--n-dark); margin-bottom: 6px; }
  172. .n-list-card .n-list-sub { font-size: 13px; color: var(--n-muted); margin-bottom: 20px; }
  173. .n-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
  174. .n-chips li {
  175.     font-size: 12px; color: var(--n-muted); padding: 5px 11px;
  176.     background: var(--n-cream); border: 1px solid var(--n-border-md);
  177.     border-radius: 4px; font-family: monospace;
  178. }
  180. /* ── Capabilities grid ──────────────────────────────────────────────────────── */
  181. .n-cap-grid {
  182.     display: grid; grid-template-columns: repeat(3, 1fr);
  183.     gap: 1px; background: var(--n-border-md);
  184.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  185.     margin-top: 48px;
  186. }
  187. .n-cap-card { background: var(--n-white); padding: 22px 24px; transition: background .2s; }
  188. .n-cap-card:hover { background: var(--n-cream); }
  189. .n-cap-card h4 { font-family:'Montserrat',sans-serif; font-size: 14px; font-weight: 700; color: var(--n-dark); display: flex; align-items: center; gap: 9px; }
  190. .n-cap-card h4::before { content: ''; width: 7px; height: 7px; background: var(--n-sage); border-radius: 50%; flex-shrink: 0; }
  192. /* ── Integration (technical, later) ─────────────────────────────────────────── */
  193. .n-integ { background: var(--n-dark); position: relative; overflow: hidden; }
  194. .n-integ::before {
  195.     content: ''; position: absolute; top: -40%; right: -5%; width: 60%; height: 150%;
  196.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%);
  197.     pointer-events: none;
  198. }
  199. .n-integ .n-label { color: var(--n-amber); }
  200. .n-integ .n-label::before { background: var(--n-amber); }
  201. .n-integ-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,40px); font-weight: 900; color: #fff; line-height: 1.12; letter-spacing: -.02em; }
  202. .n-integ-lead { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.6); max-width: 560px; margin-top: 14px; }
  203. .n-integ-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
  204. .n-integ-chips li {
  205.     font-size: 12.5px; color: rgba(255,255,255,.78); padding: 7px 14px;
  206.     background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  207.     border-radius: 5px; font-family: monospace;
  208. }
  210. /* ── Compliance ─────────────────────────────────────────────────────────────── */
  211. .n-comply-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  212. .n-comply-card { background: var(--n-white); border: 1px solid var(--n-border); border-radius: var(--n-radius); padding: 28px; text-align: center; }
  213. .n-comply-card .n-comply-icon {
  214.     width: 44px; height: 44px; border-radius: 10px; margin: 0 auto 16px;
  215.     background: var(--n-sage-dim); border: 1px solid rgba(61,107,82,.2);
  216.     display: flex; align-items: center; justify-content: center; color: var(--n-sage); font-size: 18px;
  217. }
  218. .n-comply-card h4 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  219. .n-comply-card p { font-size: 13px; color: var(--n-muted); line-height: 1.65; }
  220. .n-comply-note { text-align: center; font-size: 12.5px; color: var(--n-muted-2); margin-top: 28px; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.6; }
  222. /* ── Final CTA ──────────────────────────────────────────────────────────────── */
  223. .n-cta-final { background: var(--n-cream-2); padding: 110px 0; text-align: center; border-top: 1px solid var(--n-border); }
  224. .n-cta-final h2 { font-family:'Montserrat',sans-serif; font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: var(--n-dark); margin-bottom: 16px; }
  225. .n-cta-final h2 em { font-style: normal; color: var(--n-amber); }
  226. .n-cta-final p { max-width: 56ch; margin: 0 auto 32px; color: var(--n-muted); font-size: 16px; line-height: 1.7; }
  227. .n-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  228. .n-cta-link { display: inline-block; margin-top: 22px; font-size: 13.5px; font-weight: 600; color: var(--n-amber); }
  229. .n-cta-link:hover { color: var(--n-amber-lt); }
  230. .n-price-note { font-size: 12.5px; color: var(--n-muted-2); margin-top: 24px; font-family: monospace; }
  232. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  233. @media (max-width: 1040px) {
  234.     .n-split      { grid-template-columns: 1fr; }
  235.     .n-twolist    { grid-template-columns: 1fr; }
  236.     .n-design-grid{ grid-template-columns: 1fr; }
  237.     .n-cap-grid   { grid-template-columns: 1fr 1fr; }
  238.     .n-comply-grid{ grid-template-columns: 1fr; }
  239. }
  240. @media (max-width: 640px) {
  241.     .n-cap-grid   { grid-template-columns: 1fr; }
  242. }
  243. </style>
  245. {# ══ HERO ══════════════════════════════════════════════════════════════════════ #}
  246. <section class="n-hero">
  247.     <div class="n-wrap">
  248.         <div class="n-hero-inner">
  249.             <div class="n-hero-tag">
  250.                 <span></span>
  251.                 <span>HoneyCore Edge EMS · Energy &amp; Site Intelligence</span>
  252.             </div>
  253.             <h1 class="n-hero-h1">Connect site energy data with <em>business decisions.</em></h1>
  254.             <p class="n-hero-desc">
  255.                 HoneyCore Edge EMS links IoT, solar PV, grid, generators, batteries, meters, sensors, utilities,
  256.                 cold-chain, and industrial equipment with O&amp;M, billing, finance, alarms, reporting, and
  257.                 sustainability evidence.
  258.             </p>
  259.             <div class="n-hero-actions">
  260.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  261.                     Request HoneyCore Edge+ Site Assessment <i class="fa-solid fa-arrow-right"></i>
  262.                 </a>
  263.                 <a href="{{ url('honeybee_edge_projects') }}" class="n-btn n-btn-outline">
  264.                     HoneyCore Edge+ Projects
  265.                 </a>
  266.             </div>
  267.         </div>
  268.     </div>
  269. </section>
  271. {# ══ 1+2. BUSINESS PAIN → BUSINESS OUTCOME ════════════════════════════════════ #}
  272. <section class="n-sec">
  273.     <div class="n-wrap">
  274.         <div class="n-center">
  275.             <span class="n-label">From scattered dashboards to decisions</span>
  276.             <h2 class="n-h2">Site data is everywhere.<br><em class="n-em">The decisions are not.</em></h2>
  277.         </div>
  278.         <div class="n-split">
  279.             <div class="n-split-card pain">
  280.                 <span class="n-split-tag">The business pain</span>
  281.                 <h3>Separate dashboards, manual reporting</h3>
  282.                 <p>
  283.                     Energy and infrastructure sites often have separate dashboards for solar, generators, meters,
  284.                     sensors, alarms, O&amp;M, billing, and finance. This creates delays, manual reporting, and weak
  285.                     operational visibility.
  286.                 </p>
  287.             </div>
  288.             <div class="n-split-card outcome">
  289.                 <span class="n-split-tag">The business outcome</span>
  290.                 <h3>Site data becomes business decisions</h3>
  291.                 <p>
  292.                     HoneyCore Edge EMS turns site data into business decisions by connecting infrastructure data with
  293.                     O&amp;M, billing, finance, reporting, and management dashboards.
  294.                 </p>
  295.             </div>
  296.         </div>
  297.     </div>
  298. </section>
  300. {# ══ 3. DESIGN PATH ═══════════════════════════════════════════════════════════ #}
  301. <section class="n-sec n-band">
  302.     <div class="n-wrap">
  303.         <div class="n-center">
  304.             <span class="n-label">HoneyCore Edge+ design path</span>
  305.             <h2 class="n-h2">Structure the project <em class="n-em">before deployment.</em></h2>
  306.             <p class="n-body n-mt-6">
  307.                 Before deployment, HoneyBee can help structure the HoneyCore Edge+ project design — so the site is
  308.                 scoped, costed, and ready to commission.
  309.             </p>
  310.         </div>
  311.         <div class="n-design-grid">
  312.             <div class="n-design-chip">Site requirements</div>
  313.             <div class="n-design-chip">Data point mapping</div>
  314.             <div class="n-design-chip">Sensor and meter schedules</div>
  315.             <div class="n-design-chip">Gateway planning</div>
  316.             <div class="n-design-chip">Protocol mapping</div>
  317.             <div class="n-design-chip">Edge controller sizing</div>
  318.             <div class="n-design-chip">BoQ and quote</div>
  319.             <div class="n-design-chip">Commissioning checklist and O&amp;M handover</div>
  320.         </div>
  321.         <div class="n-center n-mt-12">
  322.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  323.                 Request HoneyCore Edge+ Design Assessment <i class="fa-solid fa-arrow-right"></i>
  324.             </a>
  325.         </div>
  326.     </div>
  327. </section>
  329. {# ══ 4. WHAT IT DOES / WHAT IT CONNECTS ═══════════════════════════════════════ #}
  330. <section class="n-sec">
  331.     <div class="n-wrap">
  332.         <div class="n-center">
  333.             <span class="n-label">What HoneyCore Edge EMS does</span>
  334.             <h2 class="n-h2">One layer between <em class="n-em">site and business.</em></h2>
  335.         </div>
  336.         <div class="n-twolist">
  337.             <div class="n-list-card">
  338.                 <h3>What it does</h3>
  339.                 <p class="n-list-sub">Edge intelligence that processes, translates, and aggregates site data.</p>
  340.                 <ul class="n-chips">
  341.                     <li>Edge processing</li>
  342.                     <li>Protocol translation</li>
  343.                     <li>Local control</li>
  344.                     <li>Data aggregation</li>
  345.                     <li>EMS</li>
  346.                     <li>SCADA</li>
  347.                     <li>Historian</li>
  348.                     <li>Local dashboard</li>
  349.                     <li>Cloud fleet sync</li>
  350.                     <li>Digital twin</li>
  351.                 </ul>
  352.             </div>
  353.             <div class="n-list-card">
  354.                 <h3>What it connects</h3>
  355.                 <p class="n-list-sub">Assets and sites across energy, utilities, cold-chain, and industry.</p>
  356.                 <ul class="n-chips">
  357.                     <li>Solar PV</li>
  358.                     <li>Hybrid energy</li>
  359.                     <li>Batteries</li>
  360.                     <li>Generators</li>
  361.                     <li>Grid</li>
  362.                     <li>Meters</li>
  363.                     <li>Sensors</li>
  364.                     <li>Pumps</li>
  365.                     <li>Boilers</li>
  366.                     <li>Compressors</li>
  367.                     <li>Cold-chain</li>
  368.                     <li>Freezers</li>
  369.                     <li>Agri-PV</li>
  370.                     <li>Industrial utilities</li>
  371.                     <li>Hotels</li>
  372.                     <li>Malls</li>
  373.                     <li>Industrial parks</li>
  374.                 </ul>
  375.             </div>
  376.         </div>
  377.     </div>
  378. </section>
  380. {# ══ 5. KEY CAPABILITIES (dashboard & O&M) ════════════════════════════════════ #}
  381. <section class="n-sec n-band">
  382.     <div class="n-wrap">
  383.         <div class="n-center">
  384.             <span class="n-label">Dashboard &amp; O&amp;M workflow</span>
  385.             <h2 class="n-h2">Key capabilities</h2>
  386.             <p class="n-body n-mt-6">
  387.                 Offline-first operation with local and cloud dashboards, decision-grade reporting, and an
  388.                 O&amp;M workflow that closes the loop from alarm to action.
  389.             </p>
  390.         </div>
  391.         <div class="n-cap-grid">
  392.             <div class="n-cap-card"><h4>Offline-first</h4></div>
  393.             <div class="n-cap-card"><h4>Local &amp; cloud dashboards</h4></div>
  394.             <div class="n-cap-card"><h4>Constraint-aware dispatch</h4></div>
  395.             <div class="n-cap-card"><h4>PV curtailment</h4></div>
  396.             <div class="n-cap-card"><h4>Genset minimum-load protection</h4></div>
  397.             <div class="n-cap-card"><h4>IEC 61724 KPI support</h4></div>
  398.             <div class="n-cap-card"><h4>Curtailment / revenue-loss reporting</h4></div>
  399.             <div class="n-cap-card"><h4>Meter reconciliation</h4></div>
  400.             <div class="n-cap-card"><h4>Alarm lifecycle</h4></div>
  401.             <div class="n-cap-card"><h4>Decision logs</h4></div>
  402.             <div class="n-cap-card"><h4>Anomaly detection</h4></div>
  403.             <div class="n-cap-card"><h4>Root-cause analysis</h4></div>
  404.             <div class="n-cap-card"><h4>Predictive maintenance</h4></div>
  405.             <div class="n-cap-card"><h4>Solar forecast</h4></div>
  406.             <div class="n-cap-card"><h4>Digital twin sync</h4></div>
  407.         </div>
  408.     </div>
  409. </section>
  411. {# ══ 6. INTEGRATION (technical — placed later) ════════════════════════════════ #}
  412. <section class="n-sec n-integ">
  413.     <div class="n-wrap">
  414.         <span class="n-label">Integration &amp; protocols</span>
  415.         <h2 class="n-integ-h2">Speaks the protocols your<br>site already runs on.</h2>
  416.         <p class="n-integ-lead">
  417.             HoneyCore Edge EMS connects to industrial and energy systems through standard field and IT protocols,
  418.             with secure transport and role-based access — so business teams get clean data without ripping out
  419.             existing equipment.
  420.         </p>
  421.         <ul class="n-integ-chips">
  422.             <li>Modbus TCP/RTU</li>
  423.             <li>IEC 60870-5-104</li>
  424.             <li>Siemens S7</li>
  425.             <li>SunSpec</li>
  426.             <li>LoRaWAN</li>
  427.             <li>MQTT</li>
  428.             <li>REST</li>
  429.             <li>Webhooks</li>
  430.             <li>OpenAPI</li>
  431.             <li>TLS</li>
  432.             <li>RBAC</li>
  433.             <li>MFA</li>
  434.             <li>Local retention</li>
  435.         </ul>
  436.     </div>
  437. </section>
  439. {# ══ 7. COMPLIANCE & SECURITY ═════════════════════════════════════════════════ #}
  440. <section class="n-sec">
  441.     <div class="n-wrap">
  442.         <div class="n-center">
  443.             <span class="n-label">Compliance &amp; governance support</span>
  444.             <h2 class="n-h2">Built to support your <em class="n-em">evidence and governance.</em></h2>
  445.         </div>
  446.         <div class="n-comply-grid">
  447.             <div class="n-comply-card">
  448.                 <div class="n-comply-icon"><i class="fa-solid fa-solar-panel"></i></div>
  449.                 <h4>IEC 61724 KPI support</h4>
  450.                 <p>Performance KPIs aligned to IEC 61724 reporting, where applicable to your site.</p>
  451.             </div>
  452.             <div class="n-comply-card">
  453.                 <div class="n-comply-icon"><i class="fa-solid fa-shield-halved"></i></div>
  454.                 <h4>NIS2-aware governance support</h4>
  455.                 <p>Governance support designed to be NIS2-aware, where applicable to your operations.</p>
  456.             </div>
  457.             <div class="n-comply-card">
  458.                 <div class="n-comply-icon"><i class="fa-solid fa-lock"></i></div>
  459.                 <h4>GDPR-aligned data handling</h4>
  460.                 <p>Data handling aligned to GDPR principles across local and cloud deployments.</p>
  461.             </div>
  462.         </div>
  463.         <p class="n-comply-note">
  464.             IEC 61724 KPI support where applicable · NIS2-aware governance support where applicable ·
  465.             GDPR-aligned data handling. These describe support and roadmap capabilities and are not certifications.
  466.         </p>
  467.     </div>
  468. </section>
  470. {# ══ 8. FINAL CTA ═════════════════════════════════════════════════════════════ #}
  471. <section class="n-cta-final">
  472.     <div class="n-wrap-sm">
  473.         <h2>Turn your site into a <em>business decision engine.</em></h2>
  474.         <p>
  475.             Start with a site assessment or a design assessment — and connect your energy and infrastructure data
  476.             to O&amp;M, billing, finance, and reporting.
  477.         </p>
  478.         <div class="n-cta-actions">
  479.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  480.                 Request HoneyCore Edge+ Site Assessment <i class="fa-solid fa-arrow-right"></i>
  481.             </a>
  482.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline">
  483.                 Request HoneyCore Edge+ Design Assessment
  484.             </a>
  485.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline">
  486.                 Download HoneyCore Edge EMS Datasheet
  487.             </a>
  488.         </div>
  489.         <div>
  490.             <a href="{{ url('honeybee_edge_projects') }}" class="n-cta-link">
  491.                 Explore HoneyCore Edge+ Projects <i class="fa-solid fa-arrow-right"></i>
  492.             </a>
  493.         </div>
  494.         <p class="n-price-note">HoneyCore Edge+ from €2,999 / site · final pricing depends on site scope.</p>
  495.     </div>
  496. </section>
  498. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}