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

Open in your IDE?
  1. {% set website_legacy = true %}
  2. {% set website_title = 'About HoneyBee | Industrial Software & Energy Technology' %}
  3. {% set website_description = 'HoneyBee is an industrial software and energy technology company. Meet the team behind the platform.' %}
  4. {% include '@HoneybeeWeb/website/header.html.twig' %}
  6. <style>
  7. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  8. :root {
  9.     --n-cream:     #F7F5F0;
  10.     --n-cream-2:   #F0EDE5;
  11.     --n-cream-3:   #E8E3D9;
  12.     --n-white:     #FFFFFF;
  13.     --n-dark:      #1A1D2E;
  14.     --n-dark-2:    #252840;
  15.     --n-amber:     #C07D2A;
  16.     --n-amber-lt:  #D4954A;
  17.     --n-amber-dim: rgba(192,125,42,.10);
  18.     --n-sage:      #3D6B52;
  19.     --n-muted:     #6B6E7F;
  20.     --n-muted-2:   #9395A5;
  21.     --n-border:    rgba(26,29,46,.07);
  22.     --n-border-md: rgba(26,29,46,.12);
  23.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  24.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  25.     --n-radius:    12px;
  26.     --n-radius-sm: 8px;
  27.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  28. }
  29. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  30. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  31. a { text-decoration: none; }
  33. /* ── Navbar ──────────────────────────────────────────────────────────────────── */
  34. .navbar {
  35.     background: rgba(247,245,240,.96) !important;
  36.     backdrop-filter: blur(16px) saturate(180%);
  37.     border-bottom: 1px solid var(--n-border) !important;
  38.     box-shadow: none !important;
  39. }
  40. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  41. .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  42. .navbar .login-btn       { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  44. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  45. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  46. .n-wrap-sm { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
  47. .n-sec     { padding: 96px 0; }
  48. .n-sec-sm  { padding: 64px 0; }
  49. .n-label   {
  50.     display: inline-flex; align-items: center; gap: 8px;
  51.     font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  52.     color: var(--n-amber); margin-bottom: 16px;
  53. }
  54. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  55. .n-h1 { font-family:var(--n-font); font-size: clamp(34px,4.5vw,58px); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--n-dark); }
  56. .n-h1 em { font-style: italic; color: var(--n-amber); }
  57. .n-h2 { font-family:var(--n-font); font-size: clamp(26px,3vw,40px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--n-dark); }
  58. .n-h2 em { font-style: normal; color: var(--n-amber); }
  59. .n-body   { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  60. .n-center { text-align: center; }
  61. .n-center .n-label { justify-content: center; }
  62. .n-btn {
  63.     display: inline-flex; align-items: center; gap: 8px;
  64.     padding: 12px 24px; border-radius: var(--n-radius-sm);
  65.     font-size: 14px; font-weight: 600; border: none;
  66.     cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font);
  67. }
  68. .n-btn-primary { background: var(--n-dark); color: #fff; }
  69. .n-btn-primary:hover { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); }
  70. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  71. .n-btn-outline:hover { border-color: var(--n-dark); transform: translateY(-1px); }
  72. .n-divider { width: 40px; height: 2px; background: var(--n-amber); border-radius: 2px; margin: 20px 0; }
  74. /* ────────────────────────────────────────────────────────────────────────────
  75.    PAGE HERO
  76.    ──────────────────────────────────────────────────────────────────────────── */
  77. .n-about-hero {
  78.     background: var(--n-cream);
  79.     padding: 120px 0 72px;
  80.     position: relative;
  81.     overflow: hidden;
  82.     border-bottom: 1px solid var(--n-border);
  83. }
  84. .n-about-hero::before {
  85.     content: '';
  86.     position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  87.     background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(192,125,42,.06) 0%, transparent 70%);
  88.     pointer-events: none;
  89. }
  91. /* ────────────────────────────────────────────────────────────────────────────
  92.    FOUNDING STORY
  93.    ──────────────────────────────────────────────────────────────────────────── */
  94. .n-story-text p {
  95.     font-family: 'Montserrat', sans-serif;
  96.     font-size: clamp(1.2rem, 2vw, 1.55rem);
  97.     line-height: 1.55;
  98.     color: #3A3D50;
  99.     letter-spacing: -.012em;
  100.     margin-bottom: 32px;
  101. }
  102. .n-story-text p:last-child { margin-bottom: 0; }
  104. /* ────────────────────────────────────────────────────────────────────────────
  105.    LEADERSHIP
  106.    ──────────────────────────────────────────────────────────────────────────── */
  107. .n-leaders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; max-width: 760px; }
  108. .n-leader {
  109.     background: var(--n-white);
  110.     border: 1px solid var(--n-border);
  111.     border-radius: var(--n-radius);
  112.     padding: 32px 28px;
  113.     transition: box-shadow .2s, border-color .2s;
  114. }
  115. .n-leader:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  116. .n-leader-avatar {
  117.     width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px;
  118.     background: var(--n-dark); color: #fff;
  119.     display: flex; align-items: center; justify-content: center;
  120.     font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .04em;
  121. }
  122. .n-leader-avatar.amber { background: var(--n-amber); }
  123. .n-leader-avatar.sage  { background: var(--n-sage); }
  124. .n-leader h4 { font-family:var(--n-font); font-size: 16px; font-weight: 800; color: var(--n-dark); margin-bottom: 4px; }
  125. .n-leader-role { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n-amber); font-family: monospace; margin-bottom: 14px; }
  126. .n-leader p { font-size: 13.5px; line-height: 1.65; color: var(--n-muted); }
  128. /* ────────────────────────────────────────────────────────────────────────────
  129.    MILESTONES
  130.    ──────────────────────────────────────────────────────────────────────────── */
  131. .n-milestones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--n-border-md); border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden; margin-top: 48px; }
  132. .n-milestone { background: var(--n-white); padding: 32px 28px; transition: background .2s; }
  133. .n-milestone:hover { background: var(--n-cream); }
  134. .n-milestone-year { font-family:var(--n-font); font-size: 2rem; font-weight: 900; color: var(--n-amber); line-height: 1; margin-bottom: 12px; }
  135. .n-milestone h4 { font-family:var(--n-font); font-size: 15px; font-weight: 800; color: var(--n-dark); margin-bottom: 8px; }
  136. .n-milestone p  { font-size: 13px; color: var(--n-muted); line-height: 1.65; }
  138. /* ────────────────────────────────────────────────────────────────────────────
  139.    THREE RULES
  140.    ──────────────────────────────────────────────────────────────────────────── */
  141. .n-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  142. .n-rule {
  143.     padding: 32px;
  144.     border-top: 2px solid var(--n-dark);
  145. }
  146. .n-rule-num {
  147.     font-family:var(--n-font);
  148.     font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  149.     color: var(--n-muted-2); margin-bottom: 16px; display: block;
  150. }
  151. .n-rule h3 { font-family:var(--n-font); font-size: 20px; font-weight: 800; color: var(--n-dark); margin-bottom: 12px; }
  152. .n-rule p  { font-size: 14px; line-height: 1.7; color: var(--n-muted); }
  154. /* ────────────────────────────────────────────────────────────────────────────
  155.    OFFICES
  156.    ──────────────────────────────────────────────────────────────────────────── */
  157. .n-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  158. .n-office {
  159.     background: var(--n-white); border: 1px solid var(--n-border);
  160.     border-radius: var(--n-radius); padding: 36px;
  161.     transition: box-shadow .2s;
  162. }
  163. .n-office:hover { box-shadow: var(--n-shadow-md); }
  164. .n-office-tag {
  165.     display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  166.     text-transform: uppercase; color: var(--n-amber); font-family: monospace;
  167.     padding: 3px 10px; border: 1px solid rgba(192,125,42,.25); border-radius: 4px;
  168.     margin-bottom: 20px;
  169. }
  170. .n-office h3  { font-family:var(--n-font); font-size: 22px; font-weight: 800; color: var(--n-dark); margin-bottom: 16px; }
  171. .n-office address { font-style: normal; }
  172. .n-office address p { font-size: 14px; color: var(--n-muted); line-height: 1.8; }
  173. .n-office-phone { font-family: monospace; font-size: 14px; color: var(--n-dark); font-weight: 600; margin-top: 16px; display: block; }
  175. /* ────────────────────────────────────────────────────────────────────────────
  176.    CTA
  177.    ──────────────────────────────────────────────────────────────────────────── */
  178. .n-about-cta {
  179.     background: var(--n-dark);
  180.     padding: 96px 0;
  181.     text-align: center;
  182.     position: relative;
  183.     overflow: hidden;
  184. }
  185. .n-about-cta::before {
  186.     content: '';
  187.     position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  188.     width: 80%; height: 200%;
  189.     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.1) 0%, transparent 65%);
  190.     pointer-events: none;
  191. }
  192. .n-about-cta h2 { font-family:var(--n-font); font-size: clamp(26px,3vw,40px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  193. .n-about-cta h2 em { font-style: italic; color: var(--n-amber); }
  194. .n-about-cta p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 52ch; margin: 0 auto 32px; line-height: 1.7; }
  195. .n-about-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  196. .n-btn-light { background: #fff; color: var(--n-dark); }
  197. .n-btn-light:hover { background: var(--n-cream-2); }
  198. .n-btn-ghost-light { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  199. .n-btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
  201. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  202. @media (max-width: 900px) {
  203.     .n-leaders    { grid-template-columns: 1fr; }
  204.     .n-milestones { grid-template-columns: repeat(3, 1fr); }
  205.     .n-rules      { grid-template-columns: 1fr; }
  206.     .n-offices    { grid-template-columns: 1fr; }
  207. }
  208. @media (max-width: 640px) {
  209.     .n-milestones { grid-template-columns: 1fr; }
  210. }
  211. </style>
  213. {# ══ HERO ═════════════════════════════════════════════════════════════════════ #}
  214. <section class="n-about-hero">
  215.     <div class="n-wrap" style="position:relative;z-index:2">
  216.         <div class="n-label">About HoneyBee</div>
  217.         <h1 class="n-h1" style="max-width:720px;margin-bottom:24px">
  218.             HoneyBee is an industrial software and energy technology company.
  219.         </h1>
  220.         <p class="n-body" style="max-width:560px">
  221.             We develop business and project software, solar and storage engineering software, and energy-management and industrial edge-control technology. Our products can operate independently or connect across a project’s lifecycle.
  222.         </p>
  223.         <div style="display:flex;gap:32px;flex-wrap:wrap;margin-top:48px">
  224.             <div>
  225.                 <div style="font-family:var(--n-font);font-size:28px;font-weight:900;color:var(--n-dark)">2021</div>
  226.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Founded</div>
  227.             </div>
  228.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  229.             <div>
  230.                 <div style="font-family:var(--n-font);font-size:28px;font-weight:900;color:var(--n-dark)">4</div>
  231.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Markets live</div>
  232.             </div>
  233.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  234.             <div>
  235.                 <div style="font-family:var(--n-font);font-size:28px;font-weight:900;color:var(--n-dark)">3 regions</div>
  236.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Singapore · Europe · Asia</div>
  237.             </div>
  238.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  239.             <div>
  240.                 {% set _aboutUserPrice = prices.business.general %}
  241.                 <div style="font-family:var(--n-font);font-size:28px;font-weight:900;color:var(--n-dark)">€{{ _aboutUserPrice }}</div>
  242.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Work seat / month</div>
  243.             </div>
  244.         </div>
  245.     </div>
  246. </section>
  248. {# ══ FOUNDING STORY ═══════════════════════════════════════════════════════════ #}
  249. <section class="n-sec" style="background:var(--n-white);border-bottom:1px solid var(--n-border)">
  250.     <div class="n-wrap-sm">
  251.         <div class="n-label">Our story</div>
  252.         <div class="n-story-text">
  253.             <p>Our founders came from EPC project delivery — a business built on tight margins, precise costing, multi-site coordination, and engineering data that never talked to finance. Every ERP on the market was either priced for enterprises or too generic for technical project work.</p>
  254.             <p>So we built what the industry needed. A single connected platform where finance, projects, HR, inventory, IoT field devices, and AI reporting all operate from the same data. Built by a Germany/EU + Singapore-oriented team — with engineering, development, implementation, and regional support from Bangladesh — purpose-built for EPC companies, system integrators, IPP operators, and industrial businesses, not retrofitted from generic SaaS.</p>
  255.             <p>Our European product direction, R&D and partner coordination are based in Germany — the German entity is in formation as the group’s EU home. HoneyBee IoT (Pte.) Ltd. is registered in Singapore under UEN 202507612D as the international commercial entity, and a long-standing engineering team carries development, implementation and support. <strong>HoneyBee is not an EPC contractor or project developer. We build the software, HoneyCore Edge data layer, and AI-enabled operating system that EPC, system integration, energy asset, and industrial companies run on.</strong></p>
  256.             <p>HoneyBee now runs operations across energy, engineering, and manufacturing — from utility-scale solar project margins to multi-site industrial asset tracking. One platform. One source of truth. Project-based deployment when required.</p>
  257.         </div>
  258.     </div>
  259. </section>
  261. {# ══ LEADERSHIP ═══════════════════════════════════════════════════════════════ #}
  262. <section class="n-sec" style="background:var(--n-cream)">
  263.     <div class="n-wrap">
  264.         <div class="n-center">
  265.             <div class="n-label">Leadership</div>
  266.             <h2 class="n-h2">The people who run <em>HoneyBee.</em></h2>
  267.         </div>
  268.         <div class="n-leaders">
  269.             <div class="n-leader">
  270.                 <div class="n-leader-avatar">KY</div>
  271.                 <h4>Khandoker Mozibul Yasser</h4>
  272.                 <div class="n-leader-role">Co-founder · CTO </div>
  273.                 <div class="n-leader-role">HoneyBee IoT Ltd.</div>
  274.                 <p>Previously built ERP tools in-house for a solar EPC. Architected HoneyBee's core platform and IoT layer. Leads the engineering vision from Dhaka.</p>
  275.             </div>
  276.             <div class="n-leader">
  277.                 <div class="n-leader-avatar amber">EH</div>
  278.                 <h4>Emrul Hasan</h4>
  279.                 <div class="n-leader-role">Co-founder · CSO</div>
  280.                 <div class="n-leader-role">HoneyBee IoT Ltd.</div>
  281.                 <p>Former management consultant in energy &amp; utilities. Leads strategy, partnerships, and European expansion from our Germany/EU base.</p>
  282.             </div>
  283.         </div>
  284.     </div>
  285. </section>
  287. {# ══ MILESTONES ═══════════════════════════════════════════════════════════════ #}
  288. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border)">
  289.     <div class="n-wrap">
  290.         <div class="n-center">
  291.             <div class="n-label">Milestones</div>
  292.             <h2 class="n-h2">From idea to platform.</h2>
  293.         </div>
  294.         <div class="n-milestones">
  295.             <div class="n-milestone">
  296.                 <div class="n-milestone-year">2021</div>
  297.                 <h4>Founded</h4>
  298.                 <p>HoneyBee incorporated and first internal pilot launched at a solar EPC company in Germany.</p>
  299.             </div>
  300.             <div class="n-milestone">
  301.                 <div class="n-milestone-year">2022</div>
  302.                 <h4>First 10 clients</h4>
  303.                 <p>Product goes live with core finance, HR, and projects modules. Engineering team scales across multiple locations.</p>
  304.             </div>
  305.             <div class="n-milestone">
  306.                 <div class="n-milestone-year">2023</div>
  307.                 <h4>IoT layer released</h4>
  308.                 <p>Direct integration with PLCs, Raspberry Pi, sensors, and energy systems. HoneyBee HoneyCore EMS site intelligence layer launched.</p>
  309.             </div>
  310.             <div class="n-milestone">
  311.                 <div class="n-milestone-year">2024</div>
  312.                 <h4>DATEV &amp; EU compliance</h4>
  313.                 <p>German DATEV-ready export released. EU data residency launched. GDPR-ready with Article 28 DPA available. Native AI layer and local ML deployment shipped.</p>
  314.             </div>
  315.             <div class="n-milestone">
  316.                 <div class="n-milestone-year">2025</div>
  317.                 <h4>Industrial scale-up</h4>
  318.                 <p>EPC, IPP/OPEX/PPA, and multi-site operator deployments. HoneyCore EMS devices in field. Partner network expansion.</p>
  319.             </div>
  320.         </div>
  321.     </div>
  322. </section>
  324. {# ══ THREE RULES ══════════════════════════════════════════════════════════════ #}
  325. <section class="n-sec" style="background:var(--n-cream-2)">
  326.     <div class="n-wrap">
  327.         <div class="n-center">
  328.             <div class="n-label">What we believe</div>
  329.             <h2 class="n-h2">Three rules we don't break.</h2>
  330.         </div>
  331.         <div class="n-rules">
  332.             <div class="n-rule">
  333.                 <span class="n-rule-num">One</span>
  334.                 <h3>Transparent pricing.</h3>
  335.                 <p>Transparent seat, project-output and scoped-deployment pricing. Review the published software tiers; hardware, integration and commissioning are quoted separately.</p>
  336.             </div>
  337.             <div class="n-rule">
  338.                 <span class="n-rule-num">Two</span>
  339.                 <h3>Your data, your access.</h3>
  340.                 <p>Full export any time — CSV, JSON, or SQL. No vendor lock-in. Private cloud and on-premise deployments available for regulated or sensitive industrial environments.</p>
  341.             </div>
  342.             <div class="n-rule">
  343.                 <span class="n-rule-num">Three</span>
  344.                 <h3>Built for work, not slides.</h3>
  345.                 <p>We distinguish generally available capabilities, deployment-specific configuration and roadmap work. A walkthrough confirms the current scope available for your operation.</p>
  346.             </div>
  347.         </div>
  348.     </div>
  349. </section>
  351. {# ══ OFFICES ══════════════════════════════════════════════════════════════════ #}
  352. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border)">
  353.     <div class="n-wrap">
  354.         <div class="n-center">
  355.             <div class="n-label">Offices</div>
  356.             <h2 class="n-h2">Global reach. <em>One team.</em></h2>
  357.         </div>
  358.         <div class="n-offices">
  359.             <div class="n-office">
  360.                 <div class="n-office-tag">Headquarters</div>
  361.                 <h3>Singapore</h3>
  362.                 <address>
  363.                     <p>2 Venture Drive, #19-21<br>Vision Exchange<br>Singapore 608526</p>
  364.                 </address>
  365.                 <div style="margin-top:20px;padding-top:20px;border-top:1px solid var(--n-border)">
  366.                     <div style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted-2);font-family:monospace;margin-bottom:8px">Responsibilities</div>
  367.                     <div style="display:flex;flex-wrap:wrap;gap:6px">
  368.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">Sales</span>
  369.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">Strategy</span>
  370.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">SEA Partnerships</span>
  371.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">Multi-company</span>
  372.                     </div>
  373.                 </div>
  374.             </div>
  375.             <div class="n-office">
  376.                 <div class="n-office-tag">Europe</div>
  377.                 <h3>Germany</h3>
  378.                 <address>
  379.                     <p>Brühlweg 1<br>88451 Dettingen an der Iller<br>Germany</p>
  380.                 </address>
  381.                 <span class="n-office-phone">+49 176 34616155</span>
  382.                 <div style="margin-top:20px;padding-top:20px;border-top:1px solid var(--n-border)">
  383.                     <div style="font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted-2);font-family:monospace;margin-bottom:8px">Responsibilities</div>
  384.                     <div style="display:flex;flex-wrap:wrap;gap:6px">
  385.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">European operations</span>
  386.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">DATEV &amp; compliance</span>
  387.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">Partner network</span>
  388.                         <span style="font-size:12px;padding:3px 10px;background:var(--n-cream);border:1px solid var(--n-border-md);border-radius:4px;color:var(--n-dark)">EU customer support</span>
  389.                     </div>
  390.                 </div>
  391.             </div>
  392.         </div>
  393.     </div>
  394. </section>
  396. {# ══ CTA / CAREERS ════════════════════════════════════════════════════════════ #}
  397. <section class="n-about-cta">
  398.     <div class="n-wrap" style="position:relative;z-index:2">
  399.         <div class="n-label" style="color:var(--n-amber);justify-content:center">
  400.             Careers
  401.         </div>
  402.         <h2>Work on real industrial software problems.</h2>
  403.         <p>We hire engineers, designers, and business operators across our offices. We build for EPC companies, energy asset operations, and industrial operators — real workflows, real customers, real data.</p>
  404.         <div class="n-about-cta-btns">
  405.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  406.                 <i class="fa-solid fa-briefcase"></i> View open positions
  407.             </a>
  408.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  409.                 <i class="fa-solid fa-envelope"></i> Say hello
  410.             </a>
  411.         </div>
  412.     </div>
  413. </section>
  415. {% include '@HoneybeeWeb/website/footer.html.twig' %}
  417. <script>
  418. (function () {
  419.     var els = document.querySelectorAll('.n-leader,.n-milestone,.n-rule,.n-office');
  420.     els.forEach(function (el) {
  421.         el.style.opacity = '0';
  422.         el.style.transform = 'translateY(16px)';
  423.         el.style.transition = 'opacity .45s ease, transform .45s ease';
  424.     });
  425.     var io = new IntersectionObserver(function (entries) {
  426.         entries.forEach(function (en) {
  427.             if (en.isIntersecting) { en.target.style.opacity = '1'; en.target.style.transform = 'translateY(0)'; io.unobserve(en.target); }
  428.         });
  429.     }, { threshold: 0.1 });
  430.     els.forEach(function (el, i) {
  431.         el.style.transitionDelay = (i % 4 * 0.07) + 's';
  432.         io.observe(el);
  433.     });
  434. })();
  435. </script>