Skip to content

Commit f7783f4

Browse files
jfmath04Spencer04Hire
jfmath04
and
Spencer04Hire
authored
DEV-509 Add About Page (#74)
* Add tailwind, fix colors in about page * Add past leadership section and fix grid formatting * Add about statement * Fix tailwind formatting issues * Prettier * Update picture urls and disable auth required on about page * Prettier fixes --------- Co-authored-by: Spencer04Hire <124114480+Spencer04Hire@users.noreply.github.com>
1 parent f4fdcbb commit f7783f4

8 files changed

Lines changed: 1380 additions & 688 deletions

File tree

‎app/Content.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default function Content({
1414
children: ReactNode;
1515
}): React.JSX.Element {
1616
const tabs = [
17+
{ title: 'About', href: '/about' },
1718
{ title: 'Send Mail', href: '/app' },
1819
{ title: 'Scheduled Emails', href: '/scheduled' },
1920
{ title: 'Current Digest', href: '/digest?type=current' },

‎app/about/page.tsx‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
'use client';
2+
3+
import React from 'react';
4+
5+
import { Heading, majorScale, Pane, Text, useTheme } from 'evergreen-ui';
6+
import Image from 'next/image';
7+
8+
// --- Helper Components & Data ---
9+
interface member {
10+
name: string;
11+
role: string;
12+
year: string;
13+
imgSrc: string;
14+
socials: {
15+
linkedin: string;
16+
};
17+
}
18+
19+
// Icon for social media links
20+
const SocialIcon = ({
21+
href,
22+
children,
23+
}: {
24+
href: string;
25+
children: React.ReactNode;
26+
}) => (
27+
<a
28+
href={href}
29+
target='_blank'
30+
rel='noopener noreferrer'
31+
className='text-gray-400 transition-colors duration-300'
32+
>
33+
{children}
34+
</a>
35+
);
36+
37+
// SVG components for icons
38+
const LinkedinIcon = () => (
39+
<svg
40+
xmlns='http://www.w3.org/2000/svg'
41+
width='24'
42+
height='24'
43+
viewBox='0 0 24 24'
44+
fill='none'
45+
stroke='currentColor'
46+
strokeWidth='2'
47+
strokeLinecap='round'
48+
strokeLinejoin='round'
49+
>
50+
<path d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z' />
51+
<rect x='2' y='9' width='4' height='12' />
52+
<circle cx='4' cy='4' r='2' />
53+
</svg>
54+
);
55+
56+
// Team data organized for easier management
57+
const teamLeads: member[] = [
58+
{
59+
name: 'Jenny Fan',
60+
role: 'Team Lead',
61+
year: '2025 - 2026',
62+
imgSrc: 'https://i.imgur.com/zDqurNZ.jpeg',
63+
socials: {
64+
linkedin: 'https://www.linkedin.com/in/jennyfan04/',
65+
},
66+
},
67+
];
68+
69+
const teamMembers: member[] = [
70+
// Add your name, role, and image here!
71+
];
72+
73+
const pastLeadership: member[] = [
74+
{
75+
name: 'Spencer Doyle',
76+
role: 'Team Lead',
77+
year: '2024 - 2025',
78+
imgSrc: 'https://i.imgur.com/kUbzXL9.png',
79+
socials: {
80+
linkedin: 'https://www.linkedin.com/in/spencer-doyle3/',
81+
},
82+
},
83+
];
84+
85+
/**
86+
* Modern "Meet the Team" page component.
87+
* Features a clean, professional design with interactive cards.
88+
*/
89+
export function App() {
90+
const theme = useTheme();
91+
return (
92+
<div className='min-h-screen font-sans text-slate-800'>
93+
<style
94+
dangerouslySetInnerHTML={{
95+
__html: `.group:hover .group-hover-border { border-color: ${theme.colors.blue300}; }`,
96+
}}
97+
/>
98+
<div className='container mx-auto px-4 sm:px-6 lg:px-8 py-16'>
99+
{/* Header */}
100+
<Pane textAlign='center' marginBottom={majorScale(6)}>
101+
<Heading
102+
size={900}
103+
fontSize='3rem'
104+
fontWeight={700}
105+
marginBottom={majorScale(4)}
106+
>
107+
Meet the{' '}
108+
<Text
109+
size={900}
110+
fontSize='3rem'
111+
color={theme.colors.blue500}
112+
>
113+
HoagieMail
114+
</Text>{' '}
115+
Team
116+
</Heading>
117+
<Text
118+
size={500}
119+
display='block'
120+
maxWidth={900}
121+
marginX='auto'
122+
>
123+
HoagieMail is Princeton&apos;s go-to platform for
124+
campus-wide email communication. Built by students, for
125+
students, it serves as the primary channel through which
126+
clubs, organizations, and student groups reach the
127+
broader Princeton community from event announcements and
128+
recruitment blasts to club updates and campus
129+
initiatives. <br /> <br />
130+
HoagieMail has become an indispensable part of campus
131+
life, ensuring that students stay connected to the
132+
communities and opportunities that matter most to them.
133+
</Text>
134+
</Pane>
135+
136+
{/* Team Leadership Section */}
137+
<section className='mb-16'>
138+
<h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
139+
Team Leadership
140+
</h2>
141+
<div
142+
className={`grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto ${teamLeads.length === 1 ? 'justify-items-center' : ''}`}
143+
>
144+
{teamLeads.map((lead) => (
145+
<div
146+
key={lead.name}
147+
className={`bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out w-full ${teamLeads.length === 1 ? 'lg:col-span-2 max-w-lg' : ''}`}
148+
>
149+
<div className='p-8 flex flex-col sm:flex-row items-center'>
150+
<Pane
151+
flexShrink={0}
152+
marginBottom={majorScale(3)}
153+
marginRight={majorScale(4)}
154+
width={128}
155+
height={128}
156+
borderRadius='50%'
157+
border={`4px solid ${theme.colors.blue300}`}
158+
boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
159+
overflow='hidden'
160+
>
161+
<Image
162+
src={lead.imgSrc}
163+
alt={lead.name}
164+
height={128}
165+
width={128}
166+
style={{ objectFit: 'cover' }}
167+
/>
168+
</Pane>
169+
<div className='text-center sm:text-left'>
170+
<h3 className='text-2xl font-bold text-slate-900'>
171+
{lead.name}
172+
</h3>
173+
<p
174+
className='text-md font-semibold mb-2'
175+
style={{
176+
color: theme.colors.blue500,
177+
}}
178+
>
179+
{lead.role}
180+
</p>
181+
<div className='flex justify-center sm:justify-start space-x-4'>
182+
<SocialIcon
183+
href={lead.socials.linkedin}
184+
>
185+
<LinkedinIcon />
186+
</SocialIcon>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
))}
192+
</div>
193+
</section>
194+
195+
{/* Team Members Section */}
196+
<section className='mb-16'>
197+
<h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
198+
Contributors
199+
</h2>
200+
<div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8'>
201+
{teamMembers.map((member) => (
202+
<div
203+
key={member.name}
204+
className='bg-white rounded-xl shadow-md p-6 text-center transform hover:-translate-y-2 transition-transform duration-300 ease-in-out group'
205+
>
206+
<Image
207+
src={member.imgSrc}
208+
alt={member.name}
209+
className='w-24 h-24 rounded-full mx-auto mb-4 border-4 border-slate-200 group-hover-border transition-colors duration-300'
210+
height={128}
211+
width={128}
212+
style={{ objectFit: 'cover' }}
213+
/>
214+
<h4 className='font-bold text-slate-800 text-lg'>
215+
{member.name}
216+
</h4>
217+
<p
218+
className='!text-sm'
219+
style={{ color: theme.colors.blue500 }}
220+
>
221+
{member.role}
222+
</p>
223+
<div className='flex mx-auto w-min mt-2 justify-center sm:justify-start space-x-4'>
224+
<SocialIcon href={member.socials.linkedin}>
225+
<LinkedinIcon />
226+
</SocialIcon>
227+
</div>
228+
</div>
229+
))}
230+
</div>
231+
</section>
232+
233+
{/* Past Leadership Section */}
234+
<section className='mb-16'>
235+
<h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
236+
Past Leadership
237+
</h2>
238+
<div
239+
className={`grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto ${pastLeadership.length === 1 ? 'justify-items-center' : ''}`}
240+
>
241+
{pastLeadership.map((lead) => (
242+
<div
243+
key={lead.name}
244+
className={`bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out w-full ${pastLeadership.length === 1 ? 'lg:col-span-2 max-w-lg' : ''}`}
245+
>
246+
<div className='p-8 flex flex-col sm:flex-row items-center'>
247+
<Pane
248+
flexShrink={0}
249+
marginBottom={majorScale(3)}
250+
marginRight={majorScale(4)}
251+
width={128}
252+
height={128}
253+
borderRadius='50%'
254+
border={`4px solid ${theme.colors.blue300}`}
255+
boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
256+
overflow='hidden'
257+
>
258+
<Image
259+
src={lead.imgSrc}
260+
alt={lead.name}
261+
height={128}
262+
width={128}
263+
style={{ objectFit: 'cover' }}
264+
/>
265+
</Pane>
266+
<div className='text-center sm:text-left'>
267+
<h3 className='text-2xl font-bold text-slate-900'>
268+
{lead.name}
269+
</h3>
270+
<p
271+
className='text-md font-semibold mb-2'
272+
style={{
273+
color: theme.colors.blue500,
274+
}}
275+
>
276+
{lead.year}
277+
</p>
278+
<div className='flex justify-center sm:justify-start space-x-4'>
279+
<SocialIcon
280+
href={lead.socials.linkedin}
281+
>
282+
<LinkedinIcon />
283+
</SocialIcon>
284+
</div>
285+
</div>
286+
</div>
287+
</div>
288+
))}
289+
</div>
290+
</section>
291+
</div>
292+
</div>
293+
);
294+
}
295+
296+
export default App;

‎app/mail.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import 'tailwindcss/theme' layer(theme);
2+
@import 'tailwindcss/utilities' layer(utilities);
3+
14
body {
25
background: #ffe3c6;
36
}

‎next.config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ const nextConfig: NextConfig = {
1515
protocol: 'https',
1616
hostname: 'github.com',
1717
},
18+
{
19+
protocol: 'https',
20+
hostname: 'i.imgur.com',
21+
},
1822
],
1923
},
2024
};

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@
2323
},
2424
"dependencies": {
2525
"@auth0/nextjs-auth0": "^4.13.0",
26+
"@tailwindcss/postcss": "^4.2.0",
2627
"dompurify": "^3.2.7",
2728
"evergreen-ui": "^7.1.9",
2829
"katex": "^0.16.25",
2930
"next": "^16.0.7",
3031
"next-pwa": "^5.6.0",
32+
"postcss": "^8.5.6",
3133
"quill": "^1.3.7",
3234
"quill-image-resize-module": "^3.0.0",
3335
"quill-image-resize-module-react": "^3.0.0",
@@ -37,7 +39,8 @@
3739
"screenfull": "^6.0.2",
3840
"suneditor": "^2.47.0",
3941
"suneditor-react": "^3.6.1",
40-
"swr": "^2.3.6"
42+
"swr": "^2.3.6",
43+
"tailwindcss": "^4.2.0"
4144
},
4245
"devDependencies": {
4346
"@next/eslint-plugin-next": "16.0.1",

‎postcss.config.mjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const config = {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
};
6+
export default config;

‎proxy.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ export async function proxy(request: NextRequest) {
1111
}
1212

1313
// Allow access to public routes without requiring a session
14-
if (request.nextUrl.pathname === '/') {
14+
if (
15+
request.nextUrl.pathname === '/' ||
16+
request.nextUrl.pathname === '/about'
17+
) {
1518
return authRes;
1619
}
1720

0 commit comments

Comments
 (0)