From fd60130b41edcd636b062de214cf2d837b1bc16e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 1 Dec 2020 12:37:47 +0800
Subject: [PATCH] Add CTA and sign in to nav

---
 www/components/Nav/index.tsx | 81 +++++++++++++++++++++++-------------
 www/components/button.tsx    |  4 +-
 2 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 91eaaf53416..1f53ae19c89 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -132,30 +132,63 @@ const Nav = (props: Props) => {
         
         <HamburgerButton toggleFlyOut={() => setOpen(true)} />
 
-        <div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-start">
-          <div className="flex-shrink-0 flex items-center">
-            <img
-              className="block lg:hidden h-6 w-auto"
-              src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
-              alt="Logo"
-            />
-            <img
-              className="hidden lg:block h-6 w-auto"
-              src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
-              alt="Logo"
-            />
+        <div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-between">
+          <div className="flex items-center">
+            <div className="flex-shrink-0 flex items-center">
+              <img
+                className="block lg:hidden h-6 w-auto"
+                src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
+                alt="Logo"
+              />
+              <img
+                className="hidden lg:block h-6 w-auto"
+                src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
+                alt="Logo"
+              />
+            </div>
+            <div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
+              <FlyOut />
+              <a
+                href="#"
+                className={`
+                  inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
+                  text-gray-500 hover:text-gray-700 hover:border-gray-500
+                  dark:text-dark-100 dark:hover:border-dark-100
+                `}
+              >
+                Developers
+              </a>
+              <a
+                href="#"
+                className={`
+                  inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
+                  text-gray-500 hover:text-gray-700 hover:border-gray-500
+                  dark:text-dark-100 dark:hover:border-dark-100
+                `}
+              >
+                Company
+              </a>
+              <a
+                href="#"
+                className={`
+                  inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
+                  text-gray-500 hover:text-gray-700 hover:border-gray-500
+                  dark:text-dark-100 dark:hover:border-dark-100
+                `}
+              >
+                Pricing
+              </a>
+            </div>
           </div>
-          <div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
-            <FlyOut />
+          <div className="flex items-center">
             <a
               href="#"
               className={`
-                inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
-                text-gray-500 hover:text-gray-700 hover:border-gray-500
-                dark:text-dark-100 dark:hover:border-dark-100
+                inline-flex items-center border-b-2 border-transparent text-sm font-normal transition
+                rounded-md px-3 py-1 mr-5 bg-brand-600 text-gray-500 dark:text-white hover:bg-brand-700
               `}
             >
-              Developers
+              Start a project
             </a>
             <a
               href="#"
@@ -165,17 +198,7 @@ const Nav = (props: Props) => {
                 dark:text-dark-100 dark:hover:border-dark-100
               `}
             >
-              Company
-            </a>
-            <a
-              href="#"
-              className={`
-                inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
-                text-gray-500 hover:text-gray-700 hover:border-gray-500
-                dark:text-dark-100 dark:hover:border-dark-100
-              `}
-            >
-              Pricing
+              Sign in
             </a>
           </div>
         </div>
diff --git a/www/components/button.tsx b/www/components/button.tsx
index aa1f129f30d..454de5d7635 100644
--- a/www/components/button.tsx
+++ b/www/components/button.tsx
@@ -3,6 +3,7 @@ type Props = {
   text: string,
   url?: string,
   className?: string,
+  hideArrow?: boolean,
 }
 
 const Button = (props: Props) => {
@@ -10,7 +11,8 @@ const Button = (props: Props) => {
     type = 'primary',
     text, 
     url,
-    className
+    className,
+    hideArrow = false,
   } = props
 
   const colorClass = type === 'primary'