feat:mollie and footer
This commit is contained in:
@@ -17,63 +17,141 @@ export default function Footer() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<footer className="relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
|
||||
<div className="text-center">
|
||||
<h3 className="mb-4 flex items-center justify-center gap-2 font-['Intro',sans-serif] text-2xl text-white">
|
||||
<img
|
||||
src="/favicon.png"
|
||||
alt=""
|
||||
className="h-8 w-8 rounded bg-[#0B1C1F]"
|
||||
/>
|
||||
Kunstenkamp
|
||||
</h3>
|
||||
<p className="mb-6 font-['Intro',sans-serif] text-white/80">
|
||||
Waar creativiteit tot leven komt
|
||||
</p>
|
||||
<footer className="relative z-40 overflow-hidden bg-[#d09035]">
|
||||
{/* Magenta top accent line */}
|
||||
<div className="h-1 w-full bg-[#d82560]" />
|
||||
|
||||
<div className="flex flex-col items-center justify-center gap-2 text-sm text-white/70 md:flex-row md:gap-8">
|
||||
{/* Diagonal texture overlay */}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-[0.04]"
|
||||
style={{
|
||||
backgroundImage: `repeating-linear-gradient(
|
||||
-45deg,
|
||||
#000 0px,
|
||||
#000 1px,
|
||||
transparent 1px,
|
||||
transparent 12px
|
||||
)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative mx-auto max-w-5xl px-6 py-12">
|
||||
{/* Main brand row */}
|
||||
<div className="mb-10 flex flex-col items-center gap-1">
|
||||
<a
|
||||
href="/privacy"
|
||||
className="link-hover transition-colors hover:text-white"
|
||||
href="https://ejv.be/jong/kampen/kunstenkamp/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
|
||||
>
|
||||
Privacy Beleid
|
||||
<img src="/favicon.png" alt="" className="h-10 w-10 bg-[#0B1C1F]" />
|
||||
<span
|
||||
className="font-['Intro',sans-serif] text-3xl text-white tracking-wide"
|
||||
style={{ textShadow: "0 2px 8px rgba(0,0,0,0.18)" }}
|
||||
>
|
||||
Kunstenkamp
|
||||
</span>
|
||||
</a>
|
||||
<span className="hidden text-white/40 md:inline">|</span>
|
||||
<a
|
||||
href="/terms"
|
||||
className="link-hover transition-colors hover:text-white"
|
||||
>
|
||||
Algemene Voorwaarden
|
||||
</a>
|
||||
<span className="hidden text-white/40 md:inline">|</span>
|
||||
<a
|
||||
href="/contact"
|
||||
className="link-hover transition-colors hover:text-white"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
{!isLoading && isAdmin && (
|
||||
<>
|
||||
<span className="hidden text-white/40 md:inline">|</span>
|
||||
<Link
|
||||
to="/admin"
|
||||
className="link-hover transition-colors hover:text-white"
|
||||
>
|
||||
Admin
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
<p className="font-['DM_Sans',sans-serif] font-medium text-sm text-white/70 uppercase tracking-[0.2em]">
|
||||
Waar creativiteit tot leven komt
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-white/50 text-xs">
|
||||
© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
|
||||
{/* Thin divider */}
|
||||
<div className="mb-10 flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-white/20" />
|
||||
<div className="h-1 w-1 rotate-45 bg-white/40" />
|
||||
<div className="h-px flex-1 bg-white/20" />
|
||||
</div>
|
||||
<div className="text-white/50 text-xs transition-colors hover:text-white">
|
||||
|
||||
{/* Partners row */}
|
||||
<div className="mb-10 flex flex-col items-center justify-center gap-10 md:flex-row md:gap-16">
|
||||
{/* EJV */}
|
||||
<a
|
||||
href="https://ejv.be"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
|
||||
>
|
||||
<img
|
||||
src="/assets/ejv.svg"
|
||||
alt="Evangelisch Jeugdverbond"
|
||||
className="h-14 w-auto"
|
||||
/>
|
||||
<p className="font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]">
|
||||
Onderdeel van EJV.be
|
||||
</p>
|
||||
</a>
|
||||
|
||||
{/* Vertical rule */}
|
||||
<div className="hidden h-28 w-px bg-white/20 md:block" />
|
||||
|
||||
{/* Vlaanderen */}
|
||||
<a
|
||||
href="https://www.vlaanderen.be/cjm/nl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
|
||||
>
|
||||
<img
|
||||
src="/assets/vlaanderen.svg"
|
||||
alt="Met steun van de Vlaamse overheid"
|
||||
className="h-40 w-auto drop-shadow-md"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Thin divider */}
|
||||
<div className="mb-6 flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-white/20" />
|
||||
<div className="h-1 w-1 rotate-45 bg-white/40" />
|
||||
<div className="h-px flex-1 bg-white/20" />
|
||||
</div>
|
||||
|
||||
{/* Legal links */}
|
||||
<div className="flex flex-col items-center gap-4 md:flex-row md:justify-center md:gap-0">
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
|
||||
{[
|
||||
{ href: "/privacy", label: "Privacy Beleid" },
|
||||
{ href: "/terms", label: "Algemene Voorwaarden" },
|
||||
{ href: "/contact", label: "Contact" },
|
||||
].map((link, i, arr) => (
|
||||
<span key={link.href} className="flex items-center gap-6">
|
||||
<a
|
||||
href={link.href}
|
||||
className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
{i < arr.length - 1 && (
|
||||
<span className="hidden text-white/30 md:inline">·</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{!isLoading && isAdmin && (
|
||||
<span className="flex items-center gap-6">
|
||||
<span className="hidden text-white/30 md:inline">·</span>
|
||||
<Link
|
||||
to="/admin"
|
||||
className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
|
||||
>
|
||||
Admin
|
||||
</Link>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="mt-6 flex flex-col items-center gap-1">
|
||||
<p className="font-['DM_Sans',sans-serif] text-white/40 text-xs">
|
||||
© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
|
||||
</p>
|
||||
<a
|
||||
href="https://zias.be"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="link-hover"
|
||||
className="link-hover font-['DM_Sans',sans-serif] text-white/30 text-xs"
|
||||
>
|
||||
Gemaakt met ♥ door zias.be
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user