Skip to content

Commit fa8d584

Browse files
burtonjongburtonjong
committed
basically done just mobile is scuffed
1 parent a96f85b commit fa8d584

File tree

9 files changed

+102
-73
lines changed

9 files changed

+102
-73
lines changed

‎.vscode/settings.json‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎components/Heading.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { UnderlineTypes } from '../utils/underlineType';
22

33
/* eslint-disable @next/next/no-img-element */
4-
const HEADING_CONTAINER = 'py-5 flex flex-col items-center';
54

65
const GREEN_LONG_UNDERLINE_DIR = '/svgs/long_heading_underline.svg';
76
const GREEN_SHORT_UNDERLINE_DIR = '/svgs/short_heading_underline.svg';
@@ -11,8 +10,12 @@ const WHITE_CURLY_LINE_DIR = '/svgs/white_alumni_underline.svg';
1110
const BEIGE_SHORT_UNDERLINE_DIR = '/svgs/beige_underline.svg';
1211
const PINK_UNDERLINE_DIR = '/svgs/pink_underline.svg';
1312

14-
15-
const Heading = ({ classes, underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE, children }) => {
13+
const Heading = ({
14+
classes = '',
15+
distanceFromTop = 0,
16+
underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE,
17+
children,
18+
}) => {
1619
const getUnderline = () => {
1720
switch (underlineType) {
1821
case UnderlineTypes.GREEN_LONG_UNDERLINE:
@@ -33,9 +36,9 @@ const Heading = ({ classes, underlineType = UnderlineTypes.GREEN_SHORT_UNDERLINE
3336
};
3437

3538
return (
36-
<div className={HEADING_CONTAINER}>
37-
<h1 className={`${classes} text-5xl font-semibold`}>{children}</h1>
38-
{underlineType !== 'None' && <img src={getUnderline()} alt="" />}
39+
<div className="relative inline-block text-center">
40+
<span className={`relative z-10 ${classes} text-5xl font-semibold`}>{children}</span>
41+
{underlineType !== 'None' && <img src={getUnderline()} alt="squiggly" className="w-4/5 mx-auto" />}
3942
</div>
4043
);
4144
};

‎components/InternalTeam.jsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,26 @@ const InternalTeam = () => {
4646
}, []);
4747

4848
return (
49-
<section className="p-12">
50-
<div className="mb-9">
51-
<Heading underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>Internal Team</Heading>
49+
<>
50+
<div className="mb-12 flex justify-center gap-3">
51+
<Heading distanceFromTop={11} underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>
52+
Internal{' '}
53+
</Heading>
54+
<span className="text-5xl font-semibold">Team</span>
5255
</div>
5356
<div>
5457
{groups.length > 0 && (
5558
<Tabs value={activeTab} onChange={(val) => setActiveTab(val)}>
5659
<TabsHeader className="flex flex-row justify-center">
5760
{groups.map((group) => (
58-
<Tab className="team-tab rounded-full p-1 font-medium" key={group} value={group}>
59-
{group}
61+
<Tab key={group} value={group}>
62+
<div
63+
className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-300
64+
${activeTab === group ? 'bg-[#7559fc] text-white' : 'text-black'}
65+
`}
66+
>
67+
{group}
68+
</div>
6069
</Tab>
6170
))}
6271
</TabsHeader>
@@ -70,7 +79,7 @@ const InternalTeam = () => {
7079
</Tabs>
7180
)}
7281
</div>
73-
</section>
82+
</>
7483
);
7584
};
7685

‎components/MeetOurTeam.jsx‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
import TextSection from '/components/TextSection.jsx';
22
import Heading from '/components/Heading';
33
import { UnderlineTypes } from '../utils/underlineType';
4+
import { useRef } from 'react';
5+
import InternalTeam from './InternalTeam';
6+
import TechnicalTeam from './TechnicalTeam';
47

58
const MEET_OUR_TEAM = 'flex flex-col bg-pink pt-10 z-0 w-full';
69
const CONTENT_CONTAINER = 'flex flex-col pt-5 p-5 md:px-32';
7-
const MEET_OUR_AMAZING_TEAM_TITLE = "flex flex-wrap items-baseline gap-x-2 pt-5 justify-center w-fit mx-20 sm:mx-20 md:mx-auto lg:mx-auto";
10+
const MEET_OUR_AMAZING_TEAM_TITLE =
11+
'flex flex-wrap items-baseline gap-x-2 pt-5 justify-center w-fit mx-20 sm:mx-20 md:mx-auto lg:mx-auto';
812

9-
10-
11-
const Button = ({ classes = '', children, targetId, timeout=''}) => {
13+
const Button = ({ classes = '', children, targetRef }) => {
1214
return (
1315
<button
1416
onClick={() => {
15-
document.querySelector(`#${targetId}`).scrollIntoView({ behavior: 'smooth'});
16-
setTimeout(() => {
17-
window.scrollBy({ top: -50, left: 0, behavior: 'smooth' });
18-
}, timeout); // Wait for initial scroll to complete
19-
}}
17+
if (targetRef?.current) {
18+
const yOffset = -50;
19+
const y = targetRef.current.getBoundingClientRect().top + window.pageYOffset + yOffset;
20+
21+
window.scrollTo({ top: y, behavior: 'smooth' });
22+
}
23+
}}
2024
className={`cursor-pointer rounded-full text-white border-white py-2 px-8 bg-brightPink border-4 text-3xl font-bold w-48 ${classes}`}
2125
>
2226
{children}
@@ -25,27 +29,47 @@ const Button = ({ classes = '', children, targetId, timeout=''}) => {
2529
};
2630

2731
const MeetOurAmazingTeam = () => {
32+
const internalRef = useRef(null);
33+
const technicalRef = useRef(null);
34+
2835
return (
2936
<div>
3037
<div className={MEET_OUR_TEAM}>
3138
<div className={MEET_OUR_AMAZING_TEAM_TITLE}>
32-
<h1 className='text-5xl font-semibold'>Meet our</h1>
33-
<Heading underlineType={UnderlineTypes.PINK_UNDERLINE}><i>Amazing </i></Heading>
34-
<h1 className='text-5xl font-semibold ml-2'> Team</h1>
39+
<h1 className="text-5xl font-semibold">Meet our</h1>
40+
<Heading
41+
distanceFromTop={13}
42+
classes="italic whitespace-nowrap"
43+
underlineType={UnderlineTypes.PINK_UNDERLINE}
44+
>
45+
Amazing
46+
</Heading>
47+
<h1 className="text-5xl font-semibold ml-2"> Team</h1>
3548
</div>
3649
<div className={CONTENT_CONTAINER}>
3750
<TextSection classes="text-black pb-10 w-fit justify-center text-center mx-10 sm:mx-20 md:mx-auto lg:mx-auto">
38-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
39-
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
40-
ex ea commodo consequat.
51+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
52+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
53+
ea commodo consequat.
4154
</TextSection>
42-
<div className="pt-5 pb-12 flex justify-center gap-6 mx-auto flex-col sm:flex-col md-flex-row lg:flex-row">
43-
<Button targetId="internal" timeout='500'>Internal</Button>
44-
<Button targetId="technical" timeout='1000'>Technical</Button>
55+
<div className="pt-5 pb-12 flex justify-center gap-6 mx-auto flex-col sm:flex-row">
56+
<Button targetRef={internalRef} timeout={500}>
57+
Internal
58+
</Button>
59+
<Button targetRef={technicalRef} timeout={1000}>
60+
Technical
61+
</Button>
4562
</div>
4663
</div>
4764
</div>
48-
</div>
65+
66+
<section id="internal" ref={internalRef} className="h-screen p-12">
67+
<InternalTeam />
68+
</section>
69+
<section id="technical" ref={technicalRef} className="h-screen p-12 bg-[#bcfbe4]">
70+
<TechnicalTeam />
71+
</section>
72+
</div>
4973
);
5074
};
5175

‎components/TechnicalTeam.jsx‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,38 @@ const TechnicalTeam = () => {
2626
}, []);
2727

2828
return (
29-
<section className="technical-section p-12">
30-
<div className="mb-9">
31-
<Heading underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>Technical Team</Heading>
29+
<>
30+
<div className="mb-12 flex justify-center gap-3">
31+
<Heading distanceFromTop={11} underlineType={UnderlineTypes.PURPLE_SHORT_UNDERLINE}>
32+
Technical{' '}
33+
</Heading>
34+
<span className="text-5xl font-semibold">Team</span>
3235
</div>
33-
<div>
34-
{positions.length > 0 && (
35-
<Tabs value={activeTab} onChange={(val) => setActiveTab(val)}>
36-
<TabsHeader className="flex justify-items-center">
37-
{positions.map((position) => (
38-
<Tab className="team-tab rounded-full p-1 font-medium" key={position} value={position}>
36+
{positions.length > 0 && (
37+
<Tabs value={activeTab}>
38+
<TabsHeader className="flex flex-row justify-center">
39+
{positions.map((position) => (
40+
<Tab key={position} value={position} onClick={() => setActiveTab(position)}>
41+
<div
42+
className={`rounded-full p-2 px-4 font-medium hover:bg-[#7559fc] hover:text-white transition-all duration-300
43+
${activeTab === position ? 'bg-[#7559fc] text-white' : 'text-black'}
44+
`}
45+
>
3946
{position}
40-
</Tab>
41-
))}
42-
</TabsHeader>
43-
<TabsBody>
44-
{positions.map((position) => (
45-
<TabPanel key={position} value={position}>
46-
<Team executives={executives.filter((exec) => exec.position === position)} />
47-
</TabPanel>
48-
))}
49-
</TabsBody>
50-
</Tabs>
51-
)}
52-
</div>
53-
</section>
47+
</div>
48+
</Tab>
49+
))}
50+
</TabsHeader>
51+
<TabsBody>
52+
{positions.map((position) => (
53+
<TabPanel key={position} value={position}>
54+
<Team executives={executives.filter((exec) => exec.position === position)} />
55+
</TabPanel>
56+
))}
57+
</TabsBody>
58+
</Tabs>
59+
)}
60+
</>
5461
);
5562
};
5663

‎components/UnderConstruction.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { UnderlineTypes } from '../utils/underlineType';
33

44
const UnderConstruction = () => {
55
return (
6-
<section className="h-screen p-12">
6+
<section className="h-screen p-12 flex justify-center ">
77
<Heading underlineType={UnderlineTypes.IGE_SHORT_UNDERLINE_DIR}>Under Construction</Heading>
88
</section>
99
);

‎pages/our-team/index.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import UnderConstruction from '../../components/UnderConstruction';
2+
import { underConstruction } from '../../utils/flags';
3+
import MeetOurTeam from '../../components/MeetOurTeam';
24

35
const OurTeam = () => {
4-
return (
5-
<div>
6-
{/* <MeetOurTeam />
7-
<InternalTeam />
8-
<TechnicalTeam /> */}
9-
<UnderConstruction />
10-
</div>
11-
);
6+
return <div>{underConstruction ? <UnderConstruction /> : <MeetOurTeam />}</div>;
127
};
138

149
export default OurTeam;

‎styles/globals.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,7 @@
1717
}
1818
}
1919

20-
.team-tab {
21-
max-width: 200px;
22-
}
23-
2420
.team-tab:hover {
2521
background-color: #7559fc;
2622
color: white;
2723
}
28-
29-
.technical-section {
30-
background-color: #bcfbe4;
31-
}

‎utils/flags.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const underConstruction = process.env.NEXT_PUBLIC_CONSTRUCTION_FLAG === 'false';

0 commit comments

Comments
 (0)