From fbb8f3c0cd725c3ad759b46e6c13e1e0a0c39c39 Mon Sep 17 00:00:00 2001
From: stpn48 <133258815+stpn48@users.noreply.github.com>
Date: Sun, 29 Dec 2024 11:36:20 +0100
Subject: [PATCH] feat: improve accessibility and layout on home page

---
 src/app/page.tsx | 73 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d093b4..602db61 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,36 +3,63 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
-      <main className="flex flex-grow flex-col items-center justify-center">
-        <div>
-          Hi. I&apos;m{" "}
-          <a
-            href="https://twitter.com/t3dotgg"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:underline"
+      <main
+        className="flex flex-grow flex-col items-center justify-center gap-4"
+        role="main"
+      >
+        <section className="text-center" aria-labelledby="introduction">
+          <h1 id="introduction">
+            Hi. I&apos;m{" "}
+            <a
+              href="https://twitter.com/t3dotgg"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:underline"
+              aria-label="Theo's Twitter profile"
+            >
+              Theo
+            </a>
+            . I built these tools because I was annoyed they did not exist.
+          </h1>
+        </section>
+
+        <nav className="flex flex-col text-center" aria-label="Main navigation">
+          <Link
+            href="/svg-to-png"
+            className="text-blue-500 hover:underline"
+            aria-label="SVG to PNG converter"
+          >
+            SVG to PNG converter
+          </Link>
+
+          <Link
+            href="/square-image"
+            className="text-blue-500 hover:underline"
+            aria-label="Square image generator"
           >
-            Theo
-          </a>
-          . I built these tools because I was annoyed they did not exist.
-        </div>
-        <div className="mt-4"></div>
-        <Link href="/svg-to-png" className="text-blue-500 hover:underline">
-          SVG to PNG converter
-        </Link>
-        <Link href="/square-image" className="text-blue-500 hover:underline">
-          Square image generator
-        </Link>
-        <Link href="/rounded-border" className="text-blue-500 hover:underline">
-          Corner Rounder
-        </Link>
+            Square image generator
+          </Link>
+
+          <Link
+            href="/rounded-border"
+            className="text-blue-500 hover:underline"
+            aria-label="Corner Rounder"
+          >
+            Corner Rounder
+          </Link>
+        </nav>
       </main>
-      <footer className="mt-8 text-center text-sm text-gray-500">
+
+      <footer
+        className="mt-8 text-center text-sm text-gray-500"
+        aria-label="Footer"
+      >
         <a
           href="https://github.com/t3dotgg/quickpic"
           target="_blank"
           rel="noopener noreferrer"
           className="hover:underline"
+          aria-label="View the project on GitHub"
         >
           View on GitHub
         </a>