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. /* ── Revenue Opportunities ──────────────────────────────────────────────────── */
  142. .par-rev-grid {
  143.     display: grid;
  144.     grid-template-columns: repeat(3, 1fr);
  145.     gap: 1px;
  146.     background: var(--pol-border);
  147.     border: 1px solid var(--pol-border);
  148.     border-radius: var(--pol-radius);
  149.     overflow: hidden;
  150.     margin-top: 48px;
  151. }
  152. .par-rev-item {
  153.     background: var(--pol-white);
  154.     padding: 18px 22px;
  155.     font-size: 14px; font-weight: 600; color: var(--pol-dark);
  156.     display: flex; align-items: flex-start; gap: 10px;
  157.     transition: background .18s;
  158. }
  159. .par-rev-item:hover { background: var(--pol-cream); }
  160. .par-rev-item i { color: var(--pol-amber); font-size: 13px; margin-top: 3px; flex-shrink: 0; }
  162. /* ── Partner Journey ────────────────────────────────────────────────────────── */
  163. .par-journey { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; align-items: stretch; }
  164. .par-journey-step {
  165.     display: inline-flex; align-items: center; gap: 10px;
  166.     padding: 12px 18px; background: var(--pol-white);
  167.     border: 1px solid var(--pol-border-md); border-radius: 100px;
  168.     font-size: 14px; font-weight: 600; color: var(--pol-dark);
  169. }
  170. .par-journey-num {
  171.     width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  172.     background: rgba(192,125,42,.10); border: 1px solid rgba(192,125,42,.3);
  173.     color: var(--pol-amber); font-size: 11px; font-weight: 800; font-family: monospace;
  174.     display: flex; align-items: center; justify-content: center;
  175. }
  176. .par-journey-arrow { color: var(--pol-muted-2); align-self: center; font-size: 12px; }
  178. /* ── CTA Section ────────────────────────────────────────────────────────────── */
  179. .par-cta {
  180.     background: var(--pol-dark);
  181.     padding: 96px 0;
  182.     text-align: center;
  183.     position: relative; overflow: hidden;
  184. }
  185. .par-cta::before {
  186.     content: '';
  187.     position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  188.     width: 80%; height: 200%;
  189.     background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(192,125,42,.10) 0%, transparent 65%);
  190.     pointer-events: none;
  191. }
  192. .par-cta-label { color: var(--pol-amber); justify-content: center; }
  193. .par-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(24px,2.8vw,38px); font-weight: 900; color: #fff; margin-bottom: 16px; }
  194. .par-cta h2 em { font-style: italic; color: var(--pol-amber); }
  195. .par-cta p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 54ch; margin: 0 auto 32px; line-height: 1.7; }
  196. .par-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  198. /* ── Responsive ─────────────────────────────────────────────────────────────── */
  199. @media (max-width: 1040px) {
  200.     .par-rev-grid { grid-template-columns: 1fr 1fr; }
  201. }
  202. @media (max-width: 860px) {
  203.     .par-card { grid-template-columns: 1fr; gap: 20px; }
  204.     .par-hero { padding: 90px 0 56px; }
  205.     .par-rev-grid { grid-template-columns: 1fr; }
  206.     .par-journey-arrow { display: none; }
  207. }
  208. </style>
  210. {# ══ HERO ══════════════════════════════════════════════════════════════════════ #}
  211. <section class="par-hero">
  212.     <div class="par-wrap" style="position:relative;z-index:2">
  213.         <div class="par-label">Partners</div>
  214.         <h1 class="par-h1" style="max-width:820px;margin-bottom:24px">
  215.             Join the HoneyBee partner ecosystem — software rollout, HoneyCore Edge EMS, and <em>local infrastructure.</em>
  216.         </h1>
  217.         <p class="par-body" style="max-width:660px;margin-bottom:16px">
  218.             HoneyBee equips local partners to digitize businesses, design HoneyCore Edge+ projects, deploy HoneyCore Edge EMS site intelligence, and support clients — without replacing their customer relationships.
  219.         </p>
  220.         <p class="par-body" style="max-width:640px;margin-bottom:36px;font-size:14px">
  221.             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, HoneyCore Edge+ data layer, and local infrastructure.
  222.         </p>
  223.         <div class="par-cta-btns" style="justify-content:flex-start">
  224.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  225.                 <i class="fa-solid fa-handshake"></i> Apply as HoneyBee Partner
  226.             </a>
  227.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline">
  228.                 <i class="fa-solid fa-microchip"></i> Become a HoneyCore Edge+ Deployment Partner
  229.             </a>
  230.         </div>
  231.     </div>
  232. </section>
  234. {# ══ PARTNER TYPE CARDS ════════════════════════════════════════════════════════ #}
  235. <section class="par-sec" style="background:var(--pol-cream)">
  236.     <div class="par-wrap">
  237.         <div class="par-center">
  238.             <div class="par-label">Partnership models</div>
  239.             <h2 class="par-h2">Six partner roles <em>with HoneyBee.</em></h2>
  240.         </div>
  242.         <div class="par-cards">
  244.             {# Registered Partner #}
  245.             <div class="par-card">
  246.                 <div class="par-card-left">
  247.                     <span class="par-card-num">Partner type 01</span>
  248.                     <h3>Registered Partner</h3>
  249.                     <p class="par-card-desc">The entry tier for companies joining the HoneyBee ecosystem. Get demo access, partner training materials, and the ability to refer and resell HoneyBee to local businesses while you build toward certification.</p>
  250.                 </div>
  251.                 <div class="par-card-right">
  252.                     <span class="par-card-right-label">What you deliver</span>
  253.                     <ul class="par-benefits">
  254.                         <li>Lead referral and reselling</li>
  255.                         <li>Demo and partner-portal access</li>
  256.                         <li>Local market introductions</li>
  257.                         <li>Pathway to certification</li>
  258.                     </ul>
  259.                 </div>
  260.             </div>
  262.             {# Certified Implementation Partner #}
  263.             <div class="par-card">
  264.                 <div class="par-card-left">
  265.                     <span class="par-card-num">Partner type 02</span>
  266.                     <h3>Certified Implementation Partner</h3>
  267.                     <p class="par-card-desc">For certified companies that 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>
  268.                 </div>
  269.                 <div class="par-card-right">
  270.                     <span class="par-card-right-label">What you deliver</span>
  271.                     <ul class="par-benefits">
  272.                         <li>HoneyBee workspace setup and configuration</li>
  273.                         <li>Module and workflow configuration</li>
  274.                         <li>Data migration support</li>
  275.                         <li>User training and onboarding</li>
  276.                         <li>First-level application support</li>
  277.                     </ul>
  278.                 </div>
  279.             </div>
  281.             {# Certified HoneyCore Edge+ Design Partner #}
  282.             <div class="par-card">
  283.                 <div class="par-card-left">
  284.                     <span class="par-card-num">Partner type 03</span>
  285.                     <h3>Certified HoneyCore Edge+ Design Partner</h3>
  286.                     <p class="par-card-desc">For certified companies that scope and design HoneyCore Edge+ projects — site assessment, data-point definition, sensor / meter / gateway selection, architecture, and bill-of-quantities preparation — before deployment begins.</p>
  287.                 </div>
  288.                 <div class="par-card-right">
  289.                     <span class="par-card-right-label">What you deliver</span>
  290.                     <ul class="par-benefits">
  291.                         <li>HoneyCore Edge+ site assessment</li>
  292.                         <li>Data-point and requirement definition</li>
  293.                         <li>HoneyCore Edge+ architecture design</li>
  294.                         <li>BoQ and proposal preparation</li>
  295.                     </ul>
  296.                 </div>
  297.             </div>
  299.             {# Certified HoneyCore Edge+ Deployment Partner #}
  300.             <div class="par-card">
  301.                 <div class="par-card-left">
  302.                     <span class="par-card-num">Partner type 04</span>
  303.                     <h3>Certified HoneyCore Edge+ Deployment Partner</h3>
  304.                     <p class="par-card-desc">For certified companies that install HoneyCore Edge+ devices, set up gateways, integrate meters, sensors, and plant data, and connect site-level operational data with the HoneyBee platform.</p>
  305.                 </div>
  306.                 <div class="par-card-right">
  307.                     <span class="par-card-right-label">What you deliver</span>
  308.                     <ul class="par-benefits">
  309.                         <li>HoneyCore Edge+ device installation</li>
  310.                         <li>Gateway and network setup</li>
  311.                         <li>Meter, sensor, and PLC integration</li>
  312.                         <li>Site-level data connection to HoneyBee</li>
  313.                     </ul>
  314.                 </div>
  315.             </div>
  317.             {# Country Partner #}
  318.             <div class="par-card">
  319.                 <div class="par-card-left">
  320.                     <span class="par-card-num">Partner type 05</span>
  321.                     <h3>Country Partner</h3>
  322.                     <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>
  323.                 </div>
  324.                 <div class="par-card-right">
  325.                     <span class="par-card-right-label">What you deliver</span>
  326.                     <ul class="par-benefits">
  327.                         <li>Country or regional rollout coordination</li>
  328.                         <li>Implementation, infrastructure, and support</li>
  329.                         <li>Local market expansion and client management</li>
  330.                         <li>Go-to-market and revenue sharing</li>
  331.                     </ul>
  332.                 </div>
  333.             </div>
  335.             {# Research / Innovation Partner #}
  336.             <div class="par-card">
  337.                 <div class="par-card-left">
  338.                     <span class="par-card-num">Partner type 06</span>
  339.                     <h3>Research / Innovation Partner</h3>
  340.                     <p class="par-card-desc">For universities, research institutes, and innovation labs that co-develop new HoneyCore Edge EMS use cases, AI / ML models, and energy-intelligence methods, and pilot them with HoneyBee customers.</p>
  341.                 </div>
  342.                 <div class="par-card-right">
  343.                     <span class="par-card-right-label">What you deliver</span>
  344.                     <ul class="par-benefits">
  345.                         <li>Joint research and pilot projects</li>
  346.                         <li>HoneyCore Edge EMS use-case development</li>
  347.                         <li>AI / ML model collaboration</li>
  348.                         <li>Energy-intelligence methods</li>
  349.                     </ul>
  350.                 </div>
  351.             </div>
  353.         </div>
  355.         <div class="par-center" style="margin-top:64px">
  356.             <div class="par-label">Additional partner profiles</div>
  357.             <h2 class="par-h2">Specialist roles <em>within the ecosystem.</em></h2>
  358.         </div>
  360.         <div class="par-cards">
  362.             {# Local Infrastructure Partner #}
  363.             <div class="par-card">
  364.                 <div class="par-card-left">
  365.                     <span class="par-card-num">Additional profile</span>
  366.                     <h3>Local Infrastructure Partner</h3>
  367.                     <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>
  368.                 </div>
  369.                 <div class="par-card-right">
  370.                     <span class="par-card-right-label">What you deliver</span>
  371.                     <ul class="par-benefits">
  372.                         <li>Server and GPU infrastructure supply</li>
  373.                         <li>Private cloud or on-premise setup</li>
  374.                         <li>Local AI / ML runtime deployment</li>
  375.                         <li>Storage, networking, and reliability</li>
  376.                     </ul>
  377.                 </div>
  378.             </div>
  380.             {# DATEV / Accounting Workflow Partner #}
  381.             <div class="par-card">
  382.                 <div class="par-card-left">
  383.                     <span class="par-card-num">Additional profile</span>
  384.                     <h3>DATEV / Accounting Workflow Partner</h3>
  385.                     <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>
  386.                 </div>
  387.                 <div class="par-card-right">
  388.                     <span class="par-card-right-label">What you deliver</span>
  389.                     <ul class="par-benefits">
  390.                         <li>Accounting workflow support for clients</li>
  391.                         <li>DATEV-ready export coordination</li>
  392.                         <li>Compliance and reporting assistance</li>
  393.                         <li>Referral and co-advisory model</li>
  394.                     </ul>
  395.                 </div>
  396.             </div>
  398.         </div>
  399.     </div>
  400. </section>
  402. {# ══ PARTNER REVENUE OPPORTUNITIES ═════════════════════════════════════════════ #}
  403. <section class="par-sec" style="background:var(--pol-cream-2)">
  404.     <div class="par-wrap">
  405.         <div class="par-center">
  406.             <div class="par-label">Revenue opportunities</div>
  407.             <h2 class="par-h2">How partners <em>earn with HoneyBee.</em></h2>
  408.             <p class="par-body" style="max-width:600px;margin:18px auto 0">
  409.                 Build recurring and project revenue across the full client lifecycle — from first rollout to long-term support.
  410.             </p>
  411.         </div>
  412.         <div class="par-rev-grid">
  413.             {% set _revenue = [
  414.                 'ERP implementation',
  415.                 'Data migration',
  416.                 'Workflow configuration',
  417.                 'Training',
  418.                 'First-level support',
  419.                 'HoneyCore Edge+ site assessment',
  420.                 'HoneyCore Edge+ architecture & BoQ preparation',
  421.                 'Sensor / gateway / meter integration',
  422.                 'HoneyCore Edge+ deployment',
  423.                 'Local infrastructure setup',
  424.                 'Customization projects',
  425.                 'Long-term support contracts'
  426.             ] %}
  427.             {% for item in _revenue %}
  428.                 <div class="par-rev-item"><i class="fa-solid fa-circle-dollar-to-slot"></i><span>{{ item }}</span></div>
  429.             {% endfor %}
  430.         </div>
  431.     </div>
  432. </section>
  434. {# ══ PARTNER JOURNEY ═══════════════════════════════════════════════════════════ #}
  435. <section class="par-sec" style="background:var(--pol-cream)">
  436.     <div class="par-wrap">
  437.         <div class="par-center">
  438.             <div class="par-label">Partner journey</div>
  439.             <h2 class="par-h2">From application to <em>listed partner.</em></h2>
  440.             <p class="par-body" style="max-width:560px;margin:18px auto 0">
  441.                 A clear, staged path from first contact to certified, listed HoneyBee partner.
  442.             </p>
  443.         </div>
  444.         <div class="par-journey">
  445.             {% set _journey = [
  446.                 'Apply', 'Screening call', 'Demo access', 'Training',
  447.                 'Certification', 'First supervised deployment', 'Listed partner'
  448.             ] %}
  449.             {% for stage in _journey %}
  450.                 <span class="par-journey-step"><span class="par-journey-num">{{ loop.index }}</span>{{ stage }}</span>
  451.                 {% if not loop.last %}<span class="par-journey-arrow"><i class="fa-solid fa-arrow-right"></i></span>{% endif %}
  452.             {% endfor %}
  453.         </div>
  454.     </div>
  455. </section>
  457. {# ══ CTA ═══════════════════════════════════════════════════════════════════════ #}
  458. <section class="par-cta">
  459.     <div class="par-wrap" style="position:relative;z-index:2">
  460.         <div class="par-label par-cta-label">Apply now</div>
  461.         <h2>Apply to become a <em>HoneyBee partner.</em></h2>
  462.         <p>Tell us about your company, market, and technical capabilities. We will follow up to match you with the right partnership model.</p>
  463.         <div class="par-cta-btns">
  464.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-light">
  465.                 <i class="fa-solid fa-handshake"></i> Apply as HoneyBee Partner
  466.             </a>
  467.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-ghost-light">
  468.                 <i class="fa-solid fa-microchip"></i> Become a HoneyCore Edge+ Deployment Partner
  469.             </a>
  470.         </div>
  471.     </div>
  472. </section>
  474. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  476. <script>
  477. (function () {
  478.     var cards = document.querySelectorAll('.par-card');
  479.     cards.forEach(function (el) {
  480.         el.style.opacity = '0';
  481.         el.style.transform = 'translateY(18px)';
  482.         el.style.transition = 'opacity .42s ease, transform .42s ease';
  483.     });
  484.     var io = new IntersectionObserver(function (entries) {
  485.         entries.forEach(function (en) {
  486.             if (en.isIntersecting) {
  487.                 en.target.style.opacity = '1';
  488.                 en.target.style.transform = 'translateY(0)';
  489.                 io.unobserve(en.target);
  490.             }
  491.         });
  492.     }, { threshold: 0.08 });
  493.     cards.forEach(function (el, i) {
  494.         el.style.transitionDelay = (i * 0.06) + 's';
  495.         io.observe(el);
  496.     });
  497. })();
  498. </script>