Added a Modern FAQ Section to Homepage for Improved User Support

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;

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
         </h1>
         <p className={styles.text}>
-          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.
         </p>
       </div>
 
       <div className={styles.historyVisionMission}>
         <div className={styles.history} style = {{padding: '30px 0'}}>
           <h2>
-            Our History <img src={historyImg} alt="history" width={50} height={50} style={{ padding: '10px' }} />
+            Our History{' '}
+            <img
+              src={images.historyImg}
+              alt="history"
+              width={50}
+              height={50}
+              style={{ padding: '10px' }}
+            />
           </h2>
           <p className={styles.text}>
-            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.
           </p>
             <span className={styles.readMore}>Read More</span>
         </div>
 
         <div className={styles.vision}>
           <h2>
-            Our Vision <img src={visionImg} alt="vision" width={50} height={50} style={{ padding: '10px' }} />
+            Our Vision{' '}
+            <img
+              src={images.vision}
+              alt="vision"
+              width={50}
+              height={50}
+              style={{ padding: '10px' }}
+            />
           </h2>
           <p className={styles.text}>
-            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.
           </p>
           <span className={styles.readMore}>Read More</span>
         </div>
 
         <div className={styles.mission}>
           <h2>
-            Our Mission <img src={missionImg} alt="mission" width={50} height={50} style={{ padding: '10px' }} />
+            Our Mission{' '}
+            <img
+              src={images.mission}
+              alt="mission"
+              width={50}
+              height={50}
+              style={{ padding: '10px' }}
+            />
           </h2>
           <p className={styles.text}>
-            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.
           </p>
           <span className={styles.readMore}>Read More</span>
         </div>
       </div>
 
-      <h2 className={styles.specialtiesHeading}>
-        Specialties
-      </h2>
+      <h2 className={styles.specialtyHeading}>Our Specialties</h2>
+<div className={styles.specialtyGrid}>
+  {specialties.map((item, idx) => (
+    <div className={styles.specialtyCard} key={idx}>
+      <img src={item.image} alt={item.title} />
+      <h3>{item.title}</h3>
+      <p>
+        {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.'}
 
-      <div className={styles.specialties}>
-        <div className={styles.specialty}>
-
-          <h3>
-            Urology <img src={urologyImg} alt="urology" width={50} height={50} style={{ padding: '10px' }} />
-          </h3>
-          <p>
-            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.
-          </p>
-        </div>
+        {/* 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.'}
+      </p>
+    </div>
+  ))}
+</div>
 
-        <div className={styles.specialty}>
-
-          <h3>
-            Gynaecology <img src={gynaeImg} alt="gynae" width={50} height={50} style={{ padding: '10px' }} />
-          </h3>
-          <p>
-            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.
-          </p>
-        </div>
-      </div>
+
+
+
     </section>
   );
 }

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) {

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 (
+    <section className={`${styles.faqSection} ${darkMode ? styles.dark : ''}`}>
+      <h2 className={styles.title}>Frequently Asked Questions</h2>
+      <div className={styles.faqList}>
+        {faqData.map((faq, index) => (
+          <div key={index} className={styles.faqItem}>
+            <div className={styles.question} onClick={() => toggleFAQ(index)}>
+              <span>{faq.question}</span>
+              {openIndex === index ? <FaMinus /> : <FaPlus />}
+            </div>
+            {openIndex === index && (
+              <div className={styles.answer}>
+                {faq.answer}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default FaqSection;