WebsiteTax & AccountingSmall BusinessLocal Service2026
Groverz Tax & Accounting Solutions
A conversion-focused tax practice website with an interactive refund estimator and physics-driven hero animations.
ClientAnkit Grover
LocationEast Cannington, Perth, WA, Australia
Timeline2–3 weeks
Budget$2.5k – $5k
RoleSolo (design, development, deployment)
01
Overview
Ankit Grover needed a professional web presence that matched the quality of his independent tax practice in East Cannington, Perth. C4 Studios designed and built a four-page React SPA with a clear conversion funnel — from an interactive tax refund estimator using live ATO tax brackets, through a seven-service accordion catalogue with category filtering, to a backend-powered contact form with rate limiting, honeypot spam protection, and Resend email delivery. Hero sections feature a custom canvas-based physics simulation of drifting tax symbols, and the navigation uses a liquid-glass hover effect built with Framer Motion. The result is a polished, mobile-first site that positions Groverz as the approachable, no-nonsense alternative to big-box accounting firms.
02
Screenshots
03
What I Delivered
- Complete website — design, development and deployment (React SPA on Vercel)
- Homepage with hero, stats bar, service grid, trust markers, document checklist, tax estimator, testimonials, and CTA
- About page with founder profile card, service overview, expectations grid, process timeline, and FAQ
- Services page with seven-service filterable accordion catalogue, client type grid, pricing section, process timeline, tax estimator, and FAQ
- Contact page with multi-field enquiry form, Google Maps embed, phone/email cards, and office info sidebar
- Custom 404 page with branded styling and navigation recovery links
- Interactive tax refund estimator calculator using 2025-26 ATO resident tax rates
- Contact form backend with Resend email integration, rate limiting, honeypot anti-spam, input sanitisation, and styled HTML emails
- Vercel serverless API route for contact form (with legacy Netlify Functions support)
- Responsive design — fully mobile-first from 320px to ultrawide
- Floating WhatsApp chat button linked to business number
- Google Maps embed for office location
- Security headers (CSP, X-Frame-Options, Referrer-Policy, Permissions-Policy)
- SEO meta tags (title, description, theme-color, lang="en-AU")
- C4 Studios credit badge with GSAP-animated SVG wordmark in footer and CTA sections
- Content writing and copywriting for all pages
04
Key Features
- Interactive tax refund estimator using 2025-26 ATO resident tax rates with real-time calculation
- Seven-service accordion system with category filtering (Personal, Business, Trusts & Companies, Finance) and Framer Motion animation
- Canvas-based floating math symbol physics simulation with elastic collisions, wall bouncing, and seeded randomness
- Liquid-glass hover effect on desktop navigation with radial gradient, backdrop blur, and spring physics
- Testimonial cards with five-star ratings, avatar initials, and decorative serif quotation marks
- Four-step visual process timeline with alternating layout and connecting gradient line
- Sticky header with backdrop blur, mobile hamburger navigation, and body scroll lock
- Document checklist section with two-column icon grid layout for appointment preparation
- Stats bar — Over 5000 returns, $99 individual, 5★ Google reviews, 100% ATO compliant
- ATO late-lodgement penalty warning banner with click-to-open info modal
- Contact form with honeypot anti-spam, server-side rate limiting, input sanitisation, and field-level validation
- Styled HTML email templates sent via Resend with branded navy header and Perth timezone formatting
- C4 Studios credit badge featuring GSAP morphing SVG wordmark with dormant/mono/colour state transitions
- Floating WhatsApp button with WhatsApp Business deep link
- Google Maps embed (sandboxed, lazy-loaded) with office address card
- Acknowledgement of Country for the Whadjuk people of the Noongar nation in footer
- prefers-reduced-motion respected — canvas animation disabled entirely for accessibility
05
Stack & Tooling
- React 18.2 (Vite SPA)
- JavaScript (JSX)
- Vite 6.1
- React Router DOM 6.26
- Tailwind CSS 3.4 + shadcn/ui (Radix primitives)
- Framer Motion 11.16
- GSAP 3.14 + @gsap/react 2.1
- Lucide React 0.475
- Resend 6.10 (transactional email)
- PostCSS + Autoprefixer
- ESLint 9.x + Prettier 3.8
- Vercel (hosting + serverless functions)
06
Integrations & Backend
- Resend — transactional email for contact form submissions with styled HTML templates
- Google Maps Embed API — office location on contact page (sandboxed iframe, lazy-loaded)
- WhatsApp Business — floating chat button deep-linking to business number
- Vercel Serverless Functions — /api/contact POST endpoint for form processing
- Netlify Functions — legacy contact route via redirect
07
Performance / SEO / Accessibility
- Security headers: X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy, CSP
- SEO: descriptive <title> with location + price, <meta description>, theme-color, lang="en-AU"
- Canvas animation respects prefers-reduced-motion — completely disabled for accessibility
- Canvas particle count halved on mobile viewports for GPU performance
- Google Maps iframe uses loading="lazy" and sandbox attributes for security and deferred load
- Vite code splitting and tree shaking for minimal bundle size
- Input sanitisation (NFKC normalisation, control char stripping, length limits) prevents injection
- Rate limiting on contact API (5 requests per 15-minute window per IP)
- Semantic HTML with proper heading hierarchy, nav, main, footer landmarks
- ARIA attributes on icon buttons, mobile menu toggle, form states
- Keyboard-accessible accordion and select via Radix UI primitives
08
Challenges & Constraints
- Building a canvas-based floating symbol system with elastic collision physics that felt organic without being distracting — required seeded randomness, spin-transfer on collision, and angular velocity damping
- Designing a service accordion that scales across four categories with filtering, animated expand/collapse, and included-items checklists without layout shift
- Creating a tax refund estimator using real ATO brackets while clearly labelling it as an estimate — required careful disclaimer placement and bracket-accurate edge-case handling
- Implementing a contact form backend that works identically across Vercel serverless, Netlify Functions, and Vite dev middleware — solved with a shared service module and adapter layers
- Achieving a liquid-glass hover effect on desktop navigation that feels responsive and physical — solved with spring physics, getBoundingClientRect tracking, and layered radial gradients with backdrop blur
09
What I'd Improve Next
- Add Open Graph and Twitter Card meta tags for social sharing previews
- Implement page-level code splitting with React.lazy() and Suspense to reduce initial bundle
- Add a sitemap.xml and robots.txt for improved search engine crawling
- Replace photo placeholder with actual professional photography of Ankit and the office
- Add analytics (Google Analytics or Plausible) for visitor tracking and contact form conversion