# First Vibe Coded Project 

Maa Janki Hospital & Child Care

A modern, responsive React.js web application for a pediatric hospital in Mairwa, Bihar. Built with cutting-edge technologies to provide the best user experience for patients and families.


---

🏥 About

Maa Janki Hospital & Child Care is a leading pediatric hospital providing 24x7 emergency services, advanced NICU facilities, and specialized child healthcare in Mairwa, Bihar.


---

✨ Features

🌐 Bilingual Support: Seamless switching between Hindi (default) and English

📱 Responsive Design: Optimized for mobile, tablet, and desktop

⚡ Fast Performance: Built with Vite for lightning-fast loading

🎨 Modern UI/UX: Beautiful animations using Framer Motion and AOS


🏥 Hospital Features

24x7 emergency contact integration

Doctor profiles and specializations

Comprehensive services showcase

Photo gallery of facilities

Contact forms and location mapping



---

🛠️ Technology Stack

Frontend: React.js 18+ with Vite

Styling: Tailwind CSS with custom hospital theme

Animations: Framer Motion & AOS

Routing: React Router DOM

Internationalization: react-i18next

Icons: React Icons & Lucide React

Build Tool: Vite



---

🎨 Design System

Colors

Cream Background: #fef7ed – Warm, welcoming

Orange Primary: #ff5722 – Trust, healthcare

Baby Blue Accent: #2196f3 – Calm, professional


Typography

Hindi: Noto Sans Devanagari, Baloo Bhaina 2

English: Poppins, Inter



---

📦 Installation

1. Clone the repository



git clone <repository-url>
cd maa-janki-hospital

2. Install dependencies



npm install

3. Start development server



npm run dev

4. Build for production



npm run build

5. Preview production build



npm run preview


---

📋 Available Scripts

npm run dev – Start development server

npm run build – Build for production

npm run preview – Preview production build

npm run lint – Run ESLint



---

🏗️ Project Structure

src/
├── components/          # Reusable UI components
│   ├── Navbar.jsx       # Navigation with language toggle
│   └── Footer.jsx       # Footer with contact info
├── pages/               # Main page components
│   ├── Home.jsx         # Landing page with hero section
│   ├── Doctor.jsx       # Doctor profiles and credentials
│   ├── Services.jsx     # Medical services showcase
│   ├── Gallery.jsx      # Photo gallery with lightbox
│   └── Contact.jsx      # Contact forms and location
├── i18n.js              # Internationalization setup
├── App.jsx              # Main app component with routing
├── main.jsx             # App entry point
└── index.css            # Global styles and Tailwind


---

🌍 Languages Supported

Hindi (हिंदी) – Default language

English – Secondary language


> Language toggle available in the navigation bar for instant switching.




---

📞 Contact Information

Primary: 9128231000

Secondary: 9525552675

WhatsApp: 9128231000

Location: Mairwa, Bihar

Maps: Google Maps Link



---

🏥 Services

24x7 Emergency Care

Advanced NICU Facilities

Pediatric Consultation


Medical Equipment:

Oxygen Therapy

Baby Warmers

Incubators

Phototherapy

Infusion Pumps

Pulse Oximeters

Nebulizers



---

👨‍⚕️ Medical Team

Dr. Amrit Kumar

MBBS, MD (Pediatrics)

10+ Years Experience

Pediatric Specialist

Available 24x7 for emergencies



---

🚀 Performance Features

Fast Loading – Vite build system for optimal performance

Code Splitting – Automatic route-based code splitting

SEO Optimized – Proper meta tags and semantic HTML

Accessibility – WCAG compliant components

Mobile First – Responsive design for all screen sizes



---

📱 Browser Support

Chrome (latest)

Firefox (latest)

Safari (latest)

Edge (latest)

Mobile browsers (iOS Safari, Chrome Mobile)



---

🔧 Development

Adding New Pages

1. Create component in src/pages/


2. Add route in App.jsx


3. Update navigation in Navbar.jsx


4. Add translations in i18n.js



Customizing Styles

Modify tailwind.config.js for theme changes

Update src/index.css for global styles

Use Tailwind classes for component styling


Adding Translations

Update the resources object in src/i18n.js:

const resources = {
  hi: { translation: { newKey: "नया टेक्स्ट" } },
  en: { translation: { newKey: "New Text" } }
};


---

📄 License

This project is created for Maa Janki Hospital & Child Care. All rights reserved.


---

🤝 Contributing

This is a private project for a specific hospital. (My Brother 😅)

---