🏔️ Char Dham Darshan - Spiritual Journey Platform

A modern, AI-powered pilgrimage planning platform for the sacred Char Dham circuit in Uttarakhand, India. Experience the perfect blend of technology and tradition for your spiritual journey.

✨ Features

🎯 Core Functionality

• Sacred Sites Showcase: Interactive display of 14+ sacred sites across India
• Journey Progress Tracker: Clickable progress tracking with real-time updates
• Multi-language Support: 10 regional Indian languages including Punjabi, Telugu, Malayalam, and Kannada
• 360° 3D Animations: Spectacular hover effects with 3D rotation
• Official Store Badges: Google Play and Apple App Store integration

🏛️ Sacred Sites (14+ Locations)

Original Char Dham Circuit

• Kedarnath - Lord Shiva's Abode (3,583m)
• Badrinath - Lord Vishnu's Temple (3,133m)
• Gangotri - Ganga's Origin (3,100m)
• Yamunotri - Yamuna's Source (3,293m)

Additional Sacred Sites

• Vaishno Devi - Jammu & Kashmir
• Tirupati Balaji - Andhra Pradesh
• Golden Temple - Punjab
• Kashi Vishwanath - Uttar Pradesh
• Jagannath Puri - Odisha
• Dwarka - Gujarat
• Rameshwaram - Tamil Nadu
• Amarnath Cave - Jammu & Kashmir
• Somnath Temple - Gujarat
• Sabarmati Ashram - Gujarat

🌐 Multi-Language Support (10 Languages)

• English 🇺🇸
• Hindi 🇮🇳
• Sanskrit 🇮🇳
• Gujarati 🇮🇳
• Bengali 🇮🇳
• Tamil 🇮🇳
• Punjabi 🇮🇳
• Telugu 🇮🇳
• Malayalam 🇮🇳
• Kannada 🇮🇳

🎨 Interactive Features

• 360° 3D Rotation: App download cards with spectacular hover effects
• Journey Progress: Clickable progress tracking with visual feedback
• Auto-Popup: Automatic app download popup on scroll
• Smooth Animations: Framer Motion powered transitions
• Responsive Design: Mobile-first approach

📱 App Download Integration

• Google Play Store: Official badge with proper branding
• Apple App Store: Official badge with Apple logo
• Auto-Generated Links: Smart sharing functionality
• Native Share API: Modern web sharing capabilities

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Git

Installation

1. Clone the repository

git clone https://github.com/yourusername/char-dham-darshan.git
cd char-dham-darshan

2. Install dependencies

npm install
# or
yarn install

3. Run the development server

npm run dev
# or
yarn dev

4. Open your browser Navigate to http://localhost:3000 to see the application.

Build for Production

npm run build
npm start

🛠️ Technology Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide React - Beautiful icons

UI Components

• Radix UI - Accessible component primitives
• Class Variance Authority - Type-safe component variants
• Custom Components - Tailored for spiritual theme

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• TypeScript - Static type checking

📁 Project Structure

char-dham-darshan/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   ├── services/          # Services page
│   ├── book/              # Booking page
│   ├── payment/           # Payment gateway (404)
│   └── ...
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   ├── navbar.tsx        # Navigation component
│   ├── sacred-sites-showcase.tsx
│   ├── journey-progress.tsx
│   └── ...
├── lib/                  # Utility functions
│   ├── translations.ts   # Multi-language support
│   └── utils.ts         # Helper functions
├── public/               # Static assets
└── ...

🎯 Key Features Explained

Sacred Sites Showcase

• Interactive Cards: Click for detailed information
• Category Badges: Char Dham vs Additional sites
• Popular Indicators: Trending sacred sites
• Explore More: Toggle between 4 and 14+ sites

Journey Progress Tracker

• Floating Button: Bottom-right corner access
• Click to Toggle: Mark locations as completed
• Real-time Progress: Animated progress bar
• Visual Feedback: Green checkmarks and badges

Multi-language Support

• Context Provider: Global language state
• Translation System: Comprehensive key-value pairs
• Language Switcher: Dropdown with flags
• Regional Support: North, South, East, West Indian languages

3D Animations

• 360° Rotation: X and Y axis rotation on hover
• Transform Support: CSS 3D transforms
• Smooth Transitions: EaseInOut timing functions
• Performance Optimized: Hardware acceleration

🎨 Design System

Color Palette

• Primary: Purple gradient (#8b5cf6 to #6366f1)
• Secondary: Orange to red gradient
• Accent: Blue to purple spiritual theme
• Background: Gradient backgrounds with blur effects

Typography

• Headings: Bold, gradient text effects
• Body: Clean, readable sans-serif
• Special: Spiritual-themed decorative elements

Animations

• Framer Motion: Smooth page transitions
• Hover Effects: Interactive feedback
• Loading States: Skeleton screens and spinners
• Micro-interactions: Button clicks and form interactions

📱 Responsive Design

• Mobile First: Optimized for mobile devices
• Tablet Support: Adaptive layouts
• Desktop Experience: Full-featured desktop interface
• Touch Friendly: Large touch targets

🌐 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🔧 Customization

Adding New Sacred Sites

1. Edit components/sacred-sites-showcase.tsx
2. Add new site to sacredSites array
3. Include required fields: id, name, deity, altitude, etc.

Adding New Languages

1. Edit lib/translations.ts
2. Add new language to Language type
3. Add translations for all keys
4. Update languageNames and languageFlags

Styling Customization

1. Edit app/globals.css for global styles
2. Modify Tailwind classes in components
3. Update color variables in CSS custom properties

🚀 Deployment

Vercel (Recommended)

npm install -g vercel
vercel

Netlify

npm run build
# Deploy dist folder

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Sacred Sites: Information sourced from religious texts and travel guides
• Design Inspiration: Traditional Indian architecture and spiritual symbolism
• Icons: Lucide React for beautiful, consistent icons
• Animations: Framer Motion for smooth, performant animations

📞 Support

For support, email support@chardhamdarshan.com or join our Slack channel.

🔮 Roadmap

• Real-time Weather Integration
• Pilgrimage Route Planning
• Virtual Reality Temple Tours
• Community Features
• Offline Mode Support
• Push Notifications
• Advanced Booking System
• Payment Gateway Integration

---

Made with ❤️ for the spiritual journey of millions

Experience the divine with technology