add feature component and make routes thin

src/components/Feature.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+interface IProps {
+	title: string;
+	children?: ReactNode;
+}
+
+const Feature = ({ title, children }: IProps) => (
+	<div className="mb-auto">
+		<h6 className="text-(--base-content) text-2xl font-bold">{title}</h6>
+		<p className="text-(--neutral-content) font-medium" data-testid="text">
+			{children}
+		</p>
+	</div>
+);
+
+export default Feature;

src/pages/chessboard.tsx

@@ -0,0 +1,9 @@
+import Section from "#/components/Section.tsx";
+
+const Chessboard = () => (
+	<Section title="Convert PGN to PDF">
+		<p>section content</p>
+	</Section>
+);
+
+export default Chessboard;

src/pages/contact.tsx

@@ -0,0 +1,3 @@
+const Contact = () => <div>Hello "/contact"!</div>;
+
+export default Contact;

src/pages/index.tsx

@@ -0,0 +1,57 @@
+import { Link } from "@tanstack/react-router";
+import Feature from "#/components/Feature.tsx";
+import Section from "#/components/Section.tsx";
+
+const Home = () => (
+	<main className="page-wrap px-4 pb-8 pt-14">
+		<section
+			id="hero"
+			className="grid max-w-screen-2xl items-center gap-8 p-8 text-center md:grid-cols-2 md:text-left"
+		>
+			<div>
+				<h1>Convert your Chess PGN</h1>
+				<h1>
+					into a <span>Publishable PDF.</span>
+				</h1>
+				<h2>
+					Upload and convert your games into a book format, along with variation
+					and annotations.
+				</h2>
+				<Link to="/chessboard" className="">
+					Get Started
+				</Link>
+			</div>
+			<div>
+				<p>example pdfs</p>
+			</div>
+		</section>
+		<Section
+			title="A Unique Chess Publication Service"
+			smallTitle="FEATURES"
+			description="Convert your chess PGN files into a publishable PDF, complete with diagrams of chosen positions."
+		>
+			<Feature title="Fast">
+				Quick PDF generation using a custom TeX Live server.
+			</Feature>
+
+			<Feature title="Easy">
+				Upload a PGN of your game, and choose the diagrams you want in your PDF.
+				Annotations are added automatically.
+			</Feature>
+
+			<Feature title="Reliable">
+				Dedicated servers ensure that downtime is kept to a minimum.
+			</Feature>
+		</Section>
+
+		<Section
+			title="Your Questions Answered"
+			smallTitle="FAQs"
+			description="Below we answer some of the most common questions we get regarding this service."
+		>
+			<p>section content</p>
+		</Section>
+	</main>
+);
+
+export default Home;

src/routes/chessboard.tsx

@@ -1,9 +1,10 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import Chessboard from "#/pages/chessboard.tsx";
 
-export const Route = createFileRoute('/chessboard')({
+export const Route = createFileRoute("/chessboard")({
-  component: RouteComponent,
+	component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/chessboard"!</div>
+	return <Chessboard />;
 }

src/routes/contact.tsx

@@ -1,9 +1,10 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
+import Contact from "#/pages/contact.tsx";
 
-export const Route = createFileRoute('/contact')({
+export const Route = createFileRoute("/contact")({
-  component: RouteComponent,
+	component: RouteComponent,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/contact"!</div>
+	return <Contact />;
 }

src/routes/index.tsx

@@ -1,26 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Section from "#/components/Section.tsx";
+import Home from "#/pages";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-	return (
+	return <Home />;
-		<main className="page-wrap px-4 pb-8 pt-14">
-			<Section
-				title="A Unique Chess Publication Service"
-				smallTitle="FEATURES"
-				description="Convert your chess PGN files into a publishable PDF, complete with diagrams of chosen positions."
-			>
-				<p>section content</p>
-			</Section>
-
-			<Section
-				title="Your Questions Answered"
-				smallTitle="FAQs"
-				description="Below we answer some of the most common questions we get regarding this service."
-			>
-				<p>section content</p>
-			</Section>
-		</main>
-	);
 }