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>
133 lines
6.7 KiB
TypeScript
133 lines
6.7 KiB
TypeScript
'use client'
|
|
|
|
export function ProjectIllustration({ slug, size = 100 }: { slug: string; size?: number }) {
|
|
const illustrations: Record<string, React.ReactNode> = {
|
|
zauberstab: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
<rect x="20" y="80" width="60" height="4" rx="2" fill="#D4915C" transform="rotate(-45 50 50)" />
|
|
<circle cx="28" cy="28" r="4" fill="#F5A623" opacity="0.6" />
|
|
<circle cx="22" cy="35" r="2.5" fill="#FFC107" opacity="0.5" />
|
|
<circle cx="35" cy="22" r="2" fill="#FFC107" opacity="0.4" />
|
|
<path d="M25 25 L20 18 M25 25 L32 20 M25 25 L22 32" stroke="#F5A623" strokeWidth="1.5" strokeLinecap="round" />
|
|
<circle cx="26" cy="26" r="6" fill="none" stroke="#F5A623" strokeWidth="0.5" opacity="0.3" />
|
|
</svg>
|
|
),
|
|
untersetzer: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
<ellipse cx="50" cy="55" rx="32" ry="8" fill="#C4814C" />
|
|
<ellipse cx="50" cy="50" rx="32" ry="8" fill="#E8A96C" />
|
|
<ellipse cx="50" cy="50" rx="22" ry="5" fill="none" stroke="#D4915C" strokeWidth="0.8" />
|
|
<ellipse cx="50" cy="50" rx="12" ry="2.8" fill="none" stroke="#D4915C" strokeWidth="0.6" />
|
|
<circle cx="42" cy="48" r="3" fill="#FF6B6B" opacity="0.5" />
|
|
<circle cx="55" cy="46" r="2" fill="#4CAF50" opacity="0.5" />
|
|
<circle cx="48" cy="53" r="2.5" fill="#2196F3" opacity="0.4" />
|
|
</svg>
|
|
),
|
|
nagelbilder: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
<rect x="20" y="20" width="60" height="60" rx="4" fill="#E8A96C" />
|
|
{/* Nails forming a star */}
|
|
<circle cx="50" cy="30" r="2" fill="#888" />
|
|
<circle cx="35" cy="45" r="2" fill="#888" />
|
|
<circle cx="65" cy="45" r="2" fill="#888" />
|
|
<circle cx="40" cy="65" r="2" fill="#888" />
|
|
<circle cx="60" cy="65" r="2" fill="#888" />
|
|
{/* String */}
|
|
<path d="M50 30 L35 45 L60 65 L40 65 L65 45 Z" stroke="#FF6B6B" strokeWidth="1.5" fill="none" />
|
|
<path d="M50 30 L40 65 M50 30 L60 65 M35 45 L65 45" stroke="#4CAF50" strokeWidth="1" fill="none" opacity="0.6" />
|
|
</svg>
|
|
),
|
|
bleistiftbox: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
<path d="M25 75 L25 35 L75 35 L75 75 Z" fill="#E8A96C" />
|
|
<path d="M25 35 L30 30 L80 30 L75 35 Z" fill="#D4915C" />
|
|
<path d="M75 35 L80 30 L80 70 L75 75 Z" fill="#C4814C" />
|
|
{/* Pencils */}
|
|
<rect x="35" y="20" width="4" height="30" rx="1" fill="#FFC107" />
|
|
<polygon points="35,50 39,50 37,55" fill="#2C2C2C" />
|
|
<rect x="45" y="15" width="4" height="32" rx="1" fill="#2196F3" />
|
|
<polygon points="45,47 49,47 47,52" fill="#2C2C2C" />
|
|
<rect x="55" y="22" width="4" height="28" rx="1" fill="#FF6B6B" />
|
|
<polygon points="55,50 59,50 57,55" fill="#2C2C2C" />
|
|
</svg>
|
|
),
|
|
segelboot: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
<path d="M20 65 Q50 55 80 65 Q50 72 20 65Z" fill="#E8A96C" />
|
|
<line x1="50" y1="25" x2="50" y2="62" stroke="#8B6F47" strokeWidth="2.5" />
|
|
<path d="M50 25 L70 50 L50 58Z" fill="white" stroke="#ddd" strokeWidth="0.5" />
|
|
<path d="M50 30 L38 52 L50 58Z" fill="#FF6B6B" opacity="0.8" />
|
|
{/* Water */}
|
|
<path d="M10 72 Q25 68 40 72 Q55 76 70 72 Q85 68 100 72" stroke="#2196F3" strokeWidth="1.5" fill="none" opacity="0.4" />
|
|
<path d="M5 78 Q20 74 35 78 Q50 82 65 78 Q80 74 95 78" stroke="#2196F3" strokeWidth="1" fill="none" opacity="0.3" />
|
|
</svg>
|
|
),
|
|
vogelhaus: (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
{/* Roof */}
|
|
<path d="M25 45 L50 25 L75 45 Z" fill="#C4814C" />
|
|
{/* Body */}
|
|
<rect x="30" y="45" width="40" height="35" fill="#E8A96C" />
|
|
{/* Entrance hole */}
|
|
<circle cx="50" cy="58" r="6" fill="#5D4037" />
|
|
{/* Perch */}
|
|
<rect x="47" y="65" width="6" height="2" rx="1" fill="#8B6F47" />
|
|
<rect x="48" y="67" width="4" height="6" rx="1" fill="#8B6F47" />
|
|
{/* Post */}
|
|
<rect x="46" y="80" width="8" height="15" rx="1" fill="#8B6F47" />
|
|
{/* Bird */}
|
|
<ellipse cx="68" cy="40" rx="5" ry="4" fill="#FF6B6B" />
|
|
<circle cx="71" cy="38" r="1.5" fill="#2C2C2C" />
|
|
<path d="M73 39 L77 38.5" stroke="#F5A623" strokeWidth="1.5" strokeLinecap="round" />
|
|
</svg>
|
|
),
|
|
'holztier-igel': (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
{/* Body */}
|
|
<ellipse cx="50" cy="60" rx="25" ry="18" fill="#C4814C" />
|
|
{/* Head */}
|
|
<ellipse cx="28" cy="58" rx="10" ry="9" fill="#D4915C" />
|
|
{/* Nose */}
|
|
<circle cx="20" cy="57" r="2" fill="#2C2C2C" />
|
|
{/* Eye */}
|
|
<circle cx="25" cy="54" r="1.5" fill="#2C2C2C" />
|
|
<circle cx="25.5" cy="53.5" r="0.5" fill="white" />
|
|
{/* Spines */}
|
|
{[0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150].map((angle, i) => {
|
|
const rad = (angle - 30) * Math.PI / 180
|
|
const x1 = 55 + Math.cos(rad) * 20
|
|
const y1 = 52 + Math.sin(rad) * 14
|
|
const x2 = 55 + Math.cos(rad) * 30
|
|
const y2 = 52 + Math.sin(rad) * 22
|
|
return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#8B6F47" strokeWidth="2" strokeLinecap="round" />
|
|
})}
|
|
{/* Feet */}
|
|
<ellipse cx="35" cy="75" rx="4" ry="2" fill="#D4915C" />
|
|
<ellipse cx="60" cy="75" rx="4" ry="2" fill="#D4915C" />
|
|
</svg>
|
|
),
|
|
'schnitzfigur-pilz': (
|
|
<svg width={size} height={size} viewBox="0 0 100 100" fill="none">
|
|
{/* Stem */}
|
|
<path d="M40 55 Q38 75 42 85 L58 85 Q62 75 60 55 Z" fill="#F5F5DC" />
|
|
<ellipse cx="50" cy="85" rx="10" ry="3" fill="#E8E0C8" />
|
|
{/* Cap */}
|
|
<ellipse cx="50" cy="48" rx="28" ry="18" fill="#D32F2F" />
|
|
<ellipse cx="50" cy="55" rx="22" ry="5" fill="#E8A96C" />
|
|
{/* White dots */}
|
|
<circle cx="38" cy="40" r="3" fill="white" opacity="0.9" />
|
|
<circle cx="55" cy="35" r="2.5" fill="white" opacity="0.9" />
|
|
<circle cx="48" cy="45" r="2" fill="white" opacity="0.8" />
|
|
<circle cx="62" cy="42" r="2.5" fill="white" opacity="0.85" />
|
|
<circle cx="42" cy="50" r="1.8" fill="white" opacity="0.7" />
|
|
{/* Grass */}
|
|
<path d="M30 85 Q32 78 34 85" stroke="#4CAF50" strokeWidth="1.5" fill="none" />
|
|
<path d="M65 85 Q67 79 69 85" stroke="#4CAF50" strokeWidth="1.5" fill="none" />
|
|
<path d="M72 85 Q73 80 75 85" stroke="#4CAF50" strokeWidth="1" fill="none" opacity="0.6" />
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
return <>{illustrations[slug] || illustrations.zauberstab}</>
|
|
}
|