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

feat(contact): remove eyebrow, add service select field and align rounded-none styling

Browse Source
This commit is contained in:
MichalC
2026-09-03 12:44:39 +02:00
parent 0a16cb1dc3
commit 0a2ce665b2
1 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/blocks/ContactInfo/Component.tsx
+51 -16
View File
@@ -15,12 +15,18 @@ export const ContactInfoBlock: React.FC<Props> = ({
const pathname = usePathname()
const isDe = pathname?.startsWith('/de')
const [formData, setFormData] = useState({ name: '', email: '', message: '' })
const [formData, setFormData] = useState({
service: '',
name: '',
email: '',
message: '',
})
const [submitted, setSubmitted] = useState(false)
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
// TODO: Podłączyć logikę wysyłki formularza przez backend API (np. Resend / SMTP / Payload custom endpoint)
// TODO: Podłączyć logikę wysyłki formularza przez backend API (np. Resend / SMTP / Payload custom endpoint).
// Pamiętać o przekazaniu w payloadzie: formData.service (wybrana usługa), formData.name, formData.email, formData.message.
setSubmitted(true)
}
@@ -31,7 +37,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
{/* Kolumna 1: Dane kontaktowe + WhatsApp CTA (Główna opcja) */}
<div className="lg:col-span-5 flex flex-col gap-8">
<div className="bg-card border border-border p-8 rounded-2xl shadow-sm flex flex-col gap-6">
<div className="bg-card border border-border p-8 rounded-none shadow-sm flex flex-col gap-6">
<h2 className="font-heading text-2xl font-bold text-foreground">
{isDe ? 'Direkter Kontakt' : 'Bezpośredni kontakt'}
</h2>
@@ -39,7 +45,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
<ul className="flex flex-col gap-5 text-foreground/80 text-base">
{address && (
<li className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<MapPin size={20} />
</div>
<div>
@@ -53,7 +59,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
{phone && (
<li className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<Phone size={20} />
</div>
<div>
@@ -69,7 +75,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
{email && (
<li className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<Mail size={20} />
</div>
<div>
@@ -85,7 +91,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
{hours && (
<li className="flex items-start gap-4">
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
<Clock size={20} />
</div>
<div>
@@ -100,7 +106,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
</div>
{/* Główne CTA: WhatsApp */}
<div className="p-8 bg-card border-2 border-green-500/20 rounded-2xl flex flex-col gap-4">
<div className="p-8 bg-card border-2 border-green-500/20 rounded-none flex flex-col gap-4">
<span className="inline-block text-xs font-bold uppercase tracking-widest text-green-600 dark:text-green-400">
{isDe ? 'Empfohlen & Am schnellsten' : 'Zalecany i najszybszy kontakt'}
</span>
@@ -125,11 +131,8 @@ export const ContactInfoBlock: React.FC<Props> = ({
</div>
{/* Kolumna 2: Prosty formularz kontaktowy (Drugorzędna opcja) */}
<div className="lg:col-span-7 bg-card border border-border p-8 md:p-10 rounded-2xl shadow-sm">
<div className="lg:col-span-7 bg-card border border-border p-8 md:p-10 rounded-none shadow-sm">
<div className="mb-8">
<span className="text-xs uppercase tracking-widest text-foreground/50 font-semibold block mb-2">
{isDe ? 'Nachricht senden' : 'Napisz wiadomość'}
</span>
<h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground">
{isDe ? 'Kontaktformular' : 'Formularz kontaktowy'}
</h2>
@@ -141,7 +144,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
</div>
{submitted ? (
<div className="p-6 bg-accent/10 border border-accent/20 rounded-xl text-center">
<div className="p-6 bg-accent/10 border border-accent/20 rounded-none text-center">
<h3 className="font-heading font-bold text-lg text-foreground mb-2">
{isDe ? 'Vielen Dank für Ihre Nachricht!' : 'Dziękujemy za wiadomość!'}
</h3>
@@ -153,6 +156,38 @@ export const ContactInfoBlock: React.FC<Props> = ({
</div>
) : (
<form onSubmit={handleSubmit} className="flex flex-col gap-6">
<div>
<label htmlFor="service" className="block text-sm font-semibold text-foreground mb-2">
{isDe ? 'Worum geht es?' : 'Czego dotyczy zapytanie?'} <span className="text-accent">*</span>
</label>
<select
id="service"
required
value={formData.service}
onChange={(e) => setFormData({ ...formData, service: e.target.value })}
className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
>
<option value="" disabled>
{isDe ? '— Bitte auswählen —' : '— Wybierz temat zapytania —'}
</option>
{isDe ? (
<>
<option value="Steuererklärung">Steuererklärung</option>
<option value="Steuerbescheidprüfung">Steuerbescheidprüfung</option>
<option value="Kindergeld / Riester-Rente">Kindergeld / Riester-Rente</option>
<option value="Sonstiges">Sonstiges</option>
</>
) : (
<>
<option value="Rozliczenie roczne (Steuererklärung)">Rozliczenie roczne (Steuererklärung)</option>
<option value="Sprawdzenie decyzji podatkowej (Steuerbescheid)">Sprawdzenie decyzji podatkowej (Steuerbescheid)</option>
<option value="Zasiłki i dopłaty (Kindergeld, Riester-Rente)">Zasiłki i dopłaty (Kindergeld, Riester-Rente)</option>
<option value="Inna sprawa">Inna sprawa</option>
</>
)}
</select>
</div>
<div>
<label htmlFor="name" className="block text-sm font-semibold text-foreground mb-2">
{isDe ? 'Vor- und Nachname' : 'Imię i nazwisko'} <span className="text-accent">*</span>
@@ -164,7 +199,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder={isDe ? 'z. B. Jan Kowalski' : 'np. Jan Kowalski'}
className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
/>
</div>
@@ -179,7 +214,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
placeholder="[email protected]"
className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
/>
</div>
@@ -194,7 +229,7 @@ export const ContactInfoBlock: React.FC<Props> = ({
value={formData.message}
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
placeholder={isDe ? 'Wie können wir Ihnen helfen?' : 'W czym możemy Ci pomóc? Opisz krótko swoją sprawę...'}
className="w-full px-4 py-3 bg-background border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-y"
className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-y"
/>
</div>