add button to hero

mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "24"

package.json

@@ -26,10 +26,10 @@
     "@tanstack/router-plugin": "^1.132.0",
     "@unpic/react": "^1.0.2",
     "lichess-pgn-viewer": "^2.4.5",
-    "lucide-react": "^1.3.0",
     "nitro": "npm:nitro-nightly@latest",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.6.0",
     "tailwindcss": "^4.1.18",
     "zod": "^4.4.3"
   },

pnpm-lock.yaml

@@ -41,9 +41,6 @@ importers:
       lichess-pgn-viewer:
         specifier: ^2.4.5
         version: 2.4.5
-      lucide-react:
-        specifier: ^1.3.0
-        version: 1.3.0(react@19.2.6)
       nitro:
         specifier: npm:nitro-nightly@latest
         version: nitro-nightly@3.0.1-20260529-064703-255b254f(chokidar@5.0.0)(jiti@2.7.0)(lru-cache@11.5.1)(vite@8.0.14(@types/node@22.19.19)(jiti@2.7.0))
@@ -53,6 +50,9 @@ importers:
       react-dom:
         specifier: ^19.2.0
         version: 19.2.6(react@19.2.6)
+      react-icons:
+        specifier: ^5.6.0
+        version: 5.6.0(react@19.2.6)
       tailwindcss:
         specifier: ^4.1.18
         version: 4.3.0
@@ -1714,11 +1714,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@1.3.0:
-    resolution: {integrity: sha512-aKUU4jKpXe26Y3xmF3DGg+NXHteRCVT96r/+Jp7wziqvmFr0/x8ReRsES0wHgTvW7OLxiHvFLN+YeyDnK6h0dQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -1855,6 +1850,11 @@ packages:
     peerDependencies:
       react: ^19.2.6
 
+  react-icons@5.6.0:
+    resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
+    peerDependencies:
+      react: '*'
+
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
@@ -3663,10 +3663,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@1.3.0(react@19.2.6):
-    dependencies:
-      react: 19.2.6
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -3837,6 +3833,10 @@ snapshots:
       react: 19.2.6
       scheduler: 0.27.0
 
+  react-icons@5.6.0(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+
   react-is@17.0.2: {}
 
   react@19.2.6: {}

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/components/Footer.tsx

@@ -1,6 +1,8 @@
 import { Link } from "@tanstack/react-router";
 import { Image } from "@unpic/react";
 
+import { LuGithub, LuMail } from "react-icons/lu";
+
 import CoffeeWidget from "#/components/CoffeeWidget.tsx";
 import footerLogo from "@/assets/images/footerLogo.svg?url";
 
@@ -23,12 +25,22 @@ export default function Footer() {
 					</p>
 				</div>
 				<div className="ml-auto flex gap-2">
-					<Link to="/" target="_blank" rel="noopener noreferrer">
-						Github
+					<Link
+						to="/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
+					>
+						<LuGithub />
 					</Link>
 
-					<Link to="/" target="_blank" rel="noopener noreferrer">
-						Mail
+					<Link
+						to="/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-2xl hover:text-(--neutral-content) transition-colors duration-300 ease-in-out"
+					>
+						<LuMail />
 					</Link>
 				</div>
 				<CoffeeWidget width={20} height={50} />

src/components/Section.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+interface IProps {
+	title: string;
+	smallTitle?: string;
+	description?: string;
+	children: ReactNode;
+}
+
+const Section = ({ title, smallTitle, description, children }: IProps) => {
+	const words = title.trim().split(" ");
+	const lastWord = words.pop();
+	const mainTitle = words.join(" ");
+
+	return (
+		<section className="mx-auto mt-8 grid max-w-5xl place-items-center gap-4 p-8 text-center md:grid-cols-3 md:text-left text-(--accent)">
+			<h3 className="md:col-span-3 mb-4 text-center text-lg font-bold tracking-wider text-primary">
+				{smallTitle}
+			</h3>
+			<h4 className="md:col-span-3 mb-4 text-center text-4xl font-extrabold text-(--neutral-content) md:text-5xl">
+				{mainTitle} <span className="text-(--accent)">{lastWord}</span>
+			</h4>
+			<p className="md:col-span-3 mb-8 w-1/2 text-center font-semibold text-(--neutral-content) ">
+				{description}
+			</p>
+			{children}
+		</section>
+	);
+};
+
+export default Section;

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,62 @@
+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 className="text-3xl font-bold text-base-content md:text-4xl">
+					Convert your Chess PGN
+				</h1>
+				<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="rounded-3xl text-xl font-bold btn btn-primary"
+				>
+					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,
-})
+});
 
 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,
-})
+});
 
 function RouteComponent() {
-  return <div>Hello "/contact"!</div>
+	return <Contact />;
 }

src/routes/index.tsx

@@ -1,87 +1,8 @@
 import { createFileRoute } from "@tanstack/react-router";
+import Home from "#/pages";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-	return (
-		<main className="page-wrap px-4 pb-8 pt-14">
-			{/*<section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">*/}
-			{/*  <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />*/}
-			{/*  <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />*/}
-			{/*  <p className="island-kicker mb-3">TanStack Start Base Template</p>*/}
-			{/*  <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">*/}
-			{/*    Start simple, ship quickly.*/}
-			{/*  </h1>*/}
-			{/*  <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">*/}
-			{/*    This base starter intentionally keeps things light: two routes, clean*/}
-			{/*    structure, and the essentials you need to build from scratch.*/}
-			{/*  </p>*/}
-			{/*  <div className="flex flex-wrap gap-3">*/}
-			{/*    <a*/}
-			{/*      href="/about"*/}
-			{/*      className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"*/}
-			{/*    >*/}
-			{/*      About This Starter*/}
-			{/*    </a>*/}
-			{/*    <a*/}
-			{/*      href="https://tanstack.com/router"*/}
-			{/*      target="_blank"*/}
-			{/*      rel="noopener noreferrer"*/}
-			{/*      className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"*/}
-			{/*    >*/}
-			{/*      Router Guide*/}
-			{/*    </a>*/}
-			{/*  </div>*/}
-			{/*</section>*/}
-
-			{/*<section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">*/}
-			{/*  {[*/}
-			{/*    [*/}
-			{/*      'Type-Safe Routing',*/}
-			{/*      'Routes and links stay in sync across every page.',*/}
-			{/*    ],*/}
-			{/*    [*/}
-			{/*      'Server Functions',*/}
-			{/*      'Call server code from your UI without creating API boilerplate.',*/}
-			{/*    ],*/}
-			{/*    [*/}
-			{/*      'Streaming by Default',*/}
-			{/*      'Ship progressively rendered responses for faster experiences.',*/}
-			{/*    ],*/}
-			{/*    [*/}
-			{/*      'Tailwind Native',*/}
-			{/*      'Design quickly with utility-first styling and reusable tokens.',*/}
-			{/*    ],*/}
-			{/*  ].map(([title, desc], index) => (*/}
-			{/*    <article*/}
-			{/*      key={title}*/}
-			{/*      className="island-shell feature-card rise-in rounded-2xl p-5"*/}
-			{/*      style={{ animationDelay: `${index * 90 + 80}ms` }}*/}
-			{/*    >*/}
-			{/*      <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">*/}
-			{/*        {title}*/}
-			{/*      </h2>*/}
-			{/*      <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>*/}
-			{/*    </article>*/}
-			{/*  ))}*/}
-			{/*</section>*/}
-
-			{/*<section className="island-shell mt-8 rounded-2xl p-6">*/}
-			{/*  <p className="island-kicker mb-2">Quick Start</p>*/}
-			{/*  <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">*/}
-			{/*    <li>*/}
-			{/*      Edit <code>src/routes/index.tsx</code> to customize the home page.*/}
-			{/*    </li>*/}
-			{/*    <li>*/}
-			{/*      Update <code>src/components/Header.tsx</code> and{' '}*/}
-			{/*      <code>src/components/Footer.tsx</code> for brand links.*/}
-			{/*    </li>*/}
-			{/*    <li>*/}
-			{/*      Add routes in <code>src/routes</code> and tweak visual tokens in{' '}*/}
-			{/*      <code>src/styles.css</code>.*/}
-			{/*    </li>*/}
-			{/*  </ul>*/}
-			{/*</section>*/}
-		</main>
-	);
+	return <Home />;
 }

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