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

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  5. :root {
  6.     --n-cream:     #F7F5F0;
  7.     --n-cream-2:   #F0EDE5;
  8.     --n-cream-3:   #E8E3D9;
  9.     --n-white:     #FFFFFF;
  10.     --n-dark:      #1A1D2E;
  11.     --n-dark-2:    #252840;
  12.     --n-amber:     #C07D2A;
  13.     --n-amber-lt:  #D4954A;
  14.     --n-amber-dim: rgba(192,125,42,.10);
  15.     --n-sage:      #3D6B52;
  16.     --n-muted:     #6B6E7F;
  17.     --n-muted-2:   #9395A5;
  18.     --n-border:    rgba(26,29,46,.07);
  19.     --n-border-md: rgba(26,29,46,.12);
  20.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  21.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  22.     --n-radius:    12px;
  23.     --n-radius-sm: 8px;
  24.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  25. }
  26. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  27. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  28. a { text-decoration: none; }
  30. /* ── Navbar ──────────────────────────────────────────────────────────────────── */
  31. .navbar {
  32.     background: rgba(247,245,240,.96) !important;
  33.     backdrop-filter: blur(16px) saturate(180%);
  34.     border-bottom: 1px solid var(--n-border) !important;
  35.     box-shadow: none !important;
  36. }
  37. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  38. .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  39. .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; }
  41. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  42. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  43. .n-wrap-sm { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
  44. .n-sec     { padding: 96px 0; }
  45. .n-sec-sm  { padding: 64px 0; }
  46. .n-label   {
  47.     display: inline-flex; align-items: center; gap: 8px;
  48.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  49.     color: var(--n-amber); margin-bottom: 16px;
  50. }
  51. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  52. .n-h1 { font-family:'Montserrat',sans-serif; font-size: clamp(34px,4.5vw,58px); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--n-dark); }
  53. .n-h1 em { font-style: italic; color: var(--n-amber); }
  54. .n-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3vw,40px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--n-dark); }
  55. .n-h2 em { font-style: normal; color: var(--n-amber); }
  56. .n-body   { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  57. .n-center { text-align: center; }
  58. .n-center .n-label { justify-content: center; }
  59. .n-btn {
  60.     display: inline-flex; align-items: center; gap: 8px;
  61.     padding: 12px 24px; border-radius: var(--n-radius-sm);
  62.     font-size: 14px; font-weight: 600; border: none;
  63.     cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font);
  64. }
  65. .n-btn-primary { background: var(--n-dark); color: #fff; }
  66. .n-btn-primary:hover { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); }
  67. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  68. .n-btn-outline:hover { border-color: var(--n-dark); transform: translateY(-1px); }
  69. .n-divider { width: 40px; height: 2px; background: var(--n-amber); border-radius: 2px; margin: 20px 0; }
  71. /* ────────────────────────────────────────────────────────────────────────────
  72.    PAGE HERO
  73.    ──────────────────────────────────────────────────────────────────────────── */
  74. .n-about-hero {
  75.     background: var(--n-cream);
  76.     padding: 120px 0 72px;
  77.     position: relative;
  78.     overflow: hidden;
  79.     border-bottom: 1px solid var(--n-border);
  80. }
  81. .n-about-hero::before {
  82.     content: '';
  83.     position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  84.     background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(192,125,42,.06) 0%, transparent 70%);
  85.     pointer-events: none;
  86. }
  88. /* ────────────────────────────────────────────────────────────────────────────
  89.    FOUNDING STORY
  90.    ──────────────────────────────────────────────────────────────────────────── */
  91. .n-story-text p {
  92.     font-family: 'Montserrat', sans-serif;
  93.     font-size: clamp(1.2rem, 2vw, 1.55rem);
  94.     line-height: 1.55;
  95.     color: #3A3D50;
  96.     letter-spacing: -.012em;
  97.     margin-bottom: 32px;
  98. }
  99. .n-story-text p:last-child { margin-bottom: 0; }
  101. /* ────────────────────────────────────────────────────────────────────────────
  102.    LEADERSHIP
  103.    ──────────────────────────────────────────────────────────────────────────── */
  104. .n-leaders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; max-width: 760px; }
  105. .n-leader {
  106.     background: var(--n-white);
  107.     border: 1px solid var(--n-border);
  108.     border-radius: var(--n-radius);
  109.     padding: 32px 28px;
  110.     transition: box-shadow .2s, border-color .2s;
  111. }
  112. .n-leader:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  113. .n-leader-avatar {
  114.     width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px;
  115.     background: var(--n-dark); color: #fff;
  116.     display: flex; align-items: center; justify-content: center;
  117.     font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .04em;
  118. }
  119. .n-leader-avatar.amber { background: var(--n-amber); }
  120. .n-leader-avatar.sage  { background: var(--n-sage); }
  121. .n-leader h4 { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: var(--n-dark); margin-bottom: 4px; }
  122. .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; }
  123. .n-leader p { font-size: 13.5px; line-height: 1.65; color: var(--n-muted); }
  125. /* ────────────────────────────────────────────────────────────────────────────
  126.    MILESTONES
  127.    ──────────────────────────────────────────────────────────────────────────── */
  128. .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; }
  129. .n-milestone { background: var(--n-white); padding: 32px 28px; transition: background .2s; }
  130. .n-milestone:hover { background: var(--n-cream); }
  131. .n-milestone-year { font-family:'Montserrat',sans-serif; font-size: 2rem; font-weight: 900; color: var(--n-amber); line-height: 1; margin-bottom: 12px; }
  132. .n-milestone h4 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 800; color: var(--n-dark); margin-bottom: 8px; }
  133. .n-milestone p  { font-size: 13px; color: var(--n-muted); line-height: 1.65; }
  135. /* ────────────────────────────────────────────────────────────────────────────
  136.    THREE RULES
  137.    ──────────────────────────────────────────────────────────────────────────── */
  138. .n-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  139. .n-rule {
  140.     padding: 32px;
  141.     border-top: 2px solid var(--n-dark);
  142. }
  143. .n-rule-num {
  144.     font-family:'Montserrat',sans-serif;
  145.     font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  146.     color: var(--n-muted-2); margin-bottom: 16px; display: block;
  147. }
  148. .n-rule h3 { font-family:'Montserrat',sans-serif; font-size: 20px; font-weight: 800; color: var(--n-dark); margin-bottom: 12px; }
  149. .n-rule p  { font-size: 14px; line-height: 1.7; color: var(--n-muted); }
  151. /* ────────────────────────────────────────────────────────────────────────────
  152.    OFFICES
  153.    ──────────────────────────────────────────────────────────────────────────── */
  154. .n-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  155. .n-office {
  156.     background: var(--n-white); border: 1px solid var(--n-border);
  157.     border-radius: var(--n-radius); padding: 36px;
  158.     transition: box-shadow .2s;
  159. }
  160. .n-office:hover { box-shadow: var(--n-shadow-md); }
  161. .n-office-tag {
  162.     display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  163.     text-transform: uppercase; color: var(--n-amber); font-family: monospace;
  164.     padding: 3px 10px; border: 1px solid rgba(192,125,42,.25); border-radius: 4px;
  165.     margin-bottom: 20px;
  166. }
  167. .n-office h3  { font-family:'Montserrat',sans-serif; font-size: 22px; font-weight: 800; color: var(--n-dark); margin-bottom: 16px; }
  168. .n-office address { font-style: normal; }
  169. .n-office address p { font-size: 14px; color: var(--n-muted); line-height: 1.8; }
  170. .n-office-phone { font-family: monospace; font-size: 14px; color: var(--n-dark); font-weight: 600; margin-top: 16px; display: block; }
  172. /* ────────────────────────────────────────────────────────────────────────────
  173.    CTA
  174.    ──────────────────────────────────────────────────────────────────────────── */
  175. .n-about-cta {
  176.     background: var(--n-dark);
  177.     padding: 96px 0;
  178.     text-align: center;
  179.     position: relative;
  180.     overflow: hidden;
  181. }
  182. .n-about-cta::before {
  183.     content: '';
  184.     position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  185.     width: 80%; height: 200%;
  186.     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.1) 0%, transparent 65%);
  187.     pointer-events: none;
  188. }
  189. .n-about-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3vw,40px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  190. .n-about-cta h2 em { font-style: italic; color: var(--n-amber); }
  191. .n-about-cta p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 52ch; margin: 0 auto 32px; line-height: 1.7; }
  192. .n-about-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  193. .n-btn-light { background: #fff; color: var(--n-dark); }
  194. .n-btn-light:hover { background: var(--n-cream-2); }
  195. .n-btn-ghost-light { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  196. .n-btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
  198. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  199. @media (max-width: 900px) {
  200.     .n-leaders    { grid-template-columns: 1fr; }
  201.     .n-milestones { grid-template-columns: repeat(3, 1fr); }
  202.     .n-rules      { grid-template-columns: 1fr; }
  203.     .n-offices    { grid-template-columns: 1fr; }
  204. }
  205. @media (max-width: 640px) {
  206.     .n-milestones { grid-template-columns: 1fr; }
  207. }
  208. </style>
  210. {# ══ HERO ═════════════════════════════════════════════════════════════════════ #}
  211. <section class="n-about-hero">
  212.     <div class="n-wrap" style="position:relative;z-index:2">
  213.         <div class="n-label">About HoneyBee</div>
  214.         <h1 class="n-h1" style="max-width:720px;margin-bottom:24px">
  215.             HoneyBee is the operating system for industrial companies managing projects, sites, assets, data, and finance.
  216.         </h1>
  217.         <p class="n-body" style="max-width:560px">
  218.             Built for EPC companies, system integrators, energy asset owners, IPP/OPEX/PPA operators, and multi-site industrial companies that need one connected platform for finance, projects, operations, IoT data, billing, O&M, and AI reporting. Engineered for the complexity of real industrial work.
  219.         </p>
  220.         <div style="display:flex;gap:32px;flex-wrap:wrap;margin-top:48px">
  221.             <div>
  222.                 <div style="font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:var(--n-dark)">2021</div>
  223.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Founded</div>
  224.             </div>
  225.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  226.             <div>
  227.                 <div style="font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:var(--n-dark)">4</div>
  228.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Markets live</div>
  229.             </div>
  230.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  231.             <div>
  232.                 <div style="font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:var(--n-dark)">3 regions</div>
  233.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Singapore · Europe · Asia</div>
  234.             </div>
  235.             <div style="width:1px;background:var(--n-border-md);align-self:stretch"></div>
  236.             <div>
  237.                 {% set _aboutUserPrice = '' %}
  238.                 {% for pd in packageDetails %}
  239.                     {% if _aboutUserPrice == '' and pd.freeFlag is defined and pd.freeFlag != '1' and pd.contactSalesFlag is defined and pd.contactSalesFlag != '1' and pd.euPerUserPrice is defined %}
  240.                         {% set _aboutUserPrice = pd.euPerUserPrice.monthlyPrice %}
  241.                     {% endif %}
  242.                 {% endfor %}
  243.                 <div style="font-family:'Montserrat',sans-serif;font-size:28px;font-weight:900;color:var(--n-dark)">€{{ _aboutUserPrice }}</div>
  244.                 <div style="font-size:12px;color:var(--n-muted-2);font-weight:600;margin-top:2px">Per user / month</div>
  245.             </div>
  246.         </div>
  247.     </div>
  248. </section>
  250. {# ══ FOUNDING STORY ═══════════════════════════════════════════════════════════ #}
  251. <section class="n-sec" style="background:var(--n-white);border-bottom:1px solid var(--n-border)">
  252.     <div class="n-wrap-sm">
  253.         <div class="n-label">Our story</div>
  254.         <div class="n-story-text">
  255.             <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>
  256.             <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. Jointly developed through German–Bangladeshi engineering collaboration, with early field rollout in Bangladesh — purpose-built for EPC companies, system integrators, IPP operators, and industrial businesses, not retrofitted from generic SaaS.</p>
  257.             <p>HoneyBee IoT (Pte.) Ltd. is registered in Singapore under UEN 202507612D, with European coordination and partner support from Germany. <strong>HoneyBee is not an EPC contractor or project developer. We build the software, Edge+ data layer, and AI-enabled operating system that EPC, system integration, energy asset, and industrial companies run on.</strong></p>
  258.             <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>
  259.         </div>
  260.     </div>
  261. </section>
  263. {# ══ LEADERSHIP ═══════════════════════════════════════════════════════════════ #}
  264. <section class="n-sec" style="background:var(--n-cream)">
  265.     <div class="n-wrap">
  266.         <div class="n-center">
  267.             <div class="n-label">Leadership</div>
  268.             <h2 class="n-h2">The people who run <em>HoneyBee.</em></h2>
  269.         </div>
  270.         <div class="n-leaders">
  271.             <div class="n-leader">
  272.                 <div class="n-leader-avatar">KY</div>
  273.                 <h4>Khandoker Mozibul Yasser</h4>
  274.                 <div class="n-leader-role">Co-founder · CTO</div>
  275.                 <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>
  276.             </div>
  277.             <div class="n-leader">
  278.                 <div class="n-leader-avatar amber">EH</div>
  279.                 <h4>Emrul Hasan</h4>
  280.                 <div class="n-leader-role">Co-founder · CSO</div>
  281.                 <p>Former management consultant in energy &amp; utilities. Leads strategy, partnerships, and European expansion from our Germany HQ.</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 Edge+ 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. Edge+ 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>One public per-user price. No sales calls required to see the number. Hardware, Edge+, and ML deployment are quoted separately on request.</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>Every feature ships into production use before it hits a marketing page. We demo what actually works, not what's coming soon.</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/footer/central_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>