add button to hero

src/pages/index.tsx

@@ -9,15 +9,20 @@ const Home = () => (
 			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 className="text-3xl font-bold text-base-content md:text-4xl">
+					Convert your Chess PGN
 				</h1>
-				<h2>
+				<h1 className="text-3xl font-bold text-base-content md:text-4xl">
+					into a <span className="text-(--accent)">Publishable PDF.</span>
+				</h1>
+				<h2 className="mb-8 mt-4 text-(--base-content)">
 					Upload and convert your games into a book format, along with variation
 					and annotations.
 				</h2>
-				<Link to="/chessboard" className="">
+				<Link
+					to="/chessboard"
+					className="rounded-3xl text-xl font-bold btn btn-primary"
+				>
 					Get Started
 				</Link>
 			</div>

src/styles.css

@@ -62,6 +62,20 @@ body {
   }
 }
 
+.btn {
+  padding: 1rem 4rem;
+}
+
+.btn-primary {
+  background-color: var(--accent);
+  color: var(--bg-base);
+  transition: filter 0.3s ease;
+
+  &:hover {
+    filter: brightness(0.85);
+  }
+}
+
 /*a {*/
 /*  text-decoration-thickness: 1px;*/
 /*  text-underline-offset: 2px;*/