# Hamton Brown CPA - Professional Tax Services A modern, professional website for Hamton Brown CPA firm built with Next.js 14, TypeScript, and Tailwind CSS. ## ๐Ÿš€ Features - **Modern Tech Stack**: Next.js 14 with App Router, TypeScript, Tailwind CSS - **Professional Design**: Clean, accessible design with brand-consistent color palette - **SEO Optimized**: Automatic sitemap generation, meta tags, and structured data - **Contact Forms**: Validated contact forms with email integration - **Docker Ready**: Multi-stage Docker builds for development and production - **CI/CD**: GitHub Actions for automated testing and deployment - **Accessibility**: WCAG 2.2 AA compliant with proper semantic markup ## ๐Ÿ› ๏ธ Tech Stack - **Framework**: Next.js 14 (App Router) - **Language**: TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui + Lucide React icons - **Validation**: Zod - **Email**: Resend (with console fallback for development) - **Deployment**: Docker + Docker Compose ## ๐Ÿ“ฆ Installation ### Prerequisites - Node.js 18+ or Docker - npm, yarn, or pnpm ### Local Development 1. **Clone the repository** ```bash git clone cd hamtonbrown ``` 2. **Install dependencies** ```bash npm install # or yarn install # or pnpm install ``` 3. **Set up environment variables** ```bash cp env.example .env.local ``` Edit `.env.local` with your configuration: ```env SITE_URL=https://hamtonbrown.com CONTACT_TO_EMAIL=contact@hamtonbrown.com RESEND_API_KEY=your_resend_api_key_here ``` 4. **Run the development server** ```bash npm run dev # or yarn dev # or pnpm dev ``` 5. **Open your browser** Navigate to [http://localhost:3000](http://localhost:3000) ### Docker Development ```bash # Start development environment docker compose --profile dev up --build # Stop development environment docker compose --profile dev down ``` ### Docker Production ```bash # Build and start production environment docker compose up --build # Stop production environment docker compose down ``` ## ๐Ÿ“ Project Structure ``` hamtonbrown/ โ”œโ”€โ”€ app/ # Next.js App Router pages โ”‚ โ”œโ”€โ”€ (routes)/ # Route groups โ”‚ โ”œโ”€โ”€ api/ # API routes โ”‚ โ”œโ”€โ”€ globals.css # Global styles โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout โ”‚ โ””โ”€โ”€ page.tsx # Home page โ”œโ”€โ”€ components/ # Reusable components โ”‚ โ”œโ”€โ”€ ui/ # shadcn/ui components โ”‚ โ””โ”€โ”€ ... # Custom components โ”œโ”€โ”€ data/ # Static data and content โ”œโ”€โ”€ lib/ # Utility functions โ”œโ”€โ”€ public/ # Static assets โ””โ”€โ”€ ... # Configuration files ``` ## ๐ŸŽจ Design System ### Color Palette - **Navy**: `#0F2740` (Primary) - **Teal**: `#157A85` (Accents) - **Ink**: `#0F1320` (Text) - **Sand**: `#F6F7F8` (Background) - **Cloud**: `#FFFFFF` (White) - **Slate**: `#6B7280` (Gray) ### Typography - System UI stack with sensible fallbacks - Clean hierarchy with consistent sizing ## ๐Ÿ“„ Available Routes - **Home**: `/tax-planning/` (redirects from `/`) - **Services**: - `/services/tax-planning` - `/services/income-tax-preparation` - `/services/estate-tax-planning` - `/services/financial-planning` - `/services/advisory` - **About**: `/about` - **Pricing**: `/pricing` - **Resources**: `/resources` - **Reviews**: `/reviews` - **Contact**: `/contact` - **Legal**: `/legal/privacy`, `/legal/terms` ## ๐Ÿ”ง Development Scripts ```bash # Development npm run dev # Start development server npm run build # Build for production npm run start # Start production server npm run lint # Run ESLint npm run type-check # Run TypeScript type checking npm run format # Format code with Prettier npm run format:check # Check code formatting ``` ## ๐Ÿš€ Deployment ### Vercel (Recommended) 1. Connect your repository to Vercel 2. Set environment variables in Vercel dashboard 3. Deploy automatically on push to main branch ### Docker Production ```bash # Build and run production container docker compose up --build # Or build image separately docker build -t hamtonbrown-cpa . docker run -p 3000:3000 hamtonbrown-cpa ``` ### Environment Variables Required for production: - `SITE_URL`: Your website URL - `CONTACT_TO_EMAIL`: Email address for contact form submissions - `RESEND_API_KEY`: Resend API key for email sending (optional) ## ๐Ÿงช Testing ```bash # Run linting npm run lint # Run type checking npm run type-check # Check formatting npm run format:check ``` ## ๐Ÿ“ธ Images The project includes placeholder images in `/public/images/`. For production, replace these with actual images following the specifications in `/content/image-prompts.md`. ## ๐Ÿ”’ Security - Input validation with Zod - Rate limiting on contact forms - Secure headers via Next.js - Environment variable protection - Non-root Docker user ## โ™ฟ Accessibility - WCAG 2.2 AA compliant - Semantic HTML structure - Proper heading hierarchy - Focus management - Screen reader support - Keyboard navigation - High contrast ratios ## ๐Ÿ“ˆ SEO - Automatic sitemap generation - Robots.txt configuration - Meta tags and Open Graph - Structured data (JSON-LD) - Semantic HTML markup ## ๐Ÿค Contributing 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Run tests and linting 5. Submit a pull request ## ๐Ÿ“„ License This project is proprietary to Hamton Brown CPA. ## ๐Ÿ†˜ Support For support or questions, contact: - Email: contact@hamtonbrown.com - Phone: [Your Phone Number] --- Built with โค๏ธ for Hamton Brown CPA # hamptonbrown