Feature: Update Legal-Page Banner Design

[aditya123123123123]

Problem / Feature

• The Privacy Policy and Terms of Use use the shared Banner component but lack page-length-aware visual treatment on desktop.
• Maintainer guidance on closed PR Update privacy disclosures and legal-page design #323 requested that the Banner design be submitted separately from policy, account, and tracking changes.

Approach

• Adds opt-in Banner props for top-anchored character art and page-length-aware educational decorations.
• Applies the denser illustration layout to Privacy Policy and the lighter layout to Terms of Use.
• Aligns the opted-in legal Banner with the lg:grid transition at exactly 1024px without changing the shared device-detection composable.
• Keeps existing Banner behavior unchanged for Login, Sign Up, reset, accessibility, and other non-opted-in pages.

Dependencies / Configuration

• No dependencies added or updated.
• No configuration, environment-variable, schema, or deployment changes.

Scope

• Targets preprod.
• Changes only:
  • src/components/AccountPages/Banner.vue
  • src/pages/Footer/PrivacyPolicy.vue
  • src/pages/Footer/TermsOfUse.vue
• No Privacy Policy or Terms text changes.
• No account, analytics, cookies, tracking, consent, or data-flow changes.

Accessibility

• Keeps the Banner decorative with aria-hidden="true" and empty image alt text.
• Preserves existing legal-page content order and semantics.

Screenshots / Logs

• Responsive browser captures were reviewed at the viewports listed below.
• Vercel preview is pending authorization from a member of Crystal’s Vercel team; this is not a build failure.

Manual Tests

• npm ci
• npm run build
• git diff --check
• Added-line secret/security pattern scan
• Privacy Policy: live browser review at 390px, 768px, 1024px, and 1280px
• Terms of Use: live browser review at 1024px
• Shared-component regression: exact 1024px Login Banner DOM geometry comparison against untouched preprod
• Branch freshness: confirmed preprod did not move before publishing (0 0 divergence)

Review / Merge

• Requested label: feature
• At least one explicit approval is required before squash merge.
• Do not merge while required tests or preview authorization remain unresolved.

Closes #326

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
audemywebsite	Ready	Preview	Aug 31, 2026 7:45am

[jschhie]

PR #329 Review

Thanks for recreating your PRs :)
Everything looks good, but just noticed a responsive bug on tablet (see below).

---

Manual Tests

• Tested on local dev & deployed on personal Vercel
• Checked responsive design:
  • Mobile & tablet (landscape/portrait orientations)
  • Browser resizing (1680px down to 360px) on desktop

Requested Changes

1. fix: Pixelated/Blurry Icons on Tablet

• When testing on my personal Vercel deployment, Carl and the speech bubble icon look a bit pixelated and blurry on tablet (especially in landscape mode)
• Could you please check the aspect ratio/CSS sizing on tablet viewports?

Portrait	Landscape

2. chore: Prettier Formatting

• I just pushed an extra chore commit to apply Prettier for codebase consistency (no other changes)
• Please run git pull locally before pushing additional changes!
• Friendly reminder for future PRs: Be sure to run npx prettier --write . per contributing guidelines to prevent unexpected git diffs :)

3. docs: Inline Docs (Suggestion/Nit)

• Your variable naming is clear, but adding a brief comment above computed properties or helper functions would be helpful for future maintainers