Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
206 changes: 206 additions & 0 deletions client/src/pages/privacy.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
import { motion } from 'framer-motion';
import { FiShield, FiMail, FiLock, FiDatabase } from 'react-icons/fi';

const PrivacyPolicyPage = () => {
const lastUpdated = 'May 31, 2026';

const sections = [
{ id: 'introduction', title: 'Introduction' },
{ id: 'information-collection', title: 'Information Collection' },
{ id: 'use-of-data', title: 'Use of User Data' },
{ id: 'cookies', title: 'Cookies & Tracking' },
{ id: 'third-party', title: 'Third-Party Services' },
{ id: 'security', title: 'Data Security' },
{ id: 'rights', title: 'User Rights' },
{ id: 'contact', title: 'Contact Information' },
{ id: 'updates', title: 'Policy Updates' },
];

return (
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar */}
<aside className="lg:col-span-1">
<div className="sticky top-24 card p-6">
<h3 className="font-semibold text-navy-900 dark:text-white mb-4">
Privacy Policy
</h3>

<nav className="space-y-3">
{sections.map(section => (
<a
key={section.id}
href={`#${section.id}`}
className="block text-sm text-navy-600 dark:text-navy-400 hover:text-primary-600 transition-colors"
>
{section.title}
</a>
))}
</nav>
</div>
</aside>

{/* Content */}
<div className="lg:col-span-3">
{/* Hero */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="card p-8 mb-8"
>
<div className="flex items-center gap-3 mb-4">
<div className="p-3 bg-primary-100 dark:bg-primary-900 rounded-xl">
<FiShield className="w-7 h-7 text-primary-600" />
</div>

<div>
<h1 className="text-4xl font-bold text-navy-900 dark:text-white">
Privacy Policy
</h1>
<p className="text-sm text-navy-500 dark:text-navy-400 mt-1">
Last Updated: {lastUpdated}
</p>
</div>
</div>

<p className="text-lg text-navy-600 dark:text-navy-400 leading-relaxed">
We value your privacy and are committed to protecting your
personal information. This Privacy Policy explains how we collect,
use, store, and safeguard information when you use our platform.
</p>
</motion.div>

{/* Introduction */}
<section id="introduction" className="card p-8 mb-6 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">Introduction</h2>

<p className="text-navy-600 dark:text-navy-400 leading-relaxed">
This Privacy Policy describes our practices regarding the
collection, use, and disclosure of information through our
website, applications, and related services.
</p>
</section>

{/* Information Collection */}
<section
id="information-collection"
className="card p-8 mb-6 scroll-mt-24"
>
<div className="flex items-center gap-3 mb-4">
<FiDatabase className="w-6 h-6 text-primary-600" />
<h2 className="text-2xl font-bold">Information Collection</h2>
</div>

<p className="mb-4">
We may collect information that you voluntarily provide,
including:
</p>

<ul className="list-disc pl-6 space-y-2 text-navy-600 dark:text-navy-400">
<li>Name and profile details</li>
<li>Email address</li>
<li>Account credentials</li>
<li>User-generated content</li>
<li>Support communications</li>
</ul>
</section>

{/* Use of Data */}
<section id="use-of-data" className="card p-8 mb-6 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">Use of User Data</h2>

<ul className="list-disc pl-6 space-y-2 text-navy-600 dark:text-navy-400">
<li>Provide and maintain services</li>
<li>Improve user experience</li>
<li>Respond to support requests</li>
<li>Ensure platform security</li>
<li>Comply with legal obligations</li>
</ul>
</section>

{/* Cookies */}
<section id="cookies" className="card p-8 mb-6 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">
Cookies & Tracking Technologies
</h2>

<p className="text-navy-600 dark:text-navy-400">
We use cookies and similar technologies to improve functionality,
remember preferences, analyze traffic, and enhance your overall
experience.
</p>
</section>

{/* Third Party */}
<section id="third-party" className="card p-8 mb-6 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">Third-Party Services</h2>

<p className="text-navy-600 dark:text-navy-400">
We may use third-party providers for analytics, authentication,
cloud hosting, payments, and customer support. These providers
process information in accordance with their own privacy policies.
</p>
</section>

{/* Security */}
<section id="security" className="card p-8 mb-6 scroll-mt-24">
<div className="flex items-center gap-3 mb-4">
<FiLock className="w-6 h-6 text-green-600" />
<h2 className="text-2xl font-bold">Data Security</h2>
</div>

<p className="text-navy-600 dark:text-navy-400">
We implement reasonable administrative, technical, and
organizational safeguards designed to protect personal information
against unauthorized access, disclosure, alteration, or
destruction.
</p>
</section>

{/* Rights */}
<section id="rights" className="card p-8 mb-6 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">User Rights</h2>

<ul className="list-disc pl-6 space-y-2 text-navy-600 dark:text-navy-400">
<li>Access your personal data</li>
<li>Request correction of inaccurate data</li>
<li>Request deletion of data</li>
<li>Withdraw consent where applicable</li>
<li>Request data portability</li>
</ul>
</section>

{/* Contact */}
<section id="contact" className="card p-8 mb-6 scroll-mt-24">
<div className="flex items-center gap-3 mb-4">
<FiMail className="w-6 h-6 text-primary-600" />
<h2 className="text-2xl font-bold">Contact Information</h2>
</div>

<p className="text-navy-600 dark:text-navy-400">
If you have questions regarding this Privacy Policy, please
contact us at:
</p>

<div className="mt-4 p-4 rounded-xl bg-navy-50 dark:bg-navy-800">
<p>Email: privacy@yourdomain.com</p>
<p>Website: yourdomain.com</p>
</div>
</section>

{/* Updates */}
<section id="updates" className="card p-8 scroll-mt-24">
<h2 className="text-2xl font-bold mb-4">Policy Updates</h2>

<p className="text-navy-600 dark:text-navy-400">
We may update this Privacy Policy periodically. Changes will be
reflected on this page along with the updated revision date.
</p>
</section>
</div>
</div>
</div>
);
};

export default PrivacyPolicyPage;