From a207ede1c3d6d8400f5ee918da515dc085ff8df0 Mon Sep 17 00:00:00 2001
From: Arya Bose <48602032+NeilDogii@users.noreply.github.com>
Date: Tue, 16 Dec 2025 16:24:15 +0530
Subject: [PATCH] refactor(layout): fix semantic structure and clean up
 Tailwind warnings

- Move <main> out of <div> to follow correct HTML semantics
- Replace <a> tags with Next.js <Link> component for proper routing
- Use predefined Tailwind utility values instead of custom ones to remove warnings
---
 .../templates/app-tw/ts/app/page.tsx          | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/create-next-app/templates/app-tw/ts/app/page.tsx b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
index 295f8fdf14fcf..a3d027f2e5819 100644
--- a/packages/create-next-app/templates/app-tw/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
@@ -1,9 +1,10 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+    <main className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <div className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
         <Image
           className="dark:invert"
           src="/next.svg"
@@ -18,28 +19,31 @@ export default function Home() {
           </h1>
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
             Looking for a starting point or more instructions? Head over to{" "}
-            <a
+            <Link
               href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
+              prefetch={false}
             >
               Templates
-            </a>{" "}
+            </Link>{" "}
             or the{" "}
-            <a
+            <Link
               href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
+              prefetch={false}
             >
               Learning
-            </a>{" "}
+            </Link>{" "}
             center.
           </p>
         </div>
         <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+          <Link
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-39.5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
+            prefetch={false}
           >
             <Image
               className="dark:invert"
@@ -49,17 +53,19 @@ export default function Home() {
               height={16}
             />
             Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+          </Link>
+          <Link
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/8 px-5 transition-colors hover:border-transparent hover:bg-black/4 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-39.5"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
+            prefetch={false}
           >
             Documentation
-          </a>
+          </Link>
         </div>
-      </main>
-    </div>
+      </div>
+    </main>
   );
 }
+