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

feat(redesign): update UniqueValue, FAQTeaser, Hero two-tone title, and Affiliation trust cards

Browse Source
This commit is contained in:
MichalC
2026-09-03 08:21:32 +02:00
parent 465a8cb0f1
commit 5d3b528cf2
8 changed files with 75 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Affiliation/Component.tsx
+24 -17
View File
@@ -1,22 +1,24 @@
'use client'
import React from 'react'
import { motion } from 'framer-motion'
import { Landmark, Scale, ShieldCheck } from 'lucide-react'
import Link from 'next/link'
import type { Page } from '../../payload-types'
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation' }>
export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText }) => {
const iconMap = {
shield: ShieldCheck,
scale: Scale,
landmark: Landmark,
}
export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description, logo, linkText, trustPoints }) => {
return (
<section className="py-20 md:py-32 bg-background border-t border-border overflow-hidden">
<div className="container-premium">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="flex flex-col gap-16 lg:gap-24">
<div className="max-w-3xl">
{eyebrow && (
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// {eyebrow}
</div>
)}
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
{title}
</h2>
@@ -38,15 +40,20 @@ export const AffiliationBlock: React.FC<Props> = ({ eyebrow, title, description,
</div>
</div>
<div className="relative aspect-[4/3] lg:aspect-square w-full bg-card overflow-hidden">
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
<img
src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"
alt="Budynek urzędu, formalna architektura"
className="object-cover w-full h-full grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition-all duration-700"
/>
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent pointer-events-none" />
</div>
{trustPoints && trustPoints.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
{trustPoints.map((point: any, index: number) => {
const Icon = (point.icon && iconMap[point.icon as keyof typeof iconMap]) || ShieldCheck
return (
<div key={point.id || index} className="bg-card border border-border p-6 md:p-8 flex flex-col gap-4">
<Icon size={28} className="text-accent" />
<h3 className="font-heading text-xl font-bold text-foreground">{point.title}</h3>
<p className="text-sm text-foreground/70 leading-relaxed">{point.description}</p>
</div>
)
})}
</div>
)}
</div>
</div>
</section>
src/blocks/Affiliation/config.ts
+18
View File
@@ -7,6 +7,24 @@ export const Affiliation: Block = {
{ name: 'title', type: 'text', required: true, localized: true },
{ name: 'description', type: 'textarea', required: true, localized: true },
{ name: 'logo', type: 'upload', relationTo: 'media' },
{
name: 'trustPoints',
type: 'array',
localized: true,
minRows: 1,
maxRows: 3,
fields: [
{
name: 'icon',
type: 'select',
required: true,
options: ['shield', 'scale', 'landmark'],
defaultValue: 'shield',
},
{ name: 'title', type: 'text', required: true, defaultValue: 'Punkt zaufania' },
{ name: 'description', type: 'textarea', required: true, defaultValue: 'Certyfikacja i uprawnienia potwierdzone urzędowo.' },
],
},
{ name: 'linkText', type: 'text', localized: true },
],
}
src/blocks/FAQTeaser/Component.tsx
+2 -6
View File
@@ -1,6 +1,6 @@
'use client'
import React from 'react'
import { motion } from 'framer-motion'
import Link from 'next/link'
import type { Page } from '../../payload-types'
@@ -11,11 +11,7 @@ export const FAQTeaserBlock: React.FC<Props> = ({ eyebrow, title, questions, lin
<section className="py-20 md:py-32 bg-card/40 border-t border-border">
<div className="container-premium">
<div className="max-w-3xl mb-16 md:mb-24">
{eyebrow && (
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// {eyebrow}
</div>
)}
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight text-balance">
{title}
</h2>
src/blocks/Hero/Component.tsx
+4 -3
View File
@@ -6,7 +6,7 @@ import Image from 'next/image'
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, image }) => {
export const HeroBlock: React.FC<Props> = ({ title, titleAccent, subtitle, primaryCta, secondaryCta, image }) => {
// Sprawdzamy czy obrazek jest obiektem Media czy tylko ID
const heroMedia = typeof image === 'object' && image !== null ? (image as Media) : null;
// PLACEHOLDER - do podmiany na zdjęcie klienta jeśli brak w CMS
@@ -19,8 +19,9 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
<div className="flex flex-col-reverse md:flex-row items-center justify-between gap-12 lg:gap-24">
<div className="w-full md:w-1/2 max-w-xl flex flex-col">
<h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05] text-foreground mb-8 text-balance">
{title}
<h1 className="font-heading text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05] mb-8 text-balance">
<span className="block text-foreground">{title}</span>
{titleAccent && <span className="block text-accent">{titleAccent}</span>}
</h1>
<p className="text-xl sm:text-2xl text-foreground/80 mb-12 leading-relaxed font-light">
src/blocks/Hero/config.ts
+2 -1
View File
@@ -3,7 +3,8 @@ import type { Block } from 'payload'
export const Hero: Block = {
slug: 'hero',
fields: [
{ name: 'title', type: 'text', required: true, localized: true },
{ name: 'title', type: 'text', required: true, localized: true, defaultValue: 'Tytuł strony głównej' },
{ name: 'titleAccent', type: 'text', required: true, localized: true, defaultValue: '— do uzupełnienia' },
{ name: 'subtitle', type: 'text', required: true, localized: true },
{ name: 'primaryCta', type: 'text', required: true, localized: true },
{
src/blocks/UniqueValue/Component.tsx
+4 -8
View File
@@ -6,7 +6,7 @@ import { CheckCircle } from 'lucide-react'
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'uniqueValue' }>
export const UniqueValueBlock: React.FC<Props> = ({ eyebrow, features, title, description }) => {
export const UniqueValueBlock: React.FC<Props> = ({ eyebrow, features, title, description, image }) => {
return (
<section className="py-20 md:py-32 bg-card/60 border-y border-border">
<div className="container-premium">
@@ -16,8 +16,8 @@ export const UniqueValueBlock: React.FC<Props> = ({ eyebrow, features, title, de
<div className="relative aspect-[4/5] overflow-hidden border border-border">
{/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
<Image
src="https://images.unsplash.com/photo-1450133064473-71024230f91b?auto=format&fit=crop&w=1000&q=80"
alt="Dokumenty i profesjonalne doradztwo podatkowe"
src={image && typeof image === 'object' && image.url ? image.url : "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1000&q=80"}
alt={(image && typeof image === 'object' && image.alt) || "Dokumenty i profesjonalne doradztwo podatkowe"}
fill
sizes="(max-width: 1024px) 100vw, 40vw"
className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
@@ -27,11 +27,7 @@ export const UniqueValueBlock: React.FC<Props> = ({ eyebrow, features, title, de
{/* Kolumna tekstowa */}
<div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start max-w-3xl">
{eyebrow && (
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
// {eyebrow}
</div>
)}
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
{title}
src/blocks/UniqueValue/config.ts
+1
View File
@@ -6,6 +6,7 @@ export const UniqueValue: Block = {
{ name: 'eyebrow', type: 'text', localized: true },
{ name: 'title', type: 'text', required: true, localized: true },
{ name: 'description', type: 'textarea', required: true, localized: true },
{ name: 'image', type: 'upload', relationTo: 'media', required: true },
{
name: 'features',
type: 'array',
src/payload-types.ts
+20
View File
@@ -255,6 +255,7 @@ export interface Page {
}
| {
title: string;
titleAccent: string;
subtitle: string;
primaryCta: string;
secondaryCta?: {
@@ -295,6 +296,7 @@ export interface Page {
eyebrow?: string | null;
title: string;
description: string;
image: number | Media;
features?:
| {
text: string;
@@ -342,6 +344,14 @@ export interface Page {
title: string;
description: string;
logo?: (number | null) | Media;
trustPoints?:
| {
icon: 'shield' | 'scale' | 'landmark';
title: string;
description: string;
id?: string | null;
}[]
| null;
linkText?: string | null;
id?: string | null;
blockName?: string | null;
@@ -617,6 +627,7 @@ export interface PagesSelect<T extends boolean = true> {
| T
| {
title?: T;
titleAccent?: T;
subtitle?: T;
primaryCta?: T;
secondaryCta?:
@@ -664,6 +675,7 @@ export interface PagesSelect<T extends boolean = true> {
eyebrow?: T;
title?: T;
description?: T;
image?: T;
features?:
| T
| {
@@ -714,6 +726,14 @@ export interface PagesSelect<T extends boolean = true> {
title?: T;
description?: T;
logo?: T;
trustPoints?:
| T
| {
icon?: T;
title?: T;
description?: T;
id?: T;
};
linkText?: T;
id?: T;
blockName?: T;