← back to Small Business Builder
src/render/templates/template-1.js
295 lines
// Template 1 — "Editorial Warm"
// Magazine layout · big serif headline · ample whitespace · single-color photography
// Palette: cream / oxblood / charcoal · Typeface: Fraunces (serif) + Inter (UI)
// Inspired by Goop, Glossier, Aesop
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
const safeJSON = (o) => JSON.stringify(o).replace(/</g, '\\u003c');
// Hex color allowlist — blocks `</style><script>…` payloads from breaking out of the
// `--primary: ${primary}` interpolation below into a stored-XSS gadget.
const safeColor = (c, fb) => (typeof c === 'string' && /^#[0-9a-f]{3,8}$/i.test(c.trim())) ? c.trim() : fb;
function socialIcon(platform) {
const p = (platform || '').toLowerCase();
const icons = {
instagram: '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>',
tiktok: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M16 3v3a4 4 0 0 0 4 4v3a7 7 0 0 1-4-1.3V16a5 5 0 1 1-5-5h1v3h-1a2 2 0 1 0 2 2V3h3z"/></svg>',
x: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18 3h3l-7.5 8.6L22 21h-6.6l-5.2-6.4L4.4 21H1.4l8.1-9.3L1.5 3h6.7l4.7 5.9L18 3z"/></svg>',
twitter: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18 3h3l-7.5 8.6L22 21h-6.6l-5.2-6.4L4.4 21H1.4l8.1-9.3L1.5 3h6.7l4.7 5.9L18 3z"/></svg>',
linkedin: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M4 4h4v4H4zM4 10h4v10H4zM10 10h4v1.6c.6-1 2-1.9 3.6-1.9C20.5 9.7 22 11.5 22 14.5V20h-4v-5c0-1.4-.6-2.4-1.9-2.4S14 13.7 14 15v5h-4V10z"/></svg>',
facebook: '<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M13 22v-8h3l.5-4H13V7.5c0-1.1.4-1.8 1.9-1.8H17V2.2C16.5 2.1 15.3 2 14 2c-2.9 0-4.7 1.7-4.7 4.9V10H6v4h3.3v8H13z"/></svg>',
};
return icons[p] || '';
}
function hoursList(hours) {
if (!hours || typeof hours !== 'object') return '';
const order = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
const labels = { mon: 'Mon', tue: 'Tue', wed: 'Wed', thu: 'Thu', fri: 'Fri', sat: 'Sat', sun: 'Sun' };
return order
.filter((d) => hours[d])
.map((d) => `<dt>${labels[d]}</dt><dd>${esc(hours[d])}</dd>`)
.join('');
}
export function renderTemplate1(business, mockups = {}, options = {}) {
const b = business || {};
const hideAttribution = options.hideAttribution ?? b.tier === 'premium';
const primary = safeColor(b.color_primary, '#5C1A1B'); // oxblood
const accent = safeColor(b.color_accent, '#E8DCC4'); // cream
const services = Array.isArray(b.services) ? b.services.slice(0, 6) : [];
const gallery = Array.isArray(b.gallery_images) ? b.gallery_images.slice(0, 9) : [];
const socials = Array.isArray(b.socials) ? b.socials : [];
const lat = b.lat || 34.0522;
const lng = b.lng || -118.2437;
const heroBg = b.hero_image_url || 'https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1600&q=70&auto=format';
const mapAddress = [b.address, b.city, b.state].filter(Boolean).join(', ');
const yearsLine = b.years_in_business ? `${esc(b.years_in_business)} years on the chair` : '';
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${esc(b.name || 'Salon')} — ${esc(b.city || '')}</title>
<meta name="description" content="${esc(b.about_text || b.name || '')}">
<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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin>
<style>
:root {
--primary: ${primary};
--accent: ${accent};
--ink: #1a1a1a;
--paper: #faf6ef;
--rule: #d9cfbe;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.serif { font-family: 'Fraunces', Georgia, serif; font-weight: 300; letter-spacing: -0.02em; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
a { color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { opacity: 0.7; }
button, .cta { font-family: inherit; cursor: pointer; }
/* nav */
.nav { padding: 28px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); }
.nav-logo { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; border: none; color: var(--ink); }
.nav-links { display: flex; gap: 28px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links a { border: none; color: var(--ink); }
/* hero */
.hero { padding: 96px 0 120px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.hero-eyebrow { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 28px; }
.hero h1 { font-size: clamp(48px, 6.5vw, 88px); line-height: 0.98; margin-bottom: 32px; }
.hero h1 em { font-style: italic; color: var(--primary); font-weight: 300; }
.hero-tagline { font-family: 'Fraunces', serif; font-size: 20px; line-height: 1.4; max-width: 460px; color: #444; margin-bottom: 40px; font-weight: 300; }
.hero-cta { display: inline-block; background: var(--primary); color: var(--paper); padding: 18px 36px; border: none; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0; }
.hero-cta:hover { background: var(--ink); }
.hero-cta + .hero-cta { background: transparent; color: var(--primary); border: 1px solid var(--primary); margin-left: 12px; }
.hero-img { aspect-ratio: 4/5; background-size: cover; background-position: center; filter: sepia(0.18) saturate(0.85); border-radius: 0; }
/* about */
.section { padding: 96px 0; border-top: 1px solid var(--rule); }
.section-label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 24px; }
.about { display: grid; grid-template-columns: 1fr 2fr; gap: 96px; }
.about h2 { font-size: 44px; margin-bottom: 32px; }
.about p { font-size: 18px; line-height: 1.7; margin-bottom: 16px; max-width: 600px; color: #333; }
.about .owner-line { font-family: 'Fraunces', serif; font-style: italic; color: var(--primary); margin-top: 32px; font-size: 16px; }
/* services */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.service { padding: 40px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 32px; }
.service:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--rule); }
.service:nth-child(even) { padding-left: 40px; }
.service h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.service p { font-size: 14px; color: #555; max-width: 320px; }
.service-price { font-family: 'Fraunces', serif; font-size: 28px; color: var(--primary); white-space: nowrap; font-weight: 300; }
/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(0.15) saturate(0.9); cursor: pointer; transition: filter 0.4s; }
.gallery-grid img:hover { filter: none; }
/* contact + map */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact form { display: flex; flex-direction: column; gap: 16px; }
.contact label { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #666; }
.contact input, .contact textarea { font-family: inherit; font-size: 16px; padding: 14px 0; border: none; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 0; }
.contact input:focus, .contact textarea:focus { outline: none; border-bottom-color: var(--primary); }
.contact textarea { resize: vertical; min-height: 100px; }
.contact button { background: var(--primary); color: var(--paper); padding: 18px; border: none; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 12px; cursor: pointer; }
#map { width: 100%; height: 420px; border: 1px solid var(--rule); }
/* socials */
.socials { display: flex; gap: 20px; padding: 48px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); align-items: center; justify-content: center; }
.socials a { color: var(--primary); border: none; }
/* footer */
footer { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-grid h4 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 400; margin-bottom: 16px; color: var(--primary); }
.footer-grid dl { display: grid; grid-template-columns: 60px 1fr; gap: 6px 16px; font-size: 14px; }
.footer-grid dt { color: #888; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; padding-top: 2px; }
.footer-attr { text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #999; padding-top: 32px; border-top: 1px solid var(--rule); }
.footer-attr a { color: #999; border: none; }
@media (max-width: 720px) {
.container { padding: 0 20px; }
.nav-links { display: none; }
.hero, .about, .services, .contact-wrap, .footer-grid, .gallery-grid { grid-template-columns: 1fr !important; gap: 40px; }
.gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
.hero { padding: 48px 0 64px; }
.section { padding: 56px 0; }
.service:nth-child(odd) { border-right: none; padding-right: 0; }
.service:nth-child(even) { padding-left: 0; }
.hero-cta + .hero-cta { margin-left: 0; margin-top: 12px; display: block; text-align: center; }
}
</style>
</head>
<body>
<header class="container">
<nav class="nav">
<a class="nav-logo" href="#top">${esc(b.name || 'Salon')}</a>
<div class="nav-links">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#gallery">Gallery</a>
<a href="#book">Book</a>
</div>
</nav>
</header>
<section class="container hero" id="top">
<div>
<div class="hero-eyebrow">${esc(b.category || 'Salon')} — ${esc(b.city || '')}</div>
<h1 class="serif">A quiet practice in <em>${esc(b.category?.toLowerCase() || 'craft')}</em>, made with care.</h1>
<p class="hero-tagline">${esc(b.about_text?.slice(0, 140) || `Welcome to ${b.name}. Personal, considered, never rushed.`)}</p>
<a class="hero-cta" href="#book">Book Now</a>
<a class="hero-cta" href="#map">Get Directions</a>
</div>
<div class="hero-img" style="background-image: url('${esc(heroBg)}')"></div>
</section>
<section class="section container" id="about">
<div class="about">
<div>
<div class="section-label">About</div>
<h2 class="serif">Behind the chair.</h2>
</div>
<div>
<p>${esc(b.about_text || `${b.name} is a small, intentional space for guests who want unhurried, expert care.`)}</p>
${yearsLine ? `<p class="owner-line">— ${esc(b.owner_name || 'The owner')}, ${yearsLine}</p>` : (b.owner_name ? `<p class="owner-line">— ${esc(b.owner_name)}</p>` : '')}
</div>
</div>
</section>
<section class="section container" id="services">
<div class="section-label">Services</div>
<h2 class="serif" style="font-size: 44px; margin-bottom: 48px;">The menu.</h2>
<div class="services">
${services.map((s) => `
<div class="service">
<div>
<h3>${esc(s.name)}</h3>
${s.description ? `<p>${esc(s.description)}</p>` : ''}
</div>
<div class="service-price">${esc(s.price || '—')}</div>
</div>
`).join('')}
</div>
</section>
${gallery.length ? `
<section class="section container" id="gallery">
<div class="section-label">Gallery</div>
<h2 class="serif" style="font-size: 44px; margin-bottom: 48px;">In the room.</h2>
<div class="gallery-grid">
${gallery.map((g) => `<img loading="lazy" src="${esc(g.url)}" alt="${esc(g.alt || b.name)}" data-full="${esc(g.url)}">`).join('')}
</div>
</section>` : ''}
<section class="section container" id="book">
<div class="contact-wrap">
<div class="contact">
<div class="section-label">Inquiries</div>
<h2 class="serif" style="font-size: 36px; margin-bottom: 32px;">Drop a note.</h2>
<form id="lead-form">
<label>Name<input required name="name" type="text"></label>
<label>Email<input required name="email" type="email"></label>
<label>Phone<input name="phone" type="tel"></label>
<label>Message<textarea name="message" rows="4"></textarea></label>
<button type="submit">Send Inquiry</button>
<div id="lead-status" style="font-size: 13px; color: var(--primary); min-height: 18px;"></div>
</form>
</div>
<div>
<div class="section-label">Find us</div>
<h2 class="serif" style="font-size: 36px; margin-bottom: 32px;">${esc(mapAddress)}</h2>
<div id="map"></div>
</div>
</div>
</section>
${socials.length ? `
<section class="container">
<div class="socials">
${socials.map((s) => s.url ? `<a href="${esc(s.url)}" aria-label="${esc(s.platform)}" target="_blank" rel="noopener">${socialIcon(s.platform)}</a>` : '').join('')}
</div>
</section>` : ''}
<footer class="container">
<div class="footer-grid">
<div>
<h4>Hours</h4>
<dl>${hoursList(b.hours_json)}</dl>
</div>
<div>
<h4>Visit</h4>
<p style="font-size: 14px;">${esc(b.address || '')}<br>${esc(b.city || '')}${b.city && b.state ? ', ' : ''}${esc(b.state || '')}</p>
</div>
<div>
<h4>Reach</h4>
<p style="font-size: 14px;">${b.phone ? `<a href="tel:${esc(b.phone)}">${esc(b.phone)}</a><br>` : ''}${b.email ? `<a href="mailto:${esc(b.email)}">${esc(b.email)}</a>` : ''}</p>
</div>
</div>
${hideAttribution ? '' : `<div class="footer-attr">Powered by <a href="#">SmallBizBuilder</a></div>`}
</footer>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin defer></script>
<script>
window.__BIZ__ = ${safeJSON({ lat, lng, name: b.name, slug: b.slug })};
document.addEventListener('DOMContentLoaded', () => {
if (window.L && document.getElementById('map')) {
const map = L.map('map', { scrollWheelZoom: false }).setView([__BIZ__.lat, __BIZ__.lng], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', maxZoom: 19 }).addTo(map);
L.marker([__BIZ__.lat, __BIZ__.lng]).addTo(map).bindPopup(__BIZ__.name).openPopup();
}
const form = document.getElementById('lead-form');
if (form) form.addEventListener('submit', async (e) => {
e.preventDefault();
const fd = new FormData(form);
const payload = Object.fromEntries(fd.entries());
payload.business_slug = __BIZ__.slug;
const status = document.getElementById('lead-status');
status.textContent = 'Sending…';
try {
const r = await fetch('/api/leads', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) });
if (!r.ok) throw new Error();
status.textContent = 'Thank you. We\\'ll be in touch.';
form.reset();
} catch (err) { status.textContent = 'Could not send. Try phone or email above.'; }
});
document.querySelectorAll('.gallery-grid img').forEach(img => img.addEventListener('click', () => window.open(img.dataset.full, '_blank')));
});
</script>
</body>
</html>`;
}
export default renderTemplate1;
export const render = (b) => renderTemplate1(b);
export const meta = { id: 1, name: 'Editorial Warm', blurb: 'Magazine layout · serif · cream/oxblood' };