Joy Care Home

A professional, modern, and accessible website for elderly care facilities

Features • Tech Stack • Getting Started • Deployment • Structure

✨ Overview

Joy Care Home is a beautifully designed, fully responsive single-page website built for elderly care facilities in California. The website focuses on lead generation for seniors and their families, featuring a warm gold and turquoise color scheme that conveys trust, professionalism, and friendliness.

Key Highlights

🎨 Modern Design — Clean, professional aesthetic with smooth animations
📱 Fully Responsive — Optimized for all devices from mobile to desktop
♿ WCAG Accessible — Built with accessibility best practices
🌗 Dark/Light Mode — User-friendly theme switching
🚀 High Performance — Optimized for fast loading and SEO
📞 Lead Generation — Click-to-call, callback forms, and contact integration

🎯 Features

🏠 Home Page Sections

Section	Description
Hero	Eye-catching banner with emergency contact, CTAs for scheduling tours
Photo Gallery	AI-generated imagery showcasing care home facilities and activities
Services	Detailed service offerings with transparent pricing
About Us	Company values, statistics, and trust indicators
Reviews	Client testimonials with star ratings
Contact	Interactive form with Google Maps integration

🔧 Functional Features

Click-to-Call — One-tap calling for mobile users
Callback Request Form — Easy form submission for scheduling calls
Interactive Map — Google Maps integration for directions
Smooth Animations — Framer Motion powered scroll animations
Mobile Menu — Responsive hamburger navigation
Theme Persistence — Saves user's theme preference

🛠️ Tech Stack

Frontend Framework

Technology	Version	Purpose
Next.js	16.1.1	React framework with App Router
React	19	UI component library
TypeScript	5	Type-safe JavaScript

Styling & UI

Technology	Purpose
Tailwind CSS	Utility-first CSS framework
shadcn/ui	Re-usable component library
Framer Motion	Animation library
Lucide Icons	Beautiful open-source icons

Maps & Media

Technology	Purpose
Google Maps API	Interactive location map
AI-Generated Images	Custom care home imagery

🔄 Development Workflow

Branch Strategy

main ───────●───────●───────●──────→ Production
            │       │       │
develop ────●───────●───────●──────→ Staging
            │       │
feature/* ──●───────●──────────────→ Feature branches

♿ Accessibility

This project follows WCAG 2.1 guidelines:

✅ Semantic HTML structure
✅ ARIA labels and roles
✅ Keyboard navigation support
✅ Color contrast compliance
✅ Screen reader friendly
✅ Focus indicators
✅ Alt text for images

📈 Performance

Optimizations included:

🖼️ Next.js Image optimization
📦 Standalone output for smaller Docker images
⚡ Static asset caching
🗜️ Static asset optimization
🎭 Framer Motion optimized animations

🙏 Acknowledgments

shadcn/ui for beautiful UI components
Lucide for the icon set
Framer Motion for smooth animations
AI Image Generation for custom care home imagery