Concept Agent
277 lines
12 KiB
HTML
277 lines
12 KiB
HTML
<!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": "Service",
|
|
"name": "{{service_name}}",
|
|
"provider": {
|
|
"@type": "LocalBusiness",
|
|
"name": "Floor It Hardwood Floors",
|
|
"telephone": "+17166021429",
|
|
"email": "floorithardwoods@gmail.com",
|
|
"url": "https://floorithardwoodfloors.com",
|
|
"areaServed": "Erie County, NY"
|
|
},
|
|
"url": "{{canonical}}"
|
|
}
|
|
</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="/services/">Services</a>
|
|
<span class="breadcrumb-sep">/</span>
|
|
<span>{{service_name}}</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">Get a Free Estimate</a>
|
|
<a href="tel:+17166021429" class="btn btn--outline-light btn--lg">Call (716) 602-1429</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTRO -->
|
|
<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">What We Do</span>
|
|
<h2>{{intro_h2}}</h2>
|
|
<div class="divider"></div>
|
|
<p style="color:var(--smoke);">{{intro_body_1}}</p>
|
|
<p style="margin-top:1rem;color:var(--smoke);">{{intro_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="border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;background:var(--grain);">
|
|
<img src="{{hero_image}}" alt="{{service_name}} | Floor It Hardwood Floors" style="width:100%;height:100%;object-fit:cover;" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROCESS -->
|
|
<section class="section section--dark">
|
|
<div class="container">
|
|
<div class="section-header section-header--center">
|
|
<span class="eyebrow">How It Works</span>
|
|
<h2>Our {{service_name}} Process</h2>
|
|
<p>{{process_intro}}</p>
|
|
</div>
|
|
<div class="process-steps">
|
|
<div class="process-step" data-animate="up">
|
|
<div class="process-step-num">1</div>
|
|
<h3>{{step_1_title}}</h3>
|
|
<p>{{step_1_body}}</p>
|
|
</div>
|
|
<div class="process-step" data-animate="up" data-delay="2">
|
|
<div class="process-step-num">2</div>
|
|
<h3>{{step_2_title}}</h3>
|
|
<p>{{step_2_body}}</p>
|
|
</div>
|
|
<div class="process-step" data-animate="up" data-delay="3">
|
|
<div class="process-step-num">3</div>
|
|
<h3>{{step_3_title}}</h3>
|
|
<p>{{step_3_body}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BENEFITS -->
|
|
<section class="section section--alt">
|
|
<div class="container">
|
|
<div class="section-header section-header--center">
|
|
<span class="eyebrow">Why Choose Us</span>
|
|
<h2>What Sets Our {{service_name}} Apart</h2>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;">
|
|
<div class="benefit-card" data-animate="left">
|
|
<div class="benefit-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<h4>{{benefit_1_title}}</h4>
|
|
<p>{{benefit_1_body}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="benefit-card" data-animate="right">
|
|
<div class="benefit-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 0 0 .95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 0 0-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 0 0-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 0 0-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 0 0 .951-.69l1.519-4.674z"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<h4>{{benefit_2_title}}</h4>
|
|
<p>{{benefit_2_body}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="benefit-card" data-animate="left" data-delay="2">
|
|
<div class="benefit-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<h4>{{benefit_3_title}}</h4>
|
|
<p>{{benefit_3_body}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="benefit-card" data-animate="right" data-delay="2">
|
|
<div class="benefit-icon">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
</div>
|
|
<div class="benefit-body">
|
|
<h4>{{benefit_4_title}}</h4>
|
|
<p>{{benefit_4_body}}</p>
|
|
</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">{{service_name}} FAQ</span>
|
|
<h2>Common Questions</h2>
|
|
<div class="divider"></div>
|
|
<p style="color:var(--ash);">Have a question? Call us at <a href="tel:+17166021429" style="color:var(--amber);font-weight:700;">(716) 602-1429</a> and we will answer it directly.</p>
|
|
</div>
|
|
<div class="faq-list" data-animate="up">
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<h4>{{faq_1_q}}</h4>
|
|
<div class="faq-icon" aria-hidden="true"></div>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-inner">{{faq_1_a}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<h4>{{faq_2_q}}</h4>
|
|
<div class="faq-icon" aria-hidden="true"></div>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-inner">{{faq_2_a}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<h4>{{faq_3_q}}</h4>
|
|
<div class="faq-icon" aria-hidden="true"></div>
|
|
</div>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-inner">{{faq_3_a}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ESTIMATE FORM -->
|
|
<section class="section contact-section">
|
|
<div class="container">
|
|
<div class="contact-layout">
|
|
<div>
|
|
<span class="eyebrow">Free 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="service_page" value="{{service_name}}">
|
|
<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">Property Address <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="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>
|