fix: format description strings and improve CSS module declaration

Author: Frotas

src/app/page.tsx

@@ -4,7 +4,8 @@ import Link from "next/link";
 const links = [
   {
     title: "Documentação",
-    description: "Referência completa do Next.js (App Router, Data Fetching, etc.).",
+    description:
+      "Referência completa do Next.js (App Router, Data Fetching, etc.).",
     href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app",
   },
   {
@@ -27,8 +28,7 @@ const links = [
 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 bg-white px-16 py-32 dark:bg-black sm:items-start">        
-        {/* Header / Brand */}
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between bg-white px-16 py-32 dark:bg-black sm:items-start">
         <div className="flex items-center gap-3">
           <Image
             className="dark:invert"
@@ -38,20 +38,30 @@ export default function Home() {
             height={20}
             priority
           />
-          <span className="rounded-full border border-black/[.08] px-3 py-1 text-sm font-medium text-zinc-700 dark:border-white/[.145] dark:text-zinc-300">
+          <span className="rounded-full border border-black/8 px-3 py-1 text-sm font-medium text-zinc-700 dark:border-white/[.145] dark:text-zinc-300">
             App Router + Tailwind
           </span>
         </div>
-        {/* Hero */}
+
         <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
           <h1 className="max-w-md text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
             Template base do Next.js (App Router)
           </h1>
 
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Comece editando <code className="font-medium text-zinc-950 dark:text-zinc-50">app/page.tsx</code>.
-            Este layout é compatível com <span className="font-medium text-zinc-950 dark:text-zinc-50">Codespaces</span>{" "}
-            e <span className="font-medium text-zinc-950 dark:text-zinc-50">DevContainer</span>.
+            Comece editando{" "}
+            <code className="font-medium text-zinc-950 dark:text-zinc-50">
+              app/page.tsx
+            </code>
+            . Este layout é compatível com{" "}
+            <span className="font-medium text-zinc-950 dark:text-zinc-50">
+              Codespaces
+            </span>{" "}
+            e{" "}
+            <span className="font-medium text-zinc-950 dark:text-zinc-50">
+              DevContainer
+            </span>
+            .
           </p>
 
           <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
@@ -61,7 +71,7 @@ export default function Home() {
                 href={item.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group rounded-2xl border border-black/[.08] p-5 transition-colors hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
+                className="group rounded-2xl border border-black/8 p-5 transition-colors hover:bg-black/4 dark:border-white/[.145] dark:hover:bg-[#1a1a1a]"
               >
                 <div className="flex items-center justify-between gap-4">
                   <h2 className="text-base font-semibold text-zinc-950 dark:text-zinc-50">
@@ -78,10 +88,10 @@ export default function Home() {
             ))}
           </div>
         </div>
-        {/* CTA */}
+
         <div className="mt-4 flex flex-col gap-4 text-base font-medium sm:flex-row">
           <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-[158px]"
+            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"
@@ -96,7 +106,7 @@ export default function Home() {
             Deploy
           </Link>
           <Link
-            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]"
+            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"
@@ -107,4 +117,5 @@ export default function Home() {
       </main>
     </div>
   );
-}
+}
+

src/types/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";