Manus

Choice Insurance Website

Netlify Status

A modern, high-performance insurance website built with Next.js, TypeScript, and Tailwind CSS. Optimized for speed, accessibility, and SEO.

📋 Table of Contents

🚀 Quick Start

Prerequisites

Setup

  1. Clone and setup the project:

    git clone <repository-url>
cd choice-insurance-website
pnpm run setup
```bash

  2. Start development server:

    pnpm run dev

  3. Open your browser: Navigate to http://localhost:3000

📋 Available Scripts

Development

Building & Testing

Code Quality

Maintenance

🏗️ Build & Deploy Process

Local Development Build

# Quick build
pnpm run build

# Optimized build with all checks
pnpm run build:optimize

# Test build (clean + build)
pnpm run test:build

Prebuild Process

The project includes automated quality checks before each build:

# Prebuild script runs automatically before 'pnpm run build'
pnpm run prebuild  # Runs: lint + type-check + validate-pwa

Prebuild Steps:

  1. ESLint: Code quality and style checking
  2. TypeScript: Type checking for type safety
  3. PWA Validation: Ensures Progressive Web App configuration is valid

This ensures that only high-quality, properly typed code gets deployed to production.

Netlify Deployment

The project is configured for automatic deployment on Netlify:

  1. Automatic Deployment: Push to main branch triggers production deployment
  2. Preview Deployments: Pull requests create preview deployments

  3. Build Command:

    pnpm install --frozen-lockfile && pnpm run print-versions && pnpm run build
  4. Publish Directory: .next

Netlify Configuration (netlify.toml)

This project includes a netlify.toml file at the root to control build, environment, headers, plugins, and redirects. Key settings:

Example snippet:

[build]
base = "."
command = "pnpm install --frozen-lockfile && pnpm run print-versions && pnpm run build"
publish = ".next"

[build.environment]
NODE_VERSION = "20"
PNPM_VERSION = "10.12.1"
NEXT_CACHE = "true"
NODE_OPTIONS = "--max-old-space-size=4096"

[functions]
directory = "netlify/functions"

[[plugins]]
package = "@netlify/plugin-nextjs"

[[plugins]]
package = "netlify-plugin-bundle-env"
  [plugins.inputs]
  directories = ["netlify/functions"]
  include = [
    "NEXT_PUBLIC_API_URL",
    "NEXT_PUBLIC_FIREBASE_KEY",
    "NEXT_PUBLIC_SENTRY_DSN"
  ]
  mask = true

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Environment Variables

Create a .env.local file (use the template created by pnpm run setup):

# Required
NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_SITE_URL=your_site_url

# Optional
NEXT_PUBLIC_GA4_ID=your_google_analytics_4_id
NEXT_PUBLIC_GTM_ID=your_google_tag_manager_id
NEXT_PUBLIC_FIREBASE_KEY=your_firebase_key
NEXT_PUBLIC_SENTRY_DSN=your_sentry_dsn

Note: The netlify-plugin-bundle-env bundles certain environment variables for use in Netlify functions. Add any variables to both your .env.local and the include list in netlify.toml if they are needed in serverless functions.

🛠️ Tech Stack

🎯 Navigation Features

Recent Updates & Fixes

Latest Updates (January 2025)

PWA & Service Worker Enhancements
Viewport & Mobile Optimization
Accessibility Improvements
Brand Palette Integration

Previous Updates (December 2024)

Service Cards Uniform Sizing

Header Dropdown Menu Layout Reorganization

Service Button Uniform Sizing

Meta Icons & PWA Configuration Enhancement

Services Dropdown Gradient Enhancement (January 2025)

The website features a sophisticated dropdown navigation menu for the Services section with complete custom styling specifications implemented.

Last Updated: January 21, 2025 - Complete styling specifications documented and implemented

🎨 Complete Styling Specifications

Services Trigger Button
Individual Service Buttons
Service Buttons Enhancement (January 2025)
Brand Color Palette
brand: {
  white: "#FFFFFF",
  "teal-blue": "#A7C9CA",
  "teal-blue-dark": "#8BB5B7",
  "deep-forest-green": "#42615A",
  "warm-beige-coral": "#DD8B66",
  "warm-beige-coral-dark": "#C77A52",
  black: "#000000",
}
Responsive Behavior
Animation & Transitions
Accessibility Features

Design & Branding

Layout & Structure

[Services ▼]  ← Trigger button
┌─────────────────────────────────────────────────────────┐
│  [All Services - Large Button]    │  [Health Insurance] │
│                                   │  [Life Insurance]   │
│  [Medicare Advantage]             │  [Final Expense]    │
│  [Medicare Supplement]            │  [Cancer/Illness]   │
│                                   │  [Hospital Indem.]  │
│                                   │  [Annuities]        │
└─────────────────────────────────────────────────────────┘

Technical Implementation

User Experience Features

Service Categories Included

  1. All Services (prominent main button)
  2. Health Insurance
  3. Life Insurance
  4. Medicare Advantage
  5. Medicare Supplement
  6. Final Expense
  7. Cancer/Critical Illness
  8. Hospital Indemnity
  9. Annuities

Code Location & Implementation

Customization

To modify the dropdown menu:

  1. Add/Remove Services: Edit FOOTER_LINKS.services in src/constants/navigation.ts
  2. Change Colors: Update brand colors in tailwind.config.js
  3. Adjust Layout: Modify grid structure in Header.tsx
  4. Update Dimensions: Change w-[600px] class for different width

Browser Support

📁 Project Structure

├── src/
│   ├── app/                 # Next.js app directory
│   ├── components/          # Reusable components
│   ├── lib/                 # Utility functions
│   ├── hooks/               # Custom React hooks
│   ├── types/               # TypeScript type definitions
│   └── constants/           # App constants
├── public/                  # Static assets
├── content/                 # Content files (blog, etc.)
├── scripts/                 # Build and utility scripts
├── netlify/                 # Netlify functions
└── .github/                 # GitHub Actions workflows

🚀 Performance Optimizations

🔧 Development Workflow

  1. Start Development: pnpm run dev
  2. Make Changes: Edit files with hot reload
  3. Check Code Quality: pnpm run lint && pnpm run type-check
  4. Format Code: pnpm run format
  5. Test Build: pnpm run test:build
  6. Deploy: Push to repository (auto-deploys via Netlify)

📝 Code Quality

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes
  4. Run quality checks: pnpm run lint && pnpm run type-check
  5. Commit your changes: git commit -m 'Add amazing feature'
  6. Push to the branch: git push origin feature/amazing-feature
  7. Open a Pull Request

🔧 Troubleshooting

Common Issues & Solutions

Problem: Navigation dropdown closes too quickly

Problem: Navigation menu appears floating without background

Problem: CSS conflicts in Tailwind classes

Layout Issues

Problem: Service cards have inconsistent heights

Problem: Unbalanced dropdown menu layout

Development Issues

Problem: Build fails with TypeScript errors

Problem: Linting errors prevent build

Problem: Styling not applying correctly

Meta Icons & PWA Issues

Problem: Favicon not displaying correctly in browsers

Problem: PWA installation not working properly

Problem: Icons not showing on mobile devices

Quick Fixes Reference

# Fix navigation delay
# In Header.tsx line 42: skipDelayDuration={3000}

# Fix service card heights
# In page.tsx: className="flex h-full flex-col"
# In CardContent: className="flex flex-1 flex-col items-center justify-between"

# Fix dropdown background
# In Header.tsx line 91: className="...bg-white text-brand-black shadow-xl"

# Fix CSS conflicts
# Remove 'block' class when using 'flex'
# Use: className="flex min-h-[80px] select-none flex-col justify-center..."

# Fix meta icons configuration
# In layout.tsx: Ensure comprehensive icon configuration with multiple formats
# In manifest.json: Update icon paths to match existing files in /icons/ directory
# Check: favicon.ico, favicon.png, icon.svg, apple-touch-icon.png exist in /public/

📋 Current Version Summary

Version 5.1 - Navigation Timing Fix (January 2025)

Cache Version: v2025.6.24.08301750748470308-navigation-timing-fix

🎯 Key Improvements

🚀 Performance Enhancements

♿ Accessibility Features

🎨 Design Improvements

🔧 Technical Updates

📱 Lighthouse Scores Expected

📞 Support

For questions or issues, please:

  1. Check the existing issues
  2. Create a new issue with detailed information
  3. Contact the development team

Happy coding! 🚀