dwindown/dewedev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: comprehensive SEO optimization and GDPR compliance

Browse Source 
- Added Terms of Service and Privacy Policy pages with contact info
- Implemented Google Analytics with Consent Mode v2 for GDPR compliance
- Created sitemap.xml and robots.txt for search engine optimization
- Added dynamic meta tags, Open Graph, and structured data (JSON-LD)
- Implemented GDPR consent banner with TCF 2.2 compatibility
- Enhanced sidebar with category-colored hover states and proper active/inactive styling
- Fixed all ESLint warnings for clean deployment
- Added comprehensive SEO utilities and privacy-first analytics tracking

Ready for production deployment with full legal compliance and SEO optimization.
This commit is contained in:
dwindown
2025-09-24 00:12:28 +07:00
parent dd03a7213f
commit 2e67a2bca2
19 changed files with 2327 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
src/pages/PrivacyPolicy.js Normal file
View File

@@ -0,0 +1,265 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeft, Shield, Lock, Eye, Server, Cookie, BarChart3, Globe } from 'lucide-react';
import { SITE_CONFIG } from '../config/tools';
const PrivacyPolicy = () => {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-indigo-900">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
{/* Header */}
<div className="mb-8">
<Link
to="/"
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors mb-6"
>
<ArrowLeft className="h-4 w-4" />
Back to Home
</Link>
<div className="flex items-center gap-3 mb-4">
<div className="p-3 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl shadow-lg">
<Lock className="h-6 w-6 text-white" />
</div>
<div>
<h1 className="text-3xl font-bold text-slate-800 dark:text-white">
Privacy Policy
</h1>
<p className="text-slate-600 dark:text-slate-300">
Last updated: {new Date().toLocaleDateString()}
</p>
</div>
</div>
</div>
{/* Content */}
<div className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700 p-8 shadow-xl">
<div className="prose prose-slate dark:prose-invert max-w-none">
{/* Privacy-First Commitment */}
<section className="mb-8">
<div className="bg-gradient-to-r from-green-50 to-blue-50 dark:from-green-900/20 dark:to-blue-900/20 rounded-xl p-6 mb-6">
<h2 className="text-2xl font-bold text-slate-800 dark:text-white mb-4 flex items-center gap-3">
<Shield className="h-6 w-6 text-green-600" />
Our Privacy-First Commitment
</h2>
<p className="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
At {SITE_CONFIG.title}, "Privacy-First" isn't just a marketing term—it's our core architectural principle. Your data privacy is protected by design, not by policy alone.
</p>
<div className="grid md:grid-cols-2 gap-4">
<div className="flex items-start gap-3">
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
<Server className="h-5 w-5 text-green-600" />
</div>
<div>
<h3 className="font-semibold text-slate-800 dark:text-white">100% Client-Side</h3>
<p className="text-sm text-slate-600 dark:text-slate-300">All processing happens in your browser</p>
</div>
</div>
<div className="flex items-start gap-3">
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
<Lock className="h-5 w-5 text-blue-600" />
</div>
<div>
<h3 className="font-semibold text-slate-800 dark:text-white">Zero Data Upload</h3>
<p className="text-sm text-slate-600 dark:text-slate-300">Your sensitive data never leaves your device</p>
</div>
</div>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
<Eye className="h-5 w-5 text-blue-600" />
1. Information We Collect
</h2>
<div className="space-y-6">
<div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
<h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">
❌ What We DON'T Collect:
</h3>
<ul className="list-disc list-inside text-red-700 dark:text-red-300 space-y-1 text-sm">
<li>Your input data (JSON, CSV, URLs, text, etc.)</li>
<li>Files you upload or paste into our tools</li>
<li>Personal information (name, email, address)</li>
<li>Login credentials or user accounts</li>
<li>IP addresses or device fingerprints</li>
<li>Browsing history or cross-site tracking</li>
</ul>
</div>
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">
✅ What We DO Collect (via Google Analytics):
</h3>
<ul className="list-disc list-inside text-green-700 dark:text-green-300 space-y-1 text-sm">
<li>Anonymous page views and session duration</li>
<li>Which tools are most popular (aggregated data only)</li>
<li>General geographic region (country/state level)</li>
<li>Browser type and device type (for compatibility)</li>
<li>Referral sources (how you found our site)</li>
</ul>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
<BarChart3 className="h-5 w-5 text-purple-600" />
2. Google Analytics Usage
</h2>
<p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
We use Google Analytics to understand how our tools are used and to improve the service. This helps us answer questions like:
</p>
<ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4 mb-4">
<li>Which tools are most helpful to developers?</li>
<li>Are there performance issues on certain devices?</li>
<li>How can we improve the user experience?</li>
</ul>
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
<p className="text-blue-800 dark:text-blue-200 text-sm">
<strong>Important:</strong> Google Analytics only sees that someone visited "dewe.dev/beautifier" - it never sees the actual JSON code you're beautifying or any data you process with our tools.
</p>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
<Server className="h-5 w-5 text-indigo-600" />
3. How Our Tools Work
</h2>
<div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-6">
<h3 className="font-semibold text-slate-800 dark:text-white mb-3">Technical Architecture:</h3>
<div className="space-y-3 text-sm">
<div className="flex items-start gap-3">
<span className="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-2 py-1 rounded text-xs font-medium">CLIENT</span>
<p className="text-slate-600 dark:text-slate-300">Your browser downloads our JavaScript code</p>
</div>
<div className="flex items-start gap-3">
<span className="bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-2 py-1 rounded text-xs font-medium">LOCAL</span>
<p className="text-slate-600 dark:text-slate-300">All processing happens locally in your browser's memory</p>
</div>
<div className="flex items-start gap-3">
<span className="bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-2 py-1 rounded text-xs font-medium">SECURE</span>
<p className="text-slate-600 dark:text-slate-300">No data transmission to our servers for processing</p>
</div>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
<Cookie className="h-5 w-5 text-orange-600" />
4. Cookies and Local Storage
</h2>
<p className="text-slate-600 dark:text-slate-300 leading-relaxed mb-4">
We use minimal cookies and local storage for:
</p>
<ul className="list-disc list-inside text-slate-600 dark:text-slate-300 space-y-2 ml-4">
<li><strong>Google Analytics:</strong> Anonymous tracking cookies (you can opt-out)</li>
<li><strong>Theme Preference:</strong> Remembering if you prefer dark/light mode</li>
<li><strong>No Personal Data:</strong> We never store your processed data locally</li>
</ul>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4 flex items-center gap-2">
<Globe className="h-5 w-5 text-teal-600" />
5. Future Advertising (Google AdSense)
</h2>
<div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-4 mb-4">
<h3 className="font-semibold text-amber-800 dark:text-amber-200 mb-2">
🔮 Planned Implementation:
</h3>
<p className="text-amber-700 dark:text-amber-300 text-sm leading-relaxed mb-3">
To keep our tools free, we plan to display Google AdSense advertisements. When implemented:
</p>
<ul className="list-disc list-inside text-amber-700 dark:text-amber-300 space-y-1 text-sm">
<li>Ads will be clearly marked and non-intrusive</li>
<li>No impact on tool functionality or performance</li>
<li>Google may use cookies for ad personalization</li>
<li>You can opt-out of personalized ads via Google settings</li>
<li><strong>We will NEVER share your tool usage data with advertisers</strong></li>
</ul>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
6. Your Rights and Controls
</h2>
<div className="grid md:grid-cols-2 gap-4">
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
<h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">Analytics Opt-Out:</h3>
<p className="text-blue-700 dark:text-blue-300 text-sm">
Install browser extensions like uBlock Origin or use Google's opt-out tools to disable analytics tracking.
</p>
</div>
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">Data Control:</h3>
<p className="text-green-700 dark:text-green-300 text-sm">
Since we don't collect your data, there's nothing to delete or export. Your data stays with you.
</p>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
7. Third-Party Services
</h2>
<div className="space-y-4">
<div className="border-l-4 border-blue-500 pl-4">
<h3 className="font-semibold text-slate-800 dark:text-white">Google Analytics</h3>
<p className="text-slate-600 dark:text-slate-300 text-sm">
Privacy Policy: <a href="https://policies.google.com/privacy" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">https://policies.google.com/privacy</a>
</p>
</div>
<div className="border-l-4 border-green-500 pl-4">
<h3 className="font-semibold text-slate-800 dark:text-white">Google AdSense (Future)</h3>
<p className="text-slate-600 dark:text-slate-300 text-sm">
Privacy Policy: <a href="https://policies.google.com/privacy" className="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">https://policies.google.com/privacy</a>
</p>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
8. Changes to This Policy
</h2>
<p className="text-slate-600 dark:text-slate-300 leading-relaxed">
We may update this privacy policy from time to time. We will notify users of any material changes by updating the "Last updated" date at the top of this policy. Your continued use of the service after any changes constitutes acceptance of the new policy.
</p>
</section>
<section>
<h2 className="text-xl font-semibold text-slate-800 dark:text-white mb-4">
9. Contact Us
</h2>
<p className="text-slate-600 dark:text-slate-300 leading-relaxed">
If you have any questions about this Privacy Policy or our privacy practices, please contact us at{' '}
<a href="mailto:dewe.developer@gmail.com" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">
dewe.developer@gmail.com
</a>
{' '}or visit {SITE_CONFIG.domain}.
</p>
</section>
</div>
</div>
{/* Footer */}
<div className="mt-8 text-center">
<p className="text-sm text-slate-500 dark:text-slate-400">
© {SITE_CONFIG.year} {SITE_CONFIG.title} • Your privacy is our priority
</p>
</div>
</div>
</div>
);
};
export default PrivacyPolicy;