Update Privacy Policy Page (Terms & Conditions)

[Rutjake]

✨ Enhancement Description

The goal of this issue is to update the Privacy Policy and Terms of Service page to match the new Figma designs. The page should feature an accordion-style interface for better readability.

---

🌟 Benefits of the Enhancement

• Consistent Look & Feel: Aligns the legal pages with the platform's updated visual identity.
• Enhanced User Experience: Replaces long walls of text with an interactive accordion, making it easier for users to find specific information.

---

🛠️ Proposed Implementation

Layout & Styling

• Color & Typography: Implement the color palette and typography as shown in the designs.
• Containers: Use the card-style layout with rounded corners and appropriate padding for the main content area.
• Responsiveness: Ensure the text remains readable and the accordion items are easily tappable on mobile devices.

Functionality: Accordion System

• Interactive Titles: Implement a "Collapsible/Accordion" functionality. Clicking a section title (e.g., "3. Kerättävät tiedot") must toggle the visibility of its content.
• Smooth Transitions:
  • Use a smooth height transition (e.g., grid-template-rows or max-height animation) when expanding/collapsing sections.
  • Add a subtle fade-in effect for the content text.
• Chevron Animation:
  • The icon on the right is a Chevron.
  • It should rotate 90° when the section is active/expanded to provide clear visual feedback.

Content & Localization

• i18n: Ensure all legal text is pulled from the correct translation files (FI/EN).
• Text Audit: Verify the latest legal copy with the Issue Author or Team Producer.

---

📎 Additional Information

• Reference Image: (See attached screenshot for the accordion behavior and Chevron placement).
• 🔗Figma Designs

📷 Preview from Design: