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.
81 lines
2.9 KiB
81 lines
2.9 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 className="bg-slate-800 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="text-slate-300 mb-6">
|
|
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 bg-slate-700 border border-slate-600 text-white placeholder-slate-400 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none"
|
|
/>
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id="subscribe"
|
|
defaultChecked
|
|
className="w-4 h-4 text-orange-600 bg-slate-700 border-slate-600 rounded focus:ring-orange-500"
|
|
/>
|
|
<label htmlFor="subscribe" className="text-sm text-slate-300">
|
|
Yes, subscribe me to your newsletter.
|
|
</label>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-orange-600 text-white px-6 py-2 rounded-lg hover:bg-orange-700 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 text-slate-300">
|
|
<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 border-t border-slate-700 text-center text-sm text-slate-400">
|
|
<p>Copyright 2025. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|
|
|