125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function StainingQuote() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
projectType: 'fence',
|
|
message: ''
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
|
setFormData({ ...formData, [e.target.name]: e.target.value });
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log('Form submitted:', formData);
|
|
alert('Thank you for your request! We will contact you shortly.');
|
|
};
|
|
|
|
return (
|
|
<section className="quote-cta quote-cta-orange" id="quote-section">
|
|
<div className="quote-inner">
|
|
<div className="quote-left">
|
|
<h2 className="text-white">TELL US WHAT YOU NEED<br />AND WHERE IT'S GOING.</h2>
|
|
<p className="text-white">
|
|
Get a wood staining quote and timeline within 2 business hours.
|
|
</p>
|
|
</div>
|
|
<div className="quote-form-card">
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="q-form-title">REQUEST A STAINING QUOTE</div>
|
|
<div className="q-form-sub text-white-70">Response within 2 business hours</div>
|
|
|
|
<div className="qrow">
|
|
<div>
|
|
<label className="ql text-white">YOUR NAME</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
className="qi"
|
|
placeholder="John Smith"
|
|
required
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="ql text-white">PHONE</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
className="qi"
|
|
placeholder="519-xxx-xxxx"
|
|
required
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="ql text-white">EMAIL</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
className="qi"
|
|
placeholder="you@email.com"
|
|
required
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
/>
|
|
|
|
<label className="ql text-white">SERVICE NEEDED</label>
|
|
<select
|
|
name="projectType"
|
|
className="qi"
|
|
value={formData.projectType}
|
|
onChange={handleChange}
|
|
>
|
|
<option value="">Select service...</option>
|
|
<option>Fence staining — new wood</option>
|
|
<option>Fence staining — existing / restoration</option>
|
|
<option>Deck staining — new wood</option>
|
|
<option>Deck staining — restoration</option>
|
|
<option>Pergola / structure staining</option>
|
|
<option>Log cabin / cedar siding</option>
|
|
<option>Pre-staining — fence boards before install</option>
|
|
<option>Expert Stain & Seal product only — contractor purchase</option>
|
|
<option>Multiple services — describe below</option>
|
|
</select>
|
|
|
|
<div className="qrow">
|
|
<div>
|
|
<label className="ql text-white">CITY / LOCATION</label>
|
|
<input
|
|
type="text"
|
|
name="location"
|
|
className="qi"
|
|
placeholder="Kitchener, Guelph..."
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="ql text-white">APPROXIMATE SIZE</label>
|
|
<input
|
|
type="text"
|
|
name="size"
|
|
className="qi"
|
|
placeholder="e.g. 150 ft fence / 400 sq ft deck"
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" className="qbtn btn-white-orange">SEND QUOTE REQUEST →</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|