Update bridge.linea.build with new design

[nkkurt]

Hey, the Growth Marketing Intake Typeform got a new response and a new ticket has been created:

Please enter your email address

mailto:[email protected]|[email protected]

Due Date?

2025-01-22

Which category best suits your request?

Linea

Which category best suits your request? (other choice)

What do you need help with?

Website

What do you need help with?

Existing Webpage Update

Existing Webpage URL

bridge.linea.build

Figma URL

https://www.figma.com/design/5vnmyzpeOeO8ZjiHuqc3qk/Bridge-UI-Design?node-id=1322-5125&t=wAmNzvXCShJ8GrEL-0

Doc URL

NA

Describe the purpose/goal for updating the existing webpage

Update the front-end to improve the UX and conversion

Stakeholders?

Matthieu Bouchaud

Is there anything more you'd like to share?

You're welcome to provide additional details or ask any further questions.

The focus will be solely on building the front-end based on the new design specs. This includes implementing the updated layout, styles, and interactive components as per the provided design files

Connecting these components to the back-end will be handled by another developer from the Linea team with knowledge of the app and logic.

You can use mock data or stubs for any dynamic elements or API responses.

In Linea repo (github), update the Bridge UI module. It's in Next.js +Tailwind

Reach out to <@U034C3WR7L2> or <@U0243QZV62V> for access and troubleshooting.

---

<@UE7FNGMAL> Here's the link to the Jira Ticket that has been created:

https://consensyssoftware.atlassian.net/browse/GMT-2676

---

Slack Message

[nkkurt]

Hi @viphan007 , please let me, @VGau and @MatthieuBouchaud know if you have any questions here or in the slack thread.

[nkkurt]

Hi @viphan007 , Are we on track for Jan 22nd for this ticket?

[viphan007]

Hi @nkkurt, can I have 2 more days (24th Jan)?

[viphan007]

Hi @nkkurt, i have created a PR here: #597

[nkkurt]

Thanks @viphan007! 🙌 Added @VGau as reviewer to the PR. @VGau do you have a staging environment for this branch for @katiewilkinson to review?

[katiewilkinson]

@viphan007 @nkkurt It's looking really great. Below is my design QA, let me know if there are any questions:

1. The UI looks zoomed on a large screen

2. When the amount field is empty or "0" the box below it "Get on Linea" should not appear. That box drops down when a user enters an amount

3. The switch chains icon is not working

4. I'm not able to type any amount in the field

5. Update the Linea logo from yellow to cyan
   

6. Update copy to "Can't wait? Speed up"

7. Can we add a hover state to the "Bridge" and "Transaction" tabs? Background should be yellow on hover similar to the configure icon

8. For native in manual mode we should show "no fees".

For Across, we will display the Across fees.

9. Can we add an underline hover state to the purple links "Speed up" and "Check our FAQ"

10. In the navigation can we allow "Bridge" to be clickable and navigate to the bridge

11. After a user is connected, the "Connect" CTA should change to a disabled CTA that reads "Enter an amount". If the user does not have enough funds in their wallet the button remains disabled and says "Insufficient funds". The button becomes active once a user enters an amount and has sufficient funds, it should read "Bridge". Im unable to test the actual bridge part since the CTA doesnt change from "Connect"

12. When a user updates or changes the destination address we need to show the warning message

13. The banner text on the transaction page on mobile looks a bit squished

14. Any links in the FAQ should be purple
15. Can we avoid the background shape image to move with the FAQ page? It should remain static on all pages

[nkkurt]

16. Typo: 'Need help? Check your FAQ ' should be 'Check our FAQ'

Thanks @katiewilkinson .

1. The UI looks zoomed on a large screen

Does following the same style as https://linea.build/security sound good?

6. Update copy to "Can't wait? Speed up"

@katiewilkinson Let's update this in the Figma as well to avoid future regressions

15. Can we avoid the background shape image to move with the FAQ page? It should remain static on all pages

The image is actually glued to the end of the page. When the FAQ is expanded, it's still at the end of the page, but the page length is growing. Not sure if what we can do about this. Maybe we can opt to a smaller image?