← back to Small Business Builder
src/render/templates/template-2.js
315 lines
// Template 2 — "Bold & Loud"
// Full-bleed hero photo · oversized sans · saturated brand color · aggressive CTAs
// Palette: hot pink / electric blue / black · Typeface: Anton (display) + Inter (UI)
// Inspired by Bumble & Bumble, Drybar
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
const safeJSON = (o) => JSON.stringify(o).replace(/</g, '\\u003c');
// Hex color allowlist — see template-1.js for rationale (stored-XSS via `</style>` break-out).
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="24" height="24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 1.8.25 2.2.42.6.21 1 .47 1.4.88.4.4.67.81.88 1.4.17.46.36 1.05.42 2.2.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.06 1.2-.25 1.8-.42 2.2-.21.6-.47 1-.88 1.4-.4.4-.81.67-1.4.88-.46.17-1.05.36-2.2.42-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.06-1.8-.25-2.2-.42-.6-.21-1-.47-1.4-.88-.4-.4-.67-.81-.88-1.4-.17-.46-.36-1.05-.42-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.06-1.2.25-1.8.42-2.2.21-.6.47-1 .88-1.4.4-.4.81-.67 1.4-.88.46-.17 1.05-.36 2.2-.42C8.4 2.2 8.8 2.2 12 2.2zm0 6.3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm0 5.8a2.3 2.3 0 1 1 0-4.6 2.3 2.3 0 0 1 0 4.6zm4.5-6a.8.8 0 1 1 0-1.6.8.8 0 0 1 0 1.6z"/></svg>',
tiktok: '<svg viewBox="0 0 24 24" width="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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) => `<li><strong>${labels[d]}</strong> ${esc(hours[d])}</li>`)
.join('');
}
export function renderTemplate2(business, mockups = {}, options = {}) {
const b = business || {};
const hideAttribution = options.hideAttribution ?? b.tier === 'premium';
const primary = safeColor(b.color_primary, '#FF1F8F'); // hot pink
const accent = safeColor(b.color_accent, '#0046FF'); // electric blue
const services = Array.isArray(b.services) ? b.services.slice(0, 6) : [];
const gallery = Array.isArray(b.gallery_images) ? b.gallery_images.slice(0, 8) : [];
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-1521590832167-7bcbfaa6381f?w=1800&q=70&auto=format';
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')} — BOOK NOW</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=Anton&family=Inter:wght@400;600;800&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: #0a0a0a;
--paper: #ffffff;
}
* { 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.5; -webkit-font-smoothing: antialiased; }
.display { font-family: 'Anton', 'Impact', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; font-weight: 400; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* nav */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 24px 32px; display: flex; justify-content: space-between; align-items: center; color: white; }
.nav-logo { font-family: 'Anton', sans-serif; font-size: 28px; text-transform: uppercase; letter-spacing: 0.02em; }
.nav-links { display: flex; gap: 24px; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.nav-cta { background: var(--primary); color: white; padding: 12px 24px; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; transform: skewX(-6deg); display: inline-block; }
.nav-cta span { display: inline-block; transform: skewX(6deg); }
/* hero */
.hero { position: relative; min-height: 100vh; background: var(--ink) url('${esc(heroBg)}') center / cover; display: flex; align-items: flex-end; color: white; padding: 96px 32px 64px; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.85) 100%); }
.hero-inner { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; }
.hero h1 { font-size: clamp(72px, 14vw, 220px); margin-bottom: 24px; }
.hero h1 .tag { display: block; color: var(--primary); }
.hero-sub { font-size: clamp(18px, 2vw, 24px); font-weight: 600; margin-bottom: 32px; max-width: 640px; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 22px 40px; font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; border: none; cursor: pointer; transition: transform 0.15s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: white; color: var(--ink); }
.btn-ghost { background: transparent; color: white; border: 3px solid white; }
/* marquee */
.marquee { background: var(--primary); color: white; overflow: hidden; padding: 18px 0; white-space: nowrap; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.marquee-track { display: inline-block; animation: scroll 30s linear infinite; font-family: 'Anton', sans-serif; font-size: 32px; text-transform: uppercase; letter-spacing: 0.05em; }
.marquee-track span { padding: 0 32px; }
.marquee-track .dot { color: var(--accent); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* sections */
.section { padding: 120px 0; }
.section h2 { font-family: 'Anton', sans-serif; font-size: clamp(56px, 8vw, 120px); text-transform: uppercase; line-height: 0.9; margin-bottom: 48px; }
.section h2 em { font-style: normal; color: var(--primary); }
/* about */
.about { background: var(--ink); color: white; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about p { font-size: 20px; line-height: 1.55; margin-bottom: 16px; }
.about-stat { font-family: 'Anton', sans-serif; font-size: 240px; line-height: 0.85; color: var(--primary); }
.about-stat-label { font-weight: 800; text-transform: uppercase; font-size: 18px; margin-top: 8px; }
/* services */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.service-card { background: var(--ink); color: white; padding: 40px 32px; transition: background 0.2s; cursor: pointer; }
.service-card:hover { background: var(--primary); }
.service-card h3 { font-family: 'Anton', sans-serif; font-size: 36px; text-transform: uppercase; margin-bottom: 16px; line-height: 1; }
.service-card .price { font-family: 'Anton', sans-serif; font-size: 56px; color: var(--primary); display: block; margin-bottom: 16px; line-height: 1; }
.service-card:hover .price { color: white; }
.service-card p { font-size: 14px; opacity: 0.9; }
/* gallery */
.gallery { background: var(--accent); padding: 80px 0; }
.gallery h2 { color: white; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; cursor: pointer; transition: transform 0.3s; }
.gallery-grid img:hover { transform: scale(1.04); }
/* contact */
.contact { background: var(--primary); color: white; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.contact form { display: grid; gap: 14px; }
.contact input, .contact textarea { font-family: inherit; font-size: 18px; padding: 18px; border: 3px solid white; background: transparent; color: white; font-weight: 600; border-radius: 0; }
.contact input::placeholder, .contact textarea::placeholder { color: rgba(255,255,255,0.7); font-weight: 600; }
.contact textarea { min-height: 120px; resize: vertical; }
.contact button { background: var(--ink); color: white; padding: 22px; border: none; font-weight: 800; text-transform: uppercase; font-size: 18px; letter-spacing: 0.05em; cursor: pointer; }
#map { width: 100%; height: 480px; border: 4px solid var(--ink); }
/* socials */
.social-bar { background: var(--ink); padding: 40px 0; display: flex; justify-content: center; gap: 32px; color: white; }
.social-bar a { transition: color 0.2s; }
.social-bar a:hover { color: var(--primary); }
/* footer */
footer { background: var(--ink); color: white; padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 48px; }
.footer-grid h4 { font-family: 'Anton', sans-serif; font-size: 24px; text-transform: uppercase; margin-bottom: 16px; color: var(--primary); }
.footer-grid ul { list-style: none; font-size: 14px; line-height: 1.9; }
.footer-grid ul strong { display: inline-block; width: 50px; color: var(--primary); }
.footer-attr { text-align: center; font-size: 12px; padding-top: 32px; border-top: 1px solid #333; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 720px) {
.nav-links { display: none; }
.hero { padding: 72px 20px 48px; min-height: 90vh; }
.container { padding: 0 20px; }
.about-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr !important; gap: 48px; }
.services-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.about-stat { font-size: 140px; }
.section { padding: 64px 0; }
}
</style>
</head>
<body>
<header>
<nav class="nav">
<a class="nav-logo" href="#top">${esc(b.name || 'SALON')}</a>
<a class="nav-cta" href="#book"><span>Book Now →</span></a>
</nav>
</header>
<section class="hero" id="top">
<div class="hero-inner">
<h1 class="display">${esc(b.name || 'BIG').split(' ').slice(0, 2).join(' ')}<br><span class="tag">${esc((b.category || 'BOLD').toUpperCase())}.</span></h1>
<p class="hero-sub">${esc(b.about_text?.slice(0, 120) || `${b.city || 'LA'}'s loudest, brightest, never-quiet salon.`)}</p>
<div class="cta-row">
<a class="btn btn-primary" href="#book">Book Now →</a>
<a class="btn btn-ghost" href="#map">Get Directions</a>
</div>
</div>
</section>
<div class="marquee">
<div class="marquee-track">
<span>WALK-INS WELCOME</span><span class="dot">●</span>
<span>${esc((b.city || 'LA').toUpperCase())}</span><span class="dot">●</span>
<span>BOOK ONLINE 24/7</span><span class="dot">●</span>
<span>${esc((b.category || 'SALON').toUpperCase())}</span><span class="dot">●</span>
<span>WALK-INS WELCOME</span><span class="dot">●</span>
<span>${esc((b.city || 'LA').toUpperCase())}</span><span class="dot">●</span>
<span>BOOK ONLINE 24/7</span><span class="dot">●</span>
<span>${esc((b.category || 'SALON').toUpperCase())}</span><span class="dot">●</span>
</div>
</div>
<section class="section about" id="about">
<div class="container about-grid">
<div>
<h2>Meet the<br><em>boss.</em></h2>
<p>${esc(b.about_text || `Hi, I'm ${b.owner_name || 'the owner'}. This is my chair, my craft, my love letter to ${b.city || 'this city'}.`)}</p>
<p style="opacity: 0.7; font-size: 16px; margin-top: 24px;">— ${esc(b.owner_name || 'Owner')}</p>
</div>
${b.years_in_business ? `
<div style="text-align: center;">
<div class="about-stat">${esc(b.years_in_business)}</div>
<div class="about-stat-label">YEARS / DEEP IN IT</div>
</div>` : ''}
</div>
</section>
<section class="section" id="services">
<div class="container">
<h2>The <em>menu.</em></h2>
<div class="services-grid">
${services.map((s) => `
<div class="service-card">
<span class="price">${esc(s.price || '—')}</span>
<h3>${esc(s.name)}</h3>
${s.description ? `<p>${esc(s.description)}</p>` : ''}
</div>
`).join('')}
</div>
</div>
</section>
${gallery.length ? `
<section class="gallery" id="gallery">
<div class="container">
<h2>The <em>work.</em></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>
</div>
</section>` : ''}
<section class="section contact" id="book">
<div class="container contact-grid">
<div>
<h2>Hit us<br><em>up.</em></h2>
<form id="lead-form">
<input required name="name" type="text" placeholder="YOUR NAME">
<input required name="email" type="email" placeholder="YOUR EMAIL">
<input name="phone" type="tel" placeholder="YOUR PHONE">
<textarea name="message" placeholder="WHAT DO YOU WANT?"></textarea>
<button type="submit">SEND IT →</button>
<div id="lead-status" style="font-size: 14px; min-height: 18px; font-weight: 600;"></div>
</form>
</div>
<div>
<div id="map"></div>
<p style="margin-top: 16px; font-weight: 800; text-transform: uppercase; font-size: 14px;">${esc(b.address || '')}<br>${esc(b.city || '')}${b.city && b.state ? ', ' : ''}${esc(b.state || '')}</p>
</div>
</div>
</section>
${socials.length ? `
<div class="social-bar">
${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>` : ''}
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h4>HOURS</h4>
<ul>${hoursList(b.hours_json)}</ul>
</div>
<div>
<h4>FIND US</h4>
<p style="font-size: 14px; line-height: 1.7;">${esc(b.address || '')}<br>${esc(b.city || '')}${b.city && b.state ? ', ' : ''}${esc(b.state || '')}</p>
</div>
<div>
<h4>CALL / WRITE</h4>
<p style="font-size: 14px; line-height: 1.7;">${b.phone ? `<a href="tel:${esc(b.phone)}" style="color: var(--primary); font-weight: 800;">${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="#" style="color: var(--primary);">SmallBizBuilder</a></div>`}
</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: '© OSM', 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 = "GOT IT. WE'LL HIT YOU BACK.";
form.reset();
} catch (err) { status.textContent = 'SOMETHING BROKE — TRY THE PHONE NUMBER.'; }
});
document.querySelectorAll('.gallery-grid img').forEach(img => img.addEventListener('click', () => window.open(img.dataset.full, '_blank')));
});
</script>
</body>
</html>`;
}
export default renderTemplate2;
export const render = (b) => renderTemplate2(b);
export const meta = { id: 2, name: 'Bold & Loud', blurb: 'Full-bleed hero · oversized sans · saturated' };