Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 3x 3x 3x 3x | 'use client';
import React, { useState } from 'react';
import { Section } from '../components/Section';
const Contact: React.FC = () => {
const [submitted, setSubmitted] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Simulate API call
setTimeout(() => setSubmitted(true), 500);
};
return (
<Section variant="white" className="min-h-screen">
<div className="max-w-2xl mx-auto">
<h1 className="text-3xl font-bold mb-4 text-center">Yhteydenottopyyntö</h1>
<p className="text-gray-600 text-center mb-10">
Onko sinulla kysyttävää varusteista tai koulutuksesta? Täytä alla oleva lomake, niin vastaamme mahdollisimman pian.
</p>
{submitted ? (
<div className="bg-green-50 text-green-800 p-8 rounded-xl text-center border border-green-200 shadow-sm">
<h3 className="font-bold text-xl mb-2">Viesti lähetetty!</h3>
<p>Kiitos yhteydenotostasi. Palaamme asiaan pian.</p>
</div>
) : (
<form onSubmit={handleSubmit} className="bg-white p-8 rounded-xl border border-gray-200 shadow-lg space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label className="block text-sm font-medium mb-1">Nimi</label>
<input required type="text" className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-black transition-colors" />
</div>
<div>
<label className="block text-sm font-medium mb-1">Sähköposti</label>
<input required type="email" className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-black transition-colors" />
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1">Puhelin</label>
<input type="tel" className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-black transition-colors" />
</div>
<div>
<label className="block text-sm font-medium mb-1">Aihe</label>
<select className="w-full p-3 border border-gray-200 rounded-xl bg-gray-50 focus:bg-white focus:border-black transition-colors">
<option>Tuotetiedustelu</option>
<option>Tilauskysely</option>
<option>Muu asia</option>
</select>
</div>
<div>
<label className="block text-sm font-medium mb-1">Viesti</label>
<textarea required className="w-full p-3 border border-gray-200 rounded-xl h-32 bg-gray-50 focus:bg-white focus:border-black transition-colors"></textarea>
</div>
<button type="submit" className="w-full bg-black text-white py-3 rounded-xl font-medium hover:bg-gray-800 transition-colors shadow-md hover:shadow-lg">
Lähetä viesti
</button>
</form>
)}
</div>
</Section>
);
};
export default Contact;
|