You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.3 KiB
87 lines
3.3 KiB
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function Footer() {
|
|
const [email, setEmail] = useState('');
|
|
|
|
const handleNewsletterSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log('Newsletter subscription:', email);
|
|
alert('Thank you for subscribing!');
|
|
setEmail('');
|
|
};
|
|
|
|
return (
|
|
<footer style={{ backgroundColor: '#00171F' }} className="text-white py-12 md:py-16">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
|
|
{/* Brand Section */}
|
|
<div>
|
|
<h3 className="text-2xl font-bold mb-4">Multilingual Family Space</h3>
|
|
<p className="mb-6" style={{ color: '#EED2CC' }}>
|
|
Guiding bilingual families and language learners on their multilingual journey.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Newsletter Section */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold mb-4">Stay Connected</h4>
|
|
<form onSubmit={handleNewsletterSubmit} className="space-y-3">
|
|
<input
|
|
type="email"
|
|
placeholder="Email*"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-4 py-2 rounded-lg text-white outline-none"
|
|
style={{ backgroundColor: '#7D6E5E', borderColor: '#7D6E5E', color: '#FBF7F4' }}
|
|
placeholder="Email*"
|
|
onFocus={(e) => { e.target.style.borderColor = '#EED2CC'; e.target.style.boxShadow = '0 0 0 2px rgba(238, 210, 204, 0.3)'; }}
|
|
onBlur={(e) => { e.target.style.borderColor = '#7D6E5E'; e.target.style.boxShadow = 'none'; }}
|
|
/>
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id="subscribe"
|
|
defaultChecked
|
|
className="w-4 h-4 rounded"
|
|
style={{ accentColor: '#7D6E5E', backgroundColor: '#7D6E5E', borderColor: '#7D6E5E' }}
|
|
/>
|
|
<label htmlFor="subscribe" className="text-sm" style={{ color: '#EED2CC' }}>
|
|
Yes, subscribe me to your newsletter.
|
|
</label>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
style={{ backgroundColor: '#00171F' }}
|
|
className="w-full text-white px-6 py-2 rounded-lg hover:opacity-90 transition-colors font-medium"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Info */}
|
|
<div>
|
|
<h4 className="text-lg font-semibold mb-4">Contact Data</h4>
|
|
<div className="space-y-2" style={{ color: '#EED2CC' }}>
|
|
<p>monika@polishlessonsamsterdam.com</p>
|
|
<p>(+31) 682 773 830</p>
|
|
<p className="mt-4">Comsuo Professional</p>
|
|
<p>KVK nr. 72903422</p>
|
|
<p>BTW ID NL002462839B89</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="mt-8 pt-8 text-center text-sm" style={{ borderTopColor: '#7D6E5E', color: '#EED2CC' }}>
|
|
<p>Copyright 2025. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|