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 (
+
+
Current Events
+
+
+
Hack School
+
+
{firstDescription}
+
+
+
Hack Fam
+
+
{secondDescription}
+
+
+
+ );
+}
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() {
- {/*
- Fall 2024 Events
- */}
-
+
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;
+}