new mobile landing page

[newraina]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Mobile landing improvements  #7896
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Ecosystem Telegram?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at 2632727

This pull request improves the responsiveness and user experience of the landing page and the navigation bar for mobile devices. It introduces a new component MobileLanding.vue that displays a custom layout with a chain selection option and a banner for a free generative drop. It also refactors the existing LandingPage.vue component to use different components for mobile and desktop layouts. It adds new computed properties and constants to handle the chain logic and icons. It updates the localization keys and the styles for the landing page components.

🤖 Generated by Copilot at 2632727

We're the masters of the chain, we choose our destiny
We unlock the secrets of the generative drop
We defy the limits of the screen, we adapt to any size
We optimize the performance of the landing page

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	47c1470
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65476dd4bf099b0008930afa
😎 Deploy Preview	https://deploy-preview-7922--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kodabot]

SUCCESS @newraina PR for issue #7896 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[reviewpad]

AI-Generated Summary: This pull request includes four different updates. Firstly, changes have been made to the Navbar.vue component to always show the search entry on mobile. An additional isTinyMobile computed property has been implemented to adjust the interface for smaller mobile screens. Secondly, the unlockable landing tag icon was moved to a separate SVG file to simplify the Vue component and enhance maintainability. Next, a new mobile landing page was created with new components and additions to several files including one for mobile banner and one for mobile landing itself with related styling and localization. Lastly, it removes unused 'section-search' CSS class to reduce code clutter, improve readability, and optimize the CSS file size.

[roiLeo]

small stuff

[exezbcz]

visual oki, like it, thanks!

[prury]

here form me it still shows all the networks, and the Claim Yours button redirects to the wrong drop(should redirect to generative drop)

[exezbcz]

here form me it still shows all the networks

yeah, saw that too, could you please make sure that on production (kodadot.xyz) it will show only the few networks

[newraina]

@prury @exezbcz

it still shows all the networks

I've limited it so that only popularChains (ksm / ahk / ahp) will show up in the production environment. Do you guys think we should only display these three in any environment?

const chains = computed(() => {
  if (isProduction) {
    return availableChainsWithIcon.value.filter((c) =>
      popularChains.includes(String(c.value)),
    )
  }
  return availableChainsWithIcon.value
})

---

the Claim Yours button redirects to the wrong drop(should redirect to generative drop)

fixed.

[prury]

@prury @exezbcz

it still shows all the networks

I've limited it so that only popularChains (ksm / ahk / ahp) will show up in the production environment. Do you guys think we should only display these three in any environment?

nope, you did the right thing, mb and thank you

[daiagi]

minor suggestions,
overall lgtm

[codeclimate]

Code Climate has analyzed commit 47c1470 and detected 2 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Duplication	2

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.8% Duplication

[yangwao]

Thanks!
pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.86 USD/DOT ~ 10.288 $DOT
🧗 1CAv6Zq3yVxL3eKhC94GWTWVwp1w4jZbqeZ6wXx1rPAhrce
🔗 0xebe5815342366560918c0608be13fd9aec9cecab3eeea2bc362775a8d8bcd945

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues