Skip to content

Commit 08469ed

Browse files
Achyut-0705Achyut-0705
authored
Merge pull request #23 from codeXsit/codex-5-teams-page
Added Teams Page
2 parents ef5abe0 + 85beaa6 commit 08469ed

File tree

10 files changed

+193
-4
lines changed

10 files changed

+193
-4
lines changed

‎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/Heading/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
22

33
function Heading({ text }) {
44
return (
5-
<div className="relative text-center font-black uppercase tracking-tighter m-4">
5+
<div className="relative text-center font-black uppercase tracking-tighter -m-2">
66
<div className="xs:text-4xl sm:text-6xl lg:text-8xl text-outlined text-transparent leading-[145%]">
77
{text}
88
</div>

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

‎src/pages/Teams/index.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import TeamMember from "@/pages/Teams/TeamMember";
2+
import SkewButton from "@/components/SkewButton";
3+
import Heading from "@/components/Heading/index";
4+
import teamMembersData from "./teamsdata.json";
5+
6+
function Teams() {
7+
const teamMembers = teamMembersData.map((member) => (
8+
<TeamMember key={member.name} member={member} />
9+
));
10+
11+
return (
12+
<div className="bg-background-dark min-h-screen">
13+
<div className="flex justify-center items-center">
14+
<div className="flex-grow container mx-auto pr-20 pl-20 space-x-30 py-8">
15+
<Heading
16+
text="MEET OUR TEAM"
17+
className="text-center absolute top-0 left-0 right-0 mb-24"
18+
/>
19+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 grid grid-rows-auto mt-12">
20+
{teamMembers}
21+
</div>
22+
<SkewButton text="SEE ALL" link="/all-members" className="mt-16" />
23+
</div>
24+
</div>
25+
</div>
26+
);
27+
}
28+
29+
export default Teams;

‎src/pages/Teams/teamsdata.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
[
2+
{
3+
"name": "Aditya Desai",
4+
"position": "PRESIDENT",
5+
"image": "https://media.licdn.com/dms/image/C4D03AQEfAUzWvBYdVg/profile-displayphoto-shrink_800_800/0/1663487119730?e=1714608000&v=beta&t=q9xS0ojSlWeXtvYbYAGKC-POp7f0TXCfrTSkoP1yMLA",
6+
"description": "Praesent vestibulum libero non diam Praesent vestibulum libero non diam",
7+
"linkedin": "https://linkedin.com/in/john-doe",
8+
"instagram": "https://instagram.com/john_doe",
9+
"github": "https://github.com/john-doe"
10+
},
11+
{
12+
"name": "Dr. Rupali Gangarde",
13+
"position": "FACULTY ADVISOR",
14+
"image": "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",
15+
"description": "Praesent vestibulum libero non diam Praesent vestibulum libero non diam",
16+
"linkedin": "https://linkedin.com/in/jane-doe",
17+
"instagram": "https://instagram.com/jane_doe",
18+
"github": "https://github.com/jane-doe"
19+
},
20+
{
21+
"name": "Saksham Gupta",
22+
"position": "VICE-PRESIDENT",
23+
"image": "https://media.licdn.com/dms/image/C4D03AQFf0M0m5SBEsw/profile-displayphoto-shrink_800_800/0/1661514280105?e=1714608000&v=beta&t=OU8Rye-qRguvPyAsyJ19wMr3toD5PtIFWEwjORVlohc",
24+
"description": "Praesent vestibulum libero non diam Praesent vestibulum libero non diam",
25+
"linkedin": "https://linkedin.com/in/john-doe",
26+
"instagram": "https://instagram.com/john_doe",
27+
"github": "https://github.com/john-doe"
28+
}
29+
]

‎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: "/",

‎tailwind.config.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default {
1313
secondary: {
1414
DEFAULT: "#737373",
1515
light: "#A3A3A3",
16-
dark: "#494949",
16+
dark: "#222222",
1717
},
1818
background: {
1919
dark: "#232323",
@@ -22,7 +22,11 @@ export default {
2222
text: {
2323
light: "#F7F7F7",
2424
dark: "#232323",
25-
}
25+
},
26+
gradient: {
27+
light: "#383838",
28+
dark: "#222222 ",
29+
}
2630
},
2731
screens: {
2832
xs: "0px",

0 commit comments

Comments
 (0)