+
+
diff --git a/pages/index.mdx b/pages/index.mdx
deleted file mode 100644
index 7a6200c7..00000000
--- a/pages/index.mdx
+++ /dev/null
@@ -1 +0,0 @@
-Visit the [playground](/playground)
diff --git a/pages/index.module.css b/pages/index.module.css
new file mode 100644
index 00000000..a68520e4
--- /dev/null
+++ b/pages/index.module.css
@@ -0,0 +1,201 @@
+.page {
+ padding-bottom: calc(60rem / 16);
+}
+
+.intro {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+
+ height: 65vh;
+ min-height: calc(420rem / 16);
+ max-height: calc(580rem / 16);
+}
+
+.introTop {
+ flex-grow: 1;
+}
+
+.introContent {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.introBottom {
+ flex-grow: 1;
+ min-height: calc(132rem / 16);
+}
+
+.clubTitleWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+}
+
+.clubTitleWrapper img {
+ height: calc(70rem / 16);
+}
+
+.clubTitle {
+ font-family: "Futura", "sans-serif";
+ font-size: calc(33rem / 16);
+ text-align: center;
+ color: var(--primary-heading);
+}
+
+.clubDescription {
+ margin-bottom: calc(50rem / 16);
+ text-align: center;
+ color: var(--primary-heading);
+}
+
+.clubDescription br {
+ display: none;
+}
+
+.codey {
+ position: absolute;
+ bottom: calc(-124rem / 16);
+ right: calc(20rem / 16);
+ z-index: -1;
+}
+
+.cardsBackground {
+ margin: 0;
+ width: 100%;
+
+ background-color: var(--secondary-background);
+}
+
+.cards {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+ gap: calc(100rem / 16);
+
+ padding: calc(42rem / 16) calc(100rem / 16);
+}
+
+.cardsHeading {
+ margin: 1rem 0 calc(8rem / 16);
+ font-size: calc(24rem / 16);
+ font-weight: 700;
+}
+
+.cardsDescription {
+ margin: calc(8rem / 16) 0 1rem;
+}
+
+.cardsDescription br {
+ display: none;
+}
+
+.cardsDividingLine {
+ display: none;
+}
+
+.eventCards {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 1rem;
+}
+
+/* On a smaller desktop screen, make the events/new flow vertically */
+@media only screen and (max-width: calc(1100rem / 16)) {
+ .cards {
+ flex-direction: column;
+ align-items: center;
+ gap: calc(32rem / 16);
+ }
+
+ .cards > section {
+ max-width: calc(540rem / 16);
+ }
+}
+
+@media only screen and (max-width: calc(768rem / 16)) {
+ .page {
+ padding-bottom: calc(30rem / 16);
+ }
+
+ .intro {
+ height: calc(330rem / 16);
+ min-height: unset;
+ max-height: unset;
+ }
+
+ .introContent {
+ padding: 1rem;
+ max-width: calc(260rem / 16);
+ }
+
+ .introBottom {
+ min-height: calc(100rem / 16);
+ }
+
+ .clubTitleWrapper img {
+ display: none;
+ }
+
+ .clubTitle {
+ margin: calc(8rem / 16) 0;
+ font-size: calc(20rem / 16);
+ }
+
+ .clubDescription {
+ margin: calc(8rem / 16) 0 calc(26rem / 16);
+ color: var(--primary-heading);
+ }
+
+ .clubDescription br {
+ display: inline;
+ }
+
+ .codey {
+ bottom: calc(-46rem / 16);
+ right: auto;
+ z-index: -1;
+ height: calc(120rem / 16);
+ }
+
+ .cards {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ gap: calc(8rem / 16);
+
+ padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
+ }
+
+ .cards > section {
+ max-width: unset;
+ }
+
+ .cardsHeading {
+ margin: 0;
+ font-size: calc(18rem / 16);
+ font-weight: 600;
+ }
+
+ .cardsDescription br {
+ display: inline;
+ }
+
+ .cardsDividingLine {
+ display: block;
+ margin: 1rem 0 calc(34rem / 16);
+ height: calc(1rem / 16);
+ border: none;
+ background-color: var(--primary-heading);
+ }
+}
diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 00000000..a64dd9ab
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { Image } from "../components/Image";
+import { SocialLinks } from "../components/SocialLinks";
+import { EventDescriptionCard } from "../components/EventDescriptionCard";
+import { NewsCard } from "../components/NewsCard";
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
+import { DefaultLayout } from "../components/DefaultLayout";
+import styles from "./index.module.css";
+
+// temporary event and news imports
+import OOTBReact, {
+ metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
+import AltTab, {
+ metadata as altTabEventMetadata,
+} from "../content/playground/alt-tab.event.mdx";
+import UnavailableContent, {
+ metadata as unavailableMetadata,
+} from "../content/playground/unavailable.news.mdx";
+
+export default function Home() {
+ const events = [
+ { Content: OOTBReact, metadata: OOTBReactEventMetadata },
+ { Content: AltTab, metadata: altTabEventMetadata },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+ {/* TODO: add links to past events and past news */}
+
+ Upcoming Events
+ See past events here
+
+
+ {events.map(({ metadata }) => (
+
+ ))}
+
+
+
+ News
+
+ Updates from our execs!
+ See past news here
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
+ return
{props.children}
;
+};
diff --git a/pages/playground.mdx b/pages/playground.mdx
index af488e24..20b77a19 100644
--- a/pages/playground.mdx
+++ b/pages/playground.mdx
@@ -8,9 +8,11 @@ import {
TeamMemberCardDemo,
OrganizedContentDemo,
ButtonDemo,
+ TechTalkDemo,
+ MiniTechTalkDemo,
} from "../components/playground";
-import { ConnectWithUs } from "../components/ConnectWithUs"
-import { EmailSignup } from "../components/EmailSignup"
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
import { TeamMemberCard } from "../components/TeamMemberCard";
@@ -93,6 +95,21 @@ The `
` component is used on various pages such as Meet the Team! and Our
---
+## `
`
+
+The `
` component is used on the Resources page to display information
+about Tech Talks.
+
+
+
+---
+
+## `
`
+
+The `
` component is used on the Resources page to display condensed
+information about Tech Talks.
+
+
## `
`
The `
` component is used on various pages such as the About page and the Get Involved Page!
diff --git a/pages/themer.module.css b/pages/themer.module.css
new file mode 100644
index 00000000..53ed9e6d
--- /dev/null
+++ b/pages/themer.module.css
@@ -0,0 +1,38 @@
+.page {
+ margin-bottom: calc(60rem / 16);
+}
+
+.controls {
+ display: flex;
+ justify-content: space-between;
+}
+
+.controls > *:first-child {
+ margin-right: calc(20rem / 16);
+}
+
+.palette {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(calc(150rem / 16), 1fr));
+ row-gap: calc(20rem / 16);
+ column-gap: calc(40rem / 16);
+}
+
+.palette > * {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.colorSelector {
+ height: calc(75rem / 16);
+}
+
+.colorReset {
+ margin-bottom: calc(10rem / 16);
+ transition-duration: unset;
+}
+
+.colorName {
+ text-align: center;
+}
diff --git a/pages/themer.tsx b/pages/themer.tsx
new file mode 100644
index 00000000..dd243d62
--- /dev/null
+++ b/pages/themer.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { useThemeContext, emptyPalette } from "components/Theme";
+import { Input } from "components/Input";
+import { Button } from "components/Button";
+
+import styles from "./themer.module.css";
+
+export default function Themer() {
+ const context = useThemeContext();
+ const palette = context?.theme.palette ?? emptyPalette;
+
+ return (
+
+ Themer
+
+
+ );
+}
diff --git a/public/fonts/futura-bold.woff b/public/fonts/futura-bold.woff
new file mode 100644
index 00000000..99f00c60
Binary files /dev/null and b/public/fonts/futura-bold.woff differ
diff --git a/public/fonts/futura-bold.woff2 b/public/fonts/futura-bold.woff2
new file mode 100644
index 00000000..05dbc943
Binary files /dev/null and b/public/fonts/futura-bold.woff2 differ
diff --git a/public/images/home/codey_sitting.svg b/public/images/home/codey_sitting.svg
new file mode 100644
index 00000000..bd48f8ff
--- /dev/null
+++ b/public/images/home/codey_sitting.svg
@@ -0,0 +1,27 @@
+
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 00000000..7190a60b
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,3 @@
+{
+ "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}
diff --git a/tsconfig.json b/tsconfig.json
index 7bf34623..755e32fa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,7 @@
},
"include": [
"next-env.d.ts",
+ "types.d.ts",
"**/*.ts",
"**/*.tsx"
],
diff --git a/types.d.ts b/types.d.ts
new file mode 100644
index 00000000..e79f50d9
--- /dev/null
+++ b/types.d.ts
@@ -0,0 +1,84 @@
+declare module "*.event.mdx" {
+ import { ComponentType } from "react";
+
+ interface EventMetadata {
+ name: string;
+ short: string;
+ date: Date;
+ online: boolean;
+ location: string;
+ poster?: string;
+ registerLink?: string;
+ }
+
+ const ReactComponent: ComponentType;
+
+ export const metadata: EventMetadata;
+ export default ReactComponent;
+}
+
+declare module "*.news.mdx" {
+ import { ComponentType } from "react";
+
+ interface NewsMetadata {
+ author: string;
+ date: Date;
+ }
+
+ const ReactComponent: ComponentType;
+
+ export const metadata: NewsMetadata;
+ export default ReactComponent;
+}
+
+declare module "*.team-member.mdx" {
+ import { ComponentType } from "react";
+
+ interface TeamMemberMetadata {
+ name: string;
+ role: string;
+ image?: string;
+ }
+
+ const ReactComponent: ComponentType;
+
+ export const metadata: TeamMemberMetadata;
+ export default ReactComponent;
+}
+
+declare module "*.section.mdx" {
+ import { ComponentType } from "react";
+
+ interface SectionMetadata {
+ title: string;
+ id: string;
+ }
+
+ const ReactComponent: ComponentType;
+
+ export const metadata: SectionMetadata;
+ export default ReactComponent;
+}
+
+declare module "*.talk.mdx" {
+ import { ComponentType } from "react";
+
+ interface TalkMetadata {
+ name: string;
+ short: string;
+ poster?: string;
+ }
+
+ const ReactComponent: ComponentType;
+
+ export const metadata: TalkMetadata;
+ export default ReactComponent;
+}
+
+declare module "*.mdx" {
+ import { ComponentType } from "react";
+
+ const ReactComponent: ComponentType;
+
+ export default ReactComponent;
+}