Computer Science Club of the University of Waterloo's website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
www-new/pages/index.tsx

94 lines
3.3 KiB

import React from "react";
import { ConnectWithUs } from "@/components/ConnectWithUs";
import { DefaultLayout } from "@/components/DefaultLayout";
import { EmailSignup } from "@/components/EmailSignup";
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
import { Image } from "@/components/Image";
import { NewsCard } from "@/components/NewsCard";
import { SocialLinks } from "@/components/SocialLinks";
import AltTab, {
metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import OOTBReact, {
metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import UnavailableContent, {
metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";
import styles from "./index.module.css";
// temporary event and news imports
export default function Home() {
const events = [
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
{ Content: AltTab, metadata: altTabEventMetadata },
];
return (
<>
<DefaultLayout>
<header className={styles.intro}>
<div className={styles.introTop} />
<div className={styles.introContent}>
<div className={styles.clubTitleWrapper}>
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
<h1 className={styles.clubTitle}>Computer Science Club</h1>
</div>
<p className={styles.clubDescription}>
University of Waterloo&apos;s <br />
student computing community
</p>
<SocialLinks color="gradient" size="big" />
</div>
<div className={styles.introBottom} />
<Image
className={styles.codey}
src="/images/home/codey_sitting.svg"
alt="CSC mascot Codey, a blue shiba with circular glasses"
/>
</header>
</DefaultLayout>
<div className={styles.cardsBackground}>
<div className={styles.cards}>
{/* TODO: add links to past events and past news */}
<section className={styles.events}>
<h1 className={styles.cardsHeading}>Upcoming Events</h1>
<p className={styles.cardsDescription}>See past events here</p>
<hr className={styles.cardsDividingLine} />
<div className={styles.eventCards}>
{events.map(({ metadata }) => (
<EventDescriptionCard
{...metadata}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
</section>
<section className={styles.news}>
<h1 className={styles.cardsHeading}>News</h1>
<p className={styles.cardsDescription}>
Updates from our execs! <br />
See past news here
</p>
<hr className={styles.cardsDividingLine} />
<NewsCard {...unavailableMetadata}>
<UnavailableContent />
</NewsCard>
</section>
</div>
</div>
<DefaultLayout>
<ConnectWithUs />
<EmailSignup />
</DefaultLayout>
</>
);
}
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
return <div className={styles.page}>{props.children}</div>;
};