mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat(kompetenzen): enhance content presentation with split Problem/Solution UI layout

Browse Source 
Former-commit-id: 413bd4371b72883ddb35a2bd3d1c27700a437fde
This commit is contained in:
Marc Mintel
2026-05-07 15:30:45 +02:00
parent 8cd9dd94fa
commit 6e451e83f0
3035 changed files with 914723 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/blocks/ServiceDetailGrid.tsx
View File

@@ -16,6 +16,14 @@ interface ServiceDetailGridProps {
badge?: string;
title?: string;
descriptionParagraphs?: string[];
problemStatement?: {
title: string;
text: string;
};
solutionStatement?: {
title: string;
text: string;
};
panels: ServicePanelData[];
}
@@ -92,6 +100,8 @@ export function ServiceDetailGrid({
badge,
title,
descriptionParagraphs,
problemStatement,
solutionStatement,
panels
}: ServiceDetailGridProps) {
return (
@@ -122,6 +132,42 @@ export function ServiceDetailGrid({
</div>
</div>
{(problemStatement || solutionStatement) && (
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
className="max-w-4xl mx-auto mb-20 grid md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 text-left"
>
{problemStatement && (
<div className="p-8 md:p-12 border-b md:border-b-0 md:border-r border-neutral-100 bg-red-50/50">
<div className="flex items-center mb-6 text-red-600">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<h4 className="font-bold text-xl">{problemStatement.title}</h4>
</div>
<p className="text-text-secondary leading-relaxed">{problemStatement.text}</p>
</div>
)}
{solutionStatement && (
<div className="p-8 md:p-12 bg-primary/5">
<div className="flex items-center mb-6 text-primary">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-3">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<h4 className="font-bold text-xl">{solutionStatement.title}</h4>
</div>
<p className="text-text-secondary leading-relaxed">{solutionStatement.text}</p>
</div>
)}
</motion.div>
)}
<motion.div
className="grid grid-cols-1 md:grid-cols-2 gap-8"
variants={containerVariants}