src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/honeycore_edge_projects.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+ PROJECTS — design → quote → deploy → O&M ──────────────── #}
  5. <style>
  6. /* Page-scoped helpers — grids & workflow strips only; everything else reuses n-* */
  7. .ep-hero { background: var(--n-cream); padding: 130px 0 80px; position: relative; overflow: hidden; }
  8. .ep-hero::before {
  9.     content: ''; position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  10.     background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(192,125,42,.07) 0%, transparent 65%),
  11.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  12.     pointer-events: none;
  13. }
  14. .ep-hero::after {
  15.     content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  16.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  17. }
  18. .ep-hero-inner { max-width: 820px; position: relative; }
  20. /* Card lists (who-for / outputs) */
  21. .ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--n-border-md);
  22.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden; margin-top: 48px; }
  23. .ep-grid-item { background: var(--n-white); padding: 20px 24px; font-size: 14px; color: var(--n-dark);
  24.     display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; transition: background .2s; }
  25. .ep-grid-item:hover { background: var(--n-cream); }
  26. .ep-grid-item::before { content: ''; width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%;
  27.     margin-top: 7px; flex-shrink: 0; }
  29. /* Problem list (two columns, sage marks) */
  30. .ep-prob { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 40px; list-style: none; }
  31. .ep-prob li { font-size: 14.5px; color: var(--n-muted); display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
  32. .ep-prob li::before { content: '✕'; color: var(--n-amber); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
  34. /* Workflow strip */
  35. .ep-flow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
  36. .ep-flow-step {
  37.     display: inline-flex; align-items: center; gap: 10px;
  38.     background: var(--n-white); border: 1px solid var(--n-border-md);
  39.     border-radius: 100px; padding: 9px 18px 9px 10px;
  40.     font-size: 13.5px; font-weight: 600; color: var(--n-dark);
  41. }
  42. .ep-flow-num {
  43.     width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  44.     background: var(--n-amber-dim); color: var(--n-amber);
  45.     font-family: monospace; font-size: 11px; font-weight: 700;
  46.     display: flex; align-items: center; justify-content: center;
  47. }
  48. .ep-flow-arrow { color: var(--n-muted-2); align-self: center; font-size: 13px; }
  50. /* Quote-output cards */
  51. .ep-quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
  52. .ep-quote-card { background: var(--n-white); border: 1px solid var(--n-border); border-radius: var(--n-radius);
  53.     padding: 24px 28px; transition: box-shadow .2s, border-color .2s; }
  54. .ep-quote-card:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  55. .ep-quote-card h3 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--n-dark); margin-bottom: 6px; }
  56. .ep-quote-card p { font-size: 13.5px; color: var(--n-muted); line-height: 1.6; margin: 0; }
  58. /* Connection band (dark) */
  59. .ep-connect { background: var(--n-dark); padding: 90px 0; position: relative; overflow: hidden; }
  60. .ep-connect::before {
  61.     content: ''; position: absolute; top: -40%; right: -5%; width: 60%; height: 150%;
  62.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%); pointer-events: none;
  63. }
  64. .ep-connect .n-label { color: var(--n-amber); }
  65. .ep-connect .n-label::before { background: var(--n-amber); }
  66. .ep-connect h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,40px); font-weight: 900; color: #fff;
  67.     line-height: 1.12; letter-spacing: -.02em; margin-bottom: 16px; max-width: 720px; }
  68. .ep-connect h2 em { font-style: normal; color: var(--n-amber); }
  69. .ep-connect p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.6); max-width: 640px; }
  70. .ep-connect-chain { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
  71. .ep-chain-node {
  72.     background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--n-radius-sm);
  73.     padding: 14px 20px; font-size: 13.5px; font-weight: 600; color: #fff;
  74. }
  75. .ep-chain-node small { display: block; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.45); margin-top: 3px; font-family: monospace; }
  76. .ep-chain-sep { color: var(--n-amber); align-self: center; font-size: 16px; }
  78. /* Partner band */
  79. .ep-partner { background: var(--n-cream-2); border-top: 1px solid var(--n-border); }
  80. .ep-partner-card {
  81.     background: var(--n-white); border: 1px solid var(--n-border-md); border-left: 3px solid var(--n-amber);
  82.     border-radius: var(--n-radius); padding: 36px 40px; margin-top: 40px;
  83. }
  84. .ep-partner-card p { font-size: 17px; line-height: 1.7; color: var(--n-dark); margin: 0; }
  86. /* Pricing callout chips */
  87. .ep-pricechips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  88. .ep-pricechip {
  89.     display: inline-flex; flex-direction: column; gap: 2px;
  90.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.25);
  91.     border-radius: var(--n-radius-sm); padding: 14px 20px;
  92. }
  93. .ep-pricechip .amt { font-family:'Montserrat',sans-serif; font-size: 20px; font-weight: 900; color: var(--n-amber); line-height: 1; }
  94. .ep-pricechip .lbl { font-size: 12px; color: var(--n-muted); font-family: monospace; }
  96. /* Final CTA buttons row */
  97. .ep-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
  99. @media (max-width: 1040px) {
  100.     .ep-grid { grid-template-columns: 1fr 1fr; }
  101.     .ep-quote-grid { grid-template-columns: 1fr; }
  102. }
  103. @media (max-width: 720px) {
  104.     .ep-grid { grid-template-columns: 1fr; }
  105.     .ep-prob { grid-template-columns: 1fr; }
  106. }
  107. </style>
  109. {# ══ HERO ════════════════════════════════════════════════════════════════════ #}
  110. <section class="ep-hero">
  111.     <div class="n-wrap">
  112.         <div class="ep-hero-inner">
  113.             <div class="n-hero-tag">
  114.                 <span></span>
  115.                 <span>HoneyCore Edge+ Projects</span>
  116.             </div>
  117.             <h1 class="n-h1">Design, quote, deploy, and maintain <em class="n-em">HoneyCore Edge+</em> infrastructure projects.</h1>
  118.             <p class="n-body n-mt-6" style="max-width:680px">
  119.                 HoneyBee helps project teams turn site requirements into HoneyCore Edge+ architecture, sensor and meter selection, Edge controller sizing, BoQ, quotation, procurement plan, commissioning checklist, and O&amp;M workflow.
  120.             </p>
  121.             <div class="n-hero-actions n-mt-8">
  122.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  123.                     Request HoneyCore Edge+ Design Assessment <i class="fa-solid fa-arrow-right"></i>
  124.                 </a>
  125.                 <a href="{{ url('honeybee_edge') }}" class="n-btn n-btn-outline">
  126.                     Explore HoneyCore Edge EMS
  127.                 </a>
  128.             </div>
  129.         </div>
  130.     </div>
  131. </section>
  133. {# ══ 1. WHO IT IS FOR ════════════════════════════════════════════════════════ #}
  134. <section class="n-sec">
  135.     <div class="n-wrap">
  136.         <div class="n-label">Who it is for</div>
  137.         <h2 class="n-h2" style="max-width:680px">Built for the teams that design and deliver infrastructure.</h2>
  138.         <div class="ep-grid">
  139.             <div class="ep-grid-item">EPC companies</div>
  140.             <div class="ep-grid-item">System integrators</div>
  141.             <div class="ep-grid-item">Energy service companies</div>
  142.             <div class="ep-grid-item">Industrial automation companies</div>
  143.             <div class="ep-grid-item">Solar / hybrid energy companies</div>
  144.             <div class="ep-grid-item">O&amp;M companies</div>
  145.             <div class="ep-grid-item">Agri-PV and irrigation companies</div>
  146.             <div class="ep-grid-item">Cold-chain and utility operators</div>
  147.             <div class="ep-grid-item">Certified HoneyBee partners</div>
  148.         </div>
  149.     </div>
  150. </section>
  152. {# ══ 2. WHAT PROBLEMS IT SOLVES ══════════════════════════════════════════════ #}
  153. <section class="n-sec-sm" style="background:var(--n-white);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border)">
  154.     <div class="n-wrap">
  155.         <div class="n-label">What problems it solves</div>
  156.         <h2 class="n-h2" style="max-width:680px">HoneyCore Edge+ projects are usually quoted by hand — and it shows.</h2>
  157.         <ul class="ep-prob">
  158.             <li>HoneyCore Edge+ projects are quoted manually</li>
  159.             <li>Sensors and meters selected inconsistently</li>
  160.             <li>BoQ not standardized</li>
  161.             <li>Protocols not mapped early</li>
  162.             <li>Edge hardware under- or over-sized</li>
  163.             <li>Installation &amp; commissioning disconnected from quotation</li>
  164.             <li>Weak O&amp;M handover</li>
  165.             <li>Monitoring subscription not connected to billing</li>
  166.         </ul>
  167.     </div>
  168. </section>
  170. {# ══ 3. FULL WORKFLOW ════════════════════════════════════════════════════════ #}
  171. <section class="n-sec">
  172.     <div class="n-wrap">
  173.         <div class="n-label">Full workflow</div>
  174.         <h2 class="n-h2" style="max-width:680px">One continuous flow — site requirements to live monitoring.</h2>
  175.         <div class="ep-flow">
  176.             <span class="ep-flow-step"><span class="ep-flow-num">1</span>Site assessment</span>
  177.             <span class="ep-flow-arrow">→</span>
  178.             <span class="ep-flow-step"><span class="ep-flow-num">2</span>Data point mapping</span>
  179.             <span class="ep-flow-arrow">→</span>
  180.             <span class="ep-flow-step"><span class="ep-flow-num">3</span>Device selection</span>
  181.             <span class="ep-flow-arrow">→</span>
  182.             <span class="ep-flow-step"><span class="ep-flow-num">4</span>HoneyCore Edge+ sizing</span>
  183.             <span class="ep-flow-arrow">→</span>
  184.             <span class="ep-flow-step"><span class="ep-flow-num">5</span>Protocol mapping</span>
  185.             <span class="ep-flow-arrow">→</span>
  186.             <span class="ep-flow-step"><span class="ep-flow-num">6</span>Network topology</span>
  187.             <span class="ep-flow-arrow">→</span>
  188.             <span class="ep-flow-step"><span class="ep-flow-num">7</span>BoQ</span>
  189.             <span class="ep-flow-arrow">→</span>
  190.             <span class="ep-flow-step"><span class="ep-flow-num">8</span>Costing</span>
  191.             <span class="ep-flow-arrow">→</span>
  192.             <span class="ep-flow-step"><span class="ep-flow-num">9</span>Proposal</span>
  193.             <span class="ep-flow-arrow">→</span>
  194.             <span class="ep-flow-step"><span class="ep-flow-num">10</span>Procurement</span>
  195.             <span class="ep-flow-arrow">→</span>
  196.             <span class="ep-flow-step"><span class="ep-flow-num">11</span>Installation</span>
  197.             <span class="ep-flow-arrow">→</span>
  198.             <span class="ep-flow-step"><span class="ep-flow-num">12</span>Commissioning</span>
  199.             <span class="ep-flow-arrow">→</span>
  200.             <span class="ep-flow-step"><span class="ep-flow-num">13</span>O&amp;M</span>
  201.             <span class="ep-flow-arrow">→</span>
  202.             <span class="ep-flow-step"><span class="ep-flow-num">14</span>Monitoring subscription</span>
  203.         </div>
  204.     </div>
  205. </section>
  207. {# ══ 4. DESIGN OUTPUTS ═══════════════════════════════════════════════════════ #}
  208. <section class="n-sec-sm" style="background:var(--n-white);border-top:1px solid var(--n-border)">
  209.     <div class="n-wrap">
  210.         <div class="n-label">Design outputs</div>
  211.         <h2 class="n-h2" style="max-width:680px">Every project produces a complete, standardized design package.</h2>
  212.         <div class="ep-grid">
  213.             <div class="ep-grid-item">HoneyCore Edge+ architecture</div>
  214.             <div class="ep-grid-item">Device list</div>
  215.             <div class="ep-grid-item">Meter &amp; sensor schedule</div>
  216.             <div class="ep-grid-item">Gateway list</div>
  217.             <div class="ep-grid-item">Communication diagram</div>
  218.             <div class="ep-grid-item">Data point register</div>
  219.             <div class="ep-grid-item">Protocol map</div>
  220.             <div class="ep-grid-item">Edge controller specification</div>
  221.             <div class="ep-grid-item">Dashboard scope</div>
  222.             <div class="ep-grid-item">BoQ</div>
  223.             <div class="ep-grid-item">Quotation</div>
  224.             <div class="ep-grid-item">Installation plan</div>
  225.             <div class="ep-grid-item">Commissioning checklist</div>
  226.             <div class="ep-grid-item">O&amp;M handover</div>
  227.             <div class="ep-grid-item">Monitoring subscription plan</div>
  228.         </div>
  229.     </div>
  230. </section>
  232. {# ══ 5. QUOTE OUTPUTS ════════════════════════════════════════════════════════ #}
  233. <section class="n-sec">
  234.     <div class="n-wrap">
  235.         <div class="n-label">Quote outputs</div>
  236.         <h2 class="n-h2" style="max-width:680px">From design straight to a complete, costed proposal.</h2>
  237.         <div class="ep-quote-grid">
  238.             <div class="ep-quote-card"><h3>Client proposal</h3><p>A ready-to-send proposal generated from the design package.</p></div>
  239.             <div class="ep-quote-card"><h3>BoQ</h3><p>Standardized bill of quantities for the full HoneyCore Edge+ scope.</p></div>
  240.             <div class="ep-quote-card"><h3>BoM</h3><p>Bill of materials covering every device, meter, and gateway.</p></div>
  241.             <div class="ep-quote-card"><h3>Hardware cost</h3><p>Edge controllers, sensors, meters, and network hardware.</p></div>
  242.             <div class="ep-quote-card"><h3>Software subscription</h3><p>HoneyCore Edge EMS software and dashboard subscription.</p></div>
  243.             <div class="ep-quote-card"><h3>Deployment cost</h3><p>Configuration, integration, and go-live effort.</p></div>
  244.             <div class="ep-quote-card"><h3>Installation cost</h3><p>On-site installation and wiring labour.</p></div>
  245.             <div class="ep-quote-card"><h3>Training cost</h3><p>Operator and team enablement for the deployed system.</p></div>
  246.             <div class="ep-quote-card"><h3>Support cost</h3><p>Ongoing technical support for the live deployment.</p></div>
  247.             <div class="ep-quote-card"><h3>Recurring monitoring cost</h3><p>Recurring monitoring subscription tied to billing.</p></div>
  248.         </div>
  249.     </div>
  250. </section>
  252. {# ══ 6. HONEYBEE + HONEYCORE EDGE+ CONNECTION ════════════════════════════════ #}
  253. <section class="ep-connect">
  254.     <div class="n-wrap">
  255.         <div class="n-label">HoneyBee + HoneyCore Edge+</div>
  256.         <h2>The design &amp; quotation workflow connects directly to <em>deployment and recurring monitoring</em>.</h2>
  257.         <p>
  258.             The same site, device, and data-point definitions flow from quote to live monitoring and billing — so nothing is re-entered between selling the project and running it.
  259.         </p>
  260.         <div class="ep-connect-chain">
  261.             <div class="ep-chain-node">Design &amp; quote<small>site · device · data points</small></div>
  262.             <span class="ep-chain-sep">→</span>
  263.             <div class="ep-chain-node">HoneyCore Edge+ deployment<small>same definitions reused</small></div>
  264.             <span class="ep-chain-sep">→</span>
  265.             <div class="ep-chain-node">Live monitoring<small>dashboards · alarms</small></div>
  266.             <span class="ep-chain-sep">→</span>
  267.             <div class="ep-chain-node">Recurring billing<small>monitoring subscription</small></div>
  268.         </div>
  269.     </div>
  270. </section>
  272. {# ══ 7. PARTNER EXECUTION MODEL ══════════════════════════════════════════════ #}
  273. <section class="n-sec ep-partner">
  274.     <div class="n-wrap">
  275.         <div class="n-label">Partner execution model</div>
  276.         <h2 class="n-h2" style="max-width:680px">Software workflow from HoneyBee. Physical execution by the right team.</h2>
  277.         <div class="ep-partner-card">
  278.             <p>
  279.                 HoneyBee provides the software workflow and project intelligence. Physical installation may be performed by the customer, EPC contractor, system integrator, or certified HoneyBee partner.
  280.             </p>
  281.         </div>
  282.         <div class="ep-pricechips">
  283.             <div class="ep-pricechip"><span class="amt">From €499 / site</span><span class="lbl">design assessment · credited</span></div>
  284.             <div class="ep-pricechip"><span class="amt">From €2,999 / site</span><span class="lbl">deployment</span></div>
  285.         </div>
  286.     </div>
  287. </section>
  289. {# ══ 8. FINAL CTA ════════════════════════════════════════════════════════════ #}
  290. <section class="n-cta-final" id="start">
  291.     <div class="n-wrap">
  292.         <h2>Start your <em>HoneyCore Edge+</em> project.</h2>
  293.         <p>Begin with a design assessment, pick up a quote template, or join the deployment network — whichever fits where you are today.</p>
  294.         <div class="ep-cta-actions">
  295.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  296.                 Request HoneyCore Edge+ Design Assessment <i class="fa-solid fa-arrow-right"></i>
  297.             </a>
  298.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  299.                 Get HoneyCore Edge+ Quote Template
  300.             </a>
  301.             <a href="{{ url('honeybee_partners') }}" class="n-btn n-btn-outline">
  302.                 Become a HoneyCore Edge+ Deployment Partner
  303.             </a>
  304.         </div>
  305.         <p class="n-cta-note" style="margin-top:18px">Design assessment from €499 / site (credited toward deployment) · deployment from €2,999 / site.</p>
  306.     </div>
  307. </section>
  309. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}