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

+ HackSchool +

{firstDescription}

+
+
+

Hack Fam

+ HackFam +

{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; +}