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

refactor: use css theme variables, enforce strict typing without any and remove dead Hero component

Browse Source
This commit is contained in:
MichalC
2026-08-31 23:14:11 +02:00
parent 0a1e74dbe4
commit c2b3e6a616
10 changed files with 50 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/Affiliation/Component.tsx
+5 -5
View File
@@ -8,19 +8,19 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'affiliation'
export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, linkText }) => {
return (
<section className="py-24 bg-slate-50 border-t border-slate-200">
<section className="py-24 bg-accent/5 border-t border-border">
<div className="container mx-auto px-4 max-w-4xl">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="bg-white p-8 md:p-12 rounded-2xl shadow-sm border border-slate-100 flex flex-col md:flex-row items-center gap-10"
className="bg-card p-8 md:p-12 rounded-2xl shadow-sm border border-border flex flex-col md:flex-row items-center gap-10"
>
<div className="flex-1 text-center md:text-left">
<h2 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">{title}</h2>
<p className="text-slate-600 mb-6 leading-relaxed text-sm md:text-base">{description}</p>
<h2 className="text-2xl md:text-3xl font-bold text-foreground mb-4">{title}</h2>
<p className="text-foreground/80 mb-6 leading-relaxed text-sm md:text-base">{description}</p>
{linkText && (
<Link href="/stowarzyszenie" className="text-blue-600 font-semibold hover:text-blue-700 underline underline-offset-4">
<Link href="/stowarzyszenie" className="text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
{linkText}
</Link>
)}
src/blocks/FAQTeaser/Component.tsx
+7 -7
View File
@@ -8,36 +8,36 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
return (
<section className="py-24 bg-slate-50">
<section className="py-24 bg-accent/5">
<div className="container mx-auto px-4 max-w-4xl">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-3xl md:text-5xl font-bold text-slate-900 mb-12 text-center"
className="text-3xl md:text-5xl font-bold text-foreground mb-12 text-center"
>
{title}
</motion.h2>
<div className="space-y-6 mb-12">
{questions?.map((q: any, index: number) => (
{questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
<motion.div
key={q.id || index}
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: index * 0.1 }}
className="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-100"
className="bg-card p-6 md:p-8 rounded-2xl shadow-sm border border-border"
>
<h3 className="text-xl font-bold text-slate-900 mb-3">{q.question}</h3>
<p className="text-slate-600">{q.answer}</p>
<h3 className="text-xl font-bold text-foreground mb-3">{q.question}</h3>
<p className="text-foreground/80">{q.answer}</p>
</motion.div>
))}
</div>
{linkText && (
<div className="text-center">
<Link href="/faq" className="inline-block text-blue-600 font-semibold hover:text-blue-700 underline underline-offset-4">
<Link href="/faq" className="inline-block text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
{linkText}
</Link>
</div>
src/blocks/FinalCTA/Component.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'finalCta' }>
export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText }) => {
return (
<section className="py-32 bg-blue-600 text-white text-center">
<section className="py-32 bg-accent text-white text-center">
<div className="container mx-auto px-4 max-w-3xl">
<motion.h2
initial={{ opacity: 0, scale: 0.95 }}
@@ -24,7 +24,7 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.1 }}
className="text-xl md:text-2xl text-blue-100 mb-12"
className="text-xl md:text-2xl text-white/80 mb-12"
>
{subtitle}
</motion.p>
src/blocks/Hero/Component.tsx
+5 -5
View File
@@ -8,8 +8,8 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>
export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => {
return (
<section className="relative overflow-hidden bg-slate-900 text-white py-24 lg:py-32">
<div className="absolute inset-0 bg-gradient-to-br from-blue-900/40 to-slate-900 z-0" />
<section className="relative overflow-hidden bg-background text-foreground py-24 lg:py-32">
<div className="absolute inset-0 bg-gradient-to-br from-accent/10 to-background z-0" />
<div className="container mx-auto px-4 relative z-10 flex flex-col items-center text-center">
<motion.h1
initial={{ opacity: 0, y: 20 }}
@@ -24,7 +24,7 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-xl md:text-2xl text-slate-300 mb-10 max-w-2xl"
className="text-xl md:text-2xl text-foreground/80 mb-10 max-w-2xl"
>
{subtitle}
</motion.p>
@@ -46,7 +46,7 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
{secondaryCta?.text && secondaryCta?.url && (
<Link
href={secondaryCta.url}
className="px-8 py-4 bg-transparent border-2 border-slate-600 hover:border-slate-400 text-white font-semibold rounded-lg transition-colors"
className="px-8 py-4 bg-transparent border-2 border-border hover:border-foreground text-foreground font-semibold rounded-lg transition-colors"
>
{secondaryCta.text}
</Link>
@@ -58,7 +58,7 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6, delay: 0.4 }}
className="text-sm text-slate-400 uppercase tracking-widest"
className="text-sm text-foreground/60 uppercase tracking-widest"
>
{yearsOfExperience}
</motion.div>
src/blocks/Process/Component.tsx
+6 -6
View File
@@ -8,7 +8,7 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'process' }>
export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
return (
<section className="py-24 bg-slate-900 text-white">
<section className="py-24 bg-background text-foreground">
<div className="container mx-auto px-4">
<motion.h2
initial={{ opacity: 0, y: 20 }}
@@ -22,9 +22,9 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
<div className="max-w-4xl mx-auto">
<div className="flex flex-col md:flex-row gap-8 relative">
{/* Linia łącząca na desktopie */}
<div className="hidden md:block absolute top-6 left-[10%] right-[10%] h-0.5 bg-slate-800 z-0" />
<div className="hidden md:block absolute top-6 left-[10%] right-[10%] h-0.5 bg-border z-0" />
{steps?.map((step: any, index: number) => (
{steps?.map((step: NonNullable<Props['steps']>[0], index: number) => (
<motion.div
key={step.id || index}
initial={{ opacity: 0, y: 20 }}
@@ -33,11 +33,11 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
transition={{ duration: 0.5, delay: index * 0.15 }}
className="flex-1 relative z-10 text-center md:text-left flex flex-col items-center md:items-start"
>
<div className="w-12 h-12 rounded-full bg-blue-600 border-4 border-slate-900 flex items-center justify-center text-xl font-bold mb-6">
<div className="w-12 h-12 rounded-full bg-accent text-white border-4 border-background flex items-center justify-center text-xl font-bold mb-6">
{index + 1}
</div>
<h3 className="text-xl font-bold mb-3">{step.title}</h3>
<p className="text-slate-400 text-center md:text-left">{step.description}</p>
<p className="text-foreground/80 text-center md:text-left">{step.description}</p>
</motion.div>
))}
</div>
@@ -50,7 +50,7 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
transition={{ duration: 0.5, delay: 0.6 }}
className="mt-16 text-center"
>
<Link href="/jak-to-dziala" className="inline-block px-8 py-4 border-2 border-slate-700 hover:border-slate-500 rounded-lg text-white font-semibold transition-colors">
<Link href="/jak-to-dziala" className="inline-block px-8 py-4 border-2 border-border hover:border-foreground rounded-lg text-foreground font-semibold transition-colors">
{ctaText}
</Link>
</motion.div>
src/blocks/ServicesList/Component.tsx
+7 -7
View File
@@ -9,19 +9,19 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'servicesList'
export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
return (
<section className="py-24 bg-white">
<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-slate-900 mb-16 text-center"
className="text-3xl md:text-5xl font-bold text-foreground mb-16 text-center"
>
{title}
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{services?.map((service: any, index: number) => (
{services?.map((service: NonNullable<Props['services']>[0], index: number) => (
<motion.div
key={service.id || index}
initial={{ opacity: 0, y: 20 }}
@@ -30,10 +30,10 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
transition={{ duration: 0.5, delay: index * 0.1 }}
className="group"
>
<Link href="/uslugi" className="block h-full p-8 rounded-2xl bg-slate-50 border border-slate-100 transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:bg-white">
<h3 className="text-xl font-bold text-slate-900 mb-4">{service.title}</h3>
<p className="text-slate-600 mb-8">{service.description}</p>
<div className="flex items-center text-blue-600 font-semibold group-hover:text-blue-700 mt-auto">
<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>
src/blocks/Testimonials/Component.tsx
+7 -7
View File
@@ -8,30 +8,30 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials'
export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
return (
<section className="py-24 bg-white">
<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-slate-900 mb-16 text-center"
className="text-3xl md:text-5xl font-bold text-foreground mb-16 text-center"
>
{title}
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{testimonials?.map((t: any, index: number) => (
{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-slate-50 p-8 rounded-2xl relative"
className="bg-card p-8 rounded-2xl relative"
>
<Quote className="absolute top-6 right-6 text-slate-200" size={40} />
<p className="text-slate-700 italic mb-6 relative z-10">"{t.quote}"</p>
<div className="font-semibold text-slate-900">— {t.author}</div>
<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>
src/blocks/TrustBar/Component.tsx
+4 -4
View File
@@ -17,10 +17,10 @@ export const TrustBarBlock: React.FC<Props> = ({ items }) => {
if (!items || items.length === 0) return null
return (
<section className="bg-slate-100 py-8 border-b border-slate-200">
<section className="bg-background py-8 border-b border-border">
<div className="container mx-auto px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
{items.map((item: any, index: number) => {
{items.map((item: NonNullable<Props['items']>[0], index: number) => {
const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : CheckCircle
return (
<motion.div
@@ -31,10 +31,10 @@ export const TrustBarBlock: React.FC<Props> = ({ items }) => {
transition={{ duration: 0.5, delay: index * 0.1 }}
className="flex flex-col items-center justify-center gap-3"
>
<div className="text-blue-600">
<div className="text-accent">
<Icon size={28} />
</div>
<span className="text-sm font-medium text-slate-700">{item.text}</span>
<span className="text-sm font-medium text-foreground">{item.text}</span>
</motion.div>
)
})}
src/blocks/UniqueValue/Component.tsx
+4 -4
View File
@@ -7,15 +7,15 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'uniqueValue'
export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
return (
<section className="py-24 bg-blue-50 relative overflow-hidden">
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-blue-100 opacity-50 blur-3xl" />
<section className="py-24 bg-accent/10 relative overflow-hidden">
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-accent/20 opacity-50 blur-3xl" />
<div className="container mx-auto px-4 relative z-10 text-center max-w-3xl">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-3xl md:text-5xl font-bold text-slate-900 mb-8"
className="text-3xl md:text-5xl font-bold text-foreground mb-8"
>
{title}
</motion.h2>
@@ -24,7 +24,7 @@ export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="text-lg md:text-xl text-slate-700 leading-relaxed"
className="text-lg md:text-xl text-foreground/80 leading-relaxed"
>
{description}
</motion.div>