A modern, responsive healthcare website built with Next.js 16, featuring an elegant UI with smooth animations and comprehensive hospital information.
hospital-2_EbRFL1rA.mp4
- Modern UI/UX: Clean, professional design with glassmorphism effects
- Responsive Design: Fully responsive layout that works on all devices
- Smooth Animations: Engaging animations using Framer Motion and GSAP
- Interactive Navigation: Smooth scroll navigation with sticky navbar
- Department Showcase: Interactive specialty departments with hover effects
- Doctors Gallery: Animated testimonial carousel featuring medical staff
- Appointment Booking: Modal-based appointment booking system
- Dark Mode Support: Automatic dark mode based on system preferences
- SEO Optimized: Meta tags and semantic HTML for better search visibility
- Comprehensive cancer care with advanced radiation and chemotherapy treatments
- Personalized treatment pathways from diagnosis to survivorship
- State-of-the-art cardiac care from prevention to complex surgeries
- Minimally invasive techniques and rapid emergency response
- Sports injury treatment and joint replacement surgery
- Advanced arthroscopic and reconstructive procedures
- Specialized care for newborns to adolescents
- Child-friendly environment with gentle, compassionate care
- Framework: Next.js 16.1.1 with App Router
- Language: TypeScript
- Styling: Tailwind CSS v4
- Animations: Framer Motion + GSAP
- UI Components: Radix UI, Lucide React
- Package Manager: Bun
- Deployment: Vercel
- Node.js 18+ or Bun
- Git
-
Clone the repository
git clone https://github.com/your-username/hospital-website.git cd hospital-website -
Install dependencies
bun install # or npm install -
Run development server
bun dev # or npm run dev -
Open your browser Navigate to http://localhost:3000
src/
├── app/
│ ├── globals.css # Global styles with custom utilities
│ ├── layout.tsx # Root layout with metadata
│ └── page.tsx # Main homepage component
├── components/ui/
│ ├── hero-section.tsx # Landing hero with CTA
│ ├── departments.tsx # Medical specialties showcase
│ ├── doctors.tsx # Staff testimonial carousel
│ ├── about-us.tsx # About section
│ ├── book-appointment.tsx # Appointment booking modal
│ ├── footer.tsx # Site footer
│ ├── tubelight-navbar.tsx # Navigation component
│ └── [other ui components] # Reusable UI components
└── lib/
└── utils.ts # Utility functions
- Hero Section: Eye-catching landing with animated aurora background
- Departments: Sticky scroll reveal with gradient cards
- Doctors: Auto-playing testimonial carousel
- Navigation: Icon-based sticky navbar with smooth scroll
- Booking Modal: User-friendly appointment booking interface
- Glassmorphism effects for modern aesthetics
- Custom scrollbar with green accent colors
- Smooth transitions and micro-interactions
- Professional healthcare color scheme (green/white)
- Responsive typography with Geist font family
bun dev # Start development server
bun run build # Build for production
bun start # Start production server
bun run lint # Run ESLint- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
The app can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- DigitalOcean App Platform
- Railway
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS Safari 14+, Chrome Mobile 90+)
- TypeScript strict mode for type safety
- ESLint configuration for code quality
- Next.js security headers
- No external API dependencies for client-side data
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Website: https://citygeneralhospital.com
- Phone: +1 (555) 123-4567
- Email: info@citygeneralhospital.com
- Address: 123 Healthcare Avenue, Medical District, MD 12345
⚡ Powered by Next.js • Built with ❤️ for Better Healthcare