1 page · sample {idx + 1} of {previews.length}From £249 · £349 professional
{/* Manual controls — step back / forward through the sample previews */}
{previews.map((p, i) => (
);
}
function HeroPreviewFallback() {
// Tiny fallback shown only if sample mocks haven't loaded yet (race condition guard).
return (
);
}
/* ---------- PROBLEM ---------- */
function Problem() {
const cards = [
{ label: 'No proper website', sub: 'Just a Facebook page or directory listing.' },
{ label: 'No quote form', sub: 'New customers have nowhere obvious to ask.' },
{ label: 'No click-to-call page', sub: 'Phone enquiries get lost or never come in.' },
{ label: 'No owned online presence', sub: 'Your business lives on someone else’s platform.' },
{ label: 'Relying on directories', sub: 'Facebook, Checkatrade, Yell, Google listings.' },
{ label: 'Losing trust to competitors', sub: 'Rivals with simple sites look more credible.' },
{ label: 'Hard to share with new leads', sub: 'No clean link to send when someone asks for your details.' },
{ label: 'No control over what shows up', sub: 'Old posts, wrong hours, missing services — and no way to fix them.' },
];
return (
Still relying only on Google,
Facebook or directories?
}
intro="Many local businesses have strong reviews, good work, and loyal customers — but no proper website. People searching online may not see the full picture, trust the business, or request a quote."
/>
{cards.map((c, i) => (
{String(i + 1).padStart(2, '0')}
{c.label}
{c.sub}
))}
);
}
/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
const [active, setActive] = React.useState(0);
const steps = [
{
title: 'We check your current online presence',
desc: 'A quick look at your Google profile, social pages, and any reviews — to understand what local customers already see.',
icon: '01',
},
{
title: 'We create a private website preview',
desc: 'You get a private link to a one-page mockup with your business name, services, and contact details placed in a clean professional layout.',
icon: '02',
},
{
title: 'You review the preview',
desc: 'No pressure, no contract. Look at it on your phone, share it with a partner or team member, and tell us what you’d change.',
icon: '03',
},
{
title: 'If you like it, we polish it and get it live',
desc: 'One revision round, real photos and copy plugged in, basic local SEO set up. Then we launch.',
icon: '04',
},
{
title: 'You pay for and own your own domain',
desc: 'You buy your domain in your own name through a service like Cloudflare or 123-Reg. We help connect it — but it always belongs to you.',
icon: '05',
},
];
return (
{/* Steps list */}
{steps.map((s, i) => {
const isActive = i === active;
return (
);
}
function PreviewSlide() {
// Cycle through the polished industry mocks so this step shows a real preview,
// not just placeholders. Auto-rotates so the user sees variety even if they linger.
const previews = [
{ slug: 'kingston-plumbing', label: 'Plumber', getMock: () => window.PlumberMock },
{ slug: 'epsom-roofing', label: 'Roofer', getMock: () => window.RooferMock },
{ slug: 'surbiton-clean', label: 'Cleaning', getMock: () => window.CleaningMock },
{ slug: 'cobham-driveways', label: 'Driveways', getMock: () => window.DrivewayMock },
{ slug: 'wimbledon-moves', label: 'Removals', getMock: () => window.RemovalMock },
{ slug: 'croydon-electric', label: 'Electrician', getMock: () => window.ElectricianMock },
{ slug: 'guildford-gardens', label: 'Landscaper', getMock: () => window.LandscaperMock },
{ slug: 'woking-builders', label: 'Builder', getMock: () => window.BuilderMock },
{ slug: 'richmond-tree-care', label: 'Tree surgeon', getMock: () => window.TreeSurgeonMock },
];
const [idx, setIdx] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setIdx((i) => (i + 1) % previews.length), 3000);
return () => clearInterval(t);
}, [previews.length]);
const current = previews[idx];
const Mock = current.getMock();
return (
{/* Browser chrome */}
preview.ares.tech/{current.slug}
{current.label}
{/* Live mock */}
{Mock ? : null}
{/* Tab indicator dots */}
{previews.map((p, i) => (
);
}
function ReviewSlide() {
const notes = [
{ who: 'You', text: 'Looks good. Can the phone number be bigger on mobile?' },
{ who: 'ARES', text: 'Done. Pushed an updated preview link.' },
{ who: 'You', text: 'Swap the second photo for our team van shot.' },
{ who: 'ARES', text: 'Swapped. Ready when you are.' },
];
return (
);
}
function PriceFigure({ value }) {
// Splits "From £249" / "£349" / "From £79" so the £ symbol is rendered amber
// and the numeric figure stays in the strong ink colour. The digit span
// carries data-countup so the motion system can animate from 0 on view.
const match = String(value).match(/^(\s*[Ff]rom\s+)?£(\d[\d,.]*)(.*)$/);
if (!match) {
return {value};
}
const [, fromPrefix, number, trailing] = match;
const cleanNum = number.replace(/[,.]/g, '');
return (
£
{number}{trailing}
);
}
/* ExtraPagesAddon — small add-on row beneath the 3 main packages.
Indicative prices; adjust as needed. */
function ExtraPagesAddon({ onCta }) {
const tiers = [
{
n: 1,
label: '+1 page',
price: '+£99',
desc: 'Add an extra page — e.g. About, Services detail, or Pricing.',
},
{
n: 2,
label: '+2 pages',
price: '+£179',
desc: 'Two additional pages — typically Services + About, or Services + Gallery.',
},
{
n: 3,
label: '+3 pages',
price: '+£249',
desc: 'A small multi-page site — Services, About, Gallery, plus your home page.',
},
];
return (
Need more pages?
Add 1–3 pages, depending on your business.
The £249 entry is one page. The £349 professional covers 1 or 2 pages.
If you need more — a detailed Services page, About, separate Gallery,
or a Pricing page — add them on at the rates below.
Ask about extra pages
{tiers.map((t) => (
{t.label}
{[0, 1, 2].map((i) => (
))}
+£
{t.price.replace(/^[^\d]*/, '')}
one-off
{t.desc}
))}
);
}
/* ---------- PRICING ---------- */
function Pricing({ onCta }) {
const cards = [
{
id: 'entry',
title: 'First Website',
price: 'From £249',
priceSub: 'one-off',
badge: 'Lowest entry price',
badgeTone: 'neutral',
description:
'A simple first online presence.',
includes: [
'Private preview',
'Mobile-ready one-page layout',
'Click-to-call section',
'Simple contact section',
'Launch support',
],
notIncluded: [
'Domain purchase',
'Multiple pages',
'Full SEO campaign',
'Booking system',
'E-commerce',
'Unlimited edits',
'Ongoing support unless added monthly',
],
cta: 'Request Entry Preview',
},
{
id: 'pro',
title: '1-2 page',
price: '£349',
priceSub: 'one-off',
badge: 'Most chosen',
badgeTone: 'accent',
featured: true,
description:
'For trades and local service businesses that want a stronger first website.',
includes: [
'Stronger 1-2 page layout',
'Services section',
'Gallery or placeholder gallery',
'Contact / quote form layout',
'Basic local SEO title and description',
'One revision round',
],
cta: 'Get My Preview',
},
{
id: 'support',
title: 'Updates & Support',
price: 'From £79',
priceSub: '/ month',
badge: 'Optional',
badgeTone: 'neutral',
description:
'Optional after launch.',
includes: [
'Small content updates',
'Basic support',
'Minor layout changes',
'Ongoing help after launch',
],
cta: 'Ask About Support',
},
];
return (
{cards.map((c) => (
))}
{/* Pricing disclaimer */}
Domain purchase is separate. You pay for and own your own domain.
{/* Extra-pages add-on row */}
{/* Domain ownership card — kept directly below the three packages */}
Domain ownership
You own your domain, separately.
Domain purchase is not included in any package. You pay for and own
your domain separately. We can help you choose and connect it, but
it stays in your name — usually around{' '}
£8–£15/year through Cloudflare, 123-Reg, or Namecheap.
);
}
/* ---------- MONTHLY SUPPORT ---------- */
function Monthly({ onCta }) {
const incl = [
{ t: 'Hosting support', d: 'Stays online and up-to-date.' },
{ t: 'Small text & image updates', d: 'Quick changes when your services or hours change.' },
{ t: 'Basic maintenance', d: 'Plugin and security updates handled for you.' },
{ t: 'Technical help', d: 'Email or message us when something’s off.' },
{ t: 'Ongoing support', d: 'A real person to ask, not a ticket queue.' },
];
return (
Optional updates & support
Manage it yourself, or let us look after it.
Optional updates and support from £79/month, after your site is live.
Cancel anytime.
Areas served
UK · Ireland · US · Canada · Australia · New Zealand
{[...areas, ...areas].map((a, i) => (
{a}
))}
);
}
/* ---------- WHY ARES ---------- */
function WhyAres() {
const reasons = [
['You see the preview before deciding', 'No risky upfront builds — look at it first.'],
['Clear fixed pricing', 'It’s £249 or £349. Not “starting from”, not a surprise.'],
['No confusing agency jargon', 'Plain English from start to finish.'],
['Built for local quote requests', 'Click-to-call and a simple contact form, not a brochure.'],
['Focused launch', 'A focused page or two beats five neglected ones.'],
['You own your domain', 'Always in your name, with your registrar.'],
['No unlimited-edit traps', 'One revision round, honestly described.'],
['Optional support, not forced', 'Take monthly support if you want it, or don’t.'],
];
return (
);
}
/* ---------- HUMAN TRUST ---------- */
function HumanTrust({ onCta }) {
const trust = [
{ t: 'Private preview first', d: 'See it before you commit.' },
{ t: 'Transparent fixed pricing', d: 'No surprise quotes. £249 or £349.' },
{ t: 'You own your domain', d: 'Bought in your name, kept in your name.' },
{ t: 'Real email contact', d: 'arestechnology.io@proton.me' },
];
return (
Real operator · clear process
Built by a real person, not a faceless agency.
ARES Technology is a lean website-preview service built for local
businesses that need a proper online presence without the usual
agency pressure. The process is simple: we create a private preview,
show you what your first website could look like, and only move
forward if you approve it.
We keep pricing clear, domains separate, and expectations honest.
No fake testimonials, no guaranteed ranking claims, and no
pressure to commit before you have seen the preview.
Based in Surrey & South West London — supporting UK and international small businesses.
);
}
/* ---------- EXAMPLE PREVIEW ---------- */
function ExamplePreview() {
const sections = [
{ id: 'hero', label: 'Hero area', d: 'Business name, headline, and a clear call to action.' },
{ id: 'services', label: 'Services section', d: 'The two to five things you actually do, in plain English.' },
{ id: 'reviews', label: 'Reviews / reputation', d: 'Space for star rating or a link to your Google profile.' },
{ id: 'gallery', label: 'Gallery', d: 'A handful of real photos of your work or team.' },
{ id: 'areas', label: 'Areas served', d: 'The towns and postcodes you cover.' },
{ id: 'contact', label: 'Contact form', d: 'Name, phone, postcode, message — that’s it.' },
{ id: 'call', label: 'Click-to-call', d: 'One tap and the phone dials. Always visible on mobile.' },
];
const [active, setActive] = React.useState('hero');
const [userActed, setUserActed] = React.useState(false);
// Idle auto-cycle through sections so the preview feels alive when no one's
// interacting. Stops the moment a user hovers or clicks anything.
React.useEffect(() => {
if (userActed) return;
const t = setInterval(() => {
setActive((curr) => {
const ids = sections.map((s) => s.id);
const i = ids.indexOf(curr);
return ids[(i + 1) % ids.length];
});
}, 2200);
return () => clearInterval(t);
}, [userActed]);
const touch = () => { if (!userActed) setUserActed(true); };
const setActiveAndTouch = (id) => { touch(); setActive(id); };
return (
);
}
/* ---------- SAMPLE LAYOUTS ---------- */
function SampleLayouts({ onCta }) {
const samples = [
{
id: 'plumber',
title: 'Sample: Local plumber, Kingston',
category: 'Plumber',
copy: 'A clean one-page layout for emergency plumbing, bathroom repairs, boiler support, and local call-outs.',
tone: { hue: 28 }, // warm amber-leaning
hero: 'Emergency plumbing, day or night.',
services: ['Boilers', 'Bathrooms', 'Leaks', 'Call-outs'],
elements: ['Hero preview', 'Services', 'Reviews placeholder', 'Click-to-call', 'Quote form'],
ctaLabel: 'Call now',
accentBlock: 'callout',
},
{
id: 'roofer',
title: 'Sample: Roofer, Epsom',
category: 'Roofer',
copy: 'A trust-focused layout for roof repairs, flat roofing, guttering, leak detection, and emergency call-outs.',
tone: { hue: 50 }, // warm gold
hero: 'Roof repairs done right, first time.',
services: ['Repairs', 'Flat roofing', 'Guttering', 'Leak detection'],
elements: ['Strong headline', 'Service cards', 'Gallery placeholder', 'Areas served', 'Call button'],
ctaLabel: 'Book a survey',
accentBlock: 'gallery',
},
{
id: 'cleaning',
title: 'Sample: Cleaning company, Surbiton',
category: 'Cleaning company',
copy: 'A bright, professional layout for domestic cleaning, end-of-tenancy cleans, deep cleaning, and commercial cleaning.',
tone: { hue: 145 }, // fresh green
hero: 'Sparkling homes & offices, on schedule.',
services: ['Domestic', 'End-of-tenancy', 'Deep clean', 'Commercial'],
elements: ['Clean hero', 'Service checklist', 'Trust badges', 'Contact form', 'Areas covered'],
ctaLabel: 'Get a quote',
accentBlock: 'checklist',
},
{
id: 'painter',
title: 'Sample: Painter & decorator, Sutton',
category: 'Painter & decorator',
copy: 'A premium visual layout for interior painting, exterior painting, wallpapering, rentals, and full home redecorating.',
tone: { hue: 8 }, // muted clay
hero: 'Brushwork that finishes a room properly.',
services: ['Interior', 'Exterior', 'Wallpaper', 'Rentals'],
elements: ['Elegant hero', 'Before / after', 'Services', 'Reputation', 'Free quote CTA'],
ctaLabel: 'Free quote',
accentBlock: 'beforeafter',
},
{
id: 'removal',
title: 'Sample: Removal company, Wimbledon',
category: 'Removal company',
copy: 'A practical lead-generation layout for man-and-van services, house moves, flat moves, student moves, and local removals.',
tone: { hue: 70 }, // amber
hero: 'Local moves. Fair price. Same week.',
services: ['Man & van', 'House moves', 'Flat moves', 'Student moves'],
elements: ['Fast quote CTA', 'WhatsApp / call', 'Service cards', 'Van gallery', 'Local areas'],
ctaLabel: 'WhatsApp',
accentBlock: 'fastquote',
},
{
id: 'electrician',
title: 'Sample: Electrician, Croydon',
category: 'Electrician',
copy: 'A trust-focused layout for emergency call-outs, rewires, fuse-box work, lighting, and EV charger installs.',
tone: { hue: 50 },
hero: 'Power back on, same day.',
services: ['Rewires', 'Fuse box', 'Lighting', 'EV chargers'],
elements: ['Emergency call-out', 'Service grid', 'NICEIC trust strip', 'Click-to-call', 'Quote form'],
ctaLabel: 'Call electrician',
accentBlock: 'callout',
},
{
id: 'landscaper',
title: 'Sample: Landscaper, Guildford',
category: 'Landscaper',
copy: 'A natural, editorial layout for garden design, lawn care, hedges, patios, and ongoing seasonal maintenance.',
tone: { hue: 145 },
hero: 'Gardens that grow with you.',
services: ['Lawns', 'Hedges', 'Patios', 'Planting'],
elements: ['Editorial hero', 'Service tiles', 'Seasonal pricing', 'Free quote CTA', 'Areas served'],
ctaLabel: 'Get a quote',
accentBlock: 'gallery',
},
{
id: 'builder',
title: 'Sample: Builder, Woking',
category: 'Builder',
copy: 'A confident layout for extensions, loft conversions, renovations, and ground-up builds with a project gallery and visit-booking CTA.',
tone: { hue: 55 },
hero: 'Built right. Built on time.',
services: ['Extensions', 'Loft', 'Renovations', 'New builds'],
elements: ['Blueprint hero', 'Project gallery', 'Service grid', 'Hi-vis CTA', 'Site-visit booking'],
ctaLabel: 'Book site visit',
accentBlock: 'gallery',
},
{
id: 'treesurgeon',
title: 'Sample: Tree surgeon, Richmond',
category: 'Tree surgeon',
copy: 'A natural, NPTC-credibility layout for crown reductions, fellings, stump removal, and emergency tree work.',
tone: { hue: 140 },
hero: 'Crown reductions. Stump removals. Safely.',
services: ['Felling', 'Crown reduce', 'Stump remove', 'Hedge work'],
elements: ['NPTC trust strip', 'Service tiles', 'Free quote CTA', 'Emergency line', 'Areas served'],
ctaLabel: 'Free quote',
accentBlock: 'callout',
},
];
return (
These are sample preview layouts, not official client websites.
We do not publish private business previews publicly unless the
business gives permission.
{samples.map((s) => (
))}
Private previews are created for review only. They are not
official business websites unless approved by the business owner.
Request a Free Preview
);
}
/* SampleCard + industry mocks live in sample-mocks.jsx */
/* ---------- TRUST STRIP ---------- */
function TrustStrip() {
const items = [
'Free preview, no signup',
'You own your domain',
'Fast launch after approval',
'Cancel monthly support anytime',
];
return (
);
}
/* ---------- FAQ ---------- */
function FAQ() {
const items = [
{ q: 'Is the preview my official website?', a: 'No. The preview is a private mockup. It only becomes your official website if you approve it and ask us to get it live.' },
{ q: 'How much does it cost?', a: 'First websites start from £249. Professional 1–2 page websites are £349. Optional updates and support start from £79/month.' },
{ q: 'What is the difference between the £249 and £349 option?', a: 'The £249 option is a simple one-page entry website for businesses that need a basic online presence quickly. The £349 professional package covers 1 or 2 pages and includes a stronger layout with services, gallery or placeholder gallery, contact/quote form, Google Maps embed if available, basic local SEO title and description, one revision round, and launch support.' },
{ q: 'Is the domain included?', a: 'No. You pay for and own your domain separately. We can help you choose and connect it.' },
{ q: 'Do I get unlimited edits?', a: 'No. The £349 professional 1–2 page package includes one revision round. Extra changes can be quoted separately or handled through monthly support.' },
{ q: 'Is SEO included?', a: 'Basic local SEO title and description are included in the £349 professional 1–2 page package. A full SEO campaign is not included.' },
{ q: 'Can you build more than one page?', a: 'Yes. The £249 entry is one page. The £349 professional package covers 1 or 2 pages. Beyond that, extra pages can be added at fixed rates.' },
{ q: 'Do I have to pay monthly?', a: 'No. Monthly updates and support are optional from £79/month.' },
{ q: 'How fast can it go live?', a: 'Usually quickly once we have your business details, photos, preferred domain, and approval.' },
];
const [open, setOpen] = React.useState(0);
return (
);
}
/* ---------- CONTACT ---------- */
function Contact() {
const [form, setForm] = React.useState({
name: '', business: '', phone: '', email: '', location: '', link: '', message: '', interest: '',
companyWebsiteExtra: '',
});
const [consent, setConsent] = React.useState(false);
const [view, setView] = React.useState('form'); // 'form' | 'success' | 'error'
const [loading, setLoading] = React.useState(false);
const [errors, setErrors] = React.useState({});
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const resetForm = () => {
setForm({ name:'',business:'',phone:'',email:'',location:'',link:'',message:'',interest:'',companyWebsiteExtra:'' });
setConsent(false);
setErrors({});
setView('form');
};
const onSubmit = async (e) => {
e.preventDefault();
if (loading) return;
const errs = {};
if (!form.name.trim()) errs.name = 'Your name helps us address you properly.';
if (!form.business.trim()) errs.business = 'What’s the business called?';
if (!form.email.trim()) errs.email = 'Add an email so we can send the preview.';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) errs.email = 'That email doesn’t look right.';
if (!consent) errs.consent = 'Please tick the box so we know we can contact you.';
setErrors(errs);
if (Object.keys(errs).length > 0) return;
const payload = {
leadName: form.name.trim(),
businessName: form.business.trim(),
phone: form.phone.trim(),
email: form.email.trim(),
location: form.location.trim(),
currentWebsiteOrSocial: form.link.trim(),
message: form.message.trim(),
interestType: form.interest,
consent: true,
submittedAt: new Date().toISOString(),
pageUrl: typeof window !== 'undefined' ? window.location.href : '',
userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : '',
companyWebsiteExtra: form.companyWebsiteExtra,
};
setLoading(true);
try {
const res = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
body: JSON.stringify(payload),
});
let data = null;
try { data = await res.json(); } catch (_) { data = null; }
if (res.ok && data && data.ok === true) {
setView('success');
} else {
setView('error');
}
} catch (_) {
setView('error');
} finally {
setLoading(false);
}
};
return (
Request a preview
Want to see your first website preview?
Tell us about your business. We’ll put together a private one-page preview
and send you the link — no obligation, no payment until you approve it.
{[
['Private link', 'Only you see it.'],
['No upfront payment', 'You only pay if you approve and go live.'],
['Local response', 'Replies usually within one working day.'],
].map(([t, d]) => (