src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/business_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. {# ─── HONEYBEE — BUSINESS ERP PAGE (simple, non-technical, SME visitor) ───────── #}
  5. <style>
  6. /* Page-scoped grids only — all colours/typography reuse the global n-* system
  7.    (tokens + base classes are defined on the home/shared stylesheet). */
  8. .be-grid {
  9.     display: grid; grid-template-columns: repeat(2, 1fr);
  10.     gap: 1px; background: var(--n-border-md);
  11.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  12.     margin-top: 48px;
  13. }
  14. .be-card { background: var(--n-white); padding: 28px; transition: background .2s; }
  15. .be-card:hover { background: var(--n-cream); }
  16. .be-card h3 { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  17. .be-card p  { font-size: 13.5px; color: var(--n-muted); line-height: 1.65; margin: 0; }
  18. .be-card .be-tag {
  19.     font-size: 11px; font-weight: 700; color: var(--n-amber); letter-spacing: .1em;
  20.     text-transform: uppercase; margin-bottom: 14px; display: block; font-family: monospace;
  21. }
  23. .be-who {
  24.     list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  25.     gap: 12px 32px; margin-top: 40px;
  26. }
  27. .be-who li { font-size: 14.5px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
  28. .be-who li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
  30. .be-reassure {
  31.     background: var(--n-white); border: 1px solid var(--n-border-md);
  32.     border-left: 3px solid var(--n-amber);
  33.     border-radius: var(--n-radius); padding: 28px 32px; margin-top: 40px;
  34.     font-size: 17px; line-height: 1.7; color: var(--n-dark);
  35. }
  36. .be-reassure strong { color: var(--n-amber); font-weight: 700; }
  38. .be-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  39. .be-step {
  40.     background: var(--n-white); border: 1px solid var(--n-border);
  41.     border-radius: var(--n-radius); padding: 28px;
  42. }
  43. .be-step .be-step-num {
  44.     font-family: monospace; font-size: 12px; font-weight: 700; color: var(--n-amber);
  45.     letter-spacing: .1em; margin-bottom: 12px; display: block;
  46. }
  47. .be-step h3 { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  48. .be-step p  { font-size: 13.5px; color: var(--n-muted); line-height: 1.65; margin: 0; }
  50. .be-examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
  51. .be-example {
  52.     background: var(--n-cream-2); border: 1px solid var(--n-border);
  53.     border-radius: var(--n-radius); padding: 24px 28px;
  54. }
  55. .be-example h4 { font-family:'Montserrat',sans-serif; font-size: 14.5px; font-weight: 700; color: var(--n-dark); margin-bottom: 6px; }
  56. .be-example p  { font-size: 13.5px; color: var(--n-muted); line-height: 1.65; margin: 0; }
  58. .be-research {
  59.     background: var(--n-dark); border-radius: var(--n-radius-lg);
  60.     padding: 48px 56px; margin-top: 48px; position: relative; overflow: hidden;
  61. }
  62. .be-research::before {
  63.     content: ''; position: absolute; top: -40%; right: -5%; width: 55%; height: 160%;
  64.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%);
  65.     pointer-events: none;
  66. }
  67. .be-research .be-research-label {
  68.     display: inline-flex; align-items: center; gap: 8px; position: relative;
  69.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  70.     color: var(--n-amber); margin-bottom: 16px;
  71. }
  72. .be-research .be-research-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  73. .be-research p {
  74.     position: relative; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.78);
  75.     max-width: 720px; margin: 0;
  76. }
  77. .be-research p em { font-style: normal; color: var(--n-amber); }
  79. @media (max-width: 1040px) {
  80.     .be-grid     { grid-template-columns: 1fr 1fr; }
  81.     .be-steps    { grid-template-columns: 1fr; }
  82.     .be-examples { grid-template-columns: 1fr; }
  83.     .be-research { padding: 36px 28px; }
  84. }
  85. @media (max-width: 720px) {
  86.     .be-grid { grid-template-columns: 1fr; }
  87.     .be-who  { grid-template-columns: 1fr; }
  88. }
  89. </style>
  91. {# ══ 1. HERO ══════════════════════════════════════════════════════════════════ #}
  92. <section class="n-hero" style="min-height:auto;padding:130px 0 72px">
  93.     <div class="n-wrap" style="width:100%">
  94.         <div style="max-width:720px">
  95.             <div class="n-label">Business ERP</div>
  96.             <h1 class="n-hero-h1">Business ERP for <em>growing companies.</em></h1>
  97.             <p class="n-hero-desc" style="max-width:620px">
  98.                 HR, accounts, finance, inventory, SCM, CRM, sales, purchase, approvals, mobile
  99.                 operations, and reporting — configurable for your business and customizable when needed.
  100.             </p>
  101.             <div class="n-hero-actions">
  102.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  103.                     Get Business ERP Quote <i class="fa-solid fa-arrow-right"></i>
  104.                 </a>
  105.                 <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-outline">
  106.                     See pricing
  107.                 </a>
  108.             </div>
  109.             <div class="n-micro-checks" style="margin-bottom:0">
  110.                 <span><i class="fa-solid fa-check"></i> Start from €7.99/user/month</span>
  111.                 <span><i class="fa-solid fa-check"></i> EUR pricing · EU data residency</span>
  112.                 <span><i class="fa-solid fa-check"></i> Start small, expand when ready</span>
  113.             </div>
  114.         </div>
  115.     </div>
  116. </section>
  118. {# ══ 2. REASSURANCE ═══════════════════════════════════════════════════════════ #}
  119. <section class="n-sec-sm">
  120.     <div class="n-wrap-sm">
  121.         <div class="be-reassure">
  122.             <strong>Not an EPC or energy company?</strong> HoneyBee can still support your daily
  123.             business operations — the same modules that run large projects also run everyday trading,
  124.             distribution, and service businesses.
  125.         </div>
  126.     </div>
  127. </section>
  129. {# ══ 3. WHO IT'S FOR ══════════════════════════════════════════════════════════ #}
  130. <section class="n-sec-sm">
  131.     <div class="n-wrap">
  132.         <div class="n-label">Who it's for</div>
  133.         <h2 class="n-h2">Built for everyday <em class="n-em">business operations.</em></h2>
  134.         <p class="n-body n-mt-4" style="max-width:600px">
  135.             If you run a company that buys, sells, stores, serves, or manages people and money,
  136.             HoneyBee fits your day-to-day work.
  137.         </p>
  138.         <ul class="be-who">
  139.             <li>Trading and wholesale businesses</li>
  140.             <li>Distribution and logistics companies</li>
  141.             <li>Service and professional firms</li>
  142.             <li>Import and export businesses</li>
  143.             <li>Multi-branch and multi-location companies</li>
  144.             <li>Manufacturing-support and assembly operations</li>
  145.             <li>General SMEs that have outgrown spreadsheets</li>
  146.             <li>Companies that need custom workflows</li>
  147.         </ul>
  148.     </div>
  149. </section>
  151. {# ══ 4. CORE MODULES ══════════════════════════════════════════════════════════ #}
  152. <section class="n-sec-sm">
  153.     <div class="n-wrap">
  154.         <div class="n-label">Core modules</div>
  155.         <h2 class="n-h2">Everything your business runs on, <em class="n-em">in one place.</em></h2>
  156.         <div class="be-grid">
  157.             <div class="be-card">
  158.                 <span class="be-tag">01</span>
  159.                 <h3>HR &amp; Payroll</h3>
  160.                 <p>Employees, attendance, leave, and salary handled in one connected place.</p>
  161.             </div>
  162.             <div class="be-card">
  163.                 <span class="be-tag">02</span>
  164.                 <h3>Accounts &amp; Finance</h3>
  165.                 <p>Bookkeeping, invoices, payments, and clear financial statements you can trust.</p>
  166.             </div>
  167.             <div class="be-card">
  168.                 <span class="be-tag">03</span>
  169.                 <h3>Inventory &amp; SCM</h3>
  170.                 <p>Track stock across warehouses and keep your supply chain moving smoothly.</p>
  171.             </div>
  172.             <div class="be-card">
  173.                 <span class="be-tag">04</span>
  174.                 <h3>Sales &amp; CRM</h3>
  175.                 <p>Manage leads, customers, quotations, and sales from first contact to repeat orders.</p>
  176.             </div>
  177.             <div class="be-card">
  178.                 <span class="be-tag">05</span>
  179.                 <h3>Purchase</h3>
  180.                 <p>Raise purchase orders, receive goods, and keep supplier bills under control.</p>
  181.             </div>
  182.             <div class="be-card">
  183.                 <span class="be-tag">06</span>
  184.                 <h3>Approvals &amp; Documents</h3>
  185.                 <p>Route requests for sign-off and keep every important document in one safe place.</p>
  186.             </div>
  187.             <div class="be-card">
  188.                 <span class="be-tag">07</span>
  189.                 <h3>Reports &amp; AI</h3>
  190.                 <p>Live dashboards plus AI that answers questions and writes reports for you.</p>
  191.             </div>
  192.             <div class="be-card">
  193.                 <span class="be-tag">08</span>
  194.                 <h3>Mobile Operations</h3>
  195.                 <p>Approve, check stock, and stay updated from your phone, wherever you are.</p>
  196.             </div>
  197.         </div>
  198.     </div>
  199. </section>
  201. {# ══ 5. START MODULE BY MODULE ════════════════════════════════════════════════ #}
  202. <section class="n-sec-sm">
  203.     <div class="n-wrap">
  204.         <div class="n-label">Start small</div>
  205.         <h2 class="n-h2">Start module by module — <em class="n-em">expand when ready.</em></h2>
  206.         <p class="n-body n-mt-4" style="max-width:600px">
  207.             You don't have to switch everything on day one. Begin with the part of your business that
  208.             hurts most, get comfortable, then add the next module at your own pace.
  209.         </p>
  210.         <div class="be-steps">
  211.             <div class="be-step">
  212.                 <span class="be-step-num">STEP 1</span>
  213.                 <h3>Begin where it matters</h3>
  214.                 <p>Pick one module — often accounts, inventory, or sales — and get it running cleanly.</p>
  215.             </div>
  216.             <div class="be-step">
  217.                 <span class="be-step-num">STEP 2</span>
  218.                 <h3>Add the next piece</h3>
  219.                 <p>Bring in purchase, HR, or CRM once your team is comfortable with the first module.</p>
  220.             </div>
  221.             <div class="be-step">
  222.                 <span class="be-step-num">STEP 3</span>
  223.                 <h3>Connect the whole business</h3>
  224.                 <p>As modules join up, your data flows together and reporting becomes effortless.</p>
  225.             </div>
  226.         </div>
  228.         <h3 class="n-h3 n-mt-12" style="margin-bottom:4px">A couple of custom-workflow examples</h3>
  229.         <p class="n-body-sm" style="max-width:560px">
  230.             When your business does something a little differently, HoneyBee can be customized to match.
  231.         </p>
  232.         <div class="be-examples">
  233.             <div class="be-example">
  234.                 <h4>Multi-branch stock transfers</h4>
  235.                 <p>A distributor moves goods between branches with its own approval and tracking rules,
  236.                    so head office always sees real stock and who signed off.</p>
  237.             </div>
  238.             <div class="be-example">
  239.                 <h4>Service jobs to invoice</h4>
  240.                 <p>A service firm turns each job into a tracked task, then into an invoice — following the
  241.                    exact steps the team already uses, just without the paperwork.</p>
  242.             </div>
  243.         </div>
  244.     </div>
  245. </section>
  247. {# ══ 6. RESEARCH-BACKED SME LINE ══════════════════════════════════════════════ #}
  248. <section class="n-sec-sm">
  249.     <div class="n-wrap">
  250.         <div class="be-research">
  251.             <div class="be-research-label">Built on research</div>
  252.             <p>
  253.                 HoneyBee is shaped by applied research into <em>cost-efficient ERP adoption for SMEs</em>,
  254.                 focusing on affordability, modular rollout, process fit, and practical adoption.
  255.             </p>
  256.         </div>
  257.     </div>
  258. </section>
  260. {# ══ 7. CLOSING CTA ═══════════════════════════════════════════════════════════ #}
  261. <section class="n-cta-final">
  262.     <div class="n-wrap-sm">
  263.         <h2>Let's see if HoneyBee <em>fits your business.</em></h2>
  264.         <p>
  265.             Tell us how your company works today and we'll show you a simple starting setup —
  266.             no jargon, no pressure, just a clear path that grows with you.
  267.         </p>
  268.         <div class="n-hero-actions" style="justify-content:center">
  269.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  270.                 Check Fit for My Business <i class="fa-solid fa-arrow-right"></i>
  271.             </a>
  272.             <a href="{{ url('honeybee_project_erp') }}" class="n-btn n-btn-outline">
  273.                 Run projects? See Project ERP
  274.             </a>
  275.         </div>
  276.         <p class="n-cta-note">Business ERP from €7.99/user/month · EUR pricing · EU data residency</p>
  277.     </div>
  278. </section>
  280. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}