diff --git a/scan/components/world/ComingSoon.tsx b/scan/components/world/ComingSoon.tsx index e168104..b09f8fc 100644 --- a/scan/components/world/ComingSoon.tsx +++ b/scan/components/world/ComingSoon.tsx @@ -129,6 +129,22 @@ export default function ComingSoon() { Game guide ↗ + + {/* eslint-disable-next-line @next/next/no-img-element */} + View DevFridge World on PlayToEarn + ); diff --git a/scan/components/world/runway.module.css b/scan/components/world/runway.module.css index ee54240..ca7e193 100644 --- a/scan/components/world/runway.module.css +++ b/scan/components/world/runway.module.css @@ -151,6 +151,9 @@ .launchNewsletter > button, .newsletterForm > button { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; padding: 12px; border: 0; border-radius: 10px; background: #a4edff; color: #071624; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; } .launchNewsletter > button:hover, .newsletterForm > button:hover { background: #d0f6ff; } .launchNewsletter button:focus-visible, .newsletterForm input:focus-visible, .newsletterForm a:focus-visible { outline: 3px solid #ff91d9; outline-offset: 4px; } +.playToEarnBadge { display: flex; width: fit-content; margin: 20px auto 0; border-radius: 16px; } +.playToEarnBadge img { display: block; width: 120px; height: 120px; border-radius: 14px; object-fit: contain; } +.playToEarnBadge:focus-visible { outline: 3px solid #ff91d9; outline-offset: 4px; } .newsletterForm { display: flex; flex-direction: column; gap: 12px; min-width: 0; text-align: left; } .newsletterForm > label { font-size: 14px; line-height: 1.5; color: #e6f5ff; } .newsletterForm > input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #a4edff88; border-radius: 10px; padding: 12px; background: #080b18; color: #f3f8ff; font-size: 16px; } @@ -159,3 +162,6 @@ .newsletterForm > a { color: #a4edff; font-size: 12px; line-height: 1.5; text-decoration: underline; } .newsletterForm > p { font-size: 13px; color: #ffccd9; line-height: 1.6; margin: 0; } .newsletterForm button:disabled { opacity: .6; cursor: wait; } +@media (max-width: 900px), (max-height: 600px) and (pointer: coarse) { + .panel .playToEarnBadge { order: 8; align-self: center; margin-top: 18px; } +}