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

style(kompetenzen): elevate service cards with premium industrial aesthetics and interactive lists

Browse Source 
Former-commit-id: f0706cbfecd2c7a5f4ba611b0fb8b7779091e6f0
This commit is contained in:
Marc Mintel
2026-05-07 15:37:19 +02:00
parent 6e451e83f0
commit f308445f2e
118 changed files with 215 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/blocks/ServiceDetailGrid.tsx
View File

@@ -175,35 +175,50 @@ export function ServiceDetailGrid({
whileInView="visible"
viewport={{ once: true, margin: "-50px" }}
>
{panels.map((panel) => {
{panels.map((panel, idx) => {
const isFullWidth = panel.fullWidth;
const number = String(idx + 1).padStart(2, '0');
return (
<motion.div
key={panel.id}
variants={itemVariants}
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' : ''}`}
className={`group relative overflow-hidden bg-white border border-neutral-200 rounded-3xl p-8 md:p-12 transition-all duration-500 hover:border-primary/40 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1 select-none ${isFullWidth ? 'md:col-span-2' : ''}`}
>
{/* Premium Watermark Number */}
<div className="absolute -right-8 -bottom-12 text-[12rem] font-heading font-black text-neutral-50 z-0 pointer-events-none select-none transition-all duration-700 group-hover:scale-105 group-hover:-translate-y-4 group-hover:text-primary/[0.03]">
{number}
</div>
{/* 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-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 className="relative z-10 flex flex-col md:flex-row justify-between items-start mb-12 gap-6">
<div className="pt-2">
<h4 className="text-2xl md:text-3xl font-extrabold text-neutral-dark uppercase tracking-wider">{panel.title}</h4>
<div className="h-1 w-12 bg-primary mt-6 transition-all duration-700 group-hover:w-24 rounded-full"></div>
</div>
<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]}
{/* Glossy Icon Container */}
<div className="relative shrink-0">
<div className="absolute inset-0 bg-primary/20 rounded-2xl blur-xl transition-all duration-500 group-hover:bg-primary/30 group-hover:blur-2xl" />
<div className={`relative flex items-center justify-center bg-white border border-primary/10 rounded-2xl shadow-sm text-primary transition-transform duration-700 group-hover:scale-110 group-hover:-rotate-3 ${isFullWidth ? 'w-32 h-20 p-4' : 'w-20 h-20 p-4'}`}>
{Icons[panel.icon]}
</div>
</div>
</div>
<div className={`relative z-10 grid gap-y-4 gap-x-12 ${isFullWidth ? 'md:grid-cols-2' : 'grid-cols-1'}`}>
<div className={`relative z-10 grid gap-y-2 gap-x-12 ${isFullWidth ? 'md:grid-cols-2' : 'grid-cols-1'}`}>
{panel.lists.map((list, listIdx) => (
<ul key={listIdx} className="space-y-0 text-text-secondary">
<ul key={listIdx} className="space-y-1">
{list.map((item, itemIdx) => (
<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 key={itemIdx} className="group/item flex items-start py-3 -mx-4 px-4 rounded-xl hover:bg-neutral-50/80 transition-colors">
<span className="text-primary mr-4 mt-1 opacity-80 group-hover/item:translate-x-1 transition-transform">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</span>
<span className="leading-snug text-text-secondary group-hover/item:text-neutral-900 transition-colors font-medium">{item}</span>
</li>
))}
</ul>