perf: avoid layout re-rendering

components/custom/background/background.tsx

@@ -1,9 +0,0 @@
-import { Tiles } from './tile/tiles';
-
-type BackgroundProps = {
-  children: React.ReactNode;
-};
-
-export function Background({ children }: BackgroundProps) {
-  return <Tiles>{children}</Tiles>;
-}

components/custom/customLink.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Button } from '../ui/button';
 
 type LinkProps = {
@@ -5,10 +6,10 @@ type LinkProps = {
   text: string;
 };
 
-export function Link({ path, text }: LinkProps) {
+export function CustomLink({ path, text }: LinkProps) {
   return (
     <Button asChild>
-      <a href={path}>{text}</a>
+      <Link href={path}>{text}</Link>
     </Button>
   );
 }

components/custom/footer.tsx

@@ -1,5 +1,6 @@
+import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Link } from './link';
+import { CustomLink } from './customLink';
 
 const links = [{ name: 'Subscribe', path: '/' }];
 
@@ -11,12 +12,12 @@ function Footer() {
       {pathname === '/' ? (
         <p className='text-center text-xs text-gray-600'>
           By subscribing, you agree to our{' '}
-          <a
+          <Link
             className='font-medium text-indigo-600 hover:text-indigo-500'
             href='/privacy'
           >
             Privacy Policy
-          </a>
+          </Link>
           .
         </p>
       ) : (
@@ -25,11 +26,11 @@ function Footer() {
             link =>
               pathname !== link.path &&
               !(pathname === '/confirmation' && link.path === '/') && (
-                <Link key={link.path} path={link.path} text={link.name} />
+                <CustomLink key={link.path} path={link.path} text={link.name} />
               )
           )}
           {pathname === '/privacy' && (
-            <Link path='/unsubscribe' text='Unsubscribe' />
+            <CustomLink path='/unsubscribe' text='Unsubscribe' />
           )}
         </ul>
       )}

components/custom/tiles/tiles.tsx

@@ -3,8 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { NewsTile, NewsTileSchema } from '../../../../utils/schemas';
-import { Tile } from './tile';
+import { NewsTile, NewsTileSchema } from '../../../utils/schemas';
+import { Tile } from './components/tile';
 
 type TilesProps = {
   children: React.ReactNode;