Merge pull request #6 from HoagieClub/preview

 Merge to Main 10/26/25

Author: Spencer04Hire

.github/pull_request_template.md

@@ -0,0 +1,5 @@
+**References**
+- Linear:
+
+**Proposed Changes**
+- _Add your proposed changes here_

.github/workflows/lint.yml

@@ -0,0 +1,30 @@
+name: Lint
+on: pull_request
+jobs:
+    run-linters:
+        name: Run linters
+        runs-on: ubuntu-latest
+        defaults:
+            run:
+                working-directory: ./frontend
+
+        steps:
+            - name: Check out Git repository
+              uses: actions/checkout@v5
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v5
+              with:
+                  node-version: 22
+
+            # ESLint and Prettier must be in `package.json`
+            - name: Install Node.js dependencies
+              run: yarn install --frozen-lockfile
+
+            - name: Run linters
+              uses: wearerequired/lint-action@v2.3.0
+              with:
+                  eslint: true
+                  eslint_dir: ./frontend
+                  prettier: true
+                  prettier_dir: ./frontend

README.md

@@ -1,31 +1,31 @@
-# Hoagie Template
+# HoagieSparks
 
-Hoagie Club's app template repository.
+Repository for HoagieSparks.
 
 ## Getting Started
 
 ### Prerequisites
 
-Before you begin, ensure you have [Bun](https://bun.sh/) installed. You can install Bun via [Homebrew](https://brew.sh/) using the following command:
+Before you begin, ensure you have [Yarn](https://yarnpkg.com/) installed. You can install Yarn via [Homebrew](https://brew.sh/) using the following command:
 
 ```bash
-brew install bun
+brew install yarn
 ```
 
 ### Installation
 
 To install the necessary dependencies, run:
 
 ```bash
-bun install
+yarn
 ```
 
 ### Running the App
 
 Once the dependencies are installed, you can start the development server by running:
 
 ```bash
-bun run dev
+yarn dev
 ```
 
 The app will now be running locally, and you can view it in your browser at localhost:3000.

frontend/.node-version

@@ -1 +1,2 @@
-.next
+.next
+next-env.d.ts

frontend/.prettierignore

@@ -2,10 +2,20 @@
 
 import React from 'react';
 
+import { Heading, majorScale, Pane, Text, useTheme } from 'evergreen-ui';
 import Image from 'next/image';
 
 // --- Helper Components & Data ---
 
+interface member {
+	name: string;
+	role: string;
+	imgSrc: string;
+	socials: {
+		linkedin: string;
+	};
+}
+
 // Icon for social media links
 const SocialIcon = ({ href, children }: { href: string; children: React.ReactNode }) => (
 	<a
@@ -38,16 +48,23 @@ const LinkedinIcon = () => (
 );
 
 // Team data organized for easier management
-const teamLeads = [
+const teamLeads: member[] = [
 	{
-		name: 'Hoagie.io',
+		name: 'Spencer Doyle',
 		role: 'Team Lead',
-		bio: 'Hoagie is an experienced software engineer with a passion for building campus apps for Princeton students.',
-		imgSrc: 'https://github.com/HoagieClub/club/raw/refs/heads/source/src/assets/hoagie-hi.svg',
+		imgSrc: 'https://media.licdn.com/dms/image/v2/D4E03AQFgKlbpu5PV9Q/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1710630696392?e=1762992000&v=beta&t=0BKZ_8Nv9L8OgZbItbsoHfuUL1xlXTTOMDpTzuU5a_w',
 		socials: {
-			linkedin: 'https://www.linkedin.com',
+			linkedin: 'https://www.linkedin.com/in/spencer-doyle3/',
+		},
+	},
+	{
+		name: 'Issac Li',
+		role: 'Team Lead',
+		imgSrc: 'https://media.licdn.com/dms/image/v2/D5603AQEDK7V3q61jAA/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1690434142044?e=1762992000&v=beta&t=Xf393UgOpXgB_WpSMMNOUZazRfOsF7JMdKaHBvxNqIY',
+		socials: {
+			linkedin: 'https://www.linkedin.com/in/issactli/',
 		},
-	}
+	},
 ];
 
 const teamMembers = [
@@ -67,47 +84,67 @@ const teamMembers = [
  * Features a clean, professional design with interactive cards.
  */
 export function App() {
+	const theme = useTheme();
 	return (
 		<div className='min-h-screen font-sans text-slate-800'>
 			<div className='container mx-auto px-4 sm:px-6 lg:px-8 py-16'>
 				{/* Header */}
-				<header className='text-center mb-12'>
-					<h1 className='text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight'>
-						Meet the <span className='text-emerald-600'>HoagieMeal</span> Team
-					</h1>
-					<p className='mt-4 text-lg text-slate-600 max-w-2xl mx-auto'>
-						We&apos;re a passionate group of foodies, developers, and designers
-						dedicated to making your dining experience easier and more enjoyable.
-					</p>
-				</header>
+				<Pane textAlign='center' marginBottom={majorScale(6)}>
+					<Heading
+						size={900}
+						fontSize='3rem'
+						fontWeight={700}
+						marginBottom={majorScale(4)}
+					>
+						Meet the{' '}
+						<Text size={900} fontSize='3rem' color={theme.colors.blue500}>
+							HoagieSparks
+						</Text>{' '}
+						Team
+					</Heading>
+					<Text size={500} display='block' maxWidth={672} marginX='auto'>
+						We&apos;re a passionate group of developers and designers dedicated to
+						improving your Princeton academic experience.
+					</Text>
+				</Pane>
 
 				{/* Team Leadership Section */}
 				<section className='mb-16'>
 					<h2 className='text-3xl font-bold text-slate-900 mb-12 text-center'>
 						Team Leadership
 					</h2>
-					<div className='grid grid-cols-1 lg:grid-cols-1 gap-10 max-w-lg mx-auto'>
+					<div className='grid grid-cols-1 lg:grid-cols-2 gap-10 max-w-5xl mx-auto'>
 						{teamLeads.map((lead) => (
 							<div
 								key={lead.name}
 								className='bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out'
 							>
 								<div className='p-8 flex flex-col sm:flex-row items-center'>
-									<Image
-										src={lead.imgSrc}
-										alt={lead.name}
-										className='w-32 h-32 rounded-full mb-6 sm:mb-0 sm:mr-8 flex-shrink-0 border-4 border-emerald-200 shadow-md'
-										height={0}
-										width={0}
-									/>
+									<Pane
+										flexShrink={0}
+										marginBottom={majorScale(3)}
+										marginRight={majorScale(4)}
+										width={128}
+										height={128}
+										borderRadius='50%'
+										border={`4px solid ${theme.colors.blue200}`}
+										boxShadow='0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
+										overflow='hidden'
+									>
+										<Image
+											src={lead.imgSrc}
+											alt={lead.name}
+											height={128}
+											width={128}
+										/>
+									</Pane>
 									<div className='text-center sm:text-left'>
 										<h3 className='text-2xl font-bold text-slate-900'>
 											{lead.name}
 										</h3>
 										<p className='text-md font-semibold text-emerald-600 mb-2'>
 											{lead.role}
 										</p>
-										<p className='text-slate-600 mb-4'>{lead.bio}</p>
 										<div className='flex justify-center sm:justify-start space-x-4'>
 											<SocialIcon href={lead.socials.linkedin}>
 												<LinkedinIcon />

frontend/app/about/page.tsx

@@ -12,10 +12,9 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 
-@import "tailwindcss";
+@import 'tailwindcss';
 @config "../tailwind.config.ts";
 
-
 @layer base {
 	:root {
 		--background: 0 0% 100%;

frontend/app/globals.css

@@ -48,6 +48,7 @@ async function Content({ children }: ContentProps): Promise<JSX.Element> {
 	const user = session?.user;
 
 	const tabs = [
+		{ title: 'About', href: '/about' },
 		{ title: 'Feature 1', href: '/feature1' },
 		{ title: 'Feature 2', href: '/feature2' },
 		{ title: 'Feature 3', href: '/feature3' },

frontend/app/layout.tsx

@@ -22,14 +22,14 @@ import {
 	ArrowRightIcon,
 	ArrowLeftIcon,
 	Button,
+	useTheme,
 } from 'evergreen-ui';
 import Link from 'next/link';
 
 import AuthButton from '@/lib/hoagie-ui/AuthButton';
-import { hoagieTemplate } from '@/lib/hoagie-ui/Theme/themes';
 
 export function Home() {
-	const theme = hoagieTemplate;
+	const theme = useTheme();
 	const { user, error, isLoading } = useUser();
 
 	let Profile;
@@ -44,7 +44,7 @@ export function Home() {
 					<Button
 						height={56}
 						width={majorScale(35)}
-						backgroundColor={theme.colors.teal100}
+						backgroundColor={theme.colors.blue100}
 						marginBottom={20}
 						iconBefore={ArrowRightIcon}
 					>