src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/experience.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. {# ─── HONEYBEE — EXPERIENCE & PROOF (credibility without overclaiming) ──────── #}
  5. <style>
  6. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  7. :root {
  8.     --n-cream:     #F7F5F0;
  9.     --n-cream-2:   #F0EDE5;
  10.     --n-cream-3:   #E8E3D9;
  11.     --n-white:     #FFFFFF;
  12.     --n-dark:      #1A1D2E;
  13.     --n-dark-2:    #252840;
  14.     --n-amber:     #C07D2A;
  15.     --n-amber-lt:  #D4954A;
  16.     --n-amber-dim: rgba(192,125,42,.10);
  17.     --n-sage:      #3D6B52;
  18.     --n-muted:     #6B6E7F;
  19.     --n-muted-2:   #9395A5;
  20.     --n-border:    rgba(26,29,46,.07);
  21.     --n-border-md: rgba(26,29,46,.12);
  22.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  23.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  24.     --n-radius:    12px;
  25.     --n-radius-sm: 8px;
  26.     --n-radius-lg: 20px;
  27.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  28. }
  29. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  30. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  31. a { text-decoration: none; }
  33. /* ── Navbar ──────────────────────────────────────────────────────────────────── */
  34. .navbar {
  35.     background: rgba(247,245,240,.96) !important;
  36.     backdrop-filter: blur(16px) saturate(180%);
  37.     border-bottom: 1px solid var(--n-border) !important;
  38.     box-shadow: none !important;
  39. }
  40. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  41. .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  42. .navbar .login-btn       { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  44. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  45. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  46. .n-sec     { padding: 88px 0; }
  47. .n-label   {
  48.     display: inline-flex; align-items: center; gap: 8px;
  49.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  50.     color: var(--n-amber); margin-bottom: 16px;
  51. }
  52. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  53. .n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  54. .n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  55. .n-center  { text-align: center; }
  56. .n-center .n-label { justify-content: center; }
  57. .n-center .n-body  { max-width: 620px; margin: 0 auto; }
  59. /* ── Buttons ────────────────────────────────────────────────────────────────── */
  60. .n-btn {
  61.     display: inline-flex; align-items: center; gap: 8px;
  62.     padding: 13px 26px; border-radius: var(--n-radius-sm);
  63.     font-size: 14px; font-weight: 600; letter-spacing: .01em;
  64.     border: none; cursor: pointer; text-decoration: none; transition: all .18s;
  65.     white-space: nowrap; font-family: var(--n-font);
  66. }
  67. .n-btn-primary       { background: var(--n-dark);  color: #fff; }
  68. .n-btn-primary:hover { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
  69. .n-btn-light         { background: #fff; color: var(--n-dark); }
  70. .n-btn-light:hover   { background: var(--n-cream-2); color: var(--n-dark); }
  71. .n-btn-ghost-light       { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  72. .n-btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }
  73. .n-btn-outline       { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  74. .n-btn-outline:hover { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
  76. /* ── Hero ──────────────────────────────────────────────────────────────────── */
  77. .n-hero {
  78.     background: var(--n-cream);
  79.     padding: 128px 0 72px;
  80.     position: relative; overflow: hidden;
  81. }
  82. .n-hero::before {
  83.     content: '';
  84.     position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  85.     background: radial-gradient(ellipse 80% 70% at 80% 30%, rgba(192,125,42,.07) 0%, transparent 65%),
  86.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  87.     pointer-events: none;
  88. }
  89. .n-hero::after {
  90.     content: '';
  91.     position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  92.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  93. }
  94. .n-hero-inner { max-width: 880px; position: relative; }
  95. .n-hero-tag {
  96.     display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  97.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  98.     color: var(--n-amber); font-size: 11px; font-weight: 700;
  99.     letter-spacing: .16em; text-transform: uppercase;
  100.     padding: 6px 14px 6px 10px; border-radius: 4px; margin-bottom: 26px;
  101. }
  102. .n-hero-tag span:first-child { width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%; display: block; flex-shrink: 0; }
  103. .n-hero-h1 {
  104.     font-family: 'Montserrat', sans-serif;
  105.     font-size: clamp(32px, 4.4vw, 52px);
  106.     font-weight: 900; line-height: 1.08; letter-spacing: -.025em;
  107.     color: var(--n-dark); margin-bottom: 22px;
  108. }
  109. .n-hero-h1 em { font-style: normal; color: var(--n-amber); }
  110. .n-hero-desc { font-size: 17px; line-height: 1.75; color: var(--n-muted); max-width: 640px; }
  112. /* ── Experience card grid ──────────────────────────────────────────────────── */
  113. .n-exp-grid {
  114.     display: grid; grid-template-columns: repeat(2, 1fr);
  115.     gap: 20px; margin-top: 48px;
  116. }
  117. .n-exp-card {
  118.     background: var(--n-white); border: 1px solid var(--n-border);
  119.     border-radius: var(--n-radius); padding: 30px;
  120.     transition: box-shadow .2s, border-color .2s, transform .2s;
  121.     display: flex; flex-direction: column;
  122. }
  123. .n-exp-card:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); transform: translateY(-2px); }
  124. .n-exp-num {
  125.     font-family: monospace; font-size: 11px; font-weight: 700;
  126.     color: var(--n-amber); letter-spacing: .1em;
  127.     margin-bottom: 10px; display: block;
  128. }
  129. .n-exp-kind {
  130.     display: inline-block; align-self: flex-start;
  131.     font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  132.     color: var(--n-sage); background: rgba(61,107,82,.09);
  133.     border: 1px solid rgba(61,107,82,.18); border-radius: 4px;
  134.     padding: 3px 9px; margin-bottom: 14px; font-family: monospace;
  135. }
  136. .n-exp-card h3 {
  137.     font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 700;
  138.     color: var(--n-dark); line-height: 1.3; margin-bottom: 16px;
  139. }
  140. .n-exp-feats {
  141.     list-style: none; padding-top: 16px; border-top: 1px solid var(--n-border);
  142.     display: flex; flex-direction: column; gap: 9px;
  143. }
  144. .n-exp-feats li {
  145.     font-size: 13.5px; color: var(--n-dark); line-height: 1.5;
  146.     display: flex; align-items: flex-start; gap: 10px;
  147. }
  148. .n-exp-feats li::before { content: ''; width: 5px; height: 5px; background: var(--n-amber); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
  150. /* ── Disclaimer ────────────────────────────────────────────────────────────── */
  151. .n-disclaimer {
  152.     margin-top: 40px; padding: 16px 20px;
  153.     background: var(--n-cream-2); border: 1px solid var(--n-border-md);
  154.     border-radius: var(--n-radius-sm);
  155.     font-size: 12.5px; color: var(--n-muted); line-height: 1.6;
  156.     display: flex; align-items: flex-start; gap: 10px;
  157. }
  158. .n-disclaimer i { color: var(--n-muted-2); margin-top: 2px; flex-shrink: 0; }
  160. /* ── CTA band ──────────────────────────────────────────────────────────────── */
  161. .n-cta-final {
  162.     background: var(--n-dark); padding: 96px 0; text-align: center;
  163.     position: relative; overflow: hidden;
  164. }
  165. .n-cta-final::before {
  166.     content: '';
  167.     position: absolute; top: -40%; right: -5%; width: 60%; height: 150%;
  168.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%);
  169.     pointer-events: none;
  170. }
  171. .n-cta-final h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.2vw,40px); font-weight: 900; color: #fff; margin-bottom: 14px; position: relative; }
  172. .n-cta-final p  { max-width: 56ch; margin: 0 auto 30px; color: rgba(255,255,255,.6); font-size: 16px; line-height: 1.7; position: relative; }
  173. .n-cta-actions  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
  175. /* ── Responsive ────────────────────────────────────────────────────────────── */
  176. @media (max-width: 860px) {
  177.     .n-exp-grid { grid-template-columns: 1fr; }
  178. }
  179. </style>
  181. {# ══ HERO ═══════════════════════════════════════════════════════════════════ #}
  182. <section class="n-hero">
  183.     <div class="n-wrap">
  184.         <div class="n-hero-inner">
  185.             <div class="n-hero-tag">
  186.                 <span></span>
  187.                 <span>Experience &amp; Proof</span>
  188.             </div>
  189.             <h1 class="n-hero-h1">
  190.                 Built from real <em>project</em>, ERP, HoneyCore Edge+, energy-infrastructure, and SME digital-transformation experience.
  191.             </h1>
  192.             <p class="n-hero-desc">
  193.                 Experience with, field learning, deployment references, operational experience, and an applied research foundation — not inflated case studies.
  194.             </p>
  195.         </div>
  196.     </div>
  197. </section>
  199. {# ══ EXPERIENCE CARDS ═══════════════════════════════════════════════════════ #}
  200. <section class="n-sec">
  201.     <div class="n-wrap">
  202.         <div class="n-center">
  203.             <div class="n-label">Where HoneyBee Comes From</div>
  204.             <h2 class="n-h2">Real operational and field experience</h2>
  205.             <p class="n-body" style="margin-top:14px;">
  206.                 Each area below reflects experience with workflows, field learning, deployment references, operational experience, or an applied research foundation — described carefully, without overclaiming.
  207.             </p>
  208.         </div>
  210.         <div class="n-exp-grid">
  212.             {# 1 #}
  213.             <div class="n-exp-card">
  214.                 <span class="n-exp-num">01</span>
  215.                 <span class="n-exp-kind">Operational experience</span>
  216.                 <h3>RAACH SOLAR PROJECTS GmbH / Bangladesh operations</h3>
  217.                 <ul class="n-exp-feats">
  218.                     <li>Operational experience connected to solar EPC workflows</li>
  219.                     <li>Solar EPC workflow experience and international procurement</li>
  220.                     <li>Project execution and documentation handling</li>
  221.                     <li>Finance and reporting support</li>
  222.                     <li>Multi-country operational experience (Bangladesh is not the main market)</li>
  223.                 </ul>
  224.             </div>
  226.             {# 2 #}
  227.             <div class="n-exp-card">
  228.                 <span class="n-exp-num">02</span>
  229.                 <span class="n-exp-kind">ERP workflow learning</span>
  230.                 <h3>Super Star Group — ERP workflow reference</h3>
  231.                 <ul class="n-exp-feats">
  232.                     <li>Workflow consolidation across departments</li>
  233.                     <li>Quotation, costing, and project planning learning</li>
  234.                     <li>HR and documentation workflow reference</li>
  235.                     <li>Approval flows and operational visibility</li>
  236.                 </ul>
  237.             </div>
  239.             {# 3 #}
  240.             <div class="n-exp-card">
  241.                 <span class="n-exp-num">03</span>
  242.                 <span class="n-exp-kind">Field deployment</span>
  243.                 <h3>HoneyCore Edge+ field deployments</h3>
  244.                 <ul class="n-exp-feats">
  245.                     <li>Energy infrastructure, meters, and sensors</li>
  246.                     <li>Solar PV, generators, and industrial utilities</li>
  247.                     <li>O&amp;M and site-level reporting</li>
  248.                     <li>Digital-twin visibility at the site layer</li>
  249.                 </ul>
  250.             </div>
  252.             {# 4 #}
  253.             <div class="n-exp-card">
  254.                 <span class="n-exp-num">04</span>
  255.                 <span class="n-exp-kind">Project design experience</span>
  256.                 <h3>HoneyCore Edge+ project design experience</h3>
  257.                 <ul class="n-exp-feats">
  258.                     <li>Data point mapping and sensor/meter schedules</li>
  259.                     <li>Gateway planning and protocol mapping</li>
  260.                     <li>BoQ and quotation structure</li>
  261.                     <li>Commissioning checklist and O&amp;M handover</li>
  262.                 </ul>
  263.             </div>
  265.             {# 5 #}
  266.             <div class="n-exp-card">
  267.                 <span class="n-exp-num">05</span>
  268.                 <span class="n-exp-kind">Product &amp; market focus</span>
  269.                 <h3>Germany / EU product &amp; market focus</h3>
  270.                 <ul class="n-exp-feats">
  271.                     <li>European product development and energy-infrastructure R&amp;D</li>
  272.                     <li>NIS2-aware governance direction</li>
  273.                     <li>GDPR-aligned data handling</li>
  274.                     <li>DATEV-ready / GoBD-aligned roadmap where implemented</li>
  275.                     <li>Industrial cybersecurity and energy-transition relevance</li>
  276.                 </ul>
  277.             </div>
  279.             {# 6 #}
  280.             <div class="n-exp-card">
  281.                 <span class="n-exp-num">06</span>
  282.                 <span class="n-exp-kind">International SaaS base</span>
  283.                 <h3>Singapore international SaaS &amp; commercial base</h3>
  284.                 <ul class="n-exp-feats">
  285.                     <li>SaaS commercialization and Asia-Pacific coordination</li>
  286.                     <li>Multi-country operations</li>
  287.                     <li>Partner development</li>
  288.                     <li>Enterprise / private cloud potential</li>
  289.                 </ul>
  290.             </div>
  292.             {# 7 #}
  293.             <div class="n-exp-card">
  294.                 <span class="n-exp-num">07</span>
  295.                 <span class="n-exp-kind">Field learning</span>
  296.                 <h3>Agri-PV / Solar Irrigation</h3>
  297.                 <ul class="n-exp-feats">
  298.                     <li>Solar generation and soil / environmental data</li>
  299.                     <li>Irrigation monitoring and control</li>
  300.                     <li>Water-energy-food intelligence</li>
  301.                 </ul>
  302.             </div>
  304.             {# 8 #}
  305.             <div class="n-exp-card">
  306.                 <span class="n-exp-num">08</span>
  307.                 <span class="n-exp-kind">Field learning</span>
  308.                 <h3>C&amp;I Energy Projects</h3>
  309.                 <ul class="n-exp-feats">
  310.                     <li>Factory energy systems</li>
  311.                     <li>Solar, grid, generator, and load coordination</li>
  312.                     <li>Energy performance and carbon visibility</li>
  313.                     <li>Cost monitoring</li>
  314.                 </ul>
  315.             </div>
  317.             {# 9 #}
  318.             <div class="n-exp-card">
  319.                 <span class="n-exp-num">09</span>
  320.                 <span class="n-exp-kind">Operational experience</span>
  321.                 <h3>Remote Healthcare / Sustainability Infrastructure</h3>
  322.                 <ul class="n-exp-feats">
  323.                     <li>Energy, water, and cooling monitoring</li>
  324.                     <li>Cold-chain monitoring for critical infrastructure</li>
  325.                     <li>Monitoring for sustainability-focused deployments</li>
  326.                 </ul>
  327.             </div>
  329.             {# 10 #}
  330.             <div class="n-exp-card">
  331.                 <span class="n-exp-num">10</span>
  332.                 <span class="n-exp-kind">Applied research foundation</span>
  333.                 <h3>SME ERP Digital Transformation Research</h3>
  334.                 <ul class="n-exp-feats">
  335.                     <li>Applied research into enabling SME digital transformation</li>
  336.                     <li>Cost-efficient ERP and modular adoption</li>
  337.                     <li>Affordability and process fit</li>
  338.                     <li>AI-assisted workflows</li>
  339.                 </ul>
  340.             </div>
  342.         </div>
  344.         <div class="n-disclaimer">
  345.             <i class="fa-solid fa-circle-info"></i>
  346.             <span>HoneyBee is a software, AI, and HoneyCore Edge+ provider — not an EPC contractor or project developer. References describe operational and field experience, not verified case studies or endorsements.</span>
  347.         </div>
  348.     </div>
  349. </section>
  351. {# ══ CTA ════════════════════════════════════════════════════════════════════ #}
  352. <section class="n-cta-final">
  353.     <div class="n-wrap">
  354.         <h2>Let's discuss your company and partnership fit</h2>
  355.         <p>
  356.             Talk to us about HoneyBee's experience with project ERP, business ERP, HoneyCore Edge+ deployments, and SME digital transformation — and how it applies to your operations.
  357.         </p>
  358.         <div class="n-cta-actions">
  359.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  360.                 Request Company / Partnership Discussion <i class="fa-solid fa-arrow-right"></i>
  361.             </a>
  362.             <a href="{{ url('honeybee_trust') }}" class="n-btn n-btn-ghost-light">Trust &amp; Governance</a>
  363.             <a href="{{ url('honeybee_partners') }}" class="n-btn n-btn-ghost-light">Partners</a>
  364.         </div>
  365.     </div>
  366. </section>
  368. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}