feat: plakat redesign phase 4 (chat window, contact, footer, cleanup)
- AI chat moves into a window/sheet, opened from a new speech-bubble card on the desk; it now respects the chatbot consent and asks before sending anything to n8n (previously it ignored the consent) - Contact as red poster section with big mail address and the form on a paper card; validation errors are finally shown inline (aria-invalid, role=alert) - Footer as ink strip with dk0 wordmark, legal links and a button to reopen the privacy settings - "About me" in the header opens the about window on the home page - Remove the old About section and its parts (BentoChat, ActivityFeed, CurrentlyReading, ReadBooks), the unused ChatWidget, Projects and BentoGrid, their tests, wrappers, loaders, types and texts - scripts/directus-cleanup-redesign.mjs: dry run by default, --apply archives hobbies, tech stack categories and old content pages and deletes four unused message overrides after a full JSON backup; run only after the redesign is live on production Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
denshooter
+41
-65
@@ -3,80 +3,56 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { ArrowUp } from "lucide-react";
|
||||
import { useConsent } from "./ConsentProvider";
|
||||
|
||||
const pill =
|
||||
"inline-flex items-center rounded-full px-4 py-2 text-sm font-medium shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-paper)/0.5)] transition-[background-color,color,transform] duration-150 ease-out hover:bg-paper hover:text-ink active:scale-[0.97]";
|
||||
|
||||
const Footer = () => {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("footer");
|
||||
const { resetConsent } = useConsent();
|
||||
const year = new Date().getFullYear();
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-stone-50 dark:bg-stone-950 pt-16 sm:pt-24 md:pt-32 pb-8 sm:pb-12 px-4 sm:px-6 overflow-hidden transition-colors duration-500">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<footer className="bg-ink px-4 pb-10 pt-12 text-paper sm:px-6 lg:px-10">
|
||||
<div className="flex flex-wrap items-end justify-between gap-6">
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="font-display text-[clamp(4rem,14vw,9rem)] font-extrabold leading-[0.8] tracking-[-0.05em]"
|
||||
aria-label="dk0"
|
||||
>
|
||||
dk<span className="text-signal">0</span>
|
||||
</Link>
|
||||
<a href="#top" className={pill}>
|
||||
{t("backToTop")} <span aria-hidden="true" className="ml-1.5">↑</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 sm:gap-10 md:gap-12 items-end">
|
||||
{/* Copyright & Info */}
|
||||
<div className="md:col-span-4 space-y-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
|
||||
dk
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">{t("role")}</p>
|
||||
<p className="text-stone-600 dark:text-stone-400 text-sm font-medium">© {year} {t("madeIn")}.</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="mt-8 flex flex-wrap gap-2 border-t-2 border-paper/20 pt-6" aria-label={t("legalNotice")}>
|
||||
<Link href={`/${locale}/legal-notice`} className={pill}>
|
||||
{t("legalNotice")}
|
||||
</Link>
|
||||
<Link href={`/${locale}/privacy-policy`} className={pill}>
|
||||
{t("privacyPolicy")}
|
||||
</Link>
|
||||
<button type="button" onClick={resetConsent} className={pill} title={t("privacySettingsTitle")}>
|
||||
{t("privacySettings")}
|
||||
</button>
|
||||
<a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className={pill}>
|
||||
GitHub
|
||||
</a>
|
||||
<a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className={pill}>
|
||||
LinkedIn
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="md:col-span-4 grid grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">{t("legalNotice")}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href={`/${locale}/legal-notice`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("legalNotice")}</Link>
|
||||
<Link href={`/${locale}/privacy-policy`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("privacyPolicy")}</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Social</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back to Top */}
|
||||
<div className="md:col-span-4 flex justify-start md:justify-end">
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="group flex flex-col items-center gap-4 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400" style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>{t("backToTop")}</span>
|
||||
<div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 group-active:scale-[0.97] transition-[background-color,color,transform] duration-200 ease-out shadow-sm">
|
||||
<ArrowUp size={20} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-10 sm:mt-16 md:mt-20 pt-6 sm:pt-8 border-t border-stone-100 dark:border-stone-900 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">
|
||||
{t("builtWith")} Next.js, Directus & Passion.
|
||||
</p>
|
||||
<p className="text-[10px] text-stone-500 dark:text-stone-500 tracking-wide">
|
||||
{t("aiDisclaimer")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
||||
<span className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">{t("systemsOnline")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-1.5 font-mono text-xs text-paper/70">
|
||||
<p>
|
||||
© {year} Dennis Konkol · {t("role")} · {t("madeIn")}
|
||||
</p>
|
||||
<p>{t("builtWith")}</p>
|
||||
<p>{t("aiDisclaimer")}</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user