radoslaw.smolinski/poi-preview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: eliminate all hardcoded strings in TSX components, enforce project rules in AGENTS.md, lock body scroll in cookie modal

Browse Source
This commit is contained in:
radoslaw.smolinski
2026-08-26 03:09:15 +02:00
parent 8c6f3d2633
commit 434237e916
17 changed files with 475 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+23
View File
@@ -7,3 +7,26 @@ This version has breaking changes — APIs, conventions, and file structure may
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
<!-- END:nextjs-agent-rules -->
# POI Clean House - Project Rules & Guidelines
## 1. ABSOLUTELY NO HARDCODED STRINGS IN TSX/COMPONENT FILES
- **Strict Rule:** Never hardcode text strings, button labels, contact details, headings, descriptions, footers, headers, badges, or placeholder texts in `.tsx` components or page files.
- **Dynamic Source:** All content MUST come dynamically from Payload CMS (collections, globals like `Company` and `Navigation`, block fields, seed script, or `@intecion/ipal-kit`).
- If a prop is optional, render it conditionally only when present (`{prop && <span>{prop}</span>}`), NEVER provide fallback hardcoded Polish or English text inside JSX.
## 2. BRANDING & UI GUIDELINES (KÄRCHER STYLE)
- Colors:
- Primary Yellow: `#FFED00` (Hover: `#FAE100`)
- Dark Anthracite: `#1F1F1F`
- Deep Black: `#141414`
- Industrial Light Gray: `#F4F4F4`
- Architecture:
- Sharp, geometric corners (`rounded-none` / `0px radius`). No bubbly rounded-3xl or generic AI circles.
- Checkboxes: Square with 2px black border, yellow `#FFED00` checked background, and thick black checkmark (`stroke-[3]`).
- High contrast typography: Uppercase, bold/black weights with letter-spacing.
## 3. UX & ACCESSIBILITY
- Modals & Overlays:
- Must lock background scrolling (`document.body.style.overflow = 'hidden'`) when open to prevent background page scroll leakage.
- Must support close on button, Escape key, or backdrop click.
src/app/(frontend)/[locale]/[[...slug]]/page.tsx
+2 -44
View File
@@ -18,54 +18,12 @@ interface PageProps {
const pageMetadata = createPageMetadata({
config: i18nConfig,
baseUrl: process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000',
baseUrl: process.env.NEXT_PUBLIC_SERVER_URL,
})
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
const { locale, slug } = await params
const payload = await getCachedPayload()
const baseMeta = await pageMetadata({ payload, locale, slug: slug ?? [] })
const baseUrl = process.env.NEXT_PUBLIC_SERVER_URL || 'http://localhost:3000'
const fallbackOgImage = `${baseUrl}/images/paving-hero.webp`
const ogImages =
baseMeta.openGraph?.images && (baseMeta.openGraph.images as unknown[]).length > 0
? baseMeta.openGraph.images
: [
{
url: fallbackOgImage,
width: 1920,
height: 1080,
alt: 'POI Clean House - Czyszczenie Kostki Brukowej',
},
]
return {
...baseMeta,
title: baseMeta.title || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
description:
baseMeta.description ||
'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej. Sprawdź bezpłatną wycenę!',
openGraph: {
...baseMeta.openGraph,
title: (baseMeta.title as string) || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
description:
baseMeta.description ||
'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej. Sprawdź bezpłatną wycenę!',
images: ogImages,
type: 'website',
siteName: 'POI Clean House',
},
twitter: {
card: 'summary_large_image',
title: (baseMeta.title as string) || 'POI Clean House | Profesjonalne Czyszczenie Kostki Brukowej',
description:
baseMeta.description ||
'Specjalistyczne mycie gorącowodne do 100°C, odplamianie oleju, piaskowanie i impregnacja hydrofobowa kostki brukowej.',
images: [fallbackOgImage],
},
}
return pageMetadata({ payload: await getCachedPayload(), locale, slug: slug ?? [] })
}
export default async function Page({ params, searchParams }: PageProps) {
src/app/(frontend)/[locale]/layout.tsx
+12 -2
View File
@@ -97,6 +97,11 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
href: resolveNavItemHref(item),
})) || []
const contactHref =
navigation?.ctaButton?.url ||
(navigation?.ctaButton?.page ? resolveNavItemHref(navigation.ctaButton) : undefined)
const contactLabel = navigation?.ctaButton?.label
return (
<html lang={locale}>
<body className="min-h-screen flex flex-col bg-white text-[#222222] antialiased selection:bg-[#FFED00] selection:text-[#1f1f1f]">
@@ -106,10 +111,11 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
tagline={navigation?.tagline}
items={headerItems}
phone={company?.phone}
phoneLabel={(navigation as { phoneLabel?: string })?.phoneLabel}
homeHref={homeHref}
currentLocale={locale}
contactHref={`/${locale}/kontakt`}
contactLabel="KONTAKT"
contactHref={contactHref}
contactLabel={contactLabel}
/>
<main className="flex-1">{children}</main>
<Footer
@@ -123,7 +129,11 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
email={company?.email}
items={footerItems}
privacyHref={privacyHref}
privacyLabel={texts.privacyLink?.label}
cookieHref={cookieHref}
cookieLabel={cookiePage && typeof cookiePage === 'object' && 'title' in cookiePage ? (cookiePage.title as string) : undefined}
navTitle={(navigation as { navTitle?: string })?.navTitle}
contactTitle={(navigation as { contactTitle?: string })?.contactTitle}
/>
<CustomCookieBanner />
<CookieButton className="fixed bottom-4 left-4 z-40 bg-[#1f1f1f] hover:bg-[#FFED00] text-[#FFED00] hover:text-[#1f1f1f] border-2 border-[#FFED00] p-2.5 transition-all shadow-lg cursor-pointer" />
src/blocks/BlogList/Component.tsx
+7 -4
View File
@@ -15,6 +15,7 @@ interface BlogListBlockProps {
badge?: string
heading: string
subheading?: string
readMoreLabel?: string
articles?: Article[]
}
@@ -79,10 +80,12 @@ export function BlogListBlockComponent(props: BlogListBlockProps) {
{art.date}
</span>
)}
<div className="text-xs font-black uppercase tracking-wider text-[#1f1f1f] flex items-center gap-1 hover:underline cursor-pointer whitespace-nowrap">
<span>Czytaj poradnik</span>
<ArrowRight className="h-3.5 w-3.5 text-[#1f1f1f]" />
</div>
{props.readMoreLabel && (
<div className="text-xs font-black uppercase tracking-wider text-[#1f1f1f] flex items-center gap-1 hover:underline cursor-pointer whitespace-nowrap">
<span>{props.readMoreLabel}</span>
<ArrowRight className="h-3.5 w-3.5 text-[#1f1f1f]" />
</div>
)}
</div>
</article>
</AnimateIn>
src/blocks/BlogList/config.ts
+6
View File
@@ -27,6 +27,12 @@ export const BlogListBlock: Block = {
defaultValue:
'Praktyczne wskazówki ekspertów: jak usuwać trudne plamy, kiedy impregnować nawierzchnię i dlaczego temperatura wody decyduje o skuteczności czyszczenia.',
},
{
name: 'readMoreLabel',
type: 'text',
localized: true,
defaultValue: 'Czytaj poradnik',
},
{
name: 'articles',
type: 'array',
src/blocks/Form/Component.tsx
+116 -64
View File
@@ -9,10 +9,20 @@ interface FormBlockProps {
heading: string
subheading?: string
phone?: string
directPhoneLabel?: string
email?: string
emailContactLabel?: string
workingHours?: string
workingHoursLabel?: string
nameLabel?: string
phoneInputLabel?: string
locationLabel?: string
areaLabel?: string
messageLabel?: string
submitButtonText?: string
consentText?: string
successHeading?: string
successMessage?: string
}
export function FormBlockComponent(props: FormBlockProps) {
@@ -21,10 +31,20 @@ export function FormBlockComponent(props: FormBlockProps) {
heading,
subheading,
phone,
directPhoneLabel,
email,
emailContactLabel,
workingHours,
submitButtonText = 'Wyślij zapytanie o bezpłatną wycenę',
consentText = 'Wyrażam zgodę na przetwarzanie moich danych osobowych w celu kontaktu i przygotowania oferty zgodnie z Polityką Prywatności.',
workingHoursLabel,
nameLabel,
phoneInputLabel,
locationLabel,
areaLabel,
messageLabel,
submitButtonText,
consentText,
successHeading,
successMessage,
} = props
const [submitted, setSubmitted] = useState(false)
@@ -73,8 +93,15 @@ export function FormBlockComponent(props: FormBlockProps) {
<Phone className="h-5 w-5" />
</div>
<div>
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">Telefon bezpośredni</div>
<a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-base font-black text-[#1f1f1f] font-mono hover:underline">
{directPhoneLabel && (
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">
{directPhoneLabel}
</div>
)}
<a
href={`tel:${phone.replace(/\s+/g, '')}`}
className="text-base font-black text-[#1f1f1f] font-mono hover:underline"
>
{phone}
</a>
</div>
@@ -89,7 +116,11 @@ export function FormBlockComponent(props: FormBlockProps) {
<Mail className="h-5 w-5" />
</div>
<div>
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">Kontakt e-mail</div>
{emailContactLabel && (
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">
{emailContactLabel}
</div>
)}
<a href={`mailto:${email}`} className="text-sm font-bold text-[#1f1f1f] hover:underline">
{email}
</a>
@@ -105,7 +136,11 @@ export function FormBlockComponent(props: FormBlockProps) {
<Clock className="h-5 w-5" />
</div>
<div>
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">Godziny pracy</div>
{workingHoursLabel && (
<div className="text-[11px] font-black uppercase tracking-wider text-[#666666]">
{workingHoursLabel}
</div>
)}
<div className="text-sm font-bold text-[#1f1f1f]">
{workingHours}
</div>
@@ -125,35 +160,41 @@ export function FormBlockComponent(props: FormBlockProps) {
<div className="flex h-14 w-14 items-center justify-center bg-[#FFED00] text-[#1f1f1f] border-2 border-[#1f1f1f] mx-auto">
<Check className="h-8 w-8 font-black" />
</div>
<h3 className="text-xl font-black uppercase text-[#1f1f1f]">
Zgłoszenie zostało wysłane
</h3>
<p className="text-[#666666] text-sm max-w-md mx-auto leading-relaxed">
Nasz doradca techniczny skontaktuje się z Państwem telefonicznie w celu przygotowania dokładnej wyceny.
</p>
{successHeading && (
<h3 className="text-xl font-black uppercase text-[#1f1f1f]">
{successHeading}
</h3>
)}
{successMessage && (
<p className="text-[#666666] text-sm max-w-md mx-auto leading-relaxed">
{successMessage}
</p>
)}
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-5">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
Imię i Nazwisko *
</label>
{nameLabel && (
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
{nameLabel}
</label>
)}
<input
type="text"
required
placeholder="Jan Kowalski"
className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:bg-[#fffde6] focus:outline-none transition-colors"
/>
</div>
<div>
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
Numer Telefonu *
</label>
{phoneInputLabel && (
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
{phoneInputLabel}
</label>
)}
<input
type="tel"
required
placeholder="+48 600 000 000"
className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:bg-[#fffde6] focus:outline-none transition-colors font-mono"
/>
</div>
@@ -161,73 +202,84 @@ export function FormBlockComponent(props: FormBlockProps) {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
Miejscowość
</label>
{locationLabel && (
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
{locationLabel}
</label>
)}
<input
type="text"
placeholder="np. Opole, Brzeg, Nysa"
className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors"
/>
</div>
<div>
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
Szacowany Metraż (m²)
</label>
{areaLabel && (
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
{areaLabel}
</label>
)}
<input
type="text"
placeholder="np. 180 m²"
className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors font-mono"
/>
</div>
</div>
<div>
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
Zakres prac / stan nawierzchni
</label>
{messageLabel && (
<label className="block text-xs font-black uppercase tracking-wider text-[#1f1f1f] mb-2">
{messageLabel}
</label>
)}
<textarea
rows={3}
placeholder="Np. usuwanie mchu z fug, mycie gorącowodne Kärcher/Mosmatic, odplamianie oleju, impregnacja..."
className="w-full border-2 border-[#1f1f1f] bg-white px-4 py-3.5 text-sm text-[#1f1f1f] focus:border-[#FFED00] focus:outline-none transition-colors"
/>
</div>
{/* Custom Styled Kärcher Checkbox */}
<div className="pt-2">
<label htmlFor="consent" className="flex items-start gap-3 cursor-pointer select-none group">
<div className="relative flex items-center justify-center mt-0.5 shrink-0">
<input
id="consent"
name="consent"
type="checkbox"
required
checked={consentChecked}
onChange={(e) => setConsentChecked(e.target.checked)}
className="sr-only"
/>
<div className={`w-5 h-5 border-2 border-[#1f1f1f] transition-all flex items-center justify-center ${
consentChecked ? 'bg-[#FFED00]' : 'bg-white'
}`}>
<Check className={`w-3.5 h-3.5 text-[#1f1f1f] stroke-[3] transition-opacity ${
consentChecked ? 'opacity-100' : 'opacity-0'
}`} />
{consentText && (
<div className="pt-2">
<label htmlFor="consent" className="flex items-start gap-3 cursor-pointer select-none group">
<div className="relative flex items-center justify-center mt-0.5 shrink-0">
<input
id="consent"
name="consent"
type="checkbox"
required
checked={consentChecked}
onChange={(e) => setConsentChecked(e.target.checked)}
className="sr-only"
/>
<div
className={`w-5 h-5 border-2 border-[#1f1f1f] transition-all flex items-center justify-center ${
consentChecked ? 'bg-[#FFED00]' : 'bg-white'
}`}
>
<Check
className={`w-3.5 h-3.5 text-[#1f1f1f] stroke-[3] transition-opacity ${
consentChecked ? 'opacity-100' : 'opacity-0'
}`}
/>
</div>
</div>
</div>
<span className="text-xs text-[#555555] leading-relaxed group-hover:text-[#1f1f1f] transition-colors">
{consentText}
</span>
</label>
</div>
<span className="text-xs text-[#555555] leading-relaxed group-hover:text-[#1f1f1f] transition-colors">
{consentText}
</span>
</label>
</div>
)}
<button
type="submit"
disabled={loading || !consentChecked}
className="w-full inline-flex items-center justify-center gap-3 bg-[#FFED00] hover:bg-[#fae100] border-2 border-[#1f1f1f] py-4 px-8 text-xs font-black uppercase tracking-widest text-[#1f1f1f] transition-all cursor-pointer disabled:opacity-50 shadow-xs hover:-translate-y-0.5"
>
<Send className="h-4 w-4" />
<span>{loading ? 'Wysyłanie...' : submitButtonText}</span>
</button>
{submitButtonText && (
<button
type="submit"
disabled={loading || !consentChecked}
className="w-full inline-flex items-center justify-center gap-3 bg-[#FFED00] hover:bg-[#fae100] border-2 border-[#1f1f1f] py-4 px-8 text-xs font-black uppercase tracking-widest text-[#1f1f1f] transition-all cursor-pointer disabled:opacity-50 shadow-xs hover:-translate-y-0.5"
>
<Send className="h-4 w-4" />
<span>{submitButtonText}</span>
</button>
)}
</form>
)}
</div>
src/blocks/Form/config.ts
+63 -1
View File
@@ -28,16 +28,64 @@ export const FormBlock: Block = {
type: 'text',
localized: true,
},
{
name: 'directPhoneLabel',
type: 'text',
localized: true,
defaultValue: 'Telefon bezpośredni',
},
{
name: 'email',
type: 'text',
localized: true,
},
{
name: 'emailContactLabel',
type: 'text',
localized: true,
defaultValue: 'Kontakt e-mail',
},
{
name: 'workingHours',
type: 'text',
localized: true,
},
{
name: 'workingHoursLabel',
type: 'text',
localized: true,
defaultValue: 'Godziny pracy',
},
{
name: 'nameLabel',
type: 'text',
localized: true,
defaultValue: 'Imię i Nazwisko *',
},
{
name: 'phoneInputLabel',
type: 'text',
localized: true,
defaultValue: 'Numer Telefonu *',
},
{
name: 'locationLabel',
type: 'text',
localized: true,
defaultValue: 'Miejscowość',
},
{
name: 'areaLabel',
type: 'text',
localized: true,
defaultValue: 'Szacowany Metraż (m²)',
},
{
name: 'messageLabel',
type: 'text',
localized: true,
defaultValue: 'Zakres prac / stan nawierzchni',
},
{
name: 'submitButtonText',
type: 'text',
@@ -48,7 +96,21 @@ export const FormBlock: Block = {
name: 'consentText',
type: 'textarea',
localized: true,
defaultValue: 'Wyrażam zgodę na przetwarzanie moich danych osobowych w celu kontaktu i przygotowania oferty zgodnie z Polityką Prywatności.',
defaultValue:
'Wyrażam zgodę na przetwarzanie moich danych osobowych w celu kontaktu i przygotowania oferty zgodnie z Polityką Prywatności.',
},
{
name: 'successHeading',
type: 'text',
localized: true,
defaultValue: 'Zgłoszenie zostało wysłane',
},
{
name: 'successMessage',
type: 'textarea',
localized: true,
defaultValue:
'Nasz doradca techniczny skontaktuje się z Państwem telefonicznie w celu przygotowania dokładnej wyceny.',
},
],
}
src/blocks/Hero/Component.tsx
+29 -28
View File
@@ -25,19 +25,18 @@ export function HeroBlockComponent(props: HeroBlockProps) {
subheading,
trustBadges,
ctaPhone,
ctaPhoneLabel = 'Zadzwoń po bezpłatną wycenę',
ctaSecondaryLabel = 'Zobacz cennik za m²',
ctaSecondaryUrl = '#cennik',
ctaPhoneLabel,
ctaSecondaryLabel,
ctaSecondaryUrl,
} = props
return (
<div className="w-full">
{/* Hero Banner Section with Optimized Next.js LCP Image */}
{/* Hero Banner Section with Next.js Image */}
<section className="relative w-full min-h-[calc(100vh-8rem)] max-h-[780px] flex items-center overflow-hidden">
{/* Next.js LCP High Priority Image */}
<Image
src="/images/paving-hero.webp"
alt="Profesjonalne czyszczenie i renowacja kostki brukowej"
alt={heading}
fill
priority
sizes="100vw"
@@ -48,7 +47,7 @@ export function HeroBlockComponent(props: HeroBlockProps) {
<div className="absolute inset-0 bg-gradient-to-r from-[#141414]/90 via-[#141414]/65 to-black/20 z-[1]" />
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl relative z-10 py-10 lg:py-14">
{/* Compact Architectural Content Card */}
{/* Architectural Content Card */}
<AnimateIn delay={100} direction="right">
<div className="bg-white/95 backdrop-blur-md border-2 border-[#1f1f1f] p-6 sm:p-8 lg:p-10 max-w-lg shadow-2xl border-l-8 border-l-[#FFED00]">
{badge && (
@@ -68,32 +67,34 @@ export function HeroBlockComponent(props: HeroBlockProps) {
)}
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
{ctaPhone && (
<a
href={`tel:${ctaPhone.replace(/\s+/g, '')}`}
className="inline-flex items-center justify-center gap-2.5 bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-3.5 text-xs font-black uppercase tracking-widest transition-all shadow-xs hover:-translate-y-0.5"
>
<Phone className="h-4 w-4" />
<span>{ctaPhoneLabel}</span>
</a>
)}
{ctaSecondaryLabel && (
<a
href={ctaSecondaryUrl}
className="inline-flex items-center justify-center gap-2 bg-[#1f1f1f] hover:bg-[#333333] text-white px-6 py-3.5 text-xs font-black uppercase tracking-widest transition-all hover:-translate-y-0.5"
>
<span>{ctaSecondaryLabel}</span>
<ArrowRight className="h-3.5 w-3.5 text-[#FFED00]" />
</a>
)}
</div>
{(ctaPhone || ctaSecondaryLabel) && (
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
{ctaPhone && ctaPhoneLabel && (
<a
href={`tel:${ctaPhone.replace(/\s+/g, '')}`}
className="inline-flex items-center justify-center gap-2.5 bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-3.5 text-xs font-black uppercase tracking-widest transition-all shadow-xs hover:-translate-y-0.5"
>
<Phone className="h-4 w-4" />
<span>{ctaPhoneLabel}</span>
</a>
)}
{ctaSecondaryLabel && ctaSecondaryUrl && (
<a
href={ctaSecondaryUrl}
className="inline-flex items-center justify-center gap-2 bg-[#1f1f1f] hover:bg-[#333333] text-white px-6 py-3.5 text-xs font-black uppercase tracking-widest transition-all hover:-translate-y-0.5"
>
<span>{ctaSecondaryLabel}</span>
<ArrowRight className="h-3.5 w-3.5 text-[#FFED00]" />
</a>
)}
</div>
)}
</div>
</AnimateIn>
</div>
</section>
{/* Full-Width Horizontal Feature Strip Directly Under Hero with Stagger */}
{/* Full-Width Horizontal Feature Strip Directly Under Hero */}
{trustBadges && trustBadges.length > 0 && (
<div className="w-full bg-[#1f1f1f] text-white border-y-2 border-[#FFED00] shadow-md py-4 sm:py-5">
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
src/blocks/Hero/config.ts
+8
View File
@@ -80,6 +80,14 @@ export const HeroBlock: Block = {
description: 'Strona docelowa drugiego przycisku',
},
},
{
name: 'ctaSecondaryUrl',
type: 'text',
localized: true,
admin: {
description: 'URL lub kotwica drugiego przycisku (np. #cennik)',
},
},
{
name: 'backgroundImage',
type: 'upload',
src/blocks/PricingTable/Component.tsx
+3 -2
View File
@@ -12,6 +12,7 @@ interface Package {
description?: string
features?: Feature[]
isPopular?: boolean
popularBadgeLabel?: string
ctaLabel?: string
ctaUrl?: string
}
@@ -57,9 +58,9 @@ export function PricingTableBlockComponent(props: PricingTableBlockProps) {
pkg.isPopular ? 'border-t-8 border-t-[#FFED00] shadow-md' : ''
}`}
>
{pkg.isPopular && (
{pkg.isPopular && pkg.popularBadgeLabel && (
<div className="absolute top-0 right-0 bg-[#FFED00] text-[#1f1f1f] border-b-2 border-l-2 border-[#1f1f1f] text-[10px] font-black uppercase tracking-widest px-4 py-1">
Polecany Pakiet
{pkg.popularBadgeLabel}
</div>
)}
src/blocks/PricingTable/config.ts
+6
View File
@@ -62,6 +62,12 @@ export const PricingTableBlock: Block = {
type: 'checkbox',
defaultValue: false,
},
{
name: 'popularBadgeLabel',
type: 'text',
localized: true,
defaultValue: 'Polecany Pakiet',
},
{
name: 'features',
type: 'array',
src/components/CustomCookieBanner.tsx
+22 -4
View File
@@ -16,6 +16,17 @@ export function CustomCookieBanner() {
setChoices(state)
}, [state])
// Lock background page scroll while settings modal is open
useEffect(() => {
if (showSettings) {
const originalOverflow = document.body.style.overflow
document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = originalOverflow
}
}
}, [showSettings])
if (decided) {
return null
}
@@ -101,14 +112,21 @@ export function CustomCookieBanner() {
</div>
)}
{/* 2. Modal Window for Cookie Settings (Centered & Scrollable) */}
{/* 2. Modal Window for Cookie Settings (Scroll-locked backdrop & isolated modal scrolling) */}
{showSettings && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto">
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs overflow-y-auto overscroll-contain"
onClick={(e) => {
if (e.target === e.currentTarget) setShowSettings(false)
}}
onWheel={(e) => e.stopPropagation()}
>
<div
role="dialog"
aria-modal="true"
aria-label={texts.settingsTitle}
className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col"
className="w-full max-w-2xl bg-[#1f1f1f] text-white p-6 sm:p-8 border-t-4 border-[#FFED00] shadow-2xl my-auto max-h-[90vh] flex flex-col overscroll-contain"
onClick={(e) => e.stopPropagation()}
>
{/* Modal Header */}
<div className="flex items-center justify-between border-b border-[#333333] pb-4 mb-6 shrink-0">
@@ -131,7 +149,7 @@ export function CustomCookieBanner() {
</div>
{/* Scrollable Categories List */}
<div className="overflow-y-auto flex-1 pr-1 space-y-3.5">
<div className="overflow-y-auto flex-1 pr-1 space-y-3.5 overscroll-contain">
{CONSENT_CATEGORIES.map((cat) => {
const isChecked = cat === 'necessary' ? true : !!choices[cat]
const isDisabled = cat === 'necessary'
src/components/Footer.tsx
+62 -50
View File
@@ -17,10 +17,12 @@ interface FooterProps {
phone?: string | null
email?: string | null
items?: FooterNavItem[]
privacyHref?: string
privacyLabel?: string
cookieHref?: string
cookieLabel?: string
privacyHref?: string | null
privacyLabel?: string | null
cookieHref?: string | null
cookieLabel?: string | null
navTitle?: string | null
contactTitle?: string | null
}
export function Footer({
@@ -33,10 +35,12 @@ export function Footer({
phone,
email,
items,
privacyHref = '/polityka-prywatnosci',
privacyLabel = 'Polityka Prywatności',
cookieHref = '/polityka-cookies',
cookieLabel = 'Polityka Cookies',
privacyHref,
privacyLabel,
cookieHref,
cookieLabel,
navTitle,
contactTitle,
}: FooterProps) {
return (
<footer className="bg-[#1f1f1f] text-[#d0d0d0] py-16 border-t-4 border-[#FFED00]">
@@ -59,18 +63,22 @@ export function Footer({
{footerTagline}
</p>
)}
<div className="text-xs text-[#888888] font-mono space-y-1 pt-2 border-t border-[#333333]">
{nip && <div>NIP: <span className="text-[#e0e0e0] font-semibold">{nip}</span></div>}
{regon && <div>REGON: <span className="text-[#e0e0e0] font-semibold">{regon}</span></div>}
</div>
{(nip || regon) && (
<div className="text-xs text-[#888888] font-mono space-y-1 pt-2 border-t border-[#333333]">
{nip && <div>NIP: <span className="text-[#e0e0e0] font-semibold">{nip}</span></div>}
{regon && <div>REGON: <span className="text-[#e0e0e0] font-semibold">{regon}</span></div>}
</div>
)}
</div>
{/* Navigation Links */}
{items && items.length > 0 && (
<div className="space-y-4">
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
Nawigacja
</div>
{navTitle && (
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
{navTitle}
</div>
)}
<ul className="space-y-2.5 text-xs font-bold uppercase tracking-wider">
{items.map((item, idx) => (
<li key={item.id || idx}>
@@ -84,54 +92,58 @@ export function Footer({
)}
{/* Contact Details */}
<div className="space-y-4">
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
Kontakt
{(phone || email || address || city) && (
<div className="space-y-4">
{contactTitle && (
<div className="text-xs font-black uppercase tracking-widest text-[#FFED00] border-b border-[#333333] pb-2">
{contactTitle}
</div>
)}
<ul className="space-y-3 text-xs">
{phone && (
<li className="flex items-center gap-2.5">
<Phone className="h-4 w-4 text-[#FFED00] shrink-0" />
<a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-white hover:text-[#FFED00] font-mono font-black text-sm">
{phone}
</a>
</li>
)}
{email && (
<li className="flex items-center gap-2.5">
<Mail className="h-4 w-4 text-[#FFED00] shrink-0" />
<a href={`mailto:${email}`} className="text-[#d0d0d0] hover:text-white font-medium">
{email}
</a>
</li>
)}
{(address || city) && (
<li className="flex items-start gap-2.5">
<MapPin className="h-4 w-4 text-[#FFED00] shrink-0 mt-0.5" />
<span className="text-[#a0a0a0]">
{address}
{address && city ? ', ' : ''}
{city}
</span>
</li>
)}
</ul>
</div>
<ul className="space-y-3 text-xs">
{phone && (
<li className="flex items-center gap-2.5">
<Phone className="h-4 w-4 text-[#FFED00] shrink-0" />
<a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-white hover:text-[#FFED00] font-mono font-black text-sm">
{phone}
</a>
</li>
)}
{email && (
<li className="flex items-center gap-2.5">
<Mail className="h-4 w-4 text-[#FFED00] shrink-0" />
<a href={`mailto:${email}`} className="text-[#d0d0d0] hover:text-white font-medium">
{email}
</a>
</li>
)}
{(address || city) && (
<li className="flex items-start gap-2.5">
<MapPin className="h-4 w-4 text-[#FFED00] shrink-0 mt-0.5" />
<span className="text-[#a0a0a0]">
{address}
{address && city ? ', ' : ''}
{city}
</span>
</li>
)}
</ul>
</div>
)}
</div>
{/* Bottom Bar with Privacy & Cookie Links */}
<div className="mt-12 pt-8 border-t border-[#333333] flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-[#888888]">
<div>
© {new Date().getFullYear()} {companyName}. Wszelkie prawa zastrzeżone.
© {new Date().getFullYear()} {companyName}
</div>
<div className="flex items-center gap-6 text-xs font-bold uppercase tracking-wider">
{privacyHref && (
{privacyHref && privacyLabel && (
<a href={privacyHref} className="text-[#a0a0a0] hover:text-[#FFED00] transition-colors flex items-center gap-1.5">
<ShieldCheck className="h-3.5 w-3.5 text-[#FFED00]" />
<span>{privacyLabel}</span>
</a>
)}
{cookieHref && (
{cookieHref && cookieLabel && (
<a href={cookieHref} className="text-[#a0a0a0] hover:text-[#FFED00] transition-colors flex items-center gap-1.5">
<Cookie className="h-3.5 w-3.5 text-[#FFED00]" />
<span>{cookieLabel}</span>
src/components/Header.tsx
+53 -41
View File
@@ -17,8 +17,9 @@ interface HeaderProps {
phone?: string | null
homeHref?: string
currentLocale?: string
contactHref?: string
contactLabel?: string
contactHref?: string | null
contactLabel?: string | null
phoneLabel?: string | null
}
export function Header({
@@ -28,8 +29,9 @@ export function Header({
phone,
homeHref = '/',
currentLocale = 'pl',
contactHref = '/kontakt',
contactLabel = 'KONTAKT',
contactHref,
contactLabel,
phoneLabel,
}: HeaderProps) {
const pathname = usePathname() || ''
const [langDropdownOpen, setLangDropdownOpen] = useState(false)
@@ -61,8 +63,8 @@ export function Header({
)
const languages = [
{ code: 'pl', label: 'PL - Polski' },
{ code: 'en', label: 'UK - English' },
{ code: 'pl', label: 'PL' },
{ code: 'en', label: 'UK' },
]
const activeLang = languages.find((l) => l.code === currentLocale) || languages[0]
@@ -70,29 +72,35 @@ export function Header({
return (
<header className="sticky top-0 z-50 w-full bg-white border-b-2 border-[#1f1f1f] shadow-xs">
{/* Top Black Utility Bar */}
<div className="bg-[#1f1f1f] text-white text-xs py-2 hidden md:block">
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="inline-block w-2.5 h-2.5 bg-[#FFED00]" />
<span className="font-bold uppercase tracking-wider text-[11px] text-[#e0e0e0]">
{tagline || 'Profesjonalne Mycie i Renowacja Nawierzchni Brukowych'}
</span>
{(tagline || phone) && (
<div className="bg-[#1f1f1f] text-white text-xs py-2 hidden md:block">
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl flex items-center justify-between">
{tagline && (
<div className="flex items-center gap-2">
<span className="inline-block w-2.5 h-2.5 bg-[#FFED00]" />
<span className="font-bold uppercase tracking-wider text-[11px] text-[#e0e0e0]">
{tagline}
</span>
</div>
)}
{phone && (
<div className="flex items-center gap-2 ml-auto">
{phoneLabel && (
<span className="font-bold uppercase tracking-wider text-[11px] text-[#e0e0e0]">
{phoneLabel}
</span>
)}
<a
href={`tel:${phone.replace(/\s+/g, '')}`}
className="font-black uppercase tracking-wider text-[11px] text-[#FFED00] hover:underline font-mono"
>
{phone}
</a>
</div>
)}
</div>
{phone && (
<div className="flex items-center gap-2">
<span className="font-bold uppercase tracking-wider text-[11px] text-[#e0e0e0]">
Infolinia / Bezpłatna wycena:
</span>
<a
href={`tel:${phone.replace(/\s+/g, '')}`}
className="font-black uppercase tracking-wider text-[11px] text-[#FFED00] hover:underline font-mono"
>
{phone}
</a>
</div>
)}
</div>
</div>
)}
{/* Main Navigation Bar */}
<div className="container mx-auto flex h-20 items-center justify-between px-4 sm:px-6 lg:px-12 max-w-7xl">
@@ -106,13 +114,15 @@ export function Header({
{companyName}
</span>
)}
<span className="text-[10px] uppercase tracking-widest text-[#666666] font-bold block mt-1">
Czyszczenie Kostki Brukowej
</span>
{tagline && (
<span className="text-[10px] uppercase tracking-widest text-[#666666] font-bold block mt-1">
{tagline}
</span>
)}
</div>
</a>
{/* Navigation Items (Without duplicated Kontakt) */}
{/* Navigation Items */}
{filteredNavItems && filteredNavItems.length > 0 && (
<nav className="hidden lg:flex items-center gap-8 text-xs font-black uppercase tracking-wider text-[#1f1f1f]">
{filteredNavItems.map((item, idx) => (
@@ -128,7 +138,7 @@ export function Header({
)}
<div className="flex items-center gap-4">
{/* Wysuwany przełącznik języków (Dropdown Language Switcher) */}
{/* Wysuwany przełącznik języków */}
<div className="relative" ref={dropdownRef}>
<button
type="button"
@@ -141,7 +151,7 @@ export function Header({
</button>
{langDropdownOpen && (
<div className="absolute right-0 mt-1 w-36 bg-white border-2 border-[#1f1f1f] shadow-xl z-50 py-1">
<div className="absolute right-0 mt-1 w-28 bg-white border-2 border-[#1f1f1f] shadow-xl z-50 py-1">
{languages.map((lang) => (
<a
key={lang.code}
@@ -161,14 +171,16 @@ export function Header({
)}
</div>
{/* Right CTA Button: KONTAKT */}
<a
href={contactHref}
className="inline-flex items-center gap-2 bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-3 text-xs font-black uppercase tracking-widest transition-colors shadow-xs"
>
<span>{contactLabel}</span>
<ArrowRight className="h-4 w-4" />
</a>
{/* Right CTA Button */}
{contactHref && contactLabel && (
<a
href={contactHref}
className="inline-flex items-center gap-2 bg-[#FFED00] hover:bg-[#fae100] text-[#1f1f1f] border-2 border-[#1f1f1f] px-6 py-3 text-xs font-black uppercase tracking-widest transition-colors shadow-xs"
>
<span>{contactLabel}</span>
<ArrowRight className="h-4 w-4" />
</a>
)}
</div>
</div>
</header>
src/globals/Navigation.ts
+22 -3
View File
@@ -11,11 +11,17 @@ export const Navigation: GlobalConfig = {
name: 'tagline',
type: 'text',
localized: true,
defaultValue: 'Czyszczenie Kostki Brukowej',
defaultValue: 'Profesjonalne Mycie i Renowacja Nawierzchni Brukowych',
admin: {
description: 'Podtytuł pod logo w nagłówku',
description: 'Podtytuł / hasło w pasku górnym i pod logo',
},
},
{
name: 'phoneLabel',
type: 'text',
localized: true,
defaultValue: 'Infolinia / Bezpłatna wycena:',
},
{
name: 'headerItems',
type: 'array',
@@ -52,7 +58,7 @@ export const Navigation: GlobalConfig = {
{
name: 'label',
type: 'text',
defaultValue: 'Zadzwoń po wycenę',
defaultValue: 'KONTAKT',
},
{
name: 'page',
@@ -62,6 +68,7 @@ export const Navigation: GlobalConfig = {
{
name: 'url',
type: 'text',
defaultValue: '#formularz-kontaktowy',
},
],
},
@@ -75,6 +82,18 @@ export const Navigation: GlobalConfig = {
description: 'Krótki opis firmy w lewej kolumnie stopki',
},
},
{
name: 'navTitle',
type: 'text',
localized: true,
defaultValue: 'Nawigacja',
},
{
name: 'contactTitle',
type: 'text',
localized: true,
defaultValue: 'Kontakt',
},
{
name: 'footerItems',
type: 'array',
src/payload-types.ts
+36 -1
View File
@@ -263,6 +263,10 @@ export interface Page {
* Strona docelowa drugiego przycisku
*/
ctaSecondaryTarget?: (number | null) | Page;
/**
* URL lub kotwica drugiego przycisku (np. #cennik)
*/
ctaSecondaryUrl?: string | null;
/**
* Zdjęcie tła sekcji hero
*/
@@ -354,6 +358,7 @@ export interface Page {
price: string;
description?: string | null;
isPopular?: boolean | null;
popularBadgeLabel?: string | null;
features?:
| {
feature: string;
@@ -424,10 +429,20 @@ export interface Page {
heading: string;
subheading?: string | null;
phone?: string | null;
directPhoneLabel?: string | null;
email?: string | null;
emailContactLabel?: string | null;
workingHours?: string | null;
workingHoursLabel?: string | null;
nameLabel?: string | null;
phoneInputLabel?: string | null;
locationLabel?: string | null;
areaLabel?: string | null;
messageLabel?: string | null;
submitButtonText?: string | null;
consentText?: string | null;
successHeading?: string | null;
successMessage?: string | null;
id?: string | null;
blockName?: string | null;
blockType: 'formBlock';
@@ -444,6 +459,7 @@ export interface Page {
badge?: string | null;
heading: string;
subheading?: string | null;
readMoreLabel?: string | null;
articles?:
| {
title: string;
@@ -851,6 +867,7 @@ export interface PagesSelect<T extends boolean = true> {
ctaPhoneLabel?: T;
ctaSecondaryLabel?: T;
ctaSecondaryTarget?: T;
ctaSecondaryUrl?: T;
backgroundImage?: T;
id?: T;
blockName?: T;
@@ -923,6 +940,7 @@ export interface PagesSelect<T extends boolean = true> {
price?: T;
description?: T;
isPopular?: T;
popularBadgeLabel?: T;
features?:
| T
| {
@@ -993,10 +1011,20 @@ export interface PagesSelect<T extends boolean = true> {
heading?: T;
subheading?: T;
phone?: T;
directPhoneLabel?: T;
email?: T;
emailContactLabel?: T;
workingHours?: T;
workingHoursLabel?: T;
nameLabel?: T;
phoneInputLabel?: T;
locationLabel?: T;
areaLabel?: T;
messageLabel?: T;
submitButtonText?: T;
consentText?: T;
successHeading?: T;
successMessage?: T;
id?: T;
blockName?: T;
};
@@ -1015,6 +1043,7 @@ export interface PagesSelect<T extends boolean = true> {
badge?: T;
heading?: T;
subheading?: T;
readMoreLabel?: T;
articles?:
| T
| {
@@ -1258,9 +1287,10 @@ export interface Company {
export interface Navigation {
id: number;
/**
* Podtytuł pod logo w nagłówku
* Podtytuł / hasło w pasku górnym i pod logo
*/
tagline?: string | null;
phoneLabel?: string | null;
headerItems?:
| {
label: string;
@@ -1281,6 +1311,8 @@ export interface Navigation {
* Krótki opis firmy w lewej kolumnie stopki
*/
footerTagline?: string | null;
navTitle?: string | null;
contactTitle?: string | null;
footerItems?:
| {
label: string;
@@ -1502,6 +1534,7 @@ export interface CompanySelect<T extends boolean = true> {
*/
export interface NavigationSelect<T extends boolean = true> {
tagline?: T;
phoneLabel?: T;
headerItems?:
| T
| {
@@ -1518,6 +1551,8 @@ export interface NavigationSelect<T extends boolean = true> {
url?: T;
};
footerTagline?: T;
navTitle?: T;
contactTitle?: T;
footerItems?:
| T
| {
src/seed/index.ts
+5 -1
View File
@@ -76,6 +76,7 @@ export async function seed(payload: Payload) {
ctaPhone: '+48 668 973 737',
ctaPhoneLabel: 'Zadzwoń po bezpłatną wycenę',
ctaSecondaryLabel: 'Zobacz cennik za m²',
ctaSecondaryUrl: '#cennik',
},
{
blockType: 'problemSolution',
@@ -578,7 +579,10 @@ W każdej chwili możesz zmienić swoje preferencje dotyczące plików cookies k
slug: 'navigation',
locale: 'pl',
data: {
tagline: 'Czyszczenie Kostki Brukowej',
tagline: 'Profesjonalne Mycie i Renowacja Nawierzchni Brukowych',
phoneLabel: 'Infolinia / Bezpłatna wycena:',
navTitle: 'Nawigacja',
contactTitle: 'Kontakt',
headerItems: [
{
label: 'Cennik',