fix page transitions flickering

web/app/download/page.tsx

@@ -1,3 +1,5 @@
+import Image from 'next/image'
+
 import Header from '../header'
 import Downloader from './downloader'
 import Signup from './signup'
@@ -30,7 +32,7 @@ export default async function Download() {
     <>
       <Header />
       <main className='flex min-h-screen max-w-6xl flex-col py-20 px-16 lg:p-32 items-center mx-auto'>
-        <img src='/ollama.png' className='w-16 h-auto' />
+        <Image src='/ollama.png' width={64} height={64} alt='ollamaIcon' />
         <section className='mt-12 mb-8 text-center'>
           <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading...</h2>
           <h3 className='text-base text-neutral-500 mt-12 max-w-[16rem]'>

web/app/header.tsx

@@ -1,24 +1,25 @@
+import Link from "next/link"
+
 const navigation = [
-  { name: 'Discord', href: 'https://discord.gg/MrfB5FbNWN' },
-  { name: 'GitHub', href: 'https://github.com/jmorganca/ollama' },
+  { name: 'Github', href: 'https://github.com/jmorganca/ollama' },
   { name: 'Download', href: '/download' },
 ]
 
-export default function Header() {
+export default function Header() {  
   return (
-    <header className='absolute inset-x-0 top-0 z-50'>
-      <nav className='mx-auto flex items-center justify-between px-10 py-4'>
-        <a className='flex-1 font-bold' href='/'>
+    <header className="absolute inset-x-0 top-0 z-50">
+      <nav className="mx-auto flex items-center justify-between px-10 py-4">        
+        <Link className="flex-1 font-bold" href="/">
           Ollama
-        </a>
-        <div className='flex space-x-8'>
-          {navigation.map(item => (
-            <a key={item.name} href={item.href} className='text-sm leading-6 text-gray-900'>
+        </Link>
+        <div className="flex space-x-8">
+          {navigation.map((item) => (
+            <Link key={item.name} href={item.href} className="text-sm leading-6 text-gray-900">
               {item.name}
-            </a>
+            </Link>
           ))}
         </div>
       </nav>
-    </header>
+    </header >
   )
-}
+}

web/app/page.tsx

@@ -1,6 +1,6 @@
-import { AiFillApple } from 'react-icons/ai'
+import Image from 'next/image'
+import Link from 'next/link'
 
-import models from '../../models.json'
 import Header from './header'
 
 export default async function Home() {
@@ -8,7 +8,7 @@ export default async function Home() {
     <>
       <Header />
       <main className='flex min-h-screen max-w-6xl flex-col py-20 px-16 md:p-32 items-center mx-auto'>
-        <img src='/ollama.png' className='w-16 h-auto' />
+        <Image src='/ollama.png' width={64} height={64} alt='ollamaIcon' />
         <section className='my-12 text-center'>
           <div className='flex flex-col space-y-2'>
             <h2 className='md:max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
@@ -17,9 +17,9 @@ export default async function Home() {
             </h3>
           </div>
           <div className='mx-auto flex flex-col space-y-4 mt-12'>
-            <a href='/download' className='md:mx-10 lg:mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
+            <Link href='/download' className='md:mx-10 lg:mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
               Download
-            </a>
+            </Link>
             <p className='text-neutral-500 text-sm '>
             Available for macOS with Apple Silicon <br />
             Windows & Linux support coming soon.