From 7e52e51db1bddd68e139b203087ea57fd1893810 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 18 Jul 2023 15:56:43 -0400
Subject: [PATCH 1/4] update website text and design

---
 web/app/download/page.tsx   | 30 +++++++++++------------
 web/app/download/signup.tsx |  6 ++---
 web/app/header.tsx          | 24 +++++++++++++++++++
 web/app/page.tsx            | 48 ++++++++++++++++++-------------------
 4 files changed, 64 insertions(+), 44 deletions(-)
 create mode 100644 web/app/header.tsx

diff --git a/web/app/download/page.tsx b/web/app/download/page.tsx
index 17d89d0b..2ba7fedf 100644
--- a/web/app/download/page.tsx
+++ b/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'>
-      <img src='/ollama.png' className='w-16 h-auto' />
-      <section className='my-12 text-center'>
-        <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading Ollama</h2>
-        <h3 className='text-sm text-neutral-500'>
-          Problems downloading?{' '}
-          <a href={asset.browser_download_url} className='underline'>
-            Try again
-          </a>
-        </h3>
-        <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>
+    <>
+      <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='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]'>
+            While Ollama downloads, sign up to get notified of new updates.
+          </h3>
+          {/* <Downloader url={asset.browser_download_url} /> */}
+        </section>
         <Signup />
-      </section>
-    </main>
+      </main>
+    </>
   )
 }
diff --git a/web/app/download/signup.tsx b/web/app/download/signup.tsx
index 4cdecef9..14d22ede 100644
--- a/web/app/download/signup.tsx
+++ b/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>
diff --git a/web/app/header.tsx b/web/app/header.tsx
new file mode 100644
index 00000000..e1d542dc
--- /dev/null
+++ b/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 >
+  )
+}
\ No newline at end of file
diff --git a/web/app/page.tsx b/web/app/page.tsx
index ecb0e9e9..c3d00a22 100644
--- a/web/app/page.tsx
+++ b/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'>
-      <img src='/ollama.png' className='w-16 h-auto' />
-      <section className='my-4'>
-        <p className='my-3 max-w-md'>
-          <a className='underline' href='https://github.com/jmorganca/ollama'>
-            Ollama
-          </a>{' '}
-          is a tool for running large language models, currently for macOS with Windows and Linux coming soon.
-          <br />
-          <br />
-          <a href='/download'>
-            <button className='bg-black text-white text-sm py-2 px-3 rounded-lg flex items-center gap-2'>
-              <AiFillApple className='h-auto w-5 relative -top-px' /> Download for macOS
-            </button>
-          </a>
-        </p>
-      </section>
-      <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>
+    <>
+      <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'>
+          <div className='flex flex-col space-y-2'>
+            <h2 className='max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
+            <h3 className='max-w-xs mx-auto text-base text-neutral-500'>
+              Bundle a model’s weights, configuration, prompts, data and more into self-contained packages that run anywhere.
+            </h3>
           </div>
-        ))}
-      </section>
-    </main>
+          <div className='mx-auto flex flex-col space-y-4 mt-12'>
+            <a href='/download' className='mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
+              Download
+            </a>
+            <p className='text-neutral-500 text-sm'>
+            Available for macOS with Apple Silicon <br />
+            Windows & Linux support coming soon.
+            </p>
+          </div>
+        </section>
+      </main>
+    </>
   )
 }

From 576ae644de669e36606ee32dc0e0963477a14403 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 18 Jul 2023 15:57:39 -0400
Subject: [PATCH 2/4] enable downloader

---
 web/app/download/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/download/page.tsx b/web/app/download/page.tsx
index 2ba7fedf..6c2e3f1f 100644
--- a/web/app/download/page.tsx
+++ b/web/app/download/page.tsx
@@ -36,7 +36,7 @@ export default async function Download() {
           <h3 className='text-base text-neutral-500 mt-12 max-w-[16rem]'>
             While Ollama downloads, sign up to get notified of new updates.
           </h3>
-          {/* <Downloader url={asset.browser_download_url} /> */}
+          <Downloader url={asset.browser_download_url} />
         </section>
         <Signup />
       </main>

From df67a90e644f0c406b2c03d60741e4c19ef6da34 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 18 Jul 2023 16:02:45 -0400
Subject: [PATCH 3/4] fix css

---
 web/app/download/signup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/download/signup.tsx b/web/app/download/signup.tsx
index 14d22ede..99558d87 100644
--- a/web/app/download/signup.tsx
+++ b/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 md:mx-[10rem] lg:mx-[18rem]'
+      className='flex self-stretch flex-col gap-3 h-32 md:mx-40 lg:mx-72'
     >
       <input
         required

From d1f89778e92e00dc2e5dd2ee5f2bfee407ef0718 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 18 Jul 2023 16:17:42 -0400
Subject: [PATCH 4/4] fix css on smaller screen

---
 web/app/download/page.tsx |  2 +-
 web/app/page.tsx          | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/app/download/page.tsx b/web/app/download/page.tsx
index 6c2e3f1f..3b82199a 100644
--- a/web/app/download/page.tsx
+++ b/web/app/download/page.tsx
@@ -29,7 +29,7 @@ export default async function Download() {
   return (
     <>
       <Header />
-      <main className='flex min-h-screen max-w-6xl flex-col p-20 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' />
         <section className='mt-12 mb-8 text-center'>
           <h2 className='my-2 max-w-md text-3xl tracking-tight'>Downloading...</h2>
diff --git a/web/app/page.tsx b/web/app/page.tsx
index c3d00a22..b41ad0ea 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -7,20 +7,20 @@ export default async function Home() {
   return (
     <>
       <Header />
-      <main className='flex min-h-screen max-w-6xl flex-col p-20 lg: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' />
         <section className='my-12 text-center'>
           <div className='flex flex-col space-y-2'>
-            <h2 className='max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
-            <h3 className='max-w-xs mx-auto text-base text-neutral-500'>
+            <h2 className='md:max-w-[18rem] mx-auto my-2 text-3xl tracking-tight'>Portable large language models</h2>
+            <h3 className='md:max-w-xs mx-auto text-base text-neutral-500'>
               Bundle a model’s weights, configuration, prompts, data and more into self-contained packages that run anywhere.
             </h3>
           </div>
           <div className='mx-auto flex flex-col space-y-4 mt-12'>
-            <a href='/download' className='mx-14 bg-black text-white rounded-full px-4 py-2 focus:outline-none cursor-pointer'>
+            <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'>
               Download
             </a>
-            <p className='text-neutral-500 text-sm'>
+            <p className='text-neutral-500 text-sm '>
             Available for macOS with Apple Silicon <br />
             Windows & Linux support coming soon.
             </p>