added current events section to home page (#493)

* added current events section to home page

* changed css formatting for media queries

---------

Co-authored-by: Kayla Hamakawa <kaylahamakawa@MacBook-Pro.local>

Author: kaylahama

src/components/Home/CurrEvents.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../../styles/Home.css';
+import img1 from '../../images/hack-school-insta.jpg';
+import img2 from '../../images/hack-fam-insta.png';
+
+const firstDescription =
+	'Join us in our beginner-friendly web development workshop series, where you build a website using tools such as HTML, CSS, and ReactJS!';
+
+const secondDescription =
+	'Get placed in fam groups to meet people in the Hack community through smaller group socials!';
+
+export default function CurrEvents() {
+	return (
+		<div>
+			<h1 className='section-title'>Current Events</h1>
+			<div className='events-container'>
+				<div className='event-column'>
+					<h2 className='event-title'>Hack School</h2>
+					<img className='event-img' src={img1} alt='HackSchool' />
+					<p className='event-description'>{firstDescription}</p>
+				</div>
+				<div className='event-column'>
+					<h2 className='event-title'>Hack Fam</h2>
+					<img className='event-img' src={img2} alt='HackFam' />
+					<p className='event-description'>{secondDescription}</p>
+				</div>
+			</div>
+		</div>
+	);
+}

src/pages/Home.jsx

@@ -4,6 +4,7 @@ import HackDescription from '../components/Home/HackDescription';
 import PhotoCarousel from '../components/Home/PhotoCarousel';
 import FAQSection from '../components/Home/FAQSection';
 import Announcement from '../components/Home/Announcement';
+import CurrEvents from '../components/Home/CurrEvents';
 import useTitle from '../components/General/useTitle';
 
 export default function Home() {
@@ -29,11 +30,8 @@ export default function Home() {
 				<HackDescription />
 			</Container1>
 
-			{/* <Container2>
-				<h1>Fall 2024 Events</h1>
-			</Container2> */}
-
 			<Container2>
+				<CurrEvents />
 				<PhotoCarousel />
 			</Container2>
 

src/styles/Home.css

@@ -147,3 +147,90 @@
 		max-height: 8rem;
 	}
 }
+
+/* ========== CurrEvents.jsx ========== */
+.section-title {
+	font-weight: bold;
+	margin: 2rem 0;
+	font-size: 2.5rem;
+	margin-bottom: 0.2rem;
+}
+
+.events-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin-bottom: 2rem;
+}
+
+.event-column {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	flex: 1 1 45%;
+	padding: 1rem;
+	border-radius: 8px;
+	max-width: 500px;
+	margin: 0 auto;
+}
+
+.event-img {
+	width: 100%;
+	max-width: 25rem;
+	aspect-ratio: 1 / 1;
+	object-fit: cover;
+	border-radius: 1rem;
+	box-shadow: 0 0 0.7rem 0.3rem #e6e6e6;
+}
+
+.event-description {
+	width: 100%;
+	max-width: 25rem;
+	text-align: justify;
+	flex-basis: 80%;
+	flex-grow: 1;
+	line-height: 1.8rem;
+}
+
+.event-title {
+	text-align: center;
+	font-size: 40px;
+	font-weight: 600;
+	background-image: linear-gradient(
+		to right,
+		#c960ff,
+		#ea43d4,
+		#f499da,
+		#e16db9,
+		#c960ff
+	);
+	color: transparent;
+	background-clip: text;
+	-webkit-background-clip: text;
+	background-size: 200% auto;
+	-webkit-text-fill-color: transparent;
+	background-position: 0% center;
+	transition: background-position 2s ease;
+}
+
+.event-title:hover {
+	background-position: 100% center;
+	transition: background-position 2s ease;
+}
+
+@media (max-width: 750px) {
+	.events-container {
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+}
+
+@media (max-width: 450px) {
+	.event-img {
+		width: 100%;
+		height: auto;
+	}
+	.event-title {
+		font-size: 2rem;
+	}
+}