// sections-top.jsx — Nav, Hero, Problem // ─── Logo ──────────────────────────────────────────────────────────── function Wordmark({ small }) { return (
Auto·Council
); } // ─── Nav ───────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const on = () => setScrolled(window.scrollY > 12); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); // Close mobile menu if viewport grows past the breakpoint React.useEffect(() => { const onResize = () => { if (window.innerWidth > 860 && open) setOpen(false); }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [open]); // Lock body scroll while the menu is open React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = open ? 'hidden' : prev; return () => { document.body.style.overflow = prev; }; }, [open]); const go = (id) => (e) => { e.preventDefault(); setOpen(false); // Allow the menu's pointer-events to clear before scrolling requestAnimationFrame(() => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); }; const links = [ { id: 'product', label: 'Product' }, { id: 'how', label: 'How it works' }, { id: 'compliance', label: 'Compliance' }, { id: 'pricing', label: 'Pricing' }, { id: 'faq', label: 'FAQ' }, ]; return ( <>
{links.map(l => ( {l.label} ))} setOpen(false)} > Book a demo
); } // ─── Hero ──────────────────────────────────────────────────────────── const HEADLINES = { excel: { h: 'Stop processing invoices in', accent: 'Excel.', tail: '' }, skeda: { h: 'The', accent: 'Skeda tal-Ħlasijiet,', tail: 'generated for you.' }, finance: { h: 'Council finance,', accent: 'without the spreadsheets.', tail: '' }, }; function Hero({ headlineKey = 'finance' }) { const headline = HEADLINES[headlineKey] || HEADLINES.finance; return (
{/* Atmospheric background */}
{/* Floating decorative pills on desktop only */}
{/* Trust pill */}

{headline.h}{' '} {headline.accent} {headline.tail && <> {headline.tail}}

Auto-Council digitises your full invoice and procurement workflow and generates the DLG Schedule of Payments automatically. Councils processing around 100 invoices a month can save 1,000+ hours a year.

EU data residency · Frankfurt DLG-compliant Skeda format Maltese-built · Maltese-supported
); } // Floating decorative UI pills around the hero — invoice cards, stat bubbles function FloatingPills() { // Position: absolute relative to the wrap, only visible on wider screens return ( ); } // ─── Problem section ───────────────────────────────────────────────── function ProblemSection() { // Mock Excel data (chaotic) vs Auto-Council (clean) const messy = [ { sup: 'stamperija borg', amt: '1840', vat: '?', code: '', note: 'check w/ Daniel' }, { sup: 'Vella Elec', amt: '3265.5', vat: '587.79', code: 'T', note: '' }, { sup: 'skyclean', amt: '620.00', vat: '111.6', code: '', note: 'recurring?' }, { sup: 'MALTAPOST', amt: '148.20', vat: '26.68', code: 'DA', note: '' }, { sup: 'Calleja Hardwre', amt: '2410.75',vat: '433.94',code: 'D', note: '' }, { sup: 'TransMarine', amt: '5890', vat: '?', code: '', note: 'tender ref??' }, ]; // Refs for cells the annotations should point at const wrapRef = React.useRef(null); const cellRefs = { capRow1: React.useRef(null), // "stamperija borg" — lowercase capRow4: React.useRef(null), // "MALTAPOST" — all caps vatRow6: React.useRef(null), // row 6 VAT "?" codeRow3: React.useRef(null), // row 3 M·Code empty noteRow1: React.useRef(null), // row 1 notes "check w/ Daniel" }; const [pos, setPos] = React.useState(null); React.useLayoutEffect(() => { const compute = () => { const w = wrapRef.current; if (!w) return; const wr = w.getBoundingClientRect(); const out = {}; for (const [k, ref] of Object.entries(cellRefs)) { const c = ref.current; if (!c) continue; const cr = c.getBoundingClientRect(); out[k] = { top: cr.top - wr.top, left: cr.left - wr.left, right: cr.right - wr.left, bottom: cr.bottom - wr.top, cx: cr.left - wr.left + cr.width / 2, cy: cr.top - wr.top + cr.height / 2, }; } out._wrap = { width: wr.width, height: wr.height }; setPos(out); }; compute(); const t1 = setTimeout(compute, 250); // fonts settle const t2 = setTimeout(compute, 800); const ro = new ResizeObserver(compute); if (wrapRef.current) ro.observe(wrapRef.current); window.addEventListener('resize', compute); return () => { clearTimeout(t1); clearTimeout(t2); ro.disconnect(); window.removeEventListener('resize', compute); }; }, []); // Annotation positions (anchored to wrapRef) — computed once pos is known. // Each annotation: { text, ax/ay (annot anchor point), tx/ty (target point), align } const annots = pos ? [ { text: 'Inconsistent capitalisation', // Place above row 1 supplier, pointing down at it ax: pos.capRow1?.cx, ay: Math.max(8, (pos.capRow1?.top ?? 0) - 36), tx: pos.capRow1?.cx, ty: pos.capRow1?.top + 2, align: 'center', }, { text: 'Missing VAT', // Place to the right of row 6 VAT cell ax: (pos.vatRow6?.right ?? 0) + 60, ay: pos.vatRow6?.cy, tx: pos.vatRow6?.right - 4, ty: pos.vatRow6?.cy, align: 'right', }, { text: 'No codes assigned', // Place to the left of row 3 M·Code cell ax: (pos.codeRow3?.left ?? 0) - 60, ay: pos.codeRow3?.cy, tx: pos.codeRow3?.left + 4, ty: pos.codeRow3?.cy, align: 'left', }, { text: 'Re-keyed every month', // Place below row 1 notes cell, pointing up at it ax: pos.noteRow1?.cx, ay: (pos.noteRow1?.bottom ?? 0) + 32, tx: pos.noteRow1?.cx, ty: pos.noteRow1?.bottom - 2, align: 'center', }, ].filter(a => a.ax != null) : []; return (
The problem

Same data. One eighth of the time.

Most councils still cut and paste invoice data into Excel every month, then hand-key method and procurement codes, then rebuild the Skeda from scratch. It is fragile, it is slow, and it leaves no audit trail.

{/* Left: Excel chaos — needs extra horizontal/vertical room for annotations */}
X Skeda_April_2026_v7_FINAL_FINAL.xlsx
Manual
Skeda_April_2026_v7_FINAL_FINAL.xlsx · Last saved: 2 days ago Excel
{messy.map((r, i) => ( ))}
Supplier Amount VAT M·Code Notes
{i+1} {r.sup} {r.amt} {r.vat} {r.code || '—'} {r.note}
{/* SVG leader-line overlay — fills the .xl bounds */} {pos && ( )} {/* Annotation labels — absolutely positioned to the .xl wrapper */} {annots.map((a, i) => { const transform = a.align === 'center' ? 'translate(-50%, -50%)' : a.align === 'right' ? 'translate(0, -50%)' : 'translate(-100%, -50%)'; return (
{a.text}
); })}
{/* Bottom summary stat — left as a clean caption, not an annotation */}
75 hours / month, every month
No audit trail. Re-keyed by hand.
{/* Right: Auto-Council clean */}
April 2026 · Skeda tal-Ħlasijiet
Auto-generated
{HERO_INVOICES.map((inv, i) => ( ))}
# Supplier M·Req P·M Total
{String(i+1).padStart(2,'0')} {inv.supplier} {inv.mreq} {inv.pm} {fmtMoney(inv.amount + inv.vat)}
Codes assigned automatically
Audit trail per line
Ready to export
); } Object.assign(window, { Nav, Hero, ProblemSection, Wordmark, HEADLINES });