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

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  5. :root {
  6.     --pol-amber:   #C07D2A;
  7.     --pol-dark:    #1A1D2E;
  8.     --pol-dark-2:  #252840;
  9.     --pol-cream:   #F7F5F0;
  10.     --pol-cream-2: #F0EDE5;
  11.     --pol-white:   #FFFFFF;
  12.     --pol-muted:   #6B6E7F;
  13.     --pol-muted-2: #9395A5;
  14.     --pol-border:  rgba(26,29,46,.09);
  15.     --pol-border-md: rgba(26,29,46,.12);
  16.     --pol-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  17.     --pol-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  18.     --pol-radius:  12px;
  19.     --pol-font:    'DM Sans', system-ui, sans-serif;
  20. }
  21. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  22. body { background: var(--pol-cream); font-family: var(--pol-font); color: var(--pol-dark); text-align: left; }
  23. a { text-decoration: none; }
  25. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  26. .sol-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  27. .sol-wrap-sm { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
  28. .sol-sec     { padding: 80px 0; }
  29. .sol-label {
  30.     display: inline-flex; align-items: center; gap: 8px;
  31.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  32.     color: var(--pol-amber); margin-bottom: 16px;
  33. }
  34. .sol-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  35. .sol-h1 { font-family:'Montserrat',sans-serif; font-size: clamp(30px,4vw,52px); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; color: var(--pol-dark); }
  36. .sol-h1 em { font-style: italic; color: var(--pol-amber); }
  37. .sol-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(24px,2.8vw,38px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--pol-dark); }
  38. .sol-body   { font-size: 16px; line-height: 1.75; color: var(--pol-muted); }
  39. .sol-center { text-align: center; }
  40. .sol-center .sol-label { justify-content: center; }
  42. /* ── Button ─────────────────────────────────────────────────────────────────── */
  43. .n-btn {
  44.     display: inline-flex; align-items: center; gap: 8px;
  45.     padding: 12px 26px; border-radius: 8px;
  46.     font-size: 14px; font-weight: 600; border: none;
  47.     cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--pol-font);
  48. }
  49. .n-btn-amber { background: var(--pol-amber); color: #fff; }
  50. .n-btn-amber:hover { background: #a96c22; color: #fff; transform: translateY(-1px); }
  51. .n-btn-outline { background: transparent; border: 1.5px solid var(--pol-border-md); color: var(--pol-dark); }
  52. .n-btn-outline:hover { border-color: var(--pol-dark); transform: translateY(-1px); }
  53. .n-btn-light  { background: #fff; color: var(--pol-dark); }
  54. .n-btn-light:hover { background: var(--pol-cream-2); }
  55. .n-btn-ghost-light { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  56. .n-btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
  58. /* ── Hero ───────────────────────────────────────────────────────────────────── */
  59. .sol-hero {
  60.     background: var(--pol-cream);
  61.     padding: 120px 0 72px;
  62.     position: relative; overflow: hidden;
  63.     border-bottom: 1px solid var(--pol-border);
  64. }
  65. .sol-hero::before {
  66.     content: '';
  67.     position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  68.     background: radial-gradient(ellipse 80% 80% at 80% 50%, rgba(192,125,42,.06) 0%, transparent 70%);
  69.     pointer-events: none;
  70. }
  72. /* ── Solution Cards Grid ────────────────────────────────────────────────────── */
  73. .sol-grid {
  74.     display: grid;
  75.     grid-template-columns: repeat(2, 1fr);
  76.     gap: 24px;
  77.     margin-top: 48px;
  78. }
  79. .sol-card {
  80.     background: var(--pol-white);
  81.     border: 1px solid var(--pol-border);
  82.     border-radius: var(--pol-radius);
  83.     padding: 30px;
  84.     transition: box-shadow .2s, border-color .2s, transform .2s;
  85. }
  86. .sol-card:hover {
  87.     border-color: var(--pol-border-md);
  88.     box-shadow: var(--pol-shadow-md);
  89.     transform: translateY(-2px);
  90. }
  91. .sol-card-icon {
  92.     width: 48px; height: 48px; border-radius: 10px;
  93.     background: rgba(192,125,42,.10);
  94.     display: flex; align-items: center; justify-content: center;
  95.     margin-bottom: 20px;
  96.     color: var(--pol-amber); font-size: 20px;
  97. }
  98. .sol-card h3 {
  99.     font-family: 'Montserrat', sans-serif;
  100.     font-size: 18px; font-weight: 800; color: var(--pol-dark);
  101.     margin-bottom: 10px;
  102.     display: flex; align-items: center; gap: 10px;
  103. }
  104. .sol-card h3::before {
  105.     content: ''; display: block;
  106.     width: 3px; height: 18px; background: var(--pol-amber);
  107.     border-radius: 2px; flex-shrink: 0;
  108. }
  109. .sol-card-intro {
  110.     font-size: 14px; line-height: 1.7; color: var(--pol-muted);
  111.     margin-bottom: 16px;
  112. }
  113. .sol-card ul {
  114.     list-style: none; padding: 0; margin: 0;
  115. }
  116. .sol-card ul li {
  117.     font-size: 13.5px; color: var(--pol-muted); line-height: 1.65;
  118.     padding: 6px 0 6px 20px;
  119.     position: relative;
  120.     border-top: 1px solid var(--pol-border);
  121. }
  122. .sol-card ul li:first-child { border-top: none; }
  123. .sol-card ul li::before {
  124.     content: '→';
  125.     position: absolute; left: 0;
  126.     color: var(--pol-amber); font-size: 12px; font-weight: 700;
  127.     line-height: 1.65;
  128. }
  130. /* Wide card (last one if odd count) */
  131. .sol-card-wide { grid-column: 1 / -1; }
  133. /* ── CTA Section ────────────────────────────────────────────────────────────── */
  134. .sol-cta {
  135.     background: var(--pol-dark);
  136.     padding: 96px 0;
  137.     text-align: center;
  138.     position: relative; overflow: hidden;
  139. }
  140. .sol-cta::before {
  141.     content: '';
  142.     position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  143.     width: 80%; height: 200%;
  144.     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.10) 0%, transparent 65%);
  145.     pointer-events: none;
  146. }
  147. .sol-cta-label { color: var(--pol-amber); justify-content: center; }
  148. .sol-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(24px,2.8vw,38px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  149. .sol-cta h2 em { font-style: italic; color: var(--pol-amber); }
  150. .sol-cta p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 52ch; margin: 0 auto 32px; line-height: 1.7; }
  151. .sol-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  153. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  154. @media (max-width: 860px) {
  155.     .sol-grid { grid-template-columns: 1fr; }
  156.     .sol-card-wide { grid-column: auto; }
  157. }
  158. @media (max-width: 640px) {
  159.     .sol-hero { padding: 90px 0 56px; }
  160. }
  161. </style>
  163. {# ══ HERO ══════════════════════════════════════════════════════════════════════ #}
  164. <section class="sol-hero">
  165.     <div class="sol-wrap" style="position:relative;z-index:2">
  166.         <div class="sol-label">Solutions</div>
  167.         <h1 class="sol-h1" style="max-width:820px;margin-bottom:24px">
  168.             Built for companies managing projects, sites, assets, and operational data across <em>multiple locations.</em>
  169.         </h1>
  170.         <p class="sol-body" style="max-width:620px;margin-bottom:16px">
  171.             HoneyBee is the operating layer for EPC companies, system integrators, energy asset owners, and multi-site industrial businesses.
  172.         </p>
  173.         <p style="font-size:13px;color:rgba(26,29,46,.45);max-width:560px;margin-bottom:32px;line-height:1.6">
  174.             <strong style="color:rgba(26,29,46,.6)">Important:</strong> HoneyBee is not an EPC contractor or project developer. It provides the digital platform these companies use to manage their own projects, sites, billing, O&M, and operational workflows.
  175.         </p>
  176.         <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  177.             <i class="fa-solid fa-arrow-right"></i> Request Project Solution
  178.         </a>
  179.     </div>
  180. </section>
  182. {# ══ SOLUTION CARDS ════════════════════════════════════════════════════════════ #}
  183. <section class="sol-sec" style="background:var(--pol-cream)">
  184.     <div class="sol-wrap">
  185.         <div class="sol-center">
  186.             <div class="sol-label">Who we serve</div>
  187.             <h2 class="sol-h2">Built for the companies that <em>build and operate.</em></h2>
  188.         </div>
  189.         <div style="max-width:720px;margin:24px auto 0;padding:20px 24px;background:var(--pol-white);border:1px solid var(--pol-border-md);border-radius:var(--pol-radius)">
  190.             <div style="font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pol-amber);margin-bottom:14px">Who is this for?</div>
  191.             <div style="display:flex;flex-wrap:wrap;gap:10px;">
  192.                 <span style="padding:6px 16px;border-radius:100px;background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.2);font-size:13px;font-weight:600;color:var(--pol-dark)">EPC companies</span>
  193.                 <span style="padding:6px 16px;border-radius:100px;background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.2);font-size:13px;font-weight:600;color:var(--pol-dark)">System integrators</span>
  194.                 <span style="padding:6px 16px;border-radius:100px;background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.2);font-size:13px;font-weight:600;color:var(--pol-dark)">Energy asset owners / IPP / OPEX / PPA operators</span>
  195.                 <span style="padding:6px 16px;border-radius:100px;background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.2);font-size:13px;font-weight:600;color:var(--pol-dark)">Multi-site industrial companies</span>
  196.             </div>
  197.         </div>
  199.         <div class="sol-grid">
  201.             {# EPC Companies #}
  202.             <div class="sol-card">
  203.                 <div class="sol-card-icon"><i class="fa-solid fa-hard-hat"></i></div>
  204.                 <h3>EPC Companies</h3>
  205.                 <p class="sol-card-intro"><strong style="color:var(--pol-dark)">Problem:</strong> Projects are managed across Excel, emails, and disconnected systems. Margin leaks between proposal and execution. Site data and billing are not connected.</p>
  206.                 <p class="sol-card-intro" style="margin-top:10px"><strong style="color:var(--pol-dark)">Solution:</strong> HoneyBee connects proposal, project execution, procurement, cost tracking, billing, and O&M into one system — so every project stays controlled from quotation to handover.</p>
  207.                 <ul>
  208.                     <li>Proposals, bid management, and quotation workflow</li>
  209.                     <li>Procurement, RFQ, supplier tracking, and purchase orders</li>
  210.                     <li>Site execution, WBS, milestones, and commissioning</li>
  211.                     <li>Cost control, project finance, and budget vs actual</li>
  212.                     <li>O&amp;M handover documentation and field operations</li>
  213.                     <li>Multi-project visibility from one command center</li>
  214.                 </ul>
  215.             </div>
  217.             {# System Integrators #}
  218.             <div class="sol-card">
  219.                 <div class="sol-card-icon"><i class="fa-solid fa-network-wired"></i></div>
  220.                 <h3>System Integrators</h3>
  221.                 <p class="sol-card-intro"><strong style="color:var(--pol-dark)">Problem:</strong> Requirements, integrations, configurations, and commissioning are scattered across documents and tools, with no structured delivery control.</p>
  222.                 <p class="sol-card-intro" style="margin-top:10px"><strong style="color:var(--pol-dark)">Solution:</strong> HoneyBee manages delivery workflows, integrations, technical coordination, commissioning tracking, and support operations in one controlled environment.</p>
  223.                 <ul>
  224.                     <li>Technical project delivery and configuration management</li>
  225.                     <li>Hardware deployment and local infrastructure coordination</li>
  226.                     <li>Customer-specific integration workflow tracking</li>
  227.                     <li>Support operations and service management</li>
  228.                     <li>Recurring service billing and customer records</li>
  229.                     <li>Multi-customer project visibility</li>
  230.                 </ul>
  231.             </div>
  233.             {# Energy Project Developers #}
  234.             <div class="sol-card">
  235.                 <div class="sol-card-icon"><i class="fa-solid fa-solar-panel"></i></div>
  236.                 <h3>Energy Asset Owners</h3>
  237.                 <p class="sol-card-intro"><strong style="color:var(--pol-dark)">Problem:</strong> Site data, billing, and operations are disconnected. Revenue visibility depends on manual reporting.</p>
  238.                 <p class="sol-card-intro" style="margin-top:10px"><strong style="color:var(--pol-dark)">Solution:</strong> HoneyBee connects Edge+ and site data with billing, O&M, and reporting — enabling data-driven revenue and performance visibility.</p>
  239.                 <ul>
  240.                     <li>Asset performance and availability monitoring</li>
  241.                     <li>Edge+ site data connected to billing workflows</li>
  242.                     <li>Financial models and project finance workflows</li>
  243.                     <li>O&amp;M tracking and service management</li>
  244.                     <li>Reporting and documentation for stakeholders</li>
  245.                     <li>IoT and Edge+ integration for operational visibility</li>
  246.                 </ul>
  247.             </div>
  249.             {# IPP / OPEX / PPA Operators #}
  250.             <div class="sol-card">
  251.                 <div class="sol-card-icon"><i class="fa-solid fa-bolt"></i></div>
  252.                 <h3>IPP / OPEX / PPA Operators</h3>
  253.                 <p class="sol-card-intro"><strong style="color:var(--pol-dark)">Problem:</strong> Site data, billing, and operations are disconnected. Revenue visibility depends on manual reporting from multiple sources.</p>
  254.                 <p class="sol-card-intro" style="margin-top:10px"><strong style="color:var(--pol-dark)">Solution:</strong> HoneyBee connects Edge+ and site data with billing, O&M, and reporting — enabling data-driven revenue and performance visibility across the asset portfolio.</p>
  255.                 <ul>
  256.                     <li>HoneyBee Edge+ integration at site level</li>
  257.                     <li>Consumption-based billing from IoT meter data</li>
  258.                     <li>O&amp;M workflow management and issue tracking</li>
  259.                     <li>Performance, availability, and SLA reporting</li>
  260.                     <li>Project finance visibility for energy assets</li>
  261.                     <li>Multi-site operational command</li>
  262.                 </ul>
  263.             </div>
  265.             {# Multi-Site Industrial Operators — full width #}
  266.             <div class="sol-card sol-card-wide">
  267.                 <div class="sol-card-icon"><i class="fa-solid fa-building-shield"></i></div>
  268.                 <h3>Multi-Site Industrial Operators</h3>
  269.                 <p class="sol-card-intro"><strong style="color:var(--pol-dark)">Problem:</strong> Operations across factories, plants, or sites are fragmented, with no centralized control over performance, cost, or reporting.</p>
  270.                 <p class="sol-card-intro" style="margin-top:10px"><strong style="color:var(--pol-dark)">Solution:</strong> HoneyBee provides one command center to manage operations, finance, teams, and site-level data across all locations.</p>
  271.                 <ul style="columns:2;column-gap:32px">
  272.                     <li>Multi-site project and asset management</li>
  273.                     <li>Cross-functional team and responsibility tracking</li>
  274.                     <li>Finance and cost visibility across locations</li>
  275.                     <li>Maintenance, field operations, and issue management</li>
  276.                     <li>IoT and Edge+ monitoring per site</li>
  277.                     <li>AI reporting across the operational portfolio</li>
  278.                 </ul>
  279.             </div>
  281.         </div>
  283.         {# What you get #}
  284.         <div style="margin-top:56px;padding-top:48px;border-top:1px solid var(--pol-border)">
  285.             <h3 style="font-family:'Montserrat',sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--pol-dark);margin-bottom:20px">What you get with HoneyBee</h3>
  286.             <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;">
  287.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">One system across sales, projects, finance, and operations</span></div>
  288.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">Real-time visibility across projects and sites</span></div>
  289.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">Connected workflows from proposal to billing</span></div>
  290.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">Mobile field operations without Excel or WhatsApp</span></div>
  291.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">AI-assisted reporting and decision support</span></div>
  292.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">Optional Edge+ integration for site data</span></div>
  293.                 <div style="display:flex;align-items:flex-start;gap:10px;padding:14px 16px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;"><span style="color:var(--pol-amber);font-family:monospace;flex-shrink:0">→</span><span style="font-size:13.5px;color:var(--pol-dark)">Audit-ready records and structured workflows</span></div>
  294.             </div>
  295.         </div>
  297.         {# Edge+ value block #}
  298.         <div style="margin-top:40px;padding:28px 32px;background:rgba(192,125,42,.06);border:1px solid rgba(192,125,42,.2);border-radius:var(--pol-radius)">
  299.             <div style="font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pol-amber);margin-bottom:12px">From site data to business decisions</div>
  300.             <p style="font-size:15px;color:var(--pol-muted);line-height:1.7;margin-bottom:14px">HoneyBee can connect plant and site data through Edge+. This enables billing based on real energy or usage data, O&M and service tracking, operational monitoring, cost and performance visibility, and audit and reporting evidence.</p>
  301.             <p style="font-size:13px;font-weight:600;color:var(--pol-amber)">Edge+, IoT hardware, sensors, gateways, and deployments are designed and quoted per project.</p>
  302.         </div>
  304.         {# Trust line #}
  305.         <div style="margin-top:40px;text-align:center;padding:20px;background:var(--pol-white);border:1px solid var(--pol-border);border-radius:10px;">
  306.             <p style="font-size:15px;color:var(--pol-muted);line-height:1.7">HoneyBee does not replace EPCs or integrators. It enables them to operate with control, visibility, and scalability.</p>
  307.         </div>
  308.     </div>
  309. </section>
  311. {# ══ CTA ═══════════════════════════════════════════════════════════════════════ #}
  312. <section class="sol-cta">
  313.     <div class="sol-wrap" style="position:relative;z-index:2">
  314.         <div class="sol-label sol-cta-label">Get started</div>
  315.         <h2>Not sure how HoneyBee fits <em>your company?</em></h2>
  316.         <p>Tell us about your projects, sites, and operations. We will recommend the right setup — software, Edge+, IoT, AI, and deployment approach.</p>
  317.         <div class="sol-cta-btns">
  318.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  319.                 <i class="fa-solid fa-arrow-right"></i> Request Project Solution
  320.             </a>
  321.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  322.                 <i class="fa-solid fa-calendar-check"></i> Book Technical Call
  323.             </a>
  324.         </div>
  325.     </div>
  326. </section>
  328. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  330. <script>
  331. (function () {
  332.     var cards = document.querySelectorAll('.sol-card');
  333.     cards.forEach(function (el) {
  334.         el.style.opacity = '0';
  335.         el.style.transform = 'translateY(18px)';
  336.         el.style.transition = 'opacity .42s ease, transform .42s ease';
  337.     });
  338.     var io = new IntersectionObserver(function (entries) {
  339.         entries.forEach(function (en) {
  340.             if (en.isIntersecting) {
  341.                 en.target.style.opacity = '1';
  342.                 en.target.style.transform = 'translateY(0)';
  343.                 io.unobserve(en.target);
  344.             }
  345.         });
  346.     }, { threshold: 0.08 });
  347.     cards.forEach(function (el, i) {
  348.         el.style.transitionDelay = (i % 2 * 0.08) + 's';
  349.         io.observe(el);
  350.     });
  351. })();
  352. </script>