feat: update privacy & imprint pages with analytics disclosure and new card design
This commit is contained in:
Chneemann
parent
e4dc11a16c
commit
82a8e6ec10
3 changed files with 130 additions and 76 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -39,3 +39,6 @@ yarn-error.log*
|
|||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# Apache server configuration files
|
||||
htaccess
|
||||
|
|
@ -2,59 +2,63 @@ import Link from "next/link";
|
|||
|
||||
export default function ImprintPage() {
|
||||
return (
|
||||
<section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto">
|
||||
<section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
|
||||
Legal Notice<span className="text-blue-500">.</span>
|
||||
</h1>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2"
|
||||
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2 transition-colors"
|
||||
>
|
||||
← Back to Homepage
|
||||
</Link>
|
||||
|
||||
<div className="space-y-8 text-slate-300 leading-relaxed text-sm">
|
||||
{/* Angaben gemäß § 5 DDG & § 18 MStV */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2">
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
{/* Information in accordance with § 5 DDG & § 18 MStV */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>{" "}
|
||||
Information pursuant to § 5 DDG
|
||||
Information Pursuant to § 5 DDG
|
||||
</h2>
|
||||
<p className="font-semibold text-slate-100">André Kempf</p>
|
||||
<p>Full-Stack Web Developer</p>
|
||||
<p>Großschneidersweg 2a</p>
|
||||
<p>76149 Karlsruhe</p>
|
||||
<p>Germany</p>
|
||||
<p className="text-slate-400 text-xs pt-2 border-t border-slate-800/60 mt-3">
|
||||
<div className=" font-mono text-xs space-y-1 bg-slate-950/60 p-4 rounded-xl border border-slate-800/80">
|
||||
<p className="font-semibold text-slate-100 text-sm">André Kempf</p>
|
||||
<p className="text-blue-400">Full-Stack Web Developer</p>
|
||||
<p>Großschneidersweg 2a</p>
|
||||
<p>76149 Karlsruhe, Germany</p>
|
||||
</div>
|
||||
<p className="text-slate-300 text-xs pt-1">
|
||||
Also responsible for content pursuant to § 18 Abs. 2 MStV.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40">
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Contact
|
||||
</h2>
|
||||
<p>
|
||||
<strong className="text-slate-200">Email:</strong>{" "}
|
||||
<span className="text-blue-400 hover:underline">
|
||||
dev@andre-kempf.com
|
||||
</span>
|
||||
</p>
|
||||
<div className="p-4 rounded-xl bg-slate-950/60 border border-slate-800/80 font-mono text-xs">
|
||||
<p className="text-slate-300">
|
||||
<span className="text-slate-500">Email:</span>{" "}
|
||||
<span className="text-blue-400 hover:underline cursor-pointer">
|
||||
dev@andre-kempf.com
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-4">
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-5 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>{" "}
|
||||
Disclaimer & Legal Notes
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-200 mb-1">
|
||||
Liability for Content
|
||||
</h3>
|
||||
<p className="text-slate-400 text-xs leading-relaxed">
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold">Liability for Content</h3>
|
||||
<p className="text-slate-300 text-xs leading-relaxed">
|
||||
As a service provider, I am responsible for my own content on
|
||||
these pages according to general laws pursuant to § 7 Abs. 1 DDG.
|
||||
However, according to §§ 8 to 10 DDG, I am not obligated to
|
||||
|
|
@ -63,11 +67,9 @@ export default function ImprintPage() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-200 mb-1">
|
||||
Liability for Links
|
||||
</h3>
|
||||
<p className="text-slate-400 text-xs leading-relaxed">
|
||||
<div className="space-y-1 pt-2 border-t border-slate-800/60">
|
||||
<h3 className="font-semibold">Liability for Links</h3>
|
||||
<p className="text-slate-300 text-xs leading-relaxed">
|
||||
My website contains links to external third-party websites over
|
||||
whose content I have no control. Therefore, I cannot accept any
|
||||
liability for these external contents. The respective provider or
|
||||
|
|
@ -76,9 +78,9 @@ export default function ImprintPage() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-200 mb-1">Copyright</h3>
|
||||
<p className="text-slate-400 text-xs leading-relaxed">
|
||||
<div className="space-y-1 pt-2 border-t border-slate-800/60">
|
||||
<h3 className="font-semibold text-slate-200">Copyright</h3>
|
||||
<p className="text-slate-300 text-xs leading-relaxed">
|
||||
The content and works created on these pages are subject to German
|
||||
copyright law. Duplication, processing, distribution, or any form
|
||||
of commercialization beyond the scope of copyright law require the
|
||||
|
|
@ -88,8 +90,9 @@ export default function ImprintPage() {
|
|||
</div>
|
||||
|
||||
{/* Dispute Resolution */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40">
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Dispute
|
||||
Resolution
|
||||
</h2>
|
||||
|
|
@ -100,7 +103,7 @@ export default function ImprintPage() {
|
|||
href="https://ec.europa.eu/consumers/odr/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:underline"
|
||||
className="text-blue-400 hover:underline font-mono"
|
||||
>
|
||||
https://ec.europa.eu/consumers/odr/
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -2,84 +2,132 @@ import Link from "next/link";
|
|||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto">
|
||||
<section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
|
||||
Privacy Policy<span className="text-blue-500">.</span>
|
||||
</h1>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2"
|
||||
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2 transition-colors"
|
||||
>
|
||||
← Back to Homepage
|
||||
</Link>
|
||||
|
||||
<div className="space-y-8 text-slate-300 leading-relaxed text-sm">
|
||||
{/* 1. Overview */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
|
||||
{/* Overview */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> 1. Data
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Data
|
||||
Protection at a Glance
|
||||
</h2>
|
||||
<h3 className="font-semibold text-slate-200">General Information</h3>
|
||||
<p>
|
||||
The following notes provide a simple overview of what happens to
|
||||
your personal data when you visit this website. Personal data is any
|
||||
data that can be used to personally identify you.
|
||||
</p>
|
||||
<h3 className="font-semibold text-slate-200 pt-2">
|
||||
Data Collection on This Website
|
||||
</h3>
|
||||
<p>
|
||||
Data processing on this website is carried out by the website
|
||||
operator. Your data is collected when you provide it to us, or
|
||||
automatically by our IT systems when you visit the site.
|
||||
</p>
|
||||
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold ">General Information</h3>
|
||||
<p className="text-slate-300 text-xs leading-relaxed">
|
||||
The following notes provide a simple overview of what happens to
|
||||
your personal data when you visit this website. Personal data is
|
||||
any data that can be used to personally identify you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<h3 className="font-semibold pt-2">
|
||||
Data Collection on This Website
|
||||
</h3>
|
||||
<p className="text-slate-300 text-xs leading-relaxed">
|
||||
Data processing on this website is carried out by the website
|
||||
operator. Your data is collected when you provide it to us, or
|
||||
automatically by our IT systems when you visit the site.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. Responsible Party */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2">
|
||||
{/* Responsible Party */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-2 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> 2.
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>
|
||||
Responsible Party (Controller)
|
||||
</h2>
|
||||
<p>
|
||||
The controller responsible for data processing on this website is:
|
||||
</p>
|
||||
<div className="pt-2 text-slate-200">
|
||||
<p className="font-semibold">André Kempf</p>
|
||||
<div className="pt-2 font-mono text-xs space-y-1 bg-slate-950/60 p-4 rounded-xl border border-slate-800/80">
|
||||
<p className="font-semibold text-slate-100 text-sm">André Kempf</p>
|
||||
<p>Großschneidersweg 2a</p>
|
||||
<p>76149 Karlsruhe, Germany</p>
|
||||
<p className="mt-2">
|
||||
<p className="pt-2">
|
||||
Email:{" "}
|
||||
<span className="text-blue-400 hover:underline">
|
||||
<span className="text-blue-400 hover:underline cursor-pointer">
|
||||
dev@andre-kempf.com
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Hosting & Log Files */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
|
||||
{/* Hosting & Server Log Files */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> 3.
|
||||
Hosting & Server Log Files
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>
|
||||
Hosting & Server Infrastructure
|
||||
</h2>
|
||||
<p>
|
||||
This website is hosted externally. The personal data collected on
|
||||
this website is stored on the host's servers.
|
||||
This website is hosted externally on web servers operated by Netcup
|
||||
GmbH. Personal data processed on this website is stored on the
|
||||
host's secure servers.
|
||||
</p>
|
||||
<p>
|
||||
The provider automatically collects and stores information in
|
||||
so-called server log files, which your browser automatically
|
||||
transmits to us (e.g., browser type, operating system, IP address,
|
||||
time of request).
|
||||
The hosting provider automatically processes technical access data
|
||||
in server environment variables necessary to establish a stable
|
||||
connection and deliver page assets securely.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4. Your Rights */}
|
||||
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3">
|
||||
{/* Server Analytics */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> 4. Your
|
||||
<span className="text-blue-500 font-mono text-sm">//</span>
|
||||
Server Analytics & Privacy-First Tracking
|
||||
</h2>
|
||||
<p>
|
||||
To evaluate website reach and optimize user experience, this website
|
||||
processes minimal access metrics (e.g., total daily views, coarse
|
||||
device category, and daily visitor counts).
|
||||
</p>
|
||||
<div className="p-4 rounded-xl bg-slate-950/60 border border-slate-800/80 space-y-2 text-xs font-mono">
|
||||
<p className="text-emerald-400 font-semibold">
|
||||
// Key privacy guarantees:
|
||||
</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-slate-400">
|
||||
<li>
|
||||
<strong>No Cookies:</strong> We do not store cookies or local
|
||||
storage identifiers on your device.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Anonymized IPs:</strong> IP addresses are instantly
|
||||
hashed with a daily salt and never stored in plain text.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Zero Third Parties:</strong> Analytics data is processed
|
||||
locally on our own server and never shared with external
|
||||
tracking services.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 pt-1">
|
||||
The legal basis for this processing is our legitimate interest in
|
||||
maintaining and optimizing our online portfolio (Art. 6(1)(f) GDPR).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Your Rights */}
|
||||
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
|
||||
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span className="text-blue-500 font-mono text-sm">//</span> Your
|
||||
Rights
|
||||
</h2>
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue