The frontend previously repeated service data and viewport-observer logic across components, while the service-detail view relied heavily on inline styling. The refactored architecture replaces that duplication with shared data, reusable components, a common visibility hook, and a CSS design system.
Panarwala & Associates
A responsive professional-services website that organizes tax consulting, preparation, and advisory information through reusable, accessible service pages.

About Panarwala & Associates
The Panarwala & Associates website presents six professional services through a focused home page, reusable service cards, and individual service-detail views. Brand, contact, social, SEO, and service content are kept in centralized configuration files so the interface stays consistent as information changes.
Product thinking
Challenge and approach
A token-based global stylesheet defines color, typography, spacing, radius, motion, shadow, and layout values. Component-specific styles replace the former inline styles, while CSS custom properties carry the few values that must remain dynamic.
Capabilities
Key capabilities & features
Data-driven home, footer, and service-detail views
Six services maintained from one shared data source
Centralized brand, contact, social, and SEO configuration
Responsive service discovery and inquiry experience
Architecture
System structure & pipeline
services.js acts as the single source of truth for service titles, labels, images, tags, descriptions, and service items.
config.js centralizes brand identity, logo paths, contact details, social links, and SEO configuration.
Home, Footer, and ServicePage consume the same service data instead of maintaining separate copies.
A shared useInView hook provides fire-once IntersectionObserver behavior and disconnects after activation.
Implementation
Technology and data pipeline
Technology stack
- React
- CSS custom properties
- IntersectionObserver
Engineering details
Technical considerations
AccessibilitySemantic and keyboard support
- Keyboard-operable service cards with focus support
- Skip link and semantic breadcrumb navigation
- Accessible labels for social links and loading state
- Semantic address markup and aria-current on the active breadcrumb
PerformanceRendering and loading choices
- Memoized reusable components for frequently rendered interface elements
- Stable navigation callbacks with useCallback
- Lazy loading for non-critical images
- Intersection observers disconnect after their first trigger
Use cases
What the project supports
- Explore tax consulting, preparation, and advisory services
- Open service-specific information from the shared services catalog
- Maintain service, contact, social, and brand content from centralized files


