better responsive and added translation for cookie banner

This commit is contained in:
kinou-p 2025-10-03 22:58:57 +02:00
parent 34116e0957
commit 0624060b2d
5 changed files with 58 additions and 13 deletions

0
public/cv.pdf Normal file
View File

View File

@ -57,9 +57,9 @@ export const CookieBanner = () => {
<Cookie className="w-5 h-5 text-primary" /> <Cookie className="w-5 h-5 text-primary" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h3 className="font-semibold text-base mb-1">Cookies</h3> <h3 className="font-semibold text-base mb-1">{t("cookies.title")}</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Nous utilisons des cookies pour améliorer votre expérience et analyser le trafic. {t("cookies.description")}
</p> </p>
</div> </div>
</div> </div>
@ -71,7 +71,7 @@ export const CookieBanner = () => {
onClick={acceptAllCookies} onClick={acceptAllCookies}
className="flex-1" className="flex-1"
> >
Accepter {t("cookies.accept")}
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@ -79,7 +79,7 @@ export const CookieBanner = () => {
onClick={rejectAll} onClick={rejectAll}
className="flex-1" className="flex-1"
> >
Refuser {t("cookies.reject")}
</Button> </Button>
</div> </div>
</div> </div>

View File

@ -5,12 +5,13 @@ import { useCookieBanner } from "@/contexts/CookieBannerContext";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { LegalNoticeModal } from "@/components/LegalNoticeModal"; import { LegalNoticeModal } from "@/components/LegalNoticeModal";
import { Github, Mail, ExternalLink, Cookie, FileText } from "lucide-react"; import { Github, Mail, ExternalLink, Cookie, FileText, Download } from "lucide-react";
export const Footer = () => { export const Footer = () => {
const { t } = useLanguage(); const { t } = useLanguage();
const { showBanner } = useCookieBanner(); const { showBanner } = useCookieBanner();
const [showLegalNotice, setShowLegalNotice] = useState(false); const [showLegalNotice, setShowLegalNotice] = useState(false);
const [showCVPopup, setShowCVPopup] = useState(false);
const reopenCookiePreferences = () => { const reopenCookiePreferences = () => {
// Simplement rouvrir la bannière sans recharger // Simplement rouvrir la bannière sans recharger
@ -20,6 +21,11 @@ export const Footer = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const footerLinks = [ const footerLinks = [
{
icon: <Download className="w-4 h-4" />,
label: t("footer.downloadCV"),
onClick: () => setShowCVPopup(true)
},
{ {
icon: <FileText className="w-4 h-4" />, icon: <FileText className="w-4 h-4" />,
label: t("footer.legalNotice"), label: t("footer.legalNotice"),
@ -35,12 +41,12 @@ export const Footer = () => {
const socialLinks = [ const socialLinks = [
{ {
icon: <Github className="w-5 h-5" />, icon: <Github className="w-5 h-5" />,
label: "GitHub", label: t("footer.github"),
href: "https://github.com/kinou-p" href: "https://github.com/kinou-p"
}, },
{ {
icon: <Mail className="w-5 h-5" />, icon: <Mail className="w-5 h-5" />,
label: "Email", label: t("footer.email"),
href: "mailto:contact@apommier.com" href: "mailto:contact@apommier.com"
} }
]; ];
@ -125,7 +131,7 @@ export const Footer = () => {
className="space-y-4 md:max-w-xs" className="space-y-4 md:max-w-xs"
> >
<h3 className="font-semibold text-lg">{t("footer.information")}</h3> <h3 className="font-semibold text-lg">{t("footer.information")}</h3>
<nav className="space-y-2"> <nav className="flex flex-col space-y-2">
{footerLinks.map((link, index) => ( {footerLinks.map((link, index) => (
<Button <Button
key={link.label} key={link.label}
@ -179,6 +185,21 @@ export const Footer = () => {
isOpen={showLegalNotice} isOpen={showLegalNotice}
onClose={() => setShowLegalNotice(false)} onClose={() => setShowLegalNotice(false)}
/> />
{/* Popup CV en travaux */}
{showCVPopup && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowCVPopup(false)}>
<div className="bg-background p-6 rounded-lg shadow-lg max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
<h3 className="text-lg font-semibold mb-2">{t("footer.cvWorkInProgressTitle")}</h3>
<p className="text-muted-foreground mb-4">
{t("footer.cvWorkInProgress")}
</p>
<Button onClick={() => setShowCVPopup(false)} className="w-full">
{t("footer.understood")}
</Button>
</div>
</div>
)}
</footer> </footer>
); );
}; };

View File

@ -32,10 +32,10 @@ const ProjectPageContent = () => {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center">
<div className="text-center"> <div className="text-center">
<h1 className="text-4xl font-bold mb-4">{t("project.notFound") || "Project not found"}</h1> <h1 className="text-4xl font-bold mb-4">{t("project.notFound")}</h1>
<Button onClick={() => navigate("/")}> <Button onClick={() => navigate("/")}>
<ArrowLeft className="w-4 h-4 mr-2" /> <ArrowLeft className="w-4 h-4 mr-2" />
{t("project.backToHome") || "Back to Home"} {t("project.backToHome")}
</Button> </Button>
</div> </div>
</div> </div>
@ -43,7 +43,7 @@ const ProjectPageContent = () => {
} }
return ( return (
<div className="min-h-screen"> <div className="min-h-screen overflow-y-hidden">
<ScrollProgress /> <ScrollProgress />
<Header /> <Header />
@ -56,7 +56,7 @@ const ProjectPageContent = () => {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="max-w-4xl mx-auto text-center mb-12" className="max-w-4xl mx-auto text-center mb-12"
> >
<h1 className="text-5xl md:text-7xl font-bold mb-6"> <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-6">
{project.title[language]} {project.title[language]}
</h1> </h1>
<p className="text-xl md:text-2xl text-muted-foreground mb-8"> <p className="text-xl md:text-2xl text-muted-foreground mb-8">
@ -261,7 +261,7 @@ const ProjectPageContent = () => {
className="gap-2" className="gap-2"
> >
<ArrowLeft className="w-5 h-5" /> <ArrowLeft className="w-5 h-5" />
{t("project.backToHome") || "Back to Home"} {t("project.backToHome")}
</Button> </Button>
</div> </div>
</motion.div> </motion.div>

View File

@ -73,9 +73,21 @@ export const translations = {
information: "Informations", information: "Informations",
legalNotice: "Mentions légales", legalNotice: "Mentions légales",
cookieManagement: "Gestion des cookies", cookieManagement: "Gestion des cookies",
downloadCV: "Télécharger mon CV",
cvWorkInProgressTitle: "CV en travaux",
cvWorkInProgress: "Mon CV est actuellement en cours de préparation. Il sera bientôt disponible !",
understood: "Compris",
github: "GitHub",
email: "Email",
copyright: "Tous droits réservés.", copyright: "Tous droits réservés.",
builtWith: "Construit avec", builtWith: "Construit avec",
}, },
cookies: {
title: "Cookies",
description: "Nous utilisons des cookies pour améliorer votre expérience et analyser le trafic.",
accept: "Accepter",
reject: "Refuser",
},
project: { project: {
back: "Retour", back: "Retour",
backToHome: "Retour à l'accueil", backToHome: "Retour à l'accueil",
@ -166,9 +178,21 @@ export const translations = {
information: "Information", information: "Information",
legalNotice: "Legal Notice", legalNotice: "Legal Notice",
cookieManagement: "Cookie Management", cookieManagement: "Cookie Management",
downloadCV: "Download my CV",
cvWorkInProgressTitle: "CV Work in Progress",
cvWorkInProgress: "My CV is currently being prepared. It will be available soon!",
understood: "Understood",
github: "GitHub",
email: "Email",
copyright: "All rights reserved.", copyright: "All rights reserved.",
builtWith: "Built with", builtWith: "Built with",
}, },
cookies: {
title: "Cookies",
description: "We use cookies to improve your experience and analyze traffic.",
accept: "Accept",
reject: "Reject",
},
project: { project: {
back: "Back", back: "Back",
backToHome: "Back to Home", backToHome: "Back to Home",