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

feat: add Unsplash photo placeholders, remove AI glow effects, and enable browser language detection

Browse Source
This commit is contained in:
MichalC
2026-09-01 23:04:55 +02:00
parent 1a968b1d1f
commit 1f0b9ea0fb
6 changed files with 176 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Testimonials/Component.tsx
+52 -26
View File
@@ -1,39 +1,65 @@
'use client'
import React from 'react'
import { motion } from 'framer-motion'
import { Quote } from 'lucide-react'
import Image from 'next/image'
import type { Page } from '../../payload-types'
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */
const avatarPlaceholders = [
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80',
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80',
'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80',
]
export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
return (
<section className="py-24 bg-background">
<div className="container mx-auto px-4 max-w-6xl">
<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-16 md:py-24 bg-background">
<div className="container-premium">
<div className="max-w-2xl mb-12 text-center md:text-left">
<h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight">
{title}
</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{testimonials?.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
<motion.div
key={t.id || index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="bg-card p-8 rounded-2xl relative"
>
<Quote className="absolute top-6 right-6 text-border" size={40} />
<p className="text-foreground/80 italic mb-6 relative z-10">"{t.quote}"</p>
<div className="font-semibold text-foreground">— {t.author}</div>
</motion.div>
))}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
{testimonials?.map((t: NonNullable<Props['testimonials']>[0], index: number) => {
const avatarUrl = avatarPlaceholders[index % avatarPlaceholders.length]
return (
<div
key={t.id || index}
className="bg-card border border-border p-6 sm:p-8 rounded-2xl shadow-sm flex flex-col justify-between"
>
<div>
<Quote className="text-accent/30 mb-4" size={32} />
<p className="text-foreground/80 leading-relaxed text-sm sm:text-base mb-6">
"{t.quote}"
</p>
</div>
<div className="flex items-center gap-3.5 pt-4 border-t border-border/50">
<div className="relative w-11 h-11 rounded-full overflow-hidden border border-border shrink-0 bg-muted">
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
<Image
src={avatarUrl}
alt={t.author || "Klient"}
fill
sizes="44px"
className="object-cover"
/>
</div>
<div>
<p className="font-heading font-bold text-sm sm:text-base text-foreground">
{t.author}
</p>
<p className="text-xs text-foreground/50">Klient zweryfikowany</p>
</div>
</div>
</div>
)
})}
</div>
</div>
</section>