0770ff499b
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 39s
CI / test-python-voice (push) Successful in 37s
CI / test-bqas (push) Successful in 37s
Neue statische Website fuer Kinder (6-12 Jahre) mit 8 Holzprojekten, SVG-Illustrationen, Sicherheitshinweisen und kindgerechtem Design. Next.js 15 + Tailwind + Framer Motion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { motion } from 'framer-motion'
|
|
import { Clock } from 'lucide-react'
|
|
import { Project } from '@/lib/types'
|
|
import { DifficultyBadge } from './DifficultyBadge'
|
|
import { AgeBadge } from './AgeBadge'
|
|
import { ProjectIllustration } from './ProjectIllustration'
|
|
|
|
export function ProjectCard({ project }: { project: Project }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
whileHover={{ y: -4 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<Link href={`/projekte/${project.slug}`} className="block">
|
|
<div className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden border border-primary/5">
|
|
<div className="bg-cream p-6 flex items-center justify-center h-44">
|
|
<ProjectIllustration slug={project.slug} size={120} />
|
|
</div>
|
|
<div className="p-5">
|
|
<h3 className="font-heading font-bold text-lg mb-2">{project.name}</h3>
|
|
<p className="text-sm text-dark/60 mb-3 line-clamp-2">{project.description}</p>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<AgeBadge range={project.ageRange} />
|
|
<DifficultyBadge level={project.difficulty} />
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-dark/40">
|
|
<Clock className="w-3.5 h-3.5" />
|
|
{project.duration}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
)
|
|
}
|