From 61fd266f5dfd56ced4f4d64ec16ffd718e4cca25 Mon Sep 17 00:00:00 2001 From: MichalC <103170279+wSBMichalee@users.noreply.github.com> Date: Wed, 2 Sep 2026 23:41:09 +0200 Subject: [PATCH] feat: redesign Hero block, update global design tokens and fonts to new editorial direction --- src/app/(frontend)/layout.tsx | 13 +++- src/app/globals.css | 34 ++++----- src/blocks/Hero/Component.tsx | 137 +++++++++++++--------------------- src/blocks/Hero/config.ts | 2 +- src/payload-types.ts | 4 +- 5 files changed, 79 insertions(+), 111 deletions(-) diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx index 2573019..8650042 100644 --- a/src/app/(frontend)/layout.tsx +++ b/src/app/(frontend)/layout.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Inter, Outfit } from 'next/font/google' +import { Public_Sans, Fraunces } from 'next/font/google' import { Providers } from '../../components/Providers' import { LanguageSlugsProvider } from '../../components/LanguageSlugsProvider' import { Header } from '../../components/Header' @@ -8,8 +8,13 @@ import { getPayload } from 'payload' import configPromise from '@payload-config' import '../globals.css' -const inter = Inter({ subsets: ['latin'], variable: '--font-sans' }) -const outfit = Outfit({ subsets: ['latin'], variable: '--font-heading' }) +const publicSans = Public_Sans({ subsets: ['latin'], variable: '--font-sans' }) +const fraunces = Fraunces({ + subsets: ['latin'], + variable: '--font-heading', + axes: ['opsz'], + weight: 'variable', +}) export const metadata = { title: 'Finanz- & Lohnbuchhaltung Dipl.-Ing. Janusz Kędzierski', @@ -50,7 +55,7 @@ export default async function RootLayout({ const footerNavItems = (footerData.navigation || []).map((item: any) => item.page).filter((page: any) => typeof page === 'object' && page !== null); return ( - + diff --git a/src/app/globals.css b/src/app/globals.css index 71ecbcf..855bf60 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,35 +10,33 @@ --color-card: var(--card-color); --color-border: var(--border-color); - --font-sans: 'Inter', sans-serif; - --font-heading: 'Outfit', sans-serif; + --font-sans: 'Public Sans', sans-serif; + --font-heading: 'Fraunces', serif; } :root { /* Jasny motyw */ - --bg-color: #FAFAFA; - --fg-color: #18181B; + --bg-color: #F7F5F1; + --fg-color: #1C1B1A; --card-color: #FFFFFF; - --border-color: #E4E4E7; + --border-color: #E2DDD3; - /* Ciemniejszy złoty/ochra dla zachowania kontrastu na jasnym tle */ - --accent-color: #7B5C35; - --accent-hover-color: #614828; + --accent-color: #A13D2C; + --accent-hover-color: #8A3324; /* Globalny token dla przycisków prostokątnych (umiarkowane zaokrąglenie, nie pill) */ --radius-button: 6px; } [data-theme="dark"] { - /* Ciemny motyw: czysty, głęboki antracyt (bez niebieskiego odcienia) */ - --bg-color: #121212; - --fg-color: #F8FAFC; - --card-color: #18181B; - --border-color: #27272A; + /* Ciemny motyw */ + --bg-color: #17140F; + --fg-color: #F5F1E8; + --card-color: #1F1B14; + --border-color: #332C21; - /* Jasny złoty/ochra dla zachowania kontrastu na ciemnym tle */ - --accent-color: #C5A880; - --accent-hover-color: #D4B995; + --accent-color: #D4634A; + --accent-hover-color: #E17B62; } /* Globalne style dla HTML i Body */ @@ -57,7 +55,7 @@ body { h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); - font-weight: 600; + font-weight: 500; letter-spacing: -0.02em; } @@ -68,7 +66,7 @@ h1, h2, h3, h4, h5, h6 { } .btn-primary:hover { background-color: var(--accent-hover-color); - @apply shadow-lg transform -translate-y-0.5; + @apply shadow-lg; } /* Utility dla szerokich kontenerów i dużego oddechu (whitespace) */ diff --git a/src/blocks/Hero/Component.tsx b/src/blocks/Hero/Component.tsx index e6f656d..5c3dad7 100644 --- a/src/blocks/Hero/Component.tsx +++ b/src/blocks/Hero/Component.tsx @@ -1,100 +1,65 @@ 'use client' -import React, { useState, useEffect } from 'react' -import type { Page } from '../../payload-types' +import React from 'react' +import type { Page, Media } from '../../payload-types' import Link from 'next/link' import Image from 'next/image' -import { ArrowRight } from 'lucide-react' type Props = Extract[0], { blockType: 'hero' }> -/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */ -const heroImages = [ - { - url: 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=2000&q=80', - alt: 'Dokumenty podatkowe i praca biurowa', - }, - { - url: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2000&q=80', - alt: 'Profesjonalne biuro doradztwa podatkowego', - }, - { - url: 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?auto=format&fit=crop&w=2000&q=80', - alt: 'Praca z rozliczeniami podatkowymi', - }, -] - -export const HeroBlock: React.FC = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => { - const [currentSlide, setCurrentSlide] = useState(0) - - useEffect(() => { - const timer = setInterval(() => { - setCurrentSlide((prev) => (prev + 1) % heroImages.length) - }, 6000) - return () => clearInterval(timer) - }, []) +export const HeroBlock: React.FC = ({ title, 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 + const imageUrl = heroMedia?.url || 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80'; + const imageAlt = heroMedia?.alt || 'Doradztwo podatkowe - biuro'; return ( -
- {/* Pełnoekranowe tło ze sliderem */} -
- {heroImages.map((img, idx) => ( -
- {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */} - {img.alt} -
- ))} - {/* Potężny, gładki overlay z koloru tła aplikacji od dołu i od lewej, dla idealnej czytelności */} -
-
-
- -
-
- {yearsOfExperience && ( -
- // {yearsOfExperience} -
- )} - -

- {title} -

+
+
+
-

- {subtitle} -

- -
- - {primaryCta} - - {secondaryCta?.text && secondaryCta?.url && ( - +

+ {title} +

+ +

+ {subtitle} +

+ +
+ - {secondaryCta.text} - - - )} + {primaryCta} + + {secondaryCta?.text && secondaryCta?.url && ( + + {secondaryCta.text} + + )} +
+ +
+
+ {imageAlt} +
+
+
diff --git a/src/blocks/Hero/config.ts b/src/blocks/Hero/config.ts index c8a82f6..8c7aa79 100644 --- a/src/blocks/Hero/config.ts +++ b/src/blocks/Hero/config.ts @@ -14,6 +14,6 @@ export const Hero: Block = { { name: 'url', type: 'text' }, ], }, - { name: 'yearsOfExperience', type: 'text', localized: true }, + { name: 'image', type: 'upload', relationTo: 'media', required: true }, ], } diff --git a/src/payload-types.ts b/src/payload-types.ts index 366ce36..5b69ce3 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -261,7 +261,7 @@ export interface Page { text?: string | null; url?: string | null; }; - yearsOfExperience?: string | null; + image: number | Media; id?: string | null; blockName?: string | null; blockType: 'hero'; @@ -624,7 +624,7 @@ export interface PagesSelect { text?: T; url?: T; }; - yearsOfExperience?: T; + image?: T; id?: T; blockName?: T; };