🦸‍♂️ Hero banner iyileştir

al/sayfa.jsx

@@ -89,7 +89,7 @@ const Al = ({ Lang }) => (
           <div id={Css.KPassContainer}>
             <KPass />
           </div>
-          <Telefon style="opacity:0" kpass={false} />
+          <Telefon style="opacity:0" kpassli={false} />
         </div>
       </div>
     </body>

al/ödeme/birim.js

@@ -63,8 +63,8 @@ const paraVeMiktar = (para, miktar) => {
  * @param {number} eşik imece iptal için gereken oy eşiği.
  */
 const öde = (cidSözü, adresAğırlığı, eşik) => {
-  /** @const {Element} */
-  const paraDüğmesi = dom.adla("odb");
+  /** @const {!HTMLAnchorElement} */
+  const paraDüğmesi = dom.a("odb");
   /** @const {!Element} */
   const döküm = /** @type {!Element} */(dom.adla("odi").firstElementChild);
   /** @const {!Element} */
@@ -163,7 +163,7 @@ const öde = (cidSözü, adresAğırlığı, eşik) => {
   // Ek ücreti göster / gizle.
   döküm.children[1].style.display = iptalli ? "none" : "";
   // Para menüsünü yarat.
-  dom.menüYarat(paraDüğmesi, paraDüğmesi.nextElementSibling);
+  dom.menüYarat(paraDüğmesi, /** @type {!Element} */(paraDüğmesi.nextElementSibling));
   paraDüğmesi.nextElementSibling.onclick = (event) => {
     /** @const {Element} */
     const li = event.target.nodeName == "LI"

ana/hero/sergi/birim.css

@@ -20,19 +20,30 @@ h3 {
   padding: 0;
 }
 
+/**
+ * @name {KartSahnesi}
+ */
 #sec {
   overflow: hidden;
 }
 
+/**
+ * @export {Kartlar}
+ */
 #sem {
   display: flex;
   list-style: none;
   padding: 0;
   position: relative;
+  transform: translate3d(0, 0, 0);
   transition: transform 1s ease-in-out;
   width: 400%;
+  will-change: transform;
 }
 
+/**
+ * @name {Kart}
+ */
 .sek {
   font-size: 18px;
   font-weight: 400;
@@ -42,17 +53,26 @@ h3 {
   width: 25%;
 }
 
+/**
+ * @export {Boncuklar}
+ */
 #sen {
   height: 20px;
   margin: 0 0 40px;
 }
 
+/**
+ * @name {Boncuklu}
+ */
 .seb {
   cursor: pointer;
   display: inline-block;
   padding: 10px 8px;
 }
 
+/**
+ * @name {Boncuk}
+ */
 .sei {
   background-color: rgba(82, 86, 201, 0.2);
   border-radius: 5px;

ana/hero/sergi/birim.js

@@ -25,17 +25,26 @@ const yerleştir = () => {
  * @param {number} yeniKart
  */
 const kartDeğiştir = (yeniKart) => {
-  Telefon.nftGöster(yeniKart <= 1, !yeniKart);
-  yeniKart === 3
+  if (Kart > 2 && yeniKart == 0) yeniKart = 4;
+  const yeniKartDengi = yeniKart % 4;
+  Telefon.nftGöster(yeniKartDengi <= 1, !yeniKartDengi);
+  yeniKartDengi === 3
     ? Telefon.kutuGöster(dom.i18n({
       tr: "Bağlı app KPass’inizdeki iletişim bilgilerinize erişmek istiyor. İzin veriyor musunuz?",
       en: "The connected app would like to access your contact info section of your KPass."
     }))
     : Telefon.kutuKapat();
-  Boncuklar.children[Kart].firstElementChild.classList.remove("sel");
-  Boncuklar.children[yeniKart].firstElementChild.classList.add("sel");
+  Boncuklar.children[Kart % 4].firstElementChild.classList.remove("sel");
+  Boncuklar.children[yeniKartDengi].firstElementChild.classList.add("sel");
   Kart = yeniKart;
   yerleştir();
+  if (yeniKart == 4)
+    setTimeout(() => {
+      Kartlar.style.transition = "none";
+      Kart = 0;
+      yerleştir();
+      setTimeout(() => Kartlar.style.transition = "", 600)
+    }, 1200);
 }
 
 window.onresize = () => {
@@ -52,9 +61,11 @@ for (let /** number */ i = 0; i < Boncuklar.childElementCount; ++i) {
 
 const sergiSaatiKur = () => {
   if (SergiSaati) clearInterval(SergiSaati);
-  SergiSaati = setInterval(() => kartDeğiştir((Kart + 1) % 4), 12000);
+  SergiSaati = setInterval(() => kartDeğiştir(Kart + 1), 12000);
 }
 
 Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres));
 
+Kartlar.appendChild(Kartlar.firstElementChild.cloneNode(true));
+Kartlar.style.width = "500%";
 sergiSaatiKur();

ana/hero/sergi/birim.jsx

@@ -2,16 +2,16 @@ import Css from "./birim.css";
 import dom from "/lib/util/dom";
 
 /** @const {!HTMLDivElement} */
-export const Boncuklar = dom.div("sen");
+export const Boncuklar = dom.div(Css.Boncuklar);
 /** @const {!HTMLUListElement} */
-export const Kartlar = dom.ul("sem");
+export const Kartlar = dom.ul(Css.Kartlar);
 
 const Sergi = () => (
   <div id={Css.Kök}>
     <Css />
-    <div id="sec">
+    <div id={Css.KartSahnesi}>
       <Kartlar>
-        <li class="sek">
+        <li class={Css.Kart}>
           <h3>{{
             tr: "Kontrolü tamamen sende olan on-chain bir hesap",
             en: "An on-chain account that you truly own"
@@ -20,7 +20,7 @@ const Sergi = () => (
             tr: "Bir kez KPass al, destekleyen tüm platformlarda cüzdanını bağla, gerekli bilgileri güvenle sun, hesap açmadan işlem yap"
           }}
         </li>
-        <li class="sek">
+        <li class={Css.Kart}>
           <h3>{{
             tr: "İçeriği kendi cüzdan anahtarlarınla şifrelenir",
             en: "Your data is encrypted under your wallet private key"
@@ -29,14 +29,14 @@ const Sergi = () => (
             tr: "KPass içeriği kendi tarayıcında kendi cüzdan anahtarlarınla şifrelenir. KimlikDAO asla bilgilerini göremez ve saklamaz"
           }}
         </li>
-        <li class="sek">
+        <li class={Css.Kart}>
           <h3 data-en="KPass can be kept in any NFT wallet, such as MetaMask">MetaMask gibi NFT
             destekleyen kripto cüzdanında taşınır</h3>{{
               en: "KPass is an ERC-721 non-fungible token meaning that you can see it in any NFT wallet",
               tr: "KPass ERC-721 standardına uygun bir NFT olduğu için NFT destekleyen her cüzdanda görülebilir"
             }}
         </li>
-        <li class="sek">
+        <li class={Css.Kart}>
           <h3 data-en="Control who can access your info">dApp’lere istediğin
             bilgileri paylaş, istediklerini gizli tut</h3>{{
               en: "The connected dApp may send you requests for accessing parts of your KPass. Approve the sections you’d like to share, reject others",
@@ -46,18 +46,11 @@ const Sergi = () => (
       </Kartlar>
     </div>
     <Boncuklar>
-      <div class="seb">
-        <div class="sei sel"></div>
-      </div>
-      <div class="seb">
-        <div class="sei"></div>
-      </div>
-      <div class="seb">
-        <div class="sei"></div>
-      </div>
-      <div class="seb">
-        <div class="sei"></div>
-      </div>
+      {[...Array(4)].map((_, i) => (
+        <div class={Css.Boncuklu}>
+          <div class={[Css.Boncuk].concat(i == 0 ? "sel" : [])}></div>
+        </div>
+      ))}
     </Boncuklar>
   </div>
 );

birim/altdizin/birim.jsx

@@ -20,7 +20,7 @@ const Altdizin = () => (
       <Kaydol id={Css.KaydolBirimi} />
     </div>
     <div class={Css.Sütun}>
-      <b data-en="COMMUNITY">TOPLULUK</b>
+      <b>{{ en: "COMMUNITY", tr: "TOPLULUK" }}</b>
       <a href="//x.com/KimlikDAO">X</a>
       <a href="//discord.gg/H2wg6pcWXG">Discord</a>
       <a href={ExternalPage.Join + "#sa-ambassador1"}>{{ en: "Ambassador program", tr: "Ambassador ol" }}</a>
@@ -30,7 +30,7 @@ const Altdizin = () => (
       <a href="//linkedin.com/company/KimlikDAO/">LinkedIn</a>
     </div>
     <div class={Css.Sütun}>
-      <b data-en="DEVELOPERS">GELİŞTİRİCİLER</b>
+      <b>{{ en: "DEVELOPERS", tr: "GELİŞTİRİCİLER" }}</b>
       <a href="//github.com/KimlikDAO">GitHub</a>
       <a href={ExternalPage.Docs}>Docs</a>
       <a href={ExternalPage.Join}>{{ en: "Join KimlikDAO", tr: "KimlikDAO’ya katıl" }}</a>

birim/cüzdan/birim.js

@@ -372,7 +372,6 @@ const izinliyseBağla = () => {
     bağlantıSeçiciGöster();
 }
 
-
 const aç = () => AğDüğmesi.click();
 
 const kur = () => {

oyla/sayfa.js

@@ -15,10 +15,10 @@ ProposeButton.onclick = () => {
   dom.adlaGizle("oyyb");
   dom.adlaGöster("oyy");
   if (!SeçilmişÖneriId) SeçilmişÖneriId = "2";
-  /** @const {Element} */
-  const önergeDüğmesi = dom.adla("oyyddb");
-  /** @const {Element} */
-  const önergeMenusu = dom.adla("oyyul");
+  /** @const {!Element} */
+  const önergeDüğmesi = /** @type {!Element} */(dom.adla("oyyddb"));
+  /** @const {!Element} */
+  const önergeMenusu = /** @type {!Element} */(dom.adla("oyyul"));
   dom.menüYarat(önergeDüğmesi, önergeMenusu);
   önergeMenusu.onclick = (e) => {
     const li = e.target;