update front page, add taglines to events

ausspeedruns · Jan 22, 2024 · 10e405e · 10e405e
1 parent 2d66e00
commit 10e405e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git a/apps/nextjs/components/ComponentBlocks/event-page.module.scss b/apps/nextjs/components/ComponentBlocks/event-page.module.scss
@@ -1,5 +1,5 @@
-@import './colors.scss';
-@import './responsive.scss';
+@import "./colors.scss";
+@import "./responsive.scss";
 
 .header {
 	background-position: center;
@@ -9,6 +9,7 @@
 	// background-color: #024759;
 	width: 100%;
 	min-height: 25rem;
+	padding: 3rem 0;
 
 	@include breakpoint($sm-zero-only) {
 		// height: 20rem;
@@ -25,14 +26,26 @@
 	.logo {
 		width: 700px;
 		height: 150px;
-		margin-bottom: 32px;
 		position: relative;
 
 		@include breakpoint($sm-zero-only) {
 			width: 80%;
 		}
 	}
 
+	.taglines {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: $light-text;
+		margin-bottom: 32px;
+
+		h1 {
+			font-size: 3rem;
+			margin: 0;
+		}
+	}
+
 	.buttons {
 		display: grid;
 		grid-template-columns: 1fr 1fr;

diff --git a/apps/nextjs/components/ComponentBlocks/event-page.tsx b/apps/nextjs/components/ComponentBlocks/event-page.tsx
@@ -28,6 +28,11 @@ export const EventComponentRenderers: EventPageRenderers = {
 						fill
 					/>
 				</div>
+				<div className={styles.taglines}>
+					{props.taglines?.map((tagline) => (
+						<h1>{tagline}</h1>
+					))}
+				</div>
 				<div className={styles.buttons}>
 					{props.donateLink && <Button actionText="Donate" link={props.donateLink} openInNewTab />}
 
@@ -60,11 +65,7 @@ export const EventComponentRenderers: EventPageRenderers = {
 					)}
 
 					{props.buttons.map((button) => (
-						<Button
-							actionText={button.text}
-							link={button.link}
-							openInNewTab={button.openInNewTab}
-						/>
+						<Button actionText={button.text} link={button.link} openInNewTab={button.openInNewTab} />
 					))}
 				</div>
 			</div>

diff --git a/apps/nextjs/components/DualUpcomingEvent/DualUpcomingEvent.module.scss b/apps/nextjs/components/DualUpcomingEvent/DualUpcomingEvent.module.scss
@@ -52,6 +52,7 @@
 
 			p {
 				max-width: 400px;
+				text-wrap: balance;
 			}
 
 			.countdown {

diff --git a/apps/nextjs/pages/index.tsx b/apps/nextjs/pages/index.tsx
@@ -118,8 +118,7 @@ export default function Home() {
 					}}
 					eventB={{
 						event: ASDH2024,
-						tagLine: "AusSpeedruns will be at Dreamhack for a special event. More information soon",
-						dontShowEventPage: true,
+						tagLine: "We are excited to be at Dreamhack Australia!",
 					}}
 				/>
 				<LastEventBlock

diff --git a/libs/component-blocks/component-blocks/src/lib/event-page.tsx b/libs/component-blocks/component-blocks/src/lib/event-page.tsx
@@ -176,6 +176,11 @@ export const EventPageComponentBlocks = {
 					<HeaderLogo>
 						<EventLogo src={props.fields.event?.value?.data?.logo ?? ""} alt="Logo" />
 					</HeaderLogo>
+					<div style={{ display: "flex", flexDirection: "column" }}>
+						{props.fields.taglines.elements.map((tagline) => (
+							<h2>{tagline.value}</h2>
+						))}
+					</div>
 					<ButtonContainer>
 						{props.fields.donateLink.value && (
 							<Button href={props.fields.donateLink.value} target="_blank" rel="noopener noreferrer">
@@ -262,8 +267,10 @@ export const EventPageComponentBlocks = {
 						label: "Open in new tab? ",
 					}),
 				}),
+				{ label: "Extra Buttons" },
 			),
 			darkModeLogo: fields.checkbox({ label: "Dark Mode Logo?" }),
+			taglines: fields.array(fields.text({ label: "Tagline" }), { label: "Taglines" }),
 		},
 	}),
 	imageParagraph: component({