Dev/homepage (#128)

* created responsive hero section for homepage

* completed adding the about us section for the homepage

* removed black border around second img of homepage

* removed about us section for now, at request of design team

* setting up adding upcoming events to the homepage

* added events to the homepage

* got rid of the borders on the events, now it looks even better

* allowed for dark and light mode color shifting of the event cards

* Fixed spacing issue

---------

Co-authored-by: saltyypanda <esh7943@rit.edu>

next/app/HomepageContent.ts

@@ -1,3 +1,8 @@
+import { Event } from "./events/event";
+
+const defaultDescription = `This is a description of the event. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Integer ullamcorper.`
+
 interface HomepageContent {
  description: string;
  weeklyMeetingCallout: string;
@@ -16,4 +21,28 @@ export default {
  instagramLink: "https://www.instagram.com/rit_sse/",
  tiktokLink: "https://www.tiktok.com/@rit_sse",
  twitchLink: "https://www.twitch.tv/rit_sse",
-} satisfies HomepageContent;
+} satisfies HomepageContent;
+
+export const UpcomingEvents = [
+ {
+ title: "Spring Fling",
+ date: "April 13th 5:00pm",
+ location: "GOL-1400",
+ imageSrc: "spring-fling-2.png",
+ description: defaultDescription
+ },
+ {
+ title: "SSE Mentoring Review Session",
+ date: "April 22nd 6:00pm",
+ location: "GOL-1670",
+ imageSrc: "mentoring-review-session-1.png",
+ description: defaultDescription
+ },
+ {
+ title: "Micro Talks 2.0",
+ date: "April 24th 4:00pm",
+ location: "GOL-1670",
+ imageSrc: "talks-1.jpg",
+ description: defaultDescription
+ },
+] satisfies Event[];

next/app/events/EventCard.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { Event } from "./event";
+import { clsx } from "clsx"; // you will need to do 'npm install' if you haven't already, as I have added this for light and dark mode color switching
+import { useTheme } from "next-themes";
+import { Theme } from '@/types/theme';
+
+export const EventCard: React.FC<Event> = (event: Event) => {
+ const { theme } = useTheme();
+
+ return (
+ <div className={clsx("flex flex-col shadow-md rounded-3xl overflow-hidden",
+ { "bg-white": theme === Theme.Light, "bg-[#172630]": theme === Theme.Dark, },
+ )}>
+ <img src={event.imageSrc} className="w-full h-1/3" alt="" />
+ <div className="p-4">
+ <h4 className="text-primary">{event.title.slice(0, 1).toUpperCase() + event.title.slice(1)}</h4> {/* Make sure the title is captialized, but otherwise, this is just the title of the card */}
+ <h5>{event.date}</h5>
+ <h5>{event.location}</h5>
+ <p>{event.description}</p>
+ </div>
+ </div>
+ );
+}

next/app/events/event.ts

@@ -0,0 +1,7 @@
+export interface Event {
+ title: string,
+ date: string,
+ location: string,
+ imageSrc: string,
+ description: string
+}

next/app/page.tsx

@@ -4,71 +4,48 @@
 import Image from 'next/image'
 import { CTAButton } from '@/components/common/CTAButton';
 import HomepageContent from './HomepageContent';
-import { DiscordIcon, InstagramIcon, SlackIcon, TikTokIcon, TwitchIcon } from '@/components/common/Icons';
-import Link from 'next/link';
+import { UpcomingEvents } from './HomepageContent';
+import { EventCard } from './events/EventCard';
 
 export default function Home() {
- const placeholder_w = 800;
- const placeholder_h = 800;
+ return (
+ <div className='space-y-24'>
+ {/* Hero section */}
+ <div className='h-auto md:h-[55vh] my-auto flex flex-col md:flex-row items-center md:justify-evenly mt-24'>
+ <div className="flex flex-col justify-center w-auto md:w-2/5">
+ <h1 className='text-center md:text-left'>
+ Society of
+ <span className="block lg:inline"> Software Engineers </span>
+ </h1>
 
- const placeholder_img = (
- <Image
- src={`https://dummyimage.com/${placeholder_w}x${placeholder_h}`}
- alt="Placeholder"
- width={placeholder_w}
- height={placeholder_h}
- className="w-full h-auto rounded-[60px]"
- />
- )
+ <p className="mx-auto mt-4 sm:text-xl/relaxed text-center md:text-left">
+ {HomepageContent.description}
+ </p>
+ <p className='mt-4 font-bold text-center md:text-left'>
+ {HomepageContent.weeklyMeetingCallout}
+ </p>
 
- return (
- <>
- {/* Hero section */}
- <div className='my-auto flex flex-col md:flex-row items-center md:justify-evenly'>
- <div className="flex flex-col justify-center w-auto md:w-2/5">
- <h1 className='text-center md:text-left'>
- Society of
- <span className="block lg:inline"> Software Engineers </span>
- </h1>
+  <div className="mt-8 flex flex-row flex-wrap gap-4 min-[460px]:flex-row justify-center md:justify-start">
+  <CTAButton href={HomepageContent.slackLink} text="Join Slack" />
+  <CTAButton href="/about/get-involved" text="Get Involved" />
+  </div>
+  </div>
+  <div className='flex mt-12 md:mt-0 w-11/12 sm:w-[45%] sm:h-full justify-center'>
+  <img src="student-involvement-1.jpg" alt="Tech committee meeting" className="w-full h-auto rounded-[60px]" />
+  </div>
+  </div>
 
- <p className="mx-auto mt-4 sm:text-xl/relaxed text-center md:text-left">
- {HomepageContent.description}
- </p>
- <p className='mt-4 font-bold text-center md:text-left'>
- {HomepageContent.weeklyMeetingCallout}
- </p>
-
- <div className="mt-8 flex flex-row flex-wrap gap-4 min-[460px]:flex-row justify-center md:justify-start">
- <CTAButton href={HomepageContent.slackLink} text="Join Slack" />
- <CTAButton href="/about/get-involved" text="Get Involved" />
- </div>
- </div>
- <div className='flex mt-12 md:mt-0 w-11/12 sm:w-2/5 justify-center'>
- {placeholder_img}
- </div>
- </div>
- {/* About Us Section */}
- {/* <div className='flex flex-col md:flex-row items-center md:justify-evenly md:mt-28'>
- <div className='flex mt-12 md:mt-0 w-11/12 sm:w-2/5 justify-center'>
- {placeholder_img}
- </div>
- <div className="flex flex-col justify-center w-auto md:w-2/5">
- <h1 className='text-center md:text-left mt-8 md:mt-0'>
- About Us
- </h1>
-
- <p className="mx-auto mt-4 text-lg/relaxed text-center md:text-left">
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- Tess is Tech Head. Tess is Tech Head. Tess is Tech Head. Tess is Tech Head.
- </p>
+ {/* Upcoming Events */}
+ <div>
+ <h1 className='mt-5'>Upcoming Events</h1>
+ <div className='flex flex-row justify-center items-center'>
+ <div className='mt-8 grid gap-8 grid-cols-3 w-10/12'>
+ {UpcomingEvents.map((event, idx) => (
+ <EventCard key={idx} {...event} />
+ ))}
+ </div>
+ </div>
+ </div>
  </div>
- </div> */}
- </>
- );
+ );
 }

next/package.json

@@ -18,6 +18,7 @@
  "@types/react": "18.2.21",
  "@types/react-dom": "18.2.7",
  "autoprefixer": "10.4.15",
+ "clsx": "^2.1.0",
  "eslint": "8.48.0",
  "eslint-config-next": "13.4.19",
  "next": "^13.5.6",