Change the duo pro discover page to match new wording and design

What does this MR do and why?

Change the duo pro discover page to match new wording and design

• new design and wording as per https://gitlab.com/gitlab-org/gitlab/-/issues/489070
• refactor some tests and identifiers to be more flexible to change and to remove repeating testing layers and testing helper things in the view layer.

Changelog: other EE: true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After
Screen_Recording_2024-10-02_at_9.23.31_AM	Screen_Recording_2024-10-02_at_9.27.11_AM

How to set up and validate locally

1. Setup GDK to simulate SaaS
2. Create a new top-level group.
3. Go to admin panel and edit the group to apply the Ultimate plan.
4. Add a duo pro trial to that namespace in the rails console

n = Namespace.last
add_on = ::GitlabSubscriptions::AddOn.where(name: ::GitlabSubscriptions::AddOn.names[:code_suggestions]).last
::GitlabSubscriptions::AddOnPurchase.create(add_on: add_on, namespace: n, quantity: 1, expires_on: 30.days.from_now, purchase_xid: SecureRandom.hex(16), trial: true, organization_id: 1)

3. Navigate to http://localhost:3000/groups/#{your-test-group}/-/add_ons/discover_duo_pro

Related to #489070