update
This commit is contained in:
Concept Agent
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="site-root" content="/">
|
||||
<title>{{title}}</title>
|
||||
<meta name="description" content="{{meta_description}}">
|
||||
<link rel="canonical" href="{{canonical}}">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/components.css">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
"name": "Floor It Hardwood Floors",
|
||||
"url": "{{canonical}}",
|
||||
"telephone": "+17166021429",
|
||||
"email": "floorithardwoods@gmail.com",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"addressLocality": "{{city}}",
|
||||
"addressRegion": "{{state}}",
|
||||
"addressCountry": "US"
|
||||
},
|
||||
"areaServed": "{{schema_area}}",
|
||||
"openingHours": "Mo-Sa 08:00-17:00",
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.9",
|
||||
"reviewCount": "50"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="page-hero">
|
||||
<div class="container page-hero-inner">
|
||||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||||
<a href="/">Home</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<a href="/locations/">Locations</a>
|
||||
<span class="breadcrumb-sep">/</span>
|
||||
<span>{{city}}, {{state}}</span>
|
||||
</nav>
|
||||
<span class="eyebrow">{{hero_eyebrow}}</span>
|
||||
<h1>{{hero_h1}}</h1>
|
||||
<p class="lead">{{hero_lead}}</p>
|
||||
<div class="cta-group" style="margin-top:2rem;">
|
||||
<a href="/contact/" class="btn btn--primary btn--lg">Request an Estimate</a>
|
||||
<a href="tel:+17166021429" class="btn btn--outline-light btn--lg">Call (716) 602-1429</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- OVERVIEW -->
|
||||
<section class="section section--light">
|
||||
<div class="container">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;">
|
||||
<div data-animate="left">
|
||||
<span class="eyebrow">{{overview_eyebrow}}</span>
|
||||
<h2>{{overview_h2}}</h2>
|
||||
<div class="divider"></div>
|
||||
<p style="color:var(--smoke);">{{overview_body_1}}</p>
|
||||
<p style="margin-top:1rem;color:var(--smoke);">{{overview_body_2}}</p>
|
||||
<div class="cta-group mt-8">
|
||||
<a href="/contact/" class="btn btn--primary">Request Estimate</a>
|
||||
<a href="tel:+17166021429" class="btn btn--outline-dark">(716) 602-1429</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-animate="right">
|
||||
<div style="display:flex;flex-direction:column;gap:1rem;">
|
||||
<div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
|
||||
<div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_1_num}}</div>
|
||||
<div>
|
||||
<strong style="display:block;font-size:var(--text-sm);">{{stat_1_label}}</strong>
|
||||
<span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_1_sub}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
|
||||
<div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_2_num}}</div>
|
||||
<div>
|
||||
<strong style="display:block;font-size:var(--text-sm);">{{stat_2_label}}</strong>
|
||||
<span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_2_sub}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:var(--grain);border-radius:var(--radius-lg);padding:1.5rem;display:flex;gap:1rem;align-items:center;">
|
||||
<div style="font-size:2rem;font-weight:800;color:var(--amber);flex-shrink:0;line-height:1;">{{stat_3_num}}</div>
|
||||
<div>
|
||||
<strong style="display:block;font-size:var(--text-sm);">{{stat_3_label}}</strong>
|
||||
<span style="font-size:var(--text-xs);color:var(--smoke);">{{stat_3_sub}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<section class="section section--alt">
|
||||
<div class="container">
|
||||
<div class="section-header section-header--center">
|
||||
<span class="eyebrow">{{city}} Services</span>
|
||||
<h2>Hardwood Floor Services in {{city}}, {{state}}</h2>
|
||||
<p>{{services_intro}}</p>
|
||||
</div>
|
||||
<div class="grid grid--auto-3">
|
||||
<div class="service-card" data-animate="up">
|
||||
<div class="service-card-body">
|
||||
<h3>{{service_1_title}}</h3>
|
||||
<p>{{service_1_body}}</p>
|
||||
</div>
|
||||
<div class="service-card-footer">
|
||||
<a href="/services/floor-refinishing/" class="service-card-link">Learn More</a>
|
||||
<a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card" data-animate="up" data-delay="2">
|
||||
<div class="service-card-body">
|
||||
<h3>{{service_2_title}}</h3>
|
||||
<p>{{service_2_body}}</p>
|
||||
</div>
|
||||
<div class="service-card-footer">
|
||||
<a href="/services/floor-restoration/" class="service-card-link">Learn More</a>
|
||||
<a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card" data-animate="up" data-delay="3">
|
||||
<div class="service-card-body">
|
||||
<h3>{{service_3_title}}</h3>
|
||||
<p>{{service_3_body}}</p>
|
||||
</div>
|
||||
<div class="service-card-footer">
|
||||
<a href="/services/floor-sanding/" class="service-card-link">Learn More</a>
|
||||
<a href="/contact/" class="btn btn--ghost btn--sm">Book Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="section section--dark">
|
||||
<div class="container">
|
||||
<div style="display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:start;">
|
||||
<div data-animate="left">
|
||||
<span class="eyebrow">{{city}} FAQ</span>
|
||||
<h2>Common Questions from {{city}} Homeowners</h2>
|
||||
<div class="divider"></div>
|
||||
<p style="color:var(--ash);">Have a question specific to your {{city}} home? Call us at <a href="tel:+17166021429" style="color:var(--amber);font-weight:700;">(716) 602-1429</a></p>
|
||||
</div>
|
||||
<div class="faq-list" data-animate="up">
|
||||
{{faq_items}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ESTIMATE FORM -->
|
||||
<section class="section contact-section">
|
||||
<div class="container">
|
||||
<div class="contact-layout">
|
||||
<div>
|
||||
<span class="eyebrow">{{city}} Estimate</span>
|
||||
<h2>{{form_h2}}</h2>
|
||||
<div class="divider"></div>
|
||||
<p class="lead">Tell us about your floors and we will respond within 1 business hour.</p>
|
||||
<div class="contact-info-list" style="margin-top:2rem;">
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/></svg>
|
||||
</div>
|
||||
<div><h5>Phone</h5><a href="tel:+17166021429">(716) 602-1429</a></div>
|
||||
</div>
|
||||
<div class="contact-info-item">
|
||||
<div class="contact-info-icon">
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
|
||||
</div>
|
||||
<div><h5>Hours</h5><p>Monday to Saturday: 8:00 AM to 5:00 PM</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-form-wrap" data-animate="right">
|
||||
<h3 style="margin-bottom:1.5rem;font-size:var(--text-xl);">{{form_h2}}</h3>
|
||||
<form class="estimate-form" novalidate>
|
||||
<input type="hidden" name="location" value="{{city}}, {{state}}">
|
||||
<div class="form-grid form-grid--2">
|
||||
<div class="form-field">
|
||||
<label for="name">Full Name <span aria-hidden="true">*</span></label>
|
||||
<input type="text" id="name" name="name" autocomplete="name" required>
|
||||
<span class="err-msg" role="alert"></span>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="phone">Phone Number <span aria-hidden="true">*</span></label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="(716) 000-0000" autocomplete="tel" required>
|
||||
<span class="err-msg" role="alert"></span>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="email">Email Address <span aria-hidden="true">*</span></label>
|
||||
<input type="email" id="email" name="email" autocomplete="email" required>
|
||||
<span class="err-msg" role="alert"></span>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="address">{{form_address_label}} <span aria-hidden="true">*</span></label>
|
||||
<input type="text" id="address" name="address" autocomplete="street-address" required>
|
||||
<span class="err-msg" role="alert"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field" style="margin-top:1.25rem;">
|
||||
<label for="service">Service Needed <span aria-hidden="true">*</span></label>
|
||||
<select id="service" name="service" required>
|
||||
<option value="">Select a service</option>
|
||||
<option value="refinishing">Floor Refinishing</option>
|
||||
<option value="restoration">Floor Restoration</option>
|
||||
<option value="sanding">Floor Sanding</option>
|
||||
<option value="installation">Floor Installation</option>
|
||||
<option value="unsure">Not Sure</option>
|
||||
</select>
|
||||
<span class="err-msg" role="alert"></span>
|
||||
</div>
|
||||
<div class="form-field" style="margin-top:1.25rem;">
|
||||
<label for="message">Additional Details</label>
|
||||
<textarea id="message" name="message" placeholder="Describe your floors or the issue you are experiencing."></textarea>
|
||||
</div>
|
||||
<div class="form-trust">
|
||||
<div class="form-trust-item">1 business hour response</div>
|
||||
<div class="form-trust-item">No obligation</div>
|
||||
<div class="form-trust-item">Licensed & insured</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn--primary btn--full btn--lg" style="margin-top:1.25rem;">{{form_submit}}</button>
|
||||
<div class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
|
||||
<script src="/assets/js/components.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
<script src="/assets/js/form.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user