Redesign ng Shop: Premium na Itsura na may Lalim at Pulido

BAGO

Nakatanggap ang in-game shop ng kumpletong pagbabago sa biswal. Bawat elemento — mula sa mga product card hanggang sa cart sidebar, mula sa mga channel tab hanggang sa mga checkout button — ay na-redesign na may lalim, pulido, at makinis na mga animasyon.

Ano ang Nagbago

Mga Product Card

Ang puso ng shop ang nakakuha ng pinakamalaking upgrade:

  • Glass effect na may layered gradients at malalalim na anino
  • Makinis na hover — umaangat ang mga card, lumalaki ang imahe hanggang 1.08x, lumalabas ang glow
  • Mas malalaking imahe (170px ang taas, tumaas mula 150px)
  • Lazy loading — naglo-load lang ang mga imahe kapag naka-scroll na sa view, nakakatipid sa bandwidth
  • Border separator sa pagitan ng product info at ng area ng presyo/button
  • Mas malalaking presyo (16px) na may mas malakas na glow para sa CC at KC currencies

Bagong Shop Header

Lumalabas ang bagong identity bar sa itaas ng product grid, nagpapakita ng:

  • Type icon ng shop sa isang kulay na rounded container
  • Pangalan ng shop sa malaking bold na text
  • Type badge (hal., “Hardware”, “Food”, “Services”) na may kulay ng type
  • Bilang ng product at currency

Nagbibigay ito ng malinaw na biswal na identidad sa bawat shop bago ka pa man mag-scroll sa mga product.

Mga Channel Tab

Mas malinis na itsura ang nakuha ng mga tab para sa paglipat sa pagitan ng mga shop:

  • Pill-style na may rounded corners
  • Hover na banayad na nagbabago sa background
  • Active tab na nag-glow na may blue-cyan gradient at inner shadow
  • Tinanggal ang complex na border-mask effect para sa mas magandang performance

Filter Bar

Mas pulido na ngayon ang mga search at filter controls:

  • Rounded inputs (10px border-radius) na may focus rings
  • Pill-style selects na naghi-highlight sa hover
  • Filter count na ipinapakita bilang badge na may background
  • Clear button na may red accent at hover lift

Cart Sidebar

Ang shopping cart at orders panel sa kanang bahagi:

  • Sticky positioning — nananatiling nakikita habang nag-i-scroll ka sa mga product
  • Custom scrollbar — manipis na blue bar sa halip na default ng browser
  • Gradient backgrounds na may banayad na anino
  • Mas malalaking button na may hover lift effects
  • Checkout buttons na may gradient fill at glow sa hover

Mga Review

Ang section ng mga review sa ibaba ng bawat shop:

  • Mas magandang biswal na hierarchy na may divider line sa ilalim ng summary
  • Hover effect sa bawat individual review card (nag-iilaw ang left border)
  • Mas malalaking star at mas magandang spacing
  • Submit button na may gradient at anino sa hover

Premium card designs ang nakuha ng parehong search features:

  • Lalim na may layered shadows
  • Slide animation sa hover (nag-slide pakanan ang nearby cards)
  • Lift effect sa shop search cards na may purple glow
  • Mas malalaking icon (40px) na may sariling anino

Empty States

Kapag walang product na maipapakita, sa halip na simpleng text message, makikita mo na ngayon ang:

  • Isang malaking icon (📦)
  • Isang malinaw na mensahe (“No products match your filters” o “No products yet”)
  • Isang kapaki-pakinabang na paalala (“Try adjusting your search or check back later”)

Mga Animasyon

Umaanimasyon na ngayon ang mga product card na may staggered entrance — bawat card ay unti-unting lumalabas at bahagyang lumalaki, na may maliit na delay sa pagitan ng bawat card. Gumagamit ang animasyon ng makinis na cubic-bezier easing curve para sa premium na pakiramdam.

Map Pin Opt-Out

Kasama rin sa release na ito ang isang bagong privacy feature para sa mga shop owner:

Ang mga service provider na ayaw mag-reveal ng kanilang pisikal na lokasyon ay maaari na ngayong i-uncheck ang “Show my shop on the world map” sa kanilang shop settings. Mananatiling ganap na functional ang shop — hindi lang ito lalabas bilang pin sa mapa.

Lalo itong kapaki-pakinabang para sa mga consultant, digital service provider, at sinumang ang negosyo ay walang public storefront.

Performance

Kahit mas mayaman ang mga biswal, ang shop ay aktwal na mas mabilis salamat sa:

  • loading="lazy" sa mga product imahe — naglo-load lang ang browser ng mga imahe na nakikita
  • Pinasimple ang CSS (tinanggal ang complex na ::before masks sa mga channel tab)
  • GPU-accelerated transforms para sa hover animations

Ano ang Susunod

Nagtatanim ang shop redesign ng biswal na pundasyon para sa mga paparating na features:

  • Product detail overlays na may full-size na imahe at specs
  • Wishlist / favorites — i-save ang mga product para sa mamaya
  • Shop collections — curated na grupo ng product
  • Discount codes — promotional na presyo
  • Shop analytics para sa mga owner — views, clicks, conversion

Ang ENLIGHTENMENT ay isang blockchain-based na laro ng personal na paglago, paggalugad ng archetype, at kolektibong resonance. Sumali sa amin sa getplasma.org.