feat: restyle the homepage with a hero section

README.md

@@ -15,7 +15,7 @@ The local site is available at `http://localhost:3000/` by default.
 
 ## Writing documentation
 
-Pages live under `src/pages/` as Markdown files. The homepage is `src/pages/index.md`. Each page starts with frontmatter for its title and metadata; the rest of the file is Markdown.
+Pages live under `src/pages/`. The homepage is `src/pages/index.tsx`, with its prose content in `src/pages/_home-content.md`. Markdown pages start with frontmatter for their title and metadata; the rest of the file is Markdown.
 
 Fenced `bash` and `rust` code blocks are highlighted during the build. Docusaurus also supports MDX components when a page needs behavior beyond Markdown.
 

src/css/custom.css

@@ -26,6 +26,76 @@
 	--ifm-code-font-size: 95%;
 }
 
+/* Homepage hero */
+.home-hero {
+	padding: 4.5rem 0;
+	text-align: center;
+	background: linear-gradient(180deg, #eef3f8 0%, #ffffff 100%);
+	border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.home-hero__title {
+	margin: 0 0 1rem;
+	font-size: 3rem;
+	letter-spacing: -0.02em;
+}
+
+.home-hero__title small {
+	color: var(--ifm-color-primary);
+	font-size: 0.85rem;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	vertical-align: middle;
+}
+
+.home-hero__tagline {
+	max-width: 620px;
+	margin: 0 auto 1.75rem;
+	color: var(--ifm-color-emphasis-700);
+	font-size: 1.15rem;
+}
+
+.home-hero__actions {
+	display: flex;
+	gap: 0.75rem;
+	justify-content: center;
+}
+
+/* Homepage feature cards */
+.home-features {
+	margin: 3rem auto 2rem;
+}
+
+.home-features .col {
+	display: flex;
+	margin-bottom: 1rem;
+}
+
+.home-feature {
+	width: 100%;
+	padding: 1.25rem;
+	border: 1px solid var(--ifm-color-emphasis-200);
+	border-radius: 8px;
+}
+
+.home-feature h3 {
+	margin-top: 0;
+	font-size: 1.05rem;
+}
+
+.home-feature p {
+	margin-bottom: 0;
+	font-size: 0.9rem;
+}
+
+/* Homepage prose */
+.home-content {
+	max-width: 760px;
+	margin: 0 auto;
+	padding-bottom: 3rem;
+}
+
 /* Incubating badge next to the project name */
 .navbar__title::after {
 	margin-left: 0.5rem;

src/pages/index.md → src/pages/_home-content.md

@@ -1,15 +1,11 @@
----
-# Licensed to the Apache Software Foundation (ASF) under one or more contributor
-# license agreements. See the NOTICE file distributed with this work for
-# additional information regarding copyright ownership. The ASF licenses this
-# file to you under the Apache License, Version 2.0 (the "License"); you may not
-# use this file except in compliance with the License. You may obtain a copy of
-# the License at https://www.apache.org/licenses/LICENSE-2.0.
-title: Welcome to Apache Asyncband (Incubating)
-description: Apache Asyncband is a runtime-agnostic library providing synchronization and coordination tools for asynchronous Rust programming.
----
-
-# Welcome to Apache Asyncband (Incubating)
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one or more contributor
+ license agreements. See the NOTICE file distributed with this work for
+ additional information regarding copyright ownership. The ASF licenses this
+ file to you under the Apache License, Version 2.0 (the "License"); you may not
+ use this file except in compliance with the License. You may obtain a copy of
+ the License at https://www.apache.org/licenses/LICENSE-2.0.
+-->
 
 ## Overview
 

src/pages/index.tsx

@@ -0,0 +1,76 @@
+// Licensed to the Apache Software Foundation (ASF) under one or more contributor
+// license agreements. See the NOTICE file distributed with this work for
+// additional information regarding copyright ownership. The ASF licenses this
+// file to you under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at https://www.apache.org/licenses/LICENSE-2.0.
+
+import MDXContent from '@theme/MDXContent';
+import Layout from '@theme/Layout';
+import type { ReactNode } from 'react';
+import HomeContent from './_home-content.md';
+
+export default function Home(): ReactNode {
+	return (
+		<Layout description="Apache Asyncband is a runtime-agnostic library providing synchronization and coordination tools for asynchronous Rust programming.">
+			<header className="home-hero">
+				<div className="container">
+					<h1 className="home-hero__title">
+						Apache Asyncband <small>(Incubating)</small>
+					</h1>
+					<p className="home-hero__tagline">
+						Runtime-agnostic synchronization and coordination tools for asynchronous Rust
+						programming.
+					</p>
+					<div className="home-hero__actions">
+						<a className="button button--primary button--lg" href="#getting-started">
+							Get started
+						</a>
+						<a
+							className="button button--secondary button--lg"
+							href="https://github.com/apache/asyncband"
+						>
+							View on GitHub
+						</a>
+					</div>
+				</div>
+			</header>
+			<main className="container">
+				<section className="row home-features">
+					<div className="col col--4">
+						<div className="home-feature">
+							<h3>Runtime-agnostic</h3>
+							<p>
+								Built on standard futures and wakers. Poll Asyncband futures with Tokio, async-std,
+								smol, a custom executor, or any other standards-based runtime.
+							</p>
+						</div>
+					</div>
+					<div className="col col--4">
+						<div className="home-feature">
+							<h3>Composable building blocks</h3>
+							<p>
+								Synchronization, initialization, task coordination, channels, resource reuse, and
+								workload control without choosing an executor for the application.
+							</p>
+						</div>
+					</div>
+					<div className="col col--4">
+						<div className="home-feature">
+							<h3>Async first</h3>
+							<p>
+								Primitives are designed for async use; synchronous code drives them through a
+								blocking boundary adapter instead of a second family of APIs.
+							</p>
+						</div>
+					</div>
+				</section>
+				<article className="home-content">
+					<MDXContent>
+						<HomeContent />
+					</MDXContent>
+				</article>
+			</main>
+		</Layout>
+	);
+}

tsconfig.json

@@ -1,4 +1,7 @@
 {
 	"extends": "@docusaurus/tsconfig",
+	"compilerOptions": {
+		"types": ["node", "@docusaurus/module-type-aliases"]
+	},
 	"exclude": ["node_modules", "build"]
 }