439 lines
21 KiB
TypeScript
439 lines
21 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Cookie, Calendar, Settings, Shield, BarChart3, Target } from 'lucide-react';
|
|
import { Card, Button } from '../../components/ui';
|
|
|
|
export const CookiePolicyPage: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
|
|
const lastUpdated = '2025-10-15';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<div className="flex justify-center mb-4">
|
|
<Cookie className="w-16 h-16 text-amber-600" />
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{t('legal:cookie.title', 'Cookie Policy')}
|
|
</h1>
|
|
<div className="flex items-center justify-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>
|
|
{t('legal:cookie.last_updated', 'Last updated')}: {lastUpdated}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<Card className="p-6 bg-primary-50 dark:bg-primary-900/20 border-primary-200 dark:border-primary-800">
|
|
<div className="flex items-start gap-4">
|
|
<Settings className="w-6 h-6 text-primary-600 mt-1 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
Manage Your Cookie Preferences
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
You can control which cookies we use by visiting our Cookie Preferences page. You can
|
|
change your preferences at any time.
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate('/cookie-preferences')}
|
|
variant="primary"
|
|
size="sm"
|
|
>
|
|
<Settings className="w-4 h-4 mr-2" />
|
|
Manage Cookie Preferences
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="p-8 prose prose-gray dark:prose-invert max-w-none">
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
1. {t('legal:cookie.section_1_title', 'What Are Cookies?')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
Cookies are small text files that are stored on your computer or mobile device when you
|
|
visit a website. They are widely used to make websites work more efficiently and provide
|
|
information to website owners.
|
|
</p>
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
Cookies can be "persistent" or "session" cookies. Persistent cookies remain on your
|
|
device after you close your browser, while session cookies are deleted when you close
|
|
your browser.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
2. {t('legal:cookie.section_2_title', 'How We Use Cookies')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
We use cookies for several reasons:
|
|
</p>
|
|
<ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300 space-y-2">
|
|
<li>To enable essential functionality (login, session management)</li>
|
|
<li>To remember your preferences and settings</li>
|
|
<li>To analyze how you use our platform (analytics)</li>
|
|
<li>To provide personalized content and features</li>
|
|
<li>To deliver relevant advertisements (if applicable)</li>
|
|
<li>To improve our services and user experience</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
3. {t('legal:cookie.section_3_title', 'Types of Cookies We Use')}
|
|
</h2>
|
|
|
|
<div className="space-y-6">
|
|
<div className="border-l-4 border-green-500 pl-4 bg-green-50 dark:bg-green-900/20 p-4 rounded-r-lg">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<Shield className="w-6 h-6 text-green-600 flex-shrink-0 mt-1" />
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
3.1 Essential Cookies (Required)
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
These cookies are necessary for the website to function and cannot be switched off.
|
|
They are usually set in response to actions you take such as logging in or filling
|
|
in forms.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-9">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-green-100 dark:bg-green-900/30">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Purpose</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-green-200 dark:divide-green-800">
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">session_token</td>
|
|
<td className="px-3 py-2">Maintains user session</td>
|
|
<td className="px-3 py-2">Session</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">auth_token</td>
|
|
<td className="px-3 py-2">Authentication</td>
|
|
<td className="px-3 py-2">7 days</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">csrf_token</td>
|
|
<td className="px-3 py-2">Security protection</td>
|
|
<td className="px-3 py-2">Session</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">bakery_cookie_consent</td>
|
|
<td className="px-3 py-2">Stores cookie preferences</td>
|
|
<td className="px-3 py-2">1 year</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-l-4 border-blue-500 pl-4 bg-blue-50 dark:bg-blue-900/20 p-4 rounded-r-lg">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<Settings className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
3.2 Preference Cookies (Optional)
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
These cookies allow us to remember your preferences and settings, such as language,
|
|
region, and theme preferences.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-9">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-blue-100 dark:bg-blue-900/30">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Purpose</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-blue-200 dark:divide-blue-800">
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">user_language</td>
|
|
<td className="px-3 py-2">Language preference</td>
|
|
<td className="px-3 py-2">1 year</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">theme_preference</td>
|
|
<td className="px-3 py-2">Dark/Light mode</td>
|
|
<td className="px-3 py-2">1 year</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">timezone</td>
|
|
<td className="px-3 py-2">Timezone setting</td>
|
|
<td className="px-3 py-2">1 year</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 p-4 rounded-r-lg">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<BarChart3 className="w-6 h-6 text-purple-600 flex-shrink-0 mt-1" />
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
3.3 Analytics Cookies (Optional)
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
These cookies help us understand how visitors interact with our website by
|
|
collecting and reporting information anonymously. We use this data to improve our
|
|
services.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-9">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-purple-100 dark:bg-purple-900/30">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Purpose</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-purple-200 dark:divide-purple-800">
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">_ga</td>
|
|
<td className="px-3 py-2">Google Analytics - User ID</td>
|
|
<td className="px-3 py-2">2 years</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">_gid</td>
|
|
<td className="px-3 py-2">Google Analytics - Session</td>
|
|
<td className="px-3 py-2">24 hours</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">_gat</td>
|
|
<td className="px-3 py-2">Google Analytics - Throttling</td>
|
|
<td className="px-3 py-2">1 minute</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">analytics_session</td>
|
|
<td className="px-3 py-2">Internal analytics session</td>
|
|
<td className="px-3 py-2">30 minutes</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-l-4 border-orange-500 pl-4 bg-orange-50 dark:bg-orange-900/20 p-4 rounded-r-lg">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<Target className="w-6 h-6 text-orange-600 flex-shrink-0 mt-1" />
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
|
|
3.4 Marketing Cookies (Optional)
|
|
</h3>
|
|
<p className="text-sm text-gray-700 dark:text-gray-300 mb-3">
|
|
These cookies track your visits to our website and other websites to show you
|
|
personalized advertisements. They may be set by us or by third-party advertising
|
|
partners.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="ml-9">
|
|
<table className="min-w-full text-sm">
|
|
<thead className="bg-orange-100 dark:bg-orange-900/30">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left font-semibold">Cookie Name</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Purpose</th>
|
|
<th className="px-3 py-2 text-left font-semibold">Duration</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-orange-200 dark:divide-orange-800">
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">marketing_id</td>
|
|
<td className="px-3 py-2">Marketing campaign tracking</td>
|
|
<td className="px-3 py-2">90 days</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">ad_preferences</td>
|
|
<td className="px-3 py-2">Ad personalization</td>
|
|
<td className="px-3 py-2">1 year</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-3 py-2 font-mono text-xs">conversion_track</td>
|
|
<td className="px-3 py-2">Conversion tracking</td>
|
|
<td className="px-3 py-2">30 days</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
4. {t('legal:cookie.section_4_title', 'Third-Party Cookies')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
Some cookies are set by third-party services that appear on our pages:
|
|
</p>
|
|
|
|
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-4">
|
|
<h4 className="font-semibold text-gray-900 dark:text-white mb-3">
|
|
Third-Party Services:
|
|
</h4>
|
|
<ul className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
|
|
<li className="flex items-start gap-2">
|
|
<span className="font-semibold min-w-[120px]">Google Analytics:</span>
|
|
<span>Analytics and performance monitoring</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="font-semibold min-w-[120px]">Stripe:</span>
|
|
<span>Payment processing (sets cookies on their domain)</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<span className="font-semibold min-w-[120px]">CDN Services:</span>
|
|
<span>Content delivery and performance optimization</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
These third parties have their own privacy policies and cookie policies. We recommend
|
|
reviewing them:
|
|
</p>
|
|
<ul className="list-disc pl-6 mt-2 text-sm text-gray-700 dark:text-gray-300">
|
|
<li>
|
|
<a
|
|
href="https://policies.google.com/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Google Privacy Policy
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://stripe.com/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-primary-600 hover:text-primary-700 underline"
|
|
>
|
|
Stripe Privacy Policy
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
5. {t('legal:cookie.section_5_title', 'How to Control Cookies')}
|
|
</h2>
|
|
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
|
|
5.1 Our Cookie Preference Tool
|
|
</h3>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
The easiest way to manage cookies on our website is through our Cookie Preferences page.
|
|
You can:
|
|
</p>
|
|
<ul className="list-disc pl-6 mb-4 text-gray-700 dark:text-gray-300">
|
|
<li>Accept all cookies</li>
|
|
<li>Accept only essential cookies</li>
|
|
<li>Customize your preferences by category</li>
|
|
<li>Change your preferences at any time</li>
|
|
</ul>
|
|
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
|
|
5.2 Browser Settings
|
|
</h3>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
Most browsers allow you to control cookies through their settings:
|
|
</p>
|
|
<ul className="list-disc pl-6 mb-4 text-sm text-gray-700 dark:text-gray-300">
|
|
<li>
|
|
<strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data
|
|
</li>
|
|
<li>
|
|
<strong>Firefox:</strong> Settings → Privacy & Security → Cookies and Site Data
|
|
</li>
|
|
<li>
|
|
<strong>Safari:</strong> Preferences → Privacy → Cookies and website data
|
|
</li>
|
|
<li>
|
|
<strong>Edge:</strong> Settings → Cookies and site permissions → Cookies and site data
|
|
</li>
|
|
</ul>
|
|
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
|
|
<p className="text-sm text-amber-900 dark:text-amber-100">
|
|
<strong>Note:</strong> Blocking all cookies may prevent you from using certain features
|
|
of our website, such as staying logged in or saving your preferences.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
6. {t('legal:cookie.section_6_title', 'Do Not Track Signals')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
Some browsers include a "Do Not Track" (DNT) feature. Currently, there is no industry
|
|
standard for how websites should respond to DNT signals. We respect your cookie preferences
|
|
set through our Cookie Preference tool and browser settings.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
7. {t('legal:cookie.section_7_title', 'Updates to This Policy')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300">
|
|
We may update this Cookie Policy from time to time to reflect changes in our practices or
|
|
for legal, operational, or regulatory reasons. The "Last Updated" date at the top of this
|
|
page indicates when this policy was last revised.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
8. {t('legal:cookie.section_8_title', 'Contact Us')}
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300 mb-4">
|
|
If you have questions about our use of cookies, please contact us:
|
|
</p>
|
|
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
|
|
<p className="font-semibold">{t('common:app.name', 'BakeWise')}</p>
|
|
<p>Email: contact@bakewise.ai</p>
|
|
<p>Website: https://bakewise.ai</p>
|
|
</div>
|
|
</section>
|
|
</Card>
|
|
|
|
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button onClick={() => navigate('/cookie-preferences')} variant="primary">
|
|
<Settings className="w-4 h-4 mr-2" />
|
|
Manage Cookie Preferences
|
|
</Button>
|
|
<Button onClick={() => navigate('/')} variant="outline">
|
|
Back to Home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CookiePolicyPage;
|