diff --git a/client/src/assets/Cardiology.jpg b/client/src/assets/Cardiology.jpg new file mode 100644 index 0000000..e62c9d1 Binary files /dev/null and b/client/src/assets/Cardiology.jpg differ diff --git a/client/src/assets/Dental.png b/client/src/assets/Dental.png new file mode 100644 index 0000000..d67a436 Binary files /dev/null and b/client/src/assets/Dental.png differ diff --git a/client/src/assets/Dermatology.png b/client/src/assets/Dermatology.png new file mode 100644 index 0000000..37f0439 Binary files /dev/null and b/client/src/assets/Dermatology.png differ diff --git a/client/src/assets/Gastroenterology.jpg b/client/src/assets/Gastroenterology.jpg new file mode 100644 index 0000000..0b36306 Binary files /dev/null and b/client/src/assets/Gastroenterology.jpg differ diff --git a/client/src/assets/Gynaecology(2).png b/client/src/assets/Gynaecology(2).png new file mode 100644 index 0000000..4d3c75b Binary files /dev/null and b/client/src/assets/Gynaecology(2).png differ diff --git a/client/src/assets/Nephrology.png b/client/src/assets/Nephrology.png new file mode 100644 index 0000000..b904b7f Binary files /dev/null and b/client/src/assets/Nephrology.png differ diff --git a/client/src/assets/Neurology(2).png b/client/src/assets/Neurology(2).png new file mode 100644 index 0000000..681dc30 Binary files /dev/null and b/client/src/assets/Neurology(2).png differ diff --git a/client/src/assets/Neurology_image2.webp b/client/src/assets/Neurology_image2.webp new file mode 100644 index 0000000..cd2ad30 Binary files /dev/null and b/client/src/assets/Neurology_image2.webp differ diff --git a/client/src/assets/Oncology.png b/client/src/assets/Oncology.png new file mode 100644 index 0000000..88f628a Binary files /dev/null and b/client/src/assets/Oncology.png differ diff --git a/client/src/assets/Ophthalmology.png b/client/src/assets/Ophthalmology.png new file mode 100644 index 0000000..ac1fafe Binary files /dev/null and b/client/src/assets/Ophthalmology.png differ diff --git a/client/src/assets/Orthopaedics.png b/client/src/assets/Orthopaedics.png new file mode 100644 index 0000000..763be7f Binary files /dev/null and b/client/src/assets/Orthopaedics.png differ diff --git a/client/src/assets/Paediatrics (1).png b/client/src/assets/Paediatrics (1).png new file mode 100644 index 0000000..1ddee5d Binary files /dev/null and b/client/src/assets/Paediatrics (1).png differ diff --git a/client/src/assets/Pulmonology.png b/client/src/assets/Pulmonology.png new file mode 100644 index 0000000..97ce3e7 Binary files /dev/null and b/client/src/assets/Pulmonology.png differ diff --git a/client/src/assets/images.js b/client/src/assets/images.js index 5c15f03..cbc97f2 100644 --- a/client/src/assets/images.js +++ b/client/src/assets/images.js @@ -1,5 +1,5 @@ // General Images -import pic1 from './pic1.jpg' +import pic1 from './pic1.jpg'; import pic2 from './pic2.jpg'; import pic3 from './pic3.jpg'; import pic4 from './pic4.jpg'; @@ -16,20 +16,29 @@ import logo from './logo.png'; import home from './home.png'; import mission from './mission.png'; import vision from './vision.png'; -import history from './history.png'; +import historyImg from './history.png'; // renamed to avoid conflict +import branchLeaves from './branch-leaves.png'; // Medical Images import scalpel from './scalpel.png'; import surgery from './surgery.png'; -import gyanaecology from './gyanaecology.png'; -import urology from './urology.png'; +import gyanaecology from './Gynaecology(2).png' +import urology from './Urology.png' import labscWebp from './labsc.webp'; import labscJpg from './labsc.jpg'; -// Decorative -import branchLeaves from './branch-leaves.png'; +import Dental from './Dental.png'; +import Dermatology from './Dermatology.png'; +import Gastroenterology from './Gastroenterology.jpg'; +import cardiologyImg from './Cardiology.jpg'; +import Nephrology from './Nephrology.png'; +import Neurologywebp from './Neurology(2).png' +import Oncology from './Oncology.png'; +import Orthopaedics from './Orthopaedics.png'; +import Paediatrics from './Paediatrics (1).png'; +import Ophthalmology from './Ophthalmology.png'; -export const images = { +const images = { // General pic1, pic2, @@ -48,7 +57,8 @@ export const images = { home, mission, vision, - history, + historyImg, + branchLeaves, // Medical scalpel, @@ -57,7 +67,16 @@ export const images = { urology, labscWebp, labscJpg, - - // Decorative - branchLeaves + Dental, + Dermatology, + Gastroenterology, + cardiologyImg, + Nephrology, + Neurologywebp, + Oncology, + Orthopaedics, + Paediatrics, + Ophthalmology, }; + +export default images; diff --git a/client/src/assets/urology.png b/client/src/assets/urology.png index c148865..b904b7f 100644 Binary files a/client/src/assets/urology.png and b/client/src/assets/urology.png differ diff --git a/client/src/assets/urology_icon.png b/client/src/assets/urology_icon.png new file mode 100644 index 0000000..c148865 Binary files /dev/null and b/client/src/assets/urology_icon.png differ diff --git a/client/src/components/AboutSection.js b/client/src/components/AboutSection.js index 437c5ec..550182f 100644 --- a/client/src/components/AboutSection.js +++ b/client/src/components/AboutSection.js @@ -1,12 +1,22 @@ import React from 'react'; import styles from './AboutSection.module.css'; +import images from '../assets/images'; -import historyImg from '../assets/history.png'; +const specialties = [ + { title: 'Urology', image: images.urology }, + { title: 'Gynaecology', image: images.gyanaecology }, + { title: 'Cardiology', image: images.cardiologyImg }, + { title: 'Dental', image: images.Dental }, + { title: 'Dermatology', image: images.Dermatology }, + { title: 'Gastroenterology', image: images.Gastroenterology }, + { title: 'Nephrology', image: images.Nephrology }, + { title: 'Neurology', image: images.Neurologywebp }, + { title: 'Oncology', image: images.Oncology }, + { title: 'Orthopaedics', image: images.Orthopaedics }, + { title: 'Paediatrics', image: images.Paediatrics }, + {title: 'Ophthalmology',image: images.Ophthalmology}, +]; -import visionImg from '../assets/vision.png'; -import missionImg from '../assets/mission.png'; -import urologyImg from '../assets/urology.png'; -import gynaeImg from '../assets/gyanaecology.png'; function AboutUs() { return ( @@ -17,68 +27,121 @@ function AboutUs() { About Us

- Welcome to MidCity Hospital Urology and General Nursing Home, a leading healthcare institution renowned for its excellence in urology and gynecology. Our commitment to providing top-notch medical care, state-of-the-art facilities, and compassionate patient care has made us a trusted name in the community. + Welcome to MidCity Hospital Urology and General Nursing Home, a leading healthcare institution + renowned for its excellence in urology and gynecology. Our commitment to providing top-notch + medical care, state-of-the-art facilities, and compassionate patient care has made us a trusted + name in the community.

- Our History history + Our History{' '} + history

- Established in 2019, MidCity Hospital has been at the forefront of healthcare innovation. Our founders, Dr. xyz and Dr. abc, envisioned a hospital that not only treated illnesses but also prioritized patient comfort and satisfaction. Over the decades, we have grown into a multifaceted healthcare provider, expanding our services to meet the evolving needs of our patients. - + Established in 2019, MidCity Hospital has been at the forefront of healthcare innovation. Our + founders, Dr. xyz and Dr. abc, envisioned a hospital that not only treated illnesses but also + prioritized patient comfort and satisfaction. Over the decades, we have grown into a + multifaceted healthcare provider, expanding our services to meet the evolving needs of our + patients.

Read More

- Our Vision vision + Our Vision{' '} + vision

- Our vision is to be a beacon of excellence in the healthcare industry, recognized for our innovative practices, clinical expertise, and unwavering commitment to patient care. We aim to set new standards in healthcare delivery and become the preferred choice for urology and gynecology services. + Our vision is to be a beacon of excellence in the healthcare industry, recognized for our + innovative practices, clinical expertise, and unwavering commitment to patient care. We aim to + set new standards in healthcare delivery and become the preferred choice for urology and + gynecology services.

Read More

- Our Mission mission + Our Mission{' '} + mission

- Our mission is to deliver exceptional healthcare services with a patient-centered approach. We strive to enhance the quality of life for our patients by offering advanced medical treatments and personalized care in a welcoming environment. + Our mission is to deliver exceptional healthcare services with a patient-centered approach. We + strive to enhance the quality of life for our patients by offering advanced medical treatments + and personalized care in a welcoming environment.

Read More
-

- Specialties -

+

Our Specialties

+
+ {specialties.map((item, idx) => ( +
+ {item.title} +

{item.title}

+

+ {item.title === 'Cardiology' && + 'Our cardiology team offers expert heart care, from diagnostics to treatment for various cardiovascular conditions.'} + {item.title === 'Orthopaedics' && + 'We specialize in treating bone, joint, and muscle issues, helping you regain mobility and live pain-free.'} + {item.title === 'Paediatrics' && + 'Our paediatric department provides compassionate care for infants, children, and adolescents with a focus on wellness.'} + {item.title === 'Neurology' && + 'Expert neurologists provide diagnosis and management of brain and nervous system disorders.'} + {item.title === 'Dermatology' && + 'Offering advanced skincare solutions for acne, eczema, allergies, and aesthetic treatments.'} + {item.title === 'Oncology' && + 'Comprehensive cancer care from screening and diagnosis to chemotherapy and support services.'} + {item.title === 'ENT' && + 'Treating conditions related to ear, nose, and throat with precision and personalized care.'} + {item.title === 'Gastroenterology' && + 'From digestive disorders to liver care, our experts ensure optimal gastrointestinal health.'} + {item.title === 'Ophthalmology' && 'Our ophthalmology department provides expert eye care, from routine checkups to advanced treatments for vision and eye health.'} -

-
- -

- Urology urology -

-

- MidCity Hospital's urology department is staffed by some of the most skilled urologists in the field. We offer comprehensive diagnostic and treatment services for a wide range of urological conditions, including kidney stones, urinary tract infections, prostate issues, and more. -

-
+ {/* Fallback in case title is new or custom */} + {![ + 'Cardiology', + 'Orthopaedics', + 'Paediatrics', + 'Neurology', + 'Dermatology', + 'Oncology', + 'ENT', + 'Gastroenterology', + 'Ophthalmology', + ].includes(item.title) && + 'Expert specialists providing high-quality medical care tailored to individual needs.'} +

+
+ ))} +
-
- -

- Gynaecology gynae -

-

- Our gynecology department is dedicated to providing women with the highest quality care throughout all stages of life. From routine check-ups to advanced surgical procedures, our experienced gynecologists are committed to addressing the unique health needs of women. -

-
-
+ + + ); } diff --git a/client/src/components/AboutSection.module.css b/client/src/components/AboutSection.module.css index dcbf5a4..4eb1d29 100644 --- a/client/src/components/AboutSection.module.css +++ b/client/src/components/AboutSection.module.css @@ -1,3 +1,7 @@ +.aboutSection { + padding: 60px 40px; + background-color: #ffffff; +} .aboutUs { padding: 60px 40px; background-color: #ffffff; @@ -203,6 +207,77 @@ padding: 0 25px 25px; margin: 0; } +.specialtiesHeading { + text-align: center; + font-size: 2.8em; + margin: 60px auto 30px; + color: #edf7f0; + background-color: #203394; + border: 2px solid #f3f4fa; + border-radius: 12px; + height: 120px; + padding-top: 30px; + width: 85%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + letter-spacing: -0.5px; + box-shadow: 0 4px 24px #13b33b; +} + +/* Container for specialties */ +.specialtyHeading { + text-align: center; + font-size: 2.5em; + color: #203394; + margin-bottom: 40px; +} + +.specialtyGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; + padding: 0 20px; + margin-bottom: 60px; +} + +.specialtyCard { + background-color: #ffffff; + border-radius: 16px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); + padding:20px; + transition: transform 0.3s ease, box-shadow 0.3s ease; + text-align: center; +} + +.specialtyCard:hover { + transform: translateY(-6px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); +} + +.specialtyCard img { + width: 100%; + max-width: 400px; + height: auto; + aspect-ratio: 400 / 365; + border-radius: 12px; + object-fit: cover; + margin: 0 auto 15px; +} + +.specialtyCard h3 { + font-size: 1.4em; + margin-bottom: 10px; + color: #203394; +} + +.specialtyCard p { + font-size: 15px; + color: #555; + line-height: 1.6; +} + /* Responsive Design */ @media (max-width: 768px) { diff --git a/client/src/components/FaqSection.js b/client/src/components/FaqSection.js new file mode 100644 index 0000000..498a836 --- /dev/null +++ b/client/src/components/FaqSection.js @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import styles from './FaqSection.module.css'; +import { FaPlus, FaMinus } from 'react-icons/fa'; + +const faqData = [ + { + question: 'How do I book a doctor appointment?', + answer: 'You can book a checkup by navigating to the “Checkup” section under Services and selecting a suitable time slot.' + }, + { + question: 'Can I upload prescriptions for surgery bookings?', + answer: 'Yes, prescription uploads are required for surgery bookings to ensure patient safety and suitability.' + }, + { + question: 'Are home sample collections available for lab tests?', + answer: 'Yes, our lab partners offer home sample collection. You can choose this option during booking.' + }, + { + question: 'Can I track my medicine orders?', + answer: 'Yes, all medicine orders come with real-time tracking accessible from the Pharmacy page.' + }, + { + question: 'Is there an admin dashboard?', + answer: 'Yes, administrators can manage appointments and product listings through a dedicated admin panel.' + } +]; + +const FaqSection = ({ darkMode }) => { + const [openIndex, setOpenIndex] = useState(null); + + const toggleFAQ = (index) => { + setOpenIndex(openIndex === index ? null : index); + }; + + return ( +
+

Frequently Asked Questions

+
+ {faqData.map((faq, index) => ( +
+
toggleFAQ(index)}> + {faq.question} + {openIndex === index ? : } +
+ {openIndex === index && ( +
+ {faq.answer} +
+ )} +
+ ))} +
+
+ ); +}; + +export default FaqSection; diff --git a/client/src/components/FaqSection.module.css b/client/src/components/FaqSection.module.css new file mode 100644 index 0000000..a4df0b3 --- /dev/null +++ b/client/src/components/FaqSection.module.css @@ -0,0 +1,65 @@ +.faqSection { + padding: 3rem 2rem; + max-width: 900px; + margin: 0 auto; + background: var(--bg-section, #f9f9f9); + border-radius: 16px; + box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); + color: var(--text-primary, #333); + transition: background-color 0.3s ease, color 0.3s ease; + } + + .dark { + --bg-section: #1e1e1e; + --text-primary: #fff; + --text-muted: #ccc; + background: var(--bg-section); + color: var(--text-primary); + } + + .title { + font-size: 2rem; + text-align: center; + margin-bottom: 2rem; + color: var(--accent, #004080); + } + + .faqList { + display: flex; + flex-direction: column; + gap: 1rem; + } + + .faqItem { + background: var(--bg-card, white); + padding: 1.2rem 1.5rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); + transition: all 0.3s ease; + color: var(--text-primary); + } + + .dark .faqItem { + background: var(--bg-card-dark, #2c2c2c); + } + + .question { + display: flex; + justify-content: space-between; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + color: var(--text-primary); + } + + .answer { + margin-top: 0.8rem; + font-size: 0.95rem; + line-height: 1.5; + color: var(--text-muted, #444); + } + + .dark .answer { + color: var(--text-muted); + } + \ No newline at end of file diff --git a/client/src/components/ServiceSection.js b/client/src/components/ServiceSection.js index 2fc77b8..a0f7663 100644 --- a/client/src/components/ServiceSection.js +++ b/client/src/components/ServiceSection.js @@ -1,7 +1,9 @@ + import React, {useRef, useEffect} from "react"; import {Link} from "react-router-dom"; import styles from "./ServiceSection.module.css"; + import {FaCog} from "react-icons/fa"; import { FaPrescriptionBottleMedical, diff --git a/client/src/components/Slider.js b/client/src/components/Slider.js index 4fb732e..933ecc7 100644 --- a/client/src/components/Slider.js +++ b/client/src/components/Slider.js @@ -1,23 +1,27 @@ -import React, { useState, useEffect } from 'react'; -import styles from './slider.module.css'; -import pic1 from '../assets/pic5.webp'; -import pic2 from '../assets/pic.webp'; -import pic3 from '../assets/pic5.webp'; -import pic4 from '../assets/pic.webp'; +import React, { useState, useEffect } from "react"; +import styles from "./slider.module.css"; +import images from "../assets/images"; -const images = [pic1, pic2, pic3, pic4]; +const sliderImages = [ + images.pic5, + images.pic, + images.pic5, + images.pic, + images.pic1, + images.pic4, +]; function Slider() { const [currentIndex, setCurrentIndex] = useState(0); const changeSlide = (direction) => { - const newIndex = (currentIndex + direction + images.length) % images.length; + const newIndex = (currentIndex + direction + sliderImages.length) % sliderImages.length; setCurrentIndex(newIndex); }; useEffect(() => { const interval = setInterval(() => { - setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + setCurrentIndex((prevIndex) => (prevIndex + 1) % sliderImages.length); }, 3000); return () => clearInterval(interval); @@ -28,16 +32,22 @@ function Slider() {
{`Slide
- -
diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js index 951cee2..63a37ea 100644 --- a/client/src/pages/HomePage.js +++ b/client/src/pages/HomePage.js @@ -4,12 +4,14 @@ import React from "react"; import Navbar from "../components/Navbar"; import Footer from "../components/Footer"; import Slider from "../components/Slider"; +import HeroSection from "../components/HeroSection"; import ServiceSection from "../components/ServiceSection"; import DoctorsSection from "../components/DoctorsSection"; import AboutSection from "../components/AboutSection"; import ContactSection from "../components/ContactSection"; +import FaqSection from "../components/FaqSection"; -const Homepage = ({darkMode, setDarkMode}) => { +const Homepage = ({ darkMode, setDarkMode }) => { return (
@@ -19,6 +21,7 @@ const Homepage = ({darkMode, setDarkMode}) => { +
); diff --git a/server/routes/labs.js b/server/routes/labs.js new file mode 100644 index 0000000..b3cc54a --- /dev/null +++ b/server/routes/labs.js @@ -0,0 +1,26 @@ +const express = require('express'); +const router = express.Router(); +const Lab = require('../models/lab'); + +// POST - book lab test appointment +router.post('/book', async (req, res) => { + try { + const lab = new Lab(req.body); + await lab.save(); + res.status(201).json({ message: 'Lab appointment booked successfully', lab }); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); + +// GET - get all lab appointments +router.get('/', async (req, res) => { + try { + const labs = await Lab.find(); + res.json(labs); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); + +module.exports = router; diff --git a/server/routes/pharmacy.js b/server/routes/pharmacy.js new file mode 100644 index 0000000..a291d69 --- /dev/null +++ b/server/routes/pharmacy.js @@ -0,0 +1,15 @@ +const express = require('express'); +const router = express.Router(); +const Medicine = require('../models/medicines'); + +// GET - get all medicines +router.get('/', async (req, res) => { + try { + const medicines = await Medicine.find(); + res.json(medicines); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); + +module.exports = router; diff --git a/server/routes/surgery.js b/server/routes/surgery.js new file mode 100644 index 0000000..20f83de --- /dev/null +++ b/server/routes/surgery.js @@ -0,0 +1,26 @@ +const express = require('express'); +const router = express.Router(); +const Surgery = require('../models/surgery'); + +// POST - book surgery appointment +router.post('/book', async (req, res) => { + try { + const surgery = new Surgery(req.body); + await surgery.save(); + res.status(201).json({ message: 'Surgery appointment booked successfully', surgery }); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); + +// GET - get all surgery appointments +router.get('/', async (req, res) => { + try { + const surgeries = await Surgery.find(); + res.json(surgeries); + } catch (error) { + res.status(500).json({ error: error.message }); + } +}); + +module.exports = router;