// templates.jsx — Loaf'd social, opening-hours, launch-promo & tent-card templates // Mounted as a new "Templates" section inside brand-pack.html. // ── helpers ───────────────────────────────────────────────────────────── const TemplateFrame = ({ label, width, height, scale = 0.28, dark, raspberry, children, style = {} }) => { // Renders a scaled-down preview of a "real-size" canvas so all cards line up. const bg = raspberry ? 'var(--raspberry)' : dark ? 'var(--black)' : 'var(--paper)'; const fg = raspberry || dark ? 'var(--cream)' : 'var(--ink)'; return (
{children}
{label}
); }; // Auto-fit: shrink font when longest line exceeds capChars const fitSize = (text, base, capChars = 8) => { const longest = String(text || '').split('\n').reduce((a, b) => a.length > b.length ? a : b, ''); const len = longest.length || 1; return len <= capChars ? base : Math.floor(base * (capChars / len)); }; // ── Social posts (4:5 — 1080×1350) ────────────────────────────────────── // Variation 1 · Bold type, raspberry on cream const SocialV1 = ({ kicker, headline, subhead, price, tag }) =>
{kicker}
LOAF'D
{headline}
{subhead}
{price}
{tag}
; // Variation 2 · Photo hero with raspberry caption band const SocialV2 = ({ kicker, headline, subhead, price, placeholderLabel }) =>
{placeholderLabel}
{kicker}
{headline}
{subhead}
{price}
; // Variation 3 · Big sticker collage on black const SocialV3 = ({ kicker, words, subhead, price }) =>
{/* corner blob */}
LOAF'D
{kicker}
{words.map((w, i) =>
{w}
)}
{subhead}
{price}
; // Variation 4 · Editorial — type-first, all raspberry const SocialV4 = ({ kicker, headline, subhead, price, tag }) =>
{kicker}
SWORDS · ASHBOURNE · DROGHEDA
{headline}
{subhead}
{price}
{tag}
LOAF'D
; // ── Opening hours posters ─────────────────────────────────────────────── const HoursPoster = ({ location, hours, address, size = 'A3' }) => { // A3 = 297×420mm; A2 = 420×594mm. We'll use proportional px (1mm ≈ 4px). const W = size === 'A2' ? 1680 : 1188; const H = size === 'A2' ? 2376 : 1680; const days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']; return (
LOAF'D
OPENING
HOURS
{location}
{days.map((d, i) =>
{d}
{i === 5 || i === 6 ? 'WEEKEND' : 'WEEKDAY'}
{hours[i]}
)}
FIND US
{address}
{location.toUpperCase()}
); }; // ── Open-the-box launch promo ─────────────────────────────────────────── const LaunchPromo = ({ size = 'A3', headline, subhead, dateLine, locationLine, prize }) => { const W = size === 'A2' ? 1680 : 1188; const H = size === 'A2' ? 2376 : 1680; return (
{/* opening box graphic — abstract */} {/* box base */} {/* box back flap */} {/* steam puff 1 */} {/* toastie peeking */}
LOAF'D
LAUNCH WEEK
{dateLine}
OPEN
THE
BOX.
{subhead}
HOW IT WORKS
{headline}
YOU COULD WIN
{prize}
{locationLine}
); }; // ── A5 tent card (148×210 mm — double-sided) ───────────────────────────── const TentFront = ({ headline, subhead, price, tag }) =>
LOAF'D
TODAY
ON THE PASS
{headline}
{subhead}
{price}
ASK YOUR SERVER
{tag}
; const TentBack = ({ items, social }) =>
LOAF'D
WHILE YOU WAIT
FOLLOW US.
GET HYPED.
{items.map((line, i) =>
{line}
)}
{social}
LOAFD.IE
; // ── Main templates section ─────────────────────────────────────────────── const TemplatesSection = ({ data }) => { const d = data; return (
SECTION10TEMPLATES

Templates.

Pre-built layouts for the things you actually need every week — social posts, hours posters, a launch promo and table tents. All editable from the Tweaks panel: change a price, a date or a headline and watch it flow through every layout.

{/* — Social posts — */}
10.1 · INSTAGRAM 4:5 · 1080×1350
{/* Brunch served all day */}
Brunch, all day.
{/* New item launch */}
New item launch.
{/* Matcha menu */}
Matcha menu.
{/* — Opening hours posters — */}
10.2 · OPENING HOURS · A3 + A2 · ONE PER LOCATION
{/* — Open-the-box launch promo — */}
10.3 · OPEN-THE-BOX LAUNCH PROMO · A3 + A2
{/* — Tent cards — */}
10.4 · A5 TENT CARD · DOUBLE-SIDED
); }; window.TemplatesSection = TemplatesSection;