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

feat: radical premium redesign removing AI slop (full bleed hero, open layouts, editorial typography)

Browse Source
This commit is contained in:
MichalC
2026-09-01 23:33:43 +02:00
parent 441ae8f272
commit afc27b0183
5 changed files with 180 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/ServicesList/Component.tsx
+33 -28
View File
@@ -1,44 +1,49 @@
'use client'
import React from 'react'
import { motion } from 'framer-motion'
import { ArrowRight } from 'lucide-react'
import Link from 'next/link'
import type { Page } from '../../payload-types'
import { ArrowRight } from 'lucide-react'
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList' }>
export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
return (
<section className="py-24 bg-background">
<div className="container mx-auto px-4">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-3xl md:text-5xl font-bold text-foreground mb-16 text-center"
>
{title}
</motion.h2>
<section className="py-20 md:py-32 bg-background text-foreground">
<div className="container-premium">
<div className="mb-16 md:mb-24">
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
{title}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="border-t border-border">
{services?.map((service: NonNullable<Props['services']>[0], index: number) => (
<motion.div
<div
key={service.id || index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="group"
className="group border-b border-border py-8 md:py-12 flex flex-col md:flex-row gap-6 md:gap-12 lg:gap-24 items-start md:items-center hover:bg-foreground/[0.02] transition-colors"
>
<Link href="/uslugi" className="block h-full p-8 rounded-2xl bg-card border border-border transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:bg-background">
<h3 className="text-xl font-bold text-foreground mb-4">{service.title}</h3>
<p className="text-foreground/80 mb-8">{service.description}</p>
<div className="flex items-center text-accent font-semibold group-hover:text-accent-hover mt-auto">
{service.linkText}
<ArrowRight size={20} className="ml-2 transition-transform group-hover:translate-x-1" />
</div>
</Link>
</motion.div>
<div className="md:w-1/3 shrink-0">
<h3 className="font-heading text-2xl md:text-3xl font-bold text-foreground group-hover:text-accent transition-colors">
{service.title}
</h3>
</div>
<div className="md:w-7/12 flex-grow">
<p className="text-foreground/75 text-lg md:text-xl font-light leading-relaxed">
{service.description}
</p>
</div>
<div className="md:w-1/12 flex justify-end shrink-0">
<Link
href="/uslugi"
className="flex items-center gap-3 text-foreground font-semibold hover:text-accent transition-colors"
>
<span className="md:hidden">{service.linkText}</span>
<div className="w-12 h-12 rounded-full border border-border flex items-center justify-center group-hover:border-accent group-hover:bg-accent/5 transition-all">
<ArrowRight className="w-5 h-5 group-hover:translate-x-0.5 transition-transform" />
</div>
</Link>
</div>
</div>
))}
</div>
</div>