Loading...
;
if (error) return
{policy.title}
{policy.sections.map(section => (
{section.heading}
{section.content}
))}
);
}
```
### 3. **Support Center Cards**
The support center hero now has 6 cards:
- **Top Row** (Opens Modals):
- Submit Tickets
- Knowledge Base
- Track Status
- **Bottom Row** (Navigates to Policy Page):
- Privacy Policy
- Terms of Use
- Support Policy
---
## 📝 Policy Content Overview
### Privacy Policy (13 Sections)
1. Introduction and Scope
2. Information We Collect
3. How We Collect Information
4. Use of Information
5. Information Sharing and Disclosure
6. Data Security
7. Data Retention
8. Your Rights and Choices
9. International Data Transfers
10. Cookies and Tracking Technologies
11. Children's Privacy
12. Changes to This Privacy Policy
13. Contact Information
### Terms of Use (14 Sections)
1. Acceptance of Terms
2. Service Description and Scope
3. User Accounts and Registration
4. Acceptable Use Policy
5. Intellectual Property Rights
6. Service Level Agreements
7. Payment Terms and Billing
8. Term and Termination
9. Disclaimer of Warranties
10. Limitation of Liability
11. Dispute Resolution and Governing Law
12. Modifications to Terms
13. General Provisions
14. Contact Information
### Support Policy (15 Sections)
1. Support Overview and Commitment
2. Support Coverage and Eligibility
3. Support Channels and Access Methods
4. Business Hours and Availability
5. Priority Levels and Response Times
6. Support Request Submission Requirements
7. Support Scope and Covered Activities
8. Exclusions and Limitations
9. Escalation Procedures
10. Knowledge Base and Self-Service Resources
11. Customer Responsibilities
12. Scheduled Maintenance and Updates
13. Service Level Credits and Remedies
14. Feedback and Continuous Improvement
15. Contact Information and Resources
---
## 🔧 Admin Panel
Access the admin panel to manage policies:
```
http://localhost:8000/admin/policies/
```
**Features:**
- ✅ Create/Edit/Delete policies
- ✅ Inline section editing
- ✅ Version management
- ✅ Effective date tracking
- ✅ Active/Inactive toggle
- ✅ Search and filtering
---
## 🎯 Features
### Backend
- ✅ RESTful API with Django REST Framework
- ✅ Versioned policies
- ✅ Effective date tracking
- ✅ Ordered sections
- ✅ Active/Inactive status
- ✅ Full admin interface
- ✅ Management command for easy population
### Frontend
- ✅ Dynamic policy loading from API
- ✅ Loading states with spinner
- ✅ Error handling with user-friendly messages
- ✅ Responsive design (mobile-friendly)
- ✅ Version and date display
- ✅ Smooth animations
- ✅ SEO-friendly structure
- ✅ Integration with support center
---
## 🚦 Testing
### Test the API
```bash
# List all policies
curl http://localhost:8000/api/policies/
# Get privacy policy
curl http://localhost:8000/api/policies/privacy/
# Get terms of use
curl http://localhost:8000/api/policies/terms/
# Get support policy
curl http://localhost:8000/api/policies/support/
```
### Test the Frontend
1. Navigate to: `http://localhost:3000/policy?type=privacy`
2. Navigate to: `http://localhost:3000/policy?type=terms`
3. Navigate to: `http://localhost:3000/policy?type=support`
4. Navigate to: `http://localhost:3000/support-center`
5. Click on any of the 6 feature cards
---
## 📊 Database Schema
```sql
-- Policy Table
CREATE TABLE policies_policy (
id INTEGER PRIMARY KEY,
type VARCHAR(50) UNIQUE,
title VARCHAR(200),
slug VARCHAR(100) UNIQUE,
description TEXT,
last_updated DATE,
version VARCHAR(20),
is_active BOOLEAN,
effective_date DATE,
created_at TIMESTAMP,
updated_at TIMESTAMP
);
-- PolicySection Table
CREATE TABLE policies_policysection (
id INTEGER PRIMARY KEY,
policy_id INTEGER REFERENCES policies_policy(id),
heading VARCHAR(300),
content TEXT,
order INTEGER,
is_active BOOLEAN,
created_at TIMESTAMP,
updated_at TIMESTAMP
);
```
---
## 🔄 Updating Policies
### Via Management Command
```bash
# Re-run to update all policies
cd backend
../venv/bin/python manage.py populate_policies
```
### Via Admin Panel
1. Go to `http://localhost:8000/admin/policies/policy/`
2. Click on the policy to edit
3. Modify sections inline
4. Save changes
### Via API (Programmatic)
```python
from policies.models import Policy, PolicySection
# Get policy
policy = Policy.objects.get(type='privacy')
# Add new section
PolicySection.objects.create(
policy=policy,
heading="New Section",
content="Section content...",
order=14
)
```
---
## 🎨 Customization
### Styling
The policy page uses inline styles. To customize:
- Edit `/app/policy/page.tsx`
- Modify the `