style: update dark theme to neutral anthracite and add technical monospace section labels
This commit is contained in:
+4
-4
@@ -25,11 +25,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
/* Ciemny motyw: głęboki, ciepły granat/antracyt */
|
/* Ciemny motyw: czysty, głęboki antracyt (bez niebieskiego odcienia) */
|
||||||
--bg-color: #0F172A;
|
--bg-color: #121212;
|
||||||
--fg-color: #F8FAFC;
|
--fg-color: #F8FAFC;
|
||||||
--card-color: #1E293B;
|
--card-color: #18181B;
|
||||||
--border-color: #334155;
|
--border-color: #27272A;
|
||||||
|
|
||||||
/* Jasny złoty/ochra dla zachowania kontrastu na ciemnym tle */
|
/* Jasny złoty/ochra dla zachowania kontrastu na ciemnym tle */
|
||||||
--accent-color: #C5A880;
|
--accent-color: #C5A880;
|
||||||
|
|||||||
@@ -10,15 +10,15 @@ export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, li
|
|||||||
return (
|
return (
|
||||||
<section className="py-20 md:py-24 bg-background border-t border-border">
|
<section className="py-20 md:py-24 bg-background border-t border-border">
|
||||||
<div className="container mx-auto px-4 max-w-4xl">
|
<div className="container mx-auto px-4 max-w-4xl">
|
||||||
<motion.div
|
<div className="flex flex-col md:flex-row items-center gap-12 lg:gap-20">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
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">
|
<div className="flex-1 text-center md:text-left">
|
||||||
<h2 className="text-2xl md:text-3xl font-bold text-foreground mb-4">{title}</h2>
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
<p className="text-foreground/80 mb-6 leading-relaxed text-sm md:text-base">{description}</p>
|
// Zaufanie
|
||||||
|
</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>
|
||||||
|
<p className="text-foreground/75 text-lg font-light leading-relaxed mb-8">{description}</p>
|
||||||
{linkText && (
|
{linkText && (
|
||||||
<Link href="/stowarzyszenie" className="text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
|
<Link href="/stowarzyszenie" className="text-accent font-semibold hover:text-accent-hover underline underline-offset-4">
|
||||||
{linkText}
|
{linkText}
|
||||||
@@ -30,7 +30,7 @@ export const AffiliationBlock: React.FC<Props> = ({ title, description, logo, li
|
|||||||
<img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
|
<img src={logo.url} alt={logo.alt || "Logo stowarzyszenia"} className="max-w-full h-auto grayscale hover:grayscale-0 transition-all duration-300" />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</motion.div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -9,29 +9,25 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'faqTeaser' }>
|
|||||||
export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
|
export const FAQTeaserBlock: React.FC<Props> = ({ title, questions, linkText }) => {
|
||||||
return (
|
return (
|
||||||
<section className="py-20 md:py-24 bg-card/40 border-t border-border">
|
<section className="py-20 md:py-24 bg-card/40 border-t border-border">
|
||||||
<div className="container mx-auto px-4 max-w-4xl">
|
<div className="container-premium max-w-4xl mx-auto">
|
||||||
<motion.h2
|
<div className="mb-12 text-center">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
// FAQ
|
||||||
viewport={{ once: true }}
|
</div>
|
||||||
className="text-3xl md:text-5xl font-bold text-foreground mb-12 text-center"
|
<h2 className="font-heading text-3xl md:text-5xl font-extrabold text-foreground tracking-tight">
|
||||||
>
|
|
||||||
{title}
|
{title}
|
||||||
</motion.h2>
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="space-y-6 mb-12">
|
<div className="space-y-6 mb-12">
|
||||||
{questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
|
{questions?.map((q: NonNullable<Props['questions']>[0], index: number) => (
|
||||||
<motion.div
|
<div
|
||||||
key={q.id || index}
|
key={q.id || index}
|
||||||
initial={{ opacity: 0, y: 10 }}
|
className="py-6 border-b border-border/50 first:border-t"
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.4, delay: index * 0.1 }}
|
|
||||||
className="bg-card p-6 md:p-8 rounded-2xl shadow-sm border border-border"
|
|
||||||
>
|
>
|
||||||
<h3 className="text-xl font-bold text-foreground mb-3">{q.question}</h3>
|
<h3 className="font-heading text-xl font-bold text-foreground mb-3">{q.question}</h3>
|
||||||
<p className="text-foreground/80">{q.answer}</p>
|
<p className="text-foreground/75 leading-relaxed">{q.answer}</p>
|
||||||
</motion.div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -9,9 +9,8 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
|
|||||||
return (
|
return (
|
||||||
<section className="py-20 md:py-28 bg-card border-y border-border text-center">
|
<section className="py-20 md:py-28 bg-card border-y border-border text-center">
|
||||||
<div className="container-premium max-w-3xl mx-auto">
|
<div className="container-premium max-w-3xl mx-auto">
|
||||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-accent text-xs sm:text-sm font-semibold tracking-wide mb-6">
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
<MessageCircle size={16} />
|
// Kontakt
|
||||||
<span>Szybki i bezpośredni kontakt</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-4 leading-tight">
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-4 leading-tight">
|
||||||
|
|||||||
@@ -11,6 +11,9 @@ export const ProcessBlock: React.FC<Props> = ({ title, steps, ctaText }) => {
|
|||||||
<section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
|
<section className="py-20 md:py-32 bg-background text-foreground overflow-hidden">
|
||||||
<div className="container-premium">
|
<div className="container-premium">
|
||||||
<div className="max-w-2xl mb-16 md:mb-24">
|
<div className="max-w-2xl mb-16 md:mb-24">
|
||||||
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
|
// Proces
|
||||||
|
</div>
|
||||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
|
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-foreground mb-6 text-balance">
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@@ -11,6 +11,9 @@ export const ServicesListBlock: React.FC<Props> = ({ title, services }) => {
|
|||||||
<section className="py-20 md:py-32 bg-background text-foreground">
|
<section className="py-20 md:py-32 bg-background text-foreground">
|
||||||
<div className="container-premium">
|
<div className="container-premium">
|
||||||
<div className="mb-16 md:mb-24">
|
<div className="mb-16 md:mb-24">
|
||||||
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
|
// Usługi
|
||||||
|
</div>
|
||||||
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
|
<h2 className="font-heading text-4xl sm:text-5xl md:text-6xl font-extrabold text-foreground tracking-tight max-w-2xl text-balance">
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@@ -20,6 +20,9 @@ export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) =>
|
|||||||
<div className="container-premium">
|
<div className="container-premium">
|
||||||
{(title || subtitle) && (
|
{(title || subtitle) && (
|
||||||
<div className="max-w-2xl mb-16">
|
<div className="max-w-2xl mb-16">
|
||||||
|
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
||||||
|
// Statystyki
|
||||||
|
</div>
|
||||||
{title && (
|
{title && (
|
||||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-4 tracking-tight">
|
||||||
{title}
|
{title}
|
||||||
|
|||||||
@@ -22,8 +22,8 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
|
|||||||
return (
|
return (
|
||||||
<section className="py-24 md:py-40 bg-background border-y border-border overflow-hidden">
|
<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">
|
<div className="container-premium max-w-4xl mx-auto text-center relative">
|
||||||
<h2 className="text-xs font-bold tracking-[0.2em] uppercase text-accent mb-12">
|
<h2 className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-12">
|
||||||
{title}
|
// {title}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<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] flex items-center justify-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user