388 lines
14 KiB
HTML
388 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Request a Quote | HER</title>
|
||
|
||
|
||
<meta name="description" content="Request a quote from Diana — San Francisco's trusted handywoman. Tell her about your project and she'll get back to you within 1–2 business days.">
|
||
|
||
|
||
<link rel="canonical" href="https://her-sf.com/contact/">
|
||
|
||
|
||
<meta property="og:title" content="Request a Quote | HER">
|
||
<meta property="og:description" content="Request a quote from Diana — San Francisco's trusted handywoman. Tell her about your project and she'll get back to you within 1–2 business days.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://her-sf.com/contact/">
|
||
<meta property="og:image" content="https://her-sf.com/assets/diana_photo-min-1-scaled.webp">
|
||
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Request a Quote | HER">
|
||
<meta name="twitter:description" content="Request a quote from Diana — San Francisco's trusted handywoman. Tell her about your project and she'll get back to you within 1–2 business days.">
|
||
<meta name="twitter:image" content="https://her-sf.com/assets/diana_photo-min-1-scaled.webp">
|
||
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600&display=swap">
|
||
|
||
<link rel="stylesheet" href="../css/main.css">
|
||
|
||
|
||
|
||
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"@id": "https://her-sf.com/#business",
|
||
"name": "Home Enhancement and Renovation — HER",
|
||
"url": "https://her-sf.com",
|
||
"telephone": "+16508339380",
|
||
"email": "diana@spotlighthis.com",
|
||
"image": "https://her-sf.com/assets/diana_photo-min-1-scaled.webp",
|
||
"priceRange": "$$",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"addressLocality": "San Francisco",
|
||
"addressRegion": "CA",
|
||
"addressCountry": "US"
|
||
},
|
||
"geo": {
|
||
"@type": "GeoCoordinates",
|
||
"latitude": 37.7749,
|
||
"longitude": -122.4194
|
||
},
|
||
"areaServed": [
|
||
"San Francisco", "Oakland", "Berkeley", "San Jose", "Palo Alto",
|
||
"Marin County", "Tiburon", "Sausalito", "Daly City",
|
||
"South San Francisco", "Burlingame", "San Mateo", "Redwood City",
|
||
"Menlo Park", "Fremont", "Alameda"
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
|
||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||
|
||
<header class="nav" role="banner">
|
||
<div class="nav__inner container">
|
||
|
||
<a href="../index.html" class="nav__brand" aria-label="HER Home Enhancement & Restoration — Home">
|
||
<span class="nav__brand-her">HER</span>
|
||
<span class="nav__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="nav__brand-amp">&</span> Restoration</span>
|
||
</a>
|
||
|
||
<nav aria-label="Main navigation">
|
||
<ul class="nav__links" role="list">
|
||
<li><a href="../about/index.html">About</a></li>
|
||
<li><a href="../services/index.html">Services</a></li>
|
||
<li><a href="../testimonials/index.html">Testimonials</a></li>
|
||
<li><a href="../contact/index.html">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="nav__actions">
|
||
<a href="tel:+16508339380" class="nav__phone" aria-label="Call Diana at (650) 833-9380">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16h.5a2 2 0 0 1 .02.92z"/>
|
||
</svg>
|
||
</a>
|
||
|
||
<a href="../contact/index.html" class="btn btn--primary" style="display:none" id="nav-cta">Request a Quote</a>
|
||
|
||
<button
|
||
class="nav__toggle"
|
||
aria-label="Open menu"
|
||
aria-expanded="false"
|
||
aria-controls="nav-overlay"
|
||
>
|
||
<span class="nav__bar"></span>
|
||
<span class="nav__bar"></span>
|
||
<span class="nav__bar"></span>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="nav__overlay" id="nav-overlay" hidden>
|
||
<button class="nav__overlay-close" aria-label="Close menu">✕</button>
|
||
<nav aria-label="Mobile navigation">
|
||
<ul role="list">
|
||
<li><a href="../about/index.html">About</a></li>
|
||
<li><a href="../services/index.html">Services</a></li>
|
||
<li><a href="../testimonials/index.html">Testimonials</a></li>
|
||
<li><a href="../contact/index.html">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
<a href="../contact/index.html" class="btn btn--ghost-white btn--full">Request a Quote</a>
|
||
<a href="tel:+16508339380" class="nav__overlay-phone">(650) 833-9380</a>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
<main id="main-content">
|
||
|
||
|
||
<section class="page-hero bg-graphite">
|
||
<div class="page-hero__inner container">
|
||
<p class="section-eyebrow">Get in touch</p>
|
||
<h1 class="page-hero__title">Request a Quote.</h1>
|
||
<p class="page-hero__lead">Tell Diana about your project. She responds within 1–2 business days.</p>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="contact-page section">
|
||
<div class="contact-page__grid container">
|
||
|
||
|
||
<div>
|
||
<form class="quote-form" id="quote-form" novalidate aria-label="Quote request form">
|
||
|
||
|
||
<div class="visually-trap" aria-hidden="true">
|
||
<label for="website">Leave this blank</label>
|
||
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
|
||
</div>
|
||
|
||
|
||
<div class="form-error-banner" role="alert" aria-live="assertive" hidden>
|
||
<p>Please correct the errors below before sending.</p>
|
||
</div>
|
||
|
||
|
||
<div class="form-field">
|
||
<label for="name">Your name <span aria-hidden="true">*</span></label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
name="name"
|
||
required
|
||
autocomplete="name"
|
||
aria-required="true"
|
||
aria-describedby="name-error"
|
||
>
|
||
<p class="form-field__error" id="name-error" aria-live="polite"></p>
|
||
</div>
|
||
|
||
|
||
<div class="form-field">
|
||
<label for="address">Project address <span aria-hidden="true">*</span></label>
|
||
<input
|
||
type="text"
|
||
id="address"
|
||
name="address"
|
||
required
|
||
autocomplete="off"
|
||
aria-required="true"
|
||
aria-describedby="address-hint address-error"
|
||
>
|
||
<p class="form-field__hint" id="address-hint">Where is the work located? City or full address.</p>
|
||
<p class="form-field__error" id="address-error" aria-live="polite"></p>
|
||
</div>
|
||
|
||
|
||
<div class="form-field">
|
||
<label for="phone">Phone number <span aria-hidden="true">*</span></label>
|
||
<input
|
||
type="tel"
|
||
id="phone"
|
||
name="phone"
|
||
required
|
||
inputmode="tel"
|
||
autocomplete="tel"
|
||
aria-required="true"
|
||
aria-describedby="phone-error"
|
||
>
|
||
<p class="form-field__error" id="phone-error" aria-live="polite"></p>
|
||
</div>
|
||
|
||
|
||
<div class="form-field">
|
||
<label for="email">Email address <span aria-hidden="true">*</span></label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
name="email"
|
||
required
|
||
inputmode="email"
|
||
autocomplete="email"
|
||
aria-required="true"
|
||
aria-describedby="email-error"
|
||
>
|
||
<p class="form-field__error" id="email-error" aria-live="polite"></p>
|
||
</div>
|
||
|
||
|
||
<div class="form-field">
|
||
<label for="description">Project description <span aria-hidden="true">*</span></label>
|
||
<textarea
|
||
id="description"
|
||
name="description"
|
||
rows="5"
|
||
required
|
||
aria-required="true"
|
||
aria-describedby="description-hint description-char-count description-error"
|
||
></textarea>
|
||
<p class="form-field__hint" id="description-hint">What needs to be fixed, replaced, or improved?</p>
|
||
<p class="form-field__char-count" id="description-char-count" aria-live="polite"></p>
|
||
<p class="form-field__error" id="description-error" aria-live="polite"></p>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn--primary form__submit">Send My Request</button>
|
||
|
||
|
||
<div class="form-success" role="status" hidden>
|
||
<p class="form-success__icon" aria-hidden="true">✓</p>
|
||
<h2 class="form-success__title">Your request is on its way!</h2>
|
||
<p class="form-success__body">Diana will review your request and get back to you within 1–2 business days. If your project is urgent, you can also reach her directly at <a href="tel:+16508339380">(650) 833-9380</a>.</p>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
|
||
|
||
<aside class="contact-secondary">
|
||
<h2>Other ways to reach Diana</h2>
|
||
|
||
<div class="contact-secondary__method">
|
||
<span class="contact-secondary__icon" aria-hidden="true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 8.78a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.5 16h.5a2 2 0 0 1 .02.92z"/>
|
||
</svg>
|
||
</span>
|
||
<div>
|
||
<p class="contact-secondary__label">Call or text</p>
|
||
<a href="tel:+16508339380" class="contact-secondary__value">(650) 833-9380</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-secondary__method">
|
||
<span class="contact-secondary__icon" aria-hidden="true">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
</span>
|
||
<div>
|
||
<p class="contact-secondary__label">Email</p>
|
||
<a href="mailto:diana@spotlighthis.com" class="contact-secondary__value">diana@spotlighthis.com</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p>For urgent repairs, calling is fastest.</p>
|
||
|
||
<p class="contact-secondary__area">Diana serves San Francisco and the Bay Area (within 50 miles).</p>
|
||
</aside>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="footer__inner container">
|
||
|
||
<div>
|
||
<a href="../index.html" class="footer__brand" aria-label="HER Home Enhancement & Restoration — Home">
|
||
<span class="footer__brand-her">HER</span>
|
||
<span class="footer__brand-tagline" aria-hidden="true">Home Enhancement<br><span class="footer__brand-amp">&</span> Restoration</span>
|
||
</a>
|
||
</div>
|
||
|
||
<nav aria-label="Footer navigation">
|
||
<p class="footer__nav-heading">Services in the Bay Area</p>
|
||
<div class="footer__nav-cols">
|
||
<ul class="footer__nav" role="list">
|
||
|
||
|
||
<li><a href="../services/painting/index.html">Painting</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/tile-setting/index.html">Tile Setting</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/drywall/index.html">Drywall & Sheetrocking</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/plumbing/index.html">Minor Plumbing</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/electrical/index.html">Minor Electrical</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
<ul class="footer__nav" role="list">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="../services/carpentry-and-mounting/index.html">Carpentry & Mounting</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/flooring/index.html">Flooring & Wood Refinishing</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/security-safety/index.html">Security & Safety Equipment</a></li>
|
||
|
||
|
||
|
||
<li><a href="../services/boat-work/index.html">Boat Work</a></li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<div>
|
||
<p class="footer__nav-heading">Contact</p>
|
||
<div class="footer__contact">
|
||
<a href="tel:+16508339380">(650) 833-9380</a>
|
||
<a href="mailto:diana@spotlighthis.com">diana@spotlighthis.com</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer__bottom">
|
||
<div class="container">
|
||
<p>© 2026 Home Enhancement & Restoration — HER. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<script src="../js/main.js" defer></script>
|
||
</body>
|
||
</html>
|