Dr. Sarah Martinez - Therapist Website

A modern, responsive, and feature-rich therapist website built with Next.js 14, React, TypeScript, and Tailwind CSS.

Features

• 🎨 Modern Design: Calming color palette with sage green, beige, and white
• 📱 Fully Responsive: Mobile-first design that works on all devices
• 🌙 Dark Mode: Toggle between light and dark themes
• ⚡ Performance Optimized: Server components, image optimization, and code splitting
• ♿ Accessible: WCAG AA compliant with semantic HTML
• 🔍 SEO Optimized: Meta tags, schema markup, and sitemap
• 🎭 Smooth Animations: Framer Motion for elegant transitions
• 📝 Blog System: Modern blog with search and tag filtering
• 📅 Booking System: Integrated session booking with calendar
• 📧 Contact Forms: Secure, validated forms with error handling

Pages

• Home: Hero section, services preview, testimonials, and CTA
• About: Therapist profile, credentials, education, and certifications
• Services: Detailed service descriptions with booking integration
• Blog: Modern blog layout with search, tags, and individual post pages
• Contact: Contact form with Google Maps integration
• Book: Session booking form with date/time selection

Tech Stack

• Framework: Next.js 14 (App Router)
• UI: React 18 with TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Date Handling: date-fns
• Validation: Zod
• Font: Inter (sans-serif) + Playfair Display (serif)

Project Structure

.
├── app/                    # Next.js app router pages
│   ├── about/             # About page
│   ├── blog/              # Blog pages
│   ├── book/              # Booking page
│   ├── contact/           # Contact page
│   ├── services/          # Services page
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── sitemap.ts         # XML sitemap
├── components/
│   ├── layout/           # Header, Footer
│   ├── sections/         # Page sections
│   └── ui/               # Reusable UI components
├── lib/
│   ├── data/            # Mock data
│   ├── types/           # TypeScript types
│   └── utils/           # Utility functions
├── hooks/               # Custom React hooks
├── public/              # Static assets
└── styles/              # Global styles

Getting Started

Prerequisites

• Node.js 18+ and npm 9+

Installation

1. Clone the repository:

git clone <repository-url>
cd therapist-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript compiler
• npm run format - Format code with Prettier

Code Quality

The project uses:

• ESLint for code linting
• Prettier for code formatting
• TypeScript for type safety
• Tailwind CSS for consistent styling

Customization

Colors

Edit the color palette in tailwind.config.ts:

colors: {
  primary: { ... },  // Sage green shades
  secondary: { ... }, // Beige shades
  accent: { ... },    // Terracotta shades
}

Content

Replace mock data in the lib/data/ directory:

• services.ts - Therapy services
• testimonials.ts - Client testimonials
• blog-posts.ts - Blog articles
• therapist.ts - Therapist profile

Images

Replace placeholder images with actual photos:

• Update image URLs in data files
• Add images to /public/images/
• Update next.config.js for external image domains

SEO

The site includes:

• Dynamic meta tags for all pages
• Schema.org structured data for local business
• XML sitemap generation
• robots.txt configuration
• Open Graph and Twitter Card tags

Accessibility

• Semantic HTML5 elements
• ARIA labels and roles
• Keyboard navigation support
• Color contrast meets WCAG AA standards
• Screen reader friendly

Deployment

Vercel (Recommended)

1. Push code to GitHub
2. Import project in Vercel
3. Deploy with one click

Other Platforms

Build the project and deploy the .next folder:

npm run build

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

This project is licensed under the MIT License.

Support

For questions or issues, please contact [email protected]

---

Note: This is a template website. Replace all placeholder content, images, and contact information with actual therapist details before deploying to production.