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.
Workflow WebsiteLive
Panarwala & Associates
A responsive professional-services website that organizes tax consulting, preparation, and advisory information through reusable, accessible service pages.
panarwala.in/services
Panarwala & AssociatesPractical tax guidance for growing businesses.Explore services
Tax advisoryClear, accessible service information
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
Main 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
How the system is structured
- 01
services.js acts as the single source of truth for service titles, labels, images, tags, descriptions, and service items.
- 02
config.js centralizes brand identity, logo paths, contact details, social links, and SEO configuration.
- 03
Home, Footer, and ServicePage consume the same service data instead of maintaining separate copies.
- 04
A shared useInView hook provides fire-once IntersectionObserver behavior and disconnects after activation.
Implementation
Technology and data
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