Merge pull request #54 from the-collab-lab/dtp-tailwind

Issue #19: Replace Plain CSS with Tailwind CSS on Landing and Team Pages; Add Mentors to Team Page

src/components/Loading.jsx

@@ -1,12 +1,19 @@
+import logo from '../assets/logo.png';
+
 export function Loading() {
 	return (
-		<div style={{ textAlign: 'center', padding: '20px' }}>
-			<img
-				src={`${import.meta.env.BASE_URL}logo.png`}
-				alt="Loading..."
-				style={{ width: '150px' }}
-			/>
-			<h2>Please hold on while we prepare your experience.</h2>
+		<div className="flex flex-col items-center justify-center min-h-screen p-4 bg-bgPrimary">
+			<div className="flex flex-col items-center animate-fadeIn">
+				<img
+					src={logo}
+					alt="CollabShop Logo, a collaboration platform for grocery shopping."
+					className="w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 mb-4 animate-pulse"
+				/>
+				<h2 className="text-txtPrimary text-sm sm:text-base md:text-lg font-semibold mb-2">
+					Please hold on while we prepare your experience.
+				</h2>
+				<div className="w-10 h-10 border-t-4 border-blue-300 rounded-full animate-spin"></div>
+			</div>
 		</div>
 	);
 }

src/views/LandingPage.jsx

@@ -1,27 +1,31 @@
-import './LandingPage.css';
 import logo from '../assets/logo.png';
 
 export function LandingPage() {
 	return (
-		<div className="landing-container">
-			<img src={logo} alt="Logo" className="logo" />
-			<h1 className="main-heading">
+		<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary p-6">
+			<img
+				src={logo}
+				alt="CollabShop Logo, a collaboration platform for grocery shopping."
+				className="w-45 h-auto mb-6"
+			/>
+			<h1 className="text-txtPrimary text-2xl md:text-4xl font-bold text-center mb-4">
 				<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
 				tool that embodies the spirit of teamwork and collaboration. Created by
 				early-career developers from{' '}
 				<a
 					href="https://the-collab-lab.codes/"
 					target="_blank"
 					rel="noopener noreferrer"
-					className="collab-lab-link"
+					className="text-txtPrimary font-bold underline hover:text-[#1A759F] transition duration-300"
 				>
 					<strong>The Collab Lab</strong>
 				</a>
-				, it allows you to effortlessly share and work together on lists,
-				bringing people closer, even when planning something as simple as a
-				grocery run.
+				, our smart shopping list app learns your buying habits, reminds you of
+				what you might need for your next store run, and allows you to
+				effortlessly share and collaborate on lists. With CollabShop, planning
+				your grocery trips becomes a seamless and enjoyable experience!
 			</h1>
-			<p className="subheading">
+			<p className="text-txtPrimary font-bold text-lg md:text-xl text-center mb-6">
 				Ready to start your journey? Click the sign-in button below to begin
 				planning your grocery runs with CollabShop today.
 			</p>

src/views/Team.jsx

@@ -1,8 +1,13 @@
 import { FaGithub, FaLinkedin, FaGlobe } from 'react-icons/fa';
+import { Loading } from '../components/Loading';
 import doribelAvatar from '../assets/avatars/doribelAvatar.jpg';
 import nicholasAvatar from '../assets/avatars/nicholasAvatar.png';
 import shuvekshaAvatar from '../assets/avatars/shuvekshaAvatar.jpg';
 import stacyAvatar from '../assets/avatars/stacyAvatar.jpg';
+import ejAvatar from '../assets/avatars/ejAvatar.png';
+import jennyAvatar from '../assets/avatars/jennyAvatar.jpg';
+import meganAvatar from '../assets/avatars/meganAvatar.jpg';
+import { useEffect, useState } from 'react';
 
 const developers = [
 	{
@@ -34,110 +39,144 @@ const developers = [
 	},
 ];
 
+const mentors = [
+	{
+		name: 'EJ Mason',
+		photo: ejAvatar,
+		github: 'https://github.com/mxmason',
+		linkedin: 'https://www.linkedin.com/in/mxmason/',
+		portfolio: 'http://www.ejmason.com',
+	},
+	{
+		name: 'Jenny Takahara',
+		photo: jennyAvatar,
+		github: 'https://github.com/jtkabenni',
+		linkedin: 'https://www.linkedin.com/in/ehime-takahara/',
+		portfolio: 'https://www.jennytakahara.com/',
+	},
+	{
+		name: 'Megan Sullivan',
+		photo: meganAvatar,
+		github: 'https://github.com/meganesu',
+		linkedin: 'https://www.linkedin.com/in/meganesu/',
+		portfolio: 'https://meganesulli.com/',
+	},
+];
+
 export function Team() {
+	/* This will be removed once the Logo ticket is finalized to ensure the UI is correct. */
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setIsLoading(false);
+		}, 3000);
+
+		return () => clearTimeout(timer);
+	}, []);
+
+	if (isLoading) {
+		return <Loading />;
+	}
+
 	return (
-		<div
-			style={{
-				padding: '20px',
-				textAlign: 'center',
-				backgroundColor: '#f9f9f9',
-			}}
-		>
-			<h1
-				style={{
-					marginBottom: '20px',
-					color: '#333',
-					fontSize: '2em',
-				}}
-			>
+		<div className="bg-bgPrimary p-10 text-center">
+			<h1 className="mb-5 text-txtPrimary text-4xl font-bold">
 				Meet the Team Behind CollabShop
 			</h1>
-			<p
-				style={{
-					marginBottom: '40px',
-					color: '#555',
-					fontSize: '1em',
-					lineHeight: '1.6',
-				}}
-			>
+			<p className="mb-10 text-txtPrimary text-lg leading-relaxed">
 				We are a passionate group of developers, united by our love for learning
 				and collaboration. Our goal is to create an experience that feels
 				friendly, inclusive, and helpful for all users. Let&apos;s connect and
 				grow together!
 			</p>
-			<div
-				className="team-container"
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'center',
-					gap: '20px',
-				}}
-			>
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
 				{developers.map((dev, index) => (
 					<div
-						className="developer-card"
 						key={index}
-						style={{
-							backgroundColor: '#fff',
-							borderRadius: '8px',
-							padding: '20px',
-							boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
-							width: '250px',
-							transition: 'transform 0.3s, box-shadow 0.3s',
-						}}
-						onMouseEnter={(e) => {
-							e.currentTarget.style.transform = 'translateY(-5px)';
-							e.currentTarget.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
-						}}
-						onMouseLeave={(e) => {
-							e.currentTarget.style.transform = 'translateY(0)';
-							e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
-						}}
+						className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
 					>
 						<img
 							src={dev.photo}
 							alt={dev.name ? `${dev.name}'s photo` : 'Developer photo'}
-							style={{
-								width: '100px',
-								height: 'auto',
-								borderRadius: '5%',
-								boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-								marginBottom: '15px',
-							}}
+							className="w-35 h-35 object-cover object-top mx-auto mb-4"
 						/>
-						<h3 style={{ color: '#555', marginBottom: '10px' }}>{dev.name}</h3>
-						<div
-							className="developer-links"
-							style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}
-						>
-							<a
-								href={dev.github}
-								target="_blank"
-								rel="noopener noreferrer"
-								aria-label={`${dev.name} GitHub`}
-								style={{ color: '#333' }}
-							>
-								<FaGithub size={24} />
+						<h3 className="text-[#B5E48C] text-xl font-semibold mb-2">
+							{dev.name}
+						</h3>
+						<div className="flex justify-center gap-4">
+							<a href={dev.github} target="_blank" rel="noopener noreferrer">
+								<FaGithub
+									className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+									size={24}
+								/>
+							</a>
+							<a href={dev.linkedin} target="_blank" rel="noopener noreferrer">
+								<FaLinkedin
+									className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+									size={24}
+								/>
+							</a>
+							{dev.portfolio && (
+								<a
+									href={dev.portfolio}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<FaGlobe
+										className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+										size={24}
+									/>
+								</a>
+							)}
+						</div>
+					</div>
+				))}
+			</div>
+			<h2 className="mt-10 mb-5 text-[#1A759F] text-3xl font-extrabold text-center tracking-wider">
+				Mentors
+			</h2>
+			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
+				{mentors.map((mentor, index) => (
+					<div
+						key={index}
+						className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
+					>
+						<img
+							src={mentor.photo}
+							alt={mentor.name ? `${mentor.name}'s photo` : 'Mentor photo'}
+							className="w-28 h-28 object-cover rounded-full mx-auto mb-4"
+						/>
+						<h3 className="text-[#B5E48C] text-xl font-semibold mb-2">
+							{mentor.name}
+						</h3>
+						<div className="flex justify-center gap-4">
+							<a href={mentor.github} target="_blank" rel="noopener noreferrer">
+								<FaGithub
+									className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+									size={24}
+								/>
 							</a>
 							<a
-								href={dev.linkedin}
+								href={mentor.linkedin}
 								target="_blank"
 								rel="noopener noreferrer"
-								aria-label={`${dev.name} LinkedIn`}
-								style={{ color: '#0077b5' }}
 							>
-								<FaLinkedin size={24} />
+								<FaLinkedin
+									className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+									size={24}
+								/>
 							</a>
-							{dev.portfolio && (
+							{mentor.portfolio && (
 								<a
-									href={dev.portfolio}
+									href={mentor.portfolio}
 									target="_blank"
 									rel="noopener noreferrer"
-									aria-label={`${dev.name} Portfolio`}
-									style={{ color: '#000' }}
 								>
-									<FaGlobe size={24} />
+									<FaGlobe
+										className="text-[#0e324e] hover:text-[#52b788] transition-colors"
+										size={24}
+									/>
 								</a>
 							)}
 						</div>