Skip to content

Redesign Privacy Policy Page: Replace Accordion with Modern Sectioned Layout #168

@coderabbitai

Description

@coderabbitai

📋 Overview

The current Privacy Policy page (frontend/src/pages/PrivacyPage.jsx) renders all 11 policy sections inside a single accordion component. While functional, the accordion pattern is not the best UX choice for a legal/policy page — users expect a scrollable, readable document rather than a collapsed list of toggles.

This issue tracks a full redesign of the Privacy Policy page into a modern, visually rich, sectioned layout.

Reference PR: #164 (Privacy Policy accordion implementation — completed)
Requested by: @kunalverma2512


🎯 Goals

  • Replace the accordion UI with clearly separated, full-width sections.
  • Give each section a large, prominent heading and concise body text.
  • Create individual reusable .jsx component files for each policy section inside a dedicated frontend/src/components/privacy/ folder.
  • Assemble all section components on the main PrivacyPage.jsx (which stays in frontend/src/pages/).
  • Maintain visual continuity with near-identical (but subtly varying) section background colors so the page feels like a single cohesive document — not a stack of disconnected blocks.
  • Implement a modern, non-stacked layout (e.g., asymmetric two-column grids, offset headings, full-bleed dividers, or alternating layouts) that elevates the page beyond a simple top-to-bottom list.

🗂️ File Structure

Create the following component files inside a new dedicated folder frontend/src/components/privacy/:

frontend/src/components/privacy/
├── PrivacyIntro.jsx          ← Section 1: Introduction
├── PrivacyInfoCollect.jsx    ← Section 2: Information We Collect (2.1–2.4)
├── PrivacyInfoUse.jsx        ← Section 3: How We Use Your Information
├── PrivacyCookies.jsx        ← Section 4: Cookies and Session Management
├── PrivacyThirdParty.jsx     ← Section 5: Disclosure to Third Parties
├── PrivacySecurity.jsx       ← Section 6: Data Security
├── PrivacyRetention.jsx      ← Section 7: Data Retention
├── PrivacyRights.jsx         ← Section 8: Your Data Protection Rights
├── PrivacyChildren.jsx       ← Section 9: Children’s Privacy
├── PrivacyChanges.jsx        ← Section 10: Changes to This Policy
└── PrivacyContact.jsx        ← Section 11: Contact Us

Each component receives its content via props (or reads from a shared data file) and renders a self-contained section block.

The main page file frontend/src/pages/PrivacyPage.jsx should import all of the above components from ../../components/privacy/ and compose them in order — no other changes are needed to the pages folder.


🎨 Design Requirements

Section Layout

  • Each section must have:
    • A large heading (e.g., text-3xl or text-4xl, font-black, uppercase or title-case — match the project’s brutalist design system).
    • A small, readable description/body (e.g., text-sm or text-base, normal weight, generous line-height).
    • Adequate vertical padding (e.g., py-16 or py-20) so each section breathes.

Background Colors

  • Each section must have a background color that is nearly the same as adjacent sections — use very subtle variations of white/off-white/light gray (e.g., #ffffff, #f9f9f9, #f3f3f3, #efefef) so sections feel continuous, not jarring.
  • Do not use strongly contrasting colors between sections — the goal is visual continuity, not separation.

Modern Layout (Non-Stack)

The layout must go beyond a simple vertical stack. Consider one or more of:

  • Offset/asymmetric headings: Section number or title pinned to the left in a narrow column while body text lives in a wider right column (CSS Grid two-column approach).
  • Full-bleed horizontal dividers with section numbers overlaid.
  • Sticky side-nav or section indicator dots on the right side for easy navigation.
  • Alternating indentation — odd sections indent left, even sections indent right.
  • Reference the Landing Page (frontend/src/pages/LandingPage.jsx) for animation hooks and layout patterns already used in the project.

Consistency with Project Design System

  • Continue using the brutalist black-border aesthetic where borders are appropriate.
  • Match font choices, spacing tokens, and Tailwind class conventions already used across the codebase (reference frontend/src/pages/DashboardPage.jsx, frontend/src/pages/FAQPage.jsx, frontend/src/pages/CodeforcesPage.jsx).

📝 Content

Do not change or rewrite the policy text. The exact content approved in #164 must be preserved verbatim in each component. Only the visual presentation changes.


✅ Acceptance Criteria

  • All 11 sections are extracted into individual .jsx component files inside frontend/src/components/privacy/.
  • frontend/src/pages/PrivacyPage.jsx imports all components from ../../components/privacy/ and composes them — no accordion remains.
  • Each section has a large heading and small descriptive text.
  • Section backgrounds use near-identical, subtly varying colors to maintain visual continuity.
  • Layout is modern and non-stacked (uses grid, asymmetric columns, or similar).
  • Page is fully responsive across mobile, tablet, and desktop.
  • No React console errors or warnings.
  • Design is consistent with the existing CodeLens design system.
  • Policy content matches the approved text from project page fixed #164 exactly.

🔗 References

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions