Skip to content

Commit 6b28130

Browse files
OkenHahaOkenHaha
authored
Merge pull request #380 from ARYPROGRAMMER/privacy-policy
Feat: improved and add privacy policy and navigation
2 parents 28b32ac + 8e2aa2d commit 6b28130

File tree

2 files changed

+149
-67
lines changed

2 files changed

+149
-67
lines changed

‎front-end/src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function App() {
6767
<Route path="/" element={<Home />} />
6868
<Route path="/about" element={<About />} />
6969
<Route path="/faq" element={<FAQ />} />
70-
<Route path="/PrivacyPolicy" element={<PrivacyPolicy />} />
70+
<Route path="/privacy-policy" element={<PrivacyPolicy />} />
7171
<Route path="/article-list" element={<ArticleList />} />
7272
<Route path="/contributors" element={<Contributors />} />
7373
<Route

‎front-end/src/pages/PrivacyPolicy.jsx‎

Lines changed: 148 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,167 @@
11
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import { Shield, Mail, BookOpen, Lock, UserCheck, Bell, RefreshCw } from "lucide-react";
24

35
export default function PrivacyPolicy() {
6+
const sections = [
7+
{
8+
icon: <Shield className="w-6 h-6" />,
9+
title: "Welcome to React Blog's Privacy Policy",
10+
content:
11+
"At React Blog, we take your privacy seriously. This Privacy Policy explains how we collect, use, and protect your personal information when you use our blogging platform. By using React Blog, you agree to the practices described in this policy.",
12+
},
13+
{
14+
icon: <BookOpen className="w-6 h-6" />,
15+
title: "Information We Collect",
16+
content: `We collect various types of information to provide and improve our services:
17+
18+
• Personal Information: Name, email address, profile picture, and optional biographical information
19+
• Account Information: Username, password (encrypted), and account preferences
20+
• Content Data: Articles, comments, likes, and other content you create
21+
• Usage Data: Reading history, interaction patterns, and feature usage
22+
• Technical Data: IP address, browser type, device information, and cookies
23+
• Analytics: Time spent on platform, articles read, and engagement metrics`,
24+
},
25+
{
26+
icon: <Lock className="w-6 h-6" />,
27+
title: "How We Use Your Information",
28+
content: `We use your information for the following purposes:
29+
30+
• Providing our core blogging services
31+
• Personalizing your content experience
32+
• Improving our platform features
33+
• Sending important notifications
34+
• Processing article submissions
35+
• Analyzing platform usage patterns
36+
• Protecting against unauthorized access
37+
• Communicating platform updates`,
38+
},
39+
{
40+
icon: <UserCheck className="w-6 h-6" />,
41+
title: "Information Sharing",
42+
content: `We are committed to protecting your privacy and will never sell your personal data. We may share information in these limited circumstances:
43+
44+
• With your explicit consent
45+
• To comply with legal obligations
46+
• To protect our rights and safety
47+
• With service providers who assist our operations
48+
• In anonymized, aggregated form for analytics`,
49+
},
50+
{
51+
icon: <Bell className="w-6 h-6" />,
52+
title: "Your Privacy Rights",
53+
content: `You have several rights regarding your personal data:
54+
55+
• Access your personal information
56+
• Correct inaccurate data
57+
• Request deletion of your data
58+
• Export your data
59+
• Opt-out of marketing communications
60+
• Control cookie preferences
61+
• Manage notification settings`,
62+
},
63+
{
64+
icon: <Lock className="w-6 h-6" />,
65+
title: "Data Security",
66+
content: `We implement robust security measures to protect your data:
67+
68+
• End-to-end encryption for sensitive data
69+
• Regular security audits and updates
70+
• Secure data storage and transmission
71+
• Access controls and authentication
72+
• Regular backup procedures
73+
• Incident response protocols
74+
• Employee security training`,
75+
},
76+
{
77+
icon: <RefreshCw className="w-6 h-6" />,
78+
title: "Updates to This Policy",
79+
content: "We may update this Privacy Policy periodically to reflect changes in our practices or legal requirements. We will notify you of any significant changes through the platform or via email.",
80+
},
81+
];
82+
483
return (
584
<div className="bg-gray-50 dark:bg-[#141b28] min-h-screen flex justify-center items-center px-5 py-10 pt-24">
6-
<div className="max-w-6xl w-full bg-white dark:bg-[#00001c] shadow-lg rounded-xl flex flex-col md:flex-row overflow-hidden p-6">
7-
{/* Left Section for Image (Hidden on Mobile) */}
8-
<div className="w-full md:w-2/5 bg-gray-100 dark:bg-[#1a2332] p-6 hidden md:flex flex-col items-center">
85+
<div className="max-w-6xl w-full bg-white dark:bg-[#00001c] shadow-lg rounded-xl flex flex-col md:flex-row overflow-hidden">
86+
{/* Left Section for Image */}
87+
<div className="w-full md:w-2/5 bg-gray-100 dark:bg-[#1a2332] p-6 hidden md:flex flex-col items-center justify-between">
988
<img
1089
src="https://img.freepik.com/free-vector/privacy-policy-concept-illustration_114360-7478.jpg"
11-
alt="Privacy Illustration"
90+
alt="Privacy Policy"
1291
className="w-full rounded-lg mb-4"
1392
/>
14-
<img
15-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRau28_GXYA1DEeVWt14zMA4ztRzKvdUXcpCf15AjTFCdyArIopLUos_Bk9MF1WYA8vwU4&usqp=CAU"
16-
alt="Privacy Illustration"
17-
className="w-full rounded-lg"
18-
/>
93+
<div className="space-y-4 w-full">
94+
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
95+
<h3 className="text-lg font-semibold text-blue-600 dark:text-yellow-400 mb-2">
96+
Need Help?
97+
</h3>
98+
<p className="text-gray-600 dark:text-gray-300 text-sm">
99+
If you have questions about our privacy practices, please contact us:
100+
</p>
101+
<div className="flex items-center mt-2 text-blue-600 dark:text-yellow-400">
102+
<Mail className="w-4 h-4 mr-2" />
103+
<a href="mailto:support@reactblog.com">support@reactblog.com</a>
104+
</div>
105+
</div>
106+
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
107+
<h3 className="text-lg font-semibold text-blue-600 dark:text-yellow-400 mb-2">
108+
Quick Links
109+
</h3>
110+
<ul className="space-y-2 text-sm">
111+
<li>
112+
<Link to="/about" className="text-blue-600 dark:text-yellow-400 hover:underline">
113+
About Us
114+
</Link>
115+
</li>
116+
<li>
117+
<Link to="/faq" className="text-blue-600 dark:text-yellow-400 hover:underline">
118+
FAQ
119+
</Link>
120+
</li>
121+
<li>
122+
<Link to="/terms-of-service" className="text-blue-600 dark:text-yellow-400 hover:underline">
123+
Terms of Service
124+
</Link>
125+
</li>
126+
</ul>
127+
</div>
128+
</div>
19129
</div>
20130

21131
{/* Right Section - Privacy Policy Content */}
22-
<div className="w-full md:w-3/5 p-6 md:p-10">
23-
<h1 className="text-3xl md:text-4xl font-bold text-blue-600 dark:text-yellow-400 mb-4">
132+
<div className="w-full md:w-3/5 p-6 md:p-10 overflow-y-auto max-h-[800px]">
133+
<h1 className="text-3xl md:text-4xl font-bold text-blue-600 dark:text-yellow-400 mb-8">
24134
Privacy Policy
25135
</h1>
26136

27-
{/* Sections */}
28-
{[
29-
{
30-
title: "Welcome to React Blog",
31-
content:
32-
"Your privacy is important to us. This Privacy Policy explains how we collect, use, and protect your information when you use our platform. By accessing or using React Blog, you agree to the terms outlined in this policy.",
33-
},
34-
{
35-
title: "Information We Collect",
36-
content:
37-
"We collect different types of information, including personal details (name, email), user-generated content (blog posts, comments, likes), technical data (IP, browser type), and usage analytics.",
38-
},
39-
{
40-
title: "How We Use Your Information",
41-
content:
42-
"We use your data to provide and improve our services, personalize content, enhance security, respond to inquiries, and comply with legal requirements.",
43-
},
44-
{
45-
title: "Sharing Your Information",
46-
content:
47-
"We do not sell or share your personal data. However, we may share anonymized, aggregated data with partners for platform improvements.",
48-
},
49-
{
50-
title: "Security",
51-
content:
52-
"We implement strong security measures including encryption, access controls, and periodic security audits to protect user data.",
53-
},
54-
{
55-
title: "Your Rights",
56-
content:
57-
"You have the right to access, update, or delete your personal information. Contact us for any privacy-related requests.",
58-
},
59-
{
60-
title: "Changes to This Policy",
61-
content:
62-
"We may update this Privacy Policy from time to time. Any changes will be posted here, and we encourage users to review it periodically.",
63-
},
64-
].map((section, index) => (
65-
<div
66-
key={index}
67-
className=" dark:bg-[#1a2332] p-4 mt-7 rounded-lg"
68-
>
69-
<h2 className="text-2xl font-semibold text-blue-600 dark:text-yellow-400">
70-
{index + 1}. {section.title}
71-
</h2>
72-
<p className="text-gray-700 dark:text-gray-300 pt-4">{section.content}</p>
73-
</div>
74-
))}
137+
<div className="space-y-8">
138+
{sections.map((section, index) => (
139+
<div
140+
key={index}
141+
className="bg-gray-50 dark:bg-[#1a2332] p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
142+
>
143+
<div className="flex items-center gap-3 mb-4">
144+
<div className="text-blue-600 dark:text-yellow-400">
145+
{section.icon}
146+
</div>
147+
<h2 className="text-xl font-semibold text-blue-600 dark:text-yellow-400">
148+
{section.title}
149+
</h2>
150+
</div>
151+
<div className="prose dark:prose-invert max-w-none">
152+
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-line">
153+
{section.content}
154+
</p>
155+
</div>
156+
</div>
157+
))}
158+
</div>
75159

76-
{/* Contact Section */}
77-
<section className="text-center mt-7">
78-
<h2 className="text-2xl font-semibold text-blue-600 dark:text-yellow-400">
79-
Contact Us
80-
</h2>
81-
<p className="text-gray-700 dark:text-gray-300">📧 support@reactblog.com</p>
82-
</section>
160+
<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
161+
<p className="text-sm text-gray-500 dark:text-gray-400">
162+
Last updated: {new Date().toLocaleDateString()}
163+
</p>
164+
</div>
83165
</div>
84166
</div>
85167
</div>

0 commit comments

Comments
 (0)