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