reusable section component, highlighting the last word in the title

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/routes/index.tsx

@@ -1,87 +1,26 @@
 import { createFileRoute } from "@tanstack/react-router";
+import Section from "#/components/Section.tsx";
 
 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">*/}
+			<Section
-			{/*  <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%)]" />*/}
+				title="A Unique Chess Publication Service"
-			{/*  <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%)]" />*/}
+				smallTitle="FEATURES"
-			{/*  <p className="island-kicker mb-3">TanStack Start Base Template</p>*/}
+				description="Convert your chess PGN files into a publishable PDF, complete with diagrams of chosen positions."
-			{/*  <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.*/}
+				<p>section content</p>
-			{/*  </h1>*/}
+			</Section>
-			{/*  <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">*/}
+			<Section
-			{/*  {[*/}
+				title="Your Questions Answered"
-			{/*    [*/}
+				smallTitle="FAQs"
-			{/*      'Type-Safe Routing',*/}
+				description="Below we answer some of the most common questions we get regarding this service."
-			{/*      'Routes and links stay in sync across every page.',*/}
+			>
-			{/*    ],*/}
+				<p>section content</p>
-			{/*    [*/}
+			</Section>
-			{/*      '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>
 	);
 }