unfinished hero section

src/components/PageSection.astro

@@ -13,9 +13,11 @@ const {
 ---
 
 <Element class:list={["page-section", { className }]} {...rest}>
-	<div class="section-inner">
+	<div class="page-section-inner">
 		<slot />
 	</div>
+
+	<slot name="outer" />
 </Element>
 
 <style>

src/layouts/BaseLayout.astro

@@ -27,7 +27,7 @@ const {
 		<meta name="generator" content={Astro.generator} />
 
 		<!-- Favicon & Page Theme -->
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
         <meta name="color-scheme" content="dark" />
         <meta name="theme-color" content="#e54643" />
 
@@ -78,14 +78,16 @@ const {
 		--accent-red-hue: 1deg;
 		--accent-yellow-hue: 47deg;
 
-		--accent-red: hsl(var(--accent-red-hue), 76%, 58%);
-		--accent-yellow: hsl(var(--accent-yellow-hue), 73%, 63%);
-
+
 		--background-primary: hsl(var(--base-hue), 12%, 16%);
 		--background-secondary: hsl(var(--base-hue), 12%, 24%);
+		--background-accent-red: hsl(var(--accent-red-hue), 76%, 58%);
+		--background-accent-yellow: hsl(var(--accent-yellow-hue), 73%, 63%);
 
 		--foreground-primary: hsl(var(--base-hue), 27%, 82%);
 		--foreground-secondary: hsl(var(--base-hue), 20%, 68%);
+		--foreground-accent-red: hsl(var(--accent-red-hue), 76%, 78%);
+		--foreground-accent-yellow: hsl(var(--accent-yellow-hue), 76%, 78%);
 
 		--font-monospace: "Iosevka", ui-monospace, Menlo, Monaco,
 			"Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",

src/pages/index.astro

@@ -4,13 +4,43 @@ import Card from "~/components/PageSection.astro";
 import PageSection from "~/components/PageSection.astro";
 ---
 
-<BaseLayout title="Welcome to Astro.">
+<BaseLayout>
 	<main>
-		<PageSection>
-			Hi
+		<PageSection id="hero">
+			<h1 class="title">
+				Open-source Rust tooling for VEX robots.
+			</h1>
+			<p class="subtext">
+				pros-rs provides opinionated bindings to the <a href="https://pros.cs.purdue.edu/" target="_blank" rel="noreferrer noopener">PROS kernel</a> and tooling for programming VEX V5 robots using the <a href="https://rust-lang.com/" target="_blank" rel="noreferrer noopener">Rust Programming Language</a>. 🦀
+			</p>
+			<div class="background-pattern" slot="outer"></div>
 		</PageSection>
 	</main>
 </BaseLayout>
 
 <style>
-</style>
+	:global(#hero) {
+		z-index: 1;
+	}
+
+	:global(#hero > .page-section-inner) {
+		padding-block: 96px;
+	}
+
+	.background-pattern {
+		position: absolute;
+		inline-size: 100%;
+		block-size: 100%;
+		inset: 0;
+		background-image: linear-gradient(hsl(228 12% 30% / 1), var(--background-secondary), transparent);
+		mask: url("/images/pattern_circuits.svg");
+		z-index: -1;
+	}
+
+	.title {
+		font-size: 7.2rem;
+		font-weight: 200;
+		font-family: var(--font-monospace);
+		margin-block-start: 0;
+	}
+</style>