Add text banner component and use it for elect on homepage

advertisements/BannerText.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+import Link from "next/link";
+import styles from "../styles/Advertisement.module.css";
+
+const BannerText = (props: { text: string; url: string; }) => {
+
+	return (
+		<Link
+			href={props.url}
+		>
+			<div className={styles.banner_text_parent}>
+				<h1>{props.text}</h1>
+			</div>
+		</Link>
+	);
+};
+
+export default BannerText;

pages/index.tsx

@@ -4,6 +4,7 @@ import { get_articles_by_query } from "../db";
 import { ReceivedArticle } from "../ts_types/db_types";
 
 import MixedArticleDisplay from "../components/MixedArticleDisplay";
+import BannerText from "../advertisements/BannerText";
 interface Props {
 	articles: [ReceivedArticle];
 }
@@ -24,6 +25,7 @@ async function fetch_addtional_articles(skip?: number, max?: number) {
 function Home(props: Props) {
 	return (
 		<main id={styles.main}>
+			<BannerText text="Read The Spectator's special issue covering all levels of the 2024 election!" url="/volume/115/issue/0" />
 			<MixedArticleDisplay
 				articles={props.articles}
 				display_department={true}

styles/Advertisement.module.css

@@ -12,3 +12,26 @@
 	position: relative !important;
 	height: unset !important;
 }
+
+.banner_text_parent {
+	padding: 1rem;
+	margin-bottom: 1rem;
+	width: 100%;
+
+	background-color: var(--accent);
+	color: var(--primary-immutable);
+	border-radius: 5px;
+
+	text-align: center;
+	text-decoration: underline;
+}
+
+@media screen and (max-width: 1000px) {
+	.banner_text_parent {
+		padding-inline: 0.5rem;
+	}
+
+	.banner_text_parent h1 {
+		font-size: 1.5rem;
+	}
+}