Axil_website/Concept.md

Axil Accountants — Website Concept

Language: All website content is in British English. Status: Concept v1.0 — February 2026 Type: Modern marketing website with headless CMS

---

1. Project Overview

Client: Axil Accountants Goal: A high-converting, premium marketing website that positions Axil Accountants as the go-to accounting firm for sole traders, limited companies, and startups in the UK. The site functions as a professional sales funnel — driving visitors to book a free consultation.

Core Principle: No pricing on the site. Every CTA leads to a consultation request. The funnel is designed to build trust first, then convert.

---

2. Brand & Visual Identity

Logo

• Existing logo — provided by client
• Logo used in header (light version on dark backgrounds, dark version on white)

Colour Palette

Two brand colours extracted from the actual logo.

Role	Colour	Hex
Primary	Emerald Green	#3CC68A
Primary Dark	Emerald Dark	#27A870
Primary Deeper	Emerald Deeper	#1A8C5B
Primary Light	Emerald Light	#7DDCB0
Primary Mist	Emerald Mist	#E8F8F1
Secondary	Sky Blue	#1B9AD6
Secondary Dark	Blue Dark	#1480B8
Secondary Light	Blue Light	#6CC4E8
Secondary Mist	Blue Mist	#E8F5FC
Text Dark	Charcoal	#162520
Text Muted	Slate Grey	#6B7280
Background	Off-White	#F5FEFA
White	Pure White	#FFFFFF
Overlay	Dark Tint	rgba(22, 37, 32, 0.90)

Colour Usage:

• Emerald → CTA buttons, borders, service icons, active states, progress elements
• Blue → Heading accents, trust badges (ICAEW/ACCA), stat counters, text links
• Emerald → Blue gradient → Hero accent, Final CTA section background

Typography

• Headlines: Satoshi — geometric, modern, confident (via Fontshare CDN)
• Body: Inter — clean, readable, professional
• Accent / Numbers: DM Mono — for stats, figures, financial data

Design Language

• Light, airy, predominantly white/off-white backgrounds
• Emerald green as primary accent — CTAs, borders, interactive elements
• Sky blue as secondary accent — trust, headings, data
• Generous whitespace — premium feel
• Subtle grain texture overlays on hero sections
• Glassmorphism cards (frosted glass with green tint) for service blocks
• Soft shadows — no harsh drop shadows
• Rounded corners: 16px standard, 24px hero cards, 999px buttons

---

3. Technology Stack

Frontend

Technology	Purpose
Next.js 15 (App Router)	Core framework — SSR, SSG, ISR
TypeScript	Type safety across the entire codebase
Tailwind CSS v4	Utility-first styling
Framer Motion	Page transitions, element animations
GSAP + ScrollTrigger	Scroll-driven animations, reveal effects
Three.js / React Three Fiber	3D hero scene (globe, particles)
Lenis	Smooth scrolling

CMS & Backend

Technology	Purpose
Payload CMS 3	Headless CMS — runs natively inside Next.js
PostgreSQL	Primary database (via Neon or Supabase)
Payload Admin Panel	Full content management UI
Resend	Transactional emails (form submissions, notifications)

Infrastructure

Technology	Purpose
Vercel	Hosting & deployment (Edge Network)
Cloudinary or Uploadthing	Image/media management via CMS
Sentry	Error monitoring

Why This Stack

• Payload CMS runs inside the same Next.js codebase — no separate server needed, zero friction
• Admin panel is fully customisable and extensible
• Webhooks, custom fields, form builders all built-in
• Performance: Lighthouse score target 95+

---

4. Site Architecture

Pages

/                          → Home (main funnel page)
/services                  → Services overview
/services/bookkeeping      → Bookkeeping detail page
/services/tax-returns      → Self Assessment & Corporation Tax
/services/payroll          → Payroll Management
/services/vat-returns      → VAT Returns
/about                     → About the company & team
/blog                      → Blog index
/blog/[slug]               → Individual blog post
/contact                   → Contact page (consultation form)
/privacy-policy            → Legal
/cookie-policy             → Legal

Navigation Structure

Logo | Services ▾ | About | Blog | Contact    [Book a Free Consultation →]

• Sticky header with blur backdrop on scroll
• Mobile: hamburger menu with full-screen overlay, animated slide-in
• Services dropdown with icon cards for each service

---

5. Home Page — Sales Funnel Design

The homepage is structured as a sequential sales funnel. Each section is designed to move the visitor one step closer to booking a consultation.

---

Section 1 — Hero (Above the Fold)

Purpose: Capture attention, establish premium positioning, deliver core value proposition.

Layout:

• Full-viewport height
• Split layout: left — text content; right — 3D animated scene

3D Scene (Three.js / React Three Fiber):

• Interactive 3D globe with soft green particle network
• Globe rotates slowly, responds to mouse/cursor movement (parallax)
• Floating financial data nodes (dots connected by lines, like a network graph)
• Subtle green particle field in the background
• On mobile: simplified 2D animated version (performance-first)

Content:

[EYEBROW TAG]  Trusted by 500+ UK Businesses

[HEADLINE H1]
Smart Accounting
for Growing
British Businesses

[SUBHEADLINE]
From sole traders to limited companies — Axil Accountants handles
your numbers so you can focus on what you do best.

[CTA PRIMARY]   → Book a Free Consultation
[CTA SECONDARY] → See Our Services

[TRUST STRIP]   ★ 4.9 Google Rating  |  ICAEW Certified  |  500+ Clients Served

Animation:

• Headline words appear with staggered slide-up (GSAP)
• CTAs fade in after headline
• Trust strip slides in from bottom
• 3D globe loads with scale-in and rotation ease

---

Section 2 — Pain Points / "We Understand"

Purpose: Create empathy. Show we understand client problems.

Layout: Full-width section, dark green background (#1A2E1F), white text

Content:

[HEADLINE]
Running a business is hard enough.
Tax deadlines shouldn't keep you up at night.

[SUBTEXT]
Whether you're a freelancer juggling invoices or a director managing
payroll and VAT — the financial admin never stops.

[3-column pain point cards — frosted glass on dark green]
📋  Missed deadlines & HMRC penalties
🧮  Confused by tax rules that keep changing
⏰  Hours wasted on bookkeeping instead of growing your business

Animation:

• Cards appear on scroll with staggered reveal (ScrollTrigger)
• Section uses subtle parallax background movement

---

Section 3 — Services Overview

Purpose: Present services clearly. Each service links to its own detail page.

Layout: Light background, 2×2 grid of service cards (desktop), vertical stack (mobile)

Services:

1. Bookkeeping — Accurate, up-to-date records. Monthly reports. Peace of mind.
2. Tax Returns — Self Assessment & Corporation Tax prepared and filed on time, every time.
3. Payroll — Compliant payroll for your team. RTI submissions to HMRC. Payslips handled.
4. VAT Returns — MTD-compliant VAT preparation, filing, and advice.

Card Design:

• Frosted glass with sage green border
• Icon (custom SVG, line-style)
• Service name + short description
• "Learn More →" link
• Hover: subtle lift effect + green glow border

CTA below grid:

Not sure which service you need?
[→ Let's Talk — Book a Free Consultation]

---

Section 4 — Why Choose Axil Accountants

Purpose: Build trust and differentiate from competitors.

Layout: Alternating left/right layout with animated stat counters

Content:

[HEADLINE] Why Businesses Choose Axil

[STAT COUNTERS — animate on scroll]
500+   Businesses Served
98%    Client Retention Rate
£2M+   Tax Saved for Our Clients
12+    Years of Experience

[3 USP blocks]

✓  ICAEW & ACCA Qualified
   Our accountants hold the UK's most respected professional qualifications.

✓  Fixed Monthly Engagement
   No surprise bills. You always know what you're paying for.

✓  Dedicated Account Manager
   One point of contact who knows your business inside-out.

✓  Cloud-Based & Paper-Free
   We work with Xero, QuickBooks, and FreeAgent — wherever you are.

---

Section 5 — Testimonials / Social Proof

Purpose: Validate trust with real client voices.

Layout: Carousel / marquee with client cards

Sources:

• Google Reviews (embedded widget or scraped/cached in CMS)
• Manual reviews added via Payload CMS admin panel
• ICAEW / ACCA badge display

Card Design:

• Client name + business type
• Star rating (5 stars)
• Quote (2–3 sentences)
• Optional: client photo or avatar

CTA below:

Join hundreds of satisfied UK businesses.
[→ Book Your Free Consultation Today]

---

Section 6 — Who We Work With

Purpose: Help visitors self-identify. Reinforces audience segmentation.

Layout: 3 illustrated cards with icons

[Sole Traders]         [Limited Companies]       [Startups]
Self-employed?         Running an Ltd?            Just launched?
We handle your         We manage your             We'll set you up
Self Assessment,       annual accounts,           right from day one —
bookkeeping, and       payroll, VAT, and          HMRC registration,
more.                  Corp Tax.                  bookkeeping, payroll.

[→ Learn More]         [→ Learn More]             [→ Learn More]

---

Section 7 — How It Works

Purpose: Remove friction. Show how easy it is to get started.

Layout: Horizontal step-by-step process (3 steps), animated connecting line

Step 1          →       Step 2          →       Step 3
Book a Free             We Review               You Focus on
Consultation            Your Needs              Your Business

15-minute call,         We propose a            We handle everything
no commitment.          tailored plan.          — you get reports.

---

Section 8 — Blog Preview

Purpose: SEO value + content authority. Show expertise.

Layout: 3 latest blog post cards in a row

• Managed entirely through Payload CMS
• Cards: cover image, category tag, headline, excerpt, date, read time
• CTA: "Visit Our Blog →"

---

Section 9 — Final CTA Section

Purpose: Last chance to convert before footer. High-urgency design.

Layout: Full-width, deep green background, centred content

[HEADLINE]
Ready to take the stress out of your finances?

[SUBHEADLINE]
Book a free 15-minute consultation with our team today.
No commitment. No jargon. Just clear, honest advice.

[CTA BUTTON — large, white on green]
→ Book a Free Consultation

[Trust reassurance below]
★ 4.9/5 on Google  ·  ICAEW Certified  ·  No lock-in contracts

---

Footer

4-column layout:

1. Logo + tagline + social icons (LinkedIn, Facebook, Instagram)
2. Services links
3. Company links (About, Blog, Contact, Careers)
4. Contact info (address, phone, email) + ICAEW/ACCA badge

Bottom bar: Copyright · Privacy Policy · Cookie Policy

---

6. Individual Service Pages

Each service has a dedicated landing page, structured as a mini-funnel:

1. Hero — Service name, bold headline, CTA ("Get a Quote" → consultation form)
2. What's Included — Bullet list of deliverables
3. Who It's For — Targeted at sole traders / Ltd / startups as relevant
4. How It Works — 3-step process specific to this service
5. FAQ — 5–7 questions, managed in CMS
6. Testimonials — Filtered by service tag from CMS
7. CTA — Book consultation

---

7. About Page

Sections:

1. Hero — Company story headline + team photo
2. Our Story — Founding, mission, values
3. Team — Staff profiles (photo, name, role, qualification) — managed in CMS
4. Our Values — 4 core values (integrity, clarity, reliability, growth)
5. Certifications — ICAEW / ACCA logos + descriptions
6. CTA — Meet us for a free consultation

---

8. Blog

Features:

• Blog index with search + category filter
• Articles managed entirely in Payload CMS
• Rich text editor with image upload, code blocks, pull quotes
• Author, publish date, reading time, category tags
• Open Graph / SEO metadata per post (editable in CMS)
• Related posts section on each article

Content Strategy: Articles targeting UK accounting SEO terms (e.g., "How to file a Self Assessment tax return", "What expenses can I claim as a sole trader UK", "MTD for VAT explained")

---

9. CMS Admin Panel (Payload CMS)

The Payload CMS admin panel is available at /admin and allows the client to manage all website content without touching code.

Collections (Manageable Content)

Collection	What you can manage
Pages	Edit text, headings, CTAs on any page
Services	Add/edit service pages, descriptions, FAQs
Blog Posts	Create, edit, schedule, publish articles
Team Members	Add/remove staff profiles, photos, bios
Testimonials	Add client reviews manually
FAQs	Global FAQ entries, tagged by service
Media Library	Upload images, PDFs, videos
Forms	Create contact forms, newsletter sign-ups
Navigation	Edit menu items, dropdown links
Footer	Edit footer links, contact details, social URLs
Site Settings	Global settings — phone, email, address, logo

Form Builder

• Drag-and-drop form fields (text, email, phone, dropdown, checkbox, file upload)
• Per-form settings:
  • Email notification — send submissions to any email address
  • Webhook — send payload to external URL (CRM, Slack, Zapier, etc.)
  • Redirect — after submission, redirect to thank-you page
  • Confirmation message — custom success message shown to user
• All form submissions stored in CMS admin panel

Integration Settings (Admin-Configurable)

• Calendly URL — booking widget embed URL
• Google Analytics ID
• Google Tag Manager ID
• Facebook Pixel ID
• Tawk.to / chat widget — paste widget code in admin
• Webhook endpoints — add named webhooks, assign to forms
• SMTP / Email provider — configure Resend API key
• Social media URLs — LinkedIn, Facebook, Instagram

---

10. Chat Bot

Recommended approach: Configurable in admin panel — client can activate one of:

Option A — AI Chat (recommended)

• Custom-built chat widget powered by OpenAI GPT-4o or Claude API
• Trained on company services, FAQs, pricing guidance
• Collects visitor name + email before chat
• Escalates to human (email notification) when it cannot answer
• Conversation logs stored in CMS / sent to email

Option B — Live Chat Widget

• Tawk.to embed — free, supports operators going online/offline
• Chat widget code paste-able in admin settings

Option C — Lead Capture Bot

• Scripted flow: asks 3–4 qualifying questions
• Collects name, email, business type, main concern
• Sends lead to email + optional webhook to CRM

Admin can switch between options or disable chat entirely from settings panel.

---

11. Animations & Visual Effects

Hero — 3D Scene (Three.js / R3F)

• Slowly rotating 3D sphere with dot-matrix surface
• Particle network floats above globe — financial data visualisation metaphor
• Mouse parallax: globe and particles shift slightly with cursor movement
• Colour palette: sage green particles on near-white background
• Performance: reduced particle count on mobile, falls back gracefully

Scroll Animations (GSAP + ScrollTrigger)

• Headlines: word-by-word or line-by-line slide-up reveal
• Section entries: fade-in + translate-up on scroll
• Stat counters: number count-up animation when entering viewport
• Service cards: staggered reveal with 100ms delay between cards
• "How It Works" timeline: animated line draws left-to-right as user scrolls

Page Transitions (Framer Motion)

• Page-level: smooth fade + slight vertical slide between routes
• Overlay: green full-screen wipe on navigation (optional — client preference)

Micro-Interactions

• Buttons: subtle scale + colour shift on hover
• Nav links: underline slides in from left on hover
• Cards: lift + border glow on hover
• Form fields: smooth focus state with green border transition
• CTA button: gentle pulse animation when idle (draws attention)

Smooth Scrolling

• Lenis for buttery-smooth scroll physics across all sections

---

12. Performance & SEO

Performance Targets

• Lighthouse Performance: 95+
• First Contentful Paint: < 1.2s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

SEO

• Next.js App Router with built-in metadata API
• Per-page SEO title, description, Open Graph image — all editable in CMS
• Structured data (JSON-LD): LocalBusiness, AccountingService, FAQPage schemas
• Sitemap auto-generated (/sitemap.xml)
• Robots.txt configurable
• Blog articles optimised for UK accounting search terms

Accessibility

• WCAG 2.1 AA compliant
• Keyboard navigation throughout
• Proper ARIA labels on interactive elements
• Sufficient colour contrast for all text

---

13. Responsive Design

Breakpoint	Behaviour
Mobile (< 640px)	Single column, 3D simplified, hamburger nav
Tablet (640–1024px)	2-column grids, condensed nav
Desktop (> 1024px)	Full layout, all animations active
Large (> 1440px)	Max-width container 1440px, centred

---

14. Key Conversion Points (CTA Map)

Every CTA across the site leads to the consultation booking form.

Location	CTA Text	Action
Hero	"Book a Free Consultation"	Opens booking form / Calendly modal
Hero	"See Our Services"	Smooth scroll to services section
Services section	"Let's Talk"	Opens booking form
Each service page hero	"Get Started Today"	Opens booking form
Testimonials section	"Join Our Clients"	Opens booking form
Final CTA section	"Book a Free Consultation"	Opens booking form
Header (sticky)	"Book a Consultation"	Opens booking form
Chat bot	Collect name + email	Sends lead to CRM / email

---

15. Project Deliverables

• Full Next.js 15 codebase (TypeScript)
• Payload CMS configured with all collections
• Admin panel at /admin
• All pages: Home, Services (5 pages), About, Blog, Contact
• 3D animated hero scene (Three.js / R3F)
• GSAP scroll animations
• Framer Motion page transitions
• Consultation booking form (with email notifications + webhook support)
• Responsive design (mobile-first)
• SEO metadata system
• Google Analytics / GTM integration
• Chat bot integration (configurable in admin)
• Deployment to Vercel
• CMS training documentation for client

---

16. Out of Scope (v1)

• Client portal / login area
• Online payment processing
• Accounting software integration (Xero API, etc.)
• Multi-language support
• A/B testing framework

These can be considered for v2 based on business needs.

---

Document maintained by development team. Last updated: February 2026.