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

style: standardize alignment/spacing and add rich imagery to blocks

Browse Source
This commit is contained in:
MichalC
2026-09-01 23:44:10 +02:00
parent 19caeca637
commit d2592ffeca
9 changed files with 140 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Testimonials/Component.tsx
+26 -12
View File
@@ -20,37 +20,51 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
if (!testimonials || testimonials.length === 0) return null
return (
<section className="py-24 md:py-40 bg-background border-y border-border overflow-hidden">
<div className="container-premium max-w-4xl mx-auto text-center relative">
<h2 className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-12">
// {title}
</h2>
<section className="relative py-24 md:py-40 bg-background border-y border-border overflow-hidden">
{/* Background Image */}
<div className="absolute inset-0 z-0">
<img
src="https://images.unsplash.com/photo-1577415124269-fc1140a69e91?auto=format&fit=crop&w=2000&q=80"
alt="Biuro, abstrakcyjne tło"
className="object-cover w-full h-full grayscale opacity-20"
/>
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/40" />
</div>
<div className="container-premium relative z-10">
<div className="max-w-3xl mb-16 md:mb-24">
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// {title}
</div>
</div>
<div className="relative min-h-[300px] sm:min-h-[240px] flex items-center justify-center">
<div className="relative min-h-[300px] sm:min-h-[240px]">
{testimonials.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
<div
key={t.id || index}
className={`absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-1000 ease-in-out ${
className={`absolute inset-0 flex flex-col items-start justify-start transition-opacity duration-1000 ease-in-out ${
index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
}`}
>
<p className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight">
"{t.quote}"
<div className="font-heading text-8xl md:text-9xl text-accent/20 leading-none absolute -top-12 -left-6 md:-top-16 md:-left-10 select-none">
"
</div>
<p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
{t.quote}
</p>
<div className="flex items-center gap-4">
<div className="w-12 h-px bg-accent/40" />
<div className="w-12 h-px bg-accent/60" />
<p className="font-heading font-bold text-lg sm:text-xl text-foreground/80 uppercase tracking-wide">
{t.author}
</p>
<div className="w-12 h-px bg-accent/40" />
</div>
</div>
))}
</div>
{testimonials.length > 1 && (
<div className="flex items-center justify-center gap-3 mt-12">
<div className="flex items-center gap-3 mt-16 md:mt-24">
{testimonials.map((_, index) => (
<button
key={index}