Skip to content

Commit

Permalink
Added 3d hover effect and animation to cards social media icons
Browse files Browse the repository at this point in the history
  • Loading branch information
biswa committed Oct 25, 2024
1 parent c615055 commit 7962fe1
Showing 1 changed file with 191 additions and 65 deletions.
256 changes: 191 additions & 65 deletions client/src/pages/About.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,10 @@ import { useRecoilValue } from 'recoil'; // Import Recoil
import { mode } from '../store/atom'; // Import the mode atom
import luson from '../assets/images/luson.jpg';




// Team member data
const teamMembers = [
{
id:1,
id: 1,
name: 'Luson Basumatary',
role: 'Lead Developer || Founder',
description:
Expand All @@ -27,7 +24,7 @@ const teamMembers = [
email: 'mailto:luson@example.com',
},
{
id:2,
id: 2,
name: 'Rohit Bansal',
role: 'Frontend Developer',
description:
Expand All @@ -38,7 +35,7 @@ const teamMembers = [
email: 'mailto:luson@example.com',
},
{
id:3,
id: 3,
name: 'Kalpesh Jain',
role: 'UI/UX Designer',
description:
Expand All @@ -49,7 +46,7 @@ const teamMembers = [
email: 'mailto:luson@example.com',
},
{
id:4,
id: 4,
name: 'Simranpreet Kaur',
role: 'Graphic Designer',
description:
Expand All @@ -60,7 +57,7 @@ const teamMembers = [
email: 'mailto:luson@example.com',
},
{
id:5,
id: 5,
name: 'Kartik Kaushal',
role: 'Healthcare Researcher',
description:
Expand All @@ -71,7 +68,7 @@ const teamMembers = [
email: 'mailto:luson@example.com',
},
{
id:6,
id: 6,
name: 'Shubham',
role: 'Technology Researcher',
description:
Expand Down Expand Up @@ -118,11 +115,13 @@ const AboutPage = () => {
<animated.div style={fadeIn}>
{/* Two-box section for Vision and Mission */}
<VisionMissionContainer>
<Box dark={dark} >
<VisionTitle dark={dark} className='font-semibold'>Our Vision</VisionTitle>
<VisionText dark={dark} className='font-sans '>
At Med-Space, we envision a world where accessing outpatient
care is as simple as a few clicks. By leveraging technology and
<Box dark={dark}>
<VisionTitle dark={dark} className="font-semibold">
Our Vision
</VisionTitle>
<VisionText dark={dark} className="font-sans ">
At Med-Space, we envision a world where accessing outpatient care
is as simple as a few clicks. By leveraging technology and
innovation, we aim to provide a platform that bridges the gap
between patients and healthcare providers, making high-quality
care accessible to everyone, anywhere. We strive to ensure that
Expand All @@ -131,8 +130,10 @@ const AboutPage = () => {
</VisionText>
</Box>
<Box dark={dark}>
<MissionTitle dark={dark} className='font-semibold'>Our Mission</MissionTitle>
<MissionText dark={dark} className='font-sans'>
<MissionTitle dark={dark} className="font-semibold">
Our Mission
</MissionTitle>
<MissionText dark={dark} className="font-sans">
Our mission is to revolutionize outpatient care by creating a
comprehensive, easy-to-use platform that empowers patients and
healthcare providers alike. We are committed to building
Expand All @@ -146,21 +147,19 @@ const AboutPage = () => {

<Title dark={dark}>Meet our awesome team</Title>
<TeamGrid>
{teamMembers.map((member, index) => (
<animated.div key={index} style={slideIn}>
<TeamCard dark={dark} className="flex flex-col items-center">
<ProfileImage
src={member.imageUrl}
className="shadow-md"
alt={`${member.name}'s profile`}
/>
<Name dark={dark}>
{member.name}
</Name>
<Role dark={dark}>{member.role}</Role>

{/* Social Media Icons */}
<SocialIcons className="my-3">
{teamMembers.map((member, index) => (
<animated.div key={index} style={slideIn}>
<TeamCard dark={dark} className="flex flex-col items-center">
<ProfileImage
src={member.imageUrl}
className="shadow-md"
alt={`${member.name}'s profile`}
/>
<Name dark={dark}>{member.name}</Name>
<Role dark={dark}>{member.role}</Role>

{/* Social Media Icons */}
{/* <SocialIcons className="my-3">
<div className="border-2 rounded-full px-[10px] py-[4px] flex items-center border-gray-500">
<a href={member.linkedin} target="_blank" rel="noopener noreferrer">
<FontAwesomeIcon icon={faLinkedin} size="x" />
Expand All @@ -176,28 +175,158 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faEnvelope} size="x" />
</a>
</div>
</SocialIcons>
<Description dark={dark}>
<div className="md:hidden">{member.description}</div>
<div className="hidden md:block">
{expandedIds[member.id]
? member.description
: getLimitedText(member.description, charLimit)}

{member.description.length > charLimit && (
<span
onClick={() => toggleReadMore(member.id)}
className="text-blue-500 cursor-pointer ml-1 text-[12px]"
>
{expandedIds[member.id] ? 'Read Less' : 'Read More'}
</span>
)}
</div>

</Description>
</TeamCard>
</animated.div>
))}
</SocialIcons> */}
<SocialIcons className="my-3 flex gap-3">
<div
style={{
perspective: '1000px',
transition: 'transform 0.3s, box-shadow 0.3s',
background:
'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)',
animation: 'gradientShift 4s ease infinite',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform =
'rotateY(10deg) rotateX(10deg) scale(1.1)';
e.currentTarget.style.boxShadow =
'0px 8px 16px rgba(0, 0, 0, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform =
'rotateY(0deg) rotateX(0deg) scale(1)';
e.currentTarget.style.boxShadow =
'0px 4px 8px rgba(0, 0, 0, 0.2)';
}}
className="border-2 rounded-full px-[10px] py-[4px] flex items-center border-gray-500"
>
<a
href={member.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon
icon={faLinkedin}
size="x"
style={{
transition: 'transform 0.3s ease',
}}
onMouseEnter={(e) =>
(e.target.style.transform = 'scale(1.2)')
}
onMouseLeave={(e) =>
(e.target.style.transform = 'scale(1)')
}
/>
</a>
</div>

<div
style={{
perspective: '1000px',
transition: 'transform 0.3s, box-shadow 0.3s',
background:
'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
animation: 'gradientShift 4s ease infinite',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform =
'rotateY(10deg) rotateX(10deg) scale(1.1)';
e.currentTarget.style.boxShadow =
'0px 8px 16px rgba(0, 0, 0, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform =
'rotateY(0deg) rotateX(0deg) scale(1)';
e.currentTarget.style.boxShadow =
'0px 4px 8px rgba(0, 0, 0, 0.2)';
}}
className="border-2 rounded-full px-[10px] py-[4px] flex items-center border-gray-500"
>
<a
href={member.github}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon
icon={faGithub}
size="x"
style={{
transition: 'transform 0.3s ease',
}}
onMouseEnter={(e) =>
(e.target.style.transform = 'scale(1.2)')
}
onMouseLeave={(e) =>
(e.target.style.transform = 'scale(1)')
}
/>
</a>
</div>

<div
style={{
perspective: '1000px',
transition: 'transform 0.3s, box-shadow 0.3s',
background:
'linear-gradient(135deg, #ff7eb3 0%, #ff65a3 100%)',
animation: 'gradientShift 4s ease infinite',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform =
'rotateY(10deg) rotateX(10deg) scale(1.1)';
e.currentTarget.style.boxShadow =
'0px 8px 16px rgba(0, 0, 0, 0.3)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform =
'rotateY(0deg) rotateX(0deg) scale(1)';
e.currentTarget.style.boxShadow =
'0px 4px 8px rgba(0, 0, 0, 0.2)';
}}
className="border-2 rounded-full px-[10px] py-[4px] flex items-center border-gray-500"
>
<a
href={`mailto:${member.email}`}
target="_blank"
rel="noopener noreferrer"
>
<FontAwesomeIcon
icon={faEnvelope}
size="x"
style={{
transition: 'transform 0.3s ease',
}}
onMouseEnter={(e) =>
(e.target.style.transform = 'scale(1.2)')
}
onMouseLeave={(e) =>
(e.target.style.transform = 'scale(1)')
}
/>
</a>
</div>
</SocialIcons>

<Description dark={dark}>
<div className="md:hidden">{member.description}</div>
<div className="hidden md:block">
{expandedIds[member.id]
? member.description
: getLimitedText(member.description, charLimit)}

{member.description.length > charLimit && (
<span
onClick={() => toggleReadMore(member.id)}
className="text-blue-500 cursor-pointer ml-1 text-[12px]"
>
{expandedIds[member.id] ? 'Read Less' : 'Read More'}
</span>
)}
</div>
</Description>
</TeamCard>
</animated.div>
))}
</TeamGrid>
<StatsSection>
{/* First Stat */}
Expand Down Expand Up @@ -296,8 +425,10 @@ const AboutPage = () => {
Nearby Hospitals
</StatItem>
</StatsSection>
<GitTeamTitle dark={dark}>Our Amazing Open Source Contributors</GitTeamTitle>
<div align="center">
<GitTeamTitle dark={dark}>
Our Amazing Open Source Contributors
</GitTeamTitle>
<div style={{ textAlign: 'center' }}>
<a href="https://github.com/Luson045/medi-connect/graphs/contributors">
<img
alt="git team"
Expand Down Expand Up @@ -349,7 +480,6 @@ const Box = styled.div`
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;


const VisionTitle = styled.h2`
font-size: 2rem;
margin-bottom: 1rem;
Expand All @@ -360,7 +490,6 @@ const VisionText = styled.p`
font-size: 1.125rem;
color: ${({ dark }) => (dark === 'dark' ? '#e2e8f0' : '#161D6F')};
line-height: 1.6;
`;

const MissionTitle = styled.h2`
Expand Down Expand Up @@ -418,18 +547,17 @@ const SocialIcons = styled.div`
a {
&:hover {
color:${({ dark }) => (dark === 'dark' ? 'white' : 'blue')}; /* Optional hover effect */
color: ${({ dark }) =>
dark === 'dark' ? 'white' : 'blue'}; /* Optional hover effect */
}
}
`;

const Name = styled.h4`
font-size: 1.25rem;
margin-bottom: 0.2rem;
color: ${({ dark }) => (dark === 'dark' ? '#B7E0FF' : '#333')};
font-weight:bold;
color: ${({ dark }) => (dark === 'dark' ? '#B7E0FF' : '#333')};
font-weight: bold;
`;

const Role = styled.h5`
Expand All @@ -442,7 +570,6 @@ const Description = styled.p`
font-size: 0.9rem;
color: ${({ dark }) => (dark === 'dark' ? 'white' : '#666')};
line-height: 1.4;
`;

// Community Section
Expand Down Expand Up @@ -473,13 +600,12 @@ const JoinUsText = styled.p`
color: ${({ dark }) => (dark === 'dark' ? '#e2e8f0' : '#666')};
`;


const Title = styled.h3`
font-size: 2.5rem;
color: ${({ dark }) => (dark === 'dark' ? '#f6e05e' : '#c229b8')};
text-align: center;
margin-bottom: 2rem;
font-weight:bold;
font-weight: bold;
`;

const StatsSection = styled.div`
Expand Down

0 comments on commit 7962fe1

Please sign in to comment.