feat(tangle-dapp): Add Blueprint Overview Page on Tangle dApp

[vutuanlinh2k2]

Summary of changes

Provide a detailed description of proposed changes.

• Add Blueprint Overview Page on Tangle dApp

Proposed area of change

Put an x in the boxes that apply.

• apps/bridge-dapp
• apps/hubble-stats
• apps/stats-dapp
• apps/tangle-dapp
• apps/testnet-leaderboard
• apps/faucet
• apps/zk-explorer
• libs/webb-ui-components

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

• Closes [TASK] Implement Blueprints Overview Page #2464

Screen Recording

If possible provide a screen recording of proposed change.

Light Theme

CleanShot.2024-08-01.at.21.44.42.mp4

Dark Theme

CleanShot.2024-08-01.at.21.47.42.mp4

---

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	ed846b1
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66b1fa35e729ed00081d775f
😎 Deploy Preview	https://deploy-preview-2494--tangle-dapp.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.

[monaiuu]

Blueprint Cards:

• Implement hover states to blueprint card components (notice color change in description texts & addition of grid image overlay in hover), grid svgs can be exported here
  (left is default, right is hover)

• For boosted cards, update border fill as linear-gradient shown below:

• Implement 1-line constraint for Blueprint title, with additional texts truncated

• Add subtle glow effect to 'boosted' chips; add #fff fill at 1% opacity, with inner shadow indicated below:

• For improved visibility in light mode, reverse gradient effect:
  Previous: background: linear-gradient(180deg, rgba(236, 239, 255, 0.20)0%, rgba(184, 196, 255, 0.20)100%), linear-gradient(180deg, rgba(255, 255, 255, 0.50)0%, rgba(255, 255, 255, 0.30)100%);
  Updated: background: linear-gradient(180deg, rgba(184, 196, 255, 0.20)0%, rgba(236, 239, 255, 0.20)100%), linear-gradient(180deg, rgba(255, 255, 255, 0.50)0%, rgba(255, 255, 255, 0.30)100%);

• Add border outlines to cards component

Banner Card:

• The Blueprint image in the banner seems difficult to see; they can be exported here

[vutuanlinh2k2]

• linear-gradient(180deg, rgba(236, 239, 255, 0.20)0%, rgba(184, 196, 255, 0.20)100%), linear-gradient(180deg, rgba(255, 255, 255, 0.50)0%, rgba(255, 255, 255, 0.30)100%)

@monaiuu

Updated:

CleanShot.2024-08-06.at.17.24.28.mp4

[monaiuu]

LGTM!