Skip to content

feat: improve website layout and CSS for better UX (#188) #196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suryaprakash0010 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: improve website layout and CSS for better UX (#188) #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 187 additions & 55 deletions client/src/components/AboutSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React, { useState } from "react";
import styles from "./AboutSection.module.css";
import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { FaHospital, FaHeartbeat, FaUserMd, FaClinicMedical } from 'react-icons/fa';
import styles from './AboutSection.module.css';

import historyImg from "../assets/history.png";
import visionImg from "../assets/vision.png";
import missionImg from "../assets/mission.png";
import urologyImg from "../assets/urology.png";
import gynaeImg from "../assets/gyanaecology.png";
// Import images
import historyImg from '../assets/history.png';
import visionImg from '../assets/vision.png';
import missionImg from '../assets/mission.png';
import urologyImg from '../assets/urology.png';
import gynaeImg from '../assets/gyanaecology.png';

const ReadMoreSection = ({
title,
Expand All @@ -14,43 +17,129 @@ const ReadMoreSection = ({
fullText,
isExpanded,
onToggle,
index
}) => {
const cardVariants = {
hidden: { opacity: 0, y: 20 },
visible: (i) => ({
opacity: 1,
y: 0,
transition: {
delay: i * 0.1,
duration: 0.5,
ease: 'easeOut'
}
})
};

return (
<div className={`${styles.card} ${isExpanded ? styles.expanded : ""}`}>
<motion.div
className={`${styles.card} ${isExpanded ? styles.expanded : ''}`}
variants={cardVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true, margin: '-100px' }}
custom={index}
>
<div className={styles.cardHeader}>
<h3>{title}</h3>
<img src={icon} alt={title} width={30} height={30} />
<div className={styles.iconContainer}>
<img src={icon} alt={title} className={styles.cardIcon} />
</div>
<h3 className={styles.cardTitle}>{title}</h3>
</div>
<p className={styles.cardText}>{isExpanded ? fullText : shortText}</p>
<button
className={`${styles.readMoreButton} ${
isExpanded ? styles.expanded : ""
}`}
onClick={onToggle}
>
{isExpanded ? "Show Less" : "Read More"}
</button>
</div>
<div className={styles.cardContent}>
<p className={styles.cardText}>{isExpanded ? fullText : shortText}</p>
<button
className={styles.readMoreButton}
onClick={onToggle}
aria-expanded={isExpanded}
aria-controls={`${title.toLowerCase().replace(/\s+/g, '-')}-content`}
>
{isExpanded ? (
<>
Show Less
<span className={styles.buttonIcon}>−</span>
</>
) : (
<>
Read More
<span className={styles.buttonIcon}>+</span>
</>
)}
</button>
</div>
</motion.div>
);
};

function AboutUs() {
const AboutUs = () => {
const [expandedCard, setExpandedCard] = useState(null);

const handleToggle = (title) => {
setExpandedCard((prev) => (prev === title ? null : title));
};

const sectionVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2
}
}
};

const aboutCards = [
{
title: 'Our History',
icon: historyImg,
shortText: 'With over 15 years of dedicated service, our hospital has been at the forefront of medical excellence...',
fullText: 'With over 15 years of dedicated service, our hospital has been at the forefront of medical excellence, combining cutting-edge technology with compassionate care. Our journey began with a simple mission: to provide accessible, high-quality healthcare to our community. Today, we stand as a testament to that commitment, having served thousands of patients with integrity and expertise.'
},
{
title: 'Our Vision',
icon: visionImg,
shortText: 'To be the most trusted healthcare provider, known for excellence in patient care and medical innovation...',
fullText: 'To be the most trusted healthcare provider, known for excellence in patient care and medical innovation. We envision a future where everyone has access to comprehensive, compassionate, and affordable healthcare services. Through continuous improvement and community engagement, we strive to set new standards in medical care and patient experience.'
},
{
title: 'Our Mission',
icon: missionImg,
shortText: 'To provide exceptional healthcare services through a dedicated team of medical professionals...',
fullText: 'To provide exceptional healthcare services through a dedicated team of medical professionals, state-of-the-art technology, and a patient-centered approach. We are committed to improving the health and well-being of our community by delivering personalized, high-quality care with compassion and respect for all individuals.'
},
{
title: 'Urology Care',
icon: urologyImg,
shortText: 'Our urology department offers comprehensive care for all urological conditions...',
fullText: 'Our urology department offers comprehensive care for all urological conditions, from routine check-ups to complex surgical procedures. Our team of board-certified urologists utilizes the latest minimally invasive techniques to provide effective treatments with faster recovery times. We specialize in prostate health, kidney stones, urinary incontinence, and men\'s health issues.'
},
{
title: 'Gynecology Services',
icon: gynaeImg,
shortText: 'Comprehensive women\'s health services for every stage of life...',
fullText: 'Comprehensive women\'s health services for every stage of life. Our expert gynecologists provide compassionate care, from routine exams and family planning to advanced treatments for complex conditions. We prioritize your comfort and well-being, offering personalized care in a supportive environment. Our services include prenatal care, menopause management, and minimally invasive surgical options.'
}
];

return (
<section className={styles.aboutUs} id="about">
<div className={styles.aboutContainer}>
<h1>
<i
className="bi bi-house-door-fill"
style={{ fontSize: "50px", padding: "10px" }}
></i>
About Us
</h1>
<motion.div
className={styles.sectionHeader}
initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className={styles.sectionSubtitle}>Who We Are</span>
<h2 className={styles.sectionTitle}>About Our Hospital</h2>
<div className={styles.headerDivider}></div>
<p className={styles.sectionDescription}>
Providing exceptional healthcare services with compassion and expertise since our establishment.
</p>
</motion.div>
<p className={styles.text}>
Welcome to MidCity Hospital Urology and General Nursing Home, a
leading healthcare institution renowned for its excellence in urology
Expand All @@ -60,34 +149,77 @@ function AboutUs() {
</p>
</div>

<div className={styles.cardGrid}>
<ReadMoreSection
title="Our History"
icon={historyImg}
shortText="Established in 2019, MidCity Hospital has been at the forefront of healthcare innovation..."
fullText="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."
isExpanded={expandedCard === "Our History"}
onToggle={() => handleToggle("Our History")}
/>

<ReadMoreSection
title="Our Vision"
icon={visionImg}
shortText="Our vision is to be a beacon of excellence in the healthcare industry..."
fullText="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."
isExpanded={expandedCard === "Our Vision"}
onToggle={() => handleToggle("Our Vision")}
/>

<ReadMoreSection
title="Our Mission"
icon={missionImg}
shortText="Our mission is to deliver exceptional healthcare services with a patient-centered approach..."
fullText="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."
isExpanded={expandedCard === "Our Mission"}
onToggle={() => handleToggle("Our Mission")}
/>
<motion.div
className={styles.cardGrid}
variants={sectionVariants}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
>
{aboutCards.map((card, index) => (
<ReadMoreSection
key={card.title}
title={card.title}
icon={card.icon}
shortText={card.shortText}
fullText={card.fullText}
isExpanded={expandedCard === card.title}
onToggle={() => handleToggle(card.title)}
index={index}
/>
))}
</motion.div>

<div className={styles.statsContainer}>
<motion.div
className={styles.statItem}
whileHover={{ y: -5 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<FaHospital className={styles.statIcon} />
<div className={styles.statContent}>
<span className={styles.statNumber}>15+</span>
<span className={styles.statLabel}>Years Experience</span>
</div>
</motion.div>

<motion.div
className={styles.statItem}
whileHover={{ y: -5 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<FaUserMd className={styles.statIcon} />
<div className={styles.statContent}>
<span className={styles.statNumber}>50+</span>
<span className={styles.statLabel}>Expert Doctors</span>
</div>
</motion.div>

<motion.div
className={styles.statItem}
whileHover={{ y: -5 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<FaHeartbeat className={styles.statIcon} />
<div className={styles.statContent}>
<span className={styles.statNumber}>10,000+</span>
<span className={styles.statLabel}>Happy Patients</span>
</div>
</motion.div>

<motion.div
className={styles.statItem}
whileHover={{ y: -5 }}
transition={{ type: 'spring', stiffness: 300 }}
>
<FaClinicMedical className={styles.statIcon} />
<div className={styles.statContent}>
<span className={styles.statNumber}>24/7</span>
<span className={styles.statLabel}>Emergency Care</span>
</div>
</motion.div>
</div>

<h2 className={styles.specialtiesHeading}>Specialties</h2>

<div className={styles.specialties}>
Expand Down
57 changes: 3 additions & 54 deletions client/src/components/AboutSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,8 @@
.cardGrid {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
/* Base Styles */
.aboutUs {
padding: 60px 40px;
padding: 100px 5%;
background-color: #ffffff;
box-shadow: 0 8px 24px #f6f5f7;
margin: 30px auto;
border-radius: 12px;
max-width: 1400px;
}
.aboutContainer {
max-width: 1200px;
margin: auto;
border-radius: 12px;
}
.aboutContainer h1 {
font-size: 2.8em;
color: #eef6f9;
text-align: center;
margin-bottom: 30px;
background: #203394;
border: 1px solid #e2e8f0;
border-radius: 12px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
letter-spacing: -0.5px;

}

.text {
font-size: 1.2em;
color: #1c2733;
line-height: 1.7;
margin-bottom: 25px;
text-align: justify;
font-weight: 400;
}
.card {
background-color: white;
padding: 20px;
width: 300px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.3s ease, background-color 0.3s ease;
cursor: pointer;
}

.card.expanded {
background-color: #e6f0ff;
position: relative;
transform: scale(1.05);
}

Expand Down
Loading