[WIP] Rebuild mobile webapp UI to match design screenshots

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Rebuild the mobile webapp UI to closely match the provided screenshots (educational prototype) and wire clickable bottom navigation between sections.

Repository: Clopezio/2030-Web

Implement these screens and behavior:

1. Profilo screen

• Green gradient header area with Trenord-style branding placement and a bell icon area.
• Profile card with greeting, name, email.
• “Novità” row with “Già letto”.
• Settings/account list rows with circular icon backgrounds and chevrons.
• Overall spacing, rounded cards, light gray background, typography and hierarchy matching screenshot proportions.

2. Gite in treno screen

• Green header with title “Gite in treno”.
• Top strip “Offerte e promozioni 2026” + “Già letto”.
• Vertical list of promo cards: thumbnail left, bold category title right, green rounded “Scopri di più” button, validity line.
• Dividers and spacing like screenshot.

3. Acquista screen – MXP tab variant

• Red gradient header/theme for MXP variant.
• Top tab row with “BIGLIETTI/CARNET”, “ABBONAMENTI”, “MXP” where MXP is active.
• “Più popolari” list with white text on red panel and row separators.
• “Tutte le soluzioni” card rows for departure/arrival selections with icons and chevrons.
• Return switch/date row placeholders styled to match visual language.

4. Acquista screen – Abbonamenti tab variant

• Green header theme.
• Same tab row where “ABBONAMENTI” is active.
• “SELEZIONA ABBONAMENTO” section.
• White subscription card with fields (Mensile, Passeggero, Validità, Viaggio) and radio indicator.
• Two action buttons: filled muted green “RINNOVA” and outlined green “ACQUISTA NUOVO”.

5. Bottom navigation (persistent)

• Fixed bottom nav with 5 tabs: Home, Acquista, Wallet, Gite in treno, Profilo.
• Clicking tabs switches to the corresponding screen.
• Active tab highlighted in green; inactive gray.
• Keep mobile-first sizing and safe area padding.

Implementation constraints

• Keep this as static frontend (HTML/CSS/JS) unless repo already uses a framework; if framework exists, follow existing architecture.
• Reuse existing assets/icons where possible; otherwise use lightweight icon library or inline SVG.
• Prioritize visual similarity: spacing, font sizes/weights, corner radii, colors, shadows, and section hierarchy.
• Ensure files run cleanly and navigation works end-to-end.

Deliverables

• Commit code changes and open a PR with a concise summary of what was built and any assumptions/placeholders (e.g., placeholder images/text where real assets are unavailable).

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: This webapp im making, is for educational purposes only. It is a prototype for a school badge my school asked me to do, but until its ready im gonna clone this already existing app since the structure i need is very similiar then i can build my schools app on top of it. can you help me rebuild this app if i send you the screenshots of the different sections?

Assistant: Absolutely — yes, I can help you rebuild it section by section from screenshots.

Send the screenshots (desktop first, then mobile if you have both), and I’ll help you with:

1. Layout structure (HTML/JSX)
2. Styling (CSS, spacing, colors, fonts)
3. Components split (navbar, cards, forms, etc.)
4. Responsive behavior
5. Polish/details (hover states, icons, shadows, transitions)

If you want, we can do this in a clean flow:

• You send one section screenshot
• I give you the exact code for that section
• You paste/test
• We iterate until it matches closely
• Then move to next section

Start by sending the first screenshot and telling me what stack you want to use (plain HTML/CSS/JS or React).

User: start out by doing these sections. try to make them as similiar to the image as possible identical if you can and obviously make so that i can click on the navbar on the lower part of the website to access those you can see in the images which one goes where

Assistant: Perfect — I can do this, and yes: I’ll wire the bottom navbar so each icon opens the correct section from your screenshots.

Since you shared the repo URL, next step is I implement it directly in Clopezio/App-Trenord with:

• Home/Profilo screen (image 1)
• Gite in treno list (image 2)
• Acquista → MXP tab (image 3)
• Acquista → Abbonamenti tab (image 4)
• Bottom tab navigation:
  • Home
  • Acquista
  • Wallet
  • Gite in treno
  • Profilo

I’ll reproduce spacing, typography, cards, colors, tab states, and fixed bottom bar as close as possible.

If you want me to start coding now, just say:
“Go ahead and implement in the repo.”

User: Go ahead and implement in the repo.

User: can you make this an agent session

Assistant: Absolutely — I can start an agent session for this.

Before I launch it, quick confirmation so I target the correct repo:

• You want the agent session on Clopezio/2030-Web (the repo you most recently provided), right?

If yes, I’ll start the session and have it implement the screenshot-based mobile UI with clickable bottom navigation.

User: yea do it

Assistant: Great — we’re just waiting for you to approve the agent-session prompt in GitHub, and as soon as you accept it I can continue.