AJ
Back to Builds
WebPlanning

Jaya Padiyar & Associates

Professional website for a Chartered Accountancy firm. 27 services across 6 categories, team profiles, EmailJS contact forms, and Google Maps integration.

Next.js 14Framer MotionEmailJSTailwind CSS

Overview

A comprehensive professional website for Jaya Padiyar & Associates, a CA firm based in Dewas, Madhya Pradesh. The site covers the full practice across Corporate, Taxation, Audit, Advisory, Loans, and other services, designed to establish credibility and generate consultation requests from prospective clients across central India.

Why it was built

Another client project, this time playing the role of Product Designer + Senior Developer. The firm had no web presence and needed something that conveyed trust while being easy to find via local search. The entire project brief was written before a single line of code: a 500-line product design document covering colours, typography, animations, SEO, and a 5-phase delivery plan.

27 Dynamic Service Pages

All service content lives in a typed data file. A single template component renders any of the 27 services across 6 categories, pulling intro, benefits, process steps, and related services per slug.

Mega Dropdown + Mobile Drawer

Desktop gets a 3-column mega-menu listing all 6 service categories. Mobile gets a right-sliding full-height drawer with Services as an accordion section. Header transitions from transparent to solid at 80px scroll.

Animated Stats Counter

An AnimatedCounter component counts up from zero when the section enters the viewport: 10+ Years, 500+ Clients, 30+ Services, 100% Compliance. The numbers animate once and never replay.

Tech Breakdown

Next.js 14

SSG for 27 service pages means all routes are pre-rendered. Auto-generated sitemap.xml and fast static loads are critical for local search rankings, a CA firm's primary acquisition channel.

EmailJS

Explicitly chosen to avoid a backend. No server, no hosting cost, no maintenance. Just three environment variables and a template, the right call for a small firm site.

Tailwind CSS

Mobile-first design across 4 breakpoints. Utility classes make responsive layout changes readable and fast, which matters when prototyping a complex mega-menu.

Poppins + Inter via next/font

Self-hosted fonts through Next.js's font optimisation prevent layout shift. CLS < 0.1 was a hard requirement in the brief alongside LCP < 2.5s.

Challenges
  • 1

    The colour palette had to be semantically derived from the ICAI logo: navy blue primary, saffron orange CTA, accent green for WhatsApp. Getting this to feel modern without looking generic was the hardest design constraint.

  • 2

    All 27 service slugs must resolve without a 404. With a dynamic route and a data file, this is straightforward, but the slug naming convention had to be locked down before any URLs were shared externally.

What's Next

Waiting on client assets to begin Phase 1. Once received, Phase 1 covers the homepage, navbar, footer, and 3 core service pages. The scroll-spy Table of Contents on the services overview page is the most technically interesting piece left to build.

See it live

Check out the deployed site.