173 lines
7.6 KiB
Plaintext
173 lines
7.6 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><%= businessName %> — <%= website.heroTitle %></title>
|
|
<link rel="stylesheet" href="<%= baseUrl %>/assets/site.css">
|
|
<style>
|
|
:root {
|
|
--primary: <%= colorScheme.primary %>;
|
|
--primary-dark: <%= colorScheme.primaryDark %>;
|
|
--primary-light: <%= colorScheme.primaryLight %>;
|
|
--accent: <%= colorScheme.accent %>;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="nav-inner">
|
|
<a href="<%= baseUrl %>/" class="nav-brand">
|
|
<% if (logoUrl) { %>
|
|
<img src="<%= logoUrl %>" alt="<%= businessName %> logo">
|
|
<% } %>
|
|
<%= businessName %>
|
|
</a>
|
|
<button class="nav-mobile-toggle" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Toggle menu">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
|
|
</button>
|
|
<ul class="nav-links">
|
|
<li><a href="<%= baseUrl %>/">Home</a></li>
|
|
<li><a href="<%= baseUrl %>/#how-it-works">How It Works</a></li>
|
|
<li><a href="<%= baseUrl %>/#faq">FAQ</a></li>
|
|
<li><a href="<%= baseUrl %>/contact" class="nav-cta">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-badge">✦ Trusted Local Business</div>
|
|
<h1><%= website.heroTitle %></h1>
|
|
<p class="hero-subtitle"><%= website.heroSubtitle %></p>
|
|
<a href="<%= baseUrl %>/contact" class="hero-cta">
|
|
<%= website.ctaText %>
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14m-7-7l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>About <%= businessName %></h2>
|
|
<p><%= website.expandedDescription %></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pain Points -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Why Choose Us</h2>
|
|
<p>Here's what sets us apart from the rest</p>
|
|
</div>
|
|
<div class="painpoints-grid">
|
|
<% website.painpoints.forEach((pp) => { %>
|
|
<div class="painpoint-card">
|
|
<div class="painpoint-icon">
|
|
<%- getIcon(pp.icon) %>
|
|
</div>
|
|
<h3><%= pp.title %></h3>
|
|
<p><%= pp.description %></p>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="section" id="how-it-works">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>How It Works</h2>
|
|
<p>Getting started is simple</p>
|
|
</div>
|
|
<div class="steps-grid">
|
|
<% website.howItWorks.forEach((step) => { %>
|
|
<div class="step-card">
|
|
<div class="step-number"><%= step.step %></div>
|
|
<h3><%= step.title %></h3>
|
|
<p><%= step.description %></p>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section class="section section-alt" id="faq">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Frequently Asked Questions</h2>
|
|
<p>Answers to common questions about our services</p>
|
|
</div>
|
|
<div class="faq-list">
|
|
<% website.faqItems.forEach((faq) => { %>
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="this.parentElement.classList.toggle('open'); const a = this.nextElementSibling; a.style.maxHeight = a.style.maxHeight ? null : a.scrollHeight + 'px';">
|
|
<span><%= faq.question %></span>
|
|
<svg class="faq-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-inner"><%= faq.answer %></div>
|
|
</div>
|
|
</div>
|
|
<% }); %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-section">
|
|
<div class="container">
|
|
<h2>Ready to Get Started?</h2>
|
|
<p>Reach out today and discover how we can help your business thrive.</p>
|
|
<a href="<%= baseUrl %>/contact" class="hero-cta">
|
|
Contact Us Today
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14m-7-7l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand"><%= businessName %></div>
|
|
<ul class="footer-links">
|
|
<li><a href="<%= baseUrl %>/">Home</a></li>
|
|
<li><a href="<%= baseUrl %>/contact">Contact</a></li>
|
|
<li><a href="<%= baseUrl %>/privacy-policy">Privacy Policy</a></li>
|
|
<li><a href="<%= baseUrl %>/terms">Terms of Service</a></li>
|
|
</ul>
|
|
<div class="footer-copy">© <%= year %> <%= businessName %>. All rights reserved. | <%= businessAddress %></div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|
|
<%
|
|
function getIcon(name) {
|
|
const icons = {
|
|
shield: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
|
|
clock: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
|
|
chart: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
|
|
heart: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>',
|
|
star: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
|
|
zap: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
|
|
target: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>',
|
|
users: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>',
|
|
check: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
|
|
phone: '<svg class="icon-svg" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>',
|
|
};
|
|
return icons[name] || icons.star;
|
|
}
|
|
%>
|