Generate a single-page SPA (Single Page Application) for 'Gizlilik Kalkanı: Dijital Ayak İzini Koru' (Privacy Shield: Protect Your Digital Footprint). This application aims to provide Canadians with transparency and tools to manage their digital footprint in light of Bill C-22, which mandates mass metadata surveillance.
**1. PROJECT OVERVIEW**
The core problem this application addresses is the lack of transparency and control individuals have over the mass metadata surveillance mandated by Canada's Bill C-22. Many Canadians are unaware of the extent of data collection, its implications, or how to exercise their rights. 'Gizlilik Kalkanı' provides a centralized hub for information, resources, and tools to empower users to understand, assess, and potentially mitigate their digital exposure. The core value proposition is to transform a complex, opaque legal issue into actionable knowledge and control for the average Canadian citizen.
**2. TECH STACK**
* **Frontend Framework:** React.js (using Vite for fast development server and build)
* **Styling:** Tailwind CSS (for rapid, utility-first styling)
* **State Management:** Zustand (lightweight and performant for global state)
* **Routing:** React Router DOM (for client-side navigation)
* **Form Handling:** React Hook Form (for efficient and scalable form management)
* **Validation:** Zod (for schema validation, integrates well with React Hook Form)
* **HTTP Client:** Axios (for making API requests, though for MVP, local state and mock data are sufficient)
* **Date Handling:** date-fns (lightweight and modular date utility library)
* **Icons:** lucide-react (or similar for clean, scalable icons)
**3. CORE FEATURES**
* **A. Bill C-22 Information Hub:**
* **Description:** A dedicated section explaining Bill C-22 in clear, concise language. It should cover the bill's purpose, scope, implications for Canadians, and current status.
* **User Flow:** User lands on the homepage, navigates to 'About Bill C-22' via the header menu. They see summarized information with expandable sections for more detail. Links to official government sources are provided.
* **B. Data Request Assistant:**
* **Description:** Provides templates and guidance for users to request their metadata from Canadian authorities. This includes pre-filled form sections and instructions on how to submit requests.
* **User Flow:** User navigates to 'Request Your Data'. They select a template (e.g., 'General Metadata Request'). The system presents a form with fields like Name, Contact Info, Specific Data Period. Based on user input, a downloadable PDF/text document is generated. Instructions on where/how to send it are displayed.
* **C. Privacy Risk Assessment:**
* **Description:** An interactive tool (quiz/questionnaire) that helps users assess their potential digital privacy risks based on their online habits and data sharing behaviors.
* **User Flow:** User goes to 'Assess Your Risk'. They answer a series of multiple-choice questions (e.g., 'How often do you use public Wi-Fi?', 'Do you disable location services?'). Upon completion, a personalized risk score and a summary report highlighting key areas of concern are displayed.
* **D. Secure Communication Portal (Placeholder for MVP):**
* **Description:** A future feature placeholder, but for MVP, it can be a curated list of trusted organizations (lawyers, privacy advocates, NGOs) with contact information and brief descriptions.
* **User Flow:** User navigates to 'Get Help'. They see a list of organizations, filterable by category or region. Clicking an organization shows its details and contact info.
* **E. Educational Resources:**
* **Description:** A library of articles, FAQs, videos, and guides on digital privacy, data rights, surveillance laws, and best practices for protecting personal information.
* **User Flow:** User clicks on 'Learn More'. They can browse articles by category (e.g., 'Understanding Metadata', 'Your Rights', 'Data Security Tips'). Each article is presented in a clean, readable format.
**4. UI/UX DESIGN**
* **Layout:** Single-page application layout. A persistent header with the app logo and main navigation links (About Bill C-22, Request Your Data, Assess Your Risk, Get Help, Learn More). A footer with copyright information and links to Privacy Policy/Terms of Service. Content area dynamically updates based on the selected route.
* **Color Palette:**
* Primary: A deep, trustworthy blue (#1A202C - dark slate) for backgrounds, headers.
* Secondary: A calming, secure teal/cyan (#06B6D4 - cyan) for accents, buttons, active states.
* Accent: A muted orange/yellow (#F59E0B - amber) for warnings or important call-to-actions.
* Text: Light grey (#E2E8F0) on dark backgrounds, dark grey (#2D3748) on light backgrounds.
* Background: Dark mode first approach using #1A202C. A light mode toggle can be added later.
* **Typography:**
* Headings: A modern, sans-serif font like Inter or Manrope (e.g., SemiBold or Bold).
* Body Text: Inter or Manrope (e.g., Regular) for readability.
* Font Sizes: Ensure a clear hierarchy (e.g., H1: 36px, H2: 28px, Body: 16px, Small text: 14px).
* **Responsive Design:** Mobile-first approach. Use Tailwind CSS's responsive modifiers (sm:, md:, lg:, xl:). Ensure proper layout adjustments for all screen sizes. Navigation should collapse into a hamburger menu on smaller screens. Forms and content blocks should stack vertically and maintain readability.
* **Interactivity:** Subtle hover effects on buttons and links. Smooth transitions for route changes and modal appearances. Clear loading indicators for any asynchronous operations (even simulated ones in MVP).
**5. COMPONENT BREAKDOWN**
* **`App.jsx`:** Main application component. Sets up routing and global layout.
* Props: None
* Responsibility: Root component, router configuration.
* **`Header.jsx`:** Navigation bar.
* Props: `navItems` (array of objects { name: string, path: string })
* Responsibility: Displays logo and navigation links. Handles mobile menu toggle.
* **`Footer.jsx`:** Footer component.
* Props: None
* Responsibility: Displays copyright and utility links.
* **`Layout.jsx`:** Main layout wrapper.
* Props: `children` (ReactNode)
* Responsibility: Wraps page content with Header and Footer.
* **`HomePage.jsx`:** Landing page component.
* Props: None
* Responsibility: Introduces the app, highlights key features, includes a call to action.
* **`BillInfoPage.jsx`:** Displays information about Bill C-22.
* Props: None (Data fetched or hardcoded for MVP)
* Responsibility: Presents detailed info on the bill.
* **`DataRequestPage.jsx`:** Component for the Data Request Assistant.
* Props: None
* Responsibility: Manages the form for data requests, generates downloadable documents.
* Sub-components: `DataRequestForm.jsx`, `TemplateSelector.jsx`, `DownloadButton.jsx`
* **`PrivacyRiskPage.jsx`:** Component for the Privacy Risk Assessment tool.
* Props: None
* Responsibility: Manages the risk assessment questionnaire and displays results.
* Sub-components: `RiskQuestionnaire.jsx`, `RiskResultDisplay.jsx`
* **`GetHelpPage.jsx`:** Displays a list of trusted organizations.
* Props: None (Data hardcoded for MVP)
* Responsibility: Lists contact information for support organizations.
* **`LearnPage.jsx`:** Displays educational resources.
* Props: None (Data hardcoded for MVP)
* Responsibility: Organizes and displays articles and guides.
* **`Button.jsx`:** Reusable button component.
* Props: `onClick`, `children`, `variant` (primary, secondary), `disabled`
* Responsibility: Standardized button styling and behavior.
* **`Card.jsx`:** Reusable card component.
* Props: `children`, `className`
* Responsibility: UI element for grouping content.
* **`Input.jsx`:** Reusable input field component.
* Props: `label`, `type`, `register`, `error`
* Responsibility: Styled form input.
* **`Modal.jsx`:** Reusable modal component.
* Props: `isOpen`, `onClose`, `children`, `title`
* Responsibility: Displays content in a modal overlay.
**6. DATA MODEL**
* **State Management (Zustand):**
* `billStore`: { billInfo: object, isLoading: boolean, error: string | null }
* `requestStore`: { formData: object, submitted: boolean, documentUrl: string | null }
* `riskStore`: { answers: array, score: number | null, report: object | null }
* `resourceStore`: { articles: array, faqs: array }
* **Mock Data Structures:**
* `BillInfo`: `{ title: string, summary: string, details: string, status: string, officialLink: string }`
* `DataRequestForm`: `{ name: string, email: string, startDate: string, endDate: string, specificRequests: string }`
* `RiskQuestion`: `{ id: string, questionText: string, options: [{ value: string, label: string }] }`
* `RiskResult`: `{ score: number, category: string, insights: string[] }`
* `Resource`: `{ id: string, title: string, type: 'article' | 'faq' | 'video', content: string, url?: string }`
* `HelpOrg`: `{ id: string, name: string, description: string, contact: string, website: string, category: string }`
**7. ANIMATIONS & INTERACTIONS**
* **Page Transitions:** Use `Framer Motion` or simple CSS transitions for smooth fading or sliding effects between page routes.
* **Hover Effects:** Subtle scale-up or background color change on interactive elements like buttons, links, and cards.
* **Loading States:** Use skeleton loaders or spinners (e.g., from `react-spinners`) for sections that would typically fetch data. For MVP, simulate delays using `setTimeout` wrapped in Promises and display a spinner.
* **Micro-interactions:** Button press feedback, form field focus indicators, subtle animations on form submission success/error messages.
* **Accordion/Expandable Sections:** Smooth expansion/collapse animations for detailed information sections.
**8. EDGE CASES**
* **Empty States:** Design clear UI for when there are no articles, no request history, or no risk assessment results yet. Include prompts to take action (e.g., 'Start your first risk assessment').
* **Error Handling:** Implement global error handling. Display user-friendly error messages for network failures, invalid inputs, or server errors. Use `React Hook Form`'s error prop for field-level validation messages.
* **Form Validation:** Use Zod schemas with React Hook Form for robust validation (required fields, email format, date ranges, etc.). Provide clear inline validation feedback.
* **Accessibility (a11y):** Use semantic HTML elements. Ensure sufficient color contrast. Add ARIA attributes where necessary. Ensure keyboard navigation is fully supported. Use `alt` text for images.
* **Browser Compatibility:** Test across major modern browsers (Chrome, Firefox, Safari, Edge).
* **Data Persistence (MVP):** Use `localStorage` for simple state persistence if needed (e.g., user preferences), but focus on client-side state management with Zustand for core app data.
**9. SAMPLE DATA**
```json
// Bill C-22 Info Example
{
"billInfo": {
"title": "An Act to enact the Consumer Privacy Protection Act and to make consequential and related amendments to other Acts (Bill C-22)",
"summary": "This bill proposes new rules for protecting personal information in the private sector, including enhanced individual rights and obligations for organizations.",
"details": "Key provisions include consent requirements, data breach notification obligations, and the establishment of a new Privacy Commissioner with stronger enforcement powers. It addresses the collection, use, and disclosure of personal information.",
"status": "First Reading in the House of Commons",
"officialLink": "https://www.parl.ca/DocumentViewer/en/45-1/bill/C-22/first-reading"
}
}
// Data Request Form Mock
{
"requestData": {
"name": "",
"email": "",
"startDate": "",
"endDate": "",
"specificRequests": ""
}
}
// Risk Assessment Question Example
[
{
"id": "q1",
"questionText": "How often do you connect to public Wi-Fi networks without a VPN?",
"options": [
{"value": "never", "label": "Never"},
{"value": "rarely", "label": "Rarely"},
{"value": "sometimes", "label": "Sometimes"},
{"value": "often", "label": "Often"}
]
},
{
"id": "q2",
"questionText": "Do you disable location services on your mobile devices when not actively navigating?",
"options": [
{"value": "yes_always", "label": "Yes, always"},
{"value": "yes_often", "label": "Yes, often"},
{"value": "no_rarely", "label": "No, rarely"},
{"value": "no_never", "label": "No, never"}
]
}
]
// Risk Result Example
{
"score": 65,
"category": "Moderate Risk",
"insights": [
"Frequent use of public Wi-Fi increases exposure to network-based threats.",
"Sharing precise location data frequently can reveal patterns about your routines.",
"Consider using a VPN on public networks and reviewing app permissions."
]
}
// Educational Article Example
{
"articles": [
{
"id": "art1",
"title": "Understanding Metadata: What It Is and Why It Matters",
"type": "article",
"content": "Metadata is data about data... [Full article content]...",
"category": "Understanding Metadata"
}
]
}
// Help Organization Example
[
{
"id": "org1",
"name": "Canadian Civil Liberties Association",
"description": "Works to protect civil liberties and promote human rights in Canada.",
"contact": "info@ccla.ca",
"website": "https://ccla.org",
"category": "Advocacy & Legal Rights"
}
]
```
**10. DEPLOYMENT NOTES**
* **Build Command:** `npm run build` or `yarn build` (using Vite).
* **Environment Variables:** Use `.env` files for configuration. Key variables might include `VITE_API_URL` (if external APIs are used later), `NODE_ENV`.
* **Hosting:** Deployable on static hosting platforms like Netlify, Vercel, GitHub Pages, or cloud storage buckets (AWS S3, Google Cloud Storage).
* **Performance Optimizations:** Vite provides built-in optimizations (code splitting, minification). Ensure lazy loading for components and routes not immediately needed. Optimize image assets. Use React.memo for component memoization where appropriate.
* **SEO (Basic):** Implement basic SEO tags in `index.html` and potentially use a React Helmet component for dynamic title/meta tag management, especially for shareable resource links.