colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bento-grid login page, mobile friendly docs page

Browse Source
This commit is contained in:
colinislit
2025-11-20 20:14:29 +01:00
parent 540bffa9ab
commit 5f7ef0801d
8 changed files with 220 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/(marketing)/documentatie/page.tsx
View File

@@ -21,38 +21,38 @@ export default async function ReleasesPage() {
const planned = releases.filter(r => r.frontmatter.status === 'planned')
return (
<div className="min-h-screen bg-slate-50 pt-24 pb-16">
<div className="max-w-4xl mx-auto px-4 md:px-8">
<div className="min-h-screen bg-slate-50 pb-16">
<div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8">
{/* Header */}
<div className="mb-12">
<h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
<div className="mb-8 md:mb-12 pt-20 md:pt-8">
<h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 mb-3 md:mb-4">
Feature Documentatie
</h1>
<p className="text-xl text-slate-600 max-w-3xl">
<p className="text-lg md:text-xl text-slate-600 max-w-3xl leading-relaxed">
Uitgebreide documentatie van alle gebouwde functionaliteit. Build in public met transparantie over features, implementatie en kosten.
</p>
</div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4 mb-12">
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
<div className="text-3xl font-bold text-teal-600">{completed.length}</div>
<div className="text-sm text-slate-500 mt-1">Voltooid</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12">
<div className="bg-white rounded-lg border border-slate-200 p-6 text-center shadow-sm">
<div className="text-4xl md:text-5xl font-bold text-teal-600 mb-2">{completed.length}</div>
<div className="text-sm font-medium text-slate-600">Voltooid</div>
</div>
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
<div className="text-3xl font-bold text-amber-600">{inProgress.length}</div>
<div className="text-sm text-slate-500 mt-1">In Progress</div>
<div className="bg-white rounded-lg border border-slate-200 p-6 text-center shadow-sm">
<div className="text-4xl md:text-5xl font-bold text-amber-600 mb-2">{inProgress.length}</div>
<div className="text-sm font-medium text-slate-600">In Progress</div>
</div>
<div className="bg-white rounded-lg border border-slate-200 p-4 text-center">
<div className="text-3xl font-bold text-slate-400">{planned.length}</div>
<div className="text-sm text-slate-500 mt-1">Gepland</div>
<div className="bg-white rounded-lg border border-slate-200 p-6 text-center shadow-sm">
<div className="text-4xl md:text-5xl font-bold text-slate-400 mb-2">{planned.length}</div>
<div className="text-sm font-medium text-slate-600">Gepland</div>
</div>
</div>
{/* Completed Releases */}
{completed.length > 0 && (
<section className="mb-12">
<h2 className="text-2xl font-bold text-slate-900 mb-4">
<section className="mb-10 md:mb-12">
<h2 className="text-xl md:text-2xl font-bold text-slate-900 mb-4 md:mb-6">
✅ Voltooid
</h2>
<div className="space-y-4">
@@ -65,8 +65,8 @@ export default async function ReleasesPage() {
{/* In Progress Releases */}
{inProgress.length > 0 && (
<section className="mb-12">
<h2 className="text-2xl font-bold text-slate-900 mb-4">
<section className="mb-10 md:mb-12">
<h2 className="text-xl md:text-2xl font-bold text-slate-900 mb-4 md:mb-6">
🔄 In Progress
</h2>
<div className="space-y-4">
@@ -79,8 +79,8 @@ export default async function ReleasesPage() {
{/* Planned Releases */}
{planned.length > 0 && (
<section className="mb-12">
<h2 className="text-2xl font-bold text-slate-900 mb-4">
<section className="mb-10 md:mb-12">
<h2 className="text-xl md:text-2xl font-bold text-slate-900 mb-4 md:mb-6">
⏳ Gepland
</h2>
<div className="space-y-4">
@@ -99,33 +99,33 @@ function ReleaseCard({ release }: { release: any }) {
return (
<Link
href={`/documentatie/${release.slug}`}
className="block bg-white rounded-lg border border-slate-200 p-6 hover:border-teal-300 hover:shadow-md transition-all"
className="block bg-white rounded-lg border border-slate-200 p-5 md:p-6 hover:border-teal-300 hover:shadow-md transition-all active:scale-[0.98]"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-xl font-bold text-slate-900">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
<div className="flex-1 min-w-0">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
<h3 className="text-lg md:text-xl font-bold text-slate-900 leading-tight">
{release.frontmatter.title}
</h3>
<StatusBadge status={release.frontmatter.status} />
</div>
<p className="text-slate-600 mb-3">
<p className="text-slate-600 mb-3 text-sm md:text-base leading-relaxed">
{release.frontmatter.description}
</p>
<div className="flex items-center gap-4 text-sm text-slate-500">
<div className="flex flex-wrap items-center gap-2 md:gap-4 text-xs md:text-sm text-slate-500">
<span className="capitalize">{release.frontmatter.group.replace('-', ' ')}</span>
<span>•</span>
<span className="hidden sm:inline">•</span>
<span>v{release.frontmatter.version}</span>
<span>•</span>
<span>{new Date(release.frontmatter.releaseDate).toLocaleDateString('nl-NL', {
<span className="hidden sm:inline">•</span>
<span className="whitespace-nowrap">{new Date(release.frontmatter.releaseDate).toLocaleDateString('nl-NL', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}</span>
</div>
</div>
<div className="text-slate-400">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="text-slate-400 flex-shrink-0 self-start sm:self-center">
<svg className="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>