Skip to content

Commit

Permalink
refactor the team section
Browse files Browse the repository at this point in the history
  • Loading branch information
@teoh4770
teoh4770 committed Mar 26, 2024
1 parent ef72125 commit d8f965a
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 102 deletions.
2 changes: 1 addition & 1 deletion src/components/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export { Menu } from './Navbar/Menu';
*
*/
export { HeroStatSection } from './sections/HeroStats.section';
export { TeamSection } from './sections/Team.section';
export { TeamSection } from './sections/Team/Team.section';
export { ContactSection } from './sections/Contact.section';
export { FooterSection } from './sections/Footer.section';
export { SponsorFAQSection } from './sections/SponsorFAQ.section';
91 changes: 91 additions & 0 deletions src/components/sections/Team/Team.section.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { departments } from './data';

interface Member {
name: string;
title: string;
profile: string;
}

interface DepartmentProps {
title: string;
members: Member[];
}

const Department: React.FC<DepartmentProps> = ({ title, members }) => {
return (
<div className="department">
<h3 className="mb-6 text-3xl font-bold capitalize md:mb-8">
{title}
</h3>
<ul className="grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
{members.map((member, index) => (
<li key={index} className="flex items-center gap-x-4">
<img
className="aspect-square w-20 rounded-full object-cover lg:w-32"
src={member.profile}
alt={title}
/>

<div>
<p className="text-lg font-extrabold lg:text-2xl">
{member.name}
</p>
<p className="text-base font-normal lg:text-lg">
{member.title}
</p>
</div>
</li>
))}
</ul>
</div>
);
};

const TeamSection = () => {
return (
<section
id="team-section"
className="relative isolate overflow-hidden bg-[#9f7eca] p-5 md:p-8 lg:p-12"
>
{/* top images */}
<div className="relative mx-auto mb-10 w-fit sm:mb-24 lg:mb-32">
<img
className="mx-auto w-full max-w-fit sm:hidden"
src="src/assets/team/meet-the-team-banner.webp"
alt=""
/>
<img
className="mx-auto hidden w-full max-w-[70rem] sm:block"
src="src/assets/team/meet-the-team-balloon-banner.webp"
alt=""
/>
<img
className="absolute bottom-0 z-10 hidden translate-y-1/2 sm:block"
src="src/assets/team/clouds.svg"
alt=""
/>
</div>

{/* right building image */}
<img
className="absolute right-0 -z-10 hidden translate-x-1/3 lg:block 2xl:translate-x-32"
src="src/assets/team/meet-the-team-building-right.svg"
alt=""
/>
{/* left building image */}
<img
className="absolute bottom-0 left-0 -z-10 hidden -translate-x-1/3 translate-y-1/2 lg:block 2xl:translate-y-[30%]"
src="src/assets/team/meet-the-team-building-left.svg"
alt=""
/>

<div className="mx-auto max-w-7xl space-y-12 pb-64 lg:pb-96">
{departments.map((department) => (
<Department {...department} key={department.title} />
))}
</div>
</section>
);
};

export { TeamSection };
102 changes: 1 addition & 101 deletions src/components/sections/Team.section.tsx → src/components/sections/Team/data.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,3 @@
interface Member {
name: string;
title: string;
profile: string;
}

interface MemberProps extends Member {}

interface DepartmentProps {
title: string;
members: Member[];
}

const departments = [
{
title: 'design',
Expand Down Expand Up @@ -144,91 +131,4 @@ const departments = [
},
];

const Member: React.FC<MemberProps> = ({ name, title, profile }) => {
return (
// ?width can be fixed (84 when small, 128 when big or large viewport) (done)
<li className="flex items-center gap-x-4">
<img
className="aspect-square w-20 rounded-full object-cover lg:w-32"
src={profile}
alt={title}
/>

<div>
<p className="text-lg lg:text-2xl font-extrabold">{name}</p>
<p className="text-base lg:text-lg font-normal">{title}</p>
</div>
</li>
);
};

const Department: React.FC<DepartmentProps> = ({ title, members }) => {
return (
<div className="department">
<h3 className="mb-6 text-3xl font-bold capitalize md:mb-8">
{title}
</h3>
<ul className="grid gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8">
{members.map((member, index) => (
<Member
{...member}
key={`${index}-${member.name}-${member.title}`}
/>
))}
</ul>
</div>
);
};

const TeamSection = () => {
return (
// should have decide the consistent padding
// or right now, i can focus on the section and increase the padding
<section
id="team-section"
className="relative isolate overflow-hidden bg-[#9f7eca] p-5 md:p-8 lg:p-12"
>
{/* image at the top */}
<div className="relative mx-auto mb-10 sm:mb-24 w-fit lg:mb-32">
{/* keep the banner only in mobile view */}
{/* keep the balloon after mobile view */}
<img
className="mx-auto w-full max-w-fit sm:hidden"
src="src/assets/team/meet-the-team-banner.webp"
alt=""
/>
<img
className="mx-auto hidden w-full max-w-[70rem] sm:block"
src="src/assets/team/meet-the-team-balloon-banner.webp"
alt=""
/>
<img
className="absolute bottom-0 translate-y-1/2 z-10 hidden sm:block"
src="src/assets/team/clouds.svg"
alt=""
/>
</div>

{/* right building image */}
<img
className="absolute right-0 -z-10 hidden translate-x-1/3 lg:block 2xl:translate-x-32"
src="src/assets/team/meet-the-team-building-right.svg"
alt=""
/>
{/* left building image */}
<img
className="absolute bottom-0 left-0 -z-10 hidden -translate-x-1/3 translate-y-1/2 lg:block 2xl:translate-y-[30%]"
src="src/assets/team/meet-the-team-building-left.svg"
alt=""
/>

<div className="mx-auto max-w-[1328px] space-y-12 pb-80">
{departments.map((department) => (
<Department {...department} key={department.title} />
))}
</div>
</section>
);
};

export { TeamSection };
export { departments };

0 comments on commit d8f965a

Please sign in to comment.