style: unified bento design across all sub-pages
Applied the editorial look to legal notice and privacy policy pages. Created consistent grid-based layouts for easier reading and a premium feel.
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
import React from "react";
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { ArrowLeft, Mail, MapPin, Scale, ShieldCheck, Clock } from 'lucide-react';
|
||||
import Header from "../components/Header";
|
||||
import Footer from "../components/Footer";
|
||||
import Link from "next/link";
|
||||
@@ -15,7 +15,6 @@ export default function LegalNotice() {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("common");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
const [cmsTitle, setCmsTitle] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
@@ -26,7 +25,6 @@ export default function LegalNotice() {
|
||||
const data = await res.json();
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
setCmsTitle((data.content.title as string | null) ?? null);
|
||||
}
|
||||
} catch {}
|
||||
})();
|
||||
@@ -36,11 +34,12 @@ export default function LegalNotice() {
|
||||
<div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
|
||||
<Header />
|
||||
<main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
|
||||
|
||||
{/* Editorial Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="mb-12"
|
||||
className="mb-20"
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
@@ -50,45 +49,94 @@ export default function LegalNotice() {
|
||||
<span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-6xl md:text-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
|
||||
<h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
|
||||
Legal<span className="text-liquid-mint">.</span>
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
|
||||
>
|
||||
{cmsDoc ? (
|
||||
<div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
|
||||
<RichTextClient doc={cmsDoc} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-12">
|
||||
<div className="text-stone-600 dark:text-stone-400 leading-relaxed">
|
||||
<h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Angaben gemäß § 5 TMG</h2>
|
||||
<div className="space-y-4 text-xl font-light">
|
||||
<p>Dennis Konkol</p>
|
||||
<p>Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
|
||||
<p>E-Mail: <Link href="mailto:info@dk0.dev" className="text-stone-900 dark:text-stone-100 font-bold border-b-2 border-liquid-mint">info@dk0.dev</Link></p>
|
||||
{/* Bento Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
{/* Main Legal Content (Large Box) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
|
||||
>
|
||||
{cmsDoc ? (
|
||||
<div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
|
||||
<RichTextClient doc={cmsDoc} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-16">
|
||||
<section>
|
||||
<h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
|
||||
<Scale className="text-liquid-mint" size={28} /> Angaben gemäß § 5 TMG
|
||||
</h2>
|
||||
<div className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 space-y-4">
|
||||
<p className="font-bold text-stone-900 dark:text-stone-100">Dennis Konkol</p>
|
||||
<p>Auf dem Ziegenbrink 2B</p>
|
||||
<p>49082 Osnabrück, Deutschland</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
|
||||
<ShieldCheck className="text-liquid-sky" size={28} /> Haftungsausschluss
|
||||
</h2>
|
||||
<p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
|
||||
Die Inhalte dieser Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Sidebar Widgets */}
|
||||
<div className="lg:col-span-4 space-y-8">
|
||||
|
||||
{/* Quick Contact Box */}
|
||||
<div className="bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white">
|
||||
<h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-mint">Direct Contact</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white/10 flex items-center justify-center border border-white/10">
|
||||
<Mail className="text-liquid-mint" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-stone-500">Email</p>
|
||||
<Link href="mailto:info@dk0.dev" className="font-bold hover:text-liquid-mint transition-colors">info@dk0.dev</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white/10 flex items-center justify-center border border-white/10">
|
||||
<MapPin className="text-liquid-sky" size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-stone-500">Location</p>
|
||||
<p className="font-bold">Osnabrück, GER</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-stone-600 dark:text-stone-400">
|
||||
<h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Haftung für Inhalte</h2>
|
||||
<p className="text-xl font-light leading-relaxed">
|
||||
Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-stone-100 dark:border-stone-800">
|
||||
<p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Meta Info Box */}
|
||||
<div className="bg-liquid-purple/5 dark:bg-stone-900 rounded-[3rem] p-10 border border-liquid-purple/20 dark:border-stone-800/60">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Clock className="text-liquid-purple" size={20} />
|
||||
<div>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-stone-400">Last Review</p>
|
||||
<p className="font-bold text-stone-900 dark:text-stone-100 text-sm">February 15, 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-stone-500 leading-relaxed">
|
||||
This legal notice applies to all contents on dk0.dev and related social media profiles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user