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

fix(kompetenzen): revert ServiceDetailGrid to original light theme for UI consistency

Browse Source 
Former-commit-id: 0ad718d43eaffa63bb9d1c2ddf698e94248a6764
This commit is contained in:
Marc Mintel
2026-05-07 15:07:45 +02:00
parent 5601bbfac0
commit 8cd9dd94fa
3033 changed files with 103 additions and 914674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/blocks/ServiceDetailGrid.tsx
View File

@@ -95,28 +95,25 @@ export function ServiceDetailGrid({
panels
}: ServiceDetailGridProps) {
return (
<section className="bg-neutral-dark py-24 border-b border-neutral-800 text-white relative overflow-hidden">
{/* Premium Background Ambience */}
<div className="absolute top-0 left-0 w-full h-[500px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-neutral-dark to-neutral-dark pointer-events-none" />
<section className="bg-neutral-50 py-24 border-b border-neutral-100 relative overflow-hidden">
<div className="container relative z-10 px-4">
<div className="container relative z-10 px-4 max-w-7xl mx-auto">
<div className="max-w-3xl mx-auto text-center mb-20">
{badge && <h2 className="text-primary-light font-bold tracking-wider uppercase text-sm mb-4">{badge}</h2>}
{badge && <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-4">{badge}</h2>}
{title && (
<h3 className="font-heading text-4xl md:text-5xl font-extrabold text-white mb-6">
<h3 className="font-heading text-3xl md:text-5xl font-extrabold text-neutral-dark mb-6">
{title}
</h3>
)}
<div className="w-20 h-1 bg-primary mx-auto mb-8 shadow-[0_0_15px_rgba(17,124,97,0.5)]"></div>
<div className="w-20 h-2 bg-primary mx-auto mb-8"></div>
<div className="space-y-6 text-white/70 text-lg leading-relaxed">
<div className="space-y-6 text-text-secondary text-lg leading-relaxed">
{descriptionParagraphs?.map((p, i) => {
// Quick parse for basic bolding
const parts = p.split('**');
if (parts.length > 1) {
return (
<p key={i}>
{parts.map((part, j) => j % 2 === 1 ? <strong key={j} className="text-white font-bold">{part}</strong> : part)}
{parts.map((part, j) => j % 2 === 1 ? <strong key={j} className="text-neutral-dark font-bold">{part}</strong> : part)}
</p>
);
}
@@ -126,7 +123,7 @@ export function ServiceDetailGrid({
</div>
<motion.div
className="grid grid-cols-1 md:grid-cols-2 gap-6"
className="grid grid-cols-1 md:grid-cols-2 gap-8"
variants={containerVariants}
initial="hidden"
whileInView="visible"
@@ -139,28 +136,26 @@ export function ServiceDetailGrid({
<motion.div
key={panel.id}
variants={itemVariants}
className={`group relative overflow-hidden bg-[#0f1d2b] border border-white/10 rounded-2xl p-8 md:p-12 transition-all duration-500 hover:border-primary/50 hover:bg-[#132333] hover:shadow-2xl select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
className={`group relative overflow-hidden bg-white border border-neutral-200 p-8 md:p-12 transition-all duration-500 hover:border-primary/50 hover:shadow-xl hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
>
<HoverShineOverlay shineColor="via-white/10" />
{/* Subtle primary glow behind the card on hover */}
<div className="absolute inset-0 bg-primary/0 group-hover:bg-primary/5 transition-colors duration-500 z-0 pointer-events-none" />
{/* On a white card, a very subtle primary/grey shine works best */}
<HoverShineOverlay shineColor="via-primary/5" />
<div className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-10 gap-6">
<div>
<h4 className="text-2xl font-extrabold text-white uppercase tracking-wider">{panel.title}</h4>
<div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-full group-hover:shadow-[0_0_10px_rgba(17,124,97,0.8)]"></div>
<h4 className="text-2xl font-extrabold text-neutral-dark uppercase tracking-wider">{panel.title}</h4>
<div className="h-0.5 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-full"></div>
</div>
<div className={`text-primary shrink-0 transition-all duration-700 group-hover:scale-110 opacity-70 group-hover:opacity-100 ${isFullWidth ? 'w-32 h-16' : 'w-16 h-16'}`}>
<div className={`text-primary shrink-0 transition-transform duration-700 group-hover:scale-110 opacity-90 group-hover:opacity-100 ${isFullWidth ? 'w-32 h-16' : 'w-16 h-16'}`}>
{Icons[panel.icon]}
</div>
</div>
<div className={`relative z-10 grid gap-y-4 gap-x-12 ${isFullWidth ? 'md:grid-cols-2' : 'grid-cols-1'}`}>
{panel.lists.map((list, listIdx) => (
<ul key={listIdx} className="space-y-0 text-white/70">
<ul key={listIdx} className="space-y-0 text-text-secondary">
{list.map((item, itemIdx) => (
<li key={itemIdx} className="flex items-start border-b border-white/5 py-4 last:border-b-0">
<li key={itemIdx} className="flex items-start border-b border-neutral-100 py-4 last:border-b-0">
<span className="text-primary mr-4 text-[10px] mt-2 opacity-80 group-hover:animate-pulse">■</span>
<span className="leading-snug">{item}</span>
</li>