Skip to content

Commit e7bd280

Browse files
GizmotronnGizmotronn
committed
🫛🔫 ↝ [SSG-267]: Add privacy policy page
1 parent 252e8ba commit e7bd280

File tree

1 file changed

+322
-0
lines changed

1 file changed

+322
-0
lines changed

‎app/privacy/page.tsx‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import { Shield, Mail, Eye, Lock, Users, Globe } from "lucide-react";
5+
import Link from "next/link";
6+
7+
export default function PrivacyPolicyPage() {
8+
const [isDark, setIsDark] = useState(false);
9+
10+
useEffect(() => {
11+
// Check if dark mode is enabled
12+
setIsDark(document.documentElement.classList.contains("dark"));
13+
}, []);
14+
15+
return (
16+
<div className="min-h-screen w-full relative flex justify-center pb-20">
17+
{/* Background gradient similar to main page */}
18+
<div className="fixed inset-0 -z-10 bg-gradient-to-br from-background via-background/95 to-background/90">
19+
<div className="absolute inset-0 bg-grid-white/[0.02] bg-grid-16" />
20+
</div>
21+
22+
{/* Header */}
23+
<div className="fixed top-0 left-0 right-0 z-50 bg-card/90 backdrop-blur-sm border-b border-border">
24+
<div className="flex items-center justify-between px-4 lg:px-6 py-3">
25+
<Link href="/" className="flex items-center gap-2">
26+
<h1 className="text-xl font-bold text-primary">Star Sailors</h1>
27+
</Link>
28+
<Link
29+
href="/"
30+
className="text-sm font-medium px-4 py-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 transition"
31+
>
32+
Back to Mission Control
33+
</Link>
34+
</div>
35+
</div>
36+
37+
<div className="w-full max-w-4xl px-4 py-6 space-y-8 pt-24 relative z-10">
38+
{/* Hero Section */}
39+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-8 text-center">
40+
<div className="flex items-center justify-center gap-2 mb-4">
41+
<Shield className="w-8 h-8 text-primary" />
42+
<h1 className="text-3xl font-bold text-primary">Privacy & Data Protection</h1>
43+
</div>
44+
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
45+
Your privacy is as important to us as protecting the cosmos. Here's exactly what we collect,
46+
why we need it, and how we keep your data safe while you explore the universe.
47+
</p>
48+
<div className="flex items-center justify-center gap-4 mt-6 text-sm text-muted-foreground">
49+
<span className="flex items-center gap-1">
50+
<Eye className="w-4 h-4" />
51+
Last updated: July 27, 2025
52+
</span>
53+
<span className="flex items-center gap-1">
54+
<Users className="w-4 h-4" />
55+
Effective for all Star Sailors
56+
</span>
57+
</div>
58+
</div>
59+
60+
{/* Quick Summary */}
61+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
62+
<div className="flex items-center gap-2 mb-4">
63+
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
64+
<h2 className="text-xl font-semibold text-primary">The Short Version</h2>
65+
</div>
66+
<div className="grid md:grid-cols-3 gap-4">
67+
<div className="text-center p-4 bg-card/50 rounded-lg border border-green-200/30">
68+
<Mail className="w-8 h-8 text-green-500 mx-auto mb-2" />
69+
<h3 className="font-semibold text-sm mb-1">Email Address</h3>
70+
<p className="text-xs text-muted-foreground">
71+
To create your account and send mission updates
72+
</p>
73+
</div>
74+
<div className="text-center p-4 bg-card/50 rounded-lg border border-blue-200/30">
75+
<Globe className="w-8 h-8 text-blue-500 mx-auto mb-2" />
76+
<h3 className="font-semibold text-sm mb-1">Google Profile</h3>
77+
<p className="text-xs text-muted-foreground">
78+
Name and profile picture if you sign in with Google
79+
</p>
80+
</div>
81+
<div className="text-center p-4 bg-card/50 rounded-lg border border-purple-200/30">
82+
<Lock className="w-8 h-8 text-purple-500 mx-auto mb-2" />
83+
<h3 className="font-semibold text-sm mb-1">Research Data</h3>
84+
<p className="text-xs text-muted-foreground">
85+
Your discoveries and classifications to track progress
86+
</p>
87+
</div>
88+
</div>
89+
</div>
90+
91+
{/* Main Content */}
92+
<div className="space-y-6">
93+
{/* What We Collect */}
94+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
95+
<h2 className="text-2xl font-semibold text-primary mb-4">🔍 What Information We Collect</h2>
96+
97+
<div className="space-y-4">
98+
<div className="border-l-4 border-blue-500 pl-4">
99+
<h3 className="font-semibold text-foreground mb-2">Account Information</h3>
100+
<ul className="space-y-1 text-sm text-muted-foreground">
101+
<li>• Your email address (required for account creation)</li>
102+
<li>• Username and display name (chosen by you)</li>
103+
<li>• Profile picture (if you upload one or sign in with Google)</li>
104+
</ul>
105+
</div>
106+
107+
<div className="border-l-4 border-green-500 pl-4">
108+
<h3 className="font-semibold text-foreground mb-2">Google Sign-In Data</h3>
109+
<p className="text-sm text-muted-foreground mb-2">
110+
If you choose to sign in with Google, we receive:
111+
</p>
112+
<ul className="space-y-1 text-sm text-muted-foreground">
113+
<li>• Your Google account email address</li>
114+
<li>• Your public profile name</li>
115+
<li>• Your profile picture (if publicly available)</li>
116+
<li>• A unique Google account identifier</li>
117+
</ul>
118+
<p className="text-xs text-muted-foreground mt-2 italic">
119+
We don't access your Google Drive, Gmail, or any other Google services.
120+
</p>
121+
</div>
122+
123+
<div className="border-l-4 border-purple-500 pl-4">
124+
<h3 className="font-semibold text-foreground mb-2">Research & Discovery Data</h3>
125+
<ul className="space-y-1 text-sm text-muted-foreground">
126+
<li>• Your planet and asteroid classifications</li>
127+
<li>• Comments and measurements you add to discoveries</li>
128+
<li>• Progress through research milestones</li>
129+
<li>• Structures and equipment you deploy</li>
130+
</ul>
131+
</div>
132+
</div>
133+
</div>
134+
135+
{/* Why We Need It */}
136+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
137+
<h2 className="text-2xl font-semibold text-primary mb-4">🎯 Why We Need This Information</h2>
138+
139+
<div className="grid md:grid-cols-2 gap-6">
140+
<div className="space-y-4">
141+
<div className="p-4 bg-card/50 rounded-lg">
142+
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
143+
<span className="text-lg">🚀</span>
144+
Core Mission Functions
145+
</h3>
146+
<ul className="space-y-1 text-sm text-muted-foreground">
147+
<li>• Create and maintain your explorer account</li>
148+
<li>• Track your research progress and achievements</li>
149+
<li>• Show you personalized mission recommendations</li>
150+
<li>• Connect your discoveries with the broader research community</li>
151+
</ul>
152+
</div>
153+
154+
<div className="p-4 bg-card/50 rounded-lg">
155+
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
156+
<span className="text-lg">📡</span>
157+
Communication & Updates
158+
</h3>
159+
<ul className="space-y-1 text-sm text-muted-foreground">
160+
<li>• Send you important mission updates</li>
161+
<li>• Notify you about new discoveries in your research areas</li>
162+
<li>• Share weekly progress reports (if you opt in)</li>
163+
</ul>
164+
</div>
165+
</div>
166+
167+
<div className="space-y-4">
168+
<div className="p-4 bg-card/50 rounded-lg">
169+
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
170+
<span className="text-lg">🔬</span>
171+
Scientific Integrity
172+
</h3>
173+
<ul className="space-y-1 text-sm text-muted-foreground">
174+
<li>• Ensure all classifications are properly attributed</li>
175+
<li>• Maintain data quality for real research contributions</li>
176+
<li>• Prevent spam and maintain community standards</li>
177+
</ul>
178+
</div>
179+
180+
<div className="p-4 bg-card/50 rounded-lg">
181+
<h3 className="font-semibold text-foreground mb-2 flex items-center gap-2">
182+
<span className="text-lg">⚡</span>
183+
Platform Improvements
184+
</h3>
185+
<ul className="space-y-1 text-sm text-muted-foreground">
186+
<li>• Understand which features are most valuable</li>
187+
<li>• Optimize the discovery experience</li>
188+
<li>• Debug technical issues you might encounter</li>
189+
</ul>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
195+
{/* How We Protect It */}
196+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
197+
<h2 className="text-2xl font-semibold text-primary mb-4">🛡️ How We Protect Your Data</h2>
198+
199+
<div className="grid md:grid-cols-2 gap-6">
200+
<div className="space-y-4">
201+
<div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
202+
<h3 className="font-semibold text-red-800 dark:text-red-200 mb-2">🔒 Security Measures</h3>
203+
<ul className="space-y-1 text-sm text-red-700 dark:text-red-300">
204+
<li>• All data encrypted in transit and at rest</li>
205+
<li>• Secure authentication through Supabase</li>
206+
<li>• Regular security audits and updates</li>
207+
<li>• Access controls and monitoring</li>
208+
</ul>
209+
</div>
210+
211+
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
212+
<h3 className="font-semibold text-blue-800 dark:text-blue-200 mb-2">👥 Access Controls</h3>
213+
<ul className="space-y-1 text-sm text-blue-700 dark:text-blue-300">
214+
<li>• Only essential team members can access user data</li>
215+
<li>• All access is logged and monitored</li>
216+
<li>• No third-party access without your explicit consent</li>
217+
</ul>
218+
</div>
219+
</div>
220+
221+
<div className="space-y-4">
222+
<div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
223+
<h3 className="font-semibold text-green-800 dark:text-green-200 mb-2">🌍 Data Storage</h3>
224+
<ul className="space-y-1 text-sm text-green-700 dark:text-green-300">
225+
<li>• Hosted on secure, compliant cloud infrastructure</li>
226+
<li>• Regular automated backups</li>
227+
<li>• Geographic redundancy for reliability</li>
228+
</ul>
229+
</div>
230+
231+
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
232+
<h3 className="font-semibold text-purple-800 dark:text-purple-200 mb-2">📋 Data Minimization</h3>
233+
<ul className="space-y-1 text-sm text-purple-700 dark:text-purple-300">
234+
<li>• We only collect what's necessary for the service</li>
235+
<li>• Automatic deletion of unnecessary logs</li>
236+
<li>• You can delete your account and data anytime</li>
237+
</ul>
238+
</div>
239+
</div>
240+
</div>
241+
</div>
242+
243+
{/* Your Rights */}
244+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
245+
<h2 className="text-2xl font-semibold text-primary mb-4">⚖️ Your Rights & Choices</h2>
246+
247+
<div className="space-y-4">
248+
<div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
249+
<h3 className="font-semibold text-foreground mb-3">You have full control over your data:</h3>
250+
<div className="grid md:grid-cols-2 gap-4 text-sm">
251+
<div>
252+
<h4 className="font-medium mb-2">📥 Access & Download</h4>
253+
<p className="text-muted-foreground">Request a copy of all your data at any time</p>
254+
</div>
255+
<div>
256+
<h4 className="font-medium mb-2">✏️ Correction</h4>
257+
<p className="text-muted-foreground">Update your profile and account information</p>
258+
</div>
259+
<div>
260+
<h4 className="font-medium mb-2">🗑️ Deletion</h4>
261+
<p className="text-muted-foreground">Delete your account and all associated data</p>
262+
</div>
263+
<div>
264+
<h4 className="font-medium mb-2">📧 Communication</h4>
265+
<p className="text-muted-foreground">Opt out of non-essential emails anytime</p>
266+
</div>
267+
</div>
268+
</div>
269+
270+
<div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
271+
<h3 className="font-semibold text-yellow-800 dark:text-yellow-200 mb-2">📊 Public Research Data</h3>
272+
<p className="text-sm text-yellow-700 dark:text-yellow-300">
273+
Your classifications and discoveries contribute to real scientific research. While your personal
274+
information remains private, your research contributions may be included in anonymized datasets
275+
shared with the scientific community. This helps advance our understanding of the cosmos!
276+
</p>
277+
</div>
278+
</div>
279+
</div>
280+
281+
{/* Contact & Changes */}
282+
<div className="bg-background/20 backdrop-blur-sm rounded-lg border border-[#78cce2]/30 p-6">
283+
<h2 className="text-2xl font-semibold text-primary mb-4">📞 Questions & Updates</h2>
284+
285+
<div className="grid md:grid-cols-2 gap-6">
286+
<div>
287+
<h3 className="font-semibold text-foreground mb-3">Have Questions?</h3>
288+
<p className="text-sm text-muted-foreground mb-4">
289+
We're here to help! If you have any questions about your privacy, your data,
290+
or how Star Sailors works, don't hesitate to reach out.
291+
</p>
292+
<div className="space-y-2 text-sm">
293+
<p className="flex items-center gap-2">
294+
<Mail className="w-4 h-4 text-primary" />
295+
<span>Contact us at: </span>
296+
<a href="mailto:liam@skinetics.tech" className="text-primary hover:underline">
297+
liam@skinetics.tech
298+
</a>
299+
</p>
300+
</div>
301+
</div>
302+
303+
<div>
304+
<h3 className="font-semibold text-foreground mb-3">Policy Updates</h3>
305+
<p className="text-sm text-muted-foreground mb-4">
306+
We'll notify you if we make significant changes to this privacy policy.
307+
We'll always be transparent about what data we collect and how we use it.
308+
</p>
309+
<div className="p-3 bg-card/50 rounded-lg">
310+
<p className="text-xs text-muted-foreground">
311+
<strong>Current version:</strong> 1.0 (July 27, 2025)<br />
312+
<strong>Next review:</strong> January 2026
313+
</p>
314+
</div>
315+
</div>
316+
</div>
317+
</div>
318+
</div>
319+
</div>
320+
</div>
321+
);
322+
}

0 commit comments

Comments
 (0)