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. 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>
  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, HoneyCore 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.                 <div class="n-leader-role">HoneyBee IoT Ltd.</div>
  276.                 <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>
  277.             </div>
  278.             <div class="n-leader">
  279.                 <div class="n-leader-avatar amber">EH</div>
  280.                 <h4>Emrul Hasan</h4>
  281.                 <div class="n-leader-role">Co-founder · CSO</div>
  282.                 <div class="n-leader-role">HoneyBee IoT Ltd.</div>
  283.                 <p>Former management consultant in energy &amp; utilities. Leads strategy, partnerships, and European expansion from our Germany HQ.</p>
  284.             </div>
  285.         </div>
  286.     </div>
  287. </section>
  289. {# ══ MILESTONES ═══════════════════════════════════════════════════════════════ #}
  290. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border)">
  291.     <div class="n-wrap">
  292.         <div class="n-center">
  293.             <div class="n-label">Milestones</div>
  294.             <h2 class="n-h2">From idea to platform.</h2>
  295.         </div>
  296.         <div class="n-milestones">
  297.             <div class="n-milestone">
  298.                 <div class="n-milestone-year">2021</div>
  299.                 <h4>Founded</h4>
  300.                 <p>HoneyBee incorporated and first internal pilot launched at a solar EPC company in Germany.</p>
  301.             </div>
  302.             <div class="n-milestone">
  303.                 <div class="n-milestone-year">2022</div>
  304.                 <h4>First 10 clients</h4>
  305.                 <p>Product goes live with core finance, HR, and projects modules. Engineering team scales across multiple locations.</p>
  306.             </div>
  307.             <div class="n-milestone">
  308.                 <div class="n-milestone-year">2023</div>
  309.                 <h4>IoT layer released</h4>
  310.                 <p>Direct integration with PLCs, Raspberry Pi, sensors, and energy systems. HoneyBee HoneyCore Edge EMS site intelligence layer launched.</p>
  311.             </div>
  312.             <div class="n-milestone">
  313.                 <div class="n-milestone-year">2024</div>
  314.                 <h4>DATEV &amp; EU compliance</h4>
  315.                 <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>
  316.             </div>
  317.             <div class="n-milestone">
  318.                 <div class="n-milestone-year">2025</div>
  319.                 <h4>Industrial scale-up</h4>
  320.                 <p>EPC, IPP/OPEX/PPA, and multi-site operator deployments. HoneyCore Edge EMS devices in field. Partner network expansion.</p>
  321.             </div>
  322.         </div>
  323.     </div>
  324. </section>
  326. {# ══ THREE RULES ══════════════════════════════════════════════════════════════ #}
  327. <section class="n-sec" style="background:var(--n-cream-2)">
  328.     <div class="n-wrap">
  329.         <div class="n-center">
  330.             <div class="n-label">What we believe</div>
  331.             <h2 class="n-h2">Three rules we don't break.</h2>
  332.         </div>
  333.         <div class="n-rules">
  334.             <div class="n-rule">
  335.                 <span class="n-rule-num">One</span>
  336.                 <h3>Transparent pricing.</h3>
  337.                 <p>One public per-user price. No sales calls required to see the number. Hardware, HoneyCore Edge EMS, and ML deployment are quoted separately on request.</p>
  338.             </div>
  339.             <div class="n-rule">
  340.                 <span class="n-rule-num">Two</span>
  341.                 <h3>Your data, your access.</h3>
  342.                 <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>
  343.             </div>
  344.             <div class="n-rule">
  345.                 <span class="n-rule-num">Three</span>
  346.                 <h3>Built for work, not slides.</h3>
  347.                 <p>Every feature ships into production use before it hits a marketing page. We demo what actually works, not what's coming soon.</p>
  348.             </div>
  349.         </div>
  350.     </div>
  351. </section>
  353. {# ══ OFFICES ══════════════════════════════════════════════════════════════════ #}
  354. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border)">
  355.     <div class="n-wrap">
  356.         <div class="n-center">
  357.             <div class="n-label">Offices</div>
  358.             <h2 class="n-h2">Global reach. <em>One team.</em></h2>
  359.         </div>
  360.         <div class="n-offices">
  361.             <div class="n-office">
  362.                 <div class="n-office-tag">Headquarters</div>
  363.                 <h3>Singapore</h3>
  364.                 <address>
  365.                     <p>2 Venture Drive, #19-21<br>Vision Exchange<br>Singapore 608526</p>
  366.                 </address>
  367.                 <div style="margin-top:20px;padding-top:20px;border-top:1px solid var(--n-border)">
  368.                     <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>
  369.                     <div style="display:flex;flex-wrap:wrap;gap:6px">
  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)">Sales</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)">Strategy</span>
  372.                         <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>
  373.                         <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>
  374.                     </div>
  375.                 </div>
  376.             </div>
  377.             <div class="n-office">
  378.                 <div class="n-office-tag">Europe</div>
  379.                 <h3>Germany</h3>
  380.                 <address>
  381.                     <p>Brühlweg 1<br>88451 Dettingen an der Iller<br>Germany</p>
  382.                 </address>
  383.                 <span class="n-office-phone">+49 176 34616155</span>
  384.                 <div style="margin-top:20px;padding-top:20px;border-top:1px solid var(--n-border)">
  385.                     <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>
  386.                     <div style="display:flex;flex-wrap:wrap;gap:6px">
  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)">European operations</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)">DATEV &amp; compliance</span>
  389.                         <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>
  390.                         <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>
  391.                     </div>
  392.                 </div>
  393.             </div>
  394.         </div>
  395.     </div>
  396. </section>
  398. {# ══ CTA / CAREERS ════════════════════════════════════════════════════════════ #}
  399. <section class="n-about-cta">
  400.     <div class="n-wrap" style="position:relative;z-index:2">
  401.         <div class="n-label" style="color:var(--n-amber);justify-content:center">
  402.             Careers
  403.         </div>
  404.         <h2>Work on real industrial software problems.</h2>
  405.         <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>
  406.         <div class="n-about-cta-btns">
  407.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  408.                 <i class="fa-solid fa-briefcase"></i> View open positions
  409.             </a>
  410.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  411.                 <i class="fa-solid fa-envelope"></i> Say hello
  412.             </a>
  413.         </div>
  414.     </div>
  415. </section>
  417. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  419. <script>
  420. (function () {
  421.     var els = document.querySelectorAll('.n-leader,.n-milestone,.n-rule,.n-office');
  422.     els.forEach(function (el) {
  423.         el.style.opacity = '0';
  424.         el.style.transform = 'translateY(16px)';
  425.         el.style.transition = 'opacity .45s ease, transform .45s ease';
  426.     });
  427.     var io = new IntersectionObserver(function (entries) {
  428.         entries.forEach(function (en) {
  429.             if (en.isIntersecting) { en.target.style.opacity = '1'; en.target.style.transform = 'translateY(0)'; io.unobserve(en.target); }
  430.         });
  431.     }, { threshold: 0.1 });
  432.     els.forEach(function (el, i) {
  433.         el.style.transitionDelay = (i % 4 * 0.07) + 's';
  434.         io.observe(el);
  435.     });
  436. })();
  437. </script>