src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/partners.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. .par-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  27. .par-wrap-sm { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
  28. .par-sec     { padding: 80px 0; }
  29. .par-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. .par-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  35. .par-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. .par-h1 em { font-style: italic; color: var(--pol-amber); }
  37. .par-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. .par-body   { font-size: 16px; line-height: 1.75; color: var(--pol-muted); }
  39. .par-center { text-align: center; }
  40. .par-center .par-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. .par-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. .par-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. /* ── Partner Cards ──────────────────────────────────────────────────────────── */
  73. .par-cards {
  74.     display: flex;
  75.     flex-direction: column;
  76.     gap: 24px;
  77.     margin-top: 48px;
  78. }
  79. .par-card {
  80.     background: var(--pol-white);
  81.     border: 1px solid var(--pol-border);
  82.     border-radius: var(--pol-radius);
  83.     padding: 30px 32px;
  84.     display: grid;
  85.     grid-template-columns: 1fr 1fr;
  86.     gap: 32px;
  87.     align-items: start;
  88.     transition: box-shadow .2s, border-color .2s, transform .2s;
  89. }
  90. .par-card:hover {
  91.     border-color: var(--pol-border-md);
  92.     box-shadow: var(--pol-shadow-md);
  93.     transform: translateY(-2px);
  94. }
  95. .par-card-left { }
  96. .par-card-num {
  97.     font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  98.     color: var(--pol-amber); font-family: monospace;
  99.     margin-bottom: 12px; display: block;
  100. }
  101. .par-card h3 {
  102.     font-family: 'Montserrat', sans-serif;
  103.     font-size: 19px; font-weight: 800; color: var(--pol-dark);
  104.     margin-bottom: 14px;
  105.     display: flex; align-items: flex-start; gap: 10px;
  106. }
  107. .par-card h3::before {
  108.     content: ''; display: block;
  109.     width: 3px; height: 18px; background: var(--pol-amber);
  110.     border-radius: 2px; flex-shrink: 0; margin-top: 3px;
  111. }
  112. .par-card-desc {
  113.     font-size: 14px; line-height: 1.75; color: var(--pol-muted);
  114. }
  115. .par-card-right {
  116.     background: var(--pol-cream);
  117.     border-radius: 10px;
  118.     padding: 22px 24px;
  119. }
  120. .par-card-right-label {
  121.     font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  122.     color: var(--pol-muted-2); font-family: monospace;
  123.     margin-bottom: 14px; display: block;
  124. }
  125. .par-benefits {
  126.     list-style: none; padding: 0; margin: 0;
  127. }
  128. .par-benefits li {
  129.     font-size: 13.5px; color: var(--pol-muted); line-height: 1.65;
  130.     padding: 7px 0 7px 20px;
  131.     position: relative;
  132.     border-top: 1px solid var(--pol-border);
  133. }
  134. .par-benefits li:first-child { border-top: none; }
  135. .par-benefits li::before {
  136.     content: '✓';
  137.     position: absolute; left: 0;
  138.     color: var(--pol-amber); font-size: 12px; font-weight: 700;
  139. }
  141. /* ── CTA Section ────────────────────────────────────────────────────────────── */
  142. .par-cta {
  143.     background: var(--pol-dark);
  144.     padding: 96px 0;
  145.     text-align: center;
  146.     position: relative; overflow: hidden;
  147. }
  148. .par-cta::before {
  149.     content: '';
  150.     position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  151.     width: 80%; height: 200%;
  152.     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.10) 0%, transparent 65%);
  153.     pointer-events: none;
  154. }
  155. .par-cta-label { color: var(--pol-amber); justify-content: center; }
  156. .par-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(24px,2.8vw,38px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  157. .par-cta h2 em { font-style: italic; color: var(--pol-amber); }
  158. .par-cta p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 54ch; margin: 0 auto 32px; line-height: 1.7; }
  159. .par-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  161. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  162. @media (max-width: 860px) {
  163.     .par-card { grid-template-columns: 1fr; gap: 20px; }
  164.     .par-hero { padding: 90px 0 56px; }
  165. }
  166. </style>
  168. {# ══ HERO ══════════════════════════════════════════════════════════════════════ #}
  169. <section class="par-hero">
  170.     <div class="par-wrap" style="position:relative;z-index:2">
  171.         <div class="par-label">Partners</div>
  172.         <h1 class="par-h1" style="max-width:820px;margin-bottom:24px">
  173.             Join the HoneyBee partner ecosystem — software rollout, Edge+, IoT, and <em>infrastructure.</em>
  174.         </h1>
  175.         <p class="par-body" style="max-width:640px;margin-bottom:16px">
  176.             HoneyBee works with qualified local partners who support software rollout, Edge+ / IoT deployment, local server and GPU infrastructure setup, accounting workflows, customer training, and first-level support.
  177.         </p>
  178.         <p class="par-body" style="max-width:640px;margin-bottom:36px;font-size:14px">
  179.             Partners are not EPC subcontractors. They do not perform EPC works or electrical installation for HoneyBee. They help mutual customers deploy and operate the HoneyBee platform, Edge+ data layer, and local infrastructure.
  180.         </p>
  181.         <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  182.             <i class="fa-solid fa-handshake"></i> Apply as Partner
  183.         </a>
  184.     </div>
  185. </section>
  187. {# ══ PARTNER TYPE CARDS ════════════════════════════════════════════════════════ #}
  188. <section class="par-sec" style="background:var(--pol-cream)">
  189.     <div class="par-wrap">
  190.         <div class="par-center">
  191.             <div class="par-label">Partnership models</div>
  192.             <h2 class="par-h2">Five partner roles <em>with HoneyBee.</em></h2>
  193.         </div>
  195.         <div class="par-cards">
  197.             {# Implementation Partner #}
  198.             <div class="par-card">
  199.                 <div class="par-card-left">
  200.                     <span class="par-card-num">Partner type 01</span>
  201.                     <h3>Implementation Partner</h3>
  202.                     <p class="par-card-desc">For companies that can set up HoneyBee workspaces, configure modules and workflows, support data migration, train users, and provide first-level application support for EPC, energy, and industrial customers.</p>
  203.                 </div>
  204.                 <div class="par-card-right">
  205.                     <span class="par-card-right-label">What you deliver</span>
  206.                     <ul class="par-benefits">
  207.                         <li>HoneyBee workspace setup and configuration</li>
  208.                         <li>Module and workflow configuration</li>
  209.                         <li>Data migration support</li>
  210.                         <li>User training and onboarding</li>
  211.                         <li>First-level application support</li>
  212.                     </ul>
  213.                 </div>
  214.             </div>
  216.             {# Edge+ / IoT Deployment Partner #}
  217.             <div class="par-card">
  218.                 <div class="par-card-left">
  219.                     <span class="par-card-num">Partner type 02</span>
  220.                     <h3>Edge+ / IoT Deployment Partner</h3>
  221.                     <p class="par-card-desc">For companies that can install Edge+ devices, set up gateways, integrate meters, sensors, and plant data, and connect site-level operational data with the HoneyBee platform.</p>
  222.                 </div>
  223.                 <div class="par-card-right">
  224.                     <span class="par-card-right-label">What you deliver</span>
  225.                     <ul class="par-benefits">
  226.                         <li>Edge+ device installation</li>
  227.                         <li>Gateway and network setup</li>
  228.                         <li>Meter, sensor, and PLC integration</li>
  229.                         <li>Site-level data connection to HoneyBee</li>
  230.                     </ul>
  231.                 </div>
  232.             </div>
  234.             {# Local Infrastructure Partner #}
  235.             <div class="par-card">
  236.                 <div class="par-card-left">
  237.                     <span class="par-card-num">Partner type 03</span>
  238.                     <h3>Local Infrastructure Partner</h3>
  239.                     <p class="par-card-desc">For companies that can supply servers and GPU infrastructure, set up private cloud or on-premise environments, deploy local AI / ML runtime, and handle storage, networking, and system reliability. Local Infrastructure Partners focus on IT and system deployment — not electrical EPC work.</p>
  240.                 </div>
  241.                 <div class="par-card-right">
  242.                     <span class="par-card-right-label">What you deliver</span>
  243.                     <ul class="par-benefits">
  244.                         <li>Server and GPU infrastructure supply</li>
  245.                         <li>Private cloud or on-premise setup</li>
  246.                         <li>Local AI / ML runtime deployment</li>
  247.                         <li>Storage, networking, and reliability</li>
  248.                     </ul>
  249.                 </div>
  250.             </div>
  252.             {# DATEV / Accounting Workflow Partner #}
  253.             <div class="par-card">
  254.                 <div class="par-card-left">
  255.                     <span class="par-card-num">Partner type 04</span>
  256.                     <h3>DATEV / Accounting Workflow Partner</h3>
  257.                     <p class="par-card-desc">For tax consultants and accounting firms who work with clients on accounting workflows, DATEV-ready exports, compliance, and reporting. Keep your workflow in DATEV while HoneyBee handles the client-side operational platform.</p>
  258.                 </div>
  259.                 <div class="par-card-right">
  260.                     <span class="par-card-right-label">What you deliver</span>
  261.                     <ul class="par-benefits">
  262.                         <li>Accounting workflow support for clients</li>
  263.                         <li>DATEV-ready export coordination</li>
  264.                         <li>Compliance and reporting assistance</li>
  265.                         <li>Referral and co-advisory model</li>
  266.                     </ul>
  267.                 </div>
  268.             </div>
  270.             {# Strategic Country Partner #}
  271.             <div class="par-card">
  272.                 <div class="par-card-left">
  273.                     <span class="par-card-num">Partner type 05</span>
  274.                     <h3>Strategic Country Partner</h3>
  275.                     <p class="par-card-desc">For companies that can coordinate rollout across a country or region — combining implementation, infrastructure, and support, and acting as the local face of HoneyBee for customers and prospects.</p>
  276.                 </div>
  277.                 <div class="par-card-right">
  278.                     <span class="par-card-right-label">What you deliver</span>
  279.                     <ul class="par-benefits">
  280.                         <li>Country or regional rollout coordination</li>
  281.                         <li>Implementation, infrastructure, and support</li>
  282.                         <li>Local market expansion and client management</li>
  283.                         <li>Go-to-market and revenue sharing</li>
  284.                     </ul>
  285.                 </div>
  286.             </div>
  288.         </div>
  289.     </div>
  290. </section>
  292. {# ══ CTA ═══════════════════════════════════════════════════════════════════════ #}
  293. <section class="par-cta">
  294.     <div class="par-wrap" style="position:relative;z-index:2">
  295.         <div class="par-label par-cta-label">Apply now</div>
  296.         <h2>Apply to become a <em>HoneyBee partner.</em></h2>
  297.         <p>Tell us about your company, market, and technical capabilities. We will follow up to match you with the right partnership model.</p>
  298.         <div class="par-cta-btns">
  299.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  300.                 <i class="fa-solid fa-handshake"></i> Apply as Partner
  301.             </a>
  302.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  303.                 <i class="fa-solid fa-phone"></i> Book Partner Call
  304.             </a>
  305.         </div>
  306.     </div>
  307. </section>
  309. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  311. <script>
  312. (function () {
  313.     var cards = document.querySelectorAll('.par-card');
  314.     cards.forEach(function (el) {
  315.         el.style.opacity = '0';
  316.         el.style.transform = 'translateY(18px)';
  317.         el.style.transition = 'opacity .42s ease, transform .42s ease';
  318.     });
  319.     var io = new IntersectionObserver(function (entries) {
  320.         entries.forEach(function (en) {
  321.             if (en.isIntersecting) {
  322.                 en.target.style.opacity = '1';
  323.                 en.target.style.transform = 'translateY(0)';
  324.                 io.unobserve(en.target);
  325.             }
  326.         });
  327.     }, { threshold: 0.08 });
  328.     cards.forEach(function (el, i) {
  329.         el.style.transitionDelay = (i * 0.06) + 's';
  330.         io.observe(el);
  331.     });
  332. })();
  333. </script>