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: 10px; 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 Edge+ 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 Edge+</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 Edge+ 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 Edge+ 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 Edge+ 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 Edge+ projects</span>
  174.                 <h2 class="n-h2">Quote and deliver <em class="n-em">HoneyCore Edge+</em> projects, end to end.</h2>
  175.                 <p class="n-body n-mt-6">
  176.                     Use HoneyBee to structure HoneyCore Edge+ 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 Edge+ 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 Edge+
  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 Edge+ BoQ & quote',   d:'Dedicated workflow for HoneyCore Edge+ 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 Edge+ 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' %}