Skip to content

Commit 5335e6a

Browse files
GenDeltaGenDelta
committed
feat: added teams page and global component skew button
1 parent 3aa8e03 commit 5335e6a

File tree

8 files changed

+187
-2
lines changed

8 files changed

+187
-2
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@
5454
"git add"
5555
]
5656
}
57-
}
57+
}

‎src/assets/images/Teams/github.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/assets/images/Teams/instagram.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/images/Teams/linkedin.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/skewbutton.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Link } from "react-router-dom";
2+
import PropTypes from "prop-types";
3+
4+
function SkewButton({ text, link }) {
5+
return (
6+
<div className="flex justify-center mt-8">
7+
<Link to={link}>
8+
<button
9+
type="button"
10+
className="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none bg-white text-background font-sans font-extrabold px-4 py-2 -skew-x-12"
11+
>
12+
{text}
13+
</button>
14+
</Link>
15+
</div>
16+
);
17+
}
18+
19+
SkewButton.propTypes = {
20+
text: PropTypes.string.isRequired,
21+
link: PropTypes.string.isRequired,
22+
};
23+
24+
export default SkewButton;

‎src/pages/Teams/TeamMember.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import PropTypes from "prop-types";
2+
import LinkedInIcon from "@/assets/images/Teams/linkedin.svg";
3+
import GithubIcon from "@/assets/images/Teams/github.svg";
4+
import InstagramIcon from "@/assets/images/Teams/instagram.svg";
5+
6+
function TeamMember({ member }) {
7+
const { name, position, image, description, linkedin, instagram, github } =
8+
member;
9+
10+
return (
11+
<div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 cursor-pointer bg-zinc-700 rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
12+
<div className="border-8xl border-4 bg-zinc-700 rounded-3xl overflow-hidden p-3 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
13+
<img
14+
src={image}
15+
alt={name}
16+
className="w-40 h-40 rounded-full mx-auto"
17+
/>
18+
<h2 className="text-3xl font-sans font-semi-bold text-center text-white">
19+
{name}
20+
</h2>
21+
<p className="text-l font-sans text-center font-bold text-white">
22+
{position}
23+
</p>
24+
<p className="font-sans text-center text-wrap text-white">
25+
{description}
26+
</p>
27+
<div className="flex justify-center space-x-4">
28+
<a
29+
href={linkedin}
30+
target="_blank"
31+
rel="noreferrer"
32+
className="text-white font-sans"
33+
>
34+
<img src={LinkedInIcon} alt="Linkedin" className="w-10 h-10 p-2" />
35+
</a>
36+
<a
37+
href={github}
38+
target="_blank"
39+
rel="noreferrer"
40+
className="text-white font-sans"
41+
>
42+
<img src={GithubIcon} alt="Github" className="w-10 h-10 p-2" />
43+
</a>
44+
<a
45+
href={instagram}
46+
target="_blank"
47+
rel="noreferrer"
48+
className="text-white font-sans"
49+
>
50+
<img src={InstagramIcon} alt="GitHub" className="w-10 h-10 p-2" />
51+
</a>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
}
57+
58+
TeamMember.propTypes = {
59+
member: PropTypes.shape({
60+
name: PropTypes.string.isRequired,
61+
position: PropTypes.string.isRequired,
62+
image: PropTypes.string.isRequired,
63+
description: PropTypes.string.isRequired,
64+
linkedin: PropTypes.string.isRequired,
65+
instagram: PropTypes.string.isRequired,
66+
github: PropTypes.string.isRequired,
67+
}).isRequired,
68+
};
69+
70+
export default TeamMember;

‎src/pages/Teams/index.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import TeamMember from "@/pages/Teams/TeamMember";
2+
import SkewButton from "@/components/SkewButton";
3+
4+
const teamMembers = [
5+
{
6+
name: "Aditya Desai",
7+
position: "PRESIDENT",
8+
image:
9+
"https://media.licdn.com/dms/image/C4D03AQEfAUzWvBYdVg/profile-displayphoto-shrink_800_800/0/1663487119730?e=1714608000&v=beta&t=q9xS0ojSlWeXtvYbYAGKC-POp7f0TXCfrTSkoP1yMLA",
10+
description:
11+
"Praesent vestibulum libero non diam Praesent vestibulum libero non diam ",
12+
linkedin: "https://linkedin.com/in/john-doe",
13+
instagram: "https://instagram.com/john_doe",
14+
github: "https://github.com/john-doe",
15+
},
16+
{
17+
name: "Dr. Rupali Gangarde",
18+
position: "FACULTY ADVISOR",
19+
image:
20+
"https://media-pnq1-2.cdn.whatsapp.net/v/t61.24694-24/362246050_985287035952930_3222687059276313181_n.jpg?ccb=11-4&oh=01_AdQzhJX4u0dIpMxNBjPYbrW4sfwKKQ4xbLc3kW69swB3Wg&oe=65EA2552&_nc_sid=e6ed6c&_nc_cat=106",
21+
description:
22+
"Praesent vestibulum libero non diam Praesent vestibulum libero non diam ",
23+
linkedin: "https://linkedin.com/in/jane-doe",
24+
instagram: "https://instagram.com/jane_doe",
25+
github: "https://github.com/jane-doe",
26+
},
27+
{
28+
name: "Saksham Gupta",
29+
position: "VICE-PRESIDENT",
30+
image:
31+
"https://media.licdn.com/dms/image/C4D03AQFf0M0m5SBEsw/profile-displayphoto-shrink_800_800/0/1661514280105?e=1714608000&v=beta&t=OU8Rye-qRguvPyAsyJ19wMr3toD5PtIFWEwjORVlohc",
32+
description:
33+
"Praesent vestibulum libero non diam Praesent vestibulum libero non diam ",
34+
linkedin: "https://linkedin.com/in/john-doe",
35+
instagram: "https://instagram.com/john_doe",
36+
github: "https://github.com/john-doe",
37+
},
38+
// Your team members data here
39+
];
40+
41+
function Teams() {
42+
return (
43+
<div className="bg-zinc-800 min-h-screen">
44+
<div className="flex-grow container mx-auto pr-20 pl-20 space-x-30 py-8">
45+
<div
46+
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
47+
style={{ gridAutoRows: "minmax(auto, max-content)" }}
48+
>
49+
{teamMembers.map((member) => (
50+
<TeamMember key={member.name} member={member} />
51+
))}
52+
</div>
53+
<SkewButton text="SEE ALL" link="/all-members" />
54+
</div>
55+
</div>
56+
);
57+
}
58+
59+
export default Teams;

‎src/routes/index.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import Home from "../pages/Home";
1+
import Home from "@/pages/Home/index";
2+
import Teams from "@/pages/Teams/index";
23

34
const routes = [
5+
{
6+
lable: "Teams",
7+
path: "/teams",
8+
requireAuth: false,
9+
render: <Teams />,
10+
},
411
{
512
lable: "Home",
613
path: "/",

0 commit comments

Comments
 (0)