bender/a97a02cf-6585-4cd6-94f9-c90f6a08bd94
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/components/sections/contact/ContactCenter.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:56:32 +00:00
parent f51a62b4a7
commit 1cbbd49125
1 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/sections/contact/ContactCenter.tsx
View File

@@ -47,11 +47,11 @@ export default function ContactCenter({
? 'bg-gradient-to-br from-blue-50 via-white to-purple-50'
: 'bg-white';
const invertedBg = useInvertedBackground ? 'bg-slate-900 text-white' : '';
const invertedClass = useInvertedBackground ? 'bg-slate-900 text-white' : '';
return (
<section className={`relative py-20 px-4 sm:px-6 lg:px-8 ${bgClass} ${invertedBg}`}>
<div className="max-w-2xl mx-auto">
<section className={`relative py-20 px-4 sm:px-6 lg:px-8 ${bgClass}`}>
<div className="max-w-4xl mx-auto">
{/* Tag */}
<div
className={`flex items-center justify-center gap-2 mb-6 ${
@@ -65,41 +65,50 @@ export default function ContactCenter({
</div>
{/* Title */}
<h2 className="text-4xl sm:text-5xl font-bold text-center mb-4 leading-tight">
<h2 className="text-4xl sm:text-5xl font-bold text-center mb-4 text-slate-900">
{title}
</h2>
{/* Description */}
<p className={`text-center text-lg mb-10 ${useInvertedBackground ? 'text-gray-300' : 'text-gray-600'}`}>
<p className="text-lg text-center text-slate-600 mb-12 max-w-2xl mx-auto">
{description}
</p>
{/* Form */}
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 mb-6">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={inputPlaceholder}
required
className={`flex-1 px-4 py-3 rounded-lg border transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 ${
useInvertedBackground
? 'bg-slate-800 border-slate-700 text-white placeholder-gray-400'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
}`}
/>
<button
type="submit"
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap"
>
{isSubmitted ? '✓ Subscribed' : buttonText}
</button>
</form>
{/* Form Container */}
<div className={`rounded-2xl p-8 sm:p-12 ${invertedClass} ${!useInvertedBackground ? 'bg-white shadow-lg border border-slate-200' : 'bg-slate-900'}`}>
<form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder={inputPlaceholder}
required
className={`flex-1 px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 ${
useInvertedBackground
? 'bg-slate-800 border-slate-700 text-white placeholder-slate-400'
: 'bg-slate-50 border-slate-300 text-slate-900 placeholder-slate-500'
}`}
/>
<button
type="submit"
className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 whitespace-nowrap"
>
{buttonText}
</button>
</form>
{/* Terms Text */}
<p className={`text-center text-sm ${useInvertedBackground ? 'text-gray-400' : 'text-gray-500'}`}>
{termsText}
</p>
{/* Success Message */}
{isSubmitted && (
<div className="mt-4 p-3 bg-green-100 border border-green-300 rounded-lg text-green-800 text-sm font-medium animate-in fade-in">
✓ Thank you for signing up!
</div>
)}
{/* Terms Text */}
<p className={`text-xs mt-6 text-center ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'}`}>
{termsText}
</p>
</div>
</div>
</section>
);