cca4ea1d55
- All 8 home page sections: Hero, Locations slider, WhyParents accordion, Birthday pricing cards, Video, Gallery, Reviews slider, News - UI components: NavLink, BtnPrimary, BtnGradient, BtnDetails, AccordionItem - Layout: sticky Header (NavLink + BtnPrimary), Footer with logo - Figma Code Connect: 5 components published (.figma.tsx + figma.config.json) - Public assets: all Figma images and SVGs exported - Pages: /kvytky, /lokatsii, /blog, /dni-narodzhennia, /grupovi-vidviduvannia - Tests: Vitest unit/api suites, Playwright e2e screenshots - Payload CMS: blocks, collections, seed data updates - Hero negative-margin to extend behind sticky header - Custom Tailwind breakpoints: lg=1440px, xl=1920px - Fix ESLint config: drop FlatCompat, use eslint-config-next flat export - Add tsconfig.tsbuildinfo, test-results/, agentdb.rvf* to .gitignore Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
|
||
interface NewsletterFormBlockProps {
|
||
title?: string | null
|
||
subtitle?: string | null
|
||
ctaLabel?: string | null
|
||
}
|
||
|
||
export function NewsletterFormBlockComponent({ title, subtitle, ctaLabel }: NewsletterFormBlockProps) {
|
||
const [email, setEmail] = useState('')
|
||
const [submitted, setSubmitted] = useState(false)
|
||
|
||
function handleSubmit(e: React.FormEvent) {
|
||
e.preventDefault()
|
||
setSubmitted(true)
|
||
}
|
||
|
||
return (
|
||
<section className="py-[20px] md:py-[60px] lg:py-[40px] bg-[#223e0d]">
|
||
<div className="max-w-[1204px] mx-auto px-8 text-center">
|
||
{title && (
|
||
<h2
|
||
className="font-bold text-[24px] md:text-[32px] text-white uppercase mb-4"
|
||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||
>
|
||
{title}
|
||
</h2>
|
||
)}
|
||
{subtitle && (
|
||
<p className="text-white/80 text-[16px] mb-8" style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}>
|
||
{subtitle}
|
||
</p>
|
||
)}
|
||
{submitted ? (
|
||
<p className="text-[#fdcf54] font-bold text-[18px]">Дякуємо за підписку!</p>
|
||
) : (
|
||
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 max-w-[500px] mx-auto">
|
||
<input
|
||
type="email"
|
||
required
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
placeholder="Ваш email"
|
||
className="flex-1 px-5 py-3 rounded-[64px] text-[#272727] text-[16px] outline-none focus:ring-2 focus:ring-[#f28b4a]"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
className="bg-[#f28b4a] text-white font-bold text-[16px] px-[30px] py-[10px] rounded-[64px] hover:shadow-[0_0_20px_0_#f28b4a] transition-shadow whitespace-nowrap"
|
||
style={{ fontFamily: 'var(--font-montserrat, Montserrat), sans-serif' }}
|
||
>
|
||
{ctaLabel ?? 'Підписатися'}
|
||
</button>
|
||
</form>
|
||
)}
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|