npm - kupos-ui-components-lib - Versions diffs - 9.7.9 → 9.8.0 - Mend

kupos-ui-components-lib 9.7.9 → 9.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/assets/images/anims/service_list/flame_anim.json ADDED Viewed

@@ -0,0 +1 @@

+ {"v":"5.7.4","ip":0,"op":15,"fr":30,"w":512,"h":512,"nm":"F","assets":[],"layers":[{"ind":1,"nm":"Y","sr":1,"ks":{"o":{"a":0,"k":0},"r":{"a":0,"k":0},"p":{"a":0,"k":[258.695,426.49,0],"l":2},"a":{"a":0,"k":[0,0,0],"l":2},"s":{"a":0,"k":[60,60,100],"l":2}},"ip":0,"op":15,"st":0,"ty":3},{"ind":2,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-3,"s":[-1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[-1]},{"t":18,"s":[1]}]},"p":{"a":0,"k":[-2.695,0.01,0],"l":2},"a":{"a":0,"k":[0,170,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,2.289]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-2,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,-1.289]},"t":2,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":18,"s":[100,100,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"t":21,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":3,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[2]},{"t":21,"s":[0]}]},"p":{"a":0,"k":[-43.551,-9.952,0],"l":2},"a":{"a":0,"k":[-40,160,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[92,92,100]},{"t":14,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-17,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-10,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"t":18,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":4,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-1,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13,"s":[0]},{"t":20,"s":[2]}]},"p":{"a":0,"k":[1.234,-1.178,0],"l":2},"a":{"a":0,"k":[2.694,170.559,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[96,96,100]},{"t":21,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"t":18,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.817,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"parent":1,"ty":4},{"ind":5,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-3,"s":[-1]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":4,"s":[1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":11,"s":[-1]},{"t":18,"s":[1]}]},"p":{"a":0,"k":[256,426,0],"l":2},"a":{"a":0,"k":[0,170,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,2.289]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-2,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,-1.289]},"t":2,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":6,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[100,100,100]},{"t":18,"s":[100,100,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[{"i":[[-2.027,82.31],[16.056,-53.018],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-64.412,81.037],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-12.944,-48.873]],"v":[[-1.914,-166.923],[-62.274,-18.158],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-25.205]],"c":true}]},{"t":21,"s":[{"i":[[48.167,40.785],[29.132,-81.28],[-2.304,-44.664],[-7.75,0],[2.164,64.44],[15.957,28.579]],"o":[[-4.128,76.623],[-8.542,32.656],[5.181,96.125],[54.75,0],[-1.749,-51.64],[-6.256,-51.301]],"v":[[-8.389,-153.358],[-62.274,-5.213],[-87.726,79.72],[2.75,170.5],[81.947,77.156],[45.058,-12.26]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4},{"ind":6,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":7,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":14,"s":[2]},{"t":21,"s":[0]}]},"p":{"a":0,"k":[215.144,416.538,0],"l":2},"a":{"a":0,"k":[-40,160,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[92,92,100]},{"t":14,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-17,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-10,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[15.5,11.25],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[0.5,7.5]],"o":[[8.75,31.75],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[-0.5,-7.5]],"v":[[-94.5,-47],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-70.75,-9.5]],"c":true}]},{"t":18,"s":[{"i":[[-9.483,16.373],[-3,-62.75],[0,0],[-3.5,36.5],[8.75,12.75],[-1.558,7.353]],"o":[[-20.408,6.097],[7.25,90],[0,0],[3.5,-36.5],[-8.75,-12.75],[2.03,-9.582]],"v":[[-55.341,-40.547],[-111.5,54.75],[-40.5,160.5],[-22.5,117.5],[-63.25,36],[-68.6,-7.136]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4},{"ind":7,"nm":"F","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":-1,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":6,"s":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":13,"s":[0]},{"t":20,"s":[2]}]},"p":{"a":0,"k":[259.929,425.312,0],"l":2},"a":{"a":0,"k":[2.694,170.559,0],"l":2},"s":{"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":-7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[96,96,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[100.281,100.281,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":14,"s":[96,96,100]},{"t":21,"s":[100.281,100.281,100]}],"a":1,"l":2}},"shapes":[{"ty":"gr","nm":"S","bm":0,"it":[{"ty":"sh","nm":"P","ind":0,"ks":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":-3,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":4,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":11,"s":[{"i":[[-9,89.5],[-25.5,-85.5],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[-12,3.5],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[60,-104.5],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]},{"t":18,"s":[{"i":[[52.89,38.56],[-16.101,-62.453],[19.35,-34.786],[-14.609,0],[3,97]],"o":[[17.893,71.697],[15.268,48.603],[-13.966,25.106],[29.75,0],[-1,-71]],"v":[[32.582,-97.74],[38,21.5],[-0.35,101.286],[6.75,170.75],[111.5,50.5]],"c":true}]}],"a":1}},{"ty":"fl","nm":"F","bm":0,"c":{"a":0,"k":[1,0.184,0.184,1]},"o":{"a":0,"k":100},"r":1},{"ty":"tr","o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"nm":"T","sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":15,"st":0,"ty":4}],"markers":[]}

package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED Viewed

@@ -24,6 +24,7 @@ import dotAnimation from "../../assets/images/anims/service_list/dot_animation.j
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
 import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -82,6 +83,9 @@ const ANIMATION_MAP = {
     usersAnimation: {
         kupos: usersAnimation,
     },
+    flameAnimation: {
+        kupos: flameAnimation,
+    },
 };
 function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
     var _a;
@@ -303,6 +307,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-10px",
             } },
             React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
                     ? {

package/dist/styles.css CHANGED Viewed

@@ -33,6 +33,9 @@
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
+.-top-\[13px\] {
+  top: calc(13px * -1);
+}
 .-top-\[18px\] {
   top: calc(18px * -1);
 }

package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 const TIME_SLOTS = [
     "Entre 07:00 AM y 10:00 AM",
     "Entre 11:00 AM y 14:00 AM",
@@ -39,22 +40,22 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
     const HOW_IT_WORKS_STEPS = [
         {
             icon: "flexible",
-            name: "1. Salida flexible",
+            name: "Salida flexible",
             text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
         },
         {
             icon: "bus",
-            name: "2. Empresa asignada",
+            name: "Empresa asignada",
             text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
         },
         {
             icon: "price",
-            name: "3. Precio garantizado",
+            name: "Precio garantizado",
             text: "Mejor precio garantizado. Sin cambios ni cancelación.",
         },
         {
             icon: "ticket",
-            name: "4. ¡Listo!",
+            name: "¡Listo!",
             text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
         },
     ];
@@ -152,7 +153,10 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                                         })))))))),
                     React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
                     React.createElement("div", null,
-                        React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } }, "3 operadores compitiendo por tu compra"),
+                        React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
+                            "3 operadores compitiendo ",
+                            React.createElement("br", null),
+                            "por tu compra"),
                         React.createElement("div", { className: "flex gap-[8px] text-[white]", style: { width: "100%" } }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 flex: 1,
                                 minWidth: 0,
@@ -163,7 +167,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                             } },
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
                             React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, serviceItem.operator_details[2]),
-                            React.createElement("span", { className: "text-[11px] mt-[6px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
+                            React.createElement("span", { className: "text-[11px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
                         React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
                                 border: "1px solid #363c48",
                                 backgroundColor: "#1a202e",
@@ -248,11 +252,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
                         React.createElement("div", { className: "flex flex-col" },
                             React.createElement("span", { className: "bold-text" }, step.name),
                             React.createElement("span", null, step.text)))))))))),
-        React.createElement("div", { className: "absolute -top-[11px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 " },
+        React.createElement("div", { className: "absolute -top-[13px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 " },
             React.createElement("div", { className: "flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap" },
                 React.createElement("span", { className: "flex items-center" },
-                    React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" }),
-                    React.createElement("span", { className: "bold-text ml-[5px] text-[white]" }, "Remate\u00A0"),
+                    React.createElement("div", { className: "mb-[2px]" },
+                        React.createElement(LottiePlayer, { animationData: flameAnimation, width: "16px", height: "16px" })),
+                    React.createElement("span", { className: "bold-text text-[white] ml-[3px]" }, "Remate\u00A0"),
                     " ",
                     React.createElement("span", { className: "text-[white]" }, "t\u00E9rmina en"),
                     " ",

package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED Viewed

@@ -28,7 +28,7 @@ const HARDCODED_OPERATORS = [
     },
 ];
 const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e;
     const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? serviceItem.operators
         : HARDCODED_OPERATORS;
@@ -39,22 +39,22 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
     const HOW_IT_WORKS_STEPS = [
         {
             icon: "flexible",
-            name: "1. Salida flexible",
+            name: "Salida flexible",
             text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
         },
         {
             icon: "bus",
-            name: "2. Empresa asignada",
+            name: "Empresa asignada",
             text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
         },
         {
             icon: "price",
-            name: "3. Precio garantizado",
+            name: "Precio garantizado",
             text: "Mejor precio garantizado. Sin cambios ni cancelación.",
         },
         {
             icon: "ticket",
-            name: "4. ¡Listo!",
+            name: "¡Listo!",
             text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
         },
     ];
@@ -80,8 +80,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
             showTopLabel
             ? "mt-[24px]"
             : "mt-[20px]"}` },
-        React.createElement("div", { className: "shadow-service", style: {
-                // border: "1px solid #c0c0c0",
+        React.createElement("div", { className: "border border-[#ccc]", style: {
+                // border: "0.6px solid #ccc",
                 padding: "14px",
                 borderRadius: "14px",
             } },
@@ -97,8 +97,13 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                             whiteSpace: "nowrap",
                         } },
                         React.createElement("span", null, "AHORRAS 60%"))),
-                React.createElement("span", null,
-                    React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "w-[14px] h-[14px] mb-[4px] mr-[4px]" }),
+                React.createElement("div", { className: "flex items-center" },
+                    React.createElement("div", { className: "mb-[2px]" },
+                        React.createElement(LottiePlayer
+                        // animationData={serviceItem.icons.flexibleAnim}
+                        , {
+                            // animationData={serviceItem.icons.flexibleAnim}
+                            animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
                     React.createElement("span", { className: "bold-text" }, "Remate"),
                     " t\u00E9rmina en",
                     " ",
@@ -113,10 +118,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                     React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
+                                React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
                             React.createElement("div", { className: "flex items-center gap-[8px]" },
-                                React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+                                React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
                                 React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
                         React.createElement("div", { className: "flex flex-col gap-[8px]" },
                             React.createElement("div", { className: "text-[12px] bold-text" }, "Viernes 23 de mayo"),
@@ -127,7 +132,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 }, style: { outline: "none" } },
                                 React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
                                     React.createElement("span", null, selectedTimeSlot),
-                                    React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
+                                    React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
                                             width: "12px",
                                             height: "8px",
                                             filter: "brightness(0) invert(1)",
@@ -162,7 +167,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                     } }, "Tu compra est\u00E1 100% asegurada.")))),
                     React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
                         React.createElement("div", { className: "text-center" },
-                            React.createElement("div", { className: "bold-text text-[14px]" }, "3 operadores compitiendo por tu compra")),
+                            React.createElement("div", { className: "bold-text text-[14px]" },
+                                "3 operadores compitiendo",
+                                React.createElement("br", null),
+                                " por tu compra")),
                         React.createElement("div", { className: "grid w-full grid-cols-3 items-stretch gap-[14px] mb-[12px]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
                                 // height: "80px",
                                 border: "1px solid #363c48",
@@ -245,7 +253,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
                                 animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
                             React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
                     React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
-                        React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
+                        React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
                                 width: "14px",
                                 height: "8px",
                                 filter: "brightness(0) invert(1)",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.7.9",
+  "version": "9.8.0",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/assets/images/anims/service_list/flame_anim.json ADDED Viewed

@@ -0,0 +1 @@

package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED Viewed

@@ -28,6 +28,7 @@ import dotAnimation from "../../assets/images/anims/service_list/dot_animation.j
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
 import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -90,6 +91,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   usersAnimation: {
     kupos: usersAnimation,
   },
+  flameAnimation: {
+    kupos: flameAnimation,
+  },
 };
 function ServiceItemPB({
@@ -636,6 +640,7 @@ function ServiceItemPB({
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                marginTop: isItemExpanded ? "" : "-10px",
               }}
             >
               <div

package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import commonService from "../../utils/CommonService";
+import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 const TIME_SLOTS = [
   "Entre 07:00 AM y 10:00 AM",
@@ -65,22 +66,22 @@ const FeatureServiceUiMobile = ({
   const HOW_IT_WORKS_STEPS = [
     {
       icon: "flexible",
-      name: "1. Salida flexible",
+      name: "Salida flexible",
       text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
     },
     {
       icon: "bus",
-      name: "2. Empresa asignada",
+      name: "Empresa asignada",
       text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
     },
     {
       icon: "price",
-      name: "3. Precio garantizado",
+      name: "Precio garantizado",
       text: "Mejor precio garantizado. Sin cambios ni cancelación.",
     },
     {
       icon: "ticket",
-      name: "4. ¡Listo!",
+      name: "¡Listo!",
       text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
     },
   ];
@@ -256,7 +257,8 @@ const FeatureServiceUiMobile = ({
                 className="block w-full text-[14px] bold-text text-[white] mb-[10px]"
                 style={{ textAlign: "center" }}
               >
-                3 operadores compitiendo por tu compra
+                3 operadores compitiendo <br />
+                por tu compra
               </span>
               <div
                 className="flex gap-[8px] text-[white]"
@@ -288,7 +290,7 @@ const FeatureServiceUiMobile = ({
                     {/* <div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
                       <span>{op?.time}</span>
                     </div> */}
-                    <span className="text-[11px] mt-[6px] whitespace-nowrap">
+                    <span className="text-[11px] whitespace-nowrap">
                       {op?.seatsAvailable}
                     </span>
                   </div>
@@ -493,15 +495,17 @@ const FeatureServiceUiMobile = ({
       </div>
       {/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
-      <div className="absolute -top-[11px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 ">
+      <div className="absolute -top-[13px] left-0  w-full flex items-center justify-center gap-[12px]  z-10 ">
         <div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
           <span className="flex items-center">
-            <LottiePlayer
-              animationData={serviceItem.icons.bombAnim}
-              width="14px"
-              height="14px"
-            />
-            <span className="bold-text ml-[5px] text-[white]">
+            <div className="mb-[2px]">
+              <LottiePlayer
+                animationData={flameAnimation}
+                width="16px"
+                height="16px"
+              />
+            </div>
+            <span className="bold-text text-[white] ml-[3px]">
               Remate&nbsp;
             </span>{" "}
             <span className="text-[white]">términa en</span>{" "}

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED Viewed

@@ -64,22 +64,22 @@ const FeatureServiceUi = ({
   const HOW_IT_WORKS_STEPS = [
     {
       icon: "flexible",
-      name: "1. Salida flexible",
+      name: "Salida flexible",
       text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
     },
     {
       icon: "bus",
-      name: "2. Empresa asignada",
+      name: "Empresa asignada",
       text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
     },
     {
       icon: "price",
-      name: "3. Precio garantizado",
+      name: "Precio garantizado",
       text: "Mejor precio garantizado. Sin cambios ni cancelación.",
     },
     {
       icon: "ticket",
-      name: "4. ¡Listo!",
+      name: "¡Listo!",
       text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
     },
   ];
@@ -112,9 +112,9 @@ const FeatureServiceUi = ({
        }`}
     >
       <div
-        className="shadow-service"
+        className="border border-[#ccc]"
         style={{
-          // border: "1px solid #c0c0c0",
+          // border: "0.6px solid #ccc",
           padding: "14px",
           borderRadius: "14px",
         }}
@@ -136,13 +136,16 @@ const FeatureServiceUi = ({
               <span>AHORRAS 60%</span>
             </div>
           </div>
-          <span>
+          <div className="flex items-center">
             {/* {renderIcon("fireIcon", "14px")}{" "} */}
-            <img
-              src={serviceItem.icons?.fireIcon}
-              alt="fire"
-              className="w-[14px] h-[14px] mb-[4px] mr-[4px]"
-            />
+            <div className="mb-[2px]">
+              <LottiePlayer
+                // animationData={serviceItem.icons.flexibleAnim}
+                animationData={getAnimationIcon("flameAnimation")}
+                width="18px"
+                height="18px"
+              />
+            </div>
             <span className="bold-text">Remate</span> términa en{" "}
             <span
               className="bold-text text-end"
@@ -154,7 +157,7 @@ const FeatureServiceUi = ({
                 minWidth: "40px",
               }}
             />
-          </span>
+          </div>
         </div>
         <div
           id={`service-card-${serviceItem.id}`}
@@ -296,7 +299,8 @@ const FeatureServiceUi = ({
             <div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
               <div className="text-center">
                 <div className="bold-text text-[14px]">
-                  3 operadores compitiendo por tu compra
+                  3 operadores compitiendo
+                  <br /> por tu compra
                 </div>
               </div>