style file input and chess board page

src/assets/images/lichess-logo.svg

@@ -0,0 +1,7 @@
+<svg
+    viewBox="0 0 50 50"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
+  </svg>

src/components/AccordionItem.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+interface IProps {
+	children: ReactNode;
+	title: string;
+	id: string;
+}
+
+const AccordionItem = ({ title, id, children }: IProps) => (
+	<div className="hero__accordion-item">
+		<details className="hero__accordion-details" name="linked">
+			<summary
+				className="hero__accordion-item__summary"
+				aria-describedby={title}
+			>
+				<span className="hero__accordion-item__title-container">
+					<span className="hero__accordion-item__title">{title}</span>
+				</span>
+			</summary>
+		</details>
+
+		<div className="hero__accordion-item__content">
+			<p
+				className="hero__accordion-item__content__inner"
+				role="definition"
+				id={id}
+			>
+				{children}
+			</p>
+		</div>
+	</div>
+);
+
+export default AccordionItem;

src/components/LichessButton.tsx

@@ -0,0 +1,27 @@
+interface IProps {
+	onClickHandler: () => void;
+}
+
+const LichessButton = ({ onClickHandler }: IProps) => {
+	return (
+		<button
+			className="text-(--accent) border rounded-xl px-6 py-3 cursor-pointer flex items-center gap-2 p-2 hover:bg-(--accent) hover:text-(--header-bg) transition-colors duration-300 ease-in-out"
+			onClick={onClickHandler}
+			type="button"
+		>
+			<div className="w-6 h-6">
+				<svg
+					viewBox="0 0 50 50"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+				>
+					<path d="M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z" />
+				</svg>
+			</div>
+
+			<p>Log into Lichess.org</p>
+		</button>
+	);
+};
+
+export default LichessButton;

src/pages/Chessboard.container.tsx

@@ -0,0 +1,7 @@
+import Chessboard from "#/pages/Chessboard.tsx";
+
+const ChessboardContainer = () => {
+	return <Chessboard />;
+};
+
+export default ChessboardContainer;

src/pages/Chessboard.tsx

@@ -0,0 +1,13 @@
+import LichessButton from "#/components/LichessButton.tsx";
+import Section from "#/components/Section.tsx";
+
+const Chessboard = () => (
+	<main className="px-4 pb-8 place-self-center min-h-[calc(100vh-226px)]">
+		<Section title="Convert PGN to PDF">
+			<LichessButton /> or{" "}
+			<input type="file" id="file-input" className="file-input max-w-xs" />
+		</Section>
+	</main>
+);
+
+export default Chessboard;

src/pages/chessboard.tsx

@@ -1,9 +0,0 @@
-import Section from "#/components/Section.tsx";
-
-const Chessboard = () => (
-	<Section title="Convert PGN to PDF">
-		<p>section content</p>
-	</Section>
-);
-
-export default Chessboard;

src/pages/index.tsx

@@ -1,9 +1,13 @@
 import { Link } from "@tanstack/react-router";
+import { Image } from "@unpic/react";
+import AccordionItem from "#/components/AccordionItem.tsx";
 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>
+			<div className="example-pdfs">
-				<p>example pdfs</p>
+				<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
@@ -54,7 +65,30 @@ const Home = () => (
 			smallTitle="FAQs"
 			description="Below we answer some of the most common questions we get regarding this service."
 		>
-			<p>section content</p>
+			<div className="hero__accordion-container">
+				<AccordionItem title="Is this service free?" id="accordion-1">
+					Yes. There are no current plans to charge for this service. If in the
+					future there is a payment plan, it will come with a generous free
+					tier.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Will you be adding more features?"
+					id="accordion-2"
+				>
+					We have a lot more features to implement in the near future. If you
+					have a feature that you would like to see implemented, please feel
+					free to send us a message via our contact form.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Do you hold any copyright on the produced materials?"
+					id="accordion-3"
+				>
+					No. We will never implement any terms whereby we have any interest in
+					the materials created with this service.
+				</AccordionItem>
+			</div>
 		</Section>
 	</main>
 );

src/routes/chessboard.tsx

@@ -1,10 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Chessboard from "#/pages/chessboard.tsx";
+import ChessboardContainer from "#/pages/Chessboard.container.tsx";
 
 export const Route = createFileRoute("/chessboard")({
 	component: RouteComponent,
 });
 
 function RouteComponent() {
-	return <Chessboard />;
+	return <ChessboardContainer />;
 }

src/routes/contact.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-import Contact from "#/pages/contact.tsx";
+import Contact from "#/pages/Contact.tsx";
 
 export const Route = createFileRoute("/contact")({
 	component: RouteComponent,

src/styles.css

@@ -1,4 +1,7 @@
 @import "tailwindcss";
+@import "./styles/_accordion.css";
+@import "./styles/_file-input.css";
+
 @plugin "@tailwindcss/typography";
 
 /* inter-latin-wght-normal */
@@ -76,31 +79,21 @@ body {
   }
 }
 
-/*a {*/
+.example-pdfs {
-/*  text-decoration-thickness: 1px;*/
+  max-width: 450px;
-/*  text-underline-offset: 2px;*/
+  position: relative;
-/*}*/
+  justify-self: center;
-
+  transform: translate(-10%, 10%);
-/*a:hover {*/
+  img {
-/*  color: #246f76;*/
+    width: 300px;
-/*}*/
+    box-shadow: -1px 1px 62px -18px black;
-
+    &:nth-child(2) {
-/*.page-wrap {*/
+      position: absolute;
-/*  width: min(1080px, calc(100% - 2rem));*/
+      top: -10%;
-/*  margin-inline: auto;*/
+      right: -20%;
-/*}*/
+    }
-
+  }
-/*button,*/
+}
-/*a {*/
-/*  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,*/
-/*    transform 180ms ease;*/
-/*}*/
-
-/*@media (max-width: 640px) {*/
-/*  .nav-link::after {*/
-/*    bottom: -4px;*/
-/*  }*/
-/*}*/
 
 .rise-in {
   animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;

src/styles/_accordion.css

@@ -0,0 +1,73 @@
+.hero__accordion-container {
+	grid-column: 1 / -1;
+	max-width: 600px;
+	padding: 1rem;
+}
+
+.hero__accordion-item {
+	overflow: clip;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+	cursor: pointer;
+	padding: 1rem 0;
+}
+
+.hero__accordion-item:not(:last-child) {
+	border-bottom: 1px solid var(--neutral-content);
+}
+
+.hero__accordion-details[open] + .hero__accordion-item__content {
+	grid-template-rows: 1fr;
+	padding: 10px;
+}
+
+.hero__accordion-details[open] .hero__accordion-item__title-container:after {
+	transform: rotate(270deg);
+}
+
+.hero__accordion-item__summary {
+	display: block;
+
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.hero__accordion-item__title-container {
+	display: flex;
+	justify-content: space-between;
+
+	&:after {
+		content: "\276F";
+		color: var(--base-content);
+		margin-right: 1rem;
+		transform: rotate(90deg);
+		transition: transform 0.3s ease;
+	}
+}
+
+.hero__accordion-item__title {
+	color: var(--base-content);
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+.hero__accordion-item__content {
+	padding: 0 10px;
+	display: grid;
+	grid-template-rows: 0fr;
+	transition:
+		grid-template-rows 0.3s ease,
+		padding 0.3s ease;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+.hero__accordion-item__content__inner {
+	color: var(--neutral-content);
+	overflow: hidden;
+	margin: 0;
+}

src/styles/_file-input.css

@@ -0,0 +1,22 @@
+.file-input {
+	height: 3rem;
+	padding-inline-end: 1rem;
+	font-size: 0.875rem;
+	line-height: 2;
+	border-width: 1px;
+	border-color: var(--accent);
+	border-radius: 0.5rem;
+	background-color: var(--header-bg);
+	flex-shrink: 1;
+}
+
+.file-input::file-selector-button {
+	color: var(--header-bg);
+	font-weight: 600;
+	text-transform: uppercase;
+	text-align: center;
+	background-color: var(--accent);
+	cursor: pointer;
+	height: 100%;
+	padding: 0 1rem;
+}