A modern, responsive PG (Paying Guest) accommodation website built with React, TypeScript, and Tailwind CSS. This comprehensive platform provides a complete solution for PG businesses to showcase their properties, manage bookings, and connect with potential residents.

• Overview
• Features
• Configuration
• Installation
• Contributing
• License
• Contributing
• Tech Stack
• Room Management
• Home Page
• Additional Pages
• Project Structure
• Animations & Interactions
• links
• Deployment
• Acknowledgments

• Multi-page Website: Home, Rooms, About, Contact, Privacy Policy, Terms & Conditions, Funding Information, Partner Us, and FAQ pages
• Room Booking System: Complete room listing, search, filtering, and detailed room pages
• Dark/Light Mode: Seamless theme switching with persistent storage
• Responsive Design: Optimized for all devices (mobile, tablet, desktop)
• Interactive UI: Smooth animations and micro-interactions using Framer Motion

• Hero Section: Beautiful background with room images and call-to-action
• Statistics Section: Key metrics and achievements
• Features Showcase: Why choose ComfortPG with interactive cards
• Featured Rooms: Highlighted accommodations with quick access
• Testimonials: Customer reviews and ratings
• Newsletter Signup: Email subscription functionality

• Advanced Search: Real-time search with filters
• Category Filtering: Single, Double, Shared, Deluxe, AC, Non-AC rooms
• Price Range Filter: Adjustable price filtering
• Room Cards: Interactive cards with hover effects
• Detailed Room Pages:
  • Image gallery with navigation
  • Full room descriptions
  • Amenities list with icons
  • Booking and cart functionality
  • Contact information

• About Page: Company story, team, values, and achievements
• Contact Page: Contact form, location map, and business hours
• Privacy Policy: Comprehensive privacy information
• Terms & Conditions: Legal terms and conditions
• Funding Information: Investment details and funding timeline
• Partner Us: Partnership opportunities and application form
• FAQ: Searchable frequently asked questions

• React 18.3.1: Modern React with hooks and functional components
• TypeScript 5.5.3: Type-safe development
• Vite 5.4.2: Fast build tool and development server

• ESLint 9.9.1: Code linting
• TypeScript ESLint 8.3.0: TypeScript-specific linting rules
• Vite Plugin React 4.3.1: React support for Vite

• Node.js: Runtime environment
• npm: Package manager

• Node.js (version 16 or higher)
• npm or yarn package manager

1. Clone the repository

   git clone https://github.com/codewithdhruba01/ComfortPG_Website.git
   cd ComfortPG_Website

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   • Navigate to http://localhost:5173
   • The website will automatically reload when you make changes

1. Create production build

   npm run build

2. Preview production build

   npm run preview

3. Deploy

   • Upload the dist folder to your web server
   • Or use services like Netlify, Vercel, or GitHub Pages

src/
├── components/          # Reusable UI components
│   ├── Navbar.tsx      # Navigation bar with logo and menu
│   ├── Footer.tsx      # Footer with links and contact info
│   └── RoomCard.tsx    # Room listing card component
├── context/            # React context providers
│   └── ThemeContext.tsx # Dark/light mode management
├── data/               # Static data and configurations
│   └── rooms.ts        # Room data and categories
├── pages/              # Page components
│   ├── Home.tsx        # Landing page
│   ├── Rooms.tsx       # Room listings with search
│   ├── RoomDetail.tsx  # Individual room details
│   ├── About.tsx       # About company page
│   ├── Contact.tsx     # Contact form and info
│   ├── PrivacyPolicy.tsx # Privacy policy
│   ├── Terms.tsx       # Terms and conditions
│   ├── Funding.tsx     # Funding information
│   ├── Partner.tsx     # Partnership page
│   └── FAQ.tsx         # Frequently asked questions
├── types/              # TypeScript type definitions
│   └── index.ts        # Interface definitions
├── App.tsx             # Main application component
├── main.tsx            # Application entry point
└── index.css           # Global styles and Tailwind imports

1. Connect GitHub repository
2. Auto-deploy on push
3. Environment variables configuration

1. Fork the repository
2. Create feature branch: git checkout -b feature/new-feature
3. Make changes and test
4. Commit: git commit -m "Add new feature"
5. Push: git push origin feature/new-feature
6. Create Pull Request

• Use TypeScript for type safety
• Follow ESLint rules
• Write meaningful commit messages
• Add comments for complex logic
• Test on multiple devices

This project is licensed under the Apache-2.0 License - see the LICENS file for details.

For support and questions:

• GitHub: Follow More
• Website: ComfortPG

• React Team: For the amazing framework
• Tailwind CSS: For the utility-first CSS framework
• Framer Motion: For smooth animations
• Lucide: For beautiful icons
• Pexels: For high-quality stock images

Made with ❤️ Dhrubaraj Pati