michal.cukrowski/j_kedzierski
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(services): make detailed service cards clickable links to contact page with hover effects

Browse Source
This commit is contained in:
MichalC
2026-09-17 23:47:24 +02:00
parent b281c5ffd1
commit 3004247ceb
12 changed files with 40 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/ServicesDetailed/Component.tsx
+40 -26
View File
@@ -1,6 +1,8 @@
'use client'
import React from 'react'
import { motion } from 'framer-motion'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import {
FileText,
Calculator,
@@ -10,6 +12,7 @@ import {
Users,
Coins,
LucideIcon,
ArrowRight,
} from 'lucide-react'
import type { Page } from '../../payload-types'
@@ -31,7 +34,10 @@ export const ServicesDetailedBlock: React.FC<Props> = ({
services,
}) => {
const serviceList = services || []
const hasBento = serviceList.length >= 3
const pathname = usePathname()
const isDe = pathname?.split('/').filter(Boolean)[0] === 'de'
const contactHref = isDe ? '/de/kontakt' : '/kontakt'
const contactText = isDe ? 'Kontakt aufnehmen' : 'Skontaktuj się'
return (
<section className="py-16 md:py-24 bg-background text-foreground">
@@ -73,35 +79,43 @@ export const ServicesDetailedBlock: React.FC<Props> = ({
transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] }
}
}}
className={`${isFirst ? 'md:col-span-2' : 'md:col-span-1'}
bg-card border border-border p-6 md:p-8 flex flex-col relative overflow-hidden group hover:border-border/80 transition-colors
`}
className={`${isFirst ? 'md:col-span-2' : 'md:col-span-1'} flex flex-col`}
>
{/* Górny cienki akcent (line-draw przy wejściu) */}
<motion.div
variants={{
hidden: { scaleX: 0 },
visible: {
scaleX: 1,
transition: { delay: 0.2 + (index * 0.08), duration: 0.7, ease: "easeOut" }
}
}}
style={{ originX: 0 }}
className="absolute top-0 left-0 w-full h-[2px] bg-accent"
/>
<Link
href={contactHref}
className="block bg-card border border-border p-6 md:p-8 flex flex-col relative overflow-hidden group hover:border-accent/40 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 h-full focus:outline-none focus:ring-2 focus:ring-accent"
>
{/* Górny cienki akcent (line-draw przy wejściu) */}
<motion.div
variants={{
hidden: { scaleX: 0 },
visible: {
scaleX: 1,
transition: { delay: 0.2 + (index * 0.08), duration: 0.7, ease: "easeOut" }
}
}}
style={{ originX: 0 }}
className="absolute top-0 left-0 w-full h-[2px] bg-accent"
/>
<div className={`flex ${isFirst ? 'flex-row items-center gap-4 mb-4' : 'flex-row items-center gap-3 mb-3'}`}>
<div className="text-accent shrink-0">
<Icon size={isFirst ? 28 : 20} strokeWidth={2.5} />
<div className={`flex ${isFirst ? 'flex-row items-center gap-4 mb-4' : 'flex-row items-center gap-3 mb-3'}`}>
<div className="text-accent shrink-0">
<Icon size={isFirst ? 28 : 20} strokeWidth={2.5} />
</div>
<h3 className={`font-heading font-bold text-foreground leading-tight ${isFirst ? 'text-2xl sm:text-3xl' : 'text-xl sm:text-2xl'} group-hover:text-accent transition-colors`}>
{service.title}
</h3>
</div>
<h3 className={`font-heading font-bold text-foreground leading-tight ${isFirst ? 'text-2xl sm:text-3xl' : 'text-xl sm:text-2xl'}`}>
{service.title}
</h3>
</div>
<p className={`text-foreground/75 leading-relaxed ${isFirst ? 'text-base sm:text-lg max-w-[70ch]' : 'text-sm sm:text-base mt-2 max-w-[70ch]'}`}>
{service.description}
</p>
<p className={`text-foreground/75 leading-relaxed flex-grow ${isFirst ? 'text-base sm:text-lg max-w-[70ch] mb-6' : 'text-sm sm:text-base mt-2 max-w-[70ch] mb-6'}`}>
{service.description}
</p>
<div className="mt-auto flex items-center text-xs font-bold text-foreground/40 group-hover:text-accent transition-colors uppercase tracking-wider">
<span>{contactText}</span>
<ArrowRight className="w-4 h-4 ml-1.5 transform group-hover:translate-x-1 transition-transform" />
</div>
</Link>
</motion.div>
)
})}