[cdn] updating pages based on the design recommendations (#1391)

### Description
Updating the examples to adhere to the design guidelines

### Type of Change

- [ ] New Example
- [x] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

Author: raochand

cdn/custom-error-pages-app-dir/app/500/page.tsx

@@ -12,7 +12,7 @@ export default function ServerError() {
       <p className="mt-2 text-sm text-gray-500">
         Error: ::vercel:ERROR_CODE::
       </p>
-      <a href="/" className="mt-6 text-blue-600 hover:underline">
+      <a href="/" className="mt-6 text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 rounded">
         Go back home
       </a>
     </div>

cdn/custom-error-pages-app-dir/app/504/page.tsx

@@ -12,7 +12,7 @@ export default function GatewayTimeout() {
       <p className="mt-2 text-sm text-gray-500">
         Error: ::vercel:ERROR_CODE::
       </p>
-      <a href="/" className="mt-6 text-blue-600 hover:underline">
+      <a href="/" className="mt-6 text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 rounded">
         Go back home
       </a>
     </div>

cdn/custom-error-pages-app-dir/app/page.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 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-16 px-8 bg-white dark:bg-black sm:items-start sm:px-16 sm:py-24">
+      <main className="flex w-full max-w-3xl flex-col items-center gap-8 py-12 px-8 bg-white dark:bg-black sm:items-start sm:px-16">
         <Image
           className="dark:invert"
           src="/vercel.svg"
@@ -13,7 +13,7 @@ export default function Home() {
           priority
         />
         <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+          <h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black text-balance dark:text-zinc-50">
             Custom Error Pages with App Router
           </h1>
           <p className="max-w-lg text-base leading-7 text-zinc-600 dark:text-zinc-400">
@@ -67,21 +67,21 @@ export default function Home() {
         </div>
         <div className="flex flex-col gap-4 text-base font-medium sm:flex-row sm:flex-wrap">
           <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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:hover:bg-[#ccc] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="/slow-page"
           >
             Trigger Timeout
           </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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="https://github.com/vercel/examples/tree/main/cdn/custom-error-pages-app-dir"
             target="_blank"
             rel="noopener noreferrer"
           >
             View Source
           </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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="https://vercel.com/docs/custom-error-pages"
             target="_blank"
             rel="noopener noreferrer"

cdn/custom-error-pages-public-dir/app/page.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 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-16 px-8 bg-white dark:bg-black sm:items-start sm:px-16 sm:py-24">
+      <main className="flex w-full max-w-3xl flex-col items-center gap-8 py-12 px-8 bg-white dark:bg-black sm:items-start sm:px-16">
         <Image
           className="dark:invert"
           src="/vercel.svg"
@@ -13,7 +13,7 @@ export default function Home() {
           priority
         />
         <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+          <h1 className="max-w-lg text-3xl font-semibold leading-10 tracking-tight text-black text-balance dark:text-zinc-50">
             Custom Error Pages with Public Directory
           </h1>
           <p className="max-w-lg text-base leading-7 text-zinc-600 dark:text-zinc-400">
@@ -67,21 +67,21 @@ export default function Home() {
         </div>
         <div className="flex flex-col gap-4 text-base font-medium sm:flex-row sm:flex-wrap">
           <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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:hover:bg-[#ccc] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="/slow-page"
           >
             Trigger Timeout
           </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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="https://github.com/vercel/examples/tree/main/cdn/custom-error-pages-public-dir"
             target="_blank"
             rel="noopener noreferrer"
           >
             View Source
           </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] sm:w-auto"
+            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] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-950 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] dark:focus-visible:ring-zinc-300 sm:w-auto"
             href="https://vercel.com/docs/custom-error-pages"
             target="_blank"
             rel="noopener noreferrer"

cdn/custom-error-pages-public-dir/public/500.html

@@ -39,10 +39,15 @@
       margin-top: 1.5rem;
       color: #2563eb;
       text-decoration: none;
+      border-radius: 0.25rem;
     }
     a:hover {
       text-decoration: underline;
     }
+    a:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
+    }
   </style>
 </head>
 <body>

cdn/custom-error-pages-public-dir/public/504.html

@@ -39,10 +39,15 @@
       margin-top: 1.5rem;
       color: #2563eb;
       text-decoration: none;
+      border-radius: 0.25rem;
     }
     a:hover {
       text-decoration: underline;
     }
+    a:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
+    }
   </style>
 </head>
 <body>