`src/render/templates/template-4.js`

32 lines
// Template 4 — Minimalist Single-Column
// Tight one-column layout, lots of whitespace, type-driven.
import { esc } from '../../lib/escape.js';
import { pickColors, placeholderHero, shell, brandStrip } from './_helpers.js';

export function render(b) {
  const c = pickColors(b);
  const heroSrc = b.hero_image_url || placeholderHero(b, b.name);
  const body = `
${brandStrip(b)}
<main style="max-width:680px;margin:0 auto;padding:80px 28px 120px">
  <p style="margin:0 0 14px;color:${c.accent};letter-spacing:3px;text-transform:uppercase;font-size:11px">${esc(b.category || 'Salon')}</p>
  <h1 style="font-family:Georgia,serif;font-size:56px;line-height:1.05;margin:0 0 24px;color:${c.primary}">${esc(b.name)}</h1>
  <p style="font-size:18px;line-height:1.7;color:#333;margin:0 0 40px">${esc(b.about_text || `A small ${b.category || 'salon'} in ${b.city || 'town'}. By appointment.`)}</p>
  <img src="${esc(heroSrc)}" alt="" style="width:100%;display:block;border-radius:4px;margin-bottom:40px">
  <hr style="border:0;border-top:1px solid #ddd;margin:32px 0">
  <dl style="display:grid;grid-template-columns:120px 1fr;row-gap:14px;column-gap:24px;font-size:15px;color:#444">
    ${b.address ? `<dt style="color:#888">Address</dt><dd style="margin:0">${esc(b.address)}${b.city ? ', ' + esc(b.city) : ''}</dd>` : ''}
    ${b.phone   ? `<dt style="color:#888">Phone</dt><dd style="margin:0"><a href="tel:${esc(b.phone)}" style="color:${c.primary}">${esc(b.phone)}</a></dd>` : ''}
    ${b.email   ? `<dt style="color:#888">Email</dt><dd style="margin:0"><a href="mailto:${esc(b.email)}" style="color:${c.primary}">${esc(b.email)}</a></dd>` : ''}
    ${b.years_in_business ? `<dt style="color:#888">Est.</dt><dd style="margin:0">${esc(String(new Date().getFullYear() - b.years_in_business))}</dd>` : ''}
    ${b.owner_name ? `<dt style="color:#888">Owner</dt><dd style="margin:0">${esc(b.owner_name)}</dd>` : ''}
  </dl>
  <div style="margin-top:48px">
    <a class="btn" href="${b.phone ? `tel:${esc(b.phone)}` : '#'}" style="background:${c.primary}">Book an appointment</a>
  </div>
</main>`;
  return shell(b.name, body, b);
}

export const meta = { id: 4, name: 'Minimalist', blurb: 'One column · whitespace · type-driven' };