From 5c3ffb68cdf9ccc9a63e583d68d6f8bf19650dad Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Sun, 31 May 2026 21:14:38 +0200
Subject: [PATCH] center hero

---
 src/pages/index.tsx | 17 ++++++++++++++---
 src/styles.css      | 17 +++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a7f5bf2..e5f9ffe 100644
--- a/src/pages/index.tsx
+++ b/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
diff --git a/src/styles.css b/src/styles.css
index 89916f1..36a1959 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -76,6 +76,23 @@ body {
   }
 }
 
+.example-pdfs {
+  max-width: 450px;
+  position: relative;
+  justify-self: center;
+  transform: translate(-10%, 10%);
+  img {
+    width: 300px;
+    box-shadow: -1px 1px 62px -18px black;
+    &:nth-child(2) {
+      position: absolute;
+      top: -10%;
+      right: -20%;
+    }
+  }
+}
+
+
 /*a {*/
 /*  text-decoration-thickness: 1px;*/
 /*  text-underline-offset: 2px;*/