center hero

src/pages/index.tsx

@@ -1,9 +1,13 @@
 import { Link } from "@tanstack/react-router";
+import { Image } from "@unpic/react";
 import Feature from "#/components/Feature.tsx";
 import Section from "#/components/Section.tsx";
 
+import examplePdf1 from "@/assets/images/examplepdf1.webp?url";
+import examplePdf2 from "@/assets/images/examplepdf2.webp?url";
+
 const Home = () => (
-	<main className="page-wrap px-4 pb-8 pt-14">
+	<main className="px-4 pb-8 pt-14 place-self-center">
 		<section
 			id="hero"
 			className="grid max-w-screen-2xl items-center gap-8 p-8 text-center md:grid-cols-2 md:text-left"
@@ -26,8 +30,15 @@ const Home = () => (
 					Get Started
 				</Link>
 			</div>
-			<div>
-				<p>example pdfs</p>
+			<div className="example-pdfs">
+				<Image src={examplePdf2} alt="Example PDF 2" width={500} height={500} />
+				<Image
+					src={examplePdf1}
+					alt="Example PDF 1"
+					width={500}
+					height={500}
+					priority={true}
+				/>
 			</div>
 		</section>
 		<Section