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

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;*/