From d71985cf09fd89e21657ed0cd5ab5c69984d67d8 Mon Sep 17 00:00:00 2001
From: Kayla Hamakawa <kaylahamakawa@MacBook-Pro.local>
Date: Tue, 19 Nov 2024 21:54:45 -0800
Subject: [PATCH] added current events section to home page

---
 src/components/Home/CurrEvents.jsx | 31 ++++++++++++++++++++
 src/pages/Home.jsx                 |  6 ++--
 src/styles/Home.css                | 47 ++++++++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Home/CurrEvents.jsx

diff --git a/src/components/Home/CurrEvents.jsx b/src/components/Home/CurrEvents.jsx
new file mode 100644
index 000000000..1ebe90ee1
--- /dev/null
+++ b/src/components/Home/CurrEvents.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import '../../styles/Events.css';
+import '../../styles/Home.css';
+import hfamimg from '../../images/hack-fam-insta.png';
+import schoolimg from '../../images/hack-school-insta.jpg';
+
+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={schoolimg} alt='HackSchool' />
+					<p className='hack-description'>{firstDescription}</p>
+				</div>
+				<div className='event-column'>
+					<h2 className='event-title'>Hack Fam</h2>
+					<img className='event-img' src={hfamimg} alt='HackFam' />
+					<p className='hack-description'>{secondDescription}</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index f78dfa5b1..f8544bc62 100644
--- a/src/pages/Home.jsx
+++ b/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';
 
 export default function Home() {
 	const Container1 = ({ children }) => (
@@ -26,11 +27,8 @@ export default function Home() {
 				<HackDescription />
 			</Container1>
 
-			{/* <Container2>
-				<h1>Fall 2024 Events</h1>
-			</Container2> */}
-
 			<Container2>
+				<CurrEvents />
 				<PhotoCarousel />
 			</Container2>
 
diff --git a/src/styles/Home.css b/src/styles/Home.css
index a884ffa2e..c74f5ba6c 100644
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@@ -147,3 +147,50 @@
 		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 {
+	flex: 1 1 45%;
+	padding: 1rem;
+	border-radius: 8px;
+}
+
+.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;
+}