src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/investor_snapshot.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. {# ─── INVESTOR SNAPSHOT — _CENTRAL_ public marketing page ─── #}
  5. <style>
  6. /* Page-scoped layout only — colours/typography reuse the shared n-* tokens */
  7. .is-hero { background: var(--n-cream); padding: 130px 0 80px; position: relative; overflow: hidden; }
  8. .is-hero::before {
  9.     content:''; position:absolute; top:0; right:0; width:55%; height:100%;
  10.     background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(192,125,42,.07) 0%, transparent 65%),
  11.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  12.     pointer-events:none;
  13. }
  14. .is-hero-inner { max-width: 820px; position: relative; }
  15. .is-hero h1 {
  16.     font-family:'Montserrat',sans-serif; font-size: clamp(34px,4.6vw,58px); font-weight: 900;
  17.     line-height: 1.08; letter-spacing: -.02em; color: var(--n-dark); margin: 0 0 22px;
  18. }
  19. .is-hero h1 em { font-style: normal; color: var(--n-amber); }
  20. .is-hero-sub { font-size: 18px; line-height: 1.7; color: var(--n-muted); max-width: 680px; }
  21. .is-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
  23. /* Two-column ICP block */
  24. .is-icp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
  25. .is-icp-card {
  26.     background: var(--n-white); border: 1px solid var(--n-border-md);
  27.     border-radius: var(--n-radius-lg); padding: 36px; box-shadow: var(--n-shadow-sm);
  28. }
  29. .is-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
  30. .is-chips li {
  31.     font-size: 12.5px; color: var(--n-dark); font-weight: 600;
  32.     padding: 7px 14px; background: var(--n-cream);
  33.     border: 1px solid var(--n-border-md); border-radius: 100px;
  34. }
  36. /* Revenue model cards */
  37. .is-rev-grid {
  38.     display: grid; grid-template-columns: repeat(3, 1fr);
  39.     gap: 1px; background: var(--n-border-md);
  40.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  41.     margin-top: 48px;
  42. }
  43. .is-rev { background: var(--n-white); padding: 28px; transition: background .2s; }
  44. .is-rev:hover { background: var(--n-cream); }
  45. .is-rev-num {
  46.     width: 34px; height: 34px; border-radius: 9px; margin-bottom: 16px;
  47.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  48.     color: var(--n-amber); font-size: 13px; font-weight: 800; font-family: monospace;
  49.     display: flex; align-items: center; justify-content: center;
  50. }
  51. .is-rev h3 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  52. .is-rev p  { font-size: 13px; line-height: 1.6; color: var(--n-muted); }
  54. /* Layered architecture rows */
  55. .is-layers { display: grid; gap: 16px; margin-top: 40px; }
  56. .is-layer {
  57.     display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  58.     background: var(--n-white); border: 1px solid var(--n-border-md);
  59.     border-left: 4px solid var(--n-amber);
  60.     border-radius: var(--n-radius); padding: 26px 32px; box-shadow: var(--n-shadow-xs);
  61. }
  62. .is-layer.is-layer-sage  { border-left-color: var(--n-sage); }
  63. .is-layer.is-layer-slate { border-left-color: var(--n-slate); }
  64. .is-layer-name { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: var(--n-dark); }
  65. .is-layer p { font-size: 14px; line-height: 1.65; color: var(--n-muted); margin: 0; }
  67. /* Defensibility band */
  68. .is-moat {
  69.     margin-top: 40px; padding: 40px 44px;
  70.     background: var(--n-dark); border-radius: var(--n-radius-lg); box-shadow: var(--n-shadow-md);
  71. }
  72. .is-moat .n-label { color: var(--n-amber); }
  73. .is-moat .n-label::before { background: var(--n-amber); }
  74. .is-moat p { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.86); margin: 0; text-align: left; }
  75. .is-moat p b { color: #fff; }
  77. /* Traction metric grid */
  78. .is-metric-grid {
  79.     display: grid; grid-template-columns: repeat(3, 1fr);
  80.     gap: 16px; margin-top: 40px;
  81. }
  82. .is-metric {
  83.     background: var(--n-white); border: 1px solid var(--n-border-md);
  84.     border-radius: var(--n-radius); padding: 24px;
  85. }
  86. .is-metric-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--n-muted); text-transform: uppercase; }
  87. .is-metric-value { font-family:'Montserrat',sans-serif; font-size: 40px; font-weight: 900; color: var(--n-dark); line-height: 1; margin: 14px 0 16px; }
  88. .is-pill {
  89.     display: inline-flex; align-items: center; gap: 6px;
  90.     font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  91.     padding: 5px 11px; border-radius: 100px;
  92. }
  93. .is-pill::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  94. .is-pill-confirmed  { color: var(--n-sage);  background: var(--n-sage-dim); }
  95. .is-pill-estimated  { color: var(--n-amber); background: var(--n-amber-dim); }
  96. .is-pill-pilot      { color: var(--n-slate); background: var(--n-slate-dim); }
  97. .is-pill-pipeline   { color: var(--n-navy);  background: rgba(30,58,110,.08); }
  98. .is-pill-historical { color: var(--n-muted); background: rgba(26,29,46,.06); }
  99. .is-nda-note { font-size: 13px; color: var(--n-muted-2); margin-top: 24px; display: inline-flex; align-items: flex-start; gap: 8px; }
  100. .is-nda-note i { color: var(--n-sage); margin-top: 3px; }
  102. /* Closing CTA band */
  103. .is-cta { background: var(--n-cream-2); padding: 100px 0; text-align: center; border-top: 1px solid var(--n-border); }
  104. .is-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: var(--n-dark); margin-bottom: 16px; }
  105. .is-cta h2 em { font-style: normal; color: var(--n-amber); }
  106. .is-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
  108. @media (max-width: 1040px) {
  109.     .is-rev-grid, .is-metric-grid { grid-template-columns: 1fr 1fr; }
  110.     .is-icp-grid { grid-template-columns: 1fr; }
  111.     .is-layer { grid-template-columns: 1fr; gap: 12px; }
  112. }
  113. @media (max-width: 720px) {
  114.     .is-rev-grid, .is-metric-grid { grid-template-columns: 1fr; }
  115. }
  116. </style>
  118. {# ══ 1. HERO ══════════════════════════════════════════════════════════════════ #}
  119. <section class="is-hero">
  120.     <div class="n-wrap">
  121.         <div class="is-hero-inner">
  122.             <span class="n-eyebrow n-label">Investor Snapshot</span>
  123.             <h1>
  124.                 A vertical operating system for project-based energy, engineering and <em>industrial</em> companies.
  125.             </h1>
  126.             <p class="is-hero-sub">
  127.                 HoneyBee starts with ERP / project execution and expands into site-level energy intelligence
  128.                 through HoneyCore.
  129.             </p>
  130.             <div class="is-actions">
  131.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  132.                     Request Investor Brief <i class="fa-solid fa-arrow-right"></i>
  133.                 </a>
  134.             </div>
  135.         </div>
  136.     </div>
  137. </section>
  139. {# ══ 2. POSITIONING ══════════════════════════════════════════════════════════ #}
  140. <section class="n-sec">
  141.     <div class="n-wrap-sm">
  142.         <span class="n-label">Positioning</span>
  143.         <h2 class="n-h2">One operating system for the whole <em class="n-em">project lifecycle.</em></h2>
  144.         <p class="n-body n-mt-6">
  145.             HoneyBee is a vertical operating system for project-based energy, engineering and industrial
  146.             companies. We begin where these companies feel the most pain — ERP and project execution, where
  147.             quotation, procurement, inventory, site progress, billing and finance must move as one thread — and
  148.             then expand outward into site-level energy intelligence through HoneyCore. The same platform that runs
  149.             the project also reads the asset, so a customer can grow from running their business on HoneyBee to
  150.             instrumenting and optimising the energy infrastructure they build and operate.
  151.         </p>
  152.     </div>
  153. </section>
  155. {# ══ 3. ICP — BEACHHEAD & EXPANSION ══════════════════════════════════════════ #}
  156. <section class="n-sec is-bg-cream" style="background:var(--n-cream-2)">
  157.     <div class="n-wrap">
  158.         <div class="n-center">
  159.             <span class="n-label">Ideal customer profile</span>
  160.             <h2 class="n-h2">A focused beachhead, a <em class="n-em">large expansion</em> path.</h2>
  161.         </div>
  162.         <div class="is-icp-grid">
  163.             <div class="is-icp-card">
  164.                 <span class="n-label">Beachhead ICP</span>
  165.                 <h3 class="n-h3">Where we win first</h3>
  166.                 <ul class="is-chips">
  167.                     {% for c in [
  168.                         'EPC', 'Solar', 'Renewable energy', 'Engineering', 'Construction',
  169.                         'System integration', 'O&M', 'Project-based industrial'
  170.                     ] %}<li>{{ c }}</li>{% endfor %}
  171.                 </ul>
  172.             </div>
  173.             <div class="is-icp-card">
  174.                 <span class="n-label">Expansion ICP</span>
  175.                 <h3 class="n-h3">Where we grow next</h3>
  176.                 <ul class="is-chips">
  177.                     {% for c in [
  178.                         'General SMEs', 'Multi-site industrial operators', 'Energy infrastructure owners',
  179.                         'IPP / OPEX / PPA operators', 'O&M companies', 'Partner-led country rollouts'
  180.                     ] %}<li>{{ c }}</li>{% endfor %}
  181.                 </ul>
  182.             </div>
  183.         </div>
  184.     </div>
  185. </section>
  187. {# ══ 4. REVENUE MODEL ════════════════════════════════════════════════════════ #}
  188. <section class="n-sec">
  189.     <div class="n-wrap">
  190.         <div class="n-center">
  191.             <span class="n-label">Revenue model</span>
  192.             <h2 class="n-h2">Six streams across <em class="n-em">software, hardware and services.</em></h2>
  193.         </div>
  194.         <div class="is-rev-grid">
  195.             {% set _rev = [
  196.                 {t:'SaaS subscription',            d:'Per user, per month subscription to the HoneyBee platform.'},
  197.                 {t:'Project ERP premium',          d:'Premium subscription tier for full project ERP and execution.'},
  198.                 {t:'HoneyCore Edge EMS / Edge+',   d:'Site assessment plus deployment fee for HoneyCore Edge energy monitoring.'},
  199.                 {t:'Enterprise & private cloud',   d:'Enterprise, private cloud and local AI setup for larger deployments.'},
  200.                 {t:'Implementation & integration', d:'Implementation, customization and integration services.'},
  201.                 {t:'Partner / channel',            d:'Partner and channel revenue from country rollouts.'}
  202.             ] %}
  203.             {% for r in _rev %}
  204.                 <div class="is-rev">
  205.                     <div class="is-rev-num">{{ loop.index }}</div>
  206.                     <h3>{{ r.t }}</h3>
  207.                     <p>{{ r.d }}</p>
  208.                 </div>
  209.             {% endfor %}
  210.         </div>
  211.     </div>
  212. </section>
  214. {# ══ 5. ARCHITECTURE — CORE / DEPLOYMENT / SCALE ═════════════════════════════ #}
  215. <section class="n-sec" style="padding-top:0">
  216.     <div class="n-wrap">
  217.         <div class="n-center">
  218.             <span class="n-label">How it compounds</span>
  219.             <h2 class="n-h2">A scalable core, a <em class="n-em">high-value</em> deployment layer.</h2>
  220.         </div>
  221.         <div class="is-layers">
  222.             <div class="is-layer">
  223.                 <div class="is-layer-name">Scalable core</div>
  224.                 <p>Business ERP + Project ERP + AI reporting — the recurring software foundation every customer runs on.</p>
  225.             </div>
  226.             <div class="is-layer is-layer-sage">
  227.                 <div class="is-layer-name">High-value deployment</div>
  228.                 <p>HoneyCore Edge EMS / Edge+ and energy-infrastructure intelligence — site assessment and deployment that attaches hardware and monitoring revenue to the core.</p>
  229.             </div>
  230.             <div class="is-layer is-layer-slate">
  231.                 <div class="is-layer-name">Services &amp; channel</div>
  232.                 <p>Implementation, customization and integration services, plus partner and channel revenue in country rollouts — the lines that scale reach without scaling headcount one-to-one.</p>
  233.             </div>
  234.         </div>
  235.     </div>
  236. </section>
  238. {# ══ 6. DEFENSIBILITY ════════════════════════════════════════════════════════ #}
  239. <section class="n-sec" style="padding-top:0">
  240.     <div class="n-wrap-sm">
  241.         <div class="is-moat">
  242.             <span class="n-label">Defensibility</span>
  243.             <p>
  244.                 <b>HoneyBee combines project ERP, finance, procurement, field execution, O&amp;M, energy-asset data,
  245.                 HoneyCore Edge EMS and governed AI into one workflow.</b> Generic ERPs don't understand EPC/project
  246.                 execution deeply. Project tools don't connect to finance and procurement. SCADA/EMS tools don't
  247.                 connect to ERP, billing and O&amp;M. HoneyBee connects all three layers.
  248.             </p>
  249.         </div>
  250.     </div>
  251. </section>
  253. {# ══ 7. TRACTION SNAPSHOT ════════════════════════════════════════════════════ #}
  254. <section class="n-sec" style="padding-top:0;background:var(--n-cream-2)">
  255.     <div class="n-wrap">
  256.         <div class="n-center">
  257.             <span class="n-label">Traction snapshot</span>
  258.             <h2 class="n-h2">The numbers, <em class="n-em">shared under NDA.</em></h2>
  259.         </div>
  260.         <div class="is-metric-grid">
  261.             {% set _metrics = [
  262.                 {l:'Active SaaS companies',          s:'Confirmed'},
  263.                 {l:'Paying customers',               s:'Confirmed'},
  264.                 {l:'Active users',                   s:'Confirmed'},
  265.                 {l:'MRR / ARR',                      s:'Estimated'},
  266.                 {l:'Qualified pipeline',             s:'Pipeline'},
  267.                 {l:'Implementation deployments',     s:'Historical'},
  268.                 {l:'HoneyCore pilot / live sites',   s:'Pilot'},
  269.                 {l:'Countries served',               s:'Confirmed'},
  270.                 {l:'Partner pipeline',               s:'Pipeline'}
  271.             ] %}
  272.             {% for m in _metrics %}
  273.                 <div class="is-metric">
  274.                     <div class="is-metric-label">{{ m.l }}</div>
  275.                     <div class="is-metric-value">&mdash;</div>
  276.                     <span class="is-pill is-pill-{{ m.s|lower }}">{{ m.s }}</span>
  277.                 </div>
  278.             {% endfor %}
  279.         </div>
  280.         <div class="is-nda-note">
  281.             <i class="fa-solid fa-lock"></i>
  282.             <span>Figures shared under NDA in the full investor brief.</span>
  283.         </div>
  284.     </div>
  285. </section>
  287. {# ══ 8. CLOSING CTA BAND ═════════════════════════════════════════════════════ #}
  288. <section class="is-cta">
  289.     <div class="n-wrap-sm">
  290.         <h2>Request the <em>Investor Brief.</em></h2>
  291.         <p class="n-body" style="max-width:54ch;margin:0 auto">
  292.             Get the full picture — traction figures, revenue detail, roadmap and the HoneyCore expansion thesis —
  293.             under NDA.
  294.         </p>
  295.         <div class="is-cta-actions">
  296.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  297.                 Request Investor Brief <i class="fa-solid fa-arrow-right"></i>
  298.             </a>
  299.         </div>
  300.     </div>
  301. </section>
  303. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}