diff --git a/.claude/settings.json b/.claude/settings.json index e077ca4..6283c0f 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -1,6 +1,6 @@ { "enabledPlugins": { - "frontend-design@claude-code-plugins": false, + "frontend-design@claude-code-plugins": true, "feature-dev@claude-code-plugins": false } } diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 3ab194d..92efa85 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -31,7 +31,8 @@ "Bash(node_modules/.bin/eslint:*)", "Bash(node --input-type=module:*)", "Bash(python3:*)", - "Bash(ls:*)" + "Bash(ls:*)", + "WebFetch(domain:axilaccountants.co.uk)" ] } } diff --git a/Assets/CV.jpeg b/Assets/CV.jpeg new file mode 100644 index 0000000..feb4cc6 Binary files /dev/null and b/Assets/CV.jpeg differ diff --git a/Assets/payroll-1.jpeg b/Assets/payroll-1.jpeg new file mode 100644 index 0000000..f79d2fb Binary files /dev/null and b/Assets/payroll-1.jpeg differ diff --git a/Assets/quickbooks.jpeg b/Assets/quickbooks.jpeg new file mode 100644 index 0000000..4d4ee8a Binary files /dev/null and b/Assets/quickbooks.jpeg differ diff --git a/Assets/tax.jpeg b/Assets/tax.jpeg new file mode 100644 index 0000000..590a1ed Binary files /dev/null and b/Assets/tax.jpeg differ diff --git a/Assets/xero.jpeg b/Assets/xero.jpeg new file mode 100644 index 0000000..b189d15 Binary files /dev/null and b/Assets/xero.jpeg differ diff --git a/public/courses/cv.jpeg b/public/courses/cv.jpeg new file mode 100644 index 0000000..feb4cc6 Binary files /dev/null and b/public/courses/cv.jpeg differ diff --git a/public/courses/payroll.jpeg b/public/courses/payroll.jpeg new file mode 100644 index 0000000..f79d2fb Binary files /dev/null and b/public/courses/payroll.jpeg differ diff --git a/public/courses/quickbooks.jpeg b/public/courses/quickbooks.jpeg new file mode 100644 index 0000000..4d4ee8a Binary files /dev/null and b/public/courses/quickbooks.jpeg differ diff --git a/public/courses/tax.jpeg b/public/courses/tax.jpeg new file mode 100644 index 0000000..590a1ed Binary files /dev/null and b/public/courses/tax.jpeg differ diff --git a/public/courses/xero.jpeg b/public/courses/xero.jpeg new file mode 100644 index 0000000..b189d15 Binary files /dev/null and b/public/courses/xero.jpeg differ diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 43e29ea..687a6f4 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -13,8 +13,8 @@ export const metadata: Metadata = { const CONTACT_DETAILS = [ { label: 'Email', - value: 'hello@axilaccountants.co.uk', - href: 'mailto:hello@axilaccountants.co.uk', + value: 'info@axilaccountants.co.uk', + href: 'mailto:info@axilaccountants.co.uk', icon: ( Payroll + diff --git a/src/app/courses/page.tsx b/src/app/courses/page.tsx new file mode 100644 index 0000000..0d59a7d --- /dev/null +++ b/src/app/courses/page.tsx @@ -0,0 +1,331 @@ +import type { Metadata } from 'next'; +import Image from 'next/image'; +import { Header } from '@/components/layout/Header'; +import { Footer } from '@/components/layout/Footer'; +import { Button } from '@/components/ui/Button'; +import { BeamButton } from '@/components/ui/BeamButton'; +import { FadeIn } from '@/components/ui/FadeIn'; +import { SpotlightCard } from '@/components/ui/SpotlightCard'; +import { CheckCircleIcon } from '@/components/ui/icons'; + +export const metadata: Metadata = { + title: 'Courses — Axil Accountants', + description: + 'Practical accounting courses for UK learners. Self Assessment, Payroll, QuickBooks, Xero and interview preparation — taught by qualified accountants.', +}; + +const COURSES = [ + { + id: 'interview-ready', + image: '/courses/cv.jpeg', + badge: '01', + title: 'Interview Ready', + subtitle: 'Your first UK accounting role', + price: '£129', + level: 'Beginner', + duration: 'Self-paced', + isNew: false, + desc: 'Designed for aspiring accountants who are ready to enter the workforce. Learn exactly what UK employers expect, how to present your experience confidently, and how to succeed at every stage — from CV to offer letter.', + includes: [ + 'CV & cover letter guidance', + 'Mock interview practice', + 'UK accounting terminology', + 'What employers look for', + 'Job search strategy', + 'LinkedIn profile optimisation', + ], + accent: 'text-emerald', + glowColor: 'green' as const, + }, + { + id: 'self-assessment', + image: '/courses/tax.jpeg', + badge: '02', + title: 'Self Assessment Tax Return', + subtitle: 'File your own return — correctly and on time', + price: '£99', + level: 'Beginner', + duration: '2 hours', + isNew: false, + desc: 'A focused two-hour course walking you through the HMRC Self Assessment process from start to finish. Perfect for sole traders, freelancers, and landlords who want to take control of their tax affairs.', + includes: [ + 'HMRC registration walkthrough', + 'Allowable expenses explained', + 'Step-by-step filing guide', + 'Deadlines & penalty awareness', + 'Common mistakes to avoid', + 'Real-world worked examples', + ], + accent: 'text-blue', + glowColor: 'blue' as const, + }, + { + id: 'payroll', + image: '/courses/payroll.jpeg', + badge: '03', + title: 'Payroll', + subtitle: 'Salaries, taxes & pensions', + price: '£149', + level: 'Intermediate', + duration: 'Self-paced', + isNew: false, + desc: 'A thorough, practical course covering the full UK payroll cycle. Learn to calculate gross and net pay, manage tax codes, run RTI submissions, and stay HMRC-compliant — avoiding costly errors.', + includes: [ + 'PAYE & tax codes', + 'National Insurance calculations', + 'Pension auto-enrolment', + 'Statutory pay (SSP, SMP, SPP)', + 'RTI submissions to HMRC', + 'Payslip preparation', + ], + accent: 'text-emerald', + glowColor: 'green' as const, + }, + { + id: 'quickbooks', + image: '/courses/quickbooks.jpeg', + badge: '04', + title: 'QuickBooks', + subtitle: 'Modern accounting software', + price: '£199', + level: 'Beginner–Intermediate', + duration: 'Self-paced', + isNew: false, + desc: "Master one of the world's most widely used accounting platforms. Learn setup, invoicing, bank reconciliation, and MTD-compliant VAT returns — with practical exercises throughout.", + includes: [ + 'Setup & chart of accounts', + 'Invoicing & expense tracking', + 'Bank reconciliation', + 'VAT returns & MTD compliance', + 'Reporting & dashboards', + 'Practical exercises & templates', + ], + accent: 'text-blue', + glowColor: 'blue' as const, + }, + { + id: 'xero', + image: '/courses/xero.jpeg', + badge: '05', + title: 'Xero', + subtitle: 'Business accounting from scratch', + price: '£199', + level: 'Beginner', + duration: 'New cohort — 2026', + isNew: true, + desc: "The complete beginner's guide to Xero — the UK's most popular cloud accounting platform. Ideal for business owners and anyone building a career in modern bookkeeping.", + includes: [ + 'Xero setup & navigation', + 'Invoices, bills & expenses', + 'Bank feeds & reconciliation', + 'Payroll basics in Xero', + 'VAT returns & MTD compliance', + 'Financial reports & insights', + ], + accent: 'text-emerald', + glowColor: 'green' as const, + }, +]; + +const WHY_ITEMS = [ + { + number: '01', + title: 'Taught by practising accountants', + body: 'Every course is designed and delivered by qualified UK accountants with real-world client experience — not generic online trainers.', + }, + { + number: '02', + title: 'One-off payment, lifetime access', + body: 'Pay once and revisit the material whenever you need it. No subscriptions, no renewals, no hidden fees.', + }, + { + number: '03', + title: 'Practical, not theoretical', + body: 'Real HMRC scenarios, real software walkthroughs, and real examples — so you can apply what you learn from day one.', + }, +]; + +export default function CoursesPage() { + return ( + <> +
+
+ {/* Hero */} +
+
+
+ +
+

+ Professional Development +

+

+ Accounting courses +
built for the UK +

+

+ Practical, affordable courses taught by qualified accountants. Whether you're + filing your own tax return or building a career in finance — we've got a + course for you. +

+
+ + Browse Courses + + +
+
+ +
+ + + {/* Courses grid */} +
+
+
+ {COURSES.map((course, i) => ( + + + {/* Thumbnail */} +
+ {course.title} + {/* Price badge */} +
+ + {course.price} + +
+ {/* New cohort badge */} + {course.isNew && ( +
+ + New Cohort + +
+ )} +
+ + {/* Content */} +
+ {/* Meta row */} +
+ {course.badge} + · + {course.level} + · + {course.duration} +
+ +

+ {course.title} +

+

+ {course.subtitle} +

+

{course.desc}

+ +
    + {course.includes.map((item) => ( +
  • + + {item} +
    • + ))} +
+ +
+ +
+
+ + + ))} +
+
+
+ + {/* Why section */} +
+
+ +
+

+ Why us +

+

+ Learning that +
+ actually works +

+
+ + +
+ {WHY_ITEMS.map((item, i) => ( + +
+
+ {item.number} +
+

+ {item.title} +

+

{item.body}

+
+ + ))} +
+
+
+ + {/* CTA */} +
+
+ +

+ Not sure which course is right for you? +

+

+ Drop us a message and we'll point you in the right direction — no obligation, + no hard sell. +

+ + +
+
+ +
- +
diff --git a/src/components/ui/BeamButton.tsx b/src/components/ui/BeamButton.tsx index c89e825..8fdb074 100644 --- a/src/components/ui/BeamButton.tsx +++ b/src/components/ui/BeamButton.tsx @@ -1,6 +1,7 @@ 'use client'; import { useEffect, useId, useRef, useState } from 'react'; +import Link from 'next/link'; import { motion } from 'framer-motion'; import { ArrowRightIcon } from './icons'; import { Spinner } from './Spinner'; @@ -14,6 +15,7 @@ interface BeamButtonProps extends React.ButtonHTMLAttributes loading?: boolean; trailingArrow?: boolean; leadingIcon?: React.ReactNode; + href?: string; } const HEIGHTS: Record = { sm: 36, md: 44, lg: 56 }; @@ -46,6 +48,7 @@ export function BeamButton({ leadingIcon, className = '', disabled, + href, ...props }: BeamButtonProps) { const uid = useId().replace(/:/g, ''); @@ -67,70 +70,65 @@ export function BeamButton({ const { bg, text, border } = VARIANTS[variant]; const arrowSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16; - return ( - ); } diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 3651b37..5622d44 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -1,6 +1,7 @@ 'use client'; import { forwardRef } from 'react'; +import Link from 'next/link'; import { Spinner } from './Spinner'; import { ArrowRightIcon } from './icons'; @@ -13,6 +14,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes { loading?: boolean; trailingArrow?: boolean; leadingIcon?: React.ReactNode; + href?: string; } const variants: Record = { @@ -42,28 +44,26 @@ export const Button = forwardRef( children, className = '', disabled, + href, ...props }, ref, ) => { const arrowSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16; - return ( - ); },