# 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._