src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/project_erp.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. {# ─── PROJECT ERP — Strongest buyer path (EPC / engineering / energy / construction) ─── #}
  5. <style>
  6. /* Page-scoped layout only — colours/typography reuse the shared n-* tokens from the design system */
  7. .pe-hero { background: var(--n-cream); padding: 130px 0 80px; position: relative; overflow: hidden; }
  8. .pe-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. .pe-hero-inner { max-width: 760px; position: relative; }
  15. .pe-guardrail {
  16.     margin-top: 22px; font-size: 13px; color: var(--n-muted-2);
  17.     display: inline-flex; align-items: flex-start; gap: 8px;
  18. }
  19. .pe-guardrail i { color: var(--n-sage); margin-top: 3px; }
  21. /* Problem / promise band */
  22. .pe-promise {
  23.     margin-top: 40px; padding: 32px 36px;
  24.     background: var(--n-dark); border-radius: var(--n-radius-lg); box-shadow: var(--n-shadow-md);
  25. }
  26. .pe-promise .n-label { color: var(--n-amber); }
  27. .pe-promise .n-label::before { background: var(--n-amber); }
  28. .pe-promise h2 {
  29.     font-family:'Montserrat',sans-serif; font-size: clamp(24px,3vw,38px); font-weight: 900;
  30.     color:#fff; line-height: 1.1; letter-spacing: -.02em;
  31. }
  32. .pe-promise h2 em { font-style: normal; color: var(--n-amber); }
  34. /* Workflow strip */
  35. .pe-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
  36. .pe-flow-step {
  37.     display: inline-flex; align-items: center; gap: 8px;
  38.     padding: 10px 16px; background: var(--n-white);
  39.     border: 1px solid var(--n-border-md); border-radius: 100px;
  40.     font-size: 13px; font-weight: 600; color: var(--n-dark);
  41. }
  42. .pe-flow-step .pe-num {
  43.     width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  44.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.3);
  45.     color: var(--n-amber); font-size: 11.5px; font-weight: 800; font-family: monospace;
  46.     display: flex; align-items: center; justify-content: center;
  47. }
  48. .pe-flow-arrow { color: var(--n-muted-2); align-self: center; font-size: 12px; }
  50. /* HoneyCore 4.0 quotation block */
  51. .pe-edge {
  52.     display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  53.     background: var(--n-white); border: 1px solid var(--n-border-md);
  54.     border-radius: var(--n-radius-lg); padding: 48px; margin-top: 48px; box-shadow: var(--n-shadow-sm);
  55. }
  56. .pe-edge-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  57. .pe-edge-chips li {
  58.     font-size: 12px; color: var(--n-muted); font-family: monospace;
  59.     padding: 6px 12px; background: var(--n-cream);
  60.     border: 1px solid var(--n-border-md); border-radius: 6px;
  61. }
  63. /* Feature cards */
  64. .pe-feat-grid {
  65.     display: grid; grid-template-columns: repeat(3, 1fr);
  66.     gap: 1px; background: var(--n-border-md);
  67.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  68.     margin-top: 48px;
  69. }
  70. .pe-feat { background: var(--n-white); padding: 26px; transition: background .2s; }
  71. .pe-feat:hover { background: var(--n-cream); }
  72. .pe-feat-icon {
  73.     width: 38px; height: 38px; border-radius: 9px; margin-bottom: 14px;
  74.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  75.     display: flex; align-items: center; justify-content: center;
  76.     color: var(--n-amber); font-size: 15px;
  77. }
  78. .pe-feat h3 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  79. .pe-feat p  { font-size: 13px; line-height: 1.6; color: var(--n-muted); }
  81. /* Closing CTA band */
  82. .pe-cta {
  83.     background: var(--n-cream-2); padding: 100px 0; text-align: center;
  84.     border-top: 1px solid var(--n-border);
  85. }
  86. .pe-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: var(--n-dark); margin-bottom: 16px; }
  87. .pe-cta h2 em { font-style: normal; color: var(--n-amber); }
  88. .pe-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  90. @media (max-width: 1040px) {
  91.     .pe-edge { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  92.     .pe-feat-grid { grid-template-columns: 1fr 1fr; }
  93. }
  94. @media (max-width: 720px) {
  95.     .pe-feat-grid { grid-template-columns: 1fr; }
  96.     .pe-flow-arrow { display: none; }
  97. }
  98. </style>
  100. {# ══ 1. HERO ══════════════════════════════════════════════════════════════════ #}
  101. <section class="pe-hero">
  102.     <div class="n-wrap">
  103.         <div class="pe-hero-inner">
  104.             <span class="n-label">Project ERP · Strongest path</span>
  105.             <h1 class="n-hero-h1">
  106.                 Project-first ERP for EPC, engineering, energy, <em>HoneyCore 4.0</em>, and construction companies.
  107.             </h1>
  108.             <p class="n-hero-desc" style="max-width:640px">
  109.                 Control every project from lead and quotation to procurement, inventory, site execution,
  110.                 milestone billing, retention, O&amp;M, HoneyCore 4.0 design, and final profitability.
  111.             </p>
  112.             <div class="n-hero-actions">
  113.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  114.                     Request Project Workflow Audit <i class="fa-solid fa-arrow-right"></i>
  115.                 </a>
  116.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline">
  117.                     Request HoneyCore 4.0 Design Assessment
  118.                 </a>
  119.             </div>
  120.             <div class="pe-guardrail">
  121.                 <i class="fa-solid fa-circle-info"></i>
  122.                 <span>HoneyBee is the operating system for your projects — not an EPC contractor or project developer.</span>
  123.             </div>
  124.         </div>
  125.     </div>
  126. </section>
  128. {# ══ 2. PROBLEM → PROMISE ════════════════════════════════════════════════════ #}
  129. <section class="n-sec">
  130.     <div class="n-wrap-sm">
  131.         <span class="n-label">The problem</span>
  132.         <h2 class="n-h2">When every project lives in a different tool, you <em class="n-em">lose control.</em></h2>
  133.         <p class="n-body n-mt-6">
  134.             Project-based companies lose control when quotation, procurement, inventory, site progress, billing,
  135.             retention, subcontractors, HoneyCore 4.0 design and deployment, and finance are scattered across
  136.             Excel sheets, WhatsApp threads, paper site reports, and disconnected accounting software. No single
  137.             place shows where a project actually stands — or whether it will end in profit.
  138.         </p>
  140.         <div class="pe-promise">
  141.             <span class="n-label">The promise</span>
  142.             <h2>Control every project from <em>quotation to cash collection.</em></h2>
  143.         </div>
  144.     </div>
  145. </section>
  147. {# ══ 3. WORKFLOW STRIP ═══════════════════════════════════════════════════════ #}
  148. <section class="n-sec" style="padding-top:0">
  149.     <div class="n-wrap">
  150.         <div class="n-center">
  151.             <span class="n-label">One connected workflow</span>
  152.             <h2 class="n-h2">Lead to profitability — in a <em class="n-em">single thread.</em></h2>
  153.         </div>
  154.         <div class="pe-flow">
  155.             {% set _steps = [
  156.                 'Lead / Tender', 'Quotation / BoQ', 'Contract', 'Project Planning',
  157.                 'Procurement', 'Inventory', 'Delivery', 'Site Execution', 'Commissioning',
  158.                 'Milestone Billing', 'Payment', 'Retention', 'O&M', 'Profitability'
  159.             ] %}
  160.             {% for step in _steps %}
  161.                 <span class="pe-flow-step"><span class="pe-num">{{ loop.index }}</span>{{ step }}</span>
  162.                 {% if not loop.last %}<span class="pe-flow-arrow"><i class="fa-solid fa-arrow-right"></i></span>{% endif %}
  163.             {% endfor %}
  164.         </div>
  165.     </div>
  166. </section>
  168. {# ══ 4. HONEYCORE EDGE+ PROJECT QUOTATION BLOCK ══════════════════════════════ #}
  169. <section class="n-sec" style="padding-top:0">
  170.     <div class="n-wrap">
  171.         <div class="pe-edge">
  172.             <div>
  173.                 <span class="n-label">HoneyCore 4.0 projects</span>
  174.                 <h2 class="n-h2">Quote and deliver <em class="n-em">HoneyCore 4.0</em> projects, end to end.</h2>
  175.                 <p class="n-body n-mt-6">
  176.                     Use HoneyBee to structure HoneyCore 4.0 project requirements, data points, sensors, meters,
  177.                     gateways, Edge controllers, protocol maps, BoQ, costing, proposal, procurement, installation
  178.                     planning, commissioning checklist, and recurring monitoring billing — in the same project
  179.                     cockpit you use for the rest of the job.
  180.                 </p>
  181.                 <div class="n-hero-actions n-mt-8">
  182.                     <a href="{{ url('honeybee_edge_projects') }}" class="n-btn n-btn-primary">
  183.                         Explore HoneyCore 4.0 Projects <i class="fa-solid fa-arrow-right"></i>
  184.                     </a>
  185.                     <a href="{{ url('honeybee_edge') }}" class="n-btn n-btn-outline">
  186.                         About HoneyCore EMS
  187.                     </a>
  188.                 </div>
  189.             </div>
  190.             <div>
  191.                 <ul class="pe-edge-chips">
  192.                     {% for chip in [
  193.                         'Requirements', 'Data points', 'Sensors', 'Meters', 'Gateways', 'Edge controllers',
  194.                         'Protocol maps', 'BoQ', 'Costing', 'Proposal', 'Procurement', 'Installation planning',
  195.                         'Commissioning checklist', 'Recurring monitoring billing'
  196.                     ] %}
  197.                         <li>{{ chip }}</li>
  198.                     {% endfor %}
  199.                 </ul>
  200.             </div>
  201.         </div>
  202.     </div>
  203. </section>
  205. {# ══ 5. FEATURE CARDS ════════════════════════════════════════════════════════ #}
  206. <section class="n-sec" style="padding-top:0">
  207.     <div class="n-wrap">
  208.         <div class="n-center">
  209.             <span class="n-label">Everything a project company needs</span>
  210.             <h2 class="n-h2">One cockpit. <em class="n-em">Every project discipline.</em></h2>
  211.         </div>
  212.         <div class="pe-feat-grid">
  213.             {% set _feats = [
  214.                 {i:'fa-bullseye',         t:'Tender & lead tracking',        d:'Capture tenders and leads, qualify them, and convert the winners straight into projects.'},
  215.                 {i:'fa-file-invoice',     t:'Quotation & BoQ',               d:'Build structured quotations and bills of quantities with line-item costing and margin.'},
  216.                 {i:'fa-microchip',        t:'HoneyCore 4.0 BoQ & quote',   d:'Dedicated workflow for HoneyCore 4.0 requirements, device BoQ, and proposal output.'},
  217.                 {i:'fa-diagram-project',  t:'Project WBS & milestones',      d:'Break work down into packages and milestones with planned dates and dependencies.'},
  218.                 {i:'fa-people-group',     t:'RACI',                          d:'Assign responsible, accountable, consulted, and informed roles across every work package.'},
  219.                 {i:'fa-cart-shopping',    t:'Project-wise procurement',      d:'Raise and track purchase against each project, tied to its BoQ and budget.'},
  220.                 {i:'fa-boxes-stacked',    t:'Inventory & material issue',    d:'Manage stock, site delivery, and material issue against the right project and task.'},
  221.                 {i:'fa-handshake',        t:'Supplier & subcontractor',      d:'Track suppliers and subcontractors, their scope, deliveries, and payments per project.'},
  222.                 {i:'fa-helmet-safety',    t:'Site progress & commissioning', d:'Record site progress, field updates, and commissioning checklists from the field.'},
  223.                 {i:'fa-money-bill-wave',  t:'Milestone billing',             d:'Bill clients against milestones and completed scope, not guesswork.'},
  224.                 {i:'fa-shield-halved',    t:'Retention / security money',    d:'Track retention and security money held and released across the project lifecycle.'},
  225.                 {i:'fa-chart-line',       t:'Project cost & margin',         d:'See live cost, committed spend, and final margin for every project in one view.'},
  226.                 {i:'fa-screwdriver-wrench', t:'O&M handover',                d:'Hand over to operations and maintenance, including recurring HoneyCore EMS monitoring.'},
  227.                 {i:'fa-robot',            t:'AI project reporting',          d:'Generate project status, margin, and risk reports with HoneyBee AI, on demand.'}
  228.             ] %}
  229.             {% for f in _feats %}
  230.                 <div class="pe-feat">
  231.                     <div class="pe-feat-icon"><i class="fa-solid {{ f.i }}"></i></div>
  232.                     <h3>{{ f.t }}</h3>
  233.                     <p>{{ f.d }}</p>
  234.                 </div>
  235.             {% endfor %}
  236.         </div>
  237.     </div>
  238. </section>
  240. {# ══ 6. CLOSING CTA BAND ═════════════════════════════════════════════════════ #}
  241. <section class="pe-cta">
  242.     <div class="n-wrap-sm">
  243.         <h2>Control every project from <em>quotation to cash collection.</em></h2>
  244.         <p class="n-body" style="max-width:54ch;margin:0 auto">
  245.             Start with a workflow audit. We map your current quotation, procurement, site, and billing flow —
  246.             then show you the project cockpit running on it. EUR pricing, EU data residency, HoneyBee is not an EPC contractor.
  247.         </p>
  248.         <div class="pe-cta-actions">
  249.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  250.                 Request Project Workflow Audit <i class="fa-solid fa-arrow-right"></i>
  251.             </a>
  252.             <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-outline">
  253.                 Explore pricing
  254.             </a>
  255.         </div>
  256.     </div>
  257. </section>
  259. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}