fix page transitions flickering

This commit is contained in:
Eva Ho 2023-07-19 10:19:24 -04:00
parent 4ca7c4be1f
commit f08c050e57
3 changed files with 22 additions and 19 deletions

View file

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

View file

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

View file

@ -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' import Header from './header'
export default async function Home() { export default async function Home() {
@ -8,7 +8,7 @@ export default async function Home() {
<> <>
<Header /> <Header />
<main className='flex min-h-screen max-w-6xl flex-col py-20 px-16 md:p-32 items-center mx-auto'> <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'> <section className='my-12 text-center'>
<div className='flex flex-col space-y-2'> <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> <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> </h3>
</div> </div>
<div className='mx-auto flex flex-col space-y-4 mt-12'> <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 Download
</a> </Link>
<p className='text-neutral-500 text-sm '> <p className='text-neutral-500 text-sm '>
Available for macOS with Apple Silicon <br /> Available for macOS with Apple Silicon <br />
Windows & Linux support coming soon. Windows & Linux support coming soon.