zias/kunstenkamp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:accessibility, new routes, cookie consent, and UI improvements

Browse Source 
- Add contact, privacy, and terms pages
- Add CookieConsent component with accept/decline and localStorage
- Add self-hosted DM Sans font with @font-face definitions
- Improve registration form with field validation, blur handlers, and
performer toggle
- Redesign Info section with 'Ongedesemd Brood' hero and FAQ layout
- Remove scroll-snap behavior from all sections
- Add reduced motion support and selection color theming
- Add SVG favicon and SEO meta tags in root layout
- Improve accessibility: aria attributes, semantic HTML, focus styles
- Add link-hover underline animation utility
This commit is contained in:
ッ
2026-03-02 20:45:17 +01:00
parent b343314931
commit 37d9a415eb
23 changed files with 1804 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/src/components/homepage/ArtForms.tsx
View File

@@ -53,59 +53,71 @@ const artForms = [
export default function ArtForms() {
return (
<section className="snap-section relative z-25 min-h-screen w-full bg-[#f8f8f8] px-12 py-16">
<section className="relative z-25 w-full bg-[#f8f8f8] px-12 py-16">
<div className="mx-auto max-w-6xl">
<h2 className="mb-4 font-['Intro',sans-serif] text-5xl text-[#214e51]">
Kies Je Traject
</h2>
<p className="mb-12 max-w-2xl font-['Intro',sans-serif] text-gray-600 text-xl">
<p className="mb-12 max-w-2xl text-gray-600 text-xl">
Kunstenkamp biedt trajecten aan voor verschillende kunstvormen. Ontdek
waar jouw passie ligt en ontwikkel je talent onder begeleiding van
ervaringsdeskundigen.
</p>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{artForms.map((art) => {
{artForms.map((art, index) => {
const IconComponent = art.icon;
return (
<div
<article
key={art.title}
className="group relative overflow-hidden bg-white p-8 transition-all hover:-translate-y-2 hover:shadow-xl"
className="group relative overflow-hidden bg-white p-8 transition-all focus-within:ring-2 focus-within:ring-[#214e51] focus-within:ring-offset-2 hover:-translate-y-2 hover:shadow-xl motion-reduce:transition-none"
aria-labelledby={`art-title-${index}`}
>
{/* Color bar at top */}
<div
className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2"
className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2 motion-reduce:transition-none"
style={{ backgroundColor: art.color }}
aria-hidden="true"
/>
<div className="mb-4 flex items-center gap-4">
<div
className="flex h-14 w-14 items-center justify-center"
style={{ backgroundColor: art.color }}
aria-hidden="true"
>
<IconComponent className="h-7 w-7 text-white" />
<IconComponent
className="h-7 w-7 text-white"
aria-hidden="true"
/>
</div>
<h3 className="font-['Intro',sans-serif] text-2xl text-gray-900">
<h3
id={`art-title-${index}`}
className="font-['Intro',sans-serif] text-2xl text-gray-900"
>
{art.title}
</h3>
</div>
<p className="mb-6 font-['Intro',sans-serif] text-gray-600 leading-relaxed">
<p className="mb-6 text-gray-600 leading-relaxed">
{art.description}
</p>
<div className="flex items-center justify-between border-gray-100 border-t pt-4">
<span
className="font-['Intro',sans-serif] font-medium text-sm"
className="font-medium text-sm"
style={{ color: art.color }}
>
{art.trajectory}
</span>
<span className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600">
<span
className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600 motion-reduce:transition-none"
aria-hidden="true"
>
→
</span>
</div>
</div>
</article>
);
})}
</div>