Skip to content

Commit d97972e

Browse files
GenDeltaGenDelta
committed
fix: changed grid to 4 columns per row
1 parent ef8bb73 commit d97972e

File tree

3 files changed

+129
-95
lines changed

3 files changed

+129
-95
lines changed

‎src/components/WebsiteTeam/TeamMember.jsx‎

Lines changed: 90 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -13,95 +13,105 @@ import AbhishekPatawariImage from "@/assets/images/Website_Team/AbhishekPatawari
1313
import JayTrivediImage from "@/assets/images/Website_Team/JayTrivedi.png";
1414

1515
const images = {
16-
1: MiranFirdausiImage,
17-
2: AchyutShuklaImage,
18-
3: MitikshaPaliwalImage,
19-
4: AnkushDuttaImage,
20-
5: AbhishekPatawariImage,
21-
6: JayTrivediImage,
16+
1: MiranFirdausiImage,
17+
2: AchyutShuklaImage,
18+
3: MitikshaPaliwalImage,
19+
4: AnkushDuttaImage,
20+
5: AbhishekPatawariImage,
21+
6: JayTrivediImage,
2222
};
2323

2424
const bgimages = {
25-
1: RectangleRed,
26-
2: RectangleGreen,
27-
3: RectangleYellow,
28-
4: RectangleGreen,
29-
5: RectangleRed,
30-
6: RectangleYellow,
25+
1: RectangleRed,
26+
2: RectangleGreen,
27+
3: RectangleYellow,
28+
4: RectangleGreen,
29+
5: RectangleRed,
30+
6: RectangleYellow,
3131
};
32-
33-
3432
function TeamMember({ member }) {
35-
const { name, batch, description, linkedin, instagram, github, id } = member;
36-
const image = images[id];
33+
const { name, batch, description, linkedin, instagram, github, id } = member;
34+
const image = images[id];
3735

38-
return (
39-
<div className="relative group transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 cursor-pointer overflow-hidden p-8 align-middle max-w-[700px]">
40-
<div className="overflow-hidden p-4 align-middle">
41-
<div className="relative">
42-
<img
43-
src={bgimages[id]}
44-
alt="background"
45-
className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-56 h-56 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
46-
/>
47-
<img
48-
src={image}
49-
alt={name}
50-
className="relative w-72 h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
51-
/>
52-
</div>
53-
<h2 className="text-4xl mt-10 font-poppins font-bold text-center tracking-wide text-text-light">
54-
{name}
55-
</h2>
56-
<p className="text-xl mt-3 font-poppins text-center font-semibold tracking-wide text-text-light">
57-
{batch}
58-
</p>
59-
<p className="text-xl font-poppins my-5 text-center text-wrap text-secondary-light">
60-
{description}
61-
</p>
62-
<div className="absolute -left-1 top-[40%] transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 sm:left-1 sm:top-[30%] md:left-4 md:top-[40%] lg:left-4 lg:top-[40%] xl:left-4 xl:top-[40%]">
63-
<div className="flex flex-col space-y-4">
64-
<a
65-
href={linkedin}
66-
target="_blank"
67-
rel="noreferrer"
68-
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100"
69-
>
70-
<img src={LinkedInIcon} alt="Linkedin" className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2" />
71-
</a>
72-
<a
73-
href={github}
74-
target="_blank"
75-
rel="noreferrer"
76-
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200"
77-
>
78-
<img src={GithubIcon} alt="Github" className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2" />
79-
</a>
80-
<a
81-
href={instagram}
82-
target="_blank"
83-
rel="noreferrer"
84-
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-300"
85-
>
86-
<img src={InstagramIcon} alt="Instagram" className="w-10 h-10 sm:w-8 sm:h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2" />
87-
</a>
88-
</div>
89-
</div>
90-
</div>
36+
return (
37+
<div className="relative group transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 cursor-pointer overflow-hidden p-8 align-middle max-w-[700px]">
38+
<div className="overflow-hidden p-4 align-middle">
39+
<div className="relative">
40+
<img
41+
src={bgimages[id]}
42+
alt="background"
43+
className="absolute bottom-1 left-1/2 rounded-md transform -translate-x-1/2 w-40 h-40 sm:w-48 sm:h-48 md:w-56 md:h-56 lg:w-64 lg:h-64 object-cover z-0 transition-transform duration-700 group-hover:scale-105"
44+
/>
45+
<img
46+
src={image}
47+
alt={name}
48+
className="relative w-48 h-48 sm:w-56 sm:h-56 md:w-64 md:h-64 lg:w-72 lg:h-72 mx-auto object-cover z-10 filter grayscale transition duration-500 group-hover:filter-none group-hover:duration-500 group-hover:ease-in-out group-hover:delay-150 group-hover:scale-110"
49+
/>
50+
</div>
51+
<h2 className="text-2xl sm:text-3xl md:text-5xl mt-10 font-poppins font-semibold text-center tracking-wide text-text-light">
52+
{name}
53+
</h2>
54+
<p className="text-lg sm:text-xl mt-3 font-poppins text-center font-semibold tracking-wide text-text-light">
55+
{batch}
56+
</p>
57+
<p className="text-lg sm:text-xl font-poppins my-5 text-center text-wrap text-secondary-light">
58+
{description}
59+
</p>
60+
<div className="mr-2 absolute -left-2 top-[40%] transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-500 sm:left-[0.5rem] sm:top-[30%] md:-left-[0.5rem] md:top-[40%] lg:-left-[0.5rem] lg:top-[40%] xl:-left-[0.5rem] xl:top-[40%]">
61+
<div className="flex flex-col space-y-4">
62+
<a
63+
href={linkedin}
64+
target="_blank"
65+
rel="noreferrer"
66+
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100"
67+
>
68+
<img
69+
src={LinkedInIcon}
70+
alt="Linkedin"
71+
className="w-8 h-8 sm:w-10 sm:h-10 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
72+
/>
73+
</a>
74+
<a
75+
href={github}
76+
target="_blank"
77+
rel="noreferrer"
78+
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-200"
79+
>
80+
<img
81+
src={GithubIcon}
82+
alt="Github"
83+
className="w-8 h-8 sm:w-10 sm:h-10 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
84+
/>
85+
</a>
86+
<a
87+
href={instagram}
88+
target="_blank"
89+
rel="noreferrer"
90+
className="text-white font-sans opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-300"
91+
>
92+
<img
93+
src={InstagramIcon}
94+
alt="Instagram"
95+
className="w-8 h-8 sm:w-10 sm:h-10 md:w-10 md:h-10 lg:w-12 lg:h-12 p-2"
96+
/>
97+
</a>
98+
</div>
9199
</div>
92-
);
100+
</div>
101+
</div>
102+
);
93103
}
94104

95105
TeamMember.propTypes = {
96-
member: PropTypes.shape({
97-
name: PropTypes.string.isRequired,
98-
batch: PropTypes.string.isRequired,
99-
description: PropTypes.string.isRequired,
100-
linkedin: PropTypes.string.isRequired,
101-
instagram: PropTypes.string.isRequired,
102-
github: PropTypes.string.isRequired,
103-
id: PropTypes.number.isRequired,
104-
}).isRequired,
106+
member: PropTypes.shape({
107+
name: PropTypes.string.isRequired,
108+
batch: PropTypes.string.isRequired,
109+
description: PropTypes.string.isRequired,
110+
linkedin: PropTypes.string.isRequired,
111+
instagram: PropTypes.string.isRequired,
112+
github: PropTypes.string.isRequired,
113+
id: PropTypes.number.isRequired,
114+
}).isRequired,
105115
};
106116

107-
export default TeamMember;
117+
export default TeamMember;

‎src/components/WebsiteTeam/index.jsx‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function WebsiteTeam() {
2525
end: "bottom 70%",
2626
toggleActions: "play none none reverse",
2727
},
28-
}
28+
},
2929
);
3030
});
3131

@@ -41,27 +41,44 @@ function WebsiteTeam() {
4141
));
4242

4343
return (
44-
<div className="min-h-fit bg-background-dark scroll-smooth" ref={sectionRef}>
44+
<div
45+
className="min-h-fit bg-background-dark scroll-smooth"
46+
ref={sectionRef}
47+
>
4548
<div className="flex justify-center items-center">
4649
<div className="flex-grow mx-auto">
47-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-center items-center p-6">
48-
<div className="text-left text-xl sm:text-2xl md:text-3xl lg:text-[2.5rem] font-poppins px-2 space-y-2">
49-
<div>
50-
<span className="text-text-websiteteamlight font-thin">Special Thanks</span>
51-
<span className="text-text-websiteteamlight font-thin"> to the</span>
52-
<span className="text-primary font-semibold"> Awesome Team</span>
53-
</div>
54-
<div>
55-
<span className="text-text-websiteteamlight font-thin"> Who Helped Create this</span>
56-
<span className="text-text-websiteteamyellow font-semibold"> Amazing Website</span>
57-
</div>
50+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 justify-center items-center p-6">
51+
<div className="text-left text-xl sm:text-3xl md:text-3xl lg:text-4xl font-poppins px-2 space-y-2">
52+
<div>
53+
<span className="text-text-websiteteamlight font-thin">
54+
Special Thanks
55+
</span>
56+
<span className="text-text-websiteteamlight font-thin">
57+
{" "}
58+
to the
59+
</span>
60+
<span className="text-primary font-semibold">
61+
{" "}
62+
Awesome Team
63+
</span>
5864
</div>
59-
{teamMembers}
65+
<div>
66+
<span className="text-text-websiteteamlight font-thin">
67+
{" "}
68+
Who Helped Create this
69+
</span>
70+
<span className="text-text-websiteteamyellow font-semibold">
71+
{" "}
72+
Amazing Website
73+
</span>
74+
</div>
75+
</div>
76+
{teamMembers}
6077
</div>
6178
</div>
6279
</div>
6380
</div>
6481
);
6582
}
6683

67-
export default WebsiteTeam;
84+
export default WebsiteTeam;

‎src/routes/index.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ import Gallery from "@/pages/Gallery/Gallery";
55
import Contact from "@/pages/Contact";
66
import PageNotFound from "../pages/PageNotFound";
77
import Loader from "@/components/Loader";
8+
import WebsiteTeam from "../components/WebsiteTeam";
89

910
const routes = [
11+
{
12+
label: "Website Team",
13+
path: "/website-team",
14+
requireAuth: false,
15+
render: <WebsiteTeam />,
16+
},
1017
{
1118
label: "Loader",
1219
path: "/loader",

0 commit comments

Comments
 (0)