Skip to content

Commit 8a9c4f5

Browse files
julianengeljulianengel
committed
Add Privacy Policy and Terms of Service pages
- Create /privacy page with GDPR compliance focus - Create /terms page with fair, simple terms - Link to individual app policies (Domain Details, Doodlify) - Add Privacy and Terms links to footer - Highlight European origin and privacy commitments
1 parent 65816dc commit 8a9c4f5

File tree

3 files changed

+537
-1
lines changed

3 files changed

+537
-1
lines changed

‎src/components/Footer.astro‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
---
33

44
<footer class="footer">
5-
<span>© 2025 <a href="https://simplebytes.com">Simple Bytes</a>, a <a href="https://meome.com/?ref=simplebytes" target="_blank" rel="noopener">Meome</a> company</span>
5+
<div class="footer-content">
6+
<span>© 2025 <a href="https://simplebytes.com">Simple Bytes</a>, a <a href="https://meome.com/?ref=simplebytes" target="_blank" rel="noopener">Meome</a> company</span>
7+
<nav class="footer-links">
8+
<a href="/privacy">Privacy</a>
9+
<a href="/terms">Terms</a>
10+
</nav>
11+
</div>
612
</footer>
713

814
<style>
@@ -27,6 +33,23 @@
2733
color: var(--text-primary);
2834
}
2935

36+
.footer-content {
37+
display: flex;
38+
justify-content: space-between;
39+
align-items: center;
40+
flex-wrap: wrap;
41+
gap: 1rem;
42+
}
43+
44+
.footer-links {
45+
display: flex;
46+
gap: 1.5rem;
47+
}
48+
49+
.footer-links a {
50+
font-size: 0.8125rem;
51+
}
52+
3053
@media (max-width: 768px) {
3154
.footer {
3255
margin-top: 3rem;

‎src/pages/privacy.astro‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
---
2+
import BaseLayout from '../layouts/BaseLayout.astro';
3+
4+
const appPolicies = [
5+
{ name: 'Domain Details', href: 'https://domaindetails.com/legal/privacy' },
6+
{ name: 'Doodlify', href: 'https://www.doodlify.ai/privacy' },
7+
];
8+
---
9+
10+
<BaseLayout
11+
title="Privacy Policy - Simple Bytes"
12+
description="Privacy Policy for Simple Bytes. We collect only strictly necessary data, respect your privacy, and are fully GDPR compliant."
13+
>
14+
<a href="/" class="back-link">← Back to home</a>
15+
16+
<article class="legal-page">
17+
<h1>Privacy Policy</h1>
18+
<p class="last-updated">Last updated: December 2025</p>
19+
20+
<section class="commitment-banner">
21+
<div class="badge-row">
22+
<span class="badge">GDPR Compliant</span>
23+
<span class="badge">Made in Europe</span>
24+
</div>
25+
<p>We believe privacy is a fundamental right, not a feature.</p>
26+
</section>
27+
28+
<section>
29+
<h2>Our Core Commitments</h2>
30+
<div class="commitments-grid">
31+
<div class="commitment">
32+
<span class="commitment-icon">🔒</span>
33+
<h3>Strictly Necessary Data Only</h3>
34+
<p>We only collect data that is essential for our services to function. No tracking for advertising, no selling of personal information, no unnecessary data harvesting.</p>
35+
</div>
36+
<div class="commitment">
37+
<span class="commitment-icon">🇪🇺</span>
38+
<h3>Proudly European</h3>
39+
<p>Simple Bytes is based in Europe. We are subject to and fully comply with the General Data Protection Regulation (GDPR), one of the world's strictest privacy frameworks.</p>
40+
</div>
41+
<div class="commitment">
42+
<span class="commitment-icon">🛡️</span>
43+
<h3>Privacy by Design</h3>
44+
<p>Privacy isn't an afterthought—it's built into every product we create from the ground up. We default to the most privacy-respecting options.</p>
45+
</div>
46+
</div>
47+
</section>
48+
49+
<section>
50+
<h2>What We Collect</h2>
51+
<p>Depending on the service you use, we may collect:</p>
52+
<ul>
53+
<li><strong>Account information</strong> — Email address when you create an account</li>
54+
<li><strong>Usage data</strong> — Anonymous, aggregated analytics to improve our services</li>
55+
<li><strong>Content you provide</strong> — Data you explicitly submit to use our tools</li>
56+
</ul>
57+
<p>We do not use cookies for tracking. Any cookies used are strictly functional.</p>
58+
</section>
59+
60+
<section>
61+
<h2>Your Rights</h2>
62+
<p>Under GDPR, you have the right to:</p>
63+
<ul>
64+
<li>Access your personal data</li>
65+
<li>Correct inaccurate data</li>
66+
<li>Request deletion of your data</li>
67+
<li>Export your data in a portable format</li>
68+
<li>Object to or restrict processing</li>
69+
<li>Withdraw consent at any time</li>
70+
</ul>
71+
<p>To exercise any of these rights, contact us at <a href="mailto:privacy@simplebytes.com">privacy@simplebytes.com</a>.</p>
72+
</section>
73+
74+
<section>
75+
<h2>Individual App Privacy Policies</h2>
76+
<p>Each of our products may have specific privacy considerations. Please review the privacy policy for the specific app you're using:</p>
77+
<div class="app-links">
78+
{appPolicies.map((app) => (
79+
<a href={app.href} target="_blank" rel="noopener" class="app-link">
80+
{app.name} Privacy Policy →
81+
</a>
82+
))}
83+
</div>
84+
<p class="note">OG Image Preview operates under this main Simple Bytes privacy policy.</p>
85+
</section>
86+
87+
<section>
88+
<h2>Contact</h2>
89+
<p>For privacy-related inquiries:</p>
90+
<p><a href="mailto:privacy@simplebytes.com">privacy@simplebytes.com</a></p>
91+
</section>
92+
</article>
93+
</BaseLayout>
94+
95+
<style>
96+
.back-link {
97+
display: inline-flex;
98+
align-items: center;
99+
gap: 0.5rem;
100+
font-size: 0.875rem;
101+
color: var(--text-secondary);
102+
text-decoration: none;
103+
margin-bottom: 2rem;
104+
transition: color 0.2s;
105+
}
106+
107+
.back-link:hover {
108+
color: var(--text-primary);
109+
}
110+
111+
.legal-page {
112+
max-width: 700px;
113+
}
114+
115+
h1 {
116+
font-size: clamp(2rem, 5vw, 2.75rem);
117+
font-weight: 600;
118+
letter-spacing: -0.03em;
119+
margin-bottom: 0.5rem;
120+
}
121+
122+
.last-updated {
123+
color: var(--text-tertiary);
124+
font-size: 0.875rem;
125+
margin-bottom: 2rem;
126+
}
127+
128+
.commitment-banner {
129+
background: var(--card-bg);
130+
border: 1px solid var(--border-color);
131+
border-radius: var(--radius-lg);
132+
padding: 1.5rem;
133+
margin-bottom: 3rem;
134+
}
135+
136+
.badge-row {
137+
display: flex;
138+
gap: 0.5rem;
139+
margin-bottom: 1rem;
140+
flex-wrap: wrap;
141+
}
142+
143+
.badge {
144+
display: inline-block;
145+
font-size: 0.75rem;
146+
font-weight: 500;
147+
text-transform: uppercase;
148+
letter-spacing: 0.05em;
149+
padding: 0.375rem 0.75rem;
150+
border-radius: var(--radius-sm);
151+
background: rgba(59, 130, 246, 0.1);
152+
color: #2563eb;
153+
}
154+
155+
:global([data-theme="dark"]) .badge {
156+
background: rgba(59, 130, 246, 0.15);
157+
color: #60a5fa;
158+
}
159+
160+
.commitment-banner p {
161+
color: var(--text-primary);
162+
font-weight: 500;
163+
margin: 0;
164+
}
165+
166+
section {
167+
margin-bottom: 2.5rem;
168+
}
169+
170+
h2 {
171+
font-size: 1.25rem;
172+
font-weight: 600;
173+
margin-bottom: 1rem;
174+
color: var(--text-primary);
175+
}
176+
177+
p {
178+
color: var(--text-secondary);
179+
line-height: 1.7;
180+
margin-bottom: 1rem;
181+
}
182+
183+
ul {
184+
color: var(--text-secondary);
185+
line-height: 1.7;
186+
padding-left: 1.5rem;
187+
margin-bottom: 1rem;
188+
}
189+
190+
li {
191+
margin-bottom: 0.5rem;
192+
}
193+
194+
a {
195+
color: var(--accent);
196+
}
197+
198+
a:hover {
199+
text-decoration: underline;
200+
}
201+
202+
.commitments-grid {
203+
display: grid;
204+
gap: 1.5rem;
205+
}
206+
207+
.commitment {
208+
padding: 1rem 0;
209+
}
210+
211+
.commitment-icon {
212+
font-size: 1.5rem;
213+
display: block;
214+
margin-bottom: 0.75rem;
215+
}
216+
217+
.commitment h3 {
218+
font-size: 1rem;
219+
font-weight: 600;
220+
margin-bottom: 0.5rem;
221+
color: var(--text-primary);
222+
}
223+
224+
.commitment p {
225+
margin: 0;
226+
}
227+
228+
.app-links {
229+
display: flex;
230+
flex-direction: column;
231+
gap: 0.75rem;
232+
margin: 1rem 0;
233+
}
234+
235+
.app-link {
236+
display: inline-flex;
237+
align-items: center;
238+
padding: 0.75rem 1rem;
239+
background: var(--accent-subtle);
240+
border-radius: var(--radius-md);
241+
text-decoration: none;
242+
color: var(--text-primary);
243+
font-weight: 500;
244+
transition: background 0.2s;
245+
width: fit-content;
246+
}
247+
248+
.app-link:hover {
249+
background: var(--card-bg);
250+
text-decoration: none;
251+
}
252+
253+
.note {
254+
font-size: 0.875rem;
255+
color: var(--text-tertiary);
256+
font-style: italic;
257+
}
258+
259+
@media (max-width: 768px) {
260+
h1 {
261+
font-size: 1.75rem;
262+
}
263+
}
264+
</style>

0 commit comments

Comments
 (0)