function Hero({ headline, underlined, subhead, heroBg, tweaks }) {
// headline: "Building Your Backyard Into An Outdoor Masterpiece"
// underlined: the word(s) to underline with the gold accent
const renderHeadline = () => {
if (!underlined) return headline;
const idx = headline.indexOf(underlined);
if (idx === -1) return headline;
const before = headline.slice(0, idx);
const after = headline.slice(idx + underlined.length);
return (
<>
{before}
{underlined}
{after}
);
};
return (
{/* Diagonal gold slash */}
{/* Sunburst — rays fan toward the quote card */}
Custom Decks · Patios · Outdoor Kitchens
{renderHeadline()}
{subhead}
BBBAngi
Trusted on Google, Facebook, Yelp, BBB & Angi
4.9 Rating
|A+ BBB|Based on 100+ reviews
);
}
function QuoteBar() {
const [form, setForm] = React.useState({ firstName: "", lastName: "", email: "", phone: "", help: "" });
const [smsTransactional, setSmsTransactional] = React.useState(false);
const [smsMarketing, setSmsMarketing] = React.useState(false);
const [errors, setErrors] = React.useState({});
const [submitted, setSubmitted] = React.useState(false);
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
const formatPhone = (raw) => {
const digits = (raw || "").replace(/\D/g, "").slice(0, 10);
if (digits.length < 4) return digits;
if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
};
const phoneDigits = (raw) => (raw || "").replace(/\D/g, "");
const onChange = (k) => (e) => {
let value = e.target.value;
if (k === "phone") value = formatPhone(value);
setForm((f) => ({ ...f, [k]: value }));
if (errors[k]) setErrors((er) => ({ ...er, [k]: undefined }));
};
const validate = () => {
const er = {};
if (!form.firstName.trim()) er.firstName = "Required";
if (!form.lastName.trim()) er.lastName = "Required";
if (!form.email.trim()) er.email = "Required";
else if (!EMAIL_RE.test(form.email.trim())) er.email = "Enter a valid email address";
const d = phoneDigits(form.phone);
if (!d) er.phone = "Required";
else if (d.length !== 10) er.phone = "Enter a 10-digit phone number";
else if (!/^[2-9]/.test(d)) er.phone = "Enter a valid phone number";
return er;
};
const onSubmit = (e) => {
e.preventDefault();
const er = validate();
if (Object.keys(er).length) {
setErrors(er);
return;
}
const fullName = `${form.firstName} ${form.lastName}`.trim();
const digits = phoneDigits(form.phone);
const payload = {
first_name: form.firstName.trim(),
last_name: form.lastName.trim(),
name: fullName,
full_name: fullName,
email: form.email.trim(),
phone: form.phone,
phone_e164: `+1${digits}`,
phone_digits: digits,
message: form.help.trim(),
sms_consent_transactional: smsTransactional,
sms_consent_marketing: smsMarketing,
sms_consent_text: "I consent to receive [type] messages from Victory Pro Deck Builders at the phone number provided. Message frequency may vary. Message and data rates may apply. Reply HELP for help or STOP to opt-out.",
consent_timestamp: new Date().toISOString(),
source: "victoryprodeckbuilders.com, Hero Quote Form",
page_url: typeof window !== "undefined" ? window.location.href : "",
submitted_at: new Date().toISOString(),
};
try {
fetch("https://services.leadconnectorhq.com/hooks/wFKub3WIwDYc1MGsKWHi/webhook-trigger/5a75157b-3bc0-407a-ba92-dd972552de6e", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
keepalive: true,
}).catch(() => {});
} catch (_) {}
setSubmitted(true);
};
if (submitted) {
const firstName = (form.firstName || "").trim();
return (
{firstName ? `Thanks, ${firstName}.` : "Thanks."} We got your request.
A member of the Victory Pro team will be in touch in just a couple minutes. Keep an eye on your phone, we'll send you a quick text shortly to continue the conversation.