update website text and design

web/app/download/page.tsx

@@ -1,3 +1,4 @@
+import Header from '../header'
 import Downloader from './downloader'
 import Signup from './signup'
 
@@ -26,22 +27,19 @@ export default async function Download() {
   }
 
   return (
-    <main className='flex min-h-screen max-w-2xl flex-col p-4 lg:p-24 items-center mx-auto'>
+    <>
+      <Header />
+      <main className='flex min-h-screen max-w-6xl flex-col p-20 lg:p-32 items-center mx-auto'>
         <img src='/ollama.png' className='w-16 h-auto' />
-      <section className='my-12 text-center'>
+        <section className='mt-12 mb-8 text-center'>
-        <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading Ollama</h2>
+          <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading...</h2>
-        <h3 className='text-sm text-neutral-500'>
+          <h3 className='text-base text-neutral-500 mt-12 max-w-[16rem]'>
-          Problems downloading?{' '}
+            While Ollama downloads, sign up to get notified of new updates.
-          <a href={asset.browser_download_url} className='underline'>
-            Try again
-          </a>
           </h3>
-        <Downloader url={asset.browser_download_url} />
+          {/* <Downloader url={asset.browser_download_url} /> */}
         </section>
-      <section className='max-w-sm flex flex-col w-full items-center border border-neutral-200 rounded-xl px-8 pt-8 pb-2'>
-        <p className='text-lg leading-tight text-center mb-6 max-w-[260px]'>Sign up for updates</p>
         <Signup />
-      </section>
       </main>
+    </>
   )
 }

web/app/download/signup.tsx

@@ -28,7 +28,7 @@ export default function Signup() {
 
         return false
       }}
-      className='flex self-stretch flex-col gap-3 h-32'
+      className='flex self-stretch flex-col gap-3 h-32 md:mx-[10rem] lg:mx-[18rem]'
     >
       <input
         required
@@ -37,13 +37,13 @@ export default function Signup() {
         onChange={e => setEmail(e.target.value)}
         type='email'
         placeholder='your@email.com'
-        className='bg-neutral-100 rounded-lg px-4 py-2 focus:outline-none placeholder-neutral-500'
+        className='border border-neutral-200 rounded-lg px-4 py-2 focus:outline-none placeholder-neutral-300'
       />
       <input
         type='submit'
         value='Get updates'
         disabled={submitting}
-        className='bg-black text-white disabled:text-neutral-200 disabled:bg-neutral-700 rounded-lg px-4 py-2 focus:outline-none cursor-pointer'
+        className='bg-black text-white disabled:text-neutral-200 disabled:bg-neutral-700 rounded-full px-4 py-2 focus:outline-none cursor-pointer'
       />
       {success && <p className='text-center text-sm'>You&apos;re signed up for updates</p>}
     </form>

web/app/header.tsx

@@ -0,0 +1,24 @@
+
+const navigation = [
+  { name: 'Github', href: 'https://github.com/jmorganca/ollama' },
+  { name: 'Download', href: '/download' },
+]
+
+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="/">
+          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">
+              {item.name}
+            </a>
+          ))}
+        </div>
+      </nav>
+    </header >
+  )
+}

web/app/page.tsx

@@ -1,34 +1,32 @@
 import { AiFillApple } from 'react-icons/ai'
 
 import models from '../../models.json'
+import Header from './header'
 
 export default async function Home() {
   return (
-    <main className='flex min-h-screen max-w-2xl flex-col p-4 lg:p-24'>
+    <>
+      <Header />
+      <main className='flex min-h-screen max-w-6xl flex-col p-20 lg:p-32 items-center mx-auto'>
         <img src='/ollama.png' className='w-16 h-auto' />
-      <section className='my-4'>
+        <section className='my-12 text-center'>
-        <p className='my-3 max-w-md'>
+          <div className='flex flex-col space-y-2'>
-          <a className='underline' href='https://github.com/jmorganca/ollama'>
+            <h2 className='max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
-            Ollama
+            <h3 className='max-w-xs mx-auto text-base text-neutral-500'>
-          </a>{' '}
+              Bundle a model’s weights, configuration, prompts, data and more into self-contained packages that run anywhere.
-          is a tool for running large language models, currently for macOS with Windows and Linux coming soon.
+            </h3>
-          <br />
+          </div>
-          <br />
+          <div className='mx-auto flex flex-col space-y-4 mt-12'>
-          <a href='/download'>
+            <a href='/download' className='mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
-            <button className='bg-black text-white text-sm py-2 px-3 rounded-lg flex items-center gap-2'>
+              Download
-              <AiFillApple className='h-auto w-5 relative -top-px' /> Download for macOS
+            </a>
-            </button>
+            <p className='text-neutral-500 text-sm'>
-          </a>
+            Available for macOS with Apple Silicon <br />
-        </p>
+            Windows & Linux support coming soon.
-      </section>
+            </p>
-      <section className='my-4'>
-        <h2 className='mb-4 text-lg'>Example models you can try running:</h2>
-        {models.map(m => (
-          <div className='my-2 grid font-mono' key={m.name}>
-            <code className='py-0.5'>ollama run {m.name}</code>
           </div>
-        ))}
         </section>
       </main>
+    </>
   )
 }