📋 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
🔗 References
📋 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.
🎯 Goals
.jsxcomponent files for each policy section inside a dedicatedfrontend/src/components/privacy/folder.PrivacyPage.jsx(which stays infrontend/src/pages/).🗂️ File Structure
Create the following component files inside a new dedicated folder
frontend/src/components/privacy/: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.jsxshould 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
text-3xlortext-4xl,font-black, uppercase or title-case — match the project’s brutalist design system).text-smortext-base, normal weight, generous line-height).py-16orpy-20) so each section breathes.Background Colors
#ffffff,#f9f9f9,#f3f3f3,#efefef) so sections feel continuous, not jarring.Modern Layout (Non-Stack)
The layout must go beyond a simple vertical stack. Consider one or more of:
frontend/src/pages/LandingPage.jsx) for animation hooks and layout patterns already used in the project.Consistency with Project Design System
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
.jsxcomponent files insidefrontend/src/components/privacy/.frontend/src/pages/PrivacyPage.jsximports all components from../../components/privacy/and composes them — no accordion remains.🔗 References
frontend/src/pages/FAQPage.jsx,frontend/src/pages/LandingPage.jsx